/* ds.css: adopted from Speed-draft 8126f29 */
/* design system page */
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--length-12)}
.swatch .chip{aspect-ratio:1;border-radius:var(--length-18);margin-bottom:var(--length-14)}
.swatch b{font-weight:400;font-size:var(--length-18);display:block}
.swatch code,.type-meta code,.icon-tile code{font-family:var(--mono);font-size:var(--length-11);color:var(--chrome-2)}
.swatch p{font-size:var(--length-12);color:var(--chrome-2);line-height:1.5;margin-top:var(--length-8)}
.types{display:flex;flex-direction:column;border-top:var(--length-1) solid var(--glass-line)}
.type-row{display:grid;grid-template-columns:var(--length-220) 1fr;gap:var(--length-32);align-items:center;padding:var(--length-32) 0;border-bottom:var(--length-1) solid var(--glass-line)}
.type-meta b{display:block;font-weight:400;font-size:var(--length-15);margin-bottom:var(--length-6)}
.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--length-12)}
.icon-tile{align-items:center;justify-content:center!important;min-height:var(--length-220);text-align:center}
.ico3d.big{width:var(--length-150);height:var(--length-150);margin:0 0 var(--length-12)}
.amb-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--length-16)}
.amb,.liq{position:relative;border-radius:var(--length-22);overflow:hidden;aspect-ratio:16/9;background:var(--bg);border:var(--length-1) solid var(--glass-line)}
.amb canvas{width:100%;height:100%;display:block}
.amb figcaption,.liq figcaption{position:absolute;left:var(--length-14);bottom:var(--length-14);font-size:var(--length-11);letter-spacing:.14em;text-transform:uppercase;padding:var(--length-8) var(--length-12);border-radius:var(--length-999);color:var(--palette-fff)}
.liq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--length-12)}
@media (max-width:900px){.swatches{grid-template-columns:repeat(2,1fr)}.type-row{grid-template-columns:1fr;gap:var(--length-12)}.icon-grid{grid-template-columns:repeat(2,1fr)}.amb-grid{grid-template-columns:1fr}.liq-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.amb figcaption,.liq figcaption{font-size:var(--length-9);padding:var(--length-5) var(--length-9);left:var(--length-8);bottom:var(--length-8);letter-spacing:.1em}}

/* ---------- frosted glass components ---------- */
.g-stage{border-radius:var(--length-28);padding:var(--length-28);background-size:cover;background-position:center;position:relative;overflow:hidden;border:var(--length-1) solid var(--glass-line)}
.g-stage::before{content:"";position:absolute;inset:0;background:var(--paint-alpha-2d55e9cc)}
.g-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--length-14)}
.gx{background:linear-gradient(180deg,var(--paint-alpha-5eb6df96),var(--paint-alpha-f8d551cb));backdrop-filter:blur(var(--length-26)) saturate(170%);-webkit-backdrop-filter:blur(var(--length-26)) saturate(170%);border:var(--length-1) solid var(--paint-alpha-57c94231);border-radius:var(--length-22);padding:var(--length-20);box-shadow:inset 0 var(--length-1) 0 var(--paint-alpha-e7e4f05d),0 var(--length-20) var(--length-60) var(--paint-alpha-2d55e9cc)}
.g-span2{grid-column:span 2}
.g-lbl{font-size:var(--length-10);letter-spacing:.2em;text-transform:uppercase;color:var(--paint-alpha-e0888e60);margin-bottom:var(--length-12)}
.g-row{display:flex;gap:var(--length-10);flex-wrap:wrap;align-items:center}
.gbtn{font:500 var(--length-14) var(--font);color:var(--palette-fff);padding:var(--length-12) var(--length-20);border-radius:var(--length-999);border:var(--length-1) solid var(--paint-alpha-ae7f66dc);background:var(--paint-alpha-b56364a7);backdrop-filter:blur(var(--length-14));-webkit-backdrop-filter:blur(var(--length-14));cursor:pointer;box-shadow:inset 0 var(--length-1) 0 var(--paint-alpha-263c066a);transition:background .3s,transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.gbtn:hover{background:var(--paint-alpha-82e16a99);transform:translateY(var(--length-minus-2))}
.gbtn:active{transform:scale(.96)}
.gbtn.text{background:none;border-color:transparent;box-shadow:none;padding:var(--length-12) var(--length-10);color:var(--paint-alpha-bfe36491)}
.gbtn.text:hover{color:var(--palette-fff);background:var(--paint-alpha-5704ef9e)}
.gbtn.icon{width:var(--length-44);height:var(--length-44);padding:0;font-size:var(--length-20);display:grid;place-items:center}
.g-badge{font-size:var(--length-11);padding:var(--length-5) var(--length-10);border-radius:var(--length-999);background:var(--paint-alpha-b56364a7);border:var(--length-1) solid var(--paint-alpha-82e16a99)}
.g-badge.live{color:var(--palette-bdf5cf);border-color:var(--paint-alpha-7d2b9370);background:var(--paint-alpha-bca41a04)}
.g-badge.new{color:var(--palette-1a1400);background:var(--yellow);border-color:transparent}
.g-chip{font:var(--length-13) var(--font);color:var(--palette-fff);padding:var(--length-8) var(--length-14);border-radius:var(--length-999);border:var(--length-1) solid var(--paint-alpha-82e16a99);background:var(--paint-alpha-8caa693a);cursor:pointer;display:inline-flex;align-items:center;gap:var(--length-8);transition:background .3s}
.g-chip.on{background:var(--paint-alpha-82e16a99);border-color:var(--paint-alpha-37897b04)}
.dot{width:var(--length-7);height:var(--length-7);border-radius:50%;display:inline-block;flex:none}.dot.r{background:var(--red);box-shadow:0 0 var(--length-8) var(--red)}.dot.y{background:var(--yellow);box-shadow:0 0 var(--length-8) var(--yellow)}
.g-field{display:flex;flex-direction:column;gap:var(--length-8);font-size:var(--length-12);color:var(--paint-alpha-3abf49ec)}
.g-field small{color:var(--paint-alpha-8e2d6ca7);font-size:var(--length-11)}
.g-input{font:var(--length-14) var(--font);color:var(--palette-fff);background:var(--paint-alpha-0d923d38);border:var(--length-1) solid var(--paint-alpha-57c94231);border-radius:var(--length-12);padding:var(--length-12) var(--length-14);outline:none;width:100%;transition:border-color .3s,box-shadow .3s}
.g-input:focus{border-color:var(--paint-alpha-3f9caaef);box-shadow:0 0 0 var(--length-4) var(--paint-alpha-82b99dd0)}
.g-search{display:flex;align-items:center;gap:var(--length-10);background:var(--paint-alpha-0d923d38);border:var(--length-1) solid var(--paint-alpha-57c94231);border-radius:var(--length-12);padding:0 var(--length-12);color:var(--paint-alpha-84c75447)}
.g-search svg{width:var(--length-15);height:var(--length-15);flex:none}
.g-input.bare{background:none;border:0;padding:var(--length-12) 0;box-shadow:none}
.g-search kbd{font:var(--length-11) var(--mono);padding:var(--length-3) var(--length-6);border-radius:var(--length-6);border:var(--length-1) solid var(--paint-alpha-e7e4f05d);color:var(--paint-alpha-3abf49ec)}
.g-select select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--palette-fff) 50%),linear-gradient(135deg,var(--palette-fff) 50%,transparent 50%);background-position:calc(100% - var(--length-18)) 50%,calc(100% - var(--length-13)) 50%;background-size:var(--length-5) var(--length-5);background-repeat:no-repeat}
.g-select option{background:var(--palette-141416)}
.g-toggle{display:flex;align-items:center;gap:var(--length-12);font-size:var(--length-14);margin:var(--length-6) 0;cursor:pointer}
.g-toggle input,.g-check input,.g-radio input{position:absolute;opacity:0;pointer-events:none}
.g-toggle i{width:var(--length-42);height:var(--length-24);border-radius:var(--length-99);background:var(--paint-alpha-06ff57dd);border:var(--length-1) solid var(--paint-alpha-e7e4f05d);position:relative;transition:background .3s}
.g-toggle i::after{content:"";position:absolute;top:var(--length-2);left:var(--length-2);width:var(--length-18);height:var(--length-18);border-radius:50%;background:var(--palette-fff);box-shadow:0 var(--length-2) var(--length-6) var(--paint-alpha-3d9c0a42);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.g-toggle input:checked+i{background:var(--yellow);border-color:transparent}
.g-toggle input:checked+i::after{transform:translateX(var(--length-18))}
.g-check,.g-radio{display:inline-flex;align-items:center;gap:var(--length-8);font-size:var(--length-13);cursor:pointer;margin-right:var(--length-12)}
.g-check i,.g-radio i{width:var(--length-18);height:var(--length-18);border:var(--length-1) solid var(--paint-alpha-37897b04);background:var(--paint-alpha-c201d2da);border-radius:var(--length-6);display:grid;place-items:center;transition:background .2s}
.g-radio i{border-radius:50%}
.g-check input:checked+i{background:var(--yellow);border-color:transparent}
.g-check input:checked+i::after{content:"";width:var(--length-8);height:var(--length-4);border-left:var(--length-2) solid var(--palette-000);border-bottom:var(--length-2) solid var(--palette-000);transform:rotate(-45deg) translate(var(--length-1),var(--length-minus-1))}
.g-radio input:checked+i::after{content:"";width:var(--length-8);height:var(--length-8);border-radius:50%;background:var(--yellow)}
.g-seg{position:relative;display:flex;padding:var(--length-4);border-radius:var(--length-999);background:var(--paint-alpha-78eab87e);border:var(--length-1) solid var(--paint-alpha-06ff57dd)}
.g-seg button,.g-tabs button{position:relative;z-index:1;flex:1;font:500 var(--length-13) var(--font);color:var(--paint-alpha-395a60f1);background:none;border:0;padding:var(--length-9) var(--length-12);cursor:pointer;transition:color .3s}
.g-seg button.on,.g-tabs button.on{color:var(--palette-fff)}
.g-seg-pill{position:absolute;top:var(--length-4);bottom:var(--length-4);border-radius:var(--length-999);background:var(--paint-alpha-57c94231);border:var(--length-1) solid var(--paint-alpha-ae7f66dc);transition:left .45s cubic-bezier(.34,1.3,.64,1),width .45s cubic-bezier(.34,1.3,.64,1)}
.g-tabs{position:relative;display:flex;border-bottom:var(--length-1) solid var(--paint-alpha-06ff57dd)}
.g-tabs button{flex:none;padding:var(--length-10) var(--length-12)}
.g-tab-bar{position:absolute;bottom:var(--length-minus-1);height:var(--length-2);background:var(--yellow);transition:left .4s var(--ease),width .4s var(--ease)}
.g-slider{display:flex;align-items:center;gap:var(--length-12)}
.g-slider input{flex:1;accent-color:var(--yellow)}
.g-slider output{font:var(--length-12) var(--mono);width:var(--length-28);text-align:right}
.g-progress{height:var(--length-6);border-radius:var(--length-6);background:var(--paint-alpha-b34d3e79);overflow:hidden;margin-top:var(--length-18)}
.g-progress i{display:block;height:100%;border-radius:var(--length-6);background:linear-gradient(90deg,var(--palette-fff),var(--yellow))}
.g-meta{display:flex;justify-content:space-between;font-size:var(--length-11);color:var(--paint-alpha-e0888e60);margin-top:var(--length-8)}
.g-stat b{display:block;font-weight:400;font-size:var(--length-44);letter-spacing:-.04em;line-height:1}
.g-stat span{font-size:var(--length-12);color:var(--paint-alpha-84c75447)}
.g-stat svg{width:100%;height:var(--length-40);margin:var(--length-14) 0 var(--length-6);display:block}
.g-stat em{font-style:normal;font-size:var(--length-12);color:var(--yellow)}
.g-toast{display:flex;align-items:center;gap:var(--length-12);padding:var(--length-12) var(--length-14);border-radius:var(--length-16);background:var(--paint-alpha-3ef68957);border:var(--length-1) solid var(--paint-alpha-57c94231);backdrop-filter:blur(var(--length-20));-webkit-backdrop-filter:blur(var(--length-20))}
.g-toast b{display:block;font-weight:500;font-size:var(--length-13)}.g-toast span{font-size:var(--length-11);color:var(--paint-alpha-e0888e60)}
.g-toast .gbtn{margin-left:auto}
.g-tip-host{position:relative;display:inline-block;font-size:var(--length-13);padding:var(--length-8) var(--length-12);border-radius:var(--length-10);border:var(--length-1) dashed var(--paint-alpha-c5790f2c);cursor:default}
.g-tip{position:absolute;left:50%;bottom:calc(100% + var(--length-10));transform:translate(-50%,var(--length-6));white-space:nowrap;font-size:var(--length-12);padding:var(--length-8) var(--length-12);border-radius:var(--length-10);background:var(--paint-alpha-ef46e26f);border:var(--length-1) solid var(--paint-alpha-82e16a99);backdrop-filter:blur(var(--length-16));opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.g-tip-host:hover .g-tip{opacity:1;transform:translate(-50%,0)}
.g-avatars{display:flex;align-items:center}
.g-avatars img,.g-avatars span{width:var(--length-38);height:var(--length-38);border-radius:50%;object-fit:cover;border:var(--length-2) solid var(--paint-alpha-aeceb004);margin-left:var(--length-minus-10)}
.g-avatars img:first-child{margin-left:0}
.g-avatars span{display:grid;place-items:center;font-size:var(--length-12);background:var(--paint-alpha-fd3259d3);backdrop-filter:blur(var(--length-10))}
.g-crumbs{display:flex;gap:var(--length-8);font-size:var(--length-13);color:var(--paint-alpha-e0888e60)}.g-crumbs a:hover{color:var(--palette-fff)}.g-crumbs b{font-weight:400;color:var(--palette-fff)}
.g-acc{border-bottom:var(--length-1) solid var(--paint-alpha-b34d3e79);padding:var(--length-10) 0}
.g-acc summary{cursor:pointer;font-size:var(--length-14);list-style:none;display:flex;justify-content:space-between}
.g-acc summary::after{content:"+";color:var(--paint-alpha-84c75447);transition:transform .3s}.g-acc[open] summary::after{transform:rotate(45deg)}
.g-acc p{font-size:var(--length-13);color:var(--paint-alpha-84c75447);margin-top:var(--length-8);line-height:1.5}
.g-dialog{max-width:var(--length-520);margin:0 auto;padding:var(--length-22);border-radius:var(--length-20);background:var(--paint-alpha-b08e8129);border:var(--length-1) solid var(--paint-alpha-57c94231);backdrop-filter:blur(var(--length-30));-webkit-backdrop-filter:blur(var(--length-30));box-shadow:0 var(--length-30) var(--length-80) var(--paint-alpha-fd9af3c8)}
.g-dialog b{font-weight:500;font-size:var(--length-18)}.g-dialog p{font-size:var(--length-13);color:var(--paint-alpha-84c75447);margin:var(--length-8) 0 var(--length-18)}
@media (max-width:900px){.g-grid{grid-template-columns:1fr}.g-span2{grid-column:auto}.g-stage{padding:var(--length-14)}}

/* Isolated mascot reference library */
.mascot-jump{display:flex;flex-wrap:wrap;gap:var(--length-12);margin-bottom:var(--length-28)}
.mascot-jump a,.mascot-sheet-head a{font:var(--length-12) var(--mono);color:var(--white,var(--palette-f4f5f7));border:var(--length-1) solid var(--glass-line);padding:var(--length-10) var(--length-16);border-radius:var(--length-999)}
.mascot-jump a:hover,.mascot-sheet-head a:hover{border-color:var(--yellow);color:var(--yellow)}
.mascot-jump a:focus-visible,.mascot-sheet a:focus-visible{outline:var(--length-2) solid var(--yellow);outline-offset:var(--length-5)}
.mascot-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--length-24);padding:var(--length-24);border:var(--length-1) solid var(--glass-line);border-radius:var(--length-20)}
.mascot-rules b{font-size:var(--length-16);font-weight:500}
.mascot-rules p,.mascot-intro p{font-size:var(--length-14);line-height:1.65;color:var(--chrome-2);margin-top:var(--length-10)}
.mascot-character{margin-top:var(--length-64);scroll-margin-top:var(--length-100)}
.mascot-intro{display:grid;grid-template-columns:1fr 2fr;gap:var(--length-32);align-items:start;margin-bottom:var(--length-28)}
.mascot-intro h3{font-size:clamp(var(--length-36),5vw,var(--length-64));font-weight:400;letter-spacing:-.045em}
.mascot-intro p{max-width:var(--length-720)}
.mascot-sheet{margin:0 0 var(--length-28);border:var(--length-1) solid var(--glass-line);border-radius:var(--length-22);overflow:hidden;background:var(--ink,var(--palette-141416))}
.mascot-sheet-head{display:flex;justify-content:space-between;align-items:center;gap:var(--length-16);padding:var(--length-20) var(--length-24)}
.mascot-sheet-head h4{font-size:var(--length-18);font-weight:400;letter-spacing:-.02em}
.mascot-sheet-head a{flex-shrink:0}
.mascot-art{display:block;background-color:var(--palette-242426);background-image:conic-gradient(var(--palette-303033) 25%,transparent 0 50%,var(--palette-303033) 0 75%,transparent 0);background-size:var(--length-32) var(--length-32)}
.mascot-art img{display:block;width:100%;height:auto}
.mascot-sheet figcaption{padding:var(--length-16) var(--length-24);font:var(--length-12)/1.7 var(--mono);color:var(--chrome-2)}
@media(max-width:700px){.mascot-rules,.mascot-intro{grid-template-columns:1fr;gap:var(--length-16)}.mascot-sheet-head{padding:var(--length-16);flex-wrap:wrap}.mascot-sheet figcaption{padding:var(--length-16)}.mascot-character{margin-top:var(--length-40)}}

