:root{--bg:#0a0f1c;--panel:#121a2c;--panel-2:#172036;--border:#26324d;--text:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--accent-strong:#0ea5e9;--danger:#f87171;--mono:ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{flex-direction:column;min-height:100dvh;display:flex}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.skip-link{background:var(--accent);color:#001018;z-index:10;border-radius:6px;padding:6px 10px;position:absolute;top:-40px;left:8px}.skip-link:focus{top:8px}.topbar{border-bottom:1px solid var(--border);background:linear-gradient(180deg, #0f1628, var(--bg));justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.brand{letter-spacing:.01em;white-space:nowrap;margin:0;font-size:1.15rem;font-weight:700}.brand-mark{color:#86efac;margin-right:4px;display:inline-block;transform:rotate(90deg)}.brand-sub{color:var(--muted);font-weight:500}.topbar-actions{align-items:center;gap:10px;display:flex}.btn{border:1px solid var(--border);background:var(--panel-2);min-height:34px;color:var(--text);font:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:.9rem;font-weight:550;transition:background .12s,border-color .12s;display:inline-flex}.btn:hover:not(:disabled){background:#1e2a45;border-color:#36456a}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#00121c}.btn-primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.btn-primary.is-running{animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 4px #38bdf840}}.btn-ghost{background:0 0}.btn-small{min-height:30px;padding:4px 10px;font-size:.82rem}.btn-icon{justify-content:center;min-width:30px;padding:0;font-size:1rem}.field{align-items:center;gap:6px;display:inline-flex}.field-label{color:var(--muted);font-size:.82rem}select{border:1px solid var(--border);background:var(--panel-2);min-height:34px;color:var(--text);font:inherit;border-radius:8px;max-width:230px;padding:4px 8px;font-size:.88rem}.toggle{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:.86rem;display:inline-flex}.toggle input{accent-color:var(--accent);width:16px;height:16px}.layout{flex:1;grid-template-columns:minmax(340px,42%) 1fr;gap:12px;min-height:0;padding:12px;display:grid}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;min-height:0;position:relative;overflow:hidden}.code-panel{flex-direction:column;display:flex}.toolbar{border-bottom:1px solid var(--border);background:var(--panel-2);flex-wrap:wrap;align-items:center;gap:8px;padding:10px;display:flex}.toolbar .field-inline{margin-left:auto}.editor{flex:1;min-height:0;overflow:hidden}.editor .cm-editor{height:100%}.status-area{border-top:1px solid var(--border);background:var(--panel-2);padding:8px 12px;font-size:.85rem}.status{color:var(--muted);min-height:1.3em;font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.8rem;overflow:hidden}.error{color:#fecaca;background:#7f1d1d59;border:1px solid #f8717173;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;display:flex}.error[hidden]{display:none}.view-panel{min-height:320px}.viewport{position:absolute;inset:0}.viewport canvas{touch-action:none;width:100%;height:100%;transition:opacity .15s;display:block}.viewport.is-stale canvas{opacity:.45}.error .btn{white-space:nowrap;flex-shrink:0}.viewport:focus,.viewport:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:12px}.fly-hint{border:1px solid var(--accent-strong);color:#e0f2fe;white-space:nowrap;pointer-events:none;background:#082f49e6;border-radius:999px;padding:5px 10px;font-size:.75rem;display:none;position:absolute;bottom:34px;right:10px}.viewport:focus~.fly-hint{display:block}kbd{min-width:1.5em;font-family:var(--mono);text-align:center;background:#0f172acc;border:1px solid #4b6a8f;border-bottom-width:2px;border-radius:4px;margin:0 1px;padding:0 4px;font-size:.85em;display:inline-block}.view-toolbar{border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#121a2cd1;border-radius:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;padding:6px;display:flex;position:absolute;top:10px;right:10px}.toggle-small{padding:0 4px;font-size:.82rem}.hud{border:1px solid var(--border);font-family:var(--mono);pointer-events:none;background:#121a2cd1;border-radius:10px;padding:8px 10px;font-size:.75rem;line-height:1.55;position:absolute;bottom:34px;left:10px}.hud-key{color:var(--muted)}.hud-dim{color:#64748b}.hud-swatch{vertical-align:0;border-radius:2px;width:9px;height:9px;margin-right:4px;display:inline-block}.view-help{color:#64748b;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.72rem;position:absolute;bottom:8px;left:10px;right:10px;overflow:hidden}.example-info{border-bottom:1px solid var(--border);color:var(--muted);padding:6px 12px;font-size:.8rem;line-height:1.45}.example-info[hidden]{display:none}.example-info b{color:var(--text);margin-right:4px}.example-info a,.card-source{color:var(--accent)}.badge{vertical-align:1px;border:1px solid;border-radius:999px;padding:0 7px;font-size:.72rem;font-weight:600;line-height:1.6;display:inline-block}.badge-exact{color:#86efac;background:#14532d73;border-color:#86efac80}.badge-approximation{color:#fcd34d;background:#713f1273;border-color:#fcd34d80}.badge-artistic{color:#f0abfc;background:#701a7566;border-color:#f0abfc80}.badge-lesson{color:#93c5fd;background:#1e3a8a73;border-color:#93c5fd80}.gallery{width:min(1180px,100vw - 24px)}.legend{color:var(--muted);flex-wrap:wrap;gap:4px 18px;margin:12px 0 0;padding:0;font-size:.8rem;list-style:none;display:flex}.cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.card{border:1px solid var(--border);background:var(--panel-2);border-radius:10px;flex-direction:column;gap:4px;padding:8px;display:flex}.card-open{color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:stretch;gap:6px;padding:0;display:flex}.thumb{background:#0e1424;border:1px solid #0000;border-radius:8px;width:100%;height:132px}.card-open:hover .thumb,.card-open:focus-visible .thumb{border-color:var(--accent)}.card-title{font-weight:600;line-height:1.3}.card-meta{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.card-stats{font-family:var(--mono);color:var(--muted);font-size:.7rem}.card-desc{color:var(--muted);margin:0;font-size:.8rem;line-height:1.4}.card-source{font-size:.72rem;line-height:1.35}.help{border:1px solid var(--border);background:var(--panel);width:min(980px,100vw - 24px);max-height:min(86vh,900px);color:var(--text);border-radius:14px;padding:0}.help::backdrop{background:#02060f99}.help-head{background:var(--panel-2);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 18px;display:flex;position:sticky;top:0}.help-head h2{margin:0;font-size:1.05rem}.help-body{padding:4px 18px 18px;font-size:.9rem;line-height:1.55}.help-body h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 6px;font-size:.8rem}.help-body table{border-collapse:collapse;width:100%}.help-body td{vertical-align:top;border-bottom:1px solid #1e2840;padding:5px 8px 5px 0}.help-body td:first-child{white-space:nowrap;width:1%;padding-right:16px}.help-body code{font-family:var(--mono);color:#7dd3fc;font-size:.85em}.help-body i{color:#fbbf24;font-style:normal}.alias{color:var(--muted);font-family:var(--mono);font-size:.8em}.ax-x{color:#f87171;font-weight:700}.ax-y{color:#4ade80;font-weight:700}.ax-z{color:#60a5fa;font-weight:700}.swatches{flex-wrap:wrap;gap:6px 14px;display:flex}.swatch{font-family:var(--mono);align-items:center;gap:5px;font-size:.82rem;display:inline-flex}.swatch span{border:1px solid #fff3;border-radius:3px;width:12px;height:12px}.ax-h{color:#fbbf24}.ax-l{color:#f472b6}.ax-u{color:#a78bfa}.hud-key.ax-h,.hud-key.ax-l,.hud-key.ax-u{font-weight:700}.diagram{max-width:100%;height:auto;font-family:var(--mono);margin:0 auto;font-size:11px;font-weight:600;display:block;overflow:visible}.axes-guide{border:1px solid var(--border);background:#0e1424;border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px 28px;padding:12px 16px;display:flex}.axes-guide .diagram{width:300px;margin:0}.axes-list{flex:1;grid-template-columns:auto 1fr;gap:6px 14px;min-width:240px;margin:0;display:grid}.axes-list dt{font-family:var(--mono);white-space:nowrap;font-weight:700}.axes-list dd{margin:0}.help-body .note{color:var(--muted);font-size:.85rem}.turn-cards{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;display:grid}.turn-card{border:1px solid var(--border);background:#0e1424;border-radius:12px;flex-direction:column;gap:8px;margin:0;padding:12px;display:flex}.turn-card figcaption{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.turn-card h4{margin:0;font-size:1rem}.turn-axis{color:var(--muted);font-size:.82rem}.turn-card .diagram{width:250px;min-height:150px}.diagram-key{text-align:center;color:var(--muted);margin:0;font-size:.76rem}.turn-card td:first-child{width:1%}.snippet{white-space:pre-wrap;background:#0a0f1c;border:1px solid #1e2840;border-radius:8px;margin:0;padding:8px 10px;font-size:.8rem;line-height:1.5}.snippet code{color:#cbd5e1!important}.try{align-self:flex-start}.combined{grid-template-columns:1fr 1fr;align-items:start;gap:16px;display:grid}.combined p{margin-top:0}.combined>div:last-child{flex-direction:column;gap:8px;display:flex}@media (width<=860px){.fly-hint{font-size:.66rem;top:52px;bottom:auto;right:8px}.layout{grid-template-rows:minmax(300px,46dvh) minmax(380px,1fr);grid-template-columns:1fr;gap:8px;padding:8px}.view-panel{order:-1}.brand-sub,.topbar .field-label,.view-help{display:none}.hud{padding:5px 8px;font-size:.66rem;bottom:8px;left:8px}.hud-dim,#zoom-in,#zoom-out{display:none}.view-toolbar{gap:4px;padding:4px;top:8px;right:8px}.toolbar .field-inline{margin-left:0}select{max-width:170px}.combined{grid-template-columns:1fr}.help-body td:first-child{white-space:normal}}@media (prefers-reduced-motion:reduce){.btn-primary.is-running{animation:none}}.window-list{flex:1;min-width:240px;margin:0;padding-left:18px}.help-body a{color:var(--accent)}