:root{--paper: #eef1ef;--paper-dark: #121a17;--grid: #d3ddd8;--grid-dark: #233029;--ink: #182420;--ink-dark: #dfe8e3;--accent: #2f6f6b;--accent-2: #b5502f;--accent-3: #8a6d3b;--accent-4: #5b4b8a;--panel: #ffffff;--panel-dark: #182420;--line: #c4cfc9;--line-dark: #2c3a34;color-scheme:light dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper: var(--paper-dark);--grid: var(--grid-dark);--ink: var(--ink-dark);--panel: var(--panel-dark);--line: var(--line-dark)}}:root[data-theme=dark]{--paper: var(--paper-dark);--grid: var(--grid-dark);--ink: var(--ink-dark);--panel: var(--panel-dark);--line: var(--line-dark)}*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:IBM Plex Mono,monospace;font-size:14px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}header{padding:22px 24px 14px;border-bottom:1px solid var(--line)}h1{font-family:Spectral,serif;font-weight:600;font-size:24px;margin:0 0 4px;letter-spacing:.2px}header p{margin:0;opacity:.7;font-size:13px;max-width:60ch}.layout{display:flex;flex-wrap:wrap;gap:18px;padding:18px 24px 32px;align-items:flex-start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:16px 18px}.controls{width:290px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}.field label{display:block;font-size:12px;opacity:.75;margin-bottom:5px}.field input[type=number]{width:100%;padding:6px 8px;font:inherit;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:2px}.toggle-row{display:flex;gap:8px}.toggle-row button{flex:1;padding:7px 6px;font:inherit;font-size:12px;cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:2px;transition:background-color .15s,border-color .15s,color .15s}.toggle-row button.active{background:var(--accent);border-color:var(--accent);color:#fff}.minmax{display:flex;gap:8px}.minmax .field{flex:1}#runBtn{margin-top:4px;padding:10px 12px;font:inherit;font-weight:600;cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:2px;letter-spacing:.3px;transition:opacity .15s,transform .1s}#runBtn:hover{opacity:.92}#runBtn:active{transform:translateY(1px)}.main{flex:1;min-width:320px;display:flex;flex-direction:column;gap:10px}.canvas-wrap{position:relative;cursor:zoom-in}canvas{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px;background:var(--panel)}.canvas-hint{position:absolute;right:24px;bottom:24px;font-size:11px;opacity:.55;background:var(--panel);padding:3px 7px;border:1px solid var(--line);border-radius:2px;pointer-events:none}.axis-caption{font-size:11px;opacity:.6;margin:-2px 2px 0}.viewer{display:flex;align-items:center;gap:10px;font-size:12px}.viewer button{background:transparent;border:1px solid var(--line);color:var(--ink);padding:4px 10px;cursor:pointer;border-radius:2px;font:inherit}.viewer button:hover{background:#0000000d}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.stat{border:1px solid var(--line);border-radius:2px;padding:10px 12px}.stat .val{font-family:Spectral,serif;font-size:20px;display:block}.stat .lab{font-size:11px;opacity:.65}footer{padding:0 24px 28px;font-size:11px;opacity:.5}@media(max-width:680px){.controls{width:100%}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--paper);display:flex;flex-direction:column}.modal-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;flex-wrap:wrap;padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--panel)}.modal-bar button{background:transparent;border:1px solid var(--line);color:var(--ink);padding:6px 12px;cursor:pointer;border-radius:2px;font:inherit;font-size:13px}.modal-bar button:hover{background:#0000000d}.modal-bar select{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:5px 8px;border-radius:2px;font:inherit;font-size:12px}.modal-bar .spacer{flex:1}.modal-bar span{font-size:12px;opacity:.7}#cvBig{flex:1;width:100%;height:100%;touch-action:none;cursor:grab;display:block}#cvBig.dragging{cursor:grabbing}