:root{--ink:#d9eef3;--muted:#89a7b3;--space:#06101c;--surface:#0b1b2b;--line:#244358;--teal:#63e6e2;--hot:#ffb4df}*{box-sizing:border-box}html{background:var(--space)}body{margin:0;background:var(--space);color:var(--ink);font:15px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.app-shell{min-height:100vh;background:radial-gradient(circle at 84% 14%,#143b62 0,transparent 30rem),radial-gradient(circle at 7% 82%,#102f42 0,transparent 32rem),var(--space)}button,input,textarea{font:inherit}.topbar{min-height:96px;padding:18px clamp(18px,4vw,56px);display:flex;align-items:center;border-bottom:1px solid var(--line);gap:24px}.wordmark{color:#f5f4f0;text-decoration:none;font-size:1rem;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}.title-lockup{flex:1;text-align:center}.eyebrow{margin:0;color:var(--teal);font-size:10px;letter-spacing:.16em}.title-lockup h1,.panel-heading h2,.modal-head h2,.about-copy h3{font-family:Georgia,serif;font-weight:500}.title-lockup h1{font-size:clamp(24px,3.5vw,38px);margin:2px}.top-actions{display:flex;gap:8px;align-items:center}.icon-button,.control-button,.text-button,footer button,.quick-row button,.editor-foot button{border:1px solid var(--line);background:#0c1b2b;color:var(--ink);min-height:38px;padding:7px 11px;cursor:pointer}.icon-button{border-radius:50%;width:40px;padding:0}.text-button{background:none;color:var(--teal)}.workspace{display:grid;grid-template-columns:minmax(390px,.9fr) minmax(500px,1.25fr);max-width:1580px;margin:auto;min-height:calc(100vh - 154px)}.editor-panel,.canvas-panel{padding:clamp(20px,3vw,42px);min-width:0}.editor-panel{border-right:1px solid var(--line)}.panel-heading{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:16px}.panel-heading h2{font-size:18px;margin:3px 0 0}.example-wrap{position:relative}.example-menu{position:absolute;top:42px;right:0;width:235px;background:#0c1b2b;border:1px solid var(--line);padding:8px;z-index:5;box-shadow:0 18px 50px #000b}.example-menu button{display:block;width:100%;text-align:left;color:var(--ink);background:none;border:0;padding:11px;cursor:pointer}.example-menu span{color:var(--teal);margin-right:12px}.editor-wrap{height:min(58vh,650px);display:grid;grid-template-columns:48px 1fr;border:1px solid var(--line);background:#040c16;box-shadow:inset 0 0 32px #0006}.editor-wrap:focus-within{outline:2px solid var(--teal);outline-offset:2px}.editor-wrap pre{margin:0;padding:18px 11px;color:#53768b;text-align:right;white-space:pre;user-select:none;overflow:hidden;line-height:1.6}#code{border:0;border-left:1px solid #19364b;resize:none;padding:18px;background:transparent;color:#e7fbfb;outline:0;line-height:1.6;tab-size:2;white-space:pre;overflow:auto}.editor-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:11px}.editor-foot button{background:none;border:0;color:var(--teal);padding:2px}.quick-reference{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}.quick-reference-head{display:flex;justify-content:space-between;margin-bottom:9px}.quick-reference-head span{color:var(--teal);font-size:9px;letter-spacing:.12em}.quick-reference-head small{color:var(--muted);font-size:9px}.quick-row{display:flex;align-items:stretch;gap:7px;flex-wrap:wrap}.quick-row button{min-height:31px;min-width:36px;padding:4px 8px;font-size:10px;background:#10283c}.quick-row button.active{border-color:var(--teal);color:var(--teal);background:#123148}.quick-hint{margin-top:9px;padding:11px 12px;border-left:2px solid var(--teal);background:#0b2031}.quick-hint div{display:flex;gap:10px}.quick-hint span{color:var(--teal);font-size:9px;letter-spacing:.1em}.quick-hint code{color:#e7fbfb;font-size:11px}.quick-hint p{margin:7px 0 0;color:var(--muted);font-size:10px}.canvas-panel{display:flex;flex-direction:column}.state{font-size:9px;letter-spacing:.12em;padding:5px 8px;border:1px solid var(--line);color:var(--muted)}.state.running,.state.complete{color:var(--teal);border-color:#2b7776}.state.error{color:var(--hot)}.canvas-frame{position:relative;width:min(100%,700px);aspect-ratio:1;align-self:center;border:1px solid var(--line);background:#020811;overflow:hidden;box-shadow:0 24px 80px #0006}.grid-overlay{position:absolute;inset:0;opacity:.28;pointer-events:none;background-image:radial-gradient(#d9eef3 1px,transparent 1px);background-size:67px 67px}canvas{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:1}.hud{position:absolute;z-index:2;inset:13px 14px auto;display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.12em}.hud span:first-child{color:var(--teal)}.canvas-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}.run-button{background:var(--teal);border:1px solid var(--teal);color:#06131e;min-height:42px;padding:8px 19px;font-weight:700;cursor:pointer}.control-button:disabled{opacity:.42;cursor:not-allowed}.canvas-controls label{margin-left:auto;color:var(--muted);font-size:11px;display:flex;align-items:center;gap:7px}.canvas-controls input{accent-color:var(--teal);width:86px}.status-message{color:var(--muted);font-size:12px;min-height:20px}footer{padding:15px clamp(18px,4vw,56px);border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:11px}footer span{margin-right:auto}footer button{font-size:10px;min-height:31px;padding:4px 8px;background:transparent}button:hover{border-color:var(--teal);color:var(--teal)}.run-button:hover{background:#a4fcf8;color:#06131e}.modal-backdrop{position:fixed;z-index:20;inset:0;background:#000c;display:grid;place-items:center;padding:22px}.modal-backdrop[hidden]{display:none}.modal{max-height:min(88vh,880px);overflow:auto;background:#091928;border:1px solid var(--teal);box-shadow:0 25px 100px #000;padding:clamp(22px,4vw,42px)}.command-modal{width:min(1040px,100%)}.about-modal{width:min(760px,100%)}.modal-head{display:flex;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}.modal-head h2{font-size:29px;margin:6px 0}.modal-head p:last-child{color:var(--muted);margin:4px 0}.modal-head code{color:var(--teal)}.close{background:none;border:0;color:var(--ink);font-size:30px;height:42px;cursor:pointer}.command-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.command-grid article{background:#0b1b2b;padding:15px;min-height:185px;display:flex;flex-direction:column}.command-grid article>span{color:var(--muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.command-grid code{display:block;color:var(--teal);font-size:12px}.command-grid p{font-size:11px;line-height:1.55;color:#a9c0c9;margin:8px 0}.guide-example{margin-top:auto;padding-top:12px;border-top:1px solid #1c394d}.guide-example small{display:block;color:var(--muted);font-size:8px;letter-spacing:.12em}.guide-example code{font-size:10px;color:#e7fbfb;white-space:normal}.extension-note{color:var(--muted);font-size:11px;margin:20px 0 0}.extension-note code,kbd{color:var(--teal)}.about-copy{display:grid;gap:19px}.about-copy p{color:#b7ccd3;line-height:1.75;margin:0}.about-copy .about-lede{font:italic 20px/1.55 Georgia,serif;color:var(--ink)}.about-copy section{padding-left:18px;border-left:1px solid var(--line)}.about-copy h3{font-size:18px;margin:0 0 7px}.about-copy strong{color:#e8f6f7}.about-copy blockquote{margin:1px 0;padding:17px 20px;background:#0e2638;border-left:3px solid var(--teal);color:#d5e8eb;font:italic 16px/1.65 Georgia,serif}.about-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.about-links span{font-size:8px;letter-spacing:.13em;color:var(--muted);margin-right:auto}.about-links a{color:var(--teal);font-size:10px;text-decoration:none;border-bottom:1px solid #34706f}.credit-note{font-size:9px!important;color:#72919d!important;padding-top:15px;border-top:1px solid var(--line)}.phosphor{--teal:#9cff57}.phosphor.app-shell{filter:hue-rotate(34deg)}code,kbd{color:var(--teal)}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.editor-panel{border-right:0;border-bottom:1px solid var(--line)}.editor-wrap{height:480px}.canvas-frame{width:min(100%,660px)}}
@media(max-width:650px){.topbar{min-height:78px;padding:13px 16px}.title-lockup{display:none}.top-actions{gap:3px}.top-actions .text-button{font-size:9px;padding:4px}.editor-panel,.canvas-panel{padding:22px 16px}.editor-wrap{height:390px;grid-template-columns:38px 1fr}.editor-wrap pre,#code{padding:13px 9px}.command-grid{grid-template-columns:1fr}.command-grid article{min-height:0}.canvas-controls label{width:100%;margin:4px 0 0}.modal-backdrop{padding:8px}.modal{padding:20px 15px;max-height:94vh}.wordmark{font-size:.82rem}.editor-foot{align-items:start}.editor-foot p{max-width:52%}.about-links{align-items:flex-start;flex-direction:column}.about-links span{margin:0}}
@media(max-width:430px){#aboutButton{display:none}}
@media(forced-colors:active){*{forced-color-adjust:auto}.grid-overlay{display:none}}