/* docs.joinhans.io/brandkit — the page chrome is HANS brand v2 (the kit + docs.css); each brand section carries its own
   --b-* tokens, so Luma, IRIS and Superseed keep their own look inside their sections. Cards here are "solid" glass (a
   denser fill, no backdrop filter): the page has dozens of them over the animating stars. */
.bk-page{max-width:1240px;margin:0 auto;padding:calc(var(--head) + 46px) var(--edge) 0}
.bk-intro{max-width:920px}
.bk-intro h1{margin:0 0 22px;font:700 clamp(40px,5.4vw,78px)/1 var(--display);letter-spacing:-.055em;color:#fff;text-wrap:balance;animation:docs-headline 1s var(--hv-ease) .04s backwards}
.bk-lead{max-width:760px;margin:0 0 32px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--hv-muted);animation:docs-in .8s var(--hv-ease) .2s both}
.bk-intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;animation:docs-in .8s var(--hv-ease) .3s both}
.bk-intro-actions .hv-btn{text-decoration:none}
.bk-zip{font-weight:500;opacity:.6;margin-left:-4px}
.bk-updated{margin-left:6px;font-size:13px;color:var(--hv-dim)}

/* solid glass for the many cards */
.bk-fam,.bk-shared,.bk-logo,.bk-swatch,.bk-grad,.bk-font,.bk-scale,.bk-radius,.bk-effects > div,.bk-principle,.bk-product,.bk-notes,.bk-do,.bk-code,.bk-track{
  position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 46%),rgba(9,20,48,.74);box-shadow:var(--pane-shadow)}
