@import url("./visuals.css");

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--spell-void); color-scheme: dark; }
body { background: var(--spell-void); color: var(--spell-bone); font-family: var(--spell-ui); margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.noise { background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px), repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.16) 4px 5px); background-size: 4px 4px,7px 7px,auto; inset: 0; mix-blend-mode: screen; opacity: .46; pointer-events: none; position: fixed; z-index: 20; }

.boot-screen { align-items: center; background: radial-gradient(circle at 50% 40%,rgba(177,140,255,.13),transparent 28rem),var(--spell-void); display: grid; justify-items: center; min-height: 100dvh; overflow: hidden; padding: 1.25rem; position: relative; text-align: center; }
.boot-screen::before { border: 1px solid var(--spell-wire-dim); clip-path: polygon(0 0,29% 0,30% 9px,70% 9px,71% 0,100% 0,100% 100%,71% 100%,70% calc(100% - 9px),30% calc(100% - 9px),29% 100%,0 100%); content:""; inset: clamp(1rem,4vw,4rem); pointer-events: none; position: absolute; }
.boot-screen::after { background: linear-gradient(90deg,transparent,rgba(165,255,157,.15),transparent); content:""; height: 1px; left: 8%; position: absolute; right: 8%; top: 50%; }
.boot-sigil, .calibration-glyph { color: var(--spell-wire); font: clamp(4rem,12vw,10rem)/.8 Georgia,serif; text-shadow: 0 0 2rem rgba(165,255,157,.45); }
.boot-sigil { margin-bottom: -1rem; }
.eyebrow { color: var(--spell-wire); font: 1rem/1.25 var(--spell-mono); letter-spacing: .09em; margin: .8rem 0; text-transform: uppercase; }
.wordmark { color: var(--spell-bone); font-family: var(--spell-display); font-size: clamp(3.2rem,12vw,9.5rem); font-weight: 700; line-height: .78; margin: 0; text-shadow: 3px 3px 0 rgba(225,72,88,.35),-2px 0 rgba(165,255,157,.24); white-space: nowrap; }
.wordmark-stamp { display:inline-block; font-family:var(--spell-stamp); font-size:.68em; letter-spacing:-.055em; margin-left:.12em; transform:rotate(-3deg); }
.wordmark-dagger { font-family:Georgia,"Times New Roman",serif; font-size:.77em; margin-inline:.06em; }
.boot-copy { color:var(--spell-muted); font-size:clamp(.95rem,2vw,1.18rem); line-height:1.55; max-width:38rem; }
.boot-requirement { color:var(--spell-dim); font:1rem/1.2 var(--spell-mono); }
.ritual-button { background:linear-gradient(135deg,rgba(165,255,157,.18),rgba(177,140,255,.14)); border-color:var(--spell-wire); box-shadow:0 0 1.5rem rgba(165,255,157,.12); min-width:min(100%,20rem); }

