:root { --ink:#181916; --paper:#f4f3ee; --panel:#fffefa; --line:#d9d7cf; --muted:#777870; --acid:#cdf04a; --green:#27b36a; --yellow:#d3df35; --orange:#ef7047; --red:#df4b43; --blue:#5d75d5; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { min-height:100vh; margin:0; background:radial-gradient(circle at 20% 0,#fff 0,var(--paper) 44%,#ebeae4 100%); color:var(--ink); font-family:Manrope,sans-serif; }
button,input,select { font:inherit; color:inherit; }
button,a,select,input[type="range"] { cursor:pointer; }
.topbar { height:64px;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4vw;padding:0 3vw;border-bottom:1px solid var(--line);background:rgba(255,254,250,.9);backdrop-filter:blur(18px); }
.brand { display:flex;align-items:center;gap:9px;color:var(--ink);font:800 13px Roboto Mono,monospace;letter-spacing:.08em;text-decoration:none;white-space:nowrap; }
.brand span,.brand-mark { width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:var(--ink);color:var(--acid); }
.brand i { color:var(--muted); font-style:normal; font-weight:500; }
.mode-nav { align-self:stretch;display:flex;align-items:stretch;gap:28px; }
.mode-nav a { display:grid;place-items:center;border-bottom:2px solid transparent;color:var(--muted);font:700 10px Roboto Mono,monospace;letter-spacing:.07em;text-decoration:none;text-transform:uppercase; }
.mode-nav a:hover,.mode-nav a.active { border-color:var(--orange);color:var(--ink); }
.midi-state { margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--muted); font:600 8px Roboto Mono,monospace; letter-spacing:.07em; }
.midi-state b { width:7px;height:7px;border-radius:50%;background:#aaa; }
.midi-state.connected b { background:var(--green);box-shadow:0 0 8px var(--green); }
.connect-button,.session-actions button,.audio-toggle { height:34px;border:1px solid var(--line);border-radius:8px;background:#faf9f5;padding:0 12px;font:700 8px Roboto Mono,monospace;letter-spacing:.05em; }
.connect-button:hover,.session-actions button:hover { border-color:var(--ink); }
main { max-width:1560px;margin:auto;padding:22px 2.5vw 30px; }
.session-head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px; }
.title-block small,.stage-header small,.last-hit-card small,.monitor small,.report small { color:var(--orange);font:700 8px Roboto Mono,monospace;letter-spacing:.13em; }
.title-block h1 { margin:3px 0 2px;font-size:clamp(24px,3vw,42px);letter-spacing:-.055em;line-height:1; }
.title-block p { margin:0;color:var(--muted);font:500 10px Roboto Mono,monospace; }
.session-actions { display:flex;align-items:center;gap:7px; }
.session-actions .start-button,.start-button { border-color:var(--ink);background:var(--ink);color:white;font-weight:800; }
.session-actions .start-button:hover,.start-button:hover { background:var(--orange);border-color:var(--orange); }
.session-actions button:disabled { opacity:.35;cursor:not-allowed; }
#timeReadout { min-width:67px;margin-left:5px;font:700 12px Roboto Mono,monospace; }
.control-strip { min-height:64px;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:13px 13px 0 0;background:rgba(255,254,250,.9); }
.exercise-setup { min-height:58px;display:flex;align-items:center;gap:14px;padding:9px 12px;border:1px solid var(--ink);border-bottom:0;border-radius:13px 13px 0 0;background:var(--ink);color:white; }
.exercise-setup:not([hidden]) + .control-strip { border-radius:0; }
.exercise-setup label { display:flex;align-items:center;gap:8px;color:#999a93;font:700 7px Roboto Mono,monospace;letter-spacing:.08em; }
.exercise-setup select,.exercise-setup input[type="number"] { height:34px;border:1px solid #4a4b46;border-radius:7px;background:#242520;color:white;padding:0 9px;font:700 9px Roboto Mono,monospace; }
.exercise-setup select { min-width:220px; }.exercise-setup input[type="number"] { width:55px;text-align:center; }
.exercise-bpm { flex:1;max-width:300px; }.exercise-bpm input[type="range"] { flex:1;accent-color:var(--acid); }
.exercise-setup>span { color:var(--acid);font:800 9px Roboto Mono,monospace;white-space:nowrap; }
.exercise-setup>small { margin-left:auto;color:#777871;font:600 7px Roboto Mono,monospace;text-align:right; }
.groove-open { min-width:300px;height:40px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:16px;border:1px solid #4a4b46;border-radius:8px;background:#242520;padding:5px 10px;color:white;text-align:left; }
.groove-open small { color:#8c8d85;font:700 6px Roboto Mono,monospace;letter-spacing:.1em; }.groove-open strong { color:var(--acid);font:800 10px Roboto Mono,monospace; }.groove-open b { grid-column:2;grid-row:1 / span 2;color:#8c8d85;font:700 7px Roboto Mono,monospace; }
.groove-open:hover { border-color:var(--acid); }
.view-toggle { display:flex;flex:0 0 auto;padding:3px;border-radius:9px;background:#ecebe5; }
.view-toggle button { height:35px;border:0;border-radius:7px;background:transparent;padding:0 10px;color:var(--muted);font:800 8px Roboto Mono,monospace;white-space:nowrap; }
.view-toggle button.active { background:var(--ink);color:var(--acid); }
.control-strip label { display:flex;align-items:center;gap:7px;color:var(--muted);font:700 7px Roboto Mono,monospace;letter-spacing:.07em;white-space:nowrap; }
.control-strip select { height:34px;border:1px solid var(--line);border-radius:7px;background:#f7f6f2;padding:0 24px 0 8px;font-size:9px; }
.range-control { flex:1;min-width:125px; }
.range-control input { width:100%;min-width:55px;accent-color:var(--orange); }
.range-control output { min-width:42px;color:var(--ink);font-size:8px; }
.audio-toggle.active { background:var(--acid);border-color:#b3d233; }
.metronome-toggle.active { background:var(--orange);border-color:var(--orange);color:white; }
.volume-control { max-width:75px; }
.volume-control input { width:100%;accent-color:var(--ink); }
.metronome-volume { max-width:105px; }
.metronome-volume output { min-width:29px;color:var(--ink);font-size:7px; }
.dashboard { display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:670px;border:1px solid var(--line);border-top:0;border-radius:0 0 17px 17px;overflow:hidden;box-shadow:0 18px 50px rgba(30,31,28,.08); }
.stage-card { min-width:0;display:grid;grid-template-rows:67px minmax(500px,1fr) 39px;background:#f9f8f4;border-right:1px solid var(--line); }
.stage-header { display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line); }
.stage-header strong { display:block;margin-top:3px;font:800 13px Roboto Mono,monospace; }
.lane-key { width:min(68%,650px);display:grid;grid-template-columns:repeat(5,1fr);color:var(--muted);font:700 8px Roboto Mono,monospace;text-align:center; }
.canvas-wrap { min-height:0;position:relative;overflow:hidden;background:linear-gradient(#fdfcf9,#f3f2ed); }
#practiceCanvas { position:absolute;inset:0;width:100%;height:100%; }
.practice-transcribe { position:absolute;inset:16px 24px 6px;display:flex;flex-direction:column;background:#11110f;border:1px solid #2d2e2a;border-radius:14px;color:#eeeae1;overflow:hidden; }
.transcribe-toolbar { height:44px;flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0 13px;border-bottom:1px solid #373733;font:9px Roboto Mono,monospace; }
.transcribe-toolbar button { width:28px;height:28px;border:1px solid #55534e;background:transparent;color:white; }
.transcribe-toolbar button:disabled { opacity:.25; }
.transcribe-toolbar strong { min-width:85px;color:var(--acid); }
.transcribe-toolbar span { margin-left:auto;color:#77746e; }
.transcribe-scroll { flex:1;overflow:auto;padding:16px; }
.transcribe-grid { --steps:64;min-width:900px;position:relative;cursor:ew-resize;touch-action:pan-y;user-select:none; }
.transcribe-counts,.transcribe-row { display:grid;grid-template-columns:78px repeat(var(--steps),minmax(12px,1fr)); }
.transcribe-counts { height:40px; }
.transcribe-counts>div { position:relative;border-left:1px solid #353531;padding:17px 0 0 4px;color:#77746e;font:8px Roboto Mono,monospace; }
.transcribe-counts>div.quarter { border-left-color:#8c8980;color:#d4d0c7;font-weight:700; }
.transcribe-counts>div.measure-start { border-left:2px solid var(--acid); }
.transcribe-counts .bar-tag { position:absolute;top:1px;left:4px;color:var(--acid);font-size:7px;white-space:nowrap; }
.transcribe-lane-label { display:flex;align-items:center;padding-left:10px;border-right:1px solid #4b4944;color:#aaa79e;font:700 9px Roboto Mono,monospace;transition:.08s; }
.transcribe-lane-label.hit { color:white;background:#32322e;box-shadow:inset 4px 0 0 var(--lane-color); }
.transcribe-row { height:58px;border-top:1px solid #2f2f2c; }
.transcribe-cell { display:grid;place-items:center;border-left:1px solid #292926;position:relative;transition:background .06s; }
.transcribe-cell.quarter { border-left-color:#625f59; }
.transcribe-cell.measure-start { border-left:2px solid var(--acid); }
.transcribe-cell.hit { background:color-mix(in srgb,var(--lane-color) 24%,transparent);box-shadow:inset 0 -3px 0 var(--lane-color),0 0 18px color-mix(in srgb,var(--lane-color) 45%,transparent); }
.transcribe-note { width:21px;height:21px;display:grid;place-items:center;border-radius:50%;color:#090908;font:800 10px Manrope,sans-serif;box-shadow:0 0 10px currentColor;transition:transform .06s,filter .06s; }
.transcribe-note.hit { transform:scale(1.55);filter:brightness(1.35);box-shadow:0 0 24px var(--lane-color);z-index:3; }
.transcribe-note.cymbal { background:var(--acid);transform:rotate(45deg); }
.transcribe-note.cymbal span { transform:rotate(-45deg); }
.transcribe-note.cymbal.hit { transform:rotate(45deg) scale(1.55); }
.transcribe-note.hihat { background:#f1efe7;border-radius:0;font-size:15px; }
.transcribe-note.snare { background:#5875db; }
.transcribe-note.tom { background:#b45cff; }
.transcribe-note.kick { width:27px;background:#ef6245; }
.transcribe-playhead { position:absolute;top:0;bottom:0;width:3px;background:#ff6038;box-shadow:0 0 10px #ff6038;pointer-events:none;z-index:4; }
.transcribe-playhead::before { content:"";position:absolute;top:-2px;left:50%;width:15px;height:15px;border-radius:50%;background:#ff6038;transform:translateX(-50%);box-shadow:0 0 14px #ff6038; }
.transpose-actual-layer { position:absolute;inset:0;z-index:3;pointer-events:none; }
.transpose-actual-hit { position:absolute;width:15px;height:15px;border:3px solid var(--hit-color);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px var(--hit-color); }
.transpose-actual-hit span { position:absolute;left:50%;bottom:17px;transform:translateX(-50%);padding:2px 4px;border-radius:3px;background:#11110f;color:var(--hit-color);font:800 7px Roboto Mono,monospace;white-space:nowrap; }
.groove-library { position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:radial-gradient(circle at 85% 0,#fff 0,var(--paper) 45%,#e8e7e0 100%); }
.groove-library>header { min-height:130px;display:flex;align-items:center;justify-content:space-between;padding:25px clamp(20px,4vw,65px);border-bottom:1px solid var(--line); }
.groove-library>header small { color:var(--orange);font:800 8px Roboto Mono,monospace;letter-spacing:.14em; }.groove-library>header h2 { margin:4px 0 0;font-size:clamp(34px,5vw,66px);letter-spacing:-.06em;line-height:.95; }.groove-library>header p { margin:8px 0 0;color:var(--muted);font-size:11px; }
.groove-library>header button { width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:var(--panel);font-size:29px;line-height:1; }.groove-library>header button:hover { border-color:var(--ink);transform:rotate(5deg); }
.groove-tools { min-height:77px;display:flex;align-items:center;gap:22px;padding:12px clamp(20px,4vw,65px);border-bottom:1px solid var(--line);background:rgba(255,254,250,.72); }
.groove-tools label { width:min(360px,35vw);display:flex;align-items:center;gap:10px; }.groove-tools label span { color:var(--muted);font:700 7px Roboto Mono,monospace; }.groove-tools input { width:100%;height:39px;border:1px solid var(--line);border-radius:8px;background:white;padding:0 12px;font:600 10px Roboto Mono,monospace;outline:none; }.groove-tools input:focus { border-color:var(--orange);box-shadow:0 0 0 3px rgba(239,112,71,.12); }
.groove-categories { display:flex;gap:5px;overflow:auto; }.groove-categories button { height:34px;border:1px solid var(--line);border-radius:18px;background:transparent;padding:0 12px;color:var(--muted);font:800 7px Roboto Mono,monospace;white-space:nowrap; }.groove-categories button.active { border-color:var(--ink);background:var(--ink);color:var(--acid); }
.groove-tools>strong { margin-left:auto;color:var(--muted);font:700 8px Roboto Mono,monospace;white-space:nowrap; }
.groove-results { flex:1;overflow:auto;padding:24px clamp(20px,4vw,65px) 55px; }
.groove-section { margin-bottom:34px; }.groove-section:last-child { margin-bottom:0; }
.groove-section>header { min-height:62px;display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:11px;border-bottom:1px solid var(--line); }.groove-section>header small { color:var(--orange);font:800 6px Roboto Mono,monospace;letter-spacing:.12em; }.groove-section>header h3 { display:inline-block;margin:3px 9px 0 0;font-size:21px;letter-spacing:-.035em; }.groove-section>header p { display:inline;color:var(--muted);font-size:9px; }.groove-section>header>strong { min-width:38px;height:30px;display:grid;place-items:center;border-radius:15px;background:var(--ink);color:var(--acid);font:800 9px Roboto Mono,monospace; }
.groove-section-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px; }
.groove-card { min-height:190px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:13px;background:rgba(255,254,250,.88);padding:17px;text-align:left;transition:transform .12s,border-color .12s,box-shadow .12s; }
.groove-card:hover { transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 27px rgba(25,26,23,.1); }.groove-card.active { border:2px solid var(--orange);padding:16px; }
.groove-card>header { display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:700 7px Roboto Mono,monospace;letter-spacing:.08em; }.groove-card>header b { color:var(--orange); }
.groove-card h3 { margin:17px 0 4px;font-size:19px;letter-spacing:-.035em; }.groove-card>p { margin:0;color:var(--muted);font:700 8px Roboto Mono,monospace; }
.groove-pattern { height:34px;display:grid;grid-template-columns:repeat(var(--preview-steps,16),1fr);align-items:end;gap:1px;margin-top:auto;padding-top:13px; }.groove-pattern i { min-width:1px;min-height:3px;border-radius:2px;background:#dddcd5; }.groove-pattern i.beat { background:#aaa9a2; }.groove-pattern i.bar-start { box-shadow:-1px 0 0 var(--ink); }.groove-pattern i.hit { height:17px;background:var(--orange); }.groove-pattern i.snare { height:11px;background:var(--blue); }.groove-pattern i.hihat { height:7px;background:#9eb52b; }
.groove-card>footer { display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font:700 7px Roboto Mono,monospace; }.groove-card>footer strong { color:var(--ink); }
.groove-empty { grid-column:1 / -1;padding:80px 20px;text-align:center;color:var(--muted); }
.canvas-empty { position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,252,.88);color:var(--muted);font:700 8px Roboto Mono,monospace;letter-spacing:.08em;pointer-events:none; }
.stage-footer { display:flex;align-items:center;gap:10px;padding:0 20px;color:var(--muted);font:600 7px Roboto Mono,monospace;letter-spacing:.08em; }
.stage-footer i { width:50px;height:2px;background:var(--orange); }
.hud { min-width:0;background:var(--panel);padding:14px;overflow:auto; }
.last-hit-card { padding:15px;border:1px solid var(--line);border-radius:11px;background:#f7f6f1; }
.last-hit-card strong { display:block;margin:7px 0 13px;font:800 16px Roboto Mono,monospace;letter-spacing:-.03em; }
.last-hit-card.perfect { border-color:var(--green); }.last-hit-card.good { border-color:var(--yellow); }.last-hit-card.early,.last-hit-card.late { border-color:var(--orange); }.last-hit-card.miss,.last-hit-card.extra { border-color:var(--red); }
.timing-bar { height:28px;position:relative;border-top:1px solid #c7c5bd; }
.timing-bar i { position:absolute;left:50%;top:-4px;width:1px;height:12px;background:var(--ink); }
.timing-bar b { position:absolute;left:50%;top:-5px;width:9px;height:9px;transform:translateX(-50%);border-radius:50%;background:var(--orange);transition:left .08s; }
.timing-bar span { position:absolute;top:12px;color:var(--muted);font:600 7px Roboto Mono,monospace; }.timing-bar span:nth-of-type(1){left:0}.timing-bar span:nth-of-type(2){left:50%;transform:translateX(-50%)}.timing-bar span:nth-of-type(3){right:0}
.score-grid { display:grid;grid-template-columns:repeat(2,1fr);margin-top:10px;border:1px solid var(--line);border-radius:11px;overflow:hidden; }
.score-grid>div { min-height:63px;padding:10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); }.score-grid>div:nth-child(2n){border-right:0}.score-grid>div:nth-last-child(-n+2){border-bottom:0}
.score-grid small { display:block;color:var(--muted);font:700 7px Roboto Mono,monospace;letter-spacing:.08em; }.score-grid strong { display:block;margin-top:3px;font:800 20px Roboto Mono,monospace; }.score-grid .primary-score strong { color:var(--orange);font-size:24px; }
.stat-line { display:flex;justify-content:space-between;padding:11px 3px;color:var(--muted);font:600 7px Roboto Mono,monospace; }.stat-line b { margin-left:4px;color:var(--ink); }
.monitor { padding:11px;border-radius:9px;background:var(--ink);color:white; }.monitor code { display:block;margin:6px 0 3px;color:var(--acid);font:600 9px Roboto Mono,monospace;white-space:normal; }.monitor span { color:#92938c;font:7px Roboto Mono,monospace; }
.hit-history { margin-top:10px;border:1px solid var(--line);border-radius:9px;overflow:hidden; }
.hit-history>header { height:29px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;background:#efeee9; }
.hit-history header small { color:var(--muted);font:700 7px Roboto Mono,monospace;letter-spacing:.08em; }
.hit-history header span { color:#aaa9a2;font:6px Roboto Mono,monospace; }
#hitHistory { max-height:145px;overflow:auto; }
#hitHistory>p { margin:0;padding:12px;color:var(--muted);font-size:9px; }
.history-hit { min-height:27px;display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:7px;padding:0 9px;border-top:1px solid var(--line);font:700 8px Roboto Mono,monospace; }
.history-hit:first-child { border-top:0; }
.history-hit b { color:var(--ink); }
.history-hit span { color:var(--muted); }
.history-hit em { font-style:normal; }
.history-hit.perfect em { color:var(--green); }.history-hit.good em { color:#9da800; }.history-hit.early em,.history-hit.late em { color:var(--orange); }.history-hit.extra em { color:var(--red); }
.instrument-panel { margin-top:10px;border:1px solid var(--line);border-radius:9px;overflow:hidden;font:600 8px Roboto Mono,monospace; }.instrument-panel header,.instrument-row { display:grid;grid-template-columns:1.45fr repeat(4,.55fr);align-items:center;min-height:29px;padding:0 9px;border-bottom:1px solid var(--line); }.instrument-panel header { color:var(--muted);background:#efeee9;font-size:6px; }.instrument-row:last-child { border-bottom:0; }.instrument-row span:not(:first-child),.instrument-panel header span:not(:first-child) { text-align:right; }
.keyboard-hint { margin:11px 2px 0;color:var(--muted);font:600 6px/1.5 Roboto Mono,monospace;letter-spacing:.06em; }
.empty-state { min-height:calc(100vh - 58px);display:grid;place-content:center;justify-items:center;padding:25px;text-align:center; }.empty-state small { margin-top:24px;color:var(--orange);font:700 8px Roboto Mono,monospace;letter-spacing:.12em; }.empty-state h1 { margin:7px 0;font-size:38px;letter-spacing:-.05em; }.empty-state p { color:var(--muted);font-size:13px; }.empty-state a { margin-top:20px;padding:12px 16px;border-radius:8px;background:var(--ink);color:white;text-decoration:none;font:700 9px Roboto Mono,monospace; }
.modal-backdrop { position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(23,24,22,.58);backdrop-filter:blur(8px); }
.report { width:min(760px,100%);max-height:90vh;overflow:auto;border-radius:18px;background:var(--panel);box-shadow:0 30px 90px rgba(0,0,0,.25); }.report>header { display:flex;justify-content:space-between;align-items:center;padding:22px 25px;border-bottom:1px solid var(--line); }.report h2 { margin:4px 0 0;font-size:28px;letter-spacing:-.05em; }.report>header button { border:0;background:transparent;font-size:27px; }.report-summary { display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line); }.report-summary div { padding:20px;border-right:1px solid var(--line); }.report-summary div:last-child{border:0}.report-summary small { display:block;color:var(--muted); }.report-summary strong { display:block;margin-top:5px;font:800 22px Roboto Mono,monospace; }.report-detail { display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:22px 25px; }.report h3 { margin:0 0 10px;color:var(--muted);font:700 8px Roboto Mono,monospace;letter-spacing:.1em; }.report-line { display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font:600 9px Roboto Mono,monospace; }.report-detail p { color:var(--muted);font-size:12px;line-height:1.6; }.report>footer { display:flex;align-items:center;gap:12px;padding:18px 25px;border-top:1px solid var(--line); }.report>footer button,.report>footer a { height:38px;display:flex;align-items:center;padding:0 14px;border-radius:8px;text-decoration:none;font:800 8px Roboto Mono,monospace; }.report>footer a { border:1px solid var(--line);color:var(--ink); }
@media (max-width:1300px) { .control-strip { flex-wrap:wrap; }.range-control { min-width:180px; } }
@media (max-width:1050px) { .exercise-setup { flex-wrap:wrap; }.exercise-setup>small { display:none; }.dashboard { grid-template-columns:1fr 310px; }.stage-card { min-height:610px; } }
@media (max-width:760px) { .topbar { gap:12px;padding:0 14px; }.brand i,.midi-state span { display:none; }.mode-nav { gap:10px; }.mode-nav a { font-size:7px;letter-spacing:.02em; }.connect-button { margin-left:auto;padding:0 8px; }.midi-state { display:none; }.session-head { align-items:flex-start;flex-direction:column; }.session-actions { width:100%;flex-wrap:wrap; }.session-actions button { flex:1; }.control-strip { border-radius:12px 12px 0 0; }.range-control { flex-basis:45%;min-width:140px; }.groove-library>header { min-height:105px; }.groove-tools { align-items:stretch;flex-direction:column;gap:9px; }.groove-tools label { width:100%; }.groove-tools>strong { position:absolute;right:20px;margin-top:51px; }.groove-section-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }.groove-section>header p { display:block;margin-top:4px; }.dashboard { display:block; }.stage-card { min-height:520px;border-right:0;border-bottom:1px solid var(--line);grid-template-rows:55px 430px 34px; }.lane-key { width:70%; }.hud { max-height:none; }.report-summary { grid-template-columns:1fr 1fr; }.report-summary div:nth-child(2){border-right:0}.report-summary div:nth-child(-n+2){border-bottom:1px solid var(--line)}.report-detail { grid-template-columns:1fr; } }
@media (max-width:450px) { main { padding:15px 10px; }.brand { font-size:0; }.brand span { font-size:11px; }.mode-nav { flex:1;justify-content:space-between; }.connect-button { font-size:0;width:35px;padding:0; }.connect-button::after { content:"MIDI";font-size:7px; }.title-block h1 { font-size:27px; }.groove-open { width:100%;min-width:0; }.exercise-bpm { max-width:none; }.exercise-setup>span { width:100%;overflow:hidden;text-overflow:ellipsis; }.control-strip { gap:8px; }.view-toggle { width:100%;display:grid;grid-template-columns:1fr 1fr; }.view-toggle button { padding:0 5px; }.range-control { flex-basis:100%; }.volume-control { max-width:none!important;flex:1!important; }.stage-card { min-height:460px;grid-template-rows:52px 375px 32px; }.stage-header { padding:0 10px; }.lane-key { width:73%;font-size:6px; }.groove-library>header p { display:none; }.groove-library>header button { width:40px;height:40px; }.groove-results { padding:14px; }.report-summary strong { font-size:17px; } }