.chrome-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;font-family:var(--font-mono)}.chrome-axis-svg{position:absolute;inset:0;width:100%;height:100%}.chrome-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges;opacity:.7}.chrome-tick{stroke:var(--line-strong);stroke-width:1;shape-rendering:crispEdges}.chrome-label{fill:var(--text-dim);font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums}.chrome-label-y{text-anchor:start}.chrome-axis-title{fill:var(--text-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.chrome-cat-x,.chrome-cat-y{fill:var(--text);font-size:11px;letter-spacing:.02em}.chrome-legend{position:absolute;top:var(--s-3);right:var(--s-3);display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-2) var(--s-3);background:color-mix(in srgb,var(--bg-2) 86%,transparent);border:1px solid var(--line);border-radius:var(--r-chip);backdrop-filter:blur(2px)}.chrome-legend-row{display:flex;align-items:center;gap:var(--s-2)}.chrome-legend-label{font-family:var(--font-mono);font-size:11.5px;color:var(--text);letter-spacing:.02em}.chrome-swatch{flex:0 0 auto;display:inline-block}.chrome-swatch-fill{width:12px;height:12px;border-radius:2px}.chrome-swatch-candle{width:8px;height:14px;border-radius:1px}.chrome-swatch-line{width:14px;height:3px;border-radius:2px}.chrome-swatch-point{width:10px;height:10px;border-radius:50%}.chrome-colorbar{position:absolute;top:var(--s-3);right:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-2) var(--s-3);background:color-mix(in srgb,var(--bg-2) 86%,transparent);border:1px solid var(--line);border-radius:var(--r-chip);backdrop-filter:blur(2px)}.chrome-colorbar-title{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.chrome-colorbar-body{display:flex;align-items:stretch;gap:var(--s-2);height:140px}.chrome-colorbar-strip{width:14px;border-radius:3px;border:1px solid var(--line)}.chrome-colorbar-scale{display:flex;flex-direction:column;justify-content:space-between}.chrome-colorbar-tick{font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-dim);line-height:1}.chrome-fps{position:absolute;top:var(--s-3);left:var(--s-3);display:inline-flex;align-items:baseline;gap:4px;padding:5px 9px;background:color-mix(in srgb,var(--bg-2) 88%,transparent);border:1px solid var(--line);border-radius:var(--r-chip);font-variant-numeric:tabular-nums;pointer-events:none}.chrome-fps-value{font-size:14px;font-weight:600;color:var(--accent)}.chrome-fps-ms{font-size:12px;color:var(--text)}.chrome-fps-unit{font-size:10px;color:var(--text-faint);letter-spacing:.04em}.chrome-fps-sep{color:var(--text-faint)}:root{color-scheme:dark;--bg-0: #0b0d12;--bg-1: #0f1218;--bg-2: #11141b;--bg-3: #161a23;--line: #1d212b;--line-strong: #2a3040;--text-hi: #e6e8ec;--text: #b3b8c2;--text-dim: #8a8f99;--text-faint: #5b616e;--accent: #3ddc84;--accent-calm: #4caf50;--accent-ink: #06140c;--tier-native: #3ddc84;--tier-composed: #4ea3ff;--tier-walled: #f0a830;--state-error: #ef5350;--state-warn: #f0a830;--state-ok: #3ddc84;--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-6: 24px;--s-8: 32px;--s-12: 48px;--s-16: 64px;--r-chip: 6px;--r-card: 10px;--r-btn: 8px}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%;background:var(--bg-0);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}button{font-family:inherit}a{color:var(--accent-calm);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--accent-calm);outline-offset:2px;border-radius:4px}.showcase-root{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}.app-bar{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-6);height:48px;padding:0 var(--s-4);background:var(--bg-2);border-bottom:1px solid var(--line);box-shadow:0 1px #0006;user-select:none;z-index:10}.wordmark{display:flex;align-items:center;gap:var(--s-2);font-size:.9rem;font-weight:620;letter-spacing:.02em;color:var(--text-hi);background:none;border:none;cursor:pointer;padding:0}.wordmark .diamond{color:var(--accent);font-size:.7rem}.wordmark .sep,.wordmark .frontier{color:var(--accent-calm)}.app-nav{display:flex;align-items:center;gap:var(--s-1)}.app-nav button{background:none;border:none;color:var(--text-dim);font-size:.85rem;padding:var(--s-1) var(--s-3);border-radius:var(--r-chip);cursor:pointer;transition:color .14s ease,background .14s ease}.app-nav button:hover,.app-nav button.active{color:var(--text-hi);background:var(--bg-3)}.app-bar .spacer{flex:1 1 auto}.status-pill{display:inline-flex;align-items:center;gap:var(--s-2);font-size:.78rem;color:var(--text-dim);font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}.status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint)}.status-pill.ok .dot{background:var(--state-ok);box-shadow:0 0 #3ddc8499;animation:pulse 2s ease-out infinite}.status-pill.connecting .dot{background:var(--text-dim);animation:blink 1.2s ease-in-out infinite}.status-pill.error .dot{background:var(--state-error)}@keyframes pulse{0%{box-shadow:0 0 #3ddc8480}70%{box-shadow:0 0 0 6px #3ddc8400}to{box-shadow:0 0 #3ddc8400}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.transport{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--text)}.transport button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--bg-3);color:var(--text-hi);border:1px solid var(--line-strong);border-radius:var(--r-chip);cursor:pointer;font-size:.85rem;line-height:1;transition:background .14s ease,border-color .14s ease}.transport button:hover{background:#1d2230;border-color:var(--accent-calm)}.transport button.toggle-on{color:var(--accent);border-color:var(--accent-calm)}.transport .scrubber{position:relative;width:160px;height:5px;background:var(--line);border-radius:3px;overflow:hidden}.transport .scrubber.wide{width:240px}.transport .scrubber-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:3px;transition:width .12s linear}.transport .time{color:var(--text-dim);white-space:nowrap}.tier-badge{display:inline-flex;align-items:center;gap:var(--s-2);padding:2px 8px 2px 6px;border-radius:var(--r-chip);font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-left:2px solid var(--tier-color, var(--accent));background:var(--bg-3);color:var(--text-hi);white-space:nowrap}.tier-badge .tier-dot{width:7px;height:7px;border-radius:50%;background:var(--tier-color, var(--accent))}.tier-badge[data-tier=native]{--tier-color: var(--tier-native)}.tier-badge[data-tier=composed]{--tier-color: var(--tier-composed)}.tier-badge[data-tier=walled]{--tier-color: var(--tier-walled)}.ref-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:.74rem;color:var(--text-dim);background:var(--bg-3);padding:2px 8px;border-radius:var(--r-chip);white-space:nowrap}.page{flex:1 1 auto;min-height:0;overflow-y:auto}.page-inner{max-width:1280px;margin:0 auto;padding:var(--s-8) var(--s-6) var(--s-16)}.page-head{margin-bottom:var(--s-8)}.page-head h1{font-size:1.75rem;font-weight:620;letter-spacing:-.01em;line-height:1.2;color:var(--text-hi);margin:0 0 var(--s-2)}.page-head .lead{font-size:.95rem;color:var(--text-dim);margin:0;max-width:70ch}.page-head .lead .mono{color:var(--text)}.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-12);align-items:center;min-height:calc(100vh - 48px - var(--s-16))}.hero-copy h1{font-size:2.75rem;font-weight:650;line-height:1.1;letter-spacing:-.01em;color:var(--text-hi);margin:0 0 var(--s-4)}.hero-copy h1 .accent{color:var(--accent)}.hero-copy .sub{font-size:1rem;color:var(--text);line-height:1.6;max-width:54ch;margin:0 0 var(--s-6)}.spine{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim);margin-bottom:var(--s-8)}.spine .node{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-chip);padding:4px 9px;color:var(--text)}.spine .arrow{color:var(--accent-calm)}.cta-row{display:flex;gap:var(--s-3);flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:var(--s-2);border-radius:var(--r-btn);padding:10px 18px;font-size:.9rem;font-weight:550;cursor:pointer;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--text-hi);transition:background .14s ease,border-color .14s ease}.btn:hover{border-color:var(--accent-calm);text-decoration:none}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover{background:#4ee895}.hero-canvas{position:relative;aspect-ratio:16 / 11;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line-strong);background:var(--bg-1);box-shadow:0 8px 24px #00000059}.tier-section{margin-bottom:var(--s-12)}.tier-section-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}.tier-section-head .meaning{font-size:.85rem;color:var(--text-dim)}.tier-section-head .count{margin-left:auto;font-family:var(--font-mono);font-size:.8rem;color:var(--text-faint)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-4)}.view-card{display:flex;flex-direction:column;text-align:left;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;cursor:pointer;padding:0;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease,background .14s ease}.view-card:hover,.view-card:focus-visible{background:var(--bg-3);border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 8px 24px #00000059;outline:none}.view-card.current{border-color:var(--accent-calm)}.view-card .thumb{position:relative;aspect-ratio:16 / 10;background:radial-gradient(120% 120% at 50% 0%,#12151d,#0c0e14);border-bottom:1px solid var(--line);overflow:hidden}.view-card .thumb canvas,.view-card .thumb .thumb-still{width:100%;height:100%;display:block;object-fit:cover}.view-card .thumb .thumb-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.72rem;color:var(--text-faint)}.view-card .thumb .view-affordance{position:absolute;right:var(--s-2);bottom:var(--s-2);font-family:var(--font-mono);font-size:.72rem;color:var(--accent);background:#0b0d12b3;padding:2px 8px;border-radius:var(--r-chip);opacity:0;transition:opacity .14s ease}.view-card:hover .view-affordance,.view-card:focus-visible .view-affordance{opacity:1}.view-card .card-body{padding:var(--s-3) var(--s-4) var(--s-4)}.view-card .card-title{font-size:1rem;font-weight:600;color:var(--text-hi);margin:0 0 var(--s-1);line-height:1.3}.view-card .card-blurb{font-size:.82rem;color:var(--text-dim);line-height:1.45;margin:0 0 var(--s-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.view-card .card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}.single{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.single-canvas-region{position:relative;grid-column:1;grid-row:1;min-height:0;overflow:hidden;background:var(--bg-0)}.single-explainer{grid-column:2;grid-row:1 / span 2;border-left:1px solid var(--line);background:var(--bg-2);overflow-y:auto;display:flex;flex-direction:column}.single-transport{grid-column:1;grid-row:2;display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);background:var(--bg-1)}.single-transport .nav-siblings{margin-left:auto;display:flex;gap:var(--s-2)}.single-transport .nav-siblings button{background:var(--bg-3);border:1px solid var(--line-strong);color:var(--text);border-radius:var(--r-chip);padding:6px 12px;font-size:.8rem;cursor:pointer}.single-transport .nav-siblings button:hover:not(:disabled){color:var(--text-hi);border-color:var(--accent-calm)}.single-transport .nav-siblings button:disabled{opacity:.4;cursor:default}.explainer{padding:var(--s-6)}.explainer .ex-head h2{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--text-hi);margin:0 0 var(--s-3);line-height:1.25}.explainer .ex-head .ex-tags{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}.explainer .ex-section{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}.micro-label{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:0 0 var(--s-3)}.explainer .ex-body{font-size:.9rem;line-height:1.55;color:var(--text);margin:0}.fact-block{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-2) var(--s-4);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.8rem}.fact-block dt{color:var(--text-dim);letter-spacing:.04em}.fact-block dd{margin:0;color:var(--text-hi);word-break:break-word}.fact-block dt.fact-wall,.fact-block dd.fact-wall{color:var(--tier-walled)}.fact-block dt.fact-composed,.fact-block dd.fact-composed{color:var(--tier-composed)}.filmstrip{grid-column:1 / span 2;grid-row:3;display:flex;gap:var(--s-2);padding:var(--s-2) var(--s-4);border-top:1px solid var(--line);background:var(--bg-2);overflow-x:auto}.filmstrip button{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2);background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-chip);color:var(--text-dim);padding:5px 10px;font-size:.76rem;cursor:pointer;white-space:nowrap}.filmstrip button:hover{color:var(--text-hi);border-color:var(--line-strong)}.filmstrip button.current{color:var(--text-hi);border-color:var(--accent-calm);background:var(--bg-1)}.filmstrip .strip-dot{width:7px;height:7px;border-radius:50%}.frontier{max-width:1280px;margin:0 auto;padding:var(--s-12) var(--s-6) var(--s-16)}.frontier-head{text-align:center;margin-bottom:var(--s-12)}.frontier-head h1{font-size:1.75rem;font-weight:620;letter-spacing:-.01em;color:var(--text-hi);margin:0 0 var(--s-3)}.frontier-head .lead{font-size:1rem;color:var(--text-dim);max-width:64ch;margin:0 auto;line-height:1.55}.frontier-bands{display:grid;grid-template-columns:var(--native-fr) var(--composed-fr) var(--walled-fr);--native-fr: 1fr;--composed-fr: 1.4fr;--walled-fr: .7fr;gap:var(--s-3);align-items:stretch}.frontier-band{position:relative;border:1px solid var(--line);border-top:2px solid var(--band-color);border-radius:var(--r-card);background:linear-gradient(180deg,var(--band-tint) 0%,var(--bg-1) 60%);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}.frontier-band[data-tier=native]{--band-color: var(--tier-native);--band-tint: rgba(61, 220, 132, .05)}.frontier-band[data-tier=composed]{--band-color: var(--tier-composed);--band-tint: rgba(78, 163, 255, .05)}.frontier-band[data-tier=walled]{--band-color: var(--tier-walled);--band-tint: rgba(240, 168, 48, .06)}.frontier-band .band-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}.frontier-band .band-phrase{font-size:.8rem;color:var(--text-dim);font-style:italic;margin:0}.frontier-nodes{display:flex;flex-direction:column;gap:var(--s-2)}.frontier-node{display:flex;align-items:center;gap:var(--s-2);text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-chip);padding:8px 10px;cursor:pointer;color:var(--text);transition:border-color .14s ease,background .14s ease}.frontier-node:hover,.frontier-node:focus-visible{border-color:var(--node-color);background:var(--bg-3);outline:none}.frontier-node[data-tier=native]{--node-color: var(--tier-native)}.frontier-node[data-tier=composed]{--node-color: var(--tier-composed)}.frontier-node[data-tier=walled]{--node-color: var(--tier-walled)}.frontier-node .node-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--node-color)}.frontier-node .node-dot.precomputed{background:transparent;border:2px solid var(--node-color);box-sizing:border-box}.frontier-node .node-title{font-size:.82rem;color:var(--text-hi);font-weight:550}.frontier-node .node-reason{font-size:.74rem;color:var(--text-dim);line-height:1.35;margin-top:2px}.frontier-node[data-tier=walled] .node-reason{color:var(--tier-walled)}.frontier-node .node-text{min-width:0}.wall-callout{margin-top:var(--s-3);border:1px solid var(--tier-walled);border-radius:var(--r-card);background:#f0a8300f;padding:var(--s-4)}.wall-callout .micro-label{color:var(--tier-walled)}.wall-callout p{font-size:.85rem;line-height:1.55;color:var(--text);margin:0}.wall-callout strong{color:var(--tier-walled)}.frontier-legend{display:flex;align-items:center;justify-content:center;gap:var(--s-6);margin-top:var(--s-8);font-size:.78rem;color:var(--text-dim);flex-wrap:wrap}.frontier-legend .legend-arrow{font-family:var(--font-mono);letter-spacing:.04em}.frontier-close{margin-top:var(--s-16);text-align:center}.frontier-close p{font-size:.95rem;color:var(--text-dim);max-width:60ch;margin:0 auto var(--s-6);line-height:1.6}.frontier-close .links{display:inline-flex;gap:var(--s-3)}.state-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);padding:var(--s-12) var(--s-6);text-align:center;color:var(--text-dim)}.state-panel .state-title{font-size:1.1rem;color:var(--text-hi);font-weight:600}.state-panel .state-detail{font-family:var(--font-mono);font-size:.78rem;color:var(--text-faint);max-width:60ch}.state-panel .btn{margin-top:var(--s-2)}.canvas-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);background:var(--bg-0);color:var(--text-dim);z-index:2}.skeleton-shimmer{width:min(70%,480px);height:8px;border-radius:4px;background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-3) 50%,var(--bg-2) 100%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.canvas-overlay .label{font-family:var(--font-mono);font-size:.82rem;color:var(--text-dim)}.unsupported{max-width:720px;margin:0 auto;padding:var(--s-16) var(--s-6);text-align:center}.unsupported h1{font-size:1.5rem;color:var(--text-hi);margin:0 0 var(--s-3)}.unsupported p{color:var(--text-dim);line-height:1.6;margin:0 auto var(--s-6);max-width:56ch}.unsupported .contact-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s-3);margin-top:var(--s-8)}.unsupported .contact-sheet .still{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-1);padding:var(--s-3);text-align:left}.unsupported .contact-sheet .still .still-title{font-size:.82rem;color:var(--text-hi);font-weight:600;margin-bottom:var(--s-1)}.engine-canvas{display:block;width:100%;height:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 960px){.hero{grid-template-columns:1fr;gap:var(--s-8);min-height:0}.single{grid-template-columns:1fr;grid-template-rows:minmax(280px,45vh) auto auto auto;overflow-y:auto}.single-canvas-region{grid-column:1;grid-row:1}.single-transport{grid-column:1;grid-row:2}.single-explainer{grid-column:1;grid-row:3;border-left:none;border-top:1px solid var(--line)}.filmstrip{grid-column:1;grid-row:4}.frontier-bands{grid-template-columns:1fr}}
