/* Distribución inicial, con controles superiores e inferiores conservados. */
:root{--bg:#0c1116;--panel:#141c24;--line:#293844;--accent:#38e0d3;--muted:#a9bac5}
main{max-width:1280px;margin:auto;padding:0 24px 145px}
.hero{display:flex;justify-content:space-between;align-items:center;padding:30px 10px 24px;gap:24px}
.hero img{width:220px;height:220px;object-fit:contain;border-radius:26px;flex:0 0 220px}
.hero h1{font-size:clamp(34px,4.5vw,56px);line-height:1.07;letter-spacing:-.04em;margin:0}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p:last-child{max-width:480px;color:var(--muted);margin:16px 0 0}
.hero .eyebrow{letter-spacing:.16em;font-weight:800;margin-bottom:14px}
.classic-nav{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.classic-nav button{background:transparent;border-color:transparent}
.classic-nav .selected{background:#203937;color:var(--accent);border-color:#2a6862}
.classic-workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:20px;align-items:start}
#libraryDock{position:sticky;top:100px;max-height:calc(100dvh - 205px);overflow-y:auto;scrollbar-color:#49616a transparent;scrollbar-width:thin;scroll-margin-top:100px}
#libraryDock,.classic-mixer{background:var(--panel);border:1px solid var(--line);border-radius:18px;min-width:0}
#libraryDock>.panel{padding:22px}
.classic-mixer{padding:16px 22px 12px}
.mixerheading{padding:0 0 14px;flex-wrap:wrap;gap:8px}
.mixerheading button{border-radius:9px;font-size:12px}
#connection{font-size:10px}#timeline{display:none!important}
.track{display:block;min-height:0;padding:13px 0;border-bottom:1px solid var(--line)}
.trackcontrols{display:grid;grid-template-columns:minmax(240px,1.3fr) minmax(90px,1fr) 112px;gap:14px;align-items:center;padding:0}
.tracktop{gap:6px;min-width:0}.tracktop strong{font-size:12px;white-space:normal;line-height:1.3}
.tracktop button{width:auto;min-width:37px;min-height:34px;padding:6px 8px;font-size:11px;border-radius:8px}
.tracktop button:first-of-type{min-width:70px}
.tracktop button[aria-pressed=true]{background:#254440;color:var(--accent);border-color:#3b9c92}
.mutedtrack .tracktop strong{color:#94a3ae}
.trackvolume{margin:0;gap:6px}.trackvolume input{min-width:0;accent-color:var(--accent)}
.trackvolume output{font-size:10px;min-width:32px}
.panrow{gap:4px}.panrow input{width:51px;min-width:0}.panrow button{min-width:21px;margin-left:3px}
.metrorow{display:flex;justify-content:space-between;gap:14px;padding:15px 0;min-height:0}
.metrorow>div:first-child{display:flex;align-items:center;gap:6px;padding:0;flex:1;flex-wrap:wrap}
.metrovol{margin:0;display:flex;flex:1;min-width:100px;max-width:210px;gap:8px}
.metrobeats{display:none}.subdivision{flex-direction:row}.resetrow{padding:13px 0;flex-wrap:wrap}
.transport{background:#141c24f8}.studioheader{background:#0c1116f7}
@media(min-width:1000px) and (max-width:1190px){.classic-workspace{grid-template-columns:270px minmax(0,1fr);gap:16px}.classic-mixer{padding:16px}.trackcontrols{grid-template-columns:minmax(205px,1.2fr) minmax(70px,1fr) 95px;gap:8px}.tracktop strong{font-size:11px}.tracktop button{padding:5px;min-width:32px}.tracktop button:first-of-type{min-width:63px}.panrow input{width:39px}}
@media(max-width:999px){.classic-workspace{grid-template-columns:1fr}#libraryDock{display:none}.hero{padding:22px 0}.hero img{width:190px;height:190px;flex-basis:190px}.trackcontrols{grid-template-columns:minmax(230px,1.3fr) minmax(100px,1fr) 115px}}
@media(max-width:600px){main{padding:0 14px 150px}.hero{gap:12px;align-items:center}.hero h1{font-size:29px}.hero img{width:145px;height:145px;flex-basis:145px}.hero .eyebrow{font-size:8px;letter-spacing:.09em}.hero p:last-child{font-size:11px}.classic-nav{gap:3px}.classic-nav button{font-size:12px;padding:7px 9px;flex:1}.classic-mixer{padding:15px}.trackcontrols{grid-template-columns:minmax(0,1fr) 105px;gap:4px 10px}.tracktop{grid-column:1/-1}.tracktop strong{font-size:12px}.tracktop button{min-height:34px}.trackvolume{height:24px}.panrow{justify-content:end}.track{padding:10px 0}.metrorow{align-items:center;flex-wrap:wrap}.metrorow>div:first-child{gap:7px}.subdivision{flex-direction:row}.resetrow button{font-size:10px}}

.trackidentity{flex:1;min-width:0}.trackidentity strong{display:block}.trackevidence{display:block;font-size:9px;line-height:1.35;color:#9baeb7;margin-top:3px}.trackstate{color:#7cdacf}.mutedtrack .trackstate{color:#e2b276}

.dialwrap{display:flex;align-items:center;flex-direction:column;gap:10px}.speedrow{gap:12px;justify-content:center}.speeddial{--angle:-45deg;position:relative;width:156px;height:156px;border-radius:50%;border:9px solid #365451;background:radial-gradient(circle at 40% 30%,#354647,#152324 75%);box-shadow:0 5px 18px #0005,inset 0 0 0 2px #527772;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.speeddial.dragging{cursor:grabbing;border-color:#69d3c6}.dialmarker{position:absolute;inset:0;transform:rotate(var(--angle));pointer-events:none}.dialmarker:before{content:'';position:absolute;left:calc(50% - 3px);top:5px;width:6px;height:21px;border-radius:6px;background:#7fe9d6;box-shadow:0 0 8px #56d5d466}.dialnumber{font-size:27px;font-weight:700;pointer-events:none}.dialcaption{font-size:9px;letter-spacing:.12em;color:#a3c3bd;pointer-events:none}.dialwrap #speedValue{font-size:12px;color:#afc3c0}.reset-speed{display:block;width:100%;margin:18px 0 12px;border-color:#44726a;color:#b2eee4;background:#203b36;min-height:44px}#tempoPanel .speedrow>button{height:48px;min-width:48px}#tempoPanel .panel{padding-top:12px}@media(max-width:600px){.speeddial{width:142px;height:142px}#tempoPanel .panel{padding:15px}#tempoPanel .speedrow{padding:10px 0}}

.subdivision{display:none}#metroShortcut{font-size:12px}#metroShortcut.active{background:#2a5f56;color:#bff5e9;border-color:#5bb4a2}@media(max-width:800px){#metroShortcut{font-size:11px;padding:7px}}

.mutedtrack .trackidentity strong{color:#ff8d99;text-decoration:line-through;text-decoration-thickness:2px}.mutedtrack .trackidentity strong::before{content:'⊘ ';display:inline-block;text-decoration:none;color:#ff8d99}.mutedtrack .trackstate{color:#ff9aa4}.tracktop button:first-of-type[aria-pressed=true]{background:#512a34;border-color:#c56777;color:#ffc1ca}