.mascot-banner-art{display:block;background:var(--surface)}.mascot-banner-art img{display:block;width:100%;height:auto}.mascot-campaign{scroll-margin-top:var(--length-100)}
/* theme demo: each panel pins its own tokens so both themes show side by side */
.tdemo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--length-16);margin-top:var(--length-40)}
.tdemo{border-radius:var(--length-22);padding:var(--length-24);border:var(--length-1) solid var(--line);display:grid;gap:var(--length-14);overflow:hidden}
.tdemo[data-t="light"]{--bg:var(--palette-1e1f22);--surface:var(--palette-26282c);--yellow:var(--palette-ffd400);--on-yellow:var(--palette-141416);--y-glow:none;--y-text-glow:none;background:var(--palette-1e1f22)}
.tdemo[data-t="dark"]{--bg:var(--palette-000);--surface:var(--palette-0a0a0b);--yellow:var(--palette-ffe600);--on-yellow:var(--palette-000);--y-glow:0 0 var(--length-14) var(--paint-alpha-5187a5d5),0 0 var(--length-42) var(--paint-alpha-9c03a2cc);--y-text-glow:0 0 var(--length-6) var(--paint-alpha-28b8129b),0 0 var(--length-22) var(--paint-alpha-37f0a510);background:var(--palette-000)}
.tdemo-h{font-weight:400;font-size:var(--length-48);letter-spacing:-.045em;line-height:1;color:var(--palette-f4f5f7)}
.tdemo-h span{color:var(--yellow);text-shadow:var(--y-text-glow)}
.tdemo p{color:var(--palette-8e9298);font-size:var(--length-14);line-height:1.5}
.tdemo-btn{border-radius:var(--length-999);padding:var(--length-9) var(--length-16);font-size:var(--length-13);border:var(--length-1) solid var(--yellow);color:var(--yellow);box-shadow:var(--y-glow)}
.tdemo-band{background:var(--yellow);color:var(--on-yellow);box-shadow:var(--y-glow);border-radius:var(--length-10);padding:var(--length-10) var(--length-14);font-size:var(--length-11);letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.liq.scene img{mix-blend-mode:lighten}
@media (max-width:900px){.tdemo-grid{grid-template-columns:1fr}}
.pose-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--length-150),1fr));gap:var(--length-10);padding:var(--length-14)}
.pose-cell{border-radius:var(--length-14);background:radial-gradient(60% 55% at 50% 58%,var(--y-soft),transparent 70%),var(--surface-2);overflow:hidden}
.pose-cell img{width:100%;aspect-ratio:1;object-fit:contain}
.pose-cell figcaption{font-size:var(--length-11);color:var(--muted);padding:0 var(--length-10) var(--length-10)}


/* explainer.css: adopted from Speed-draft 8126f29 */
/* ---------- Agent explainer ---------- */
.xp{--line:var(--paint-alpha-79f2e0da);border-radius:var(--length-28);border:var(--length-1) solid var(--line);background:radial-gradient(120% 80% at 70% 0%,var(--paint-alpha-8caa693a),transparent 60%),var(--palette-09090a);padding:var(--length-14);box-shadow:0 var(--length-40) var(--length-120) var(--paint-alpha-33a0843b)}
.xp-rail{display:flex;gap:var(--length-6);padding:var(--length-4) var(--length-4) var(--length-14);overflow:hidden}
.xp-rail span{flex:1;font-size:var(--length-10);letter-spacing:.18em;text-transform:uppercase;color:var(--palette-5d6168);padding-top:var(--length-10);position:relative;white-space:nowrap;transition:color .6s}
.xp-rail span::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--length-2);border-radius:var(--length-2);background:var(--paint-alpha-c201d2da)}
.xp-rail span::after{content:"";position:absolute;left:0;top:0;height:var(--length-2);border-radius:var(--length-2);width:0;background:linear-gradient(90deg,var(--yellow),var(--palette-fff7b3))}
.xp-rail span.done{color:var(--chrome-2)}.xp-rail span.done::after{width:100%}
.xp-rail span.on{color:var(--palette-fff)}.xp-rail span.on::after{width:100%;transition:width var(--d,3s) linear}
.xp-body{display:grid;grid-template-columns:var(--length-360) 1fr;gap:var(--length-14);height:clamp(var(--length-400),calc(100svh - var(--length-330)),var(--length-600))}
#explainer{z-index:10}