.bk-fam::before,.bk-shared::before,.bk-logo::before,.bk-swatch::before,.bk-grad::before,.bk-font::before,.bk-scale::before,.bk-radius::before,.bk-effects > div::before,.bk-principle::before,.bk-product::before,.bk-notes::before,.bk-do::before,.bk-code::before,.bk-track::before,
.bk-hero::before,.bk-stage::before,.bk-pearl::before,.bk-quotes blockquote::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;background:var(--pane-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* family overview */
.bk-family{margin-top:110px}
.bk-family > h2{margin:0;font:600 clamp(28px,3vw,42px)/1.08 var(--display);letter-spacing:-.045em;color:var(--hv-paper)}
.bk-family > p{max-width:760px;margin:14px 0 28px;font-size:17px;line-height:1.6;color:var(--hv-muted)}
.bk-family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bk-fam{display:flex;flex-direction:column;gap:6px;padding:24px 22px 22px;border-radius:28px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .5s var(--hv-spring)}
.bk-fam > *{position:relative;z-index:3}
.bk-fam::after{content:"";position:absolute;z-index:0;top:-80px;right:-70px;width:180px;height:180px;border-radius:50%;filter:blur(34px);opacity:.55;transition:transform .6s var(--hv-ease),opacity .5s}
.bk-fam.hans::after{background:#3D7BFF}.bk-fam.luma::after{background:#3fb7c9}.bk-fam.iris::after{background:#7b5cff}.bk-fam.superseed::after{background:#57b3af}
.bk-fam:hover::after{transform:scale(1.25);opacity:.85}
.bk-fam .hv-shine{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(170,210,255,.15),rgba(98,160,255,.05) 38%,transparent 62%)}
.bk-fam:hover .hv-shine{opacity:1}
.bk-fam img{width:48px;height:48px;margin-bottom:10px;border-radius:14px;object-fit:cover;transition:transform .6s var(--hv-spring)}
.bk-fam:hover img{transform:rotate(-8deg) scale(1.06)}
.bk-fam.hans img{filter:drop-shadow(0 0 16px rgba(98,160,255,.5))}
.bk-fam b{font:600 17px/1.25 var(--display);letter-spacing:-.025em;color:var(--hv-paper)}
.bk-fam span{font-size:13.5px;line-height:1.5;color:var(--hv-muted)}
.bk-fam i{margin-top:8px;font-style:normal;font-size:12px;line-height:1.5;color:var(--hv-sky)}
.bk-shared{margin-top:16px;padding:26px 28px;border-radius:28px}
.bk-shared > *{position:relative;z-index:3}
.bk-shared h3{margin:0 0 16px;font:600 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-dim)}
.bk-shared ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin:0;padding:0;list-style:none}
.bk-shared li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--hv-muted)}
.bk-shared li::before{content:"";position:absolute;left:1px;top:.62em;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#EAF3FF,#62A0FF);box-shadow:0 0 10px rgba(98,160,255,.7)}
.bk-shared b{color:var(--hv-paper)}

/* the brand toggle: a glass pill group with the kit's sliding lens, sticky under the header */
.bk-bar{position:sticky;top:calc(var(--head) - 4px);z-index:20;display:flex;justify-content:center;margin:84px 0 0;padding:8px 0;pointer-events:none}
.bk-toggle{max-width:100%;pointer-events:auto}
.bk-toggle button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px 0 12px;font-size:14px;font-weight:600}
.bk-toggle button img{width:24px;height:24px;border-radius:8px;object-fit:cover;transition:transform .5s var(--hv-spring)}
.bk-toggle button:hover img{transform:rotate(-8deg) scale(1.08)}
.bk-toggle [aria-selected=true]{color:#fff}

/* brand sections */
.bk-brand{display:none;padding-top:30px}
.bk-brand.on{display:block;animation:bk-in .6s var(--hv-ease) both}
@keyframes bk-in{from{opacity:0;transform:translateY(18px);filter:blur(4px)}}
.bk-hero{position:relative;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;padding:44px;border-radius:32px;overflow:hidden;background:var(--b-backdrop);color:var(--b-text);font-family:var(--b-body);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.bk-hero::before{background:var(--b-edge)}
.bk-hero-logo{width:132px;height:132px;object-fit:contain;border-radius:30px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));transition:transform .6s var(--hv-spring),filter .3s}
.bk-brand[data-brand="hans"] .bk-hero-logo{filter:drop-shadow(0 0 34px rgba(98,160,255,.5)) drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.bk-brand[data-brand="hans"] .bk-hero-logo:hover{transform:rotate(-8deg) scale(1.04);filter:drop-shadow(0 0 46px rgba(140,195,255,.75)) drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.bk-brand[data-brand="iris"] .bk-hero-logo{border-radius:50%;object-fit:cover}
.bk-hero-copy h2{margin:0;font-family:var(--b-display);font-weight:var(--b-display-weight);letter-spacing:var(--b-display-track);font-size:clamp(36px,4.6vw,62px);line-height:1.02;color:var(--b-text)}
.bk-hero-copy i{display:block;margin:10px 0 14px;font:600 12px/1.3 var(--b-body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--b-accent)}
.bk-tagline{display:inline-block;margin:0 0 12px;font-family:var(--b-display);font-weight:var(--b-display-weight);font-size:clamp(17px,1.8vw,23px);letter-spacing:-.02em;line-height:1.25;background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bk-brand.is-light .bk-tagline{background:none;color:var(--b-accent)}
.bk-hero-copy p:not(.bk-tagline){max-width:660px;margin:0 0 20px;line-height:1.6;color:var(--b-text2)}
.bk-hero-links{display:flex;flex-wrap:wrap;gap:8px}
.bk-hero-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--b-ghost-line);background:var(--b-ghost);color:var(--b-ghost-text);font:600 13px var(--b-body);text-decoration:none;transition:transform .45s var(--hv-spring),border-color .2s}
.bk-hero-links a:hover{transform:translateY(-2px);border-color:var(--b-accent);color:var(--b-ghost-text)}

.bk-toc{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.bk-toc a{display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;font:500 13px var(--body);color:var(--hv-muted);text-decoration:none;border:1px solid rgba(160,200,255,.16);background:rgba(10,22,52,.42);transition:color .2s,border-color .2s,background .25s,transform .45s var(--hv-spring)}
.bk-toc a:hover{color:#fff;border-color:rgba(160,200,255,.36);background:var(--lens);transform:translateY(-1px)}

.bk-sec{margin-top:76px;scroll-margin-top:150px}
.bk-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:22px;padding-bottom:16px;position:relative}
.bk-sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(160,200,255,.32),rgba(160,200,255,.06) 60%,transparent)}
.bk-sec-head h3{margin:0;font:600 clamp(24px,2.4vw,32px)/1.12 var(--display);letter-spacing:-.04em;color:var(--hv-paper)}
.bk-sec-head p{margin:0;font-size:14px;color:var(--hv-dim)}
.bk-sub,.bk-pal h4,.bk-product h4,.bk-notes h4{margin:30px 0 12px;font:600 11.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-dim)}
.bk-pal h4{margin-top:24px}

