.remix-page { --deck-accent: #435346; }
.remix-page main { max-width: 1280px; }
.remix-page button, .remix-page input, .remix-page select { font: inherit; }
.remix-page button { cursor: pointer; }
.remix-page button:disabled { cursor: default; opacity: .4; }
.remix-page input[type="range"] { width: 100%; margin: 0; min-height: 30px; accent-color: #596453; cursor: pointer; }
.remix-page .back-link { display: inline-flex; align-items: center; min-height: 28px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.remix-heading { padding: 26px 0 28px; }
.remix-heading h1 { font-size: 44px; }
.remix-heading p:last-child { margin-top: 8px; }
.remix-credit { text-align: right; font-size: 11px; color: var(--muted); }
.remix-credit span { font-size: 10px; }
.title-dot { color: var(--accent); }
.mix-workspace { padding-bottom: 10px; }
.mix-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; border-top: 1px solid var(--line); padding: 10px 0 0; }
.mix-toolbar > div { display: flex; align-items: center; gap: 4px; }
.mix-toolbar .small-label { margin-right: 14px; font-size: 10px; letter-spacing: .03em; }
.mix-toolbar button { min-height: 36px; padding: 0 12px; background: transparent; color: var(--muted); font-size: 11px; border: 1px solid transparent; border-radius: 2px; }
.mix-toolbar button[aria-pressed="true"] { border-color: #bcbeb3; color: var(--ink); background: #eeede6; }
.mix-toolbar #start-mix { color: var(--accent); }
.turntables { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.deck { min-width: 0; padding: 20px 20px 16px; background: linear-gradient(125deg, #e8e8e1 0%, #d9dbd3 38%, #e2e3dc 72%, #d8dad1 100%); border: 1px solid #bfc2b7; border-radius: 3px; box-shadow: inset 0 1px #ffffffbf, 0 5px 0 #b6b9ad, 0 6px 0 #949b8d, 0 13px 19px -12px #20291f40; }
.deck-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 9px; line-height: 1.3; letter-spacing: .13em; color: #51594d; }
.deck-name { display: flex; align-items: center; gap: 10px; }
.motor-dot { width: 4px; height: 4px; border-radius: 50%; background: #9a9f93; box-shadow: 0 0 0 1px #b2b6a8; }
.deck.is-playing .motor-dot { background: #516c47; box-shadow: 0 0 3px #839a65; }
.deck-bpm { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.deck-bpm output { font-size: 13px; margin-right: 5px; }
.deck-bpm small { font-size: 8px; }
.deck-track { margin: 15px 0 12px; min-height: 48px; }
.deck-title { font: 400 23px/1.2 Georgia, serif; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
.deck-subtitle { margin: 5px 0 0; color: #62695b; font-size: 9px; line-height: 1.4; letter-spacing: .03em; }
.turntable-bed { position: relative; padding: 3px 0 26px; }
.record-stage { position: relative; width: 94%; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline-offset: 5px; }
.record-stage[aria-disabled="true"] { cursor: default; }
.record-stage.is-touching { cursor: grabbing; }
.record-stage:focus-visible { outline: 2px solid #526047; }
.strobe-rim { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #b8bcb0 0deg 1deg, #50564c 1deg 2deg, #9ca294 2deg 3deg); border: 2px solid #7a8371; box-shadow: 0 0 0 1px #f5f5ec, 0 2px 4px #1c251e38; }
.strobe-rim::after { content: ''; position: absolute; inset: 5px; border: 1px solid #d3d6ca; border-radius: 50%; }
.platter { position: absolute; inset: 9px; border-radius: 50%; background: repeating-radial-gradient(circle, #20231f 0px, #20231f 1.4px, #292c26 1.6px, #22251f 2px, #22251f 3px); border: 1px solid #111910; box-shadow: inset 0 0 0 7px #20241e, inset 0 0 0 8px #35392f; pointer-events: none; }
.platter::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 15deg, #a2a79300, #dfe4d016 20deg, #ffffff00 58deg, #00000015 110deg, #ffffff05 165deg, #d1d5bf0d 200deg, #ffffff00 248deg, #00000020 300deg, #ffffff00); }
.record-label { position: absolute; inset: 36%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #d6d1bc; color: #363a2f; box-shadow: 0 0 0 1px #0003, inset 0 0 10px #0000000a; line-height: 1.3; }
#deck-B .record-label { background: #bfc8b6; }
.record-label small { font-size: clamp(4px, .5vw, 7px); letter-spacing: .15em; }
.record-label b { margin: 2px 0 11px; font: 400 clamp(16px, 2.8vw, 36px)/1 Georgia, serif; }
.record-label > span { font-size: clamp(4px, .45vw, 6px); letter-spacing: .07em; }
.spindle { position: absolute; inset: calc(50% - 3px); border-radius: 50%; background: radial-gradient(circle at 30% 20%, #fafbf1, #8c9482 65%, #3e4b32); box-shadow: 1px 2px 2px #0008; }
.record-marker { position: absolute; width: 3px; height: 20px; left: calc(50% - 1.5px); top: 10px; background: #d9d9bf; opacity: .8; }
.tonearm { position: absolute; right: -4px; top: -5px; width: 24%; height: 88%; pointer-events: none; filter: drop-shadow(2px 3px 2px #1b251f30); }
.speed-legend { position: absolute; bottom: 7px; left: 3px; font-size: 7px; letter-spacing: .1em; color: #697060; }
.speed-legend i { display: inline-block; width: 3px; height: 3px; background: #798d65; margin: 0 6px 1px; }
.waveform-wrap { position: relative; height: 32px; margin-top: 7px; background: #c6cbbc3b; border-block: 1px solid #bcc2b333; }
.waveform-wrap canvas { width: 100%; height: 100%; display: block; }
.waveform-wrap input { position: absolute; inset: 0; height: 100%; opacity: 0; }
.waveform-wrap:focus-within { outline: 1px solid #526047; outline-offset: 2px; }
.deck-time { display: flex; justify-content: space-between; gap: 8px; margin: 5px 0 14px; color: #535d4a; font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.deck-time [id^="vinyl-state"] { font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.transport { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 6px; }
.transport button { min-height: 38px; padding: 0 5px; border: 1px solid #a8afa0; border-radius: 2px; background: linear-gradient(#eeeee7,#d6d9ce); color: #46503d; box-shadow: inset 0 1px #fff9, 0 1px 1px #20291f12; font-size: 9px; letter-spacing: .04em; }
.transport .play-button { color: #26371e; font-size: 10px; }
.transport button[aria-pressed="true"] { border-color: #6f7d61; background: #bdc7ad; box-shadow: inset 0 1px 3px #25331b20; }
.deck-adjustments { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; padding-top: 17px; }
.deck-adjustments label { min-width: 0; font-size: 8px; color: #56604d; }
.control-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px; }
.control-title output { font-variant-numeric: tabular-nums; }
.deck-adjustments input[type="range"] { appearance: none; height: 28px; min-height: 28px; background: transparent; }
.deck-adjustments input::-webkit-slider-runnable-track { background: #939d872e; height: 2px; border-bottom: 1px solid #f0f1e7; }
.deck-adjustments input::-webkit-slider-thumb { appearance: none; width: 10px; height: 17px; margin-top: -8px; border: 1px solid #7e8972; border-radius: 1px; background: linear-gradient(90deg,#b6beaa,#f6f6ee 45%,#bac2af); box-shadow: 0 1px 2px #0002; }
.deck-adjustments input::-moz-range-track { background: #939d8770; height: 2px; }
.deck-adjustments input::-moz-range-thumb { width: 10px; height: 17px; border: 1px solid #7e8972; border-radius: 1px; background: #dce0d2; }
.center-mixer { --muted: #b7beb0; padding: 28px 18px 22px; margin: 0; min-width: 0; border: 1px solid #343e30; border-radius: 3px; background: linear-gradient(115deg,#3f483b,#343c31 55%,#3b4436); color: #e3e6da; display: flex; flex-direction: column; align-items: stretch; box-shadow: inset 0 1px #ffffff21, 0 5px #242e20, 0 6px #1b2517, 0 13px 19px -12px #20291f40; }
.mixer-brand { text-align: center; font-size: 16px; font-weight: 500; letter-spacing: .23em; line-height: 1.4; }
.mixer-brand span { display: block; font-size: 6px; letter-spacing: .15em; margin-top: 5px; color: #acb5a3; }
.level-meters { display: flex; gap: 18px; justify-content: center; margin: auto 0 25px; padding-top: 35px; }
.level-meters > div { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #c2c9b7; font-size: 8px; }
.level-meters i { position: relative; display: block; height: 102px; width: 8px; overflow: hidden; background: repeating-linear-gradient(to top,#707d642c 0 4px,transparent 4px 6px); }
.level-meters b { display: block; position: absolute; inset: 0; transform: translateY(100%); background: repeating-linear-gradient(to top,#a9bb7c 0 4px,transparent 4px 6px); }
.master-control { font-size: 8px; color: #c3caba; }
.master-control > span { display: flex; justify-content: space-between; }
.master-control input[type="range"] { accent-color: #c7cdbb; }
.crossfader-section { margin-top: auto; padding-top: 35px; }
.curve-options { display: flex; justify-content: center; gap: 0; }
.curve-options button { color: #9ea994; font-size: 9px; padding: 6px 10px; min-height: 30px; border: 1px solid #68735e; background: transparent; }
.curve-options button:first-child { border-radius: 2px 0 0 2px; }
.curve-options button:last-child { border-left: 0; border-radius: 0 2px 2px 0; }
.curve-options button[aria-pressed="true"] { color: #edf0e6; background: #56624b; }
.cut-in-control { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 8px; color: #b4bfa7; }
.cut-in-control select { padding: 3px; border: 0; background: #343e2f; color: #ccd3c0; font-size: 9px; border-radius: 2px; }
.fader-labels { display: flex; justify-content: space-between; gap: 5px; margin-top: 24px; color: #bdc6af; font-size: 7px; letter-spacing: .1em; }
.fader-slot { display: block; position: relative; margin-top: 6px; height: 66px; background: repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#89977c4a calc(12.5% - 1px),#89977c4a 12.5%) center 45px / 100% 6px no-repeat; }
.crossfader-control input[type="range"] { appearance: none; width: 100%; height: 66px; min-height: 66px; background: transparent; touch-action: none; }
.crossfader-control input::-webkit-slider-runnable-track { height: 5px; background: #1c2617; border-bottom: 1px solid #79876b; border-radius: 2px; }
.crossfader-control input::-webkit-slider-thumb { appearance: none; width: 20px; height: 35px; margin-top: -15px; border-radius: 2px; border: 1px solid #9aa58c; background: linear-gradient(90deg,#858f78,#e0e5d3 38%,#b3bda0 51%,#8c987c 55%,#c2ccb0 70%,#7f8d70); box-shadow: 1px 3px 4px #14200d80; }
.crossfader-control input::-moz-range-track { height: 5px; background: #1c2617; }
.crossfader-control input::-moz-range-thumb { width: 20px; height: 35px; border-radius: 2px; background: #c2ccb0; border: 1px solid #9aa58c; }
.cut-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.cut-pads button { min-height: 54px; touch-action: none; user-select: none; border: 1px solid #7a876b; border-radius: 2px; background: #435039; color: #e0e5d4; font-size: 9px; line-height: 1.5; }
.cut-pads button kbd { display: block; font: inherit; font-size: 8px; color: #aebb9d; }
.cut-pads button[aria-pressed="true"] { color: #26331d; background: #b8c79a; box-shadow: inset 0 2px 4px #23311750; }
.mixer-caption { text-align: center; margin: 9px 0 0; color: #b6c1a7; font-size: 7px; line-height: 1.5; }
.mix-hint { margin: 23px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.mix-hint kbd { border: 1px solid var(--line); border-radius: 2px; padding: 1px 4px; font: inherit; }
.mix-status { min-height: 23px; margin: 5px 0 30px; font-size: 11px; color: var(--accent); text-align: center; }
.mix-status.is-error { color: #963e32; }
.library-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; border-top: 1px solid var(--line); padding-top: 25px; }
.library-heading h2 { font: 400 25px/1.3 Georgia, serif; margin: 0; letter-spacing: -.02em; }
.library-heading p { font-size: 12px; color: var(--muted); margin: 8px 0 20px; }
.import-button { cursor: pointer; min-height: 44px; border: 0; background: transparent; color: var(--accent); font-size: 12px; white-space: nowrap; padding: 0; }
.track-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 100px 70px 90px; gap: 16px; align-items: center; padding: 10px 0; min-height: 65px; border-top: 1px solid var(--line); }
.track-number, .track-key, .track-bpm { color: var(--muted); font-size: 11px; }
.track-number { font-size: 10px; }
.track-name { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.track-genre { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.track-actions { display: flex; justify-content: end; gap: 6px; }
.track-actions button { width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); font-size: 11px; }
.track-actions button:hover, .track-actions button[aria-pressed="true"] { border-color: #7d8b6c; background: #e1e6d8; color: var(--accent); }
.library-note { font-size: 11px; color: var(--muted); margin: 18px 0 32px; }
.remix-notes { border-top: 1px solid var(--line); margin-bottom: 32px; padding: 18px 0; color: var(--muted); font-size: 12px; }
.remix-notes summary { cursor: pointer; color: var(--accent); }
.remix-notes p { max-width: 84ch; }
@media (max-width: 1000px) { .turntables { grid-template-columns: minmax(0,1fr) 160px minmax(0,1fr); gap: 9px; } .deck { padding: 16px 12px; } .center-mixer { padding-inline: 12px; } .deck-adjustments { gap: 10px; } .deck-title { font-size: 20px; } }
@media (max-width: 700px) {
  .remix-heading { padding-top: 20px; } .remix-heading h1 { font-size: 40px; } .remix-credit { font-size: 9px; } .remix-credit span { font-size: 8px; }
  .mix-toolbar { gap: 8px; flex-wrap: wrap; } .mix-toolbar .small-label { display: none; } .mix-toolbar button { padding-inline: 9px; font-size: 10px; }
  .turntables { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .deck { padding: 13px 10px; } .deck-track { min-height: 48px; margin-block: 12px 8px; } .deck-title { font-size: 17px; line-height: 1.3; } .deck-subtitle { font-size: 8px; } .deck-heading { font-size: 8px; letter-spacing: .08em; } .deck-bpm output { font-size: 10px; } .deck-bpm small { font-size: 6px; }
  .record-stage { width: 95%; } .platter { inset: 6px; } .strobe-rim::after { inset: 3px; } .record-label small { font-size: 3.5px; } .record-label b { font-size: 16px; margin-bottom: 8px; } .record-label > span { font-size: 3px; } .record-marker { width: 2px; height: 12px; top: 7px; } .speed-legend { font-size: 5px; }
  .deck-time { font-size: 8px; gap: 4px; } .deck-time [id^="vinyl-state"] { font-size: 6px; } .waveform-wrap { height: 28px; }
  .transport { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; } .transport .play-button { grid-column: 1 / -1; } .transport button { min-height: 36px; font-size: 8px; padding: 0 2px; }
  .deck-adjustments { grid-template-columns: 1fr 1fr; gap: 5px 10px; padding-top: 12px; } .deck-adjustments label:first-child { grid-column: 1 / -1; } .deck-adjustments input { min-height: 28px; }
  .center-mixer { grid-column: 1 / -1; grid-row: 2; padding: 12px; position: sticky; bottom: 8px; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 8px 20px; margin-top: 7px; box-shadow: 0 3px #242e20, 0 5px 12px #1b251730; }
  .mixer-brand, .level-meters, .mixer-caption { display: none; } .master-control { grid-column: 2; grid-row: 1; align-self: center; } .crossfader-section { display: contents; padding: 0; }
  .curve-options { grid-column: 1; grid-row: 1; justify-content: start; align-items: center; } .curve-options button { min-height: 24px; padding: 4px 12px; font-size: 9px; }
  .cut-in-control { display: none; } .crossfader-control { grid-column: 1; grid-row: 2; } .fader-labels { margin-top: 0; } .fader-slot, .crossfader-control input[type="range"] { height: 42px; min-height: 42px; } .fader-slot { background-position-y: 32px; }
  .cut-pads { grid-column: 2; grid-row: 2; gap: 4px; margin: 0; } .cut-pads button { min-height: 45px; font-size: 8px; } .cut-pads kbd { display: none !important; }
  .mix-hint { font-size: 10px; margin-top: 20px; } .track-row { grid-template-columns: 20px minmax(0,1fr) 48px 78px; gap: 9px; } .track-key { display: none; } .track-bpm { font-size: 10px; } .library-heading { gap: 16px; align-items: start; } .library-heading p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .platter { transition: none; } }
.mobile-deck-switch { display: none; }
@media (max-width: 700px) {
  .center-mixer { padding: 8px 12px; gap: 6px 20px; }
  .master-control input[type="range"] { min-height: 20px; height: 20px; }
  .fader-slot, .crossfader-control input[type="range"] { height: 34px; min-height: 34px; }
  .fader-slot { margin-top: 4px; background-position-y: 27px; }
  .fader-labels { font-size: 6px; }
  .cut-pads button { min-height: 42px; }
}
@media (max-width: 500px) {
  .mobile-deck-switch { display: flex; gap: 6px; margin: 0 0 12px; }
  .mobile-deck-switch button { flex: 1; padding: 8px 14px; min-height: 38px; color: var(--muted); font-size: 11px; border: 1px solid var(--line); background: transparent; border-radius: 2px; }
  .mobile-deck-switch button[aria-pressed="true"] { color: var(--accent); border-color: #869178; background: #e3e6da; }
  .turntables { grid-template-columns: minmax(0, 1fr); }
  .turntables[data-focus="A"] #deck-B, .turntables[data-focus="B"] #deck-A { display: none; }
  .deck { padding: 18px 16px; }
  .deck-title { font-size: 23px; } .deck-subtitle { font-size: 9px; } .deck-track { margin-block: 14px 10px; }
  .deck-heading { font-size: 9px; } .deck-bpm output { font-size: 12px; }
  .record-label small { font-size: 6px; } .record-label b { font-size: 28px; margin-bottom: 12px; } .record-label > span { font-size: 5px; }
  .platter { inset: 8px; } .strobe-rim::after { inset: 5px; } .record-marker { height: 17px; top: 9px; }
  .transport { grid-template-columns: 1.2fr repeat(3,minmax(0,1fr)); } .transport .play-button { grid-column: auto; }
  .deck-adjustments { grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; } .deck-adjustments label:first-child { grid-column: auto; }
  .center-mixer { grid-column: 1; }
}
/* The listening flow is primary; the performance controls remain available on request. */
.auto-set-panel { border-top: 1px solid var(--line); padding-top: 24px; margin-bottom: 28px; }
.set-drop { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 26px 28px; border: 1px dashed #b7beac; background: #e7e9df45; border-radius: 3px; }
.set-drop.is-over { outline: 2px solid var(--accent); background: #dce2ce; }
.set-drop .small-label { margin: 0 0 8px; font-size: 9px; letter-spacing: .14em; }
.set-drop h2 { margin: 0; font: 400 29px/1.25 Georgia,serif; letter-spacing: -.025em; }
.set-drop p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.has-set .set-drop { padding-block: 16px; }
.has-set .set-drop h2 { font-size: 23px; }
.has-set .set-drop :is(.small-label,p:last-child) { display: none; }
.set-file-actions { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; gap: 5px; }
.auto-set-panel button { min-height: 40px; border: 1px solid var(--line); background: transparent; padding: 8px 15px; color: var(--accent); border-radius: 2px; font-size: 12px; }
.auto-set-panel button.set-primary { background: #3f5339; border-color: #3f5339; color: #fcfaf6; }
.auto-set-panel button:disabled { opacity: .4; }
.set-file-actions #demo-set { font-size: 10px; border-color: transparent; }
.set-options { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; padding-top: 20px; font-size: 12px; }
.set-options label { display: inline-flex; align-items: center; gap: 12px; }
.set-options select { color: var(--accent); background: var(--paper); border: 1px solid var(--line); padding: 8px 28px 8px 10px; font-size: 12px; border-radius: 2px; }
.set-options .keep-order { color: var(--muted); gap: 7px; }
.keep-order input { accent-color: var(--accent); }
.set-duration-note { color: var(--muted); font-size: 10px; margin: 10px 0 8px; }
.auto-status { color: var(--accent); font-size: 12px; min-height: 20px; margin: 12px 0; }
.auto-status.is-error { color: #923e33; }
#analysis-progress { width: 100%; height: 4px; accent-color: var(--accent); }
.import-errors { font-size: 11px; color: #923e33; padding-left: 18px; margin: 0; }
.import-errors:empty { display: none; }
.auto-transport { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.auto-buttons { display: flex; gap: 6px; flex-shrink: 0; }
#auto-now { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.auto-deck-hint { margin: 14px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.manual-toggle { display: block; padding: 6px 10px; min-height: 32px; margin: 8px auto 24px; color: var(--muted); font-size: 10px !important; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.remix-page:not(.is-manual) .record-stage { pointer-events: none; }
.remix-page:not(.is-manual) #crossfader { opacity: 1; cursor: default; }
.remix-page:not(.is-manual) .deck { padding-bottom: 22px; }
.remix-page:not(.is-manual) .crossfader-section { padding-top: 18px; margin-bottom: 12px; }
.remix-page:not(.is-manual) .fader-labels { margin-top: 12px; }
.set-queue-section { padding: 22px 0 32px; border-top: 1px solid var(--line); }
.set-queue-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.set-queue-heading h2 { margin: 0; font: 400 27px/1.3 Georgia,serif; letter-spacing: -.02em; }
#set-summary { color: var(--muted); font-size: 12px; }
.set-queue { padding: 0; list-style: none; margin: 14px 0 0; }
.set-track { display: grid; grid-template-columns: 28px minmax(0,1fr) 100px 32px; gap: 18px; align-items: center; border-top: 1px solid var(--line); padding: 18px 10px 18px 0; }
.set-track.is-current { background: #dfe6d43d; }
.set-track.is-played { opacity: .65; }
.set-number { color: var(--muted); font-size: 10px; }
.set-track-copy { min-width: 0; }
.set-track-copy strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.set-track-copy > span { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.set-length-label { font-size: 9px; color: var(--muted); }
.set-length-label > span { display: block; margin-bottom: 3px; }
.set-length-label select { width: 100%; padding: 6px; color: var(--accent); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; font-size: 11px; }
.set-remove { border: 0; background: transparent; min-height: 40px; color: var(--muted); font-size: 19px !important; }
.set-join { margin: -4px 0 10px 46px; font-size: 10px; color: var(--accent); }
.set-analysis-note { margin: 20px 0 0; max-width: 90ch; font-size: 10px; color: var(--muted); }
@media (max-width:700px) { .set-drop { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; } .set-drop h2 { font-size: 25px; } .set-file-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .set-drop p:last-child { font-size: 12px; } .auto-transport { flex-direction: column; align-items: start; gap: 12px; } .auto-buttons button { padding-inline: 12px; } .set-queue-heading { display: block; } .set-track { grid-template-columns: 20px minmax(0,1fr) 74px 24px; gap: 9px; padding-block: 15px; } .set-track-copy strong { font-size: 13px; } .set-join { margin-left: 29px; } .remix-page:not(.is-manual) .center-mixer { position: static; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 15px 20px; gap: 20px; } .remix-page:not(.is-manual) .master-control { width: 95px; flex-shrink: 0; } .remix-page:not(.is-manual) .crossfader-section { display: block; padding: 0; margin: 0; flex: 1; order: -1; } .remix-page:not(.is-manual) .crossfader-control { display: block; } }