/* chat */
.xp-chat{border-radius:var(--length-20);background:var(--palette-0e0e10);border:var(--length-1) solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.xp-chat-h{display:flex;align-items:center;gap:var(--length-10);padding:var(--length-14) var(--length-16);border-bottom:var(--length-1) solid var(--line);font-size:var(--length-13)}
.xp-chat-h .av{width:var(--length-22);height:var(--length-22);border-radius:var(--length-7);background:conic-gradient(from 200deg,var(--yellow),var(--palette-fff),var(--palette-8e9298),var(--yellow));}
.xp-chat-h small{margin-left:auto;font-size:var(--length-10);color:var(--palette-5d6168);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:var(--length-6)}
.xp-chat-h small::before{content:"";width:var(--length-6);height:var(--length-6);border-radius:50%;background:var(--palette-2bd46b);box-shadow:0 0 var(--length-8) var(--palette-2bd46b)}
.xp-log{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--length-10);padding:var(--length-16);overflow:hidden;mask:linear-gradient(transparent,var(--palette-000) 18%);-webkit-mask:linear-gradient(transparent,var(--palette-000) 18%)}
.xp-item{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.xp-item.in{grid-template-rows:1fr}
.xp-item>div{overflow:hidden;min-height:0}
.xp-item .inner{opacity:0;transform:translateY(var(--length-6));transition:opacity .5s var(--ease) .1s,transform .6s var(--ease) .1s}
.xp-item.in .inner{opacity:1;transform:none}
.xp-u{display:flex;justify-content:flex-end}
.xp-u .inner{background:var(--palette-1d1d20);border:var(--length-1) solid var(--line);border-radius:var(--length-16) var(--length-16) var(--length-4) var(--length-16);padding:var(--length-10) var(--length-13);font-size:var(--length-13);line-height:1.5;max-width:86%;color:var(--palette-ececee)}
.xp-a .inner{font-size:var(--length-13);line-height:1.6;color:var(--palette-d6d7da)}
.xp-a .w{opacity:0;filter:blur(var(--length-3));transition:opacity .35s,filter .35s}
.xp-a .w.on{opacity:1;filter:none}
.xp-think .inner{font-size:var(--length-13);background:linear-gradient(90deg,var(--palette-5d6168) 0%,var(--palette-5d6168) 40%,var(--palette-fff) 50%,var(--palette-5d6168) 60%,var(--palette-5d6168) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.6s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:-50% 0}}
.xp-tool .inner{border:var(--length-1) solid var(--line);border-radius:var(--length-12);padding:var(--length-9) var(--length-11);display:flex;align-items:center;gap:var(--length-10);font-size:var(--length-12);color:var(--chrome);background:var(--paint-alpha-3b1d5b22)}
.xp-tool code{font-family:var(--mono);font-size:var(--length-11);color:var(--palette-7d8189);margin-left:auto}
.xp-tool .st{width:var(--length-14);height:var(--length-14);border-radius:50%;border:var(--length-1-5) solid var(--paint-alpha-82e16a99);border-top-color:var(--yellow);animation:spin .8s linear infinite;flex:none}
.xp-tool.ok .st{animation:none;border:0;background:var(--yellow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}
.xp-compose{margin:var(--length-12);border:var(--length-1) solid var(--line);border-radius:var(--length-16);padding:var(--length-12) var(--length-12) var(--length-12) var(--length-14);display:flex;align-items:flex-end;gap:var(--length-10);background:var(--palette-141416);min-height:var(--length-52)}
.xp-compose p{flex:1;font-size:var(--length-13);line-height:1.5;color:var(--palette-ececee);min-height:var(--length-20)}
.xp-compose p:empty::before{content:"Ask Speed Styles to build…";color:var(--palette-5d6168)}
.xp-compose p .caret{display:inline-block;width:var(--length-1-5);height:var(--length-14);background:var(--palette-fff);vertical-align:var(--length-minus-2);margin-left:var(--length-1);animation:pulse 1s steps(1) infinite}
@keyframes pulse{50%{opacity:0}}
.xp-send{width:var(--length-30);height:var(--length-30);border-radius:50%;background:var(--palette-2a2a2e);display:grid;place-items:center;flex:none;transition:background .4s,transform .4s var(--ease)}
.xp-send svg{width:var(--length-14);height:var(--length-14)}
.xp-send.ready{background:var(--palette-fff)}.xp-send.ready path{stroke:var(--palette-000)}
.xp-send.press{transform:scale(.88)}

/* workspace + windows */
.xp-ws{position:relative;border-radius:var(--length-20);border:var(--length-1) solid var(--line);overflow:hidden;background:radial-gradient(70% 60% at 50% 40%,var(--paint-alpha-af88f32e),transparent 70%),repeating-linear-gradient(0deg,transparent 0 var(--length-31),var(--paint-alpha-99cc8467) var(--length-31) var(--length-32)),repeating-linear-gradient(90deg,transparent 0 var(--length-31),var(--paint-alpha-99cc8467) var(--length-31) var(--length-32)),var(--palette-0b0b0c)}
.win{position:absolute;left:0;top:0;border-radius:var(--length-14);background:var(--palette-111113);border:var(--length-1) solid var(--paint-alpha-b34d3e79);overflow:hidden;transform-origin:0 0;
  transition:transform 1s var(--ease-io),opacity .8s var(--ease),filter .8s var(--ease),box-shadow .8s;box-shadow:0 var(--length-10) var(--length-30) var(--paint-alpha-3d9c0a42);will-change:transform}
.win.focus{box-shadow:0 var(--length-30) var(--length-80) var(--paint-alpha-c9777fd7),0 0 0 var(--length-1) var(--paint-alpha-79820b79)}
.win.dim{opacity:.38;filter:saturate(.3) brightness(.8)}
.win-h{height:var(--length-30);display:flex;align-items:center;gap:var(--length-6);padding:0 var(--length-10);border-bottom:var(--length-1) solid var(--paint-alpha-c201d2da);font-size:var(--length-10);color:var(--palette-7d8189);letter-spacing:.06em}
.win-h i{width:var(--length-7);height:var(--length-7);border-radius:50%;background:var(--palette-2a2a2e)}
.win-h span{margin-left:var(--length-8);flex:1;text-align:center;font-family:var(--mono)}
.win-h b{font-weight:400;font-size:var(--length-9);letter-spacing:.14em;text-transform:uppercase;padding:var(--length-3) var(--length-7);border-radius:var(--length-999);border:var(--length-1) solid var(--paint-alpha-b56364a7)}
.win-b{position:relative;padding:var(--length-14);height:calc(100% - var(--length-30))}
.win .label{position:absolute;left:var(--length-12);bottom:var(--length-minus-26);font-size:var(--length-10);letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-2)}

/* lo-fi skeleton pieces */
.sk{opacity:.07;transform:translateY(var(--length-4));transition:opacity .5s var(--ease),transform .6s var(--ease),background .5s}
.sk.on{opacity:1;transform:none}
.bar{height:var(--length-8);border-radius:var(--length-4);background:var(--paint-alpha-82e16a99)}
.bar.t{height:var(--length-14);background:var(--paint-alpha-2b274f59)}
.blk{border-radius:var(--length-8);border:var(--length-1) dashed var(--paint-alpha-e7e4f05d)}
.fill-r{background:var(--red)!important;border-color:transparent!important}
.fill-y{background:var(--yellow)!important;border-color:transparent!important}
.fill-c{background:linear-gradient(180deg,var(--palette-f2f3f5),var(--palette-6b7078) 55%,var(--palette-d9dce0))!important;border-color:transparent!important}
.scan{position:absolute;left:0;right:0;height:var(--length-60);top:var(--length-minus-60);background:linear-gradient(180deg,transparent,var(--paint-alpha-82b99dd0),transparent);pointer-events:none;opacity:0}
.building .scan{opacity:1;animation:scan 1.6s var(--ease-io) infinite}
@keyframes scan{to{top:100%}}

/* DS window rows */
.ds{display:grid;grid-template-columns:var(--length-110) 1fr;gap:var(--length-14);height:100%}
.ds-side{display:flex;flex-direction:column;gap:var(--length-8)}
.ds-row{display:flex;align-items:center;gap:var(--length-10);padding:var(--length-9) var(--length-10);border-radius:var(--length-9);font-size:var(--length-11);color:var(--palette-7d8189);border:var(--length-1) solid transparent;transition:all .5s var(--ease)}
.ds-row em{font-style:normal;font-family:var(--mono);font-size:var(--length-10);margin-left:auto;opacity:0;transition:opacity .4s}
.ds-row.read{color:var(--palette-fff);border-color:var(--paint-alpha-53fe7cbb);background:var(--paint-alpha-cb2d482e)}
.ds-row.done{color:var(--palette-c9ccd1)}.ds-row.done em{opacity:1;color:var(--yellow)}
.sw4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--length-6)}
.sw4 div{height:var(--length-44);border-radius:var(--length-8)}

/* phone frames */
.phone{border-radius:var(--length-28)}
.phone .win-b{padding:var(--length-12)}
.notch{width:var(--length-60);height:var(--length-5);border-radius:var(--length-5);background:var(--palette-2a2a2e);margin:0 auto var(--length-12)}
.vid-scene{position:absolute;inset:var(--length-12);border-radius:var(--length-16);overflow:hidden;background:var(--palette-000)}
.vid-scene>div{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.vid-scene>div.on{opacity:1}
.timeline{position:absolute;left:var(--length-12);right:var(--length-12);bottom:var(--length-12);height:var(--length-3);border-radius:var(--length-3);background:var(--paint-alpha-fd3259d3);overflow:hidden}
.timeline i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--palette-fff7b3))}

@media (max-width:900px){
  .xp-body{grid-template-columns:1fr;grid-template-rows:minmax(var(--length-200),32svh) minmax(var(--length-300),44svh);height:auto}
  .xp-rail span{font-size:var(--length-8);letter-spacing:.1em}
}

/* simple hi-fi content: real headlines + imagery, body copy stays lo-fi bars */
.win .hi{color:var(--palette-fff);font-weight:500;letter-spacing:-.03em;display:flex;align-items:center;gap:var(--length-6);line-height:1}
.win .hi .mk{width:var(--length-12);height:var(--length-8);background:linear-gradient(90deg,var(--red) 0 45%,transparent 45% 55%,var(--yellow) 55%);transform:skewX(-20deg)}
.win .ay{color:var(--yellow)}
.win .pill{font-size:var(--length-10);font-weight:500;padding:var(--length-7) var(--length-12);border-radius:var(--length-99);border:var(--length-1) solid var(--paint-alpha-263c066a);color:var(--palette-fff);white-space:nowrap;display:inline-block}
.win .pill.chrome{background:linear-gradient(180deg,var(--palette-fff),var(--palette-d9dce0) 40%,var(--palette-5b5f66) 52%,var(--palette-c9ccd1));color:var(--palette-000);border:0}
.win .pill.ghost{background:transparent}
.win .img{border-radius:var(--length-12);background-size:cover;background-position:center;position:relative;overflow:hidden;min-height:0}
.win .img.card{height:var(--length-64)}
.win .img b,.win .img .tag{position:absolute;left:var(--length-8);bottom:var(--length-7);font-size:var(--length-10);font-weight:500;color:var(--palette-fff);text-shadow:0 var(--length-1) var(--length-6) var(--palette-000)}
.win .tile2{flex:1;height:var(--length-44);border-radius:var(--length-10);border:var(--length-1) dashed var(--paint-alpha-e7e4f05d);display:flex;align-items:flex-end;padding:var(--length-7) var(--length-9);font-size:var(--length-11);font-weight:500;color:var(--palette-fff)}
.win .tile2.fill-y,.win .pill.fill-y{color:var(--palette-000)}
.vbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55)}
.vid-scene>div.on .kb{animation:kb 1.4s var(--ease) both}
@keyframes kb{from{transform:scale(1.18)}to{transform:scale(1.04)}}
.vcap{position:absolute;left:var(--length-16);right:var(--length-16);bottom:var(--length-38);display:flex;flex-direction:column;align-items:flex-start}
.vid-scene>div.on .vcap{animation:cap .7s var(--ease) .15s both}
@keyframes cap{from{opacity:0;transform:translateY(var(--length-14))}to{opacity:1;transform:none}}


/* explore.css: adopted from Speed-draft 8126f29 */
/* logo + illustration exploration pages */
.lc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--length-16)}
.lc{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-24);padding:var(--length-20);background:var(--paint-alpha-3b1d5b22);display:flex;flex-direction:column;gap:var(--length-12)}
.lc-top{display:flex;align-items:baseline;gap:var(--length-12)}
.lc-top .num{font-family:var(--mono);font-size:var(--length-11);color:var(--chrome-2)}
.lc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--length-10)}
.lt{aspect-ratio:1;border-radius:var(--length-16);display:grid;place-items:center}
.lt .lg{width:62%;height:62%}
.dark{background:var(--palette-050506);border:var(--length-1) solid var(--paint-alpha-c201d2da)}
.light{background:var(--palette-f4f5f7);color:var(--palette-0b0b0c)}
.lg .m{fill:url(#lgChrome)}.light .lg .m{fill:var(--palette-0b0b0c)}
.lg .ms{fill:none;stroke:url(#lgChrome);stroke-linecap:round;stroke-linejoin:round}.light .lg .ms{stroke:var(--palette-0b0b0c)}
.lg .a{fill:var(--palette-e10600)}.lg .b{fill:var(--palette-ffd400)}.light .lg .b{fill:var(--palette-e0b800)}
.lg .as{fill:none;stroke:var(--palette-e10600);stroke-linecap:round}.lg .bs{fill:none;stroke:var(--palette-ffd400);stroke-linecap:round;stroke-linejoin:round}.light .lg .bs{stroke:var(--palette-e0b800)}
.lg .k{fill:var(--palette-050506)}.light .lg .k{fill:var(--palette-f4f5f7)}
.lg .hl{fill:var(--palette-fff);opacity:.9}.light .lg .hl{fill:var(--palette-fff)}
.dark .lg .ms[stroke-width]{stroke:url(#lgChrome)}
.lc-lock{display:flex;align-items:center;gap:var(--length-10);padding:var(--length-14) var(--length-16);border-radius:var(--length-14);font-size:var(--length-20);letter-spacing:-.02em}
.lc-lock .lg.sm{width:var(--length-30);height:var(--length-30);flex:none}
.lc-lock.dark span{color:var(--palette-fff)}
.lc-fav{display:flex;align-items:center;gap:var(--length-8);font-size:var(--length-10);letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-2)}
.lc-fav span{margin-right:auto}
.fv{width:var(--length-32);height:var(--length-32);border-radius:var(--length-8);display:grid;place-items:center}
.fv .lg.xs{width:var(--length-22);height:var(--length-22)}
.lc p{font-size:var(--length-13);color:var(--chrome-2);line-height:1.55}
.wm b{font-size:var(--length-22);font-weight:700;font-style:italic;letter-spacing:-.04em;transform:skewX(-6deg)}
.wm.dark b{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm i,.wm2 i{color:var(--palette-e10600);font-style:italic;padding:0 var(--length-2)}
.wm2 b{font-size:var(--length-22);font-weight:600;letter-spacing:-.04em}
.lc-lock.wm2.dark b{color:var(--palette-fff)}
/* illustration pack */
.il-bar{display:flex;gap:var(--length-10);align-items:center;margin-bottom:var(--length-24);flex-wrap:wrap}
.il-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--length-18)}
.il{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-24);overflow:hidden;background:var(--paint-alpha-3b1d5b22)}
.il-img{position:relative;aspect-ratio:16/10;background:var(--palette-000)}
.il-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease)}
.il-img img.lt-img{opacity:0}
body.il-light .il-img img.lt-img{opacity:1}
.il-split .il-img img.lt-img{opacity:1;clip-path:inset(0 0 0 var(--split,50%))}
.il-split .il-img::after{content:"";position:absolute;top:0;bottom:0;left:var(--split,50%);width:var(--length-2);background:var(--palette-ffd400);box-shadow:0 0 var(--length-12) var(--palette-ffd400)}
.il-body{padding:var(--length-18) var(--length-20) var(--length-22)}
.il-body .row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--length-12)}
.il-body p{font-size:var(--length-13);color:var(--chrome-2);line-height:1.55;margin-top:var(--length-8)}
.il-tag{font-family:var(--mono);font-size:var(--length-10);letter-spacing:.12em;text-transform:uppercase;padding:var(--length-4) var(--length-8);border-radius:var(--length-99);border:var(--length-1) solid var(--glass-line)}
.il-tag.r{color:var(--palette-ff6a5c);border-color:var(--paint-alpha-d8daf1e1)}.il-tag.y{color:var(--palette-ffd400);border-color:var(--paint-alpha-e6598c1a)}
.il-refs{font-size:var(--length-12);color:var(--palette-5d6168);margin-top:var(--length-8)}
@media (max-width:900px){.lc-grid,.il-grid{grid-template-columns:1fr}}
/* logo round 2 board — identical template per concept */
.b2-brief{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--length-12);margin-bottom:var(--length-28)}
.b2-brief div{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-14);padding:var(--length-14);font-size:var(--length-13);color:var(--chrome-2);line-height:1.5}
.b2-brief b{display:block;font-weight:500;color:var(--palette-fff);font-size:var(--length-11);letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--length-6)}
.b2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--length-18)}
.b2{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-24);padding:var(--length-20);display:flex;flex-direction:column;gap:var(--length-12);background:var(--paint-alpha-3b1d5b22)}
.b2 header{display:flex;align-items:baseline;gap:var(--length-12)}.b2 header .num{font-family:var(--mono);font-size:var(--length-11);color:var(--chrome-2)}.b2 header .il-tag{margin-left:auto}
.b2-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--length-10)}
.b2-t{border-radius:var(--length-16);display:grid;place-items:center;min-height:var(--length-240)}
.b2-t svg{width:var(--length-132);height:var(--length-132);display:block}
.b2-t.dark{background:var(--palette-050506);color:var(--palette-fff);--accent:var(--palette-e10600)}.b2-t.light{background:var(--palette-f4f5f7);color:var(--palette-0b0b0c);--accent:var(--palette-e10600)}
.b2-t.mono{--accent:currentColor}
.b2-t.lock{min-height:var(--length-110);display:flex;justify-content:center;align-items:center;gap:var(--length-15)}
.b2-li svg{width:var(--length-29);height:var(--length-29)}
.b2-wm{font:600 var(--length-28)/1 Geist,Arial,sans-serif;letter-spacing:-.03em}
.wm2-mark{font:700 var(--length-30)/1 Geist,Arial,sans-serif;letter-spacing:-.04em;white-space:nowrap}
.wm2-mark i,.wm2-fav i{display:inline-block;font-style:normal;transform:skewX(-14deg);color:var(--accent)}
.b2-t.mono .wm2-mark i{color:inherit}
.b2-fav{display:flex;align-items:center;gap:var(--length-8);font-size:var(--length-10);letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-2)}
.b2-fav span{margin-right:auto}
.b2-fav i{display:grid;place-items:center;border-radius:var(--length-4);padding:0;box-sizing:content-box;outline:var(--length-6) solid}
.b2-fav i.dark{background:var(--palette-050506);color:var(--palette-fff);outline-color:var(--palette-050506);--accent:var(--palette-e10600)}.b2-fav i.light{background:var(--palette-f4f5f7);color:var(--palette-0b0b0c);outline-color:var(--palette-f4f5f7);--accent:var(--palette-e10600)}
.b2-fav i svg{width:100%;height:100%}
.wm2-fav{font:700 1em/1 Geist,Arial,sans-serif}
.b2-fav i .wm2-fav{font-size:inherit}
.b2-fav i:nth-of-type(1) .wm2-fav,.b2-fav i:nth-of-type(4) .wm2-fav{font-size:var(--length-16)}.b2-fav i:nth-of-type(2) .wm2-fav,.b2-fav i:nth-of-type(5) .wm2-fav{font-size:var(--length-30)}.b2-fav i:nth-of-type(3) .wm2-fav,.b2-fav i:nth-of-type(6) .wm2-fav{font-size:var(--length-46)}
.b2-why{font-size:var(--length-14);color:var(--palette-d6d7da);line-height:1.5}
.b2-log{width:100%;border-collapse:collapse;font-size:var(--length-12)}
.b2-log td{padding:var(--length-6) 0;border-top:var(--length-1) solid var(--paint-alpha-c201d2da);color:var(--chrome-2)}
.b2-log td:last-child{color:var(--palette-cfd2d6);font-family:var(--mono);font-size:var(--length-11);text-align:right}
.b2-log td.f{color:var(--palette-ffd400)}
.b2-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--length-12)}
.b2-app{border-radius:var(--length-16);overflow:hidden;background:var(--palette-000);border:var(--length-1) solid var(--glass-line)}
.b2-app img{width:100%;aspect-ratio:1;object-fit:cover;display:block;max-height:var(--length-200)}
.b2-app figcaption{font-size:var(--length-11);letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-2);padding:var(--length-10) var(--length-12)}
@media (max-width:900px){.b2-grid,.b2-brief,.b2-apps{grid-template-columns:1fr}}


