:root{--accent: oklch(.645 .18 42);--accent-soft: color-mix(in oklab, var(--accent) 22%, transparent);--accent-faint: color-mix(in oklab, var(--accent) 12%, transparent);--screen-bg: oklch(.165 .014 52);--screen-trace: var(--accent);--screen-grid: oklch(.33 .03 52);--screen-ink: oklch(.74 .11 58);--ff-serif: "Spectral", Georgia, serif;--ff-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;--ff-mono: "IBM Plex Mono", ui-monospace, monospace;--ease: cubic-bezier(.22, .61, .36, 1)}[data-theme=light]{--bg: oklch(.885 .004 75);--bg-2: oklch(.845 .005 73);--panel: oklch(.825 .005 73);--panel-2: oklch(.775 .006 71);--ink: oklch(.275 .008 60);--ink-soft: oklch(.4 .008 60);--muted: oklch(.5 .007 62);--faint: oklch(.6 .006 64);--line: oklch(.7 .006 70);--line-soft: oklch(.755 .006 71);--scope-bg: var(--screen-bg);--scope-grid:var(--screen-grid);--metal-hi: oklch(.965 .004 82);--metal-lo: oklch(.71 .006 70);--inset-sh: oklch(.55 .012 64);--card-shadow: 0 1px 2px oklch(.4 .01 60 / .18), 0 10px 30px oklch(.4 .01 60 / .16);--btn-face: oklch(.305 .008 58);--btn-face-2:oklch(.235 .008 58);--btn-ink: oklch(.93 .006 80);--btn-edge: oklch(.16 .006 58);--fader-thumb: oklch(.55 .006 66);--fader-thumb-2:oklch(.44 .006 64)}[data-theme=dark]{--bg: oklch(.165 .012 264);--bg-2: oklch(.145 .012 264);--panel: oklch(.205 .013 263);--panel-2: oklch(.245 .014 262);--ink: oklch(.935 .006 85);--ink-soft: oklch(.8 .01 80);--muted: oklch(.64 .014 262);--faint: oklch(.5 .014 262);--line: oklch(.31 .014 262);--line-soft: oklch(.26 .013 263);--scope-bg: var(--screen-bg);--scope-grid:var(--screen-grid);--metal-hi: oklch(.34 .015 262);--metal-lo: oklch(.18 .012 264);--inset-sh: oklch(.1 .01 264);--card-shadow: 0 1px 2px oklch(0 0 0 / .4), 0 10px 34px oklch(0 0 0 / .34);--btn-face: oklch(.42 .013 262);--btn-face-2:oklch(.33 .013 263);--btn-ink: oklch(.95 .006 85);--btn-edge: oklch(.12 .01 264);--fader-thumb: oklch(.6 .012 262);--fader-thumb-2:oklch(.48 .012 263)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{min-height:100vh;transition:background .45s var(--ease),color .45s var(--ease)}::selection{background:var(--accent-soft)}.app{max-width:1320px;margin:0 auto;padding:clamp(18px,3vw,40px)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 2px,oklch(0 0 0 / .012) 2px 3px),radial-gradient(1400px 700px at 50% -12%,oklch(1 0 0 / .4),transparent 62%);opacity:.8;z-index:0}[data-theme=dark] body:before{background:radial-gradient(1200px 600px at 12% -8%,var(--accent-faint),transparent 60%);opacity:.6}.app{position:relative;z-index:1}.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}.brand{display:flex;align-items:baseline;gap:12px;min-width:0}.brand .phi{font-family:var(--ff-serif);font-size:clamp(21px,3vw,31px);line-height:1;font-weight:500;color:var(--accent)}.brand .wordmark{font-family:var(--ff-serif);font-weight:500;font-size:clamp(16px,2.2vw,21px);letter-spacing:.005em;color:var(--ink);white-space:nowrap}.brand .tagline{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.brand .tagline:before{content:"— "}.masthead-tools{display:flex;align-items:center;gap:10px}@media (max-width: 520px){.brand .tagline{display:none}}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r, 6px);position:relative}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px 11px;border-bottom:1px solid var(--line-soft);min-height:44px}.panel-head h2{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0;white-space:nowrap}.panel-head .meta{font-family:var(--ff-mono);font-size:11px;color:var(--faint);letter-spacing:.04em;white-space:nowrap;text-align:right}.stage{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:start}.col{display:flex;flex-direction:column;gap:16px;min-width:0}.slot canvas{display:block;width:100%;border-radius:2px}.slot-tl canvas{height:300px}.slot-r canvas{aspect-ratio:1 / 1;height:auto}.slot-sm canvas{height:168px}.slot .slot-canvas{background:var(--screen-bg);padding:7px;margin:0 12px 12px;border-radius:5px;box-shadow:inset 0 2px 8px #0009,inset 0 0 0 1px #0006,0 1px 0 var(--metal-hi)}.slot-r .slot-canvas{margin-bottom:12px}.slot-canvas{animation:slotIn .45s var(--ease) both}@keyframes slotIn{0%{opacity:0}to{opacity:1}}.scope-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}@media (max-width: 620px){.scope-row{grid-template-columns:1fr}}.canvas-wrap{padding:10px}.canvas-wrap.tight{padding:0}.bank-panel{margin-top:0}.bank-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-bottom-left-radius:var(--r, 6px);border-bottom-right-radius:var(--r, 6px);overflow:hidden}.osc{background:var(--panel);padding:15px 10px 16px;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;min-width:0;transition:background .3s var(--ease)}.osc.locked{background:color-mix(in oklab,var(--accent) 7%,var(--panel))}.osc-index{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:6px}.osc-index .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent)}.osc.muted .osc-index .dot{background:var(--faint)}.osc-freq{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;font-size:21px;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:baseline;gap:4px}.osc-freq .unit{font-size:11px;color:var(--muted);letter-spacing:.05em}.osc-ratio{font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;color:var(--muted);height:13px}.osc-ratio b{color:var(--accent);font-weight:600}.osc-tools{display:flex;gap:6px}.osc .level{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:18px;margin-top:2px;background:transparent;outline:none;cursor:pointer}.osc .level::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(180deg,var(--inset-sh),var(--panel-2));box-shadow:inset 0 1px 2px #0006}.osc .level::-moz-range-track{height:6px;border-radius:4px;background:linear-gradient(180deg,var(--inset-sh),var(--panel-2));box-shadow:inset 0 1px 2px #0006}.osc .level::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:18px;margin-top:-6px;border-radius:4px;background:linear-gradient(180deg,var(--fader-thumb),var(--fader-thumb-2));border:1px solid var(--btn-edge);box-shadow:inset 0 1px 0 var(--metal-hi),0 2px 3px #0006}.osc .level::-moz-range-thumb{width:15px;height:18px;border-radius:4px;background:linear-gradient(180deg,var(--fader-thumb),var(--fader-thumb-2));border:1px solid var(--btn-edge);box-shadow:inset 0 1px 0 var(--metal-hi),0 2px 3px #0006}.osc.muted .level{opacity:.55}.knob{--size: 78px;width:var(--size);height:var(--size);position:relative;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none}.knob svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.knob .track{stroke:var(--line)}.knob .value-arc{stroke:var(--accent);transition:stroke .3s var(--ease)}.knob.muted .value-arc{stroke:var(--faint)}.knob .cap{position:absolute;top:16%;right:16%;bottom:16%;left:16%;border-radius:50%;display:grid;place-items:center}.knob .pointer{position:absolute;top:8%;left:50%;width:2.5px;height:26%;background:var(--accent);border-radius:2px;transform-origin:bottom center;transform:translate(-50%)}.knob.muted .pointer{background:var(--faint)}.btn{font-family:var(--ff-sans);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r, 6px);padding:9px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .18s var(--ease);white-space:nowrap}.btn:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn .ico{width:15px;height:15px;display:block}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fffbf4}[data-theme=dark] .btn-primary{color:#090d16}.btn-primary:hover{filter:brightness(1.06);color:#fffbf4}[data-theme=dark] .btn-primary:hover{color:#090d16}.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn-ghost:hover{background:var(--panel-2);border-color:transparent;color:var(--ink)}.btn-icon{width:38px;height:38px;padding:0;justify-content:center}.btn.sm{padding:6px 10px;font-size:12px}.btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-faint)}.btn.chip{width:26px;height:26px;padding:0;justify-content:center;border-radius:5px;color:var(--muted)}.btn.chip svg{width:13px;height:13px}.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r, 6px);overflow:hidden;background:var(--panel)}.seg button{border:none;background:transparent;cursor:pointer;padding:7px 9px;display:grid;place-items:center;color:var(--muted);transition:all .15s var(--ease);border-right:1px solid var(--line-soft)}.seg button:last-child{border-right:none}.seg button svg{width:22px;height:13px;display:block}.seg button:hover{color:var(--ink)}.seg button.on{color:var(--accent);background:var(--accent-faint)}.transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r, 6px)}.transport.subbar{margin-top:0;margin-bottom:16px}.transport .spacer{flex:1}.transport .group{display:flex;align-items:center;gap:8px}.divider-v{width:1px;align-self:stretch;background:var(--line);margin:-4px 2px}.fader{display:flex;align-items:center;gap:10px}.fader label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.fader input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:120px;height:22px;background:transparent;outline:none;cursor:pointer}.fader input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:5px;background:linear-gradient(180deg,var(--inset-sh),var(--panel-2));box-shadow:inset 0 1px 3px #00000073,inset 0 -1px 0 var(--metal-hi)}.fader input[type=range]::-moz-range-track{height:7px;border-radius:5px;background:linear-gradient(180deg,var(--inset-sh),var(--panel-2));box-shadow:inset 0 1px 3px #00000073}.fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:22px;margin-top:-7.5px;border-radius:5px;background:linear-gradient(180deg,var(--fader-thumb) 0%,var(--fader-thumb-2) 100%);border:1px solid var(--btn-edge);box-shadow:inset 0 1px 0 var(--metal-hi),inset 0 -2px 3px #00000059,0 2px 4px #0006}.fader input[type=range]::-moz-range-thumb{width:18px;height:22px;border-radius:5px;background:linear-gradient(180deg,var(--fader-thumb),var(--fader-thumb-2));border:1px solid var(--btn-edge);box-shadow:inset 0 1px 0 var(--metal-hi),0 2px 4px #0006}.readout{padding:16px;display:flex;flex-direction:column;gap:14px}.lock-state{display:flex;align-items:center;gap:12px}.lock-led{width:12px;height:12px;border-radius:50%;background:var(--faint);position:relative;transition:all .3s var(--ease)}.lock-state.locked .lock-led{background:var(--accent);box-shadow:0 0 0 4px var(--accent-faint),0 0 16px var(--accent)}.lock-label{font-family:var(--ff-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.lock-state.locked .lock-label{color:var(--accent)}.ratio-rows{display:flex;flex-direction:column;gap:0}.ratio-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft)}.ratio-row .pair{font-family:var(--ff-mono);font-size:11px;color:var(--muted);letter-spacing:.04em}.ratio-row .val{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}.ratio-bar{grid-column:1 / -1;height:3px;border-radius:3px;background:var(--line-soft);position:relative;overflow:hidden}.ratio-bar i{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);border-radius:2px;transition:transform .25s var(--ease),background .25s var(--ease)}.ratio-row.near .val{color:var(--accent)}.phi-figure{font-family:var(--ff-serif);font-size:13px;color:var(--muted);line-height:1.5}.phi-figure b{color:var(--ink);font-weight:500}.switch{width:58px;height:30px;border-radius:30px;border:1px solid var(--line);background:var(--panel-2);position:relative;cursor:pointer;padding:0;transition:all .3s var(--ease)}.switch .knob-dot{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);transition:transform .32s var(--ease),background .3s var(--ease);display:grid;place-items:center}.switch .knob-dot svg{width:12px;height:12px;color:var(--panel)}[data-theme=dark] .switch .knob-dot{transform:translate(28px);background:var(--accent)}.footnote{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint)}.footnote .serif{font-family:var(--ff-serif);font-size:12px;letter-spacing:0;color:var(--muted)}[data-skin=flat]{--r: 5px}[data-skin=flat] .knob .cap{background:transparent}[data-skin=flat] .knob .cap:after{content:"";position:absolute;top:22%;right:22%;bottom:22%;left:22%;border-radius:50%;border:1px solid var(--line)}[data-skin=flat] .osc-freq{font-weight:400}[data-skin=skeuo]{--r: 9px}[data-skin=skeuo] .panel{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);box-shadow:inset 0 1px 0 var(--metal-hi),var(--card-shadow)}[data-skin=skeuo] .panel-head{background:linear-gradient(180deg,color-mix(in oklab,var(--metal-hi) 60%,var(--panel)),var(--panel));border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 var(--metal-hi)}[data-skin=skeuo] .panel-head h2{text-shadow:0 1px 0 var(--metal-hi)}[data-skin=skeuo] .osc{background:linear-gradient(180deg,var(--panel),var(--panel-2))}[data-skin=skeuo] .osc.locked{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 9%,var(--panel)),var(--panel-2))}[data-skin=skeuo] .knob .cap{background:radial-gradient(circle at 38% 30%,var(--metal-hi),var(--metal-lo) 78%);box-shadow:inset 0 2px 3px var(--metal-hi),inset 0 -3px 5px var(--inset-sh),0 3px 7px #00000038;border:1px solid color-mix(in oklab,var(--inset-sh) 50%,transparent)}[data-skin=skeuo] .knob .cap:before{content:"";position:absolute;top:18%;right:18%;bottom:18%;left:18%;border-radius:50%;background:radial-gradient(circle at 40% 32%,var(--metal-hi),var(--metal-lo));box-shadow:inset 0 1px 2px var(--metal-hi),0 1px 2px var(--inset-sh)}[data-skin=skeuo] .knob .pointer{box-shadow:0 0 6px var(--accent);z-index:2}[data-skin=skeuo] .knob .track{stroke:var(--inset-sh);opacity:.5}[data-skin=skeuo] .btn{background:linear-gradient(180deg,var(--btn-face) 0%,var(--btn-face-2) 100%);color:var(--btn-ink);border:1px solid var(--btn-edge);box-shadow:inset 0 1px #ffffff29,inset 0 -2px 4px #0000004d,0 2px 4px #00000052;text-shadow:0 1px 0 oklch(0 0 0 / .4)}[data-skin=skeuo] .btn:hover{color:var(--btn-ink);border-color:var(--btn-edge);filter:brightness(1.1);transform:translateY(-1px)}[data-skin=skeuo] .btn:active{transform:translateY(1px);box-shadow:inset 0 2px 6px #00000080,inset 0 1px #0003;filter:brightness(.96)}[data-skin=skeuo] .btn .ico,[data-skin=skeuo] .btn svg{color:var(--accent)}[data-skin=skeuo] .btn-primary{background:linear-gradient(180deg,color-mix(in oklab,white 22%,var(--accent)) 0%,var(--accent) 55%,color-mix(in oklab,black 12%,var(--accent)) 100%);color:#fffffffa;border:1px solid color-mix(in oklab,black 30%,var(--accent));text-shadow:0 1px 1px oklch(0 0 0 / .3);box-shadow:inset 0 1px #ffffff80,inset 0 -3px 6px #00000038,0 2px 6px var(--accent-soft),0 3px 8px #00000040}[data-skin=skeuo] .btn-primary .ico,[data-skin=skeuo] .btn-primary svg{color:#fffffffa}[data-skin=skeuo] .btn-primary:hover{filter:brightness(1.05);color:#fffffffa}[data-skin=skeuo] .btn-primary:active{transform:translateY(1px);box-shadow:inset 0 2px 6px #0006,0 1px 3px #0000004d}[data-skin=skeuo] .btn-ghost{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none;text-shadow:none}[data-skin=skeuo] .btn-ghost:hover{background:#0000000f;color:var(--ink);filter:none;transform:none}[data-skin=skeuo] .btn-ghost svg{color:var(--muted)}[data-skin=skeuo] .btn.chip{background:linear-gradient(180deg,var(--btn-face),var(--btn-face-2));color:var(--btn-ink);border:1px solid var(--btn-edge)}[data-skin=skeuo] .btn.chip svg{color:var(--accent)}[data-skin=skeuo] .osc.muted .btn.chip svg{color:var(--faint)}[data-skin=skeuo] .transport{background:linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:inset 0 1px 0 var(--metal-hi),var(--card-shadow)}[data-skin=skeuo] .seg{box-shadow:inset 0 1px 3px var(--inset-sh)}[data-skin=skeuo] .switch{box-shadow:inset 0 2px 4px var(--inset-sh)}[data-skin=skeuo] .switch .knob-dot{box-shadow:0 1px 3px #0006,inset 0 1px color-mix(in oklab,white 40%,transparent)}[data-skin=skeuo] .brand .phi{text-shadow:0 1px 0 var(--metal-hi)}[data-skin=skeuo] .lock-led{box-shadow:inset 0 1px 2px var(--inset-sh);border:1px solid var(--inset-sh)}[data-skin=skeuo] .lock-state.locked .lock-led{box-shadow:0 0 0 3px var(--accent-faint),0 0 18px var(--accent),inset 0 0 4px color-mix(in oklab,white 40%,var(--accent))}@media (max-width: 900px){.stage{grid-template-columns:1fr}}@media (max-width: 560px){.brand .phi{font-size:40px}.transport{gap:8px}.fader input[type=range]{width:80px}.divider-v{display:none}}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important}}