:root{--bg:#0a0a14;--panel:#11101f;--panel-edge:#232138;--ink:#e8e6f2;--muted:#8b87a8;--faint:#55516e;--accent:#9d8cff;--font-display:"Avenir Next", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;--font-body:system-ui, -apple-system, "Segoe UI", sans-serif;--font-utility:ui-monospace, "SF Mono", "Cascadia Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:radial-gradient(120% 90% at 50% -10%, #191632 0%, transparent 60%), radial-gradient(80% 60% at 85% 100%, #101726 0%, transparent 55%), var(--bg);color:var(--ink);font-family:var(--font-body);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{height:100dvh;padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));grid-template-rows:auto 1fr;gap:10px;margin:0 auto;display:grid}.main-row{gap:10px;min-height:0;display:flex}.rail{flex-direction:column;flex:none;align-items:center;gap:10px;width:76px;display:flex}.rail-knobs{flex-direction:column;align-items:center;gap:6px;display:flex}.rail>.voice-toggle{margin-top:auto}.display{border:1px solid var(--panel-edge);background:var(--panel);border-radius:18px;align-items:center;gap:12px;min-height:56px;padding:10px 14px;transition:box-shadow .6s;display:flex;position:relative;overflow:hidden}.display>.record-button{margin-left:auto}.display:before{content:"";background:radial-gradient(60% 55% at 50% 20%, hsl(var(--display-hue) 70% 60% / .16), transparent 70%);opacity:.5;pointer-events:none;transition:opacity .8s;position:absolute;inset:-40%}.display--active:before{opacity:1}.display-chord{font-family:var(--font-display);letter-spacing:.04em;white-space:nowrap;font-size:clamp(1.05rem,4.5vw,1.3rem);font-weight:400}.display-chord--idle{color:var(--muted)}.display-notes{gap:8px;list-style:none;display:flex}.note-tile{font-family:var(--font-utility);border:1px solid hsl(var(--display-hue) 50% 55% / .45);color:hsl(var(--display-hue) 65% 78%);background:hsl(var(--display-hue) 60% 55% / .09);border-radius:7px;padding:3px 9px;font-size:.85rem}.pad-grid{touch-action:none;flex:1;grid-template-rows:1fr;grid-template-columns:repeat(7,1fr);gap:4px;min-height:0;display:grid}.pad{border:1px solid hsl(var(--pad-hue) 45% 45% / .4);background:linear-gradient(180deg, hsl(var(--pad-hue) 45% 16% / .9), hsl(var(--pad-hue) 50% 10% / .9));touch-action:none;border-radius:10px;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;padding:4px 4px 14px;transition:box-shadow .25s,background .25s,transform .15s;display:flex;position:relative}.pad-roman{font-family:var(--font-display);letter-spacing:.05em;color:hsl(var(--pad-hue) 55% 75%);font-size:.85rem}.pad-root{font-family:var(--font-utility);color:var(--faint);font-size:.75rem}.pad-keycap{font-family:var(--font-utility);letter-spacing:.04em;color:var(--faint);pointer-events:none;font-size:.6rem;position:absolute;top:4px;left:6px}.pad--gutter{margin-left:10px}.pad--active{background:linear-gradient(180deg, hsl(var(--pad-hue) 65% 32% / .95), hsl(var(--pad-hue) 70% 20% / .95));box-shadow:0 0 22px hsl(var(--pad-hue) 80% 60% / .45), inset 0 0 18px hsl(var(--pad-hue) 80% 65% / .35);transform:scale(.985)}.pad--active .pad-root{color:hsl(var(--pad-hue) 60% 80%)}.control-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.key-selector{border:1px solid var(--panel-edge);background:var(--panel);border-radius:12px;align-items:center;gap:2px;padding:4px;display:flex}.key-step{width:34px;height:34px;color:var(--muted);border-radius:9px;place-items:center;display:grid}.key-step:active{color:var(--ink);background:var(--panel-edge)}.key-step svg{width:15px;height:15px}.key-name{font-family:var(--font-display);text-align:center;min-width:2.2em;font-size:1.05rem}.voice-toggle{border:1px solid var(--panel-edge);background:var(--panel);border-radius:12px;flex-direction:column;gap:4px;padding:4px;display:flex}.voice-option{color:var(--muted);border-radius:9px;padding:7px 10px;font-size:.85rem}.voice-option--on{color:var(--ink);background:var(--panel-edge)}.record-button{border:1px solid var(--panel-edge);background:var(--panel);color:#e5484d;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:42px;height:42px;padding:0 12px;display:flex}.record-button svg{flex:none;width:20px;height:20px}.record-button--on{border-color:#e5484d88;animation:1.6s ease-in-out infinite rec-pulse}.record-elapsed{font-family:var(--font-utility);color:var(--ink);font-size:.85rem}@keyframes rec-pulse{50%{box-shadow:0 0 14px #e5484d55}}.knob-row{grid-template-columns:repeat(4,1fr);justify-items:center;gap:8px;display:grid}.knob{justify-items:center;gap:4px;display:grid}.knob-dial{touch-action:none;border-radius:50%;width:52px;height:52px}.knob-dial svg{width:100%;height:100%;display:block}.knob-track{fill:none;stroke:var(--panel-edge);stroke-width:3px;stroke-linecap:round}.knob-fill{fill:none;stroke:var(--accent);stroke-width:3px;stroke-linecap:round}.knob-needle{stroke:var(--ink);stroke-width:2.5px;stroke-linecap:round}.knob-cap{fill:var(--panel);stroke:var(--panel-edge)}.knob-label{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:.68rem}.dial-puck{border:1px solid var(--panel-edge);background:var(--panel);width:64px;height:64px;font-family:var(--font-display);color:var(--ink);touch-action:none;cursor:grab;transform:translate(calc(var(--dx,0px)), calc(var(--dy,0px)));border-radius:50%;flex:none;place-items:center;font-size:1.2rem;transition:transform .25s cubic-bezier(.2,.9,.3,1.3);display:grid}.dial-puck--dragging{cursor:grabbing;transition:none}.dial-ghost{aspect-ratio:1;border:1px solid var(--panel-edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:5;opacity:0;background:radial-gradient(60% 60%,#3d2e6b40,#0000 70%);border-radius:50%;width:min(70vw,70dvh,340px);margin:auto;animation:.18s forwards dial-ghost-in;position:fixed;inset:0}@keyframes dial-ghost-in{to{opacity:1}}.dial-ghost-key{width:40px;height:40px;font-family:var(--font-display);color:var(--muted);border-radius:50%;place-items:center;font-size:.95rem;display:grid;position:absolute;transform:translate(-50%,-50%)}.dial-ghost-key--current{color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}.dial-ghost-key--aim{color:var(--ink);background:#7a5cd64d;box-shadow:0 0 18px #8767e480}.audio-resume-chip{border:1px solid var(--panel-edge);background:var(--panel);color:var(--muted);letter-spacing:.02em;border-radius:10px;align-items:center;gap:5px;padding:5px 9px;font-size:.72rem;display:flex}.audio-resume-chip svg{flex:none;width:14px;height:14px}.kbd-caption{left:50%;bottom:calc(6px + env(safe-area-inset-bottom));font-family:var(--font-utility);letter-spacing:.04em;color:var(--faint);white-space:nowrap;pointer-events:none;z-index:4;font-size:.62rem;position:fixed;transform:translate(-50%)}.start-overlay{z-index:10;background:radial-gradient(70% 50% at 50% 35%, #1b1738 0%, transparent 70%), var(--bg);place-content:center;justify-items:center;gap:10px;display:grid;position:fixed;inset:0}.start-title{font-family:var(--font-display);letter-spacing:.42em;text-indent:.42em;color:var(--ink);font-size:2.2rem;font-weight:300}.start-sub{color:var(--muted);font-size:.9rem}.start-hint{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin-top:26px;font-size:.85rem;animation:2.4s ease-in-out infinite hint-breathe}@keyframes hint-breathe{50%{opacity:.45}}.tutorial-hints{pointer-events:none;z-index:8;position:fixed;inset:0}.hint-chip{border:1px solid var(--panel-edge);background:var(--panel);max-width:44%;color:var(--muted);letter-spacing:.02em;text-align:center;opacity:0;border-radius:10px;padding:6px 11px;font-size:.72rem;line-height:1.3;animation:.5s .2s forwards hint-fade-in;position:absolute;box-shadow:0 6px 20px #0007}@keyframes hint-fade-in{to{opacity:1}}.hint-chip--pads{top:20%;left:58%;transform:translate(-50%)}.hint-chip--dial{top:84px;left:6px}.hint-chip--knobs{top:45%;left:6px}@media (orientation:portrait) and (width<=600px){.main-row{grid-template-rows:repeat(4,1fr) auto auto;grid-template-columns:1fr 1fr;gap:6px;min-height:0;display:grid}.rail,.pad-grid{display:contents}.pad-grid>.pad:first-child{grid-area:1/1}.pad-grid>.pad:nth-child(2){grid-area:1/2}.pad-grid>.pad:nth-child(3){grid-area:2/1}.pad-grid>.pad:nth-child(4){grid-area:2/2}.pad-grid>.pad:nth-child(5){grid-area:3/1}.pad-grid>.pad:nth-child(6){grid-area:3/2}.pad-grid>.pad:nth-child(7){grid-area:4/1}.pad{justify-content:center;height:auto;min-height:0;padding:6px}.pad--gutter{margin-left:0}.dial-puck{grid-area:4/2;place-self:center}.audio-resume-chip{z-index:6;grid-area:4/2;place-self:start end}.rail-knobs{flex-direction:row;grid-area:5/1/auto/-1;justify-content:center;gap:12px;display:flex}.voice-toggle{flex-direction:row;grid-area:6/1/auto/-1;justify-self:center}.hint-chip--pads{top:8%;left:50%;transform:translate(-50%)}.hint-chip--dial{top:72%;left:auto;right:5%}.hint-chip--knobs{top:auto;bottom:12%;left:50%;transform:translate(-50%)}}@media (orientation:landscape) and (height<=480px){.rail{gap:8px;width:84px}.dial-puck{width:48px;height:48px;font-size:1rem}.rail-knobs{grid-template-columns:repeat(2,1fr);gap:2px 6px;display:grid}.knob-dial{width:34px;height:34px}.knob-label{font-size:.55rem}.voice-toggle{flex-direction:row}.voice-option{padding:5px 8px}}@media (prefers-reduced-motion:reduce){.start-hint,.record-button--on{animation:none}.dial-ghost,.hint-chip{opacity:1;animation:none}.pad,.display,.dial-puck{transition:none}}