/* site.css: adopted from Speed-draft 8126f29 */
:root{
  /* Theme tokens. Light = graphite + flat yellow. Dark = pure black + neon yellow. Components read the semantic names only. */
  --bg:var(--palette-1e1f22); --surface:var(--palette-26282c); --surface-2:var(--palette-303237); --line:var(--paint-alpha-e56afd83); --text:var(--palette-f4f5f7); --muted:var(--palette-a0a4ab);
  --yellow:var(--palette-ffd400); --on-yellow:var(--palette-141416); --y-glow:none; --y-text-glow:none; --y-soft:var(--paint-alpha-4bc3be83);
  --bg-rgb:.118,.122,.133; --neon:.35; color-scheme:dark;
  /* legacy aliases */
  --black:var(--bg); --ink:var(--surface); --white:var(--text); --chrome:var(--palette-c9ccd1); --chrome-2:var(--muted);
  --glass:var(--paint-alpha-5704ef9e); --glass-line:var(--line);
  --red:var(--palette-e10600); --ease:cubic-bezier(.2,.7,0,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --font:var(--font-body); --mono:var(--font-mono);
  --chrome-grad:linear-gradient(180deg,var(--palette-fff) 0%,var(--palette-d7dadf) 38%,var(--palette-4a4d52) 50%,var(--palette-2b2d31) 54%,var(--palette-b9bdc3) 72%,var(--palette-f2f3f5) 100%);
  --yellow-grad:linear-gradient(180deg,var(--palette-fff3b0) 0%,var(--palette-ffd400) 36%,var(--palette-5a4300) 50%,var(--palette-2a1f00) 54%,var(--palette-ffcc00) 74%,var(--palette-fff6cf) 100%);
  --red-grad:var(--yellow-grad);
}
:root[data-theme="dark"]{
  --bg:var(--palette-000); --surface:var(--palette-0a0a0b); --surface-2:var(--palette-141416); --line:var(--paint-alpha-b34d3e79); --muted:var(--palette-8e9298);
  --yellow:var(--palette-ffe600); --on-yellow:var(--palette-000); --y-soft:var(--paint-alpha-758a06d7);
  --y-glow:0 0 var(--length-14) var(--paint-alpha-5187a5d5),0 0 var(--length-42) var(--paint-alpha-9c03a2cc);
  --y-text-glow:0 0 var(--length-6) var(--paint-alpha-28b8129b),0 0 var(--length-22) var(--paint-alpha-37f0a510);
  --bg-rgb:0,0,0; --neon:1;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:var(--palette-000);--surface:var(--palette-0a0a0b);--surface-2:var(--palette-141416);--yellow:var(--palette-ffe600);--on-yellow:var(--palette-000);--y-glow:0 0 var(--length-14) var(--paint-alpha-5187a5d5),0 0 var(--length-42) var(--paint-alpha-9c03a2cc);--y-text-glow:0 0 var(--length-6) var(--paint-alpha-28b8129b),0 0 var(--length-22) var(--paint-alpha-37f0a510)}}