.workstation { background:radial-gradient(circle at 94% 4%,rgba(177,140,255,.12),transparent 22rem),radial-gradient(circle at 7% 100%,rgba(225,72,88,.08),transparent 28rem),var(--spell-void); display:grid; gap:var(--spell-gap); margin-inline:auto; max-width:1800px; min-height:100dvh; padding:clamp(.65rem,1.7vw,1.7rem); position:relative; }
.workstation::before { border:1px solid var(--spell-wire-dim); clip-path:polygon(0 0,27% 0,28% 7px,72% 7px,73% 0,100% 0,100% 100%,73% 100%,72% calc(100% - 7px),28% calc(100% - 7px),27% 100%,0 100%); content:""; inset:clamp(.35rem,.8vw,.8rem); pointer-events:none; position:fixed; z-index:0; }
.window-chrome,.panel,.status-strip { background:linear-gradient(138deg,rgba(45,36,47,.94),rgba(17,14,18,.96)); border:1px solid var(--spell-line); box-shadow:0 .75rem 2rem var(--spell-shadow),inset 0 1px rgba(255,255,255,.055); position:relative; z-index:1; }
.topbar { align-items:center; display:grid; gap:.7rem; grid-template-columns:auto minmax(10rem,1fr) auto auto; min-height:3.8rem; padding:.5rem .7rem; }
.home-link { color:var(--spell-wire); font:1.08rem/1 var(--spell-mono); text-decoration:none; white-space:nowrap; }
.wordmark-small { font-size:clamp(1.65rem,3.3vw,3rem); justify-self:start; }
.system-readout { align-items:center; color:var(--spell-muted); display:flex; font:1rem/1 var(--spell-mono); gap:.45rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.system-readout i { background:var(--spell-dim); border-radius:50%; box-shadow:0 0 .35rem currentColor; height:.5rem; width:.5rem; }
.system-readout[data-state="active"] i,.system-readout.active i { background:var(--spell-wire); box-shadow:0 0 .7rem var(--spell-wire); }
.transport { align-items:center; display:flex; flex-wrap:wrap; font:1rem/1 var(--spell-mono); gap:.35rem; justify-content:end; }
.transport label { align-items:center; color:var(--spell-muted); display:flex; gap:.25rem; }
.transport input { width:4.2rem; }.transport select { width:4.5rem; }.transport output { color:var(--spell-wire); min-width:4.3rem; text-align:right; }

.desktop-grid { display:grid; gap:var(--spell-gap); grid-template-columns:minmax(15rem,.85fr) minmax(27rem,1.65fr) minmax(16rem,.85fr); position:relative; z-index:1; }
.panel { min-width:0; overflow:hidden; }
.panel-title { align-items:baseline; border-bottom:1px solid var(--spell-line); display:flex; font:1rem/1 var(--spell-mono); gap:.55rem; justify-content:space-between; letter-spacing:.05em; padding:.62rem .75rem; text-transform:uppercase; }
.panel-title h2 { color:var(--spell-wire); font:inherit; font-size:1.08em; font-weight:400; margin:0; }.panel-title span { color:var(--spell-muted); font-size:.86em; text-align:right; }
.panel-footer { align-items:center; border-top:1px solid var(--spell-line); display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between; padding:.6rem .7rem; }
.panel-footer label,.control-stack label,.two-controls label { color:var(--spell-muted); display:grid; font: .9rem/1.1 var(--spell-mono); gap:.35rem; letter-spacing:.045em; text-transform:uppercase; }
.camera-stage { aspect-ratio:4/3; background:#050506; overflow:hidden; position:relative; }.camera-stage video,.camera-stage canvas { height:100%; inset:0; object-fit:cover; position:absolute; width:100%; }.camera-stage video { transform:scaleX(-1); }.camera-reticle { border:1px solid rgba(165,255,157,.62); box-shadow:inset 0 0 1.8rem rgba(165,255,157,.15); inset:.6rem; pointer-events:none; position:absolute; z-index:2; }.gesture-hud { align-items:end; bottom:.7rem; display:flex; font:1rem/1 var(--spell-mono); gap:.65rem; left:.75rem; position:absolute; text-shadow:1px 1px #000; z-index:3; }.gesture-hud output { color:var(--spell-wire); font-size:3rem; }.gesture-hud div { display:grid; gap:.25rem; }.gesture-hud meter { accent-color:var(--spell-wire); width:8rem; }.camera-message { background:rgba(0,0,0,.64); bottom:0; color:var(--spell-muted); font:.9rem/1.25 var(--spell-mono); margin:0; padding:.35rem .6rem; position:absolute; right:0; z-index:4; }
.camera-stage-home:empty { min-height:7rem; }.hand-diagnostics { background:linear-gradient(90deg,rgba(165,255,157,.055),rgba(177,140,255,.035)); border-block:1px solid var(--spell-line); font:var(--spell-mono); padding:.55rem .65rem; }.hand-diagnostics header,.hand-diagnostics footer { align-items:center; display:flex; font:.73rem/1 var(--spell-mono); justify-content:space-between; letter-spacing:.055em; text-transform:uppercase; }.hand-diagnostics h3 { color:var(--spell-wire); font:inherit; font-weight:400; margin:0; }.hand-diagnostics header output { color:var(--spell-amber); }.hand-diagnostics footer { border-top:1px solid rgba(239,230,208,.12); color:var(--spell-muted); margin-top:.48rem; padding-top:.45rem; }.hand-diagnostics footer output { color:var(--spell-bone); }.hand-diagnostic-grid { display:grid; gap:.25rem; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:.52rem; }.finger-diagnostic { align-items:center; border:1px solid rgba(239,230,208,.16); display:grid; gap:.22rem; grid-template-columns:auto 1fr; min-height:2.4rem; padding:.28rem; position:relative; }.finger-diagnostic i { background:var(--spell-dim); border-radius:50%; box-shadow:0 0 .25rem currentColor; grid-row:1 / span 2; height:.46rem; width:.46rem; }.finger-diagnostic span { color:var(--spell-muted); font:.64rem/1 var(--spell-mono); letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.finger-diagnostic output { color:var(--spell-bone); font:.82rem/1 var(--spell-mono); }.finger-diagnostic[data-state="active"],.finger-diagnostic[data-state="contact"] { border-color:var(--spell-wire); }.finger-diagnostic[data-state="active"] i { background:var(--spell-wire); box-shadow:0 0 .6rem var(--spell-wire); }.finger-diagnostic[data-state="contact"] { background:rgba(225,72,88,.11); border-color:var(--spell-blood); }.finger-diagnostic[data-state="contact"] i { background:var(--spell-blood); box-shadow:0 0 .7rem var(--spell-blood); }.hand-diagnostics[data-state="tracking"] #hand-diagnostic-status { color:var(--spell-wire); }.hand-diagnostics[data-state="contact"] #hand-diagnostic-status { color:var(--spell-blood); }

.visualizer-panel { display:grid; grid-template-rows:auto minmax(18rem,1fr) auto; min-height:28rem; position:relative; }.visualizer-panel canvas { display:block; height:100%; min-height:0; width:100%; }.visualizer-panel::after { background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.2) 4px 5px); content:""; inset:2.8rem 0 2.7rem; pointer-events:none; position:absolute; }.visualizer-typographics { color:rgba(239,230,208,.39); display:grid; font:clamp(.9rem,1.6vw,1.25rem)/1 var(--spell-mono); gap:.25rem; left:.7rem; letter-spacing:.06em; pointer-events:none; position:absolute; text-transform:uppercase; top:3.4rem; z-index:2; }.visualizer-typographics span:nth-child(2) { margin-left:1.7rem; opacity:.65; }.visualizer-typographics span:nth-child(3) { color:var(--spell-wire); margin-left:.65rem; opacity:.7; }.visualizer-controls { justify-content:flex-start; }.visualizer-controls button { min-width:4rem; }
.focused-editor-panel { align-self:start; grid-column:2; min-width:0; scroll-margin-top:.75rem; }.focused-roll-legend,.focused-editor-footer { color:var(--spell-muted); display:flex; font:.72rem/1 var(--spell-mono); justify-content:space-between; letter-spacing:.055em; padding:.42rem .65rem; text-transform:uppercase; }.focused-roll-legend { border-bottom:1px solid var(--spell-line); }.focused-editor-footer { align-items:center; border-top:1px solid var(--spell-line); color:var(--spell-wire); flex-wrap:wrap; gap:.45rem; }.focused-editor-controls { display:flex; gap:.25rem; margin-inline:auto; }.focused-editor-controls button { font-size:.72rem; min-height:1.7rem; padding:.2rem .4rem; }.focused-editor-controls #focused-clear { color:var(--spell-blood); }.focused-roll { background:linear-gradient(90deg,rgba(165,255,157,.025),transparent 18%,rgba(177,140,255,.025)); display:grid; min-height:15.75rem; }.focused-roll-row { display:grid; grid-template-columns:2.5rem minmax(0,1fr); min-height:1.75rem; }.focused-roll-key { align-items:center; background:rgba(239,230,208,.08); border:0; border-bottom:1px solid rgba(239,230,208,.1); border-right:1px solid var(--spell-line); color:var(--spell-wire); display:flex; font:1rem/1 var(--spell-mono); justify-content:center; min-height:0; padding:0; }.focused-roll-row.sharp .focused-roll-key { background:#08070a; color:var(--spell-violet); }.focused-roll-track { background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(239,230,208,.16) calc(12.5% - 1px) 12.5%),linear-gradient(90deg,rgba(165,255,157,.04),rgba(177,140,255,.025)); border-bottom:1px solid rgba(239,230,208,.1); min-width:0; overflow:hidden; position:relative; }.focused-roll-row:nth-child(odd) .focused-roll-track { background-color:rgba(0,0,0,.13); }.focused-roll-note { align-items:center; color:rgba(239,230,208,.24); display:flex; font:.7rem/1 var(--spell-mono); height:100%; left:.55rem; letter-spacing:.06em; pointer-events:none; position:absolute; text-transform:uppercase; }.focused-roll-playhead { background:var(--spell-blood); box-shadow:0 0 .45rem var(--spell-blood); height:100%; left:0; pointer-events:none; position:absolute; top:0; width:1px; z-index:3; }.focused-roll-event { background:var(--spell-violet); border:1px solid rgba(239,230,208,.45); box-shadow:0 0 .65rem rgba(177,140,255,.38); color:#09070c; cursor:ew-resize; font:.7rem/1 var(--spell-mono); height:1.12rem; min-width:.55rem; padding:0 .2rem; position:absolute; top:50%; transform:translateY(-50%); z-index:2; }.focused-roll-event[data-source="contact"] { background:var(--spell-wire); }.focused-roll-event:focus-visible { outline:2px solid var(--spell-amber); outline-offset:2px; }

.sound-panel { grid-column:3; grid-row:1 / span 2; padding-bottom:.75rem; }.control-stack { display:grid; gap:.7rem; padding:.75rem; }.two-controls { display:grid; gap:.55rem; grid-template-columns:1fr 1fr; }.mapping-grid { display:grid; gap:.3rem; grid-template-columns:repeat(3,minmax(0,1fr)); }.mapping-grid button { font-size:.9rem; min-height:2rem; padding:.2rem; }.mapping-grid button.held,.focused-roll-key.held { background:rgba(225,72,88,.2); border-color:var(--spell-blood); box-shadow:inset 0 0 .8rem rgba(225,72,88,.18),0 0 .55rem rgba(225,72,88,.28); color:var(--spell-bone); }.fader { align-items:center; display:grid; gap:.5rem; grid-template-columns:3rem minmax(0,1fr) 2.2rem; }.fader label,.fader output { color:var(--spell-muted); font:.88rem/1 var(--spell-mono); }.fader output { color:var(--spell-wire); text-align:right; }.secondary-button { border-color:rgba(177,140,255,.6); color:var(--spell-violet); }

.looper-panel { z-index:1; }.looper-panel .panel-title { gap:.8rem; }.looper-panel .panel-title button { margin-left:auto; }.timeline-ruler { background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(239,230,208,.18) calc(12.5% - 1px) 12.5%); border-bottom:1px solid var(--spell-line); height:1.3rem; margin-left:16rem; }.loop-lanes { display:grid; gap:1px; }.loop-lane { align-items:center; background:rgba(4,4,6,.35); border-bottom:1px solid var(--spell-line); display:grid; gap:.4rem; grid-template-columns:minmax(9rem,14rem) auto auto auto auto 4.4rem minmax(10rem,1fr) 5rem auto auto; padding:.42rem .55rem; }.loop-lane.active { background:rgba(177,140,255,.1); box-shadow:inset 0 0 0 2px var(--spell-violet),inset 5px 0 var(--spell-wire); position:relative; z-index:2; }.loop-lane.active .lane-select { color:var(--spell-wire); }.loop-lane:has(.lane-record[aria-pressed="true"]),.loop-lane.recording { box-shadow:inset 3px 0 var(--spell-blood); }.loop-lane.active.armed,.loop-lane.active.recording { box-shadow:inset 0 0 0 2px var(--spell-violet),inset 5px 0 var(--spell-blood); }.loop-lane.armed .lane-record { color:var(--spell-amber); }.loop-lane.recording .lane-record { background:rgba(225,72,88,.2); border-color:var(--spell-blood); color:var(--spell-blood); }.lane-select { align-items:baseline; display:grid; grid-template-columns:1.8rem 1fr; min-height:2.1rem; text-align:left; }.lane-select small { color:var(--spell-muted); grid-column:2; }.lane-number { color:var(--spell-violet); grid-row:1/3; }.lane-events { background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(239,230,208,.18) calc(12.5% - 1px) 12.5%),linear-gradient(90deg,rgba(165,255,157,.08),rgba(177,140,255,.04)); border:1px solid var(--spell-line); height:2rem; min-width:0; overflow:hidden; position:relative; }.lane-events:focus-visible { outline:2px solid var(--spell-amber); outline-offset:2px; }.lane-playhead { background:var(--spell-blood); box-shadow:0 0 .45rem var(--spell-blood); height:100%; left:0; position:absolute; top:0; width:1px; }.loop-event { background:var(--spell-violet); border:0; bottom:auto; color:#080709; font:.72rem/1 var(--spell-mono); height:1rem; min-height:0; min-width:.45rem; overflow:hidden; padding:0; position:absolute; transform:translateY(-50%); z-index:2; }.loop-event:focus-visible { outline:2px solid var(--spell-wire); outline-offset:1px; }.lane-length { color:var(--spell-muted); display:flex; font:.8rem/1 var(--spell-mono); gap:.2rem; }.lane-length select { min-height:1.7rem; padding:.1rem; width:2rem; }.lane-gain { min-width:0; }.lane-clear { color:var(--spell-blood); }
.status-strip { align-items:center; color:var(--spell-muted); display:flex; font:.9rem/1 var(--spell-mono); gap:.6rem; justify-content:space-between; letter-spacing:.03em; padding:.45rem .7rem; z-index:1; }.status-strip button { min-height:1.9rem; }

.calibration-dialog { background:transparent; border:0; color:var(--spell-bone); max-width:min(96vw,48rem); padding:0; }.calibration-dialog::backdrop { background:rgba(2,1,4,.82); backdrop-filter:blur(5px); }.calibration-card { background:linear-gradient(138deg,rgba(45,36,47,.98),rgba(17,14,18,.98)); border:1px solid var(--spell-wire-dim); box-shadow:0 1rem 3rem #000; display:grid; gap:.8rem; max-height:94dvh; overflow:auto; padding:clamp(1.1rem,4vw,2rem); position:relative; text-align:center; }.calibration-card h2 { font-family:var(--spell-stamp); letter-spacing:.04em; margin:0; }.calibration-card p:not(.eyebrow) { color:var(--spell-muted); line-height:1.45; margin:0; }.calibration-orientation { background:rgba(165,255,157,.07); border:1px solid var(--spell-wire-dim); color:var(--spell-wire)!important; font:.88rem/1.25 var(--spell-mono); letter-spacing:.05em; padding:.45rem; text-transform:uppercase; }.calibration-glyph { font-size:clamp(3.1rem,9vw,6rem); }.calibration-readout { align-items:center; display:flex; font:.9rem/1 var(--spell-mono); justify-content:space-between; text-transform:uppercase; }.calibration-readout strong { color:var(--spell-amber); }.calibration-readout strong[data-state="passed"] { color:var(--spell-wire); }.calibration-readout strong[data-state="failed"] { color:var(--spell-blood); }.calibration-checklist { display:grid; gap:.3rem; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; margin:0; padding:0; }.calibration-checklist button { font:.78rem/1 var(--spell-mono); min-height:2rem; overflow:hidden; padding:.25rem; text-overflow:ellipsis; white-space:nowrap; width:100%; }.calibration-checklist button[data-state="passed"] { border-color:var(--spell-wire); color:var(--spell-wire); }.calibration-checklist button[data-state="failed"] { border-color:var(--spell-blood); color:var(--spell-blood); }.calibration-checklist button[data-current="true"] { background:rgba(177,140,255,.16); outline:1px solid var(--spell-violet); }.dialog-close { position:absolute; right:.5rem; top:.5rem; }.calibration-actions { display:flex; gap:.6rem; justify-content:space-between; }.calibration-actions #calibration-reset { color:var(--spell-blood); margin-right:auto; }.calibration-card progress { accent-color:var(--spell-wire); width:100%; }
.calibration-camera-mount { aspect-ratio:16/7; background:repeating-linear-gradient(90deg,rgba(165,255,157,.04) 0 1px,transparent 1px 13%),repeating-linear-gradient(0deg,rgba(177,140,255,.05) 0 1px,transparent 1px 20%),#050506; border:1px solid var(--spell-wire-dim); box-shadow:inset 0 0 2.4rem rgba(165,255,157,.08); min-height:10rem; overflow:hidden; position:relative; }.calibration-camera-mount::before,.calibration-camera-mount::after { color:var(--spell-wire); content:"// CAL::CAM 01"; font:.66rem/1 var(--spell-mono); left:.45rem; letter-spacing:.05em; position:absolute; top:.4rem; z-index:4; }.calibration-camera-mount::after { content:"LOCAL SIGNAL"; left:auto; right:.45rem; }.calibration-mount-placeholder { align-items:center; color:var(--spell-muted)!important; display:flex; font:.82rem/1.35 var(--spell-mono); height:100%; justify-content:center; letter-spacing:.07em; margin:0!important; padding:1rem 3rem; position:absolute; text-align:center; text-transform:uppercase; width:100%; }.calibration-camera-mount:has(.camera-stage) .calibration-mount-placeholder { display:none; }.calibration-camera-mount .camera-stage { aspect-ratio:auto; height:100%; min-height:10rem; width:100%; }.calibration-camera-mount .camera-reticle { inset:.45rem; }
.calibration-diagnostic-mount:empty { display:none; }.calibration-diagnostic-mount .hand-diagnostics { border:1px solid var(--spell-line); }
.toast { background:var(--spell-panel-solid); border:1px solid var(--spell-wire); bottom:1rem; box-shadow:0 .6rem 1.8rem #000; color:var(--spell-bone); font:1rem/1.2 var(--spell-mono); left:50%; max-width:min(90vw,35rem); opacity:0; padding:.65rem .85rem; pointer-events:none; position:fixed; transform:translate(-50%,1rem); transition:opacity .18s ease,transform .18s ease; z-index:30; }.toast.visible,.toast.show,.toast[data-visible="true"] { opacity:1; transform:translate(-50%,0); }
.spell-hint { background:rgba(9,8,12,.98); border:1px solid var(--spell-wire); box-shadow:0 .45rem 1.5rem #000,0 0 1rem rgba(165,255,157,.12); color:var(--spell-bone); font:.86rem/1.3 var(--spell-mono); max-width:min(22rem,calc(100vw - 1.25rem)); padding:.5rem .6rem; pointer-events:none; position:fixed; text-transform:none; z-index:60; }.spell-hint[hidden] { display:none; }

@media (max-width:1100px) { .desktop-grid { grid-template-columns:minmax(15rem,.85fr) minmax(25rem,1.45fr); }.sound-panel { grid-column:1/-1; }.sound-panel .control-stack { grid-template-columns:repeat(3,minmax(0,1fr)); }.sound-panel .mapping-grid,.sound-panel .fader,.sound-panel .secondary-button { grid-column:span 1; }.timeline-ruler { margin-left:12rem; }.loop-lane { grid-template-columns:minmax(7rem,10rem) repeat(5,auto) 3.8rem minmax(8rem,1fr) 4rem auto; } }
@media (max-width:1100px) { .focused-editor-panel { grid-column:1/-1; }.sound-panel { grid-row:auto; } }
@media (max-width:760px) { .workstation { padding:.55rem; }.topbar { grid-template-columns:auto 1fr auto; }.topbar .transport { grid-column:1/-1; justify-content:space-between; }.system-readout { justify-self:end; }.desktop-grid { grid-template-columns:1fr; }.sound-panel .control-stack { grid-template-columns:1fr 1fr; }.sound-panel .control-stack > label:first-child,.sound-panel .mapping-grid,.sound-panel .secondary-button { grid-column:1/-1; }.visualizer-panel { min-height:52vw; }.timeline-ruler { display:none; }.loop-lane { grid-template-columns:minmax(7rem,1fr) repeat(5,auto); }.lane-length { grid-column:1; }.lane-events { grid-column:1/-1; grid-row:3; }.lane-gain { grid-column:1/6; grid-row:4; }.lane-clear { grid-column:6; grid-row:4; }.status-strip { align-items:start; flex-direction:column; }.wordmark-small { font-size:clamp(1.4rem,8vw,2.2rem); } }
@media (max-width:760px) { .focused-editor-panel { grid-column:auto; }.focused-roll { min-height:14.4rem; }.focused-roll-row { min-height:1.6rem; }.focused-roll-legend,.focused-editor-footer { font-size:.65rem; }.focused-roll-legend span:last-child { display:none; } }
@media (max-width:760px) { .hand-diagnostics { padding:.48rem; }.hand-diagnostics header { gap:.45rem; }.hand-diagnostics h3 { font-size:.66rem; }.hand-diagnostics header output,.hand-diagnostics footer { font-size:.63rem; }.finger-diagnostic { grid-template-columns:1fr; min-height:2.65rem; text-align:center; }.finger-diagnostic i { justify-self:center; }.finger-diagnostic span { font-size:.56rem; width:100%; }.finger-diagnostic output { font-size:.74rem; }.calibration-camera-mount { aspect-ratio:4/3; }.calibration-camera-mount .camera-stage { min-height:0; } }
@media (max-width:460px) { .transport label:nth-of-type(2),.transport output { display:none; }.sound-panel .control-stack { grid-template-columns:1fr; }.sound-panel .control-stack > * { grid-column:1/-1 !important; }.panel-title span { display:none; }.wordmark { font-size:clamp(2.55rem,15vw,4rem); }.boot-screen::before { inset:.65rem; }.calibration-checklist { grid-template-columns:repeat(3,minmax(0,1fr)); }.calibration-actions { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { .toast { transition:none; }.noise { display:none; } }
@media (forced-colors:active) { body,.workstation,.boot-screen { background:Canvas; color:CanvasText; }.window-chrome,.panel,.status-strip,.calibration-card { background:Canvas; border-color:CanvasText; box-shadow:none; }.wordmark,.panel-title h2,.eyebrow,.home-link { color:CanvasText; } }