@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#080b14;--panel:#0d111d;--line:#252a3b;--muted:#929aac;--text:#e9edf4;--violet:#ac96ff;--red:#f24b62;--mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed','Arial Narrow',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px Inter,Arial,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--violet);outline-offset:4px}button:hover{color:white}header{height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;font-size:23px;font-weight:600;letter-spacing:3px}.brand img{width:56px;height:62px;object-fit:cover;object-position:top}.brand small{display:block;font:11px var(--mono);letter-spacing:1.6px;color:var(--muted);margin-top:7px}nav{display:flex;gap:26px;align-self:stretch}.nav{font-size:14px;position:relative;color:var(--muted);padding:0 2px}.nav.active{color:white}.nav.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--violet)}.edition{font:12px var(--mono);text-align:right;letter-spacing:1px}.edition span{display:block;font-size:11px;margin-top:8px;color:var(--muted)}.workspace{display:grid;grid-template-columns:230px minmax(300px,1fr) 310px;min-height:760px;height:calc(100svh - 144px)}.rail{border-right:1px solid var(--line);padding:28px 14px 16px;display:flex;flex-direction:column}.eyebrow{font:11px var(--mono);letter-spacing:1.8px;color:var(--muted);line-height:1.5}.rail>.eyebrow{padding:0 12px 24px;display:flex;justify-content:space-between}.rail>.eyebrow span{color:var(--violet)}#parts{display:flex;flex-direction:column;gap:5px}.part{display:flex;align-items:center;text-align:left;gap:13px;padding:12px 10px;font-size:13px;border:1px solid transparent;border-radius:3px;position:relative}.part .num{font:11px var(--mono);color:#727b90}.part .arrow{margin-left:auto;color:var(--violet);opacity:0}.part:hover,.part.active{background:#19182a;border-color:#3a3154}.part.active{color:#ccbaff}.part.active .arrow{opacity:1}.tip{display:none;position:absolute;left:calc(100% + 10px);top:0;width:230px;background:#211d33;border:1px solid #665080;padding:12px;font:13px/1.6 Inter,sans-serif;color:#efeafa;z-index:20;box-shadow:0 10px 30px #0008;pointer-events:none}.part:hover .tip,.part:focus-visible .tip{display:block}.rail-footer{margin-top:auto;padding:26px 12px 0;font:10px/1.8 var(--mono);color:#737d90;letter-spacing:1px}.cross{display:block;font-size:26px;color:var(--violet);margin-bottom:6px}.stage{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 58% 44%,#21182c70,transparent 64%),linear-gradient(#080b14,#0b0e18)}.stage:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:44px 44px;pointer-events:none}.stage-heading{position:absolute;left:32px;top:30px;pointer-events:none;z-index:2}.signal{display:inline-block;width:6px;height:6px;background:var(--red);margin-right:8px}h1{font:800 clamp(44px,5.1vw,82px)/.87 var(--display);letter-spacing:-1px;margin:20px 0 14px}h1 span{color:transparent;-webkit-text-stroke:1px #a2a5bb}.stage-heading p{font-size:13px;color:var(--muted);margin:0}.stage-meta{position:absolute;right:24px;top:32px;font:11px var(--mono);letter-spacing:1px;color:var(--violet);text-align:right;z-index:2}.stage-meta span{display:block;font-size:9px;color:var(--muted);margin-top:7px}#canvas-wrap{position:absolute;inset:45px 0 155px}canvas{display:block;width:100%;height:100%;touch-action:none}#fallback{position:absolute;width:100%;height:100%;object-fit:contain;opacity:.9}#hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;width:25px;height:25px;border-radius:50%;padding:0;background:#121220cc;border:1px solid #a597c6;color:#e5d8ff;font:10px var(--mono);pointer-events:auto;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #16132250}.hotspot:hover,.hotspot.active{background:#b59aff;color:#100c20;border-color:#b59aff;z-index:3}.hotspot span{display:none;position:absolute;bottom:33px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#141422;border:1px solid #64567e;padding:9px;font-size:12px;color:white}.hotspot:hover span,.hotspot:focus-visible span{display:block}.scene-help{position:absolute;bottom:153px;left:0;right:0;text-align:center;font:10px var(--mono);letter-spacing:1px;color:#6e788c;pointer-events:none}.scene-help i{font-style:normal;margin:0 10px}.scene-status{position:absolute;bottom:185px;left:25px;right:25px;text-align:center;font:12px var(--mono);color:#a9a4bd;pointer-events:none}.view-bar{position:absolute;bottom:100px;left:22px;right:22px;display:flex;justify-content:center;gap:4px}.view-bar button{font:12px var(--mono);padding:9px 12px;border:1px solid transparent;color:var(--muted)}.view-bar button.active{border-color:#4a405d;background:#211c30;color:#ddccff}.view-bar button:last-child{margin-left:auto}.explode-bar{position:absolute;bottom:20px;left:24px;right:24px;border:1px solid #373049;background:#151321e8;display:flex;align-items:center;gap:18px;padding:14px}.primary{background:#b39af3;color:#151021;padding:13px 16px;font-size:13px;font-weight:600;white-space:nowrap}.primary:hover{color:#100c16;background:#c5b1ff}.primary span{font-size:19px;vertical-align:middle;margin-right:6px}.range-wrap{flex:1;min-width:60px}.range-wrap label{display:flex;justify-content:space-between;font:9px var(--mono);color:#bab2ca;margin-bottom:9px;letter-spacing:1px}input[type=range]{width:100%;accent-color:var(--violet);cursor:pointer;height:5px;display:block}.small-button{font:11px var(--mono);white-space:nowrap;color:#aaa1b9}.inspector{border-left:1px solid var(--line);background:#0d111be8;display:flex;flex-direction:column;min-height:0}.inspector-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line);font:10px var(--mono);letter-spacing:1.4px;color:var(--muted)}.inspector-head button{font-size:22px}#panel{padding:26px 24px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#393047 transparent}.panel-kicker{font:11px var(--mono);color:var(--violet);letter-spacing:1px}.inspector h2{font:600 36px/.98 var(--display);letter-spacing:.2px;margin:12px 0 16px}.inspector p{font-size:14px;line-height:1.8;color:#a7afbd}.inspector .intro{font-size:15px;color:#c5cbd5}.status-tag{display:inline-block;font:10px var(--mono);border:1px solid #3a354b;padding:7px 9px;color:#bfb0df;letter-spacing:.5px;margin:6px 0 16px}.detail{border-top:1px solid var(--line);padding-top:19px;margin-top:20px}.detail h3{font:10px var(--mono);letter-spacing:1.5px;color:#c8c6d7;margin:0 0 8px}.detail p{margin:0}.note{border-left:2px solid #c49658;background:#c4965808;padding:12px 13px;margin-top:22px;font-size:12px;line-height:1.7;color:#cab99f}.overview-stat{display:flex;border-top:1px solid var(--line);padding:16px 0;align-items:center;gap:15px}.overview-stat strong{font:500 32px var(--display);color:#ddd3f6}.overview-stat span{font-size:12px;line-height:1.6;color:#a2a8b7}.panel-action{width:100%;border:1px solid #5b4b77;color:#d1bfff;padding:13px;font-size:13px;margin-top:15px}.panel-action:hover{background:#282036}.panel-nav{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font:10px var(--mono);color:var(--muted)}.panel-nav button{border:1px solid #333749;width:32px;height:32px;font-size:18px;color:#ccc3df}footer{min-height:50px;border-top:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;gap:20px;justify-content:space-between;font:10px var(--mono);color:#7d8598}footer b{color:#bcb4c8;font-weight:400;margin-right:10px}footer button{font:11px var(--mono);color:#bfb2d7}.footer-right{font-size:9px;letter-spacing:1px}.footer-right em{font-style:normal;color:var(--red);margin-left:10px}.step{width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;font-size:13px;line-height:1.5}.step span{color:var(--violet);font:12px var(--mono)}.step.active{color:var(--violet)}.mission-screen{background:#080b12;border:1px solid #2d3543;padding:15px;margin:16px 0}.mission-screen small{color:#a892dd;font:10px var(--mono)}.mission-screen p{font:12px/1.8 var(--mono);margin-bottom:0}.mission-screen code{color:#8dd2bc}.logo-panel{width:100%;max-height:190px;object-fit:contain;display:block;margin-bottom:22px}dialog{max-width:min(1100px,94vw);border:1px solid #4e416a;background:#0d111c;color:white;padding:16px}dialog::backdrop{background:#03050bdd;backdrop-filter:blur(8px)}dialog form{text-align:right;margin-bottom:10px}dialog img{width:100%;max-height:78vh;object-fit:contain}dialog p{font-size:13px;color:#aaa}dialog button{padding:10px}.step-progress{font:11px var(--mono);color:var(--muted);margin-top:20px}
@media(min-width:1600px){.workspace{grid-template-columns:250px minmax(300px,1fr) 360px}.part{font-size:14px;padding:15px 12px}#panel{padding:32px}.stage-heading{left:44px;top:40px}}
@media(max-width:1200px){.workspace{grid-template-columns:190px minmax(300px,1fr) 280px}.rail{padding-left:8px;padding-right:8px}.part{font-size:12px;gap:8px}.stage-heading{left:22px}.stage-meta{display:none}.explode-bar{gap:10px;left:12px;right:12px;padding:10px}.primary{padding:12px 10px;font-size:12px}.range-wrap label{font-size:8px}.small-button{font-size:10px}.edition{display:none}#panel{padding:22px}.view-bar{left:12px;right:12px}.view-bar button{font-size:11px;padding:8px}}
@media(max-width:960px){header{padding:0 20px;height:80px}.workspace{grid-template-columns:165px minmax(280px,1fr);height:auto;min-height:0}.stage{height:740px}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}#panel{max-height:none;display:block;padding:24px;columns:2;column-gap:32px}#panel>*{break-inside:avoid}.inspector-head{padding:16px 24px}.rail-footer{display:none}.stage-heading h1{font-size:68px}.footer-right{display:none}.tip{width:200px}.part{font-size:12px}nav{gap:20px}.brand{font-size:19px}.brand img{width:43px;height:50px}}
@media(max-width:620px){header{height:auto;min-height:115px;flex-wrap:wrap;gap:4px;padding:12px 18px 0}.brand{font-size:21px}.brand img{height:45px;width:40px}.brand small{font-size:9px}nav{height:43px;width:100%;justify-content:space-between;gap:14px}.nav{font-size:13px}.workspace{display:flex;flex-direction:column}.stage{order:0;height:660px;min-height:660px}.rail{order:1;border-right:0;border-top:1px solid var(--line);padding:18px 14px}.rail>.eyebrow{padding-bottom:12px}#parts{display:grid;grid-template-columns:1fr 1fr;gap:4px}.part{font-size:12px;padding:10px 8px}.tip{display:none!important}.inspector{order:2}.stage-heading{top:24px;left:22px}.stage-heading h1{font-size:58px;margin-top:14px}.stage-heading p{font-size:12px}.eyebrow{font-size:10px}#canvas-wrap{inset:95px -20px 163px}.explode-bar{flex-wrap:wrap;gap:12px;padding:12px;bottom:14px}.primary{padding:12px 14px}.range-wrap{min-width:110px}.small-button{padding:3px}.view-bar{bottom:105px}.view-bar button{font-size:10px;padding:8px}.scene-help{bottom:146px;font-size:8px}.scene-status{bottom:173px;font-size:10px}#panel{columns:auto;padding:24px}.inspector h2{font-size:40px}.inspector p{font-size:16px}footer{flex-wrap:wrap;font-size:9px;gap:12px;padding:16px}footer span{line-height:1.8}.logo-panel{max-height:180px}.hotspot{width:24px;height:24px}.scene-help i{margin:0 5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
#panel>*{animation:panel-enter .25s ease-out}@keyframes panel-enter{from{opacity:.4;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}button:disabled,input:disabled{opacity:.4;cursor:not-allowed}@media(prefers-reduced-motion:reduce){#panel>*{animation:none}}
/* Concept archive */
[hidden]{display:none!important}#demos{max-width:1640px;margin:auto;padding:38px 40px 52px}.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.demo-heading h2{font:700 clamp(34px,4vw,60px)/1 var(--display);margin:12px 0}.demo-heading p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}.demo-heading .status-tag{white-space:nowrap}.demo-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px}.demo-visual{min-width:0;scroll-margin-top:20px}.demo-slides{position:relative;border:1px solid var(--line);background:#05070d;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center}.demo-slides>button{padding:0;width:100%;height:100%;display:block}.demo-slides img{width:100%;height:100%;object-fit:contain;display:block}.demo-enlarge-hint{position:absolute;right:12px;bottom:12px;background:#080b14d9;border:1px solid #4a405d;padding:9px;font:10px var(--mono);pointer-events:none}.demo-controls{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.demo-controls>button,.lightbox-controls button{border:1px solid #4a405d;min-width:44px;min-height:44px;padding:10px}.demo-controls>span{margin-left:auto;font:12px var(--mono);color:var(--muted)}#demo-dots{display:flex;gap:8px}#demo-dots button{font:12px var(--mono);width:38px;height:38px;color:var(--muted)}#demo-dots button[aria-pressed=true]{background:#2d233e;color:#d2baff;border:1px solid #756090}.demo-caption h3{font:600 31px var(--display);margin:18px 0 6px}.demo-caption p{font-size:15px;line-height:1.7;color:var(--muted);margin:0}.demo-process{background:var(--panel);border:1px solid var(--line);padding:24px}.demo-process h3{font:600 32px/1.05 var(--display);margin:14px 0 24px}.demo-process dt{font:10px var(--mono);letter-spacing:1.5px;color:var(--violet);margin-top:20px}.demo-process dd{margin:8px 0 0;font-size:14px;line-height:1.75;color:#b4bac8}.demo-process code{display:block;color:#868b9e;font-size:11px;margin-top:6px}.demo-model-note{font-size:12px;line-height:1.7;color:var(--muted)}.demo-browse-heading{display:flex;align-items:center;justify-content:space-between;margin:32px 0 16px}.demo-browse-heading h3{font:600 28px var(--display);margin:0}.demo-switch{border:1px solid #43394f;padding:4px;display:flex;gap:4px}.demo-switch button{padding:9px 16px;font-size:13px;color:var(--muted)}.demo-switch button[aria-pressed=true]{background:#31263e;color:#e1cfff}.demo-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.demo-card{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--panel);border:1px solid var(--line);padding:0;overflow:hidden}.demo-card[aria-pressed=true]{border-color:var(--violet)}.demo-card img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#05070d}.demo-card-copy{display:flex;flex-direction:column;padding:18px;gap:8px}.demo-card-copy small{font:10px var(--mono);color:var(--violet);letter-spacing:.5px}.demo-card-copy strong{font:600 26px var(--display)}.demo-card-copy>span{font-size:13px;line-height:1.6;color:var(--muted)}.demo-card-arrow{position:absolute;right:12px;top:12px;padding:4px 8px;background:#080b14d9}.demo-list{display:flex;flex-direction:column;gap:12px}.demo-list .demo-card{flex-direction:row;align-items:center}.demo-list .demo-card img{width:180px;flex-shrink:0}.demo-list .demo-card-copy{padding:16px 22px}.demo-list .demo-card-arrow{top:50%;transform:translateY(-50%)}.demo-prompt{border:1px solid var(--line);padding:26px;margin-top:30px;background:#0b0e18}.demo-prompt-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.demo-prompt-heading h3{font:600 28px var(--display);margin:10px 0}.demo-prompt-heading button{width:auto;margin:0;white-space:nowrap}.demo-prompt>p{color:var(--muted);font-size:14px;line-height:1.7}.demo-prompt pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.85 var(--mono);padding:22px;background:#060912;border:1px solid #242334;color:#bbb9cf;max-height:440px;overflow-y:auto}.demo-prompt [role=status]{font:12px var(--mono);color:#bdacd6}#demo-lightbox{width:98vw;max-width:98vw;padding:14px;background:#05070d}#demo-lightbox img{display:block;width:100%;height:calc(100svh - 145px);max-height:calc(100svh - 145px);object-fit:contain}.lightbox-toolbar,.lightbox-controls{display:flex;align-items:center;justify-content:space-between;font:12px var(--mono);gap:12px}.lightbox-toolbar button{min-height:44px}.lightbox-controls{padding-top:8px}.lightbox-controls button{min-width:105px}nav{gap:22px}@media(max-width:1100px){.demo-layout{grid-template-columns:minmax(0,1fr) 290px;gap:20px}#demos{padding:28px 24px}.demo-process{padding:20px}.demo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:780px){.demo-layout{grid-template-columns:1fr}.demo-process dl{display:grid;grid-template-columns:110px 1fr;gap:16px}.demo-process dt,.demo-process dd{margin:0}.demo-heading{align-items:flex-start}.demo-heading .status-tag{display:none}.demo-prompt-heading{flex-wrap:wrap}.demo-slides{aspect-ratio:1.25}.demo-prompt{padding:18px}.demo-prompt pre{padding:14px}}@media(max-width:620px){nav{gap:8px}.nav{font-size:12px}#demos{padding:24px 16px}.demo-heading h2{font-size:40px}.demo-cards{gap:10px}.demo-card-copy{padding:12px}.demo-card-copy strong{font-size:23px}.demo-card-copy small{font-size:9px}.demo-card-copy>span{font-size:12px}.demo-process dl{display:block}.demo-process dt{margin-top:18px}.demo-process dd{margin-top:8px}.demo-list .demo-card img{width:110px}.demo-list .demo-card-copy{padding:12px 30px 12px 12px}.demo-controls{gap:6px}#demo-dots{gap:0}.demo-browse-heading h3{font-size:25px}.demo-switch button{padding:9px 12px}}