:root{--bg: #04060d;--void: #020308;--deep: #060a16;--ink: #dfe8ff;--ink-dim: #7e8db0;--line: #7da0e6;--cyan: #46e0ff;--amber: #ffb347;--red: #ff4d5e;--teal: #2fe6a8;--green: #8dffa8;--violet: #b48cff;--gold: #ffd166;--steel: #466ec8;--azure: #468ce6;--periwinkle: #8caaff;--hairline: color-mix(in srgb, var(--line) 16%, transparent);--panel: rgb(9 14 28 / 82%);--drawer-bg: color-mix(in srgb, var(--deep) 94%, transparent);--sheet-bg: color-mix(in srgb, var(--deep) 97%, transparent);--thumb: color-mix(in srgb, var(--periwinkle) 28%, transparent);--edge-tab-bg: #0b1226;--edge-tab-border: color-mix(in srgb, var(--cyan) 40%, transparent);--edge-tab-glow: 0 0 16px color-mix(in srgb, var(--cyan) 22%, transparent);--sans: inter, system-ui, -apple-system, "Segoe UI", roboto, sans-serif;--mono: ui-monospace, "SF Mono", "Cascadia Code", menlo, consolas, monospace;--explorer-w: min(790px, 54vw);--learn-w: 380px;--z-atmosphere: 3;--z-chrome: 10;--z-toast: 12;--z-caption: 14;--z-drawer: 15;--z-tab: 16;--z-mbar: 17;--z-backdrop: 18;--z-sheet: 19;--z-fader: 20;--z-slideover: 2}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100vh;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px}#stage{position:fixed;inset:0}canvas{display:block}#page-sub code,#caption code,.readout code,#learn code{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent);padding:1px 6px;border-radius:3px}#vignette{position:fixed;inset:0;pointer-events:none;z-index:var(--z-atmosphere);background:radial-gradient(ellipse at center,transparent 52%,color-mix(in srgb,var(--void) 85%,transparent) 100%)}#grain{position:fixed;inset:0;pointer-events:none;z-index:var(--z-atmosphere);opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}#fader{position:fixed;inset:0;background:#02030a;z-index:var(--z-fader);opacity:0;pointer-events:none;transition:opacity .45s ease}#fader.on{opacity:1;pointer-events:all}#header{position:fixed;top:28px;left:36px;z-index:var(--z-chrome);pointer-events:none;max-width:52vw}body.small #header{top:12px;left:16px;right:16px;max-width:none}#kicker{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim)}#kicker b{color:var(--cyan);font-weight:400}body.small #kicker{font-size:8px;letter-spacing:.22em}#page-title{font-family:var(--sans);font-weight:400;font-size:42px;line-height:1.05;letter-spacing:-.01em;margin-top:10px;text-shadow:0 0 26px color-mix(in srgb,var(--cyan) 18%,transparent)}body.small #page-title{font-size:23px;margin-top:6px}#page-sub{font-family:var(--sans);font-style:italic;font-size:16px;color:var(--ink-dim);margin-top:8px;max-width:46vw}body.small #page-sub{font-size:13.5px;max-width:none;margin-top:6px}#controls{position:fixed;left:36px;bottom:34px;z-index:var(--z-chrome);max-width:340px;background:var(--panel);border:1px solid var(--hairline);border-radius:4px;padding:14px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#controls.empty{display:none}#controls .c-title{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}body.small #controls{left:0;right:0;bottom:var(--mbar-h);max-width:none;max-height:44dvh;overflow-y:auto;border-radius:4px 4px 0 0;border-left:none;border-right:none}.btn{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--ink);background:color-mix(in srgb,var(--steel) 12%,transparent);border:1px solid color-mix(in srgb,var(--line) 35%,transparent);border-radius:3px;padding:6px 12px;margin:3px 6px 3px 0;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;-webkit-user-select:none;user-select:none}.btn:hover{background:color-mix(in srgb,var(--azure) 22%,transparent);border-color:var(--cyan);box-shadow:0 0 14px color-mix(in srgb,var(--cyan) 18%,transparent)}.btn.hot{border-color:var(--amber);color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent)}.btn.hot:hover{box-shadow:0 0 14px color-mix(in srgb,var(--amber) 25%,transparent)}.btn.mini{padding:2px 8px;font-size:10.5px;margin:2px 4px 2px 0}.btn.sel{color:var(--cyan);border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 25%,transparent)}body.small .btn{min-height:44px;display:inline-flex;align-items:center;padding:8px 16px;font-size:13px}body.small .btn.mini{padding:6px 12px;font-size:12px}body.small #c-body input[type=range]{height:44px}.ctl-row{margin:8px 0 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ctl-row label{color:var(--ink-dim);font-size:11.5px}.readout{font-size:11px;color:var(--ink-dim);margin-top:8px;border-top:1px dashed var(--hairline);padding-top:8px;line-height:1.7}.readout b{color:var(--ink);font-weight:400}.stub-note{font-size:10px;color:var(--ink-dim);margin-top:8px;border-top:1px dashed var(--hairline);padding-top:8px;font-style:italic}#nav{position:fixed;right:36px;bottom:34px;z-index:var(--z-chrome);display:flex;flex-direction:column;align-items:flex-end;gap:10px}body.small #nav{display:none}#nav-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:46vw}.chip{font-size:9.5px;letter-spacing:.08em;color:var(--ink-dim);cursor:pointer;border:1px solid var(--hairline);border-radius:3px;padding:3px 8px;background:var(--panel);transition:all .15s;-webkit-user-select:none;user-select:none}.chip:hover{color:var(--cyan);border-color:var(--cyan)}.chip.on{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px color-mix(in srgb,var(--cyan) 25%,transparent)}#nav-row{display:flex;align-items:center;gap:14px}#nav-dots{display:flex;gap:8px}#nav-dots .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink-dim);background:transparent;cursor:pointer;transition:all .2s}#nav-dots .dot.on{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px color-mix(in srgb,var(--cyan) 60%,transparent)}.arrow{font-family:var(--sans);font-size:21px;color:var(--ink-dim);cursor:pointer;border:1px solid var(--hairline);border-radius:3px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:all .15s;background:var(--panel);-webkit-user-select:none;user-select:none}.arrow:hover{color:var(--cyan);border-color:var(--cyan)}#nav-hint{font-size:9px;letter-spacing:.12em;color:var(--ink-dim);opacity:.7}#caption{position:fixed;left:50%;bottom:108px;transform:translate(-50%);z-index:var(--z-caption);background:var(--panel);border:1px solid var(--hairline);border-left:2px solid var(--amber);padding:8px 16px;border-radius:3px;font-size:12.5px;opacity:0;transition:opacity .3s;pointer-events:none;max-width:70vw;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}body.small #caption{bottom:calc(var(--mbar-h) + 12px);max-width:92vw}#toast{position:fixed;left:50%;top:158px;transform:translate(-50%);z-index:var(--z-toast);background:color-mix(in srgb,var(--teal) 10%,transparent);border:1px solid color-mix(in srgb,var(--teal) 50%,transparent);color:var(--teal);border-radius:3px;padding:7px 16px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}body.small #toast{top:auto;bottom:calc(var(--mbar-h) + 66px)}#teachingpanel{position:fixed;right:44px;top:118px;z-index:var(--z-chrome);width:min(645px,56vw);max-height:calc(100vh - 250px);overflow-y:auto;background:var(--panel);border:1px solid var(--hairline);border-radius:4px;padding:14px 18px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#teachingpanel::-webkit-scrollbar{width:8px}#teachingpanel::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:4px}#teachingpanel::-webkit-scrollbar-track{background:transparent}#teachingpanel .cp-file{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);margin:11px 0 6px}#teachingpanel .cp-file:first-child{margin-top:0}#teachingpanel .cp-file i{color:var(--ink-dim);font-style:normal;letter-spacing:.06em;text-transform:none}#teachingpanel pre{font-family:var(--mono);font-size:11px;line-height:1.48;color:var(--ink);white-space:pre;overflow-x:auto}#teachingpanel .cm{color:var(--ink-dim)}#teachingpanel .hl{color:var(--amber)}#teachingpanel .an{color:#5f86c8;font-style:italic}#teachingpanel .note{font-size:10.5px;color:var(--ink-dim);border-top:1px dashed var(--hairline);margin-top:10px;padding-top:8px;line-height:1.55}#teachingpanel .note b{color:var(--gold);font-weight:400}#teachingpanel .note code{font-family:var(--mono);font-size:10.5px;color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent);padding:0 4px;border-radius:3px}#teachingpanel a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--cyan) 45%,transparent)}#teachingpanel a:hover{border-bottom-style:solid}body.small #teachingpanel{inset:auto 0 var(--mbar-h) 0;width:auto;max-height:46dvh;border-radius:4px 4px 0 0;border-left:none;border-right:none}#explorer{position:fixed;left:0;top:186px;bottom:34px;z-index:var(--z-chrome);width:var(--explorer-w);display:none;background:var(--panel);border:1px solid var(--hairline);border-left:none;border-radius:0 4px 4px 0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#explorer.open{display:flex}body.small #explorer{inset:0 0 var(--mbar-h) 0;width:auto;border:none;border-radius:0;background:var(--sheet-bg)}#x-rail{width:192px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--hairline);min-height:0}body.small #x-rail{display:none}body.small #explorer.rail-open #x-rail{display:flex;position:absolute;top:0;left:0;bottom:0;width:min(78vw,340px);z-index:var(--z-slideover);background:var(--deep);border-right:1px solid var(--hairline);box-shadow:12px 0 40px #0000007f}#x-tree{flex:1;overflow-y:auto;padding:12px 10px}body.small #x-tree{padding:14px 12px}#x-apply{border-top:1px dashed var(--hairline);padding:9px 10px 10px;font-size:10px;line-height:1.5;color:var(--ink-dim);cursor:pointer;transition:color .15s;-webkit-user-select:none;user-select:none;overflow-wrap:break-word}#x-apply:before{content:"$ ";color:var(--teal)}#x-apply:hover{color:var(--cyan)}body.small #x-apply{padding:12px;font-size:11px}.x-folder{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:10px 0 4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.x-folder:first-child{margin-top:0}.x-folder.runtime{color:var(--violet)}.x-applied{font-size:8px;letter-spacing:.08em;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);border-radius:3px;padding:0 4px}.x-file{font-size:11.5px;color:var(--ink);padding:3px 6px 3px 12px;cursor:pointer;border-left:1px solid transparent;border-radius:0 3px 3px 0;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-file:hover{color:var(--cyan);background:color-mix(in srgb,var(--azure) 10%,transparent)}.x-file.sel{color:var(--cyan);border-left-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent)}body.small .x-file{min-height:44px;display:flex;align-items:center;font-size:13px;white-space:normal;overflow-wrap:anywhere}@keyframes x-arrive{0%{opacity:0;text-shadow:0 0 12px color-mix(in srgb,var(--cyan) 90%,transparent)}to{opacity:1;text-shadow:none}}.x-new{animation:x-arrive .9s ease}#x-view{flex:1;display:flex;flex-direction:column;min-width:0}#x-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--hairline)}body.small #x-head{flex-wrap:wrap;row-gap:6px;padding:10px 12px}#x-path{font-size:11px;letter-spacing:.06em;color:var(--cyan);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.small #x-path{flex:1 1 100%;order:-1}#x-badge{font-size:10px;font-style:italic;color:var(--ink-dim)}#x-diff.off,#x-files,#x-close{display:none}body.small :is(#x-files,#x-close){display:inline-flex}#x-body{flex:1;overflow:auto;padding:10px 0 12px}#x-body::-webkit-scrollbar{width:8px;height:8px}#x-body::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:4px}#x-body::-webkit-scrollbar-track{background:transparent}.x-ln{font-family:var(--mono);font-size:11px;line-height:1.48;color:var(--ink);white-space:pre;padding:0 14px 0 34px;position:relative}.x-ln.cm{color:var(--ink-dim)}.x-ln.hl{color:var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent)}.x-ln.add{background:color-mix(in srgb,var(--teal) 10%,transparent)}.x-ln.add:before{content:"+";position:absolute;left:14px;color:var(--teal)}.x-ln.rem{background:color-mix(in srgb,var(--red) 10%,transparent);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--red) 55%,transparent)}.x-ln.rem:before{content:"-";position:absolute;left:14px;color:var(--red)}.x-ln.hl span{color:inherit}.tk-key{color:var(--line)}.tk-string{color:var(--green)}.tk-number{color:var(--amber)}.tk-boolean{color:var(--violet)}.tk-substitution{color:var(--gold)}.tk-comment,.tk-punct{color:var(--ink-dim)}#x-tips{display:none;border-top:1px dashed var(--hairline);padding:10px 14px 12px}#x-tips .x-kick{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--violet);margin-bottom:8px}#x-tips pre{font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--ink);white-space:pre;overflow-x:auto;margin-bottom:6px}#config-tab{position:fixed;top:50%;left:0;z-index:var(--z-tab);transform:translateY(-50%);writing-mode:vertical-rl;rotate:180deg;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);background:var(--panel);border:1px solid var(--hairline);border-left:none;border-radius:4px 0 0 4px;padding:12px 5px;cursor:pointer;transition:left .2s ease,color .15s;-webkit-user-select:none;user-select:none}#config-tab:hover{color:var(--cyan)}#config-tab b{color:var(--cyan);font-weight:400}#config-tab.off{display:none}body.explorer-open #config-tab{left:var(--explorer-w)}body.small #config-tab{padding:14px 16px;font-size:10px;top:25%;transform:none;color:var(--ink);background:var(--edge-tab-bg);border-color:var(--edge-tab-border);box-shadow:var(--edge-tab-glow)}body.small.explorer-open #config-tab,body.explorer-open #teachingpanel,body.explorer-open #controls{display:none}#learn{position:fixed;top:0;right:0;bottom:0;width:var(--learn-w);z-index:var(--z-drawer);background:var(--drawer-bg);border-left:1px solid var(--hairline);padding:26px 24px;transform:translate(100%);transition:transform .3s ease;overflow-y:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#learn.open{transform:translate(0)}#learn h3{font-family:var(--sans);font-weight:400;font-size:19px;margin-bottom:4px}#learn .l-kick{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}#learn ul{list-style:none}#learn li{font-size:12.5px;line-height:1.65;color:var(--ink);margin-bottom:12px;padding-left:14px;position:relative}#learn li:before{content:"·";position:absolute;left:0;color:var(--ink-dim)}#learn a{color:var(--cyan)}body.small #learn{inset:auto 0 0;width:auto;max-height:72dvh;z-index:var(--z-backdrop);border-left:none;border-top:1px solid var(--hairline);border-radius:10px 10px 0 0;transform:translateY(100%);padding:20px 18px calc(20px + env(safe-area-inset-bottom))}body.small #learn.open{transform:translateY(0)}#learn-tab{position:fixed;top:50%;right:0;z-index:var(--z-tab);transform:translateY(-50%);writing-mode:vertical-rl;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);background:var(--panel);border:1px solid var(--hairline);border-right:none;border-radius:4px 0 0 4px;padding:12px 5px;cursor:pointer;transition:right .3s ease,color .15s;-webkit-user-select:none;user-select:none}#learn-tab:hover{color:var(--cyan)}body.learn-open #learn-tab{right:var(--learn-w)}body.small #learn-tab{z-index:var(--z-sheet);padding:14px 16px;font-size:10px;top:25%;transform:none;color:var(--ink);background:var(--edge-tab-bg);border-color:var(--edge-tab-border);box-shadow:var(--edge-tab-glow)}body.small.learn-open #learn-tab{right:0}body.small{--mbar-h: calc(54px + env(safe-area-inset-bottom)) }#mbar{display:none}body.small #mbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mbar);display:flex;align-items:stretch;height:var(--mbar-h);padding-bottom:env(safe-area-inset-bottom);background:var(--drawer-bg);border-top:1px solid var(--hairline);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mbtn{width:68px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:27px;color:var(--ink-dim);-webkit-user-select:none;user-select:none;cursor:pointer}.mbtn:active{color:var(--cyan)}#mbar-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-left:1px solid var(--hairline);border-right:1px solid var(--hairline);font-size:12px;letter-spacing:.08em;color:var(--ink-dim);cursor:pointer;-webkit-user-select:none;user-select:none}#mbar-mid:after{content:"▴";font-size:9px;color:var(--ink-dim)}#mbar-ind{color:var(--cyan);font-weight:400}#sheet-backdrop{display:none}body.small #sheet-backdrop.open{display:block;position:fixed;inset:0;z-index:var(--z-backdrop);background:color-mix(in srgb,var(--void) 60%,transparent)}#sheet{display:none}body.small #sheet.open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);background:var(--sheet-bg);border-top:1px solid var(--hairline);border-radius:10px 10px 0 0;padding:18px 18px calc(14px + env(safe-area-inset-bottom));max-height:70dvh;overflow-y:auto}.sheet-kick{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}.sheet-row{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 10px;border:1px solid transparent;border-radius:4px;font-size:13px;color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none}.sheet-row i{font-style:normal;font-size:11px;color:var(--ink-dim)}.sheet-row.on{color:var(--cyan);border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent)}