/* Adapted from CrateFlow v102 design tokens. Independent DJ application. */
:root{--bg:hsl(210 15% 5%);--panel:hsl(210 10% 7%);--a:hsl(39 88% 61%);--b:#dfc9a0;--accent:hsl(39 88% 61%);--primary:hsl(39 88% 61%)}
body{background:hsl(210 15% 5%);color:#fff}.topbar{background:#0e1114}.brand{color:#f3b844;font-size:24px}.deck{--accent:#f3b844!important;background:linear-gradient(145deg,#191b1e,#101214);border-top-color:#f3b844}.deck[data-deck="1"]{--accent:#dfc9a0!important;border-top-color:#dfc9a0}.next-guide,.primary-button{background:#f3b844;color:#211600;border-radius:9px;padding:10px 14px;font-weight:650}.next-guide{min-height:40px}.topactions{gap:8px}.guide-copy{font-size:16px;line-height:1.7;color:#c7c9cc;margin:22px 0}.preview-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;color:#aaa;font-size:11px}.preview-bar button,.preview-track{border:1px solid #515151;border-radius:7px;min-height:40px;padding:6px 10px;color:#f3b844}.preview-track{min-width:36px}.track-actions{gap:4px}.library-tabs button.active{color:#f3b844;border-color:#f3b844}.track-readiness.ready{color:#eac17b}
input[type=range]:not(#crossfader){writing-mode:vertical-lr;direction:rtl;appearance:auto!important;-webkit-appearance:auto!important;width:34px!important;height:110px!important;accent-color:#f3b844;touch-action:none}
.tempo-controls{justify-content:center;gap:12px}.eqs{display:flex;justify-content:space-around}.eq-control{display:flex;flex-direction:column;align-items:center;gap:8px}.master{display:flex!important;flex-direction:column;align-items:center;gap:5px}.master>div:first-child{display:flex;gap:8px}.mixer{grid-template-columns:1fr 2fr 65px}.master input{height:90px!important}.master .meter{width:55px}.brand-label{color:#a49b8b}.track-identity{min-width:0}
@media(max-width:700px){.brand{font-size:20px}.topbar{padding:0 13px}.record-button{padding:0 8px}.next-guide{padding:8px;font-size:11px}.tempo-controls{display:flex}.tempo-slider{height:75px!important}.mixer{grid-template-columns:1fr 65px}.crossfader-wrap{grid-column:1}.mix-mode{grid-column:1}.master{grid-column:2;grid-row:1/3}.platter-stage{max-width:138px}.deck{padding-left:9px;padding-right:9px}.track-actions{flex-wrap:wrap}.preview-track{width:100%;min-height:34px}.track-row{padding-top:10px;padding-bottom:10px}}
@media(min-width:640px) and (max-height:550px){.tempo-controls{position:absolute;right:5px;top:42px;width:34px;flex-direction:column}.tempo-controls input{height:90px!important}.deck{position:relative;padding-right:45px}.master input{height:45px!important}.mixer{grid-template-columns:160px 1fr 85px}.master{grid-column:auto;grid-row:auto}.platter-stage{max-width:120px}}
@media(max-width:700px){input.tempo-slider[type=range]{height:62px!important}.platter-stage{max-width:125px}.master input#master{height:72px!important}.mixer{padding-bottom:9px}.brand-label{display:none}}
@media(max-width:700px){body #decks input.tempo-slider[type=range]{height:62px!important}}
@media(min-width:640px) and (max-height:550px){body #decks input.tempo-slider[type=range]{height:70px!important}}
.next-guide{background:transparent;color:#e9bd68;border:1px solid #5b4930;min-height:32px;padding:5px 9px;font-size:11px;font-weight:500;border-radius:7px}.guide-copy{font-size:14px;line-height:1.6;margin:14px 0}.deck{box-shadow:none;background:#111417}.topbar{border-bottom:1px solid #ffffff12}.fader-scale{position:relative;display:flex;align-items:center;flex-direction:column;width:50px;flex:none}.fader-scale input{margin:0!important}.fader-neutral{position:absolute;left:3px;right:3px;top:calc(8px + (100% - 38px) * (1 - var(--neutral)));border-top:2px solid #f1bf63;pointer-events:none;z-index:2}.fader-reset{min-height:23px;padding:2px 3px;color:#e3c58c;font-size:9px;white-space:nowrap}.fader-scale.horizontal{width:100%;display:block}.horizontal .fader-neutral{left:50%;right:auto;top:6px;height:20px;border-top:0;border-left:1px solid #f1bf63}.horizontal .fader-reset{display:none}.filter-legend{font-size:8px;color:#bba77c;white-space:nowrap}.eq-control{gap:3px}.dj-faq details{border-bottom:1px solid #ffffff18;padding:12px 0}.dj-faq summary{cursor:pointer;color:#e9c782;font-size:14px}.dj-faq p{font-size:13px;line-height:1.6;color:#bfc3c7}.dj-faq a,.faq-link{color:#e6b85d;font-size:12px}.faq-link{min-height:40px}.library-footer{flex-wrap:wrap;gap:12px}
@media(max-width:700px){body #decks input.tempo-slider[type=range]{height:48px!important}.tempo-controls{gap:6px}.tempo-controls>.rate-label{display:none}.master input#master{height:57px!important}.master{gap:0}.master>div:first-child output{display:none}.platter-stage{max-width:120px}.eqs{gap:1px}.eq-control{min-width:0}.eq-control .fader-scale{width:30px}.eq-control input[type=range]{width:25px!important}.fader-neutral{left:0;right:0}}
/* Automix is the primary task, before the manual decks in document order. */
.automix-hero{border:1px solid #775c2b;border-radius:14px;background:linear-gradient(115deg,#282217,#131619 75%);padding:17px 19px;margin-bottom:18px}.hero-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-heading h1{font-size:24px;letter-spacing:-.7px;margin:4px 0 12px}.hero-heading .eyebrow{font-size:9px;letter-spacing:1.8px;color:#e9bc66}.hero-heading>button{color:#e1c18b;font-size:11px;border:1px solid #635032;border-radius:7px;min-height:38px;padding:6px 10px}.automix-hero .mix-mode{display:block;min-width:0}.automix-hero .mix-mode>.small-label{display:none}.automix-hero .transition-actions{display:flex;gap:9px;margin:0}.automix-hero .transition-button{background:#f2b747;color:#241903;font-size:15px;font-weight:700;min-height:48px;flex:1;border:0;border-radius:8px}.automix-hero .transition-button.active{background:#ead4aa}.automix-hero select{width:85px;max-width:none;min-height:48px;font-size:12px}.automix-hero .automix-line{position:static;margin-top:5px;justify-content:flex-start;font-size:10px;min-height:23px}.automix-hero .automix-line>span{flex:1}.automix-hero .automix-line button{min-height:28px;min-width:28px}.automix-hero #mix-readiness{margin:0;font-size:10px;color:#cfbd99}.studio-heading h2{font-size:12px;font-weight:400;color:#aeb3b9;margin:0}.mixer{grid-template-columns:1fr 65px}.mixer .crossfader-wrap{grid-column:1;grid-row:1}.mixer .master{grid-column:2;grid-row:1}.studio-heading{display:none}
@media(max-width:700px){main{padding-top:10px}.automix-hero{padding:12px;margin-bottom:12px}.hero-heading h1{font-size:20px;margin-bottom:9px}.hero-heading>button{font-size:9px;padding:5px;min-height:34px}.automix-hero .transition-button{font-size:14px}.automix-hero select{font-size:11px}.jog-mode-bar{margin-bottom:10px}.platter-stage{max-width:105px}.mixer{padding:9px 12px}.mixer .master{grid-row:1}.mixer .crossfader-wrap{grid-row:1}.deck{padding-top:9px}.deck-top{gap:5px}}
@media(min-width:640px) and (max-height:550px){.automix-hero{padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:3px 18px;margin-bottom:8px}.hero-heading h1{font-size:19px;margin:2px 0}.hero-heading>button{min-height:30px}.automix-hero .transition-button,.automix-hero select{min-height:38px}.automix-hero #mix-readiness{grid-column:1/3}.mixer{grid-template-columns:1fr 85px}}
@media(max-width:700px){.hero-heading{align-items:flex-start}.hero-heading h1{font-size:18px;max-width:215px}.hero-heading>button{max-width:86px;flex-shrink:0}}