:root{--ink:#f2f0e9;--muted:#8a8d91;--line:#24282e;--panel:#0d1015;--acid:#c7ff41;--orange:#ff6b35;--mono:"DM Mono",monospace;--sans:"Manrope",sans-serif}*{box-sizing:border-box}html{background:#07090d;color:var(--ink);font-family:var(--sans);scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 5%,rgba(199,255,65,.045),transparent 26%),#07090d}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);font-family:var(--mono);font-size:13px;letter-spacing:-.02em}.brand{display:flex;gap:11px;align-items:center;color:var(--ink);text-decoration:none}.brand-mark{width:12px;height:12px;border:2px solid var(--acid);border-radius:50%;box-shadow:0 0 16px rgba(199,255,65,.6)}.brand-dim{color:var(--muted)}.status{display:flex;align-items:center;gap:9px;color:var(--muted)}.status-dot,.live-dot{width:6px;height:6px;border-radius:50%;background:#c49a38;display:inline-block}.status.ready{color:#bcc7ac}.status.ready .status-dot,.live-dot{background:var(--acid);box-shadow:0 0 9px rgba(199,255,65,.75)}.status.error .status-dot{background:var(--orange)}.shell{width:min(1480px,calc(100% - 40px));margin:auto}.intro{padding:clamp(72px,10vw,144px) 0 48px;position:relative}.eyebrow{font:500 11px var(--mono);color:var(--acid);letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px}.intro h1{font-size:clamp(54px,8vw,116px);line-height:.9;letter-spacing:-.075em;margin:0;font-weight:500;max-width:1000px}.intro h1 span{color:#646970}.lede{font-size:clamp(15px,1.4vw,19px);line-height:1.7;color:#9b9ea2;max-width:600px;margin:36px 0 56px}.stage-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stage-tab{border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);padding:24px 22px;display:flex;text-align:left;gap:20px;cursor:pointer;font-family:var(--sans);transition:.2s}.stage-tab:last-child{border-right:0}.stage-tab b{font:400 11px var(--mono);color:#555b62;margin-top:3px}.stage-tab span{font-size:14px;font-weight:600}.stage-tab small{display:block;font:400 11px var(--mono);color:#62666c;margin-top:7px}.stage-tab:hover{background:#0b0e12;color:var(--ink)}.stage-tab.active{background:#10140f;color:var(--acid);box-shadow:inset 0 2px var(--acid)}.stage-tab.active b{color:var(--acid)}.workspace{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr);border:1px solid var(--line);min-height:650px;background:var(--panel)}.viewport-panel,.code-panel{min-width:0;display:flex;flex-direction:column}.viewport-panel{border-right:1px solid var(--line)}.panel-bar{height:49px;border-bottom:1px solid var(--line);padding:0 17px;display:flex;align-items:center;justify-content:space-between;font:400 10px var(--mono);letter-spacing:.1em;color:#8c9197}.panel-bar>div{display:flex;align-items:center;gap:9px}.metrics{gap:20px!important;color:#646a71}.canvas-wrap{position:relative;flex:1;min-height:520px;overflow:hidden;background:#05070a}.canvas-wrap canvas{position:absolute;width:100%;height:100%;display:block}.canvas-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle,#000,transparent 85%)}.hint{position:absolute;left:50%;bottom:22px;translate:-50% 0;padding:8px 12px;border:1px solid #292f36;background:rgba(7,9,13,.76);backdrop-filter:blur(8px);font:400 10px var(--mono);color:#747a81;pointer-events:none;transition:opacity .5s;white-space:nowrap}.fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:30px;background:#080a0e}.fallback[hidden]{display:none}.fallback-icon{font-size:46px;color:var(--orange)}.fallback h2{font-size:22px;margin:15px 0 8px}.fallback p{color:var(--muted);max-width:420px;line-height:1.6}.controls{min-height:65px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 15px}.icon-btn,.text-btn,.copy-btn,.apply-btn{font-family:var(--mono);cursor:pointer}.icon-btn{width:36px;height:36px;border:1px solid #343940;background:#171b20;color:var(--acid)}.text-btn,.copy-btn{border:0;background:transparent;color:#858b91;font-size:11px;padding:9px}.range-control{margin-left:auto;display:grid;grid-template-columns:auto 70px 28px;align-items:center;gap:8px;font:400 9px var(--mono);color:#676d74;text-transform:uppercase}.range-control+.range-control{margin-left:8px}.range-control input{width:70px;accent-color:var(--acid)}.range-control output{color:#a8adb2;text-transform:none}.file-tab{height:100%;border-bottom:1px solid var(--acid);margin-bottom:-1px;padding:0 7px}.wgsl-glyph{color:#07090d;background:var(--acid);font-weight:500;width:17px;height:17px;display:grid;place-items:center}.dirty-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);opacity:0}.dirty-dot.visible{opacity:1}.copy-btn{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.editor-wrap{display:grid;grid-template-columns:45px 1fr;flex:1;min-height:0;background:#0a0d11}.line-numbers{padding:19px 10px 20px 0;text-align:right;white-space:pre;font:300 12px/1.7 var(--mono);color:#393e45;overflow:hidden;user-select:none}.editor-wrap textarea{resize:none;border:0;outline:0;padding:19px 18px 20px 8px;background:transparent;color:#d8ddd5;font:300 12px/1.7 var(--mono);tab-size:2;white-space:pre;overflow:auto}.editor-wrap textarea::selection{background:#2e3c1f}.code-footer{min-height:65px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:12px}.compile-message{font:400 9px var(--mono);color:#6e747b;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compile-message.error{color:#ff8458}.compile-message.success{color:var(--acid)}.apply-btn{border:0;background:var(--acid);color:#090c0d;padding:12px 14px;font-size:10px;font-weight:500;white-space:nowrap}.apply-btn:hover{filter:brightness(1.1)}kbd{font:400 8px var(--mono);opacity:.6;margin-left:10px}.notes{margin:72px 0 110px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:34px}.notes h2{font-size:clamp(26px,3vw,43px);letter-spacing:-.045em;line-height:1.05;margin:0;max-width:520px}.notes>p{color:#94989e;line-height:1.8;margin:30px 0 0;max-width:560px}.pipeline{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px;border:1px solid var(--line);padding:18px;font:400 10px var(--mono);color:#6f757c}.pipeline span{color:#aeb3b8}.pipeline i{color:var(--acid);font-style:normal}@media(max-width:940px){.workspace{grid-template-columns:1fr}.viewport-panel{border-right:0;border-bottom:1px solid var(--line)}.canvas-wrap{min-height:480px}.code-panel{min-height:610px}.intro h1{letter-spacing:-.06em}}@media(max-width:640px){.shell{width:min(100% - 24px,1480px)}.topbar{height:58px;padding:0 14px}.brand-dim{display:none}.intro{padding-top:64px}.lede{margin-bottom:38px}.stage-tabs{grid-template-columns:1fr}.stage-tab{border-right:0;border-bottom:1px solid var(--line);padding:17px}.stage-tab:last-child{border-bottom:0}.workspace{border-left:0;border-right:0}.canvas-wrap{min-height:390px}.metrics span:first-child{display:none}.controls{flex-wrap:wrap}.range-control{grid-template-columns:auto 72px 26px}.range-control:first-of-type{margin-left:auto}.range-control:last-of-type{margin-left:46px}.notes{grid-template-columns:1fr;margin-top:50px}.notes>p{margin-top:0}.pipeline{display:grid;grid-template-columns:1fr auto;justify-content:start}.pipeline i{display:none}}