:root{color-scheme:dark;--bg:#0b1017;--panel:#141a22;--border:#29303a;--text:#e8edf5;--muted:#8d9bb0;--green:#33d46c;--mono:"JetBrains Mono",monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;font-size:14px}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:4px}button{border:0;background:none;color:var(--muted);border-radius:8px}button:hover{color:var(--text);background:#ffffff08}.toolbar{height:61px;display:flex;align-items:center;gap:24px;padding:0 20px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);white-space:nowrap;font-family:Space Grotesk,sans-serif;font-weight:700;font-size:19px}.brand-icon{display:grid;place-items:center;width:32px;height:32px;background:var(--green);border-radius:11px;font-size:20px}.brand b{color:var(--green);font-weight:700;margin-left:3px}.examples{display:flex;align-items:center;gap:7px;white-space:nowrap}.examples-label{margin-right:3px;color:var(--muted)}.examples button{padding:8px 10px;font-size:13px}.toolbar-actions{display:flex;align-items:center;gap:27px;margin-left:auto}.help-button{padding:8px;font-size:13px}.run-button{padding:10px 16px;display:flex;gap:5px;align-items:center;background:var(--green);color:#061a0d;font-weight:700;white-space:nowrap;box-shadow:0 0 24px #33d46c22}.run-button:hover{background:#48e47e;color:#061a0d}.run-button.running{background:#f3b348}.workspace{height:calc(100dvh - 61px);min-height:370px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel{min-width:0;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--panel)}.drawing-panel{position:relative;background-image:radial-gradient(circle,#34404c 1px,transparent 1px);background-size:24px 24px;background-position:0 0}.drawing-panel canvas{display:block;width:100%;height:100%}.position{position:absolute;top:12px;left:12px;font:11px var(--mono);letter-spacing:1px;padding:5px 8px;background:#0b1017cf;color:#8e99a7;border-radius:8px;pointer-events:none}.canvas-actions{position:absolute;right:10px;bottom:10px;display:flex;gap:5px;opacity:0;transition:opacity .15s}.drawing-panel:hover .canvas-actions,.drawing-panel:focus-within .canvas-actions{opacity:1}.canvas-actions button{background:#0b1017e8;border:1px solid var(--border);width:32px;height:32px;font-size:20px}.editor-panel{display:flex;flex-direction:column}.editor-header{height:33px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid var(--border);color:var(--muted);font:11px var(--mono)}.shortcut{font:11px DM Sans,sans-serif}.code-area{position:relative;display:flex;flex:1;min-height:0;overflow:hidden;padding-top:16px}.line-numbers{width:34px;flex-shrink:0;text-align:right;padding:0 8px 0 0;color:#506178;overflow:hidden;white-space:pre;font:14px/24px var(--mono);-webkit-user-select:none;user-select:none}.editor-content{flex:1;position:relative;min-width:0;overflow:hidden}pre,textarea{margin:0;border:0;font:500 14px/24px var(--mono);-moz-tab-size:2;tab-size:2;letter-spacing:0;padding:0 16px 40px 0;white-space:pre}#highlight{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;color:#edf3fc}#highlight code{font:inherit}#editor{position:absolute;top:0;right:0;bottom:0;left:0;resize:none;outline:0;background:transparent;color:transparent;caret-color:var(--green);-webkit-text-fill-color:transparent;overflow:auto}#editor::selection{background:#2c70597a}pre .comment{color:#8596a8}pre .number{color:#a1d8f4}pre .keyword{color:#e5efff}pre .color{color:#9ce5ae}.message{padding:12px 16px;background:#271a1e;border-top:1px solid #743c48;color:#ffa3ae;font:12px/1.6 var(--mono)}.message[hidden]{display:none}dialog{width:min(580px,calc(100% - 32px));max-height:85dvh;padding:26px;border:1px solid #38444e;border-radius:20px;color:var(--text);background:#141a22;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#03070bbd;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{color:var(--green);letter-spacing:2px;font-size:10px}h1{font:700 25px Space Grotesk,sans-serif;margin:7px 0}.close-button{width:30px;height:30px;font-size:26px;line-height:1}.help-intro,.help-note{color:var(--muted);font-size:13px;line-height:1.7}.command-list{margin:20px 0;display:grid;gap:0}.command-list>div{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;padding:11px 0;border-bottom:1px solid #ffffff09;font-size:12px;align-items:center}.command-list code{font:11px var(--mono);color:#70e897}.command-list span{color:#a9b6c8}.help-note{font-size:11px}.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:1050px){.toolbar{gap:12px;padding:0 14px}.examples{gap:0}.examples button{padding:8px}.toolbar-actions{gap:10px}.examples-label{display:none}}@media(max-width:760px){.toolbar{height:auto;min-height:60px;flex-wrap:wrap;padding:12px;gap:10px}.brand{font-size:17px}.examples{order:3;width:100%;justify-content:space-between;overflow:auto}.toolbar-actions{gap:7px}.help-button{font-size:12px}.run-button{padding:9px 12px}.workspace{height:auto;min-height:calc(100dvh - 112px);grid-template-columns:1fr;grid-template-rows:45dvh 45dvh;padding:8px;gap:8px}.panel{border-radius:14px}.canvas-actions{opacity:1}.command-list>div{grid-template-columns:1fr;gap:5px}dialog{padding:20px}.shortcut{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.speed-control{display:flex;flex-direction:column;gap:3px;min-width:115px;color:var(--muted);font-size:11px;line-height:1.4}.speed-control>span{display:flex;justify-content:space-between;gap:8px}.speed-control output{color:var(--green);font-family:var(--mono)}.speed-control input{width:115px;margin:0;accent-color:var(--green);cursor:pointer}.speed-control input:focus-visible{outline:2px solid var(--green);outline-offset:3px}@media(min-width:761px)and (max-width:1200px){.toolbar{height:auto;min-height:61px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.examples{order:3;flex-basis:100%;justify-content:center}.workspace{height:calc(100dvh - 106px)}}@media(max-width:760px){.toolbar-actions{flex-wrap:wrap;justify-content:flex-end}.speed-control{min-width:100px}.speed-control input{width:100px}}pre .variable{color:#e9b7ff}.editor-header{min-height:42px;height:auto}.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:flex;gap:4px;flex-shrink:0}.file-actions button{padding:7px 8px;font-size:11px;white-space:nowrap}.file-actions button:disabled{opacity:.5;cursor:wait}.drawing-panel{background-position:center center}