.speed-site *{box-sizing:border-box;margin:0;padding:0}
html:has(.speed-site){scroll-behavior:smooth}
body.speed-site{background:var(--bg);color:var(--text);transition:background-color .4s;font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.speed-site a{color:inherit;text-decoration:none}
.speed-site img{display:block;max-width:100%}
.wrap{max-width:var(--length-1240);margin:0 auto;padding:0 var(--length-24)}

/* chrome text: CSS fallback; liquid.js swaps in the WebGL shader */
/* headlines are liquid metal: silver, with one yellow accent word per headline (.acc-v; .acc-n is a legacy alias) */
.speed-site h1,.speed-site h2,.speed-site h3{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.acc-n{background:var(--red-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.acc-v{background:var(--yellow-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gl-on h1,.gl-on h2,.gl-on h3,.gl-on .acc-n,.gl-on .acc-v{background:none;color:transparent;-webkit-text-fill-color:transparent}
[data-liquid]{position:relative}
[data-liquid]>canvas.liquid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
[data-liquid]>*:not(canvas){position:relative;z-index:1}
.glass{background:var(--glass);border:var(--length-1) solid var(--glass-line);backdrop-filter:blur(var(--length-18)) saturate(140%);-webkit-backdrop-filter:blur(var(--length-18)) saturate(140%)}

/* nav */
nav.top{position:fixed;inset:var(--length-16) var(--length-16) auto;z-index:20;border-radius:var(--length-999);display:flex;align-items:center;justify-content:flex-start;gap:var(--length-16);padding:var(--length-8) var(--length-8) var(--length-8) var(--length-20);max-width:var(--length-1240);margin:0 auto}
.logo{font-size:var(--length-17);letter-spacing:-.01em;display:flex;align-items:center;gap:var(--length-10);white-space:nowrap}
.logo svg{width:var(--length-22);height:var(--length-14)}
nav.top .btn{font-size:var(--length-15);padding:var(--length-12) var(--length-22)}
nav.top ul{display:flex;gap:var(--length-26);margin:0 var(--length-8) 0 auto;list-style:none;font-size:var(--length-13);color:var(--chrome-2)}
nav.top ul a{transition:color .3s}
nav.top ul a:hover,nav.top ul a[aria-current]{color:var(--palette-fff)}
.menu{display:none}
@media (max-width:980px){
  nav.top ul{display:none;position:absolute;top:calc(100% + var(--length-8));left:0;right:0;flex-direction:column;gap:0;padding:var(--length-8);border-radius:var(--length-20);background:var(--paint-alpha-b627cb31);border:var(--length-1) solid var(--glass-line);backdrop-filter:blur(var(--length-18));-webkit-backdrop-filter:blur(var(--length-18))}
  nav.top ul a{display:block;padding:var(--length-14) var(--length-16);font-size:var(--length-16)}
  nav.top.open ul{display:flex}
  .menu{display:grid;place-items:center;width:var(--length-40);height:var(--length-40);border-radius:50%;border:var(--length-1) solid var(--glass-line);background:none;color:var(--palette-fff);cursor:pointer}
  nav.top .btn{display:none}
  .theme-tg{margin-left:auto}
}

/* ---------- liquid metal buttons ---------- */
.btn{--mx:50%;--my:50%;--hot:0;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--length-10);border-radius:var(--length-999);padding:var(--length-16) var(--length-30);font-size:var(--length-17);letter-spacing:-.01em;color:var(--palette-0b0b0c);cursor:pointer;border:0;font-family:inherit;white-space:nowrap;transition:transform .6s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:
    radial-gradient(var(--length-120) var(--length-60) at var(--mx) var(--my),color-mix(in srgb, var(--palette-ffffff) calc(25% + var(--hot)*75%), transparent),transparent 70%),
    linear-gradient(100deg,transparent 30%,var(--paint-alpha-17f204ee) 46%,var(--paint-alpha-8e2d6ca7) 54%,transparent 70%) calc(var(--mx) * -1 + 50%) 0/220% 100% no-repeat,
    linear-gradient(180deg,var(--palette-ffffff) 0%,var(--palette-e4e6ea) 22%,var(--palette-8d929a) 46%,var(--palette-3b3e43) 52%,var(--palette-6f747b) 62%,var(--palette-d9dce0) 84%,var(--palette-ffffff) 100%);
  filter:url(#liquid-metal);box-shadow:inset 0 var(--length-1) 0 var(--paint-alpha-8f48d9ac),inset 0 var(--length-minus-1) 0 var(--paint-alpha-3d9c0a42)}
.btn::after{content:"";position:absolute;inset:var(--length-minus-1);border-radius:inherit;z-index:-2;background:linear-gradient(180deg,var(--paint-alpha-aeceb004),var(--paint-alpha-33a0843b));}
.btn{transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .55s var(--ease)}
.btn:hover{transform:translateY(var(--btn-lift,var(--length-minus-3))) scale(var(--btn-scale,1.03))}
.btn.cb-on:not(.ghost):hover{box-shadow:0 var(--length-16) var(--length-40) var(--paint-alpha-e1d0b862),0 0 0 var(--length-1) var(--paint-alpha-33a0843b),0 0 var(--length-32) color-mix(in srgb, var(--yellow) calc(var(--btn-glow,.25) * 100%), transparent)}
.btn.ghost:hover{box-shadow:0 0 var(--length-28) var(--paint-alpha-9fd598b9)}
.btn:active{transform:translateY(var(--length-1)) scale(var(--btn-press,.95));transition-duration:.12s}
.btn.cb-on::before,.btn.cb-on::after{display:none}
.btn.cb-on{background:none}
.btn-chrome{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit}
.btn.cb-on{font-size:var(--btn-size,var(--length-17));font-weight:var(--btn-weight,600)}
.btn.cb-on:not(.ghost){color:var(--palette-050505);text-shadow:0 0 var(--length-10) var(--paint-alpha-8f48d9ac),0 0 var(--length-3) var(--paint-alpha-54b4f5dd),0 var(--length-1) 0 var(--palette-fff)}
.btn.cb-on.ghost{color:var(--palette-fff);text-shadow:0 0 var(--length-8) var(--paint-alpha-b7ace229),0 var(--length-1) var(--length-2) var(--palette-000)}
.btn.cb-on:not(.ghost){box-shadow:0 var(--length-8) var(--length-24) var(--paint-alpha-63db2c44),0 0 0 var(--length-1) var(--paint-alpha-33a0843b)}
.btn.ghost{color:var(--white);background:var(--paint-alpha-2d55e9cc)}
.btn.ghost::before{padding:var(--length-1-5);-webkit-mask:linear-gradient(var(--palette-000) 0 0) content-box,linear-gradient(var(--palette-000) 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:none}
.btn.ghost::after{display:none}

/* type */
.eyebrow{font-size:var(--length-10);letter-spacing:.32em;text-transform:uppercase;color:var(--chrome-2);display:flex;align-items:center;gap:var(--length-10);margin-bottom:var(--length-24)}

.speed-site h1{font-weight:400;font-size:clamp(var(--length-56),11.5vw,var(--length-184));line-height:.9;letter-spacing:-.055em}
.speed-site h2{font-weight:400;font-size:clamp(var(--length-40),7vw,var(--length-104));line-height:.94;letter-spacing:-.045em}
.speed-site h3{font-weight:400;font-size:clamp(var(--length-24),2.6vw,var(--length-34));letter-spacing:-.03em;line-height:1.05}
.lead{color:var(--chrome-2);font-size:var(--length-16);line-height:1.6;max-width:var(--length-480)}
.accent-y{color:var(--yellow);text-shadow:var(--y-text-glow)}.accent-r{color:var(--red)}

/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:var(--length-140) 0 9vh;overflow:hidden}
.hero .wrap{width:100%}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--length-32);margin-top:var(--length-40);flex-wrap:wrap}
.hero-foot p{max-width:var(--length-400);color:var(--chrome-2);font-size:var(--length-15);line-height:1.55}
.cta{display:flex;gap:var(--length-10);flex-wrap:wrap}
.page-hero{min-height:78svh}
.page-hero h1{font-size:clamp(var(--length-52),9.5vw,var(--length-152))}

/* rotating word: inline box whose width eases to each word; nothing else on its line, so nothing reflows */
.rot{display:inline-block;position:relative;white-space:nowrap;clip-path:inset(-.24em -.05em -.3em -.05em);transition:width .9s var(--ease)}
.rot .sz{visibility:hidden;font-style:normal}
@media (max-width:700px){.rot{display:block;width:auto!important}.rot+br{display:none}}
.rot span{position:absolute;left:0;top:0;white-space:nowrap;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.rot span.out{transform:translateY(-170%);opacity:0}
.rot span.in{transform:translateY(170%);opacity:0}

/* reveal: transform + opacity only (no layout, no blur repaint) */
.reveal{opacity:0;transform:translate3d(0,var(--length-24),0);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.on{opacity:1;transform:none}

/* marquee */
.marq{overflow:hidden;padding:var(--length-20) 0;background:var(--yellow);color:var(--on-yellow);box-shadow:var(--y-glow);position:relative;z-index:2;font-weight:500;font-size:var(--length-13);letter-spacing:.2em;text-transform:uppercase}
.marq div{display:flex;gap:var(--length-48);width:max-content;animation:mq 40s linear infinite}
.marq i{color:var(--on-yellow);font-style:normal;opacity:.55}
@keyframes mq{to{transform:translateX(-50%)}}

section{padding:var(--length-140) 0}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--length-60);align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--length-1);margin-top:var(--length-48);background:var(--glass-line);border:var(--length-1) solid var(--glass-line);border-radius:var(--length-16);overflow:hidden}
.stats div{background:var(--black);padding:var(--length-22)}
.stats b{display:block;font-weight:400;font-size:var(--length-56);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.stats b em{color:var(--yellow);font-style:normal;text-shadow:var(--y-text-glow)}
.stats span{font-size:var(--length-10);color:var(--chrome-2);letter-spacing:.2em;text-transform:uppercase}
.photo{border-radius:var(--length-24);overflow:hidden;aspect-ratio:4/5;position:relative;background:var(--surface)}
.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.photo:hover img{transform:scale(1)}
.photo .tag{position:absolute;left:var(--length-16);bottom:var(--length-16);border-radius:var(--length-12);padding:var(--length-12) var(--length-14);font-size:var(--length-12);color:var(--chrome)}
.photo .tag b{color:var(--palette-fff);font-weight:400;display:block;font-size:var(--length-14)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--length-40);margin-bottom:var(--length-56);flex-wrap:wrap}
.sec-head p{color:var(--chrome-2);max-width:var(--length-400);line-height:1.6}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--length-16)}
.card{border-radius:var(--length-22);padding:var(--length-28);min-height:var(--length-340);display:flex;flex-direction:column;justify-content:space-between;gap:var(--length-28);position:relative;overflow:hidden;border:var(--length-1) solid var(--glass-line);background:linear-gradient(180deg,var(--paint-alpha-986d4b8f),var(--paint-alpha-436b175d));transition:border-color .5s,transform .8s var(--ease)}
.card:hover{border-color:var(--paint-alpha-c5790f2c);transform:translateY(var(--length-minus-4))}
.card .num{font-family:var(--mono);font-size:var(--length-11);color:var(--chrome-2);letter-spacing:.1em}
.card p{color:var(--chrome-2);font-size:var(--length-14);line-height:1.6}
.card .go{font-size:var(--length-13);display:flex;align-items:center;gap:var(--length-8);color:var(--palette-fff)}
.card .go::after{content:"→";transition:transform .5s var(--ease)}
.card:hover .go::after{transform:translateX(var(--length-4))}
.card.tex{background-size:cover;background-position:center}

.card>*{position:relative}

.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--length-12)}
.grid5.g3{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:1fr 1fr}
.tile{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-18);padding:var(--length-20);min-height:var(--length-220);display:flex;flex-direction:column;justify-content:space-between;background:var(--paint-alpha-3b1d5b22)}
.tile b{font-weight:400;font-size:var(--length-20);letter-spacing:-.02em}
.tile p{font-size:var(--length-13);color:var(--chrome-2);line-height:1.5}
.tile .ico{height:var(--length-64);border:var(--length-1) dashed var(--paint-alpha-e7e4f05d);border-radius:var(--length-10);position:relative;overflow:hidden}

.code{font-family:var(--mono);font-size:var(--length-13);line-height:1.7;border-radius:var(--length-16);padding:var(--length-22);background:var(--surface);border:var(--length-1) solid var(--glass-line);color:var(--chrome);overflow:auto;white-space:pre}
.code .k{color:var(--yellow)}.code .s{color:var(--palette-ff6a5c)}.code .c{color:var(--palette-5d6168)}

/* final + footer */
.final{text-align:center;padding:var(--length-160) 0 var(--length-140)}
.final h2{font-size:clamp(var(--length-44),8vw,var(--length-120))}
.final .cta{justify-content:center;margin-top:var(--length-40)}
footer{border-top:var(--length-1) solid var(--glass-line);padding:var(--length-28) 0 var(--length-60);color:var(--chrome-2);font-size:var(--length-13);position:relative;z-index:1}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--length-12)}
footer nav{display:flex;gap:var(--length-20);flex-wrap:wrap}

/* loader: gauge on top, number below the pivot so the needle never crosses it */
#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.no-loader #loader{display:none}
.gauge{width:min(var(--length-300),70vw);text-align:center}
.gauge svg{width:100%;display:block;overflow:visible}
.gauge .trk{stroke:var(--paint-alpha-b56364a7);stroke-width:1.2;fill:none}
.gauge .arc{stroke:url(#gg);stroke-width:1.2;fill:none;stroke-linecap:round}
.gauge .tk{stroke:var(--paint-alpha-37897b04);stroke-width:1}
.gauge .tk.red{stroke:var(--red)}
.gauge .ndl{stroke:var(--yellow);stroke-width:1.2;transform-origin:var(--length-160) var(--length-160)}
.gauge-n{font-size:var(--length-44);letter-spacing:-.05em;margin-top:var(--length-18);font-variant-numeric:tabular-nums;line-height:1}
.gauge-u{font-size:var(--length-9);letter-spacing:.4em;color:var(--chrome-2);margin-top:var(--length-12);text-transform:uppercase}

/* progressive bottom blur */
.bblur{position:fixed;left:0;right:0;bottom:0;height:var(--length-150);z-index:9;pointer-events:none}
.bblur>div{position:absolute;inset:0}
.bblur>div:nth-child(1){backdrop-filter:blur(var(--length-1));-webkit-backdrop-filter:blur(var(--length-1));mask:linear-gradient(transparent 0%,var(--palette-000) 20%,var(--palette-000) 40%,transparent 60%);-webkit-mask:linear-gradient(transparent 0%,var(--palette-000) 20%,var(--palette-000) 40%,transparent 60%)}
.bblur>div:nth-child(2){backdrop-filter:blur(var(--length-2));-webkit-backdrop-filter:blur(var(--length-2));mask:linear-gradient(transparent 20%,var(--palette-000) 40%,var(--palette-000) 60%,transparent 80%);-webkit-mask:linear-gradient(transparent 20%,var(--palette-000) 40%,var(--palette-000) 60%,transparent 80%)}
.bblur>div:nth-child(3){backdrop-filter:blur(var(--length-4));-webkit-backdrop-filter:blur(var(--length-4));mask:linear-gradient(transparent 40%,var(--palette-000) 60%,var(--palette-000) 80%,transparent 100%);-webkit-mask:linear-gradient(transparent 40%,var(--palette-000) 60%,var(--palette-000) 80%,transparent 100%)}
.bblur>div:nth-child(4){backdrop-filter:blur(var(--length-8));-webkit-backdrop-filter:blur(var(--length-8));mask:linear-gradient(transparent 60%,var(--palette-000) 80%);-webkit-mask:linear-gradient(transparent 60%,var(--palette-000) 80%)}
.bblur>div:nth-child(5){backdrop-filter:blur(var(--length-16));-webkit-backdrop-filter:blur(var(--length-16));mask:linear-gradient(transparent 80%,var(--palette-000) 100%);-webkit-mask:linear-gradient(transparent 80%,var(--palette-000) 100%)}
.bblur::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,var(--paint-alpha-e1d0b862))}

@media (max-width:900px){
  .split,.cards{grid-template-columns:1fr}
  .grid5,.grid5.g3{grid-template-columns:1fr 1fr}
  .cards.two{grid-template-columns:1fr}
  section{padding:var(--length-96) 0}
  .wrap{padding:0 var(--length-16)}
  .bblur{height:var(--length-80)}
  .stats b{font-size:var(--length-40)}
}
@media (prefers-reduced-motion:reduce){.speed-site *{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* 3D metallic icons: tilt toward the pointer, spring back on leave */
.ico3d{width:var(--length-104);height:var(--length-104);perspective:var(--length-520);margin:var(--length-minus-8) 0 var(--length-14) var(--length-minus-8)}
.ico-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transition:transform .7s cubic-bezier(.34,1.56,.64,1);animation:bob 6s ease-in-out infinite}
.ico-in img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;filter:brightness(.95) contrast(1.08);transition:filter .5s}
.ico-in .sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 38%,var(--paint-alpha-54b4f5dd) 50%,transparent 62%) var(--sx,50%) 0/260% 100% no-repeat;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat luminance;-webkit-mask-source-type:luminance}
.tilt:hover .ico-in{--s:1.1;transition:transform .25s var(--ease)}
.tilt:hover .ico-in img{filter:brightness(1.2) contrast(1.12)}
.tilt:hover .sheen{opacity:.85}
@keyframes bob{50%{translate:0 var(--length-minus-4)}}
.tile.tilt{justify-content:flex-start;gap:var(--length-6)}
.ico3d.is-3d .ico-in{display:none}
.ico3d .ico-cv{width:100%;height:100%;display:block}
.ico3d.svc{width:var(--length-168);height:var(--length-168);margin:var(--length-minus-24) 0 var(--length-minus-10) var(--length-minus-24)}

