:root{--ink:#06090a;--panel:#0b1214;--panel2:#101a1d;--line:#26383c;--muted:#8aa0a4;--paper:#efffff;--teal:#5ce1df;--teal2:#087f72;--red:#ff5b53;--gold:#f6c351;--font:"Arial Narrow",Arial,sans-serif}*{box-sizing:border-box}html{background:var(--ink);color-scheme:dark}body{margin:0;color:var(--paper);background:radial-gradient(circle at 50% -20%,#15353b 0,transparent 34%),var(--ink);font-family:var(--font);font-size:16px}button,input{font:inherit}button,.button{cursor:pointer}.topbar{height:72px;display:flex;align-items:center;gap:30px;padding:0 clamp(16px,3vw,42px);border-bottom:1px solid var(--line);background:#06090aeb;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.brand{color:var(--paper);font-size:28px;font-weight:1000;letter-spacing:-.06em;text-decoration:none}.brand span{color:var(--teal)}.room-title{display:flex;align-items:baseline;gap:12px}.room-title strong{font-size:13px;letter-spacing:.18em}.room-title span,.autosave{font-size:10px;letter-spacing:.13em;color:var(--muted)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.autosave{margin-right:8px}.autosave i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}.button{min-height:39px;padding:0 15px;border:1px solid var(--line);background:var(--panel2);color:var(--paper);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.button.ghost{background:transparent}.button.record{border-color:#6b2d2a;background:#25100f}.record-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--red)}main{max-width:1900px;margin:auto}.workspace{display:grid;grid-template-columns:minmax(330px,1fr) 250px minmax(330px,1fr);gap:1px;padding:clamp(10px,2vw,24px);background:var(--line)}.deck,.mixer{background:linear-gradient(145deg,#10181a,#080d0f);border:1px solid #0d1112;padding:clamp(18px,2vw,30px);box-shadow:inset 0 1px #ffffff0a}.deck-head,.time-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:800 10px/1 monospace;letter-spacing:.14em}.deck-state{color:var(--teal)}.deck-b .deck-state{color:#62767a}.track-title{margin:22px 0 20px}.track-title small,.eyebrow{color:var(--teal);font:900 10px/1 var(--font);letter-spacing:.18em}.track-title h1{height:62px;margin:7px 0 0;font:italic clamp(25px,2.4vw,42px)/.98 Georgia,serif;letter-spacing:-.04em}.track-title em{color:var(--red);font-weight:400}.waveform{height:82px;position:relative;overflow:hidden;border-block:1px solid #203438;background:linear-gradient(90deg,#0b1315,#101c1f)}.wave-bars{height:100%;display:flex;align-items:center;gap:2px;padding:8px 0;transform-origin:left center}.wave-bars i{flex:1;min-width:2px;background:var(--teal);opacity:.7}.waveform-b .wave-bars i{background:var(--red)}.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--paper);box-shadow:0 0 8px #fff}.time-row{padding:9px 0 0}.deck-body{display:grid;grid-template-columns:190px 1fr;gap:clamp(18px,3vw,36px);align-items:center;margin-top:20px}.platter-wrap{display:grid;grid-template-columns:1fr 1fr;gap:9px}.platter{grid-column:1/-1;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#0e1719 0 12%,#172124 13% 15%,#080c0d 16% 100%);border:8px solid #152125;box-shadow:0 0 0 1px #39464a,inset 0 0 20px #000,0 15px 30px #0008}.platter.playing{animation:spin 2.1s linear infinite}.vinyl-lines{position:absolute;inset:7%;border-radius:50%;background:repeating-radial-gradient(circle,#0000 0 4px,#ffffff0b 5px 6px)}.record-label{width:37%;aspect-ratio:1;display:grid;place-items:center;text-align:center;border-radius:50%;z-index:1;background:var(--teal2);color:#03100f;font-size:12px;font-weight:1000;line-height:.8;letter-spacing:-.05em}.deck-b .record-label{background:var(--red);color:#220604}.record-label span{font-size:22px}.platter>i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;top:10%;left:50%}.cue,.play,.sync,.hot-cues button{min-height:37px;border:1px solid #385157;background:#111d20;color:var(--paper);font-size:11px;font-weight:900}.play{background:var(--paper);color:var(--ink);font-size:16px}.performance{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}.bpm span,.pitch,.crossfader{display:block;color:var(--muted);font:800 9px/1 var(--font);letter-spacing:.15em}.bpm strong{display:block;margin-top:5px;color:var(--paper);font:32px/1 monospace}.pitch{grid-column:1/-1}.pitch output{float:right;color:var(--teal);font-family:monospace}.pitch input,.crossfader input{width:100%;margin-top:12px;accent-color:var(--teal)}.sync{color:var(--teal);border-color:#2e6766}.hot-cues{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.hot-cues button.active{border-color:var(--gold);color:var(--gold);background:#30270f}.mixer{padding-inline:18px}.mixer-brand{text-align:center;font-size:14px;font-weight:900;letter-spacing:.14em}.mixer-brand strong{color:var(--teal)}.meters{height:44px;margin:18px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end}.meters i{height:var(--meter,20%);background:var(--teal);opacity:.75}.meters i:nth-last-child(-n+3){background:var(--gold)}.meters i:last-child{background:var(--red)}.channels{display:grid;grid-template-columns:1fr 1fr;gap:14px}.channel{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.channel label{display:grid;justify-items:center;gap:8px;color:var(--muted);font-size:9px;font-weight:900}.vertical{appearance:slider-vertical;width:30px;height:88px;accent-color:var(--teal)}.channel .volume{grid-column:1/-1;margin-top:8px;color:var(--paper)}.channel .volume .vertical{height:105px}.crossfader{margin-top:22px}.crossfader span{display:flex;justify-content:space-between;margin-top:5px;color:var(--paper)}.browser{margin:0 clamp(10px,2vw,24px) 30px;border:1px solid var(--line);background:#0a1012}.browser-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:26px;border-bottom:1px solid var(--line)}.browser h2{margin:8px 0 0;font:italic clamp(30px,4vw,52px)/.9 Georgia,serif}.crate-actions{display:flex;gap:10px}.search{min-width:min(360px,34vw);height:43px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid var(--line);background:#070c0d}.search span{color:var(--teal);font-size:22px}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--paper);font-size:14px}.add-record{display:flex;align-items:center;border-color:var(--teal);background:var(--teal);color:var(--ink)}.crate-layout{display:grid;grid-template-columns:230px 1fr;min-height:290px}.crate-nav{padding:14px;border-right:1px solid var(--line)}.crate-nav>button{width:100%;display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:12px;border:0;background:transparent;color:var(--muted);text-align:left;font-size:13px}.crate-nav>button.active{background:#132326;color:var(--paper)}.crate-nav>button.active span{color:var(--teal)}.crate-nav b{font:11px monospace}.set-box{margin-top:22px;padding:16px;border:1px solid var(--line);background:#10191b}.set-box span{display:block;color:var(--muted);font-size:9px;letter-spacing:.15em}.set-box strong{display:block;margin:6px 0 14px;font-size:14px}.set-box button{padding:0;border:0;background:transparent;color:var(--teal);font-size:11px;font-weight:900;text-transform:uppercase}.track-table{overflow-x:auto}.track-row{min-width:660px;display:grid;grid-template-columns:42px minmax(240px,1fr) 70px 60px 70px 200px;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #1d2c2f}.track-header{color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.track-row:not(.track-header):hover{background:#101b1e}.track-no{font:12px monospace;color:var(--muted)}.record-meta{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px}.record-cover{width:42px;aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle,var(--teal) 0 11%,#10191b 12% 30%,#020303 31%);border:1px solid #34474a;border-radius:3px;color:transparent}.record-name strong{display:block;font-size:14px}.record-name small{display:block;margin-top:3px;color:var(--muted);font-size:11px}.track-stat{font:12px monospace;color:#b7c8ca}.load-actions{display:flex;justify-content:flex-end;gap:7px}.load-actions button{min-height:31px;padding:0 10px;border:1px solid #31474b;background:transparent;color:var(--paper);font-size:10px;font-weight:900}.load-actions button:hover{border-color:var(--teal);color:var(--teal)}.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translate(-50%,30px);padding:12px 18px;border:1px solid var(--teal);background:#0b1719;color:var(--paper);font-size:13px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(540px,calc(100% - 30px));padding:0;border:1px solid #6b2d2a;background:#0b1113;color:var(--paper);box-shadow:0 30px 100px #000}dialog::backdrop{background:#020506e8;backdrop-filter:blur(8px)}.recording-card{padding:30px}.recording-card h2{margin:10px 0;font:italic 42px/1 Georgia,serif}.recording-card p{color:var(--muted);line-height:1.5}.recording-clock{display:flex;align-items:center;gap:12px;margin:28px 0;padding:17px;border:1px solid #392321;background:#190e0e}.recording-clock i{width:12px;height:12px;border-radius:50%;background:var(--red);animation:pulse 1s infinite}.recording-clock strong{font:28px monospace}.dialog-actions,#recording-result{display:flex;align-items:center;flex-wrap:wrap;gap:10px}#mix-preview{width:100%;margin-bottom:10px}.download{display:flex;align-items:center;text-decoration:none;background:var(--teal);color:var(--ink)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.25}}@media(max-width:1100px){.workspace{grid-template-columns:1fr 1fr}.mixer{grid-column:1/-1;grid-row:2}.channels{max-width:500px;margin:auto}.crossfader{max-width:500px;margin:24px auto 0}.meters{max-width:500px;margin-inline:auto}.crate-layout{grid-template-columns:190px 1fr}}@media(max-width:720px){.topbar{height:auto;min-height:64px;padding-block:11px}.room-title,.autosave,.button.ghost#reset-session{display:none}.workspace{grid-template-columns:1fr}.mixer{grid-row:auto}.deck-body{grid-template-columns:150px 1fr}.browser-head{display:block}.crate-actions{margin-top:20px}.search{min-width:0;flex:1}.crate-layout{grid-template-columns:1fr}.crate-nav{display:flex;gap:5px;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.crate-nav>button{width:auto;min-width:max-content;grid-template-columns:18px 1fr auto}.set-box{display:none}.track-row{grid-template-columns:32px minmax(190px,1fr) 52px 45px 58px 160px}.header-actions{gap:0}}@media(max-width:470px){.deck-body{grid-template-columns:1fr}.platter-wrap{width:180px;margin:auto}.performance{grid-template-columns:1fr 1fr}.browser-head{padding:20px}.crate-actions{display:grid}.search{width:100%}.workspace{padding:8px}.deck{padding:18px}.topbar{padding-inline:14px}}