/* Brand guide V2 (/brand/). Built on mach.css tokens. Prefix: bx-. Generated page: tools/brand/build_guide.py */
@font-face{font-family:Inter;font-style:normal;font-weight:300 400;font-display:swap;src:url(/brand/kit/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/brand/kit/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/brand/kit/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/brand/kit/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(/brand/kit/fonts/inter-latin-800-normal.woff2) format('woff2')}
.bx{overflow-x:clip}
.bx section[id]{scroll-margin-top:150px}
.bx .inter{font-family:Inter,system-ui,sans-serif}
.bx code,.bx .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.9em}
.bx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bx .sec{padding:84px 0}
.bx .sec-head{margin-bottom:44px}
.bx h3.sub{font-size:clamp(22px,2.2vw,28px);margin:56px 0 8px}
.bx p.sub-lede{color:var(--text2);font-size:16.5px;max-width:64ch;margin:0 0 24px}
.bx .pn{margin-bottom:0}
/* hero */
.bx-tile{aspect-ratio:auto;min-height:480px;display:flex;align-items:center}
.bx-tile .tile-copy{position:relative;left:auto;top:auto;bottom:auto;max-width:640px;padding:clamp(28px,4.6vw,64px)}
.bx-tile .tile-copy h1{font-size:clamp(36px,4.8vw,64px);margin:14px 0 18px}
.bx-tile .tile-copy .lede{font-size:clamp(17px,1.5vw,19px);max-width:46ch}
.bx-tile .ctas{margin-top:28px}
/* sticky section nav */
.bx-nav{position:sticky;top:82px;z-index:50;margin:18px 0 0;pointer-events:none}
.bx-nav-in{pointer-events:auto;display:flex;gap:2px;padding:6px;border-radius:999px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:max-content;margin-inline:auto}
.bx-nav-in::-webkit-scrollbar{display:none}
.bx-nav a{flex:none;padding:8px 14px;border-radius:999px;font-size:14px;color:var(--text2);white-space:nowrap;transition:.2s}
.bx-nav a:hover{color:var(--text);background:var(--fill)}
.bx-nav a.on{color:var(--text);background:var(--fill2)}
/* generic bits */
.bx-grid{display:grid;gap:20px}
.bx-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bx-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bx-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.bx .card{--c:var(--link)}
.bx .card.pc{border-top:2px solid var(--c)}
.bx .card.pc .k{color:var(--c)}
.bx-pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.03em;background:var(--fill2);color:var(--text)}
.bx-pill.ok{background:rgba(52,210,123,.16);color:var(--good)}.bx-pill.mid{background:rgba(111,176,255,.16);color:var(--link)}.bx-pill.no{background:rgba(255,176,32,.16);color:var(--amber)}
.bx-tbl{overflow-x:auto;border-radius:var(--r-card);border:1px solid var(--stroke);background:var(--graphite)}
.bx-tbl table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.bx-tbl th,.bx-tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--stroke);vertical-align:middle}
.bx-tbl tr:last-child td{border-bottom:0}.bx-tbl th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);font-weight:500}
.bx-tbl td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.bx-tbl a{color:var(--link)}.bx-tbl a:hover{text-decoration:underline;text-underline-offset:3px}
.bx-dl{display:inline-flex;align-items:center;gap:6px;color:var(--link);font-size:14px;font-weight:500}.bx-dl:hover{text-decoration:underline;text-underline-offset:3px}
/* overview */
.bx-fig .out b{font-size:clamp(26px,3vw,40px)}
.bx-trait{padding:26px}.bx-trait b{display:block;font-size:20px;font-weight:600;margin-bottom:6px}.bx-trait span{color:var(--text2);font-size:15px;line-height:1.5}
/* voice */
.bx-ex{gap:14px}.bx-ex .q{font-size:clamp(20px,2vw,25px);font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--text)}
.bx-ex .q.l{font-weight:500}.bx-ex p{font-size:14.5px}
.bx-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.bx-pair .card p.big{font-size:clamp(18px,1.8vw,22px);line-height:1.35;color:var(--text);font-weight:500}
.bx-pair .no .k{color:var(--amber)}.bx-pair .yes .k{color:var(--good)}
.bx-pair .no p.big{color:var(--text2);text-decoration:line-through;text-decoration-color:rgba(255,176,32,.6)}
/* logo */
.bx-lgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:14px;border-radius:var(--r-panel);margin-bottom:20px}
.bx-lgrid.dk{background:var(--black);border:1px solid var(--stroke)}
.bx-lgrid.lt{background:#fff;border:1px solid rgba(0,0,0,.08)}
.bx-lg{position:relative;display:grid;place-items:center;min-height:190px;padding:34px 20px 40px;border-radius:var(--r-card);grid-column:span 2}
.bx-lgrid.dk .bx-lg{background:linear-gradient(160deg,#101014,#08080a);border:1px solid rgba(255,255,255,.07)}
.bx-lgrid.lt .bx-lg{background:#f4f4f6;border:1px solid rgba(0,0,0,.06)}
.bx-lg.w3{grid-column:span 3}
.bx-lg img{width:auto;max-width:100%}
.bx-lg .nm{position:absolute;left:16px;bottom:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.bx-lgrid.lt .nm{color:#6b6b75}
.bx-lg .dl{position:absolute;right:16px;bottom:10px;font-size:12.5px;color:var(--link);font-weight:500}.bx-lgrid.lt .dl{color:#2f6bf5}
.bx-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px;align-items:stretch}
.bx-diagram{border-radius:var(--r-panel);background:var(--black);border:1px solid var(--stroke);padding:20px;display:grid;place-items:center}
.bx-diagram svg{width:100%;height:auto;max-height:520px;display:block}
.bx-diagram text{font-family:Inter,system-ui,sans-serif}
.bx-spec{display:grid;gap:0;align-content:start}
.bx-spec li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--stroke)}.bx-spec li:first-child{padding-top:0}.bx-spec li:last-child{border-bottom:0}
.bx-spec .nn{width:34px;height:34px;border-radius:50%;background:var(--fill2);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--link)}
.bx-spec b{display:block;font-size:16.5px;font-weight:600}.bx-spec span{color:var(--text2);font-size:15px;line-height:1.5}
.bx-min{display:flex;flex-wrap:wrap;gap:20px}
.bx-min>div{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-card);background:var(--graphite);border:1px solid var(--stroke)}
.bx-min .stage{display:flex;align-items:center;gap:22px;min-height:70px;flex-wrap:wrap}
.bx-min b{font-size:15.5px;font-weight:600}.bx-min span.s{font-size:14px;color:var(--text2);line-height:1.5}
.bx-min .rule{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3)}.bx-min .rule i{display:block;height:1px;background:var(--text3);width:120px}.bx-min .rule i.s24{width:24px}
.bx-mis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bx-mi{border-radius:var(--r-card);background:var(--graphite);border:1px solid var(--stroke);overflow:hidden;display:flex;flex-direction:column}
.bx-mi .st{position:relative;height:150px;display:grid;place-items:center;background:var(--black);overflow:hidden;padding:0 14px}
.bx-mi .st img{width:130px;max-width:100%}
.bx-mi .st::after{content:"\2715";position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:rgba(255,176,32,.9);color:#050506;font-size:12px;font-weight:700;display:grid;place-items:center;line-height:24px;text-align:center}
.bx-mi p{padding:14px 16px 16px;font-size:14px;line-height:1.4;color:var(--text2)}.bx-mi p b{color:var(--text);display:block;font-size:14.5px;margin-bottom:2px}
.bx-mi.m1 img{transform:scaleX(1.5);transform-origin:center}
.bx-mi.m2 img{filter:hue-rotate(150deg) saturate(2.2)}
.bx-mi.m3 img{transform:rotate(-14deg)}
.bx-mi.m4 img{filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 3px #fff)}
.bx-mi.m5 .st{background:repeating-conic-gradient(#ffb020 0 12deg,#a27cff 12deg 24deg,#37d2ff 24deg 36deg)}
.bx-mi.m6 .st{background:#1b1b1f}
.bx-mi.m7 .st .fake{font-family:Georgia,serif;font-style:italic;font-size:34px;color:#fff;line-height:1;text-align:center}.bx-mi.m7 .fake small{display:block;font-family:Georgia,serif;font-size:13px;margin-top:4px;letter-spacing:0;color:#bbb}
.bx-mi.m8 .st{gap:3px;justify-content:center;grid-auto-flow:column}.bx-mi.m8 .st img{width:90px}.bx-mi.m8 .st span{font-size:12px;color:#fff;font-weight:600;white-space:nowrap;margin-left:-2px}
/* colour */
.bx-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bx-swc{border-radius:var(--r-card);overflow:hidden;background:var(--graphite);border:1px solid var(--stroke);display:flex;flex-direction:column}
.bx-swc .f{height:112px;border:0;cursor:pointer;display:flex;align-items:flex-end;padding:12px 14px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;opacity:1;position:relative}
.bx-swc .f i{font-style:normal;opacity:0;transition:.2s}.bx-swc .f:hover i,.bx-swc .f:focus-visible i{opacity:.8}
.bx-swc .m{padding:14px 16px 16px;display:grid;gap:8px}
.bx-swc .m b{font-size:16px;font-weight:600}.bx-swc .m small{display:block;font-size:12.5px;color:var(--text2);margin-top:2px;line-height:1.4}
.bx-swc .v{display:flex;flex-wrap:wrap;gap:6px}
.bx-swc .v button{border:1px solid var(--stroke);background:var(--fill);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--text);font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace}
.bx-swc .v button:hover{background:var(--fill2)}
.bx-prac{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bx-pr{position:relative;border-radius:var(--r-panel);overflow:hidden;padding:32px 28px 28px;min-height:230px;border:1px solid var(--stroke);background:var(--black);display:flex;flex-direction:column;justify-content:flex-end}
.bx-pr::before{content:"";position:absolute;inset:-30% -30% 30% 20%;background:radial-gradient(closest-side,var(--c),transparent 70%);opacity:.55;filter:blur(20px)}
.bx-pr>*{position:relative}.bx-pr .pn b{color:var(--c)}
.bx-pr h3{font-size:26px;margin:12px 0 4px}.bx-pr p{color:var(--text2);font-size:14.5px}.bx-pr code{color:var(--text)}
.bx-grad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bx-gd{border-radius:var(--r-panel);border:1px solid var(--stroke);overflow:hidden;background:var(--graphite)}
.bx-gd .g{height:150px}.bx-gd .m{padding:18px 20px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.bx-gd b{display:block;font-size:16px}.bx-gd span{color:var(--text2);font-size:14px}
.bx-gd button{flex:none;border:1px solid var(--stroke);background:var(--fill);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}.bx-gd button:hover{background:var(--fill2)}
.bx-pair-s{display:inline-grid;place-items:center;width:64px;height:40px;border-radius:10px;font-weight:700;font-size:18px;border:1px solid rgba(255,255,255,.1)}
.bx-light{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bx-light button{display:flex;align-items:center;gap:10px;border:1px solid var(--stroke);background:var(--graphite);border-radius:999px;padding:6px 16px 6px 6px;cursor:pointer;font-size:14px}.bx-light i{display:block;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
/* type */
.bx-spec-t{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px}
.bx-aa{border-radius:var(--r-panel);background:linear-gradient(180deg,#1f1f24,#151518);border:1px solid var(--stroke);padding:34px;display:flex;flex-direction:column;gap:10px;font-family:Inter,sans-serif;overflow:hidden}
.bx-aa .big{font-size:clamp(150px,22vw,260px);line-height:.85;font-weight:700;letter-spacing:-.07em;background:linear-gradient(180deg,#fff 20%,#6b6b75);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 8px -6px}
.bx-aa .nm{font-size:26px;font-weight:600;letter-spacing:-.02em}.bx-aa .nm span{color:var(--text2);font-weight:300}
.bx-aa .al{color:var(--text3);font-size:15px;line-height:1.6;letter-spacing:.03em;overflow-wrap:anywhere}
.bx-stack{border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--stroke);padding:30px;display:flex;flex-direction:column;gap:18px}
.bx-stack pre{margin:0;padding:16px 18px;border-radius:14px;background:#0e0e11;border:1px solid var(--stroke);font:13px/1.6 ui-monospace,Menlo,monospace;color:#d9d9de;white-space:pre-wrap;word-break:break-word}
.bx-stack p{color:var(--text2);font-size:15.5px;line-height:1.6}
.bx-w{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:Inter,sans-serif;font-size:22px}.bx-w span{white-space:nowrap}.bx-w small{display:block;font-size:11.5px;color:var(--text3);font-family:var(--font);letter-spacing:.04em}
.bx-ts{border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--stroke);overflow:hidden;margin-top:20px}
.bx-tr{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;padding:26px 32px;align-items:center}.bx-tr+.bx-tr{border-top:1px solid var(--stroke)}
.bx-tr .s{font-family:Inter,sans-serif;min-width:0;overflow-wrap:anywhere}
.bx-tr .mt{font-size:13px;color:var(--text2);line-height:1.6}.bx-tr .mt b{display:block;color:var(--text);font-size:14.5px;font-weight:600}
/* imagery */
.bx-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}
.bx-rules .card{padding:24px}.bx-rules h3{font-size:19px}.bx-rules p{font-size:14.5px}
.bx-art{position:relative;aspect-ratio:1200/560;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--stroke);background:#050506;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.bx-art .art{position:absolute;inset:0;width:100%;height:100%}
.bx-art.wide{aspect-ratio:1200/520}
.bx-guide{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:38% 1fr;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.bx-guide div{display:flex;align-items:flex-start;padding:16px 18px}
.bx-guide .calm{border-right:1px dashed rgba(255,255,255,.4);background:rgba(255,255,255,.04);color:#fff}
.bx-guide .subj{justify-content:flex-end;color:var(--violet)}
.bx-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.bx-fig2{margin:0}.bx-fig2 figcaption{display:flex;align-items:center;gap:10px;padding:12px 4px 0;font-size:14px;color:var(--text2)}.bx-fig2 figcaption i{display:block;width:9px;height:9px;border-radius:50%;background:var(--c)}.bx-fig2 figcaption b{color:var(--text);font-weight:500}
.bx-mood{display:block;margin-top:20px;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--stroke);box-shadow:0 30px 80px rgba(0,0,0,.5)}.bx-mood img{width:100%;height:auto}
/* components */
.bx-cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bx-c{border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--stroke);padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.bx-c>.kl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);font-weight:500}
.bx-c .stage{display:flex;flex-wrap:wrap;gap:12px;align-items:center;min-height:90px;padding:18px;border-radius:var(--r-card);background:radial-gradient(60% 80% at 20% 0%,rgba(47,107,245,.14),transparent 70%),#0a0a0d;border:1px solid rgba(255,255,255,.05)}
.bx-c.span2{grid-column:span 2}.bx-c.span3{grid-column:1/-1}
.bx-c .spec{font-size:13px;color:var(--text2);line-height:1.6}
.bx-nav-demo{display:flex;align-items:center;gap:18px;height:58px;padding:0 10px 0 22px;border-radius:999px;width:100%}
.bx-nav-demo .l{display:flex;gap:2px;margin-left:8px;color:var(--text2);font-size:14.5px;overflow:hidden}.bx-nav-demo .l span{padding:8px 12px}
.bx-nav-demo .btn{margin-left:auto}
.bx-glass-demo{padding:22px 24px;border-radius:var(--r-panel);width:100%}.bx-glass-demo h4{font-size:22px;font-weight:600;margin:6px 0 6px;letter-spacing:-.02em}.bx-glass-demo p{font-size:14.5px;color:var(--text2)}
.bx-radii{display:flex;gap:14px;flex-wrap:wrap}.bx-radii>div{width:96px;height:78px;border:1px solid rgba(255,255,255,.35);background:var(--fill);display:grid;place-items:center;font-size:12px;color:var(--text2);text-align:center;line-height:1.3}
.bx-pn-demo{display:grid;gap:12px;width:100%}.bx-pn-demo .pn{--c:var(--violet)}
/* motion */
.bx-mo{display:grid;gap:0;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--stroke);background:var(--graphite)}
.bx-mr{display:grid;grid-template-columns:minmax(0,3fr) 110px minmax(0,3fr) 130px;gap:20px;align-items:center;padding:20px 28px}.bx-mr+.bx-mr{border-top:1px solid var(--stroke)}
.bx-mr b{display:block;font-size:16px;font-weight:600}.bx-mr .d{display:block;color:var(--text2);font-size:14px;line-height:1.45}.bx-mr .t{font-variant-numeric:tabular-nums;font-size:15px}.bx-mr .e{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--text2);overflow-wrap:anywhere}
.bx-mr .demo{display:grid;place-items:center;height:56px;position:relative}
.bx-dm{width:30px;height:30px;border-radius:9px;background:var(--blue)}
.bx-mr .btn{height:40px;padding:0 20px;font-size:14px}
.bx-d-reveal .bx-dm{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.bx-d-reveal.in .bx-dm{opacity:1;transform:none}
.bx-d-glow .bx-dm{border-radius:50%;background:radial-gradient(circle,#fff,var(--violet) 40%,transparent 70%);width:44px;height:44px;animation:bxbr 9s ease-in-out infinite}
@keyframes bxbr{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.05);opacity:1}}
.bx-d-orbit .bx-dm{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;position:relative;animation:bxor 20s linear infinite}.bx-d-orbit .bx-dm::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--cyan)}
@keyframes bxor{to{transform:rotate(360deg)}}
.bx-d-tick{overflow:hidden;height:56px}.bx-d-tick .w{display:block;height:26px;overflow:hidden;font-weight:600;color:var(--cyan);font-size:18px;line-height:26px}.bx-d-tick .w span{display:block;height:26px;animation:bxtk 4.2s cubic-bezier(.7,0,.2,1) infinite}
@keyframes bxtk{0%,40%{transform:translateY(0)}50%,90%{transform:translateY(-26px)}100%{transform:translateY(-52px)}}
@media (prefers-reduced-motion:reduce){.bx-d-glow .bx-dm,.bx-d-orbit .bx-dm,.bx-d-tick .w span{animation:none}.bx-d-reveal .bx-dm{opacity:1;transform:none;transition:none}}
/* social */
.bx-sheet{display:block;margin-bottom:24px;border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--stroke);background:var(--graphite)}.bx-sheet img{width:100%;height:auto}
.bx-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.bx-tog{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--stroke);background:var(--fill);cursor:pointer;font-size:14px}.bx-tog[aria-pressed=true]{background:var(--fill2);border-color:rgba(255,255,255,.3)}
.bx-tog i{display:block;width:30px;height:18px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;transition:.2s}.bx-tog i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}.bx-tog[aria-pressed=true] i{background:var(--blue)}.bx-tog[aria-pressed=true] i::after{left:14px}
.bx-plat{margin-top:44px}.bx-plat:first-of-type{margin-top:0}
.bx-plat>h3{font-size:22px;margin-bottom:16px;display:flex;align-items:center;gap:12px}.bx-plat>h3 small{font-size:13px;color:var(--text2);font-weight:400}
.bx-sg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.bx-s{grid-column:span 12;margin:0;min-width:0}.bx-s.sq{grid-column:span 2}.bx-s.pt{grid-column:span 3}.bx-s.st{grid-column:span 2}
.bx-s .box{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--graphite) repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);border:1px solid var(--stroke)}
.bx-s .box img{width:100%;height:100%;display:block;object-fit:cover;position:absolute;inset:0}.bx-s .box img.x{display:none}
.bx-s.round .box{border-radius:50%}
.bx-s .safe{display:none;position:absolute;left:50%;top:50%;width:calc(var(--sw)*100%);height:calc(var(--sh)*100%);transform:translate(-50%,-50%);border:2px dashed rgba(55,210,255,.9);border-radius:6px;pointer-events:none;box-shadow:0 0 0 9999px rgba(5,5,6,.28)}
.bx-s .safe.circ{border-radius:50%}
.show-safe .bx-s .safe{display:block}
.bx-s figcaption{padding:10px 2px 0;font-size:13.5px;color:var(--text2);line-height:1.45}.bx-s figcaption b{color:var(--text);font-weight:500;display:block;font-size:14.5px}
.bx-s figcaption a{color:var(--link);font-weight:500}
.bx-s .note{display:block;margin-top:4px}
/* icons */
.bx-ic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px}
.bx-ic .p{border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--stroke);padding:28px;min-width:0}
.bx-ic .row{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end}
.bx-ic figure{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:12px;color:var(--text2)}.bx-ic figure img{display:block;image-rendering:auto}.bx-ic figure.rd img{border-radius:22%}
.bx-tab{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px 0 14px;border-radius:12px 12px 0 0;background:#2a2a30;font-size:13px;color:var(--text);margin-top:18px}.bx-tab img{width:16px;height:16px}
.bx-bar{height:36px;border-radius:0 12px 12px 12px;background:#34343a;margin-bottom:22px}
.bx-ic ul.fl{display:grid;gap:0}.bx-ic ul.fl li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--stroke);font-size:14.5px}.bx-ic ul.fl li:last-child{border:0}.bx-ic ul.fl span{color:var(--text2);text-align:right}.bx-ic ul.fl a{color:var(--link)}
/* downloads */
.bx-dls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}
.bx-dl-c{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--stroke);transition:.2s}
a.bx-dl-c:hover{background:var(--graphite2);border-color:rgba(255,255,255,.22)}
.bx-dl-c.hl{background:linear-gradient(160deg,rgba(47,107,245,.2),rgba(162,124,255,.1) 60%,transparent),var(--graphite);border-color:rgba(111,176,255,.35)}
.bx-dl-c b{font-size:20px;font-weight:600;letter-spacing:-.02em}.bx-dl-c p{color:var(--text2);font-size:14.5px}.bx-dl-c .go{margin-top:auto;color:var(--link);font-weight:500;font-size:15px;padding-top:6px}
.bx-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.bx-lists .bx-c ul{display:grid;gap:0}.bx-lists li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--stroke);font-size:14.5px}.bx-lists li:last-child{border:0}.bx-lists li span{color:var(--text2)}.bx-lists a{color:var(--link)}
.bx-bp{display:flex;flex-direction:column;gap:10px}.bx-bp .top{display:flex;justify-content:space-between;align-items:center}
.bx-bp button.copy{border:1px solid var(--stroke);background:var(--fill);border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer}.bx-bp button.copy:hover{background:var(--fill2)}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);padding:11px 20px;border-radius:999px;background:rgba(34,34,38,.92);border:1px solid var(--stroke);backdrop-filter:blur(20px);font-size:14px;font-weight:500;opacity:0;transition:.25s;z-index:99;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* responsive */
@media(max-width:1060px){
 .bx-tile .tile-fade{background:linear-gradient(180deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.9) 60%,rgba(5,5,6,.8))}
 .bx-three,.bx-four,.bx-prac,.bx-rules,.bx-cmp,.bx-dls{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bx-split,.bx-spec-t,.bx-ic{grid-template-columns:1fr}.bx-sw{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bx-mis{grid-template-columns:repeat(2,minmax(0,1fr))}.bx-c.span2{grid-column:1/-1}
 .bx-mr{grid-template-columns:1fr 1fr;gap:10px 20px}.bx-s.sq,.bx-s.st{grid-column:span 3}.bx-s.pt{grid-column:span 4}
 .bx-arts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .bx .sec{padding:60px 0}
 .bx-two,.bx-three,.bx-four,.bx-prac,.bx-rules,.bx-cmp,.bx-dls,.bx-grad,.bx-arts,.bx-lists,.pair-m,.bx-pair{grid-template-columns:1fr}
 .bx-sw{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bx-swc .f{height:84px}
 .bx-lgrid{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:10px}.bx-lg,.bx-lg.w3{grid-column:span 2;min-height:150px}.bx-lg.half{grid-column:span 1}
 .bx-tr{grid-template-columns:1fr;gap:14px;padding:22px}
 .bx-s.sq,.bx-s.st{grid-column:span 4}.bx-s.pt{grid-column:span 6}
 .bx-mi .st{height:130px}
 .bx-tile{min-height:520px}.bx-nav-demo .l,.bx-nav-demo .logo small{display:none}.bx-nav-demo{padding:0 8px 0 18px}
 .bx-guide{font-size:10px}.bx-guide div{padding:10px}
 .bx-aa{padding:24px}.bx-stack{padding:22px}
 .bx-mr{padding:18px 20px}
}