/* logos */
.bk-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.bk-logo{margin:0;border-radius:22px;overflow:hidden;transition:transform .5s var(--hv-spring)}
.bk-logo:hover{transform:translateY(-4px)}
.bk-logo-art{display:grid;place-items:center;height:172px;padding:24px}
.bk-logo-art img{max-width:100%;max-height:112px;object-fit:contain;transition:transform .6s var(--hv-spring)}
.bk-logo:hover .bk-logo-art img{transform:rotate(-6deg) scale(1.05)}
.bk-bg-dark .bk-logo-art{background:radial-gradient(260px 150px at 70% 0,rgba(46,96,220,.36),transparent 70%),#02050D}
.bk-bg-dark .bk-logo-art img{filter:drop-shadow(0 0 22px rgba(98,160,255,.35))}
.bk-bg-deep .bk-logo-art{background:radial-gradient(260px 150px at 30% 100%,rgba(31,79,184,.3),transparent 70%),#02050D}
.bk-bg-light .bk-logo-art{background:#fbfdfd}
.bk-bg-mint .bk-logo-art{background:linear-gradient(125deg,#e1f2f0,#c2ebe8 50%,#93d0cf)}
.bk-bg-ink .bk-logo-art{background:radial-gradient(240px 140px at 70% 0,rgba(87,179,175,.25),transparent 70%),#0b100f}
.bk-bg-violet .bk-logo-art{background:radial-gradient(240px 140px at 70% 0,rgba(123,92,255,.35),transparent 70%),#07060d}
.bk-bg-violet .bk-logo-art img{border-radius:50%;max-height:120px}
.bk-logo figcaption{padding:15px 18px 18px;border-top:1px solid rgba(160,200,255,.1)}
.bk-logo b{display:block;font:600 14.5px var(--body);color:var(--hv-paper)}
.bk-logo figcaption > span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--hv-muted)}
.bk-logo .bk-dl{display:flex;gap:8px;margin-top:12px}
.bk-dl a{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(160,200,255,.24);background:rgba(98,160,255,.08);font:700 11px var(--body);letter-spacing:.1em;color:var(--hv-ice);text-decoration:none;transition:background .2s,border-color .2s,transform .45s var(--hv-spring)}
.bk-dl a:hover{background:rgba(98,160,255,.18);border-color:rgba(160,200,255,.5);transform:translateY(-1px)}
.bk-rules{display:grid;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.bk-rules li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--hv-muted)}
.bk-rules li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#EAF3FF,#62A0FF);box-shadow:0 0 10px rgba(98,160,255,.6)}

/* color */
.bk-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.bk-swatch,.bk-grad{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 10px 15px;border:0;border-radius:20px;text-align:left;font:inherit;color:inherit;cursor:copy;transition:transform .5s var(--hv-spring)}
.bk-swatch:hover,.bk-grad:hover{transform:translateY(-4px)}
.bk-swatch:hover::before,.bk-grad:hover::before{background:linear-gradient(160deg,rgba(235,244,255,.7),rgba(150,195,255,.25) 30%,rgba(150,195,255,.12) 62%,rgba(170,210,255,.5))}
.bk-chip{display:block;width:100%;height:76px;margin-bottom:10px;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 24px -14px rgba(0,0,0,.8)}
.bk-chip.light{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bk-swatch b,.bk-grad b{padding:0 4px;font:600 14px var(--body);color:var(--hv-paper)}
.bk-swatch code{margin:3px 4px 0;padding:1px 7px;font-size:12px}
.bk-swatch i,.bk-grad i{padding:0 4px;font:500 11.5px var(--mono);font-style:normal;color:var(--hv-sky)}
.bk-swatch small,.bk-grad small{margin-top:4px;padding:0 4px;font-size:12.5px;line-height:1.45;color:var(--hv-muted)}
.bk-grads{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.bk-grad-bar{display:block;width:100%;height:64px;margin-bottom:10px;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* type */
.bk-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.bk-font{display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.bk-font-spec{display:flex;align-items:center;gap:18px;min-height:136px;padding:22px;color:var(--hv-paper);background:radial-gradient(300px 160px at 85% 0,rgba(46,96,220,.24),transparent 70%)}
.bk-aa{font-size:64px;line-height:1;letter-spacing:-.03em}
.bk-glyphs{font-size:14px;line-height:1.6;color:var(--hv-ice);word-break:break-all}
.bk-font-meta{display:flex;flex-direction:column;gap:3px;padding:15px 18px 18px;border-top:1px solid rgba(160,200,255,.1)}
.bk-font-meta i{font:600 11px var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--hv-dim)}
.bk-font-meta b{font:600 18px var(--body);color:var(--hv-paper)}
.bk-font-meta span{font-size:13px;color:var(--hv-muted)}
.bk-font-meta small{margin-top:4px;font-size:13px;line-height:1.5;color:var(--hv-muted)}
.bk-scale{border-radius:22px;overflow:hidden}
.bk-table{width:100%;border-collapse:collapse;font-size:14.5px}
.bk-table th{padding:13px 18px 12px;font:600 11.5px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--hv-dim);text-align:left;background:rgba(98,160,255,.045);border-bottom:1px solid rgba(160,200,255,.14)}
.bk-table td{padding:12px 18px;vertical-align:top;color:var(--hv-ice);border-top:1px solid rgba(160,200,255,.08)}
.bk-table tbody tr:first-child td{border-top:0}
.bk-table td:first-child{width:28%;color:var(--hv-paper);font-weight:500}

/* live components: each brand's own tokens (the generic demo) */
.bk-stage{position:relative;padding:36px;border-radius:30px;overflow:hidden;background:var(--b-backdrop);color:var(--b-text);font-family:var(--b-body);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.bk-stage::before{background:var(--b-edge)}
.bk-demo-nav{display:inline-flex;gap:2px;padding:4px;border-radius:13px;border:1px solid var(--b-ghost-line);background:var(--b-ghost)}
.bk-demo-nav span{padding:7px 14px;border-radius:9px;font:500 13px var(--b-body);color:var(--b-text2)}
.bk-demo-nav span.on{background:var(--b-surface);color:var(--b-text);box-shadow:var(--b-halo),inset 0 0 0 1px var(--b-ghost-line)}
.bk-demo-h{margin:24px 0 20px;font-family:var(--b-display);font-weight:var(--b-display-weight);letter-spacing:var(--b-display-track);font-size:clamp(24px,3vw,38px);line-height:1.08;color:var(--b-text);text-transform:none}
.bk-demo-h em{display:block;font-style:normal;background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bk-brand.is-light .bk-demo-h em{background:none;color:var(--b-accent)}
.bk-demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.bk-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--b-btn-radius);background:var(--b-btn);color:var(--b-btn-text);font:600 14px var(--b-body);cursor:pointer;transition:transform .3s var(--b-ease),box-shadow .3s var(--b-ease),filter .3s var(--b-ease)}
.bk-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.bk-btn:active{transform:translateY(1px) scale(.97)}
.bk-btn.ghost{background:var(--b-ghost);color:var(--b-ghost-text);border-color:var(--b-ghost-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bk-btn.ghost:hover{border-color:var(--b-accent);filter:none}
.bk-link{color:var(--b-accent);font:600 14px var(--b-body);text-decoration:none;transition:letter-spacing .3s var(--b-ease)}
.bk-link:hover{color:var(--b-accent);letter-spacing:.02em}
.bk-pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--b-ghost-line);background:var(--b-ghost);font:600 11px var(--b-body);letter-spacing:.08em;text-transform:uppercase;color:var(--b-text2)}
.bk-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.bk-pill.ok{color:var(--b-ok)}.bk-pill.warn{color:var(--b-warn)}.bk-pill.risk{color:var(--b-risk)}
.bk-demo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.bk-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid transparent;border-radius:var(--b-radius);background:var(--b-surface) padding-box,var(--b-edge) border-box;box-shadow:var(--b-halo);transition:transform .35s var(--b-ease),background .3s,box-shadow .3s}
.bk-card:hover{transform:translateY(-3px);background:var(--b-surface-hot) padding-box,var(--b-edge-hot) border-box}
.bk-card small{font:700 10px var(--b-body);letter-spacing:.16em;text-transform:uppercase;color:var(--b-text3)}
.bk-card b{font-family:var(--b-display);font-weight:var(--b-display-weight);font-size:26px;letter-spacing:-.03em;color:var(--b-text);font-variant-numeric:tabular-nums}
.bk-card span{font-size:13px;color:var(--b-text2)}
.bk-grad-text{background:var(--b-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.bk-grad-text,.bk-demo-h em{padding:0 .15em .22em .05em;margin:0 -.15em -.22em -.05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}   /* room for the last glyph and descenders (see the kit's .hv-sh) */
.bk-tagline{padding:0 .15em .22em .05em;margin:0 -.15em calc(12px - .22em) -.05em}
.bk-brand.is-light .bk-grad-text{background:none;color:var(--b-accent)!important}
.bk-field input{height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--b-ghost-line);background:var(--b-ghost);color:var(--b-text);font:600 18px var(--b-display);transition:border-color .2s,box-shadow .2s}
.bk-field input:focus{outline:none;border-color:var(--b-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--b-accent) 18%,transparent)}

/* HANS: the kit itself (states are blue tones + icons + words) */
.bk-kit > *{position:relative;z-index:3}
.bk-kit .hv-pills{display:inline-flex;max-width:100%;margin-bottom:6px}
.bk-kit .bk-demo-h{font-weight:700;letter-spacing:-.05em}
.bk-kit .hv-btn{font-family:var(--hv-body)}
.bk-state{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px 0 11px;border-radius:999px;font:600 13px/1 var(--hv-body);color:var(--hv-ice);border:1px solid rgba(160,200,255,.24);background:rgba(98,160,255,.08)}
.bk-state svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bk-state i{width:8px;height:8px;margin:0 2px;border-radius:50%;background:var(--hv-live);box-shadow:0 0 0 3px rgba(140,190,255,.15),0 0 10px var(--hv-live);animation:docs-pulse 2.4s ease-in-out infinite}
.bk-state.wait{color:var(--hv-muted);border-style:dashed}
.bk-state.done{color:#EAF3FF;background:rgba(98,160,255,.16);border-color:rgba(160,200,255,.42)}
.bk-state.err{color:#fff;background:linear-gradient(180deg,rgba(61,123,255,.4),rgba(31,79,184,.3));border-color:rgba(148,195,255,.6);box-shadow:0 0 18px -6px rgba(98,160,255,.85)}
.bk-kit .bk-demo-cards{align-items:stretch}
.bk-kit .hv-stat{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:20px 22px}
.bk-kit .hv-stat b{font-size:30px}
.bk-kit-tile{display:flex;flex-direction:column;gap:6px;padding:20px 22px}
.bk-kit-tile > *{position:relative;z-index:2}
.bk-kit-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.bk-kit-tile b{font:500 19px/1.2 var(--hv-display);letter-spacing:-.02em;color:var(--hv-paper)}
.bk-kit-tile > span:last-child{font-size:14px;color:var(--hv-muted)}
.bk-kit-field{display:flex;flex-direction:column;justify-content:center;gap:9px}
.bk-kit-field small{font:600 11px var(--hv-body);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-dim)}
.bk-kit-field .hv-input{font-family:var(--hv-display);font-weight:600;font-size:18px}
.bk-kit-field span{font-size:13px;color:var(--hv-dim)}

/* shape & motion */
.bk-radii{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.bk-radius{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:20px}
.bk-radius > *{position:relative;z-index:3}
.bk-radius span{width:64px;height:64px;margin-bottom:12px;background:linear-gradient(160deg,rgba(148,195,255,.36),rgba(98,160,255,.08));border:1px solid rgba(160,200,255,.5);box-shadow:0 0 22px -8px rgba(98,160,255,.7)}
.bk-radius b{font:600 14px var(--body);color:var(--hv-paper)}
.bk-radius small{font-size:12.5px;color:var(--hv-muted)}
.bk-effects{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:16px 0 0}
.bk-effects > div{padding:15px 18px 16px;border-radius:20px}
.bk-effects > div > *{position:relative;z-index:3}
.bk-effects dt{margin-bottom:6px;font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-dim)}
.bk-effects dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--hv-ice);word-break:break-word}
.bk-effects dd code{font-size:11.5px;word-break:break-all}
.bk-motion .bk-effects{margin-top:14px}
.bk-track{height:62px;border-radius:999px;cursor:pointer;overflow:hidden}
.bk-track::after{content:"Hover or focus to play";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--hv-dim);transition:opacity .3s}
.bk-track span{position:absolute;z-index:3;left:11px;top:11px;width:40px;height:40px;border-radius:50%;background:var(--b-btn);box-shadow:0 0 22px color-mix(in srgb,var(--b-accent) 60%,transparent);transition:left 1.1s var(--b-ease),transform 1.1s var(--b-ease)}
.bk-track:hover span,.bk-track:focus-visible span{left:calc(100% - 51px);transform:rotate(360deg)}
.bk-track:hover::after,.bk-track:focus-visible::after{opacity:0}

/* mascot */
.bk-mascot{display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;gap:20px;align-items:start}
.bk-pearl{position:relative;margin:0;padding:30px 28px 24px;border-radius:30px;overflow:hidden;background:var(--b-backdrop);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.bk-pearl-halo{position:absolute;left:50%;top:42%;width:110%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(70,130,255,.34),rgba(40,90,220,.1) 55%,transparent 72%)}
.bk-pearl img{position:relative;display:block;width:min(100%,340px);height:auto;margin:0 auto;filter:drop-shadow(0 34px 40px rgba(0,0,0,.6));animation:bk-bob 5s ease-in-out infinite;transition:transform .6s var(--hv-spring)}
.bk-pearl:hover img{transform:translateY(-6px) rotate(-2deg)}
@keyframes bk-bob{50%{translate:0 -8px}}
.bk-pearl figcaption{position:relative;margin-top:18px;font-size:14px;line-height:1.6;color:var(--hv-muted)}
.bk-pearl figcaption a{color:var(--hv-ice)}
.bk-mascot-copy{display:grid;gap:12px}

/* principles, products, voice, notes, do & don't */
.bk-principles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.bk-principle{padding:22px;border-radius:22px;transition:transform .5s var(--hv-spring)}
.bk-principle > *{position:relative;z-index:3}
.bk-principle:hover{transform:translateY(-4px)}
.bk-principle span{display:inline-block;margin-bottom:12px;font:600 12px var(--display);color:var(--hv-sky)}
.bk-principle b{display:block;margin-bottom:8px;font:600 17px/1.25 var(--display);letter-spacing:-.025em;color:var(--hv-paper)}
.bk-principle p{margin:0;font-size:14px;line-height:1.6;color:var(--hv-muted)}
.bk-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.bk-product,.bk-notes{padding:20px 22px;border-radius:22px}
.bk-product > *,.bk-notes > *{position:relative;z-index:3}
.bk-product h4,.bk-notes h4{margin:0 0 10px}
.bk-product ul,.bk-notes ul{margin:0;padding-left:18px}
.bk-product li,.bk-notes li{margin:6px 0;font-size:14px;line-height:1.6;color:var(--hv-muted)}
.bk-product li::marker,.bk-notes li::marker{color:var(--hv-sky)}
.bk-notes{margin-top:14px;padding-left:66px}
.bk-notes::after{content:"";position:absolute;z-index:3;left:20px;top:18px;width:30px;height:30px;border-radius:10px;border:1px solid rgba(160,200,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 16px -6px rgba(98,160,255,.8);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCEBFF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.2v.2'/%3E%3C/svg%3E") center/17px no-repeat,linear-gradient(160deg,rgba(40,80,180,.6),rgba(8,16,40,.85))}
.bk-notes h4{margin-top:5px;color:var(--hv-ice)}
.bk-voice{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.bk-voice .bk-rules{margin:0}
.bk-quotes{display:grid;gap:10px}
.bk-quotes blockquote{position:relative;margin:0;padding:18px 22px;border-radius:20px;background:var(--b-backdrop);color:var(--b-text);font-family:var(--b-display);font-weight:var(--b-display-weight);font-size:18px;letter-spacing:-.02em;line-height:1.3}
.bk-quotes blockquote::before{background:var(--b-edge)}
.bk-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-do{padding:22px 24px 20px;border-radius:24px}
.bk-do > *{position:relative;z-index:3}
.bk-do h4{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 19px/1.2 var(--display);letter-spacing:-.025em;color:var(--hv-paper)}
.bk-do h4 svg{width:24px;height:24px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bk-do.yes h4 svg{stroke:var(--hv-sky);filter:drop-shadow(0 0 8px rgba(98,160,255,.7))}
.bk-do.no h4 svg{stroke:var(--hv-dim)}
.bk-do ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.bk-do li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--hv-muted)}
.bk-do.yes li::before{content:"";position:absolute;left:1px;top:.6em;width:8px;height:4px;border-left:1.8px solid var(--hv-sky);border-bottom:1.8px solid var(--hv-sky);transform:rotate(-45deg)}
.bk-do.no li{color:var(--hv-dim)}
.bk-do.no li::before{content:"";position:absolute;left:1px;top:.78em;width:9px;height:1.8px;border-radius:2px;background:var(--hv-faint)}

/* tokens */
.bk-code{border-radius:22px;overflow:hidden}
.bk-code pre{position:relative;z-index:1;max-height:440px;margin:0;padding:22px 24px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(148,195,255,.25) transparent}
.bk-code pre code{padding:0;border:0;background:none;font-size:13px;line-height:1.7;color:#D6E5FF;white-space:pre;overflow-wrap:normal}
.bk-copy{position:absolute;z-index:5;top:12px;right:14px;display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;border:1px solid rgba(160,200,255,.3);background:rgba(10,22,52,.88);color:var(--hv-ice);font:600 12.5px var(--body);cursor:pointer;transition:background .2s,border-color .2s,transform .45s var(--hv-spring)}
.bk-copy:hover{background:rgba(30,60,130,.9);border-color:rgba(160,200,255,.55);transform:translateY(-1px)}
.bk-contact{margin:96px 0 0;text-align:center;font-size:14px;color:var(--hv-dim)}
.bk-contact a{color:var(--hv-ice)}
.bk-body .docs-foot{margin-top:70px}

@media (max-width:1000px){.bk-family-grid{grid-template-columns:1fr 1fr}.bk-demo-cards{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.bk-page{padding-top:calc(var(--head) + 30px)}}
@media (max-width:760px){
  .bk-family{margin-top:80px}
  .bk-hero{grid-template-columns:1fr;gap:20px;padding:28px 24px}
  .bk-hero-logo{width:88px;height:88px;border-radius:22px}
  .bk-shared{padding:22px 20px}
  .bk-shared ul,.bk-voice,.bk-mascot,.bk-dos{grid-template-columns:1fr}
  .bk-stage{padding:24px 20px}
  .bk-demo-cards{grid-template-columns:1fr}
  .bk-products{grid-template-columns:1fr}
  .bk-sec{margin-top:60px}
}
@media (max-width:560px){
  .bk-family-grid{grid-template-columns:1fr}
  .bk-intro-actions .hv-btn{flex:1 1 auto}
  .bk-toggle button{gap:0;padding:0 12px;font-size:13.5px}
  .bk-toggle button img{display:none}
  .bk-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-fonts,.bk-grads,.bk-effects{grid-template-columns:minmax(0,1fr)}
  .bk-notes{padding-left:22px;padding-top:60px}
  .bk-notes::after{top:18px}
  .bk-table td:first-child{width:auto}
  .bk-toc a{min-height:40px}
}
@media (pointer:coarse){.bk-toc a,.bk-dl a,.bk-hero-links a,.bk-copy{min-height:44px}.bk-link{display:inline-flex;align-items:center;min-height:44px}}
@media (prefers-reduced-motion:reduce){.bk-brand.on{animation:none}.bk-track span{transition:none}.bk-pearl img{animation:none}}

/* The team-only reference keeps the existing written identity alongside the full interactive kit. */
.bk-reference{margin:110px auto 0;max-width:900px;padding:0}