/* ---------- home: process, lap times, teams, details ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--length-16)}
.step{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-22);overflow:hidden;background:var(--paint-alpha-3b1d5b22);padding-bottom:var(--length-22)}
.step-img{aspect-ratio:4/3;overflow:hidden;margin-bottom:var(--length-18)}
.step-img img,.tc-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease);filter:contrast(1.1)}
.step:hover img,.team-card:hover img{transform:scale(1)}
.step .num,.step h3,.step p{margin:0 var(--length-22)}
.step .num{font-family:var(--mono);font-size:var(--length-11);color:var(--chrome-2);display:block;margin-bottom:var(--length-8)}
.step p{color:var(--chrome-2);font-size:var(--length-14);line-height:1.6;margin-top:var(--length-10)}
.timing{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-22);padding:var(--length-8) var(--length-22) var(--length-18);background:var(--surface);font-family:var(--mono)}
.timing-h,.lap{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:var(--length-12);align-items:baseline}
.timing-h{font-size:var(--length-10);letter-spacing:.16em;text-transform:uppercase;color:var(--palette-5d6168);padding:var(--length-14) 0;border-bottom:var(--length-1) solid var(--glass-line)}
.lap{padding:var(--length-16) 0 var(--length-12);border-bottom:var(--length-1) solid var(--paint-alpha-5704ef9e);font-size:var(--length-13)}
.lap-name{color:var(--chrome);font-family:var(--font)}
.lap-old{color:var(--palette-5d6168);text-decoration:line-through}
.lap-new{color:var(--yellow);font-size:var(--length-16);text-shadow:var(--y-text-glow)}
.lap-bar{grid-column:1/-1;height:var(--length-3);border-radius:var(--length-3);background:var(--paint-alpha-c201d2da);overflow:hidden;margin-top:var(--length-4)}
.lap-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--palette-5d6168),var(--palette-8e9298));transform-origin:left;transition:transform 1.6s var(--ease) .3s}
.lap.on .lap-bar i{transform:scaleX(var(--w));background:linear-gradient(90deg,var(--yellow),var(--palette-fff3a0))}
.teams{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--length-16)}
.team-card{border:var(--length-1) solid var(--glass-line);border-radius:var(--length-22);overflow:hidden;background:var(--paint-alpha-3b1d5b22)}
.tc-img{aspect-ratio:1;overflow:hidden}
.tc-body{padding:var(--length-20) var(--length-22) var(--length-24)}
.tc-body p{color:var(--chrome-2);font-size:var(--length-14);line-height:1.6;margin-top:var(--length-10)}
.det-strip{overflow:hidden;margin-top:var(--length-8);mask:linear-gradient(90deg,transparent,var(--palette-000) 8%,var(--palette-000) 92%,transparent);-webkit-mask:linear-gradient(90deg,transparent,var(--palette-000) 8%,var(--palette-000) 92%,transparent)}
.det-track{display:flex;gap:var(--length-16);width:max-content;animation:det 60s linear infinite}
.det-strip:hover .det-track{animation-play-state:paused}
.det{width:var(--length-420);aspect-ratio:3/2;border-radius:var(--length-18);overflow:hidden;flex:none;border:var(--length-1) solid var(--glass-line)}
.det img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.det:hover img{transform:scale(1.08)}
@keyframes det{to{transform:translateX(calc(-50% - var(--length-8)))}}
@media (max-width:900px){.steps,.teams{grid-template-columns:1fr 1fr}.det{width:var(--length-280)}.timing-h,.lap{grid-template-columns:1.2fr .8fr .9fr}}
@media (max-width:560px){.steps,.teams{grid-template-columns:1fr}}
.fluid-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;mix-blend-mode:screen}

/* ---------- theme toggle ---------- */
.theme-tg{display:grid;place-items:center;flex:none;width:var(--length-40);height:var(--length-40);border-radius:50%;border:var(--length-1) solid var(--line);background:none;color:var(--text);cursor:pointer;transition:border-color .3s,box-shadow .3s}
.theme-tg:hover{border-color:var(--yellow);box-shadow:var(--y-glow)}
.theme-tg svg{width:var(--length-16);height:var(--length-16)}
.theme-tg .moon{display:none}
:root[data-theme="dark"] .theme-tg .sun{display:none}:root[data-theme="dark"] .theme-tg .moon{display:block;color:var(--yellow);filter:drop-shadow(0 0 var(--length-4) var(--yellow))}

/* ---------- yellow surface accent: at most one per viewport ---------- */
.y-surface{background:var(--yellow);color:var(--on-yellow);box-shadow:var(--y-glow)}
.y-surface h3,.y-surface h2{background:none;color:var(--on-yellow);-webkit-text-fill-color:var(--on-yellow)}
.y-surface p,.y-surface .eyebrow{color:color-mix(in srgb,var(--on-yellow) 72%,transparent)}
.y-chip{display:inline-flex;align-items:center;gap:var(--length-8);background:var(--yellow);color:var(--on-yellow);border-radius:var(--length-999);padding:var(--length-6) var(--length-12);font-size:var(--length-10);letter-spacing:.2em;text-transform:uppercase;font-weight:500;box-shadow:var(--y-glow)}

/* ---------- mascot ---------- */
.stage{position:relative;border-radius:var(--length-24);overflow:hidden;background:radial-gradient(60% 55% at 50% 58%,var(--y-soft),transparent 70%),var(--surface);border:var(--length-1) solid var(--line)}
.stage img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease)}
.stage:hover img{transform:scale(1.04) rotate(-1deg)}
.photo.stage{aspect-ratio:1/1}
.photo.stage img{object-fit:contain;transform:none}
.step-img.stage,.tc-img.stage{border:0;border-radius:0;border-bottom:var(--length-1) solid var(--line)}
.step-img.stage img,.tc-img.stage img{object-fit:contain;transform:none;filter:none;padding:var(--length-6)}
.step:hover .stage img,.team-card:hover .stage img{transform:scale(1.06) translateY(var(--length-minus-4))}
.scene{border-radius:var(--length-24);overflow:hidden;position:relative;background:var(--bg)}
.scene img{width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten}
.mascot-float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{translate:0 var(--length-minus-10)}}

/* ---------- old way vs new way ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:var(--length-16)}
.vs-card{border-radius:var(--length-24);padding:var(--length-28);display:grid;grid-template-rows:auto 1fr auto;gap:var(--length-18);min-height:var(--length-520);position:relative;overflow:hidden;border:var(--length-1) solid var(--line)}
.vs-card.old{background:var(--surface)}
.vs-card.old img{filter:saturate(.75)}
.vs-card .vs-art{display:grid;place-items:center;min-height:var(--length-300)}
.vs-card .vs-art img{max-height:var(--length-340);width:auto;object-fit:contain}
.vs-card ul{list-style:none;display:grid;gap:var(--length-8);font-size:var(--length-14);line-height:1.5}
.vs-card.old ul li::before{content:"✕  ";color:var(--muted)}
.vs-card.old ul{color:var(--muted)}
.vs-card.old h3{background:none;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.vs-card.new ul li::before{content:"→  "}
.vs-card .eyebrow{margin-bottom:var(--length-10)}
@media (max-width:900px){.versus{grid-template-columns:1fr}.vs-card{min-height:0}}
.vs-t{display:block;font-weight:400;font-size:clamp(var(--length-24),2.6vw,var(--length-34));letter-spacing:-.03em;line-height:1.05}
.vs-card.old .vs-t{color:var(--muted)}
.card.mascot-card{min-height:0;padding:var(--length-10) var(--length-10) var(--length-26);gap:var(--length-22);justify-content:flex-start}
.card.mascot-card>div:not(.mc-art){padding:0 var(--length-18);flex:1}
.card.mascot-card .go{padding:0 var(--length-18)}
.mc-art{position:relative;aspect-ratio:4/3;border-radius:var(--length-16);overflow:hidden;background:var(--palette-000)}
.mc-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.mascot-card:hover .mc-art img{transform:scale(1.1)}
.mc-art .y-chip{position:absolute;left:var(--length-12);top:var(--length-12);box-shadow:none}

/* ---------- frosted glass: every card or tile that holds a 3D icon ---------- */
.frost{background:linear-gradient(180deg,var(--paint-alpha-edf6a600),var(--paint-alpha-986d4b8f));border:var(--length-1) solid var(--paint-alpha-82e16a99);
  backdrop-filter:blur(var(--length-22)) saturate(150%);-webkit-backdrop-filter:blur(var(--length-22)) saturate(150%);
  box-shadow:inset 0 var(--length-1) 0 var(--paint-alpha-ae7f66dc),inset 0 var(--length-minus-1) 0 var(--paint-alpha-78eab87e),0 var(--length-20) var(--length-50) var(--paint-alpha-78eab87e)}
