:root{color:#e8edf4;font-synthesis:none;--panel:#0f141b;--panel-2:#121923;--border:#27303c;--muted:#8490a1;--cyan:#42d7dc;--blue:#6b8cff;--green:#51cf8b;--orange:#f2a65a;--violet:#a986ff;background:#090c10;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#090c10;min-width:320px;min-height:100vh;margin:0}button,a{font:inherit}button{color:inherit}.app-shell{min-height:100vh}.topbar{z-index:10;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#090c10ed;border-bottom:1px solid #202731;justify-content:space-between;align-items:center;height:64px;padding:0 clamp(20px,4vw,64px);display:flex;position:sticky;top:0}.brand{color:#f5f7fa;align-items:center;gap:10px;font-weight:650;text-decoration:none;display:flex}.brand-mark{width:28px;height:28px;color:var(--cyan);border:1px solid #3b4654;border-radius:7px;place-items:center;font-family:DM Mono,monospace;display:grid}.topbar-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:12px}main{width:min(1440px,100%);margin:0 auto;padding:0 clamp(18px,4vw,64px) 64px}.intro{padding:58px 0 34px}.intro h1{letter-spacing:-.055em;margin:0;font-size:clamp(34px,5vw,64px);line-height:.98}.intro p{color:var(--muted);margin:15px 0 0;font-size:16px}.workspace{grid-template-columns:minmax(220px,280px) minmax(0,1fr);align-items:start;gap:22px;display:grid}.mechanism-nav{gap:7px;display:grid;position:sticky;top:86px}.mechanism-nav button{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;grid-template-columns:32px 1fr;gap:9px;width:100%;padding:12px;transition:border-color .15s,background .15s;display:grid}.mechanism-nav button:hover{background:#0e131a;border-color:#222b36}.mechanism-nav button.active{background:#131a23;border-color:#354150}.nav-index{color:#596574;padding-top:2px;font-family:DM Mono,monospace;font-size:11px}.nav-copy{gap:6px;min-width:0;display:grid}.nav-copy b{font-size:13px;font-weight:600;line-height:1.25}.nav-copy small{color:#687586;letter-spacing:.1em;font-family:DM Mono,monospace;font-size:9px}.mechanism-nav button.active .nav-index{color:var(--cyan)}.mechanism-nav button.active .nav-copy small{color:#9eabbc}.demo-card{border:1px solid var(--border);background:var(--panel);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px #0003}.demo-heading{border-bottom:1px solid var(--border);padding:clamp(22px,3vw,38px)}.demo-kind{color:var(--cyan);letter-spacing:.14em;font-family:DM Mono,monospace;font-size:10px}.demo-kind.experimental{color:var(--violet)}.demo-kind.control{color:var(--orange)}.demo-heading h2{letter-spacing:-.04em;margin:10px 0 9px;font-size:clamp(27px,3.5vw,44px);line-height:1.03}.demo-heading p{color:#9da8b8;max-width:720px;margin:0;line-height:1.55}.metric-strip{border-bottom:1px solid var(--border);grid-template-columns:repeat(3,1fr);display:grid}.metric{border-right:1px solid var(--border);gap:5px;min-width:0;padding:19px clamp(16px,2.5vw,28px);display:grid}.metric:last-child{border-right:0}.metric span,.metric small{color:var(--muted);font-size:11px}.metric strong{letter-spacing:-.035em;font-family:DM Mono,monospace;font-size:clamp(21px,2.8vw,32px);font-weight:500}.metric.optimized strong,.metric.win strong{color:var(--green)}.metric.control strong{color:var(--orange)}.inspect-grid{grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);display:grid}.source-panel,.execution-panel{min-width:0}.source-panel{border-right:1px solid var(--border)}.panel-title{border-bottom:1px solid var(--border);color:#a8b3c2;text-transform:uppercase;letter-spacing:.11em;align-items:center;height:48px;padding:0 20px;font-family:DM Mono,monospace;font-size:11px;display:flex}.code-map{background:#0b1016;min-height:270px;padding:15px 0}.code-row{border-left:3px solid #0000;grid-template-columns:42px minmax(0,1fr) minmax(120px,190px);align-items:center;min-height:43px;display:grid;position:relative}.code-row:before{content:"";pointer-events:none;opacity:.11;position:absolute;inset:0}.code-row.effect_trigger{border-left-color:var(--cyan)}.code-row.effect_trigger:before{background:var(--cyan)}.code-row.overlapped_tail{border-left-color:var(--blue)}.code-row.overlapped_tail:before{background:var(--blue)}.code-row.physical_owner{border-left-color:var(--green)}.code-row.physical_owner:before{background:var(--green)}.code-row.shared_skip{border-left-color:var(--violet)}.code-row.shared_skip:before{background:repeating-linear-gradient(135deg, var(--violet) 0 6px, transparent 6px 12px)}.code-row.fresh_fallback{border-left-color:var(--orange)}.code-row.fresh_fallback:before{background:var(--orange)}.line-number{z-index:1;text-align:right;color:#465160;-webkit-user-select:none;user-select:none;padding-right:12px;font:11px DM Mono,monospace}.code-row code{z-index:1;overflow-wrap:anywhere;color:#e4e9ef;white-space:pre-wrap;min-width:0;padding:8px 12px 8px 0;font:12px/1.6 DM Mono,monospace}.code-note{z-index:1;border-left:1px solid #ffffff1a;gap:3px;padding:7px 12px;display:grid}.code-note b{color:#dce4ed;font-size:10px}.code-note span{color:#8b97a8;font-size:10px;line-height:1.35}.execution-panel{background:var(--panel-2)}.timeline{align-content:center;gap:20px;min-height:195px;padding:22px 20px 6px;display:grid}.timeline-lane{gap:8px;display:grid}.lane-label{color:#96a2b2;font-size:11px}.lane-track{background:#0b1016;border:1px solid #2d3744;border-radius:7px;height:36px;position:relative;overflow:hidden}.lane-track:has(.segment.generation){height:62px}.lane-track:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 24.7%,#26313d 25%,#0000 25.3% 49.7%,#26313d 50%,#0000 50.3% 74.7%,#26313d 75%,#0000 75.3%);position:absolute;inset:0}.segment{color:#071015;white-space:nowrap;border-radius:4px;align-items:center;min-width:2px;height:24px;padding:0 7px;font:9px DM Mono,monospace;display:flex;position:absolute;top:5px;overflow:hidden}.segment.generation{background:var(--blue)}:is(.lane-track:has(.segment.generation) .segment.effect,.lane-track:has(.segment.generation) .segment.finalize){top:33px}.segment.effect{background:var(--cyan)}.segment.finalize{color:#fff;background:#687487}.segment.shared{background:var(--violet)}.segment.physical{background:var(--green)}.segment.fallback{background:var(--orange)}.state-flow{grid-template-columns:repeat(3,1fr);align-items:center;gap:10px;min-height:195px;padding:26px 20px 12px;display:grid}.state-node{background:#0c1219;border:1px solid #303a48;border-radius:10px;align-content:center;gap:6px;min-width:0;min-height:96px;padding:14px;display:grid;position:relative}.state-node span{color:#7e8a9a;font-size:10px}.state-node strong{overflow-wrap:anywhere;font:500 18px DM Mono,monospace}.state-node.optimized strong,.state-node.win strong{color:var(--green)}.state-node i{z-index:2;color:#647184;font-style:normal;position:absolute;right:-16px}.facts{border-top:1px solid var(--border);margin:12px 20px 22px}.facts div{border-bottom:1px solid #222b36;justify-content:space-between;gap:18px;padding:11px 0;display:flex}.facts dt,.facts dd{margin:0;font-size:11px}.facts dt{color:#758193}.facts dd{color:#cbd3dc;text-align:right;overflow-wrap:anywhere;font-family:DM Mono,monospace}.load-state{text-align:center;place-content:center;min-height:100vh;display:grid}.load-state p{color:var(--muted)}@media (max-width:980px){.workspace{grid-template-columns:1fr}.mechanism-nav{scrollbar-width:thin;padding-bottom:6px;display:flex;position:static;overflow-x:auto}.mechanism-nav button{min-width:220px}.inspect-grid{grid-template-columns:1fr}.source-panel{border-right:0;border-bottom:1px solid var(--border)}}@media (max-width:620px){.topbar{height:56px;padding:0 16px}.topbar-label{display:none}main{padding:0 12px 36px}.intro{padding:35px 4px 23px}.intro h1{font-size:38px}.metric-strip{grid-template-columns:1fr}.metric{border-right:0;border-bottom:1px solid var(--border);grid-template-columns:1fr auto;align-items:baseline}.metric:last-child{border-bottom:0}.metric small{grid-column:1/-1}.demo-heading{padding:22px 18px}.demo-heading h2{font-size:30px}.code-row{grid-template-columns:34px minmax(0,1fr);padding:4px 0}.code-note{border-top:1px solid #ffffff14;border-left:0;grid-column:2;margin-right:10px}.state-flow{grid-template-columns:1fr}.state-node i{bottom:-18px;right:50%;transform:rotate(90deg)}}