:root[data-theme="dark"] .frost{background:linear-gradient(180deg,var(--paint-alpha-c201d2da),var(--paint-alpha-99cc8467));border-color:var(--paint-alpha-06ff57dd)}
.frost:hover{border-color:var(--paint-alpha-1c42c883)}
.frost h3,.gl-on .frost h3{background:linear-gradient(180deg,var(--palette-fff) 0%,var(--palette-e6e8eb) 45%,var(--palette-aeb2b8) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}


.speed-site { min-width: 0; }
.speed-site .reveal { opacity: 1; transform: none; }
.speed-site [data-liquid] { isolation: isolate; }
.speed-site [data-liquid].has-poster::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg), transparent), var(--scene-image) var(--scene-position, center)/cover no-repeat; opacity: .6; }
.speed-site [data-liquid].gl-on::before { visibility: hidden; }
.speed-site .ico3d:empty::before { content: '✦'; display: grid; place-items: center; height: 100%; color: var(--yellow); font-size: var(--type-display); }
.speed-site :focus-visible { outline: var(--length-3) solid var(--yellow); outline-offset: var(--length-4); }
.speed-site .skip-link { position: fixed; top: var(--space-4); left: var(--space-4); z-index: 100; background: var(--bg); color: var(--text); padding: var(--space-3); transform: translateY(-200%); }
.speed-site .skip-link:focus { transform: none; }
.speed-site .template-notice { padding: var(--space-3) var(--space-6); background: var(--surface); color: var(--muted); font-size: var(--type-small); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .speed-site *, .speed-site *::before, .speed-site *::after { animation: none !important; transition: none !important; } }
.layout-8112c609{padding-top:var(--length-120)}
.layout-d2dbf75e{aspect-ratio:1/1}
.layout-47d1da2d{padding:var(--length-22) var(--length-4)}
.layout-b2c629ca{margin-bottom:var(--length-12)}
.layout-97d8c4ee{margin-top:var(--length-10)}
.layout-9cf8e9fb{padding-top:var(--length-40)}
.layout-44ea1e2b{margin-top:var(--length-24)}
.layout-99b9ba53{justify-content:center}
.scene-c25ed83e{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/eeba923ef248e0c2ab64f554c78aae183fcacb2bd93711e31ab42baa541074d5/speed-mascots-scenes-pit.webp");--scene-position:72% 19%}
.scene-eedbe2c4{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/321e12ccbfc05a722221a981b659eea7bb7adbbb75209780862150c612351dcd/speed-mascots-scenes-launch.webp");--scene-position:70% 32%}
.layout-a1395ec1{margin-top:var(--length-8)}
.layout-a5d3ca5d{min-height:var(--length-170)}
.layout-cfa89ce9{font-family:var(--mono);font-size:var(--length-11);color:var(--chrome-2)}
.scene-bb333157{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/322baff12ed4e65994fec745fa267902d29e6ceed0fe92e35f8608f4317f9eb9/speed-mascots-scenes-desk.webp");--scene-position:63% 18%}
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--length-16)}.app-fig{border-radius:var(--length-22);overflow:hidden;border:var(--length-1) solid var(--line);background:var(--surface)}.app-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}.app-fig:hover img{transform:scale(1.03)}.app-fig figcaption{display:grid;gap:var(--length-4);padding:var(--length-16) var(--length-18)}.app-fig figcaption b{font-weight:400;font-size:var(--length-18)}.app-fig figcaption span{color:var(--muted);font-size:var(--length-13)}@media (max-width:900px){.app-grid{grid-template-columns:1fr}}
.layout-10e9f0f2{padding-top:var(--length-80)}
.layout-6c0c48e3{margin-top:var(--length-12)}
.layout-980ae8b4{min-height:var(--length-120)}
.layout-cea53faf{display:block;margin-top:var(--length-6)}
.layout-e921e33d{aspect-ratio:16/9}
.scene-4b46e1c6{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/888b85cabfb545b0fcd9a4d583347e56b38001eebe24a1ac539a493290ea7b49/speed-mascots-scenes-paint.webp");--scene-position:76% 17%}
.scene-47a26e88{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/819d5429fe65d4abc4e87019f6262faa8985fc2eda4be56fcb499e2867b1afc4/speed-liquid-red-01.webp");--scene-position:50% 50%}
.scene-e231b298{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/3ab800760fe183b08a5bd328853b09b58f66456f7d078fd90c545346cadbb335/speed-liquid-red-04.webp");--scene-position:50% 50%}
.scene-8ac7e42e{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/91875beb246af9fda8c2f9e6c4e3dc4717b0b4716e525a8a6489b1752a1a771e/speed-liquid-red-02.webp");--scene-position:50% 50%}

.cc-mock{border-radius:var(--length-20);border:var(--length-1) solid var(--glass-line);background:var(--palette-0b0b0c);overflow:hidden}
.cc-top{display:flex;align-items:center;gap:var(--length-6);padding:var(--length-10) var(--length-14);border-bottom:var(--length-1) solid var(--glass-line);font-size:var(--length-11);color:var(--chrome-2);font-family:var(--mono)}
.cc-top i{width:var(--length-7);height:var(--length-7);border-radius:50%;background:var(--palette-2a2a2e)}.cc-top span{margin-left:var(--length-10)}
.cc-grid{display:grid;grid-template-columns:1fr 1.1fr;min-height:var(--length-320)}
.cc-canvas{padding:var(--length-22);border-right:var(--length-1) solid var(--glass-line);position:relative}
.cc-sel{position:absolute;inset:var(--length-14) var(--length-14) auto var(--length-14);height:var(--length-150);border:var(--length-1-5) solid var(--yellow);border-radius:var(--length-8);pointer-events:none}
.cc-sel b{position:absolute;top:var(--length-minus-10);left:var(--length-8);font-weight:400;font-size:var(--length-10);background:var(--yellow);color:var(--palette-000);padding:var(--length-2) var(--length-6);border-radius:var(--length-4)}
.cc-btn{width:var(--length-120);height:var(--length-30);border-radius:var(--length-99);margin-top:var(--length-18);background:var(--palette-3a63ff);animation:ccb 6s var(--ease-io) infinite}
@keyframes ccb{0%,45%{background:var(--palette-3a63ff)}55%,100%{background:linear-gradient(180deg,var(--palette-fff),var(--palette-8d929a) 46%,var(--palette-3b3e43) 52%,var(--palette-d9dce0))}}
.cc-img{height:var(--length-90);border-radius:var(--length-10);margin-top:var(--length-40);border:var(--length-1) dashed var(--paint-alpha-e7e4f05d)}
.cc-code{padding:var(--length-18);font-family:var(--mono);font-size:var(--length-12);line-height:1.9;color:var(--chrome)}
.cc-code .c{color:var(--palette-5d6168)}.cc-code .m{color:var(--palette-ff6a5c);background:var(--paint-alpha-b01d7704)}.cc-code .p{color:var(--yellow);background:var(--paint-alpha-cb2d482e);animation:ccp 6s var(--ease-io) infinite}
@keyframes ccp{0%,40%{opacity:0}50%,100%{opacity:1}}
@media (max-width:900px){.cc-grid{grid-template-columns:1fr}.cc-canvas{border-right:0;border-bottom:var(--length-1) solid var(--glass-line)}}
.layout-61ef4ddd{min-height:var(--length-260)}
.layout-2a00ec41{width:70%;height:var(--length-14);background:var(--palette-fff)}
.layout-69318feb{width:90%;margin-top:var(--length-10)}
.scene-41e66402{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/a2470783ec6b80d9ef120eb356bb99072fd9db572e148aa51f326f60fdaf8782/speed-mascots-scenes-code.webp");--scene-position:85% 22%}
.layout-055c580e{background:var(--palette-1e1f22);border:var(--length-1) solid var(--glass-line)}
.layout-65d61fa9{background:var(--palette-26282c);border:var(--length-1) solid var(--glass-line)}
.layout-fb6767d8{background:var(--palette-000000);border:var(--length-1) solid var(--glass-line)}
.layout-473f90de{background:var(--palette-ffd400)}
.layout-a7fae3c2{background:var(--palette-ffe600);box-shadow:0 0 var(--length-14) var(--paint-alpha-07f6bd7d),0 0 var(--length-40) var(--paint-alpha-6a2da8ba)}
.layout-9214fedb{background:var(--palette-c9ccd1)}
.layout-dd77564b{background:var(--palette-8e9298)}
.layout-c2925976{background:var(--palette-e10600)}
.layout-0c0c3208{margin-top:var(--length-16)}
.layout-a9aaea5d{font-size:clamp(var(--length-56),9vw,var(--length-140));line-height:.9;letter-spacing:-.055em}
.layout-e3b0c442{}
.layout-d531cea5{color:var(--chrome-2);font-size:var(--length-16);line-height:1.6;max-width:var(--length-520)}
.layout-82274d53{font-size:var(--length-10);letter-spacing:.32em;text-transform:uppercase;color:var(--chrome-2)}
.layout-5134b320{font-family:var(--mono);font-size:var(--length-13);color:var(--chrome)}
.layout-5a764d10{background-image:url(https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/b0cc8a9f66bbee48b4e9fac14d8b6384adffd766515d7edd5852a7ccd8193a3c/speed-liquid-yellow-03.webp)}
.layout-ccd35dfd{margin-top:var(--length-18)}
.layout-2da30b32{margin-top:var(--length-14)}
.layout-b8124b22{width:72%}
.layout-110c1427{justify-content:flex-end}
.layout-6f7364a6{object-position:63% 18%}
.layout-5da40bfb{object-position:85% 22%}
.scene-72499f75{--scene-image:url("https://assets.timds.com/clients/6323067b-ddf8-43d2-b83d-d01621c3547e/design-systems/d9465b2e-3c19-48de-a3ee-7d1c4770c8ad/media/4e70edc98b17b10a8913238f0369a607c80e7ef2e79b1bb0e7d7bc3bffa38a7b/speed-mascots-scenes-hero-car.webp");--scene-position:69% 20%}
.layout-6aa34d74{display:none}
.layout-a8ee9a23{padding-top:var(--length-120);padding-bottom:var(--length-120)}
.layout-a600fc62{--w:10%}
.layout-850d3fdf{--w:7%}
.layout-1415ba4e{--w:5%}
.layout-b4498221{--w:2%}
.layout-48e16194{object-position:76% 17%}
.layout-ea799f83{aspect-ratio:16/10}
.layout-3a1b19d0{margin-top:var(--length-32)}
.M{fill:currentColor}.M-s{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter}.A{fill:var(--accent,currentColor)}
.layout-ff791649{position:absolute}
.layout-b9c79cfd{width:var(--length-16);height:var(--length-16)}
.layout-f0f70733{width:var(--length-32);height:var(--length-32)}
.layout-7e65db0d{width:var(--length-48);height:var(--length-48)}
.layout-4f284089{margin-top:var(--length-80)}
.layout-aedc8ac5{grid-template-columns:repeat(2,1fr)}
.layout-ef3e1e30{object-position:70% 32%}
.layout-31dbae57{color:var(--yellow)}
.layout-2a33854e{padding-top:var(--length-60)}
.layout-810763b0{font-size:clamp(var(--length-32),4.4vw,var(--length-64))}
.layout-5bf091c2{margin-top:var(--length-18);color:var(--muted);font-family:var(--mono);font-size:var(--length-12)}
.layout-d7edb8c7{min-height:0;grid-template-rows:auto auto 1fr auto}
.layout-19d2782d{font-size:var(--length-48);letter-spacing:-.04em}
.layout-730f5b77{opacity:.7}
.layout-04db8979{border-radius:var(--length-999);padding:var(--length-12) var(--length-18);text-align:center;font-size:var(--length-14);display:block}
.layout-cbd587f3{background:var(--on-yellow);color:var(--yellow);border-radius:var(--length-999);padding:var(--length-12) var(--length-18);text-align:center;font-size:var(--length-14);}
.layout-41149aaf{align-items:start}
.layout-fc56ae14{display:grid;gap:var(--length-10)}
.layout-f2e14349{padding:var(--length-120) 0 var(--length-40);min-height:0}
.layout-9a18adde{margin-bottom:var(--length-8)}
.layout-f3c1396a{font-size:var(--length-40)}
.layout-44b1b372{max-width:var(--length-560);margin-top:var(--length-10)}
.layout-78223abc{font-size:var(--length-11)}
.layout-26e45015{display:flex;justify-content:space-between}
.layout-c4f6591e{font-size:var(--length-12)}
.layout-032319a4{padding:var(--length-4) var(--length-14)}
.layout-396ab97d{max-width:none}
.layout-3dd87e62{height:var(--length-40);border-radius:var(--length-12)}
.layout-209af7ef{height:var(--length-44);border-radius:var(--length-12)}
.layout-4d69a74d{flex-wrap:wrap}
.layout-ef39c175{display:flex;gap:var(--length-12);align-items:center}
.layout-e17ca655{width:var(--length-64);height:var(--length-64);object-fit:contain}
.layout-75a62ef8{font-weight:500;font-size:var(--length-16)}
.layout-ad97e85a{font-size:var(--length-13)}
.layout-ca6fc035{margin-left:auto}
.layout-b88e2808{display:flex;gap:var(--length-8)}
.layout-b9313c78{font-size:var(--length-14)}
.layout-3066b6fd{filter:drop-shadow(var(--y-text-glow, 0 0 0 transparent))}
.layout-a09da247{width:82%}
.layout-d70636ea{width:64%}
.layout-7385cca5{width:41%}
.layout-d4a99f5f{width:28%}
.layout-62f056b3{width:12%}
.layout-e2c857d5{overflow:auto}
.layout-1b1a9ca1{width:var(--length-36)}
.layout-41bcc4f6{display:flex;gap:var(--length-6)}
.layout-0e55fb9e{display:grid;gap:var(--length-14);grid-template-columns:1fr 1fr}
.layout-7a60b820{grid-column:1/-1;display:flex;gap:var(--length-8);justify-content:flex-end}
.ambient { display:block; width:100%; height:100%; }

/* product.css: adopted from Speed-draft 8126f29 */
/* product.css: the functional layer of the Speed Styles system.
   Product UI is denser and quieter than marketing: no liquid headlines, no ripple,
   no mascot scenes. Yellow marks the primary action, the selected item and focus only. */
.app{--r:var(--length-10);--r-sm:var(--length-6);--row:var(--length-44);--side:var(--length-232);--text-2:var(--palette-c4c7cc);
  --ok:var(--palette-3ddc97);--warn:var(--palette-ffb020);--err:var(--palette-ff5c5c);--info:var(--palette-7aa7ff);
  --sidebar:var(--palette-191a1d);--input:var(--palette-1a1b1e);--hover:var(--paint-alpha-8caa693a);
  font-size:var(--length-14);line-height:1.45;color:var(--text);background:var(--bg);min-height:100vh}
:root[data-theme="dark"] .app{--sidebar:var(--palette-050505);--input:var(--palette-0d0d0e);--hover:var(--paint-alpha-5704ef9e)}
.app h1,.app h2,.app h3,.app h4{background:none;-webkit-text-fill-color:currentColor;color:var(--text);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.app h1{font-size:var(--length-22)}.app h2{font-size:var(--length-16)}.app h3{font-size:var(--length-14)}
.app .sub{color:var(--muted);font-size:var(--length-13)}
.app .mono{font-family:var(--mono);font-size:var(--length-12)}

/* layout */
.app-shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.app-side{background:var(--sidebar);border-right:var(--length-1) solid var(--line);padding:var(--length-14) var(--length-10);display:flex;flex-direction:column;gap:var(--length-4);position:sticky;top:0;height:100vh}
.app-brand{display:flex;align-items:center;gap:var(--length-10);padding:var(--length-6) var(--length-10) var(--length-16);font-size:var(--length-15)}
.app-brand svg{width:var(--length-22);height:var(--length-14)}
.app-sec{font-size:var(--length-10);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:var(--length-14) var(--length-10) var(--length-6)}
.nav-i{display:flex;align-items:center;gap:var(--length-10);height:var(--length-34);padding:0 var(--length-10);border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;font-size:var(--length-13)}
.nav-i:hover{background:var(--hover);color:var(--text)}
.nav-i svg{width:var(--length-16);height:var(--length-16);opacity:.8}
.nav-i.on{background:var(--y-soft);color:var(--text);box-shadow:inset var(--length-2) 0 0 var(--yellow)}
.nav-i .count{margin-left:auto;font-family:var(--mono);font-size:var(--length-11);color:var(--muted)}
.app-side .me{margin-top:auto;display:flex;align-items:center;gap:var(--length-10);padding:var(--length-10);border-top:var(--length-1) solid var(--line)}
.app-side .me img{width:var(--length-28);height:var(--length-28);border-radius:50%;object-fit:cover;background:var(--surface)}
.app-main{min-width:0}
.app-top{height:var(--length-60);display:flex;align-items:center;gap:var(--length-12);padding:0 var(--length-24);border-bottom:var(--length-1) solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(var(--length-14));-webkit-backdrop-filter:blur(var(--length-14));z-index:5}
.app-body{padding:var(--length-24);display:grid;gap:var(--length-16)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--length-16);flex-wrap:wrap}

/* controls */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--length-8);height:var(--length-34);padding:0 var(--length-14);border-radius:var(--r-sm);font:500 var(--length-13) var(--font);border:var(--length-1) solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap}
.p-btn:hover{background:var(--surface-2)}
.p-btn.primary{background:var(--yellow);color:var(--on-yellow);border-color:transparent}
.p-btn.primary:hover{filter:brightness(1.06);box-shadow:var(--y-glow)}
.p-btn.ghost{background:none;border-color:transparent;color:var(--text-2)}
.p-btn.danger{color:var(--err)}
.p-btn svg{width:var(--length-14);height:var(--length-14)}
.p-btn:focus-visible,.p-input:focus-visible,.nav-i:focus-visible{outline:var(--length-2) solid var(--yellow);outline-offset:var(--length-2)}
.p-input{height:var(--length-34);width:100%;border-radius:var(--r-sm);border:var(--length-1) solid var(--line);background:var(--input);color:var(--text);font:var(--length-13) var(--font);padding:0 var(--length-12)}
.p-input:focus{border-color:var(--yellow);outline:none;box-shadow:0 0 0 var(--length-3) var(--y-soft)}
.p-search{position:relative;flex:1;max-width:var(--length-420)}
.p-search .p-input{padding-left:var(--length-34)}
.p-search svg{position:absolute;left:var(--length-11);top:var(--length-10);width:var(--length-14);height:var(--length-14);color:var(--muted)}
.p-search kbd{position:absolute;right:var(--length-8);top:var(--length-7);font:var(--length-11) var(--mono);color:var(--muted);border:var(--length-1) solid var(--line);border-radius:var(--length-4);padding:var(--length-1) var(--length-5)}
.p-field{display:grid;gap:var(--length-6)}
.p-field label{font-size:var(--length-12);color:var(--text-2)}
.p-field small{font-size:var(--length-12);color:var(--muted)}
.p-seg{display:inline-flex;background:var(--input);border:var(--length-1) solid var(--line);border-radius:var(--r-sm);padding:var(--length-2)}
.p-seg button{height:var(--length-28);padding:0 var(--length-12);border:0;background:none;color:var(--muted);font:var(--length-13) var(--font);border-radius:var(--length-4);cursor:pointer}
.p-seg button.on{background:var(--surface-2);color:var(--text)}
.p-switch{display:inline-flex;align-items:center;gap:var(--length-10);cursor:pointer;font-size:var(--length-13)}
.p-switch input{display:none}
.p-switch i{width:var(--length-32);height:var(--length-18);border-radius:var(--length-99);background:var(--surface-2);border:var(--length-1) solid var(--line);position:relative;transition:background .2s}
.p-switch i::after{content:"";position:absolute;top:var(--length-2);left:var(--length-2);width:var(--length-12);height:var(--length-12);border-radius:50%;background:var(--text-2);transition:transform .2s}
.p-switch input:checked+i{background:var(--yellow);border-color:transparent}
.p-switch input:checked+i::after{transform:translateX(var(--length-14));background:var(--on-yellow)}

/* surfaces */
.panel{background:var(--surface);border:var(--length-1) solid var(--line);border-radius:var(--r)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:var(--length-12);padding:var(--length-14) var(--length-16);border-bottom:var(--length-1) solid var(--line)}
.panel-b{padding:var(--length-16)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--length-16)}
.kpi{padding:var(--length-16);display:grid;gap:var(--length-6)}
.kpi b{font-weight:500;font-size:var(--length-26);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .delta{font:var(--length-12) var(--mono)}
.kpi .delta.up{color:var(--ok)}.kpi .delta.down{color:var(--err)}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:var(--length-16)}

/* status */
.badge{display:inline-flex;align-items:center;gap:var(--length-6);height:var(--length-22);padding:0 var(--length-8);border-radius:var(--length-99);font-size:var(--length-11);font-weight:500;border:var(--length-1) solid var(--line);color:var(--text-2);white-space:nowrap}
.badge::before{content:"";width:var(--length-6);height:var(--length-6);border-radius:50%;background:currentColor}
.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.badge.err{color:var(--err);border-color:color-mix(in srgb,var(--err) 35%,transparent);background:color-mix(in srgb,var(--err) 10%,transparent)}
.badge.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent);background:color-mix(in srgb,var(--info) 10%,transparent)}

/* table */
.p-table{width:100%;border-collapse:collapse;font-size:var(--length-13)}
.p-table th{font-weight:500;font-size:var(--length-11);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 var(--length-16);height:var(--length-36);border-bottom:var(--length-1) solid var(--line);white-space:nowrap}
.p-table td{padding:0 var(--length-16);height:var(--row);border-bottom:var(--length-1) solid var(--line);white-space:nowrap}
.p-table tr:last-child td{border-bottom:0}
.p-table tbody tr:hover{background:var(--hover)}
.p-table tbody tr.sel{background:var(--y-soft)}
.p-table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:var(--length-12)}
.p-table input[type=checkbox]{accent-color:var(--yellow)}
.p-table .who{display:flex;align-items:center;gap:var(--length-10)}
.p-table .who i{width:var(--length-24);height:var(--length-24);border-radius:var(--length-6);background:var(--surface-2);display:grid;place-items:center;font-style:normal;font-size:var(--length-11);color:var(--text-2)}
.t-foot{display:flex;justify-content:space-between;align-items:center;padding:var(--length-10) var(--length-16);border-top:var(--length-1) solid var(--line);color:var(--muted);font-size:var(--length-12)}
.chart{width:100%;height:var(--length-200);display:block}
.bar-list{display:grid;gap:var(--length-12)}
.bar-list div{display:grid;grid-template-columns:var(--length-90) 1fr var(--length-40);gap:var(--length-10);align-items:center;font-size:var(--length-12);color:var(--text-2)}
.bar-list span{height:var(--length-6);border-radius:var(--length-99);background:var(--surface-2);overflow:hidden}
.bar-list span i{display:block;height:100%;background:var(--text-2);border-radius:inherit}
.bar-list div:first-child span i{background:var(--yellow)}
.bar-list em{font:var(--length-12) var(--mono);font-style:normal;text-align:right}
.toast{display:flex;align-items:center;gap:var(--length-10);padding:var(--length-10) var(--length-14);border-radius:var(--r);background:var(--surface-2);border:var(--length-1) solid var(--line);font-size:var(--length-13)}
.empty{display:grid;place-items:center;text-align:center;gap:var(--length-8);padding:var(--length-28) var(--length-16);color:var(--muted)}
.empty img{width:var(--length-96);height:var(--length-96);object-fit:contain}

/* mobile frames */
.phones{display:flex;gap:var(--length-32);justify-content:center;flex-wrap:wrap;padding:var(--length-24) 0 var(--length-60)}
.phone{width:var(--length-320);height:var(--length-680);border-radius:var(--length-46);padding:var(--length-10);background:var(--palette-0c0c0d);border:var(--length-1) solid var(--line);box-shadow:0 var(--length-40) var(--length-90) var(--paint-alpha-63db2c44),inset 0 0 0 var(--length-2) var(--palette-2a2b2f);flex:none}
.phone-scr{width:100%;height:100%;border-radius:var(--length-37);overflow:hidden;background:var(--bg);display:flex;flex-direction:column;position:relative}
.phone-status{height:var(--length-44);display:flex;align-items:center;justify-content:space-between;padding:0 var(--length-26);font:600 var(--length-13) var(--font);flex:none}
.phone-status::after{content:"";position:absolute;left:50%;top:var(--length-10);width:var(--length-96);height:var(--length-26);margin-left:var(--length-minus-48);border-radius:var(--length-99);background:var(--palette-000)}
.m-head{padding:var(--length-6) var(--length-18) var(--length-12);flex:none}
.m-head h1{font-size:var(--length-26);letter-spacing:-.02em}
.m-body{flex:1;overflow:hidden;padding:0 var(--length-18);display:grid;align-content:start;gap:var(--length-12)}
.m-tabs{height:var(--length-74);flex:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--length-1) solid var(--line);background:var(--sidebar);padding-bottom:var(--length-16)}
.m-tabs span{display:grid;place-items:center;align-content:center;gap:var(--length-3);font-size:var(--length-10);color:var(--muted)}
.m-tabs span svg{width:var(--length-20);height:var(--length-20)}
.m-tabs span.on{color:var(--yellow)}
.m-card{background:var(--surface);border:var(--length-1) solid var(--line);border-radius:var(--length-14);padding:var(--length-14);display:grid;gap:var(--length-8)}
.m-row{display:flex;align-items:center;gap:var(--length-12);padding:var(--length-12) 0;border-bottom:var(--length-1) solid var(--line);font-size:var(--length-14)}
.m-row:last-child{border-bottom:0}
.m-row .ic{width:var(--length-36);height:var(--length-36);border-radius:var(--length-10);background:var(--surface-2);display:grid;place-items:center;flex:none}
.m-row .ic svg{width:var(--length-16);height:var(--length-16)}
.m-row small{display:block;color:var(--muted);font-size:var(--length-12)}
.m-row .end{margin-left:auto;text-align:right;font:var(--length-12) var(--mono);color:var(--text-2)}
.m-hero{border-radius:var(--length-16);overflow:hidden;position:relative;aspect-ratio:16/10;background:var(--palette-000)}
.m-hero img{width:100%;height:100%;object-fit:cover;object-position:70% 25%}
.m-hero b{position:absolute;left:var(--length-14);bottom:var(--length-12);font-weight:500;font-size:var(--length-16);color:var(--palette-fff);text-shadow:0 var(--length-2) var(--length-10) var(--palette-000)}
.m-btn{height:var(--length-48);border-radius:var(--length-12);display:grid;place-items:center;font:500 var(--length-15) var(--font);background:var(--yellow);color:var(--on-yellow);border:0}
.m-btn.sec{background:var(--surface);color:var(--text);border:var(--length-1) solid var(--line)}
.m-chips{display:flex;gap:var(--length-8);overflow:hidden}
.m-chips span{height:var(--length-30);padding:0 var(--length-12);border-radius:var(--length-99);border:var(--length-1) solid var(--line);display:grid;place-items:center;font-size:var(--length-12);color:var(--text-2);white-space:nowrap}
.m-chips span.on{background:var(--yellow);color:var(--on-yellow);border-color:transparent}
.m-progress{height:var(--length-6);border-radius:var(--length-99);background:var(--surface-2);overflow:hidden}
.m-progress i{display:block;height:100%;background:var(--yellow);box-shadow:var(--y-glow)}
.m-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:var(--length-22) var(--length-22) 0 0;border-top:var(--length-1) solid var(--line);padding:var(--length-10) var(--length-18) var(--length-28);display:grid;gap:var(--length-12);box-shadow:0 var(--length-minus-20) var(--length-50) var(--paint-alpha-3d9c0a42)}
.m-sheet::before{content:"";width:var(--length-36);height:var(--length-4);border-radius:var(--length-99);background:var(--line);justify-self:center}
.m-scrim{position:absolute;inset:0;background:var(--paint-alpha-63db2c44)}

/* template hub chrome */
.tpl-bar{position:fixed;bottom:var(--length-16);left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:var(--length-14);padding:var(--length-8) var(--length-16) var(--length-8) var(--length-8);border-radius:var(--length-999);background:color-mix(in srgb,var(--surface) 82%,transparent);border:var(--length-1) solid var(--line);box-shadow:0 var(--length-16) var(--length-40) var(--paint-alpha-3d9c0a42);white-space:nowrap;max-width:calc(100vw - var(--length-32));overflow-x:auto;font-size:var(--length-12);color:var(--text-2);backdrop-filter:blur(var(--length-14));-webkit-backdrop-filter:blur(var(--length-14))}
.tpl-bar a{color:var(--text)}
.tpl-bar .y-chip{box-shadow:none}
.tpl-bar .sp{display:flex;gap:var(--length-14);align-items:center;padding-left:var(--length-12);border-left:var(--length-1) solid var(--line)}

@media (max-width:1100px){.kpis{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:800px){.app-shell{grid-template-columns:1fr}.app-side{display:none}.app-top{padding:0 var(--length-16)}.app-body{padding:var(--length-16)}.p-table .hide-s{display:none}.phone{transform:scale(.9);margin:var(--length-minus-34) var(--length-minus-16)}}



/* Responsive corrections and readable motion fallbacks for the adopted draft. */
.speed-site .rot span { background: var(--yellow-grad); background-clip:text; -webkit-background-clip:text; color:transparent; }
.speed-site .gl-on .rot span { background:var(--yellow-grad); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.speed-site .split > *, .speed-site .cards > *, .speed-site .b2-grid > *, .speed-site .app-body > * { min-width:0; }
.speed-site .code { max-width:100%; overflow-x:auto; }
.speed-site .marq, .speed-site .det-strip { overflow:hidden; }
.speed-site .b2-fav { flex-wrap:wrap; }
.speed-site .b2-row2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.speed-site .b2-wm { font-size:var(--length-18); }
.speed-site .b2-log { table-layout:fixed; width:100%; overflow-wrap:anywhere; }
.speed-site .app-body { min-width:0; }
.speed-site .panel, .speed-site .panel-b { min-width:0; }
.speed-site .panel-b { overflow-x:auto; }
.speed-site .app h1, .speed-site.app h1 { background:none; color:var(--text); -webkit-text-fill-color:currentColor; font-size:var(--length-22); }
@media (max-width:700px) {
  .speed-site .icon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .speed-site .icon-tile { padding:var(--space-3); }
  .speed-site .ico3d.big { width:100%; max-width:var(--length-150); }
  .speed-site .b2-t.lock { flex-wrap:wrap; }
  .speed-site .page-head { flex-wrap:wrap; gap:var(--space-3); }
  .speed-site .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .speed-site .app-search { min-width:0; flex:1; }
}

.speed-site a.btn:not(.ghost) { color:var(--palette-0b0b0c); text-shadow:none; }

@media (max-width:980px) {
 html:not(.js-enabled) .speed-site nav.top { position:relative; inset:auto; margin:var(--space-4); border-radius:var(--radius-md); flex-wrap:wrap; }
 html:not(.js-enabled) .speed-site nav.top ul { display:flex; position:static; flex-basis:100%; }
 html:not(.js-enabled) .speed-site nav.top .menu, html:not(.js-enabled) .speed-site nav.top .theme-tg { display:none; }
}