/* Naadova sound room v3: white, simple, music-player layout.
   Sidebar (where to go) · main (choose) · now playing (what is happening) · player bar (control). */
:root{--bg:#FFFFFF;--soft:#F6F3EE;--soft2:#EFEAE1;--line:#E8E1D6;--ink:#171310;--ink2:#4A4239;--mute:#8A8174;--gold:#A27A3E;--gold2:#C9A35E;--goldbg:#FBF4E6;--side:248px;--np:340px;--bar:92px;--bone:#171310;--smoke:#8A8174;--card:#fff;--card-ink:#171310;--amber:#C9A35E}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);overflow:hidden;font-weight:400}
::selection{background:var(--gold2);color:#000}
button{font:inherit;cursor:pointer}
.kick{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 6px}
.small{font-size:.84rem;color:var(--mute)}
.empty{color:var(--mute);font-size:.9rem;margin:6px 0}
.lnk{border:0;background:none;color:var(--gold);font-weight:500;font-size:.9rem;padding:0}
.lnk:hover{text-decoration:underline}
.x{border:1px solid var(--line);background:#fff;border-radius:999px;width:36px;height:36px;display:grid;place-items:center;color:var(--ink2);padding:0}
.x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:12px 20px;font-weight:500}
.btn svg{width:16px;height:16px}
.btn:hover{background:#000}
.btn.line{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* layout */
.side{position:fixed;left:0;top:0;bottom:var(--bar);width:var(--side);background:var(--soft);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px;z-index:30;overflow-y:auto}
.main{position:fixed;left:var(--side);right:var(--np);top:0;bottom:var(--bar);display:flex;flex-direction:column;min-width:0}
body.np-off .main{right:0}
body.np-off .np{display:none}
.deck{flex:1;overflow-y:auto;padding:8px clamp(18px,3vw,40px) 40px;scrollbar-width:thin;scrollbar-color:#D8CFC0 transparent}
.np{position:fixed;right:0;top:0;bottom:var(--bar);width:var(--np);border-left:1px solid var(--line);background:#fff;overflow-y:auto;padding:18px 18px 28px;z-index:25;display:flex;flex-direction:column;gap:14px}

/* sidebar */
.side-logo{display:block;padding:6px 10px 18px}.side-logo img{height:24px;width:auto}
.tabs.side-nav{display:flex!important;flex-direction:column;gap:2px;border:0;margin:0;padding:0;overflow:visible}
body.simple .tabs.side-nav{display:flex!important}
.side-h{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:16px 10px 6px;font-weight:600}
.side-nav button{display:flex!important;align-items:center;gap:12px;width:100%;min-width:0;border:0!important;background:none!important;box-shadow:none!important;padding:10px 12px!important;border-radius:12px;color:var(--ink2)!important;font-size:.95rem;text-align:left;flex-direction:row!important}
.side-nav button::before{display:none!important}
.side-nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side-nav button:hover{background:#fff!important;color:var(--ink)!important}
.side-nav button[aria-selected="true"]{background:#fff!important;color:var(--ink)!important;font-weight:600;box-shadow:0 1px 3px rgba(23,19,16,.08)!important}
.side-nav button[aria-selected="true"] svg{color:var(--gold)}
.side-foot{margin-top:auto;padding-top:16px}
.modes{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.modes button{flex:1;border:0;background:none;padding:8px 10px;border-radius:999px;font-size:.88rem;color:var(--ink2)}
.modes button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:500}
.side-note{font-size:.78rem;color:var(--mute);margin:8px 6px 0;line-height:1.4}
body.simple .studio-only{display:none!important}

/* top bar */
.topbar{position:static;height:auto;background:#fff;border:0;display:flex;align-items:center;gap:12px;padding:16px clamp(18px,3vw,40px) 10px}
.search{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid transparent;border-radius:999px;padding:0 18px;height:46px}
.search:focus-within{border-color:var(--gold2);background:#fff}
.search svg{width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:1.8}
.search input{flex:1;border:0;background:none;outline:0;font:inherit;font-size:.95rem;color:var(--ink);min-width:0}
.tb-r{margin-left:auto;display:flex;gap:8px}
.tb-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:.9rem;white-space:nowrap}
.tb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.tb-btn:hover{border-color:var(--gold2)}
.tb-ic{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:none;place-items:center;padding:0}
.tb-ic svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}

/* home */
.panel{padding-top:6px}
.howto{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;background:var(--goldbg);border:1px solid #EADCC2;border-radius:18px;padding:16px 18px;margin:6px 0 18px}
.howto[hidden]{display:none}
.howto ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.howto li{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;color:var(--ink2);max-width:320px}
.howto li b{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.78rem;flex:none}
.howto .x{font-size:1.2rem;line-height:1}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);line-height:1;margin:0}
.hero p{color:var(--ink2);margin:8px 0 0}
.rowh{font-family:var(--sans);font-weight:600;font-size:1.25rem;margin:22px 0 12px;color:var(--ink)}
.rowh-w{display:flex;justify-content:space-between;align-items:center;gap:12px}.rowh-w .rowh{margin-bottom:12px}
.subh{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.moods{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.mood{position:relative;overflow:hidden;border:0;border-radius:18px;min-height:112px;padding:16px;text-align:left;color:#fff;background:linear-gradient(135deg,var(--a),var(--b));display:flex;flex-direction:column;justify-content:flex-end;gap:2px;transition:transform .2s,box-shadow .2s}
.mood svg{position:absolute;right:12px;top:12px;width:34px;height:34px;fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mood::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.1)}
.mood b{font-size:1.08rem;font-weight:600;position:relative;z-index:1}
.mood small{font-size:.76rem;opacity:.85;position:relative;z-index:1}
.mood:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px var(--a)}
.mood.on{outline:3px solid var(--ink);outline-offset:2px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,210px);gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scroll-snap-type:x proximity}
.rail.wrapr{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));grid-auto-columns:auto;overflow:visible}
.jc{scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;min-width:0}
.jc-im{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;border:0;padding:0;background:var(--soft2)}
.jc-im img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.jc:hover .jc-im img{transform:scale(1.05)}
.jc-len{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;border-radius:999px;padding:3px 9px}
.pbtn{position:absolute;right:10px;bottom:10px;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.45);transform:translateY(6px);opacity:0;transition:all .2s}
.pbtn svg{width:20px;height:20px}
.jc:hover .pbtn,.jc.on .pbtn,.journey:hover .pbtn,.journey.playing .pbtn{opacity:1;transform:none}
.jc.on .pbtn{background:var(--gold2)}
.jc b{font-weight:600;font-size:.98rem;margin-top:6px}
.jc small{color:var(--mute);font-size:.82rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eq{position:absolute;left:12px;bottom:14px;display:flex;gap:3px;align-items:flex-end;height:18px}.eq i{width:4px;background:#fff;border-radius:2px;animation:eq 1s ease-in-out infinite}.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:5px}50%{height:18px}}
.nc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,#fff),#fff 70%);border-radius:16px;padding:16px;min-height:132px;transition:transform .2s,border-color .2s}
.nc:hover{transform:translateY(-2px);border-color:var(--c)}
.nc-i{width:42px;height:42px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;margin-bottom:auto}
.nc-i svg{width:18px;height:18px}
.nc b{font-weight:600;font-size:.98rem}.nc small{color:var(--mute);font-size:.8rem;line-height:1.35}
.nc.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}
.crow{display:flex;gap:12px;flex-wrap:wrap}
.cb{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:4px;color:var(--ink2);font-size:.82rem}
.cb span{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 45%,#fff),var(--c));color:#fff;display:grid;place-items:center;font-size:1.3rem;box-shadow:0 10px 22px -12px var(--c);transition:transform .15s}
.cb:hover span{transform:scale(1.06)}.cb.hit span{animation:hit .6s ease}
@keyframes hit{0%{box-shadow:0 0 0 0 var(--c)}100%{box-shadow:0 0 0 22px transparent}}
.cb b{font-weight:500}

/* engine panels in light */
.deck h3{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1.05;margin:6px 0 4px;color:var(--ink)}
.deck h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:24px 0 10px}
.deck .lede{color:var(--ink2);max-width:64ch;margin:0 0 16px}
.deck footer{border-top:1px solid var(--line);margin-top:40px;padding-top:14px;color:var(--mute);font-size:.8rem}
.feel{background:var(--soft);border:0;border-radius:18px;padding:18px;margin-bottom:22px}
.feel h4{margin:0;font-family:var(--sans);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
.feel .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-size:.88rem}
.chip:hover{border-color:var(--gold2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filters{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.filters .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filters .lbl{width:74px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.jlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.journey{counter-increment:none;border:0;border-radius:0;padding:0;background:none;box-shadow:none;color:var(--ink);gap:4px;overflow:visible}
.journey::before{display:none}
.journey .cv{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--soft2);margin-bottom:6px}
.journey .cv img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.journey:hover .cv img{transform:scale(1.05)}
.journey .len{position:absolute;left:10px;top:10px;right:auto;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;border-radius:999px;padding:3px 9px}
.journey b{font-family:var(--sans);font-size:1rem;font-weight:600}
.journey .ln{color:var(--mute);font-size:.84rem}
.journey .tags{color:var(--gold);font-size:.74rem}
.journey.playing{box-shadow:none}.journey.playing .cv{outline:3px solid var(--gold2);outline-offset:2px}
.cueonly{background:var(--soft);border:0;border-radius:14px;color:var(--ink2);margin-top:20px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--ink);box-shadow:none;min-height:150px}
.tile::after{height:3px;border-radius:0 0 16px 16px}
.tile b{color:var(--ink);font-weight:600}.tile .sub{color:var(--mute)}
.tile.on{border-color:var(--c,var(--gold2));box-shadow:0 0 0 2px var(--c,var(--gold2)) inset;background:color-mix(in srgb,var(--c,#C9A35E) 8%,#fff)}
.tile .acts button{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:999px}
.tile .acts button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tile .bija{color:var(--c)}
.settings,.builder,.master,.band,.saved div,.libwrap,.strip{background:var(--soft);border:0;border-radius:16px;color:var(--ink)}
.field>span,.builder .row>span,.strip .nm,.master label{color:var(--ink2)}
.seg{background:#fff;border:1px solid var(--line);border-radius:999px}
.seg button{color:var(--ink2)}.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.band{border:1px solid var(--line);background:#fff}.band[aria-pressed="true"]{border-color:var(--gold2);background:var(--goldbg)}
select.inp,input.inp,.inp{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:12px;height:44px}
input[type=range]{accent-color:var(--gold)}
.banner{background:var(--goldbg);color:var(--ink);border:1px solid #EADCC2;border-radius:14px}
.hint,.sub{color:var(--mute)}
.libwrap table td,.libwrap table th{border-color:var(--line);color:var(--ink)}

/* now playing */
.np-h{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.np-cover{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,#F3E6CC,#D9C6A2);display:grid;place-items:center}
.np-cover.has{background-size:cover;background-position:center}
.np-cover.has::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.np-cover .speaker{position:relative;width:62%!important;height:auto!important;aspect-ratio:1;border-radius:50%;padding:0;background:rgba(10,8,6,.82);border:2px solid rgba(255,255,255,.7);box-shadow:0 20px 40px -18px rgba(0,0,0,.6);overflow:hidden;margin:0}
.np-cover .bowlwrap{position:absolute;inset:6%}
#viz{width:100%;height:100%;display:block;border-radius:50%;cursor:pointer}
.tapnote{text-align:center;font-size:.76rem;color:var(--mute);margin-top:-6px}
.np .now{background:none;border:0;box-shadow:none;padding:0;margin:0;height:auto;color:var(--ink)}
.np .now::before,.np .now .needle,.np .dialline{display:none}
.np .now h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;line-height:1.1;margin:0 0 4px;color:var(--ink)}
.np .now .stage{color:var(--gold);font-size:.82rem;display:flex;justify-content:space-between;gap:8px}
.np .now p{color:var(--ink2);font-size:.92rem;margin:6px 0 0}
.np .progress{height:4px;background:var(--soft2);border-radius:4px;margin-top:10px}.np .progress span{background:var(--gold)}
.np .layerline{display:none}
.np-sec h3{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:4px 0 8px;font-weight:600}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.stages button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;border-radius:12px;padding:8px 10px;text-align:left;color:var(--ink2)}
.stages button:hover{background:var(--soft)}
.stages .sn{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.78rem;flex:none}
.stages b{display:block;font-weight:500;font-size:.92rem}.stages small{color:var(--mute);font-size:.76rem}
.stages .cur button{background:var(--goldbg);color:var(--ink)}.stages .cur .sn{background:var(--gold2);border-color:var(--gold2);color:#fff}
.stages .done .sn{background:var(--soft2)}
.lays{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.lay{display:grid;grid-template-columns:10px 1fr 90px 26px;gap:8px;align-items:center;font-size:.86rem}
.ld{width:10px;height:10px;border-radius:50%}.ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx{border:0;background:var(--soft);border-radius:50%;width:26px;height:26px;color:var(--ink2);padding:0;line-height:1}
.extras{border-top:1px solid var(--line);padding-top:10px}
.extras summary{cursor:pointer;font-size:.86rem;color:var(--ink2);font-weight:500}
.extras>*:not(summary){margin-top:12px}
.presetrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pkey{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:9px 4px;font-size:.82rem;box-shadow:none}
.pkey[aria-pressed="true"]{background:var(--ink);color:#fff}
.tune{background:var(--soft);border:0;border-radius:14px;padding:10px 12px}
.vus{display:grid;grid-template-columns:1fr 1fr;gap:6px}.vu{height:58px;border-radius:10px}
.record{background:var(--soft);border:0;border-radius:14px;padding:10px 12px;color:var(--ink)}
.record .ghost{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;font-size:.8rem}

/* player bar */
.bar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(23,19,16,.25);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,560px) minmax(0,1fr);align-items:center;gap:18px;padding:0 20px env(safe-area-inset-bottom,0px)}
.bar-now{display:flex;align-items:center;gap:12px;min-width:0;border:0;background:none;text-align:left;padding:0;color:var(--ink)}
.bn-cov{width:58px;height:58px;border-radius:12px;flex:none;background:linear-gradient(145deg,#F3E6CC,#C9A35E) center/cover}
.bn-t{display:flex;flex-direction:column;min-width:0}.bn-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bn-t small{color:var(--mute);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-mid{display:flex;flex-direction:column;align-items:center;gap:6px}
.bar-ctl{display:flex;align-items:center;gap:14px}
.ic{width:40px;height:40px;border-radius:50%;border:0;background:none;color:var(--ink2);display:grid;place-items:center;padding:0}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic:hover{background:var(--soft);color:var(--ink)}.ic:disabled{opacity:.3;cursor:default;background:none}
.ic[aria-expanded="true"]{background:var(--goldbg);color:var(--gold)}
.bar .play{width:52px;height:52px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;padding:0;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);margin:0}
.bar .play svg{width:24px;height:24px}.bar .play:hover{transform:scale(1.05)}
body.playing .bar .play{background:var(--gold)}
.bar-prog{display:flex;align-items:center;gap:10px;width:100%;font-size:.76rem;color:var(--mute)}
.bar .clock{font-variant-numeric:tabular-nums;min-width:44px;text-align:center;background:none;border:0;padding:0;color:var(--mute);font-size:.76rem;font-family:var(--sans)}
.pbar{flex:1;height:4px;border-radius:4px;background:var(--soft2);overflow:hidden}.pbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .5s}
.bar-r{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.vol{display:flex;align-items:center;gap:8px;color:var(--ink2)}.vol svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}.vol input{width:110px}
.pill-b{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;color:var(--ink);font-size:.88rem;white-space:nowrap}
.pill-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.pill-b em{font-style:normal;min-width:20px;height:20px;border-radius:999px;background:var(--gold2);color:#fff;font-size:.72rem;display:grid;place-items:center;padding:0 5px;font-weight:600}
.pill-b:hover{border-color:var(--gold2)}
.tp-grid{display:none!important;position:absolute;bottom:calc(var(--bar) + 10px);left:50%;transform:translateX(-50%);width:min(360px,92vw);background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);flex-direction:column;gap:12px}
.bar.open .tp-grid{display:flex!important}
.tp-grid label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--ink2)}
.tp-grid select{height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:0 12px;font:inherit}

/* live mix drawer */
.livemix{position:fixed;top:0;right:0;bottom:var(--bar);width:min(540px,100%);z-index:45;background:#fff;border-left:1px solid var(--line);padding:22px;overflow-y:auto;transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.7,.2,1);box-shadow:-30px 0 60px -30px rgba(0,0,0,.3);color:var(--ink)}
body.lm .livemix{transform:none}
.lm-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.lm-head h3{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin:4px 0 0}
.lm-head .x{width:auto;padding:0 14px;height:36px}
.livemix h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:20px 0 10px}
.livemix .strip{grid-template-columns:1fr 1fr}.livemix .strip .nm{grid-column:1/-1}
.scrim2{position:fixed;inset:0;bottom:var(--bar);background:rgba(23,19,16,.3);z-index:44;opacity:0;pointer-events:none;transition:opacity .3s}
body.lm .scrim2,body.np-m .scrim2,body.nav-m .scrim2{opacity:1;pointer-events:auto}
.toast{bottom:calc(var(--bar) + 16px);background:var(--ink);color:#fff}

/* responsive */
@media (max-width:1280px){:root{--np:300px}.vol input{width:80px}}
@media (max-width:1100px){
  .main{right:0}
  .np{transform:translateX(102%);transition:transform .35s;box-shadow:-30px 0 60px -30px rgba(0,0,0,.3);z-index:46;width:min(380px,100%)}
  body.np-m .np{transform:none}
  body.np-off .np{display:flex}
}
@media (max-width:900px){
  :root{--bar:136px}
  .side{transform:translateX(-102%);transition:transform .3s;z-index:47;bottom:0;box-shadow:30px 0 60px -30px rgba(0,0,0,.3)}
  body.nav-m .side{transform:none}
  .main{left:0}
  .tb-ic{display:grid}.tb-btn span{display:none}.tb-btn{width:42px;padding:0;justify-content:center}.hide-s{display:none!important}
  .bar{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:6px 10px;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 8px);height:auto;min-height:var(--bar)}
  .bar-mid{grid-column:1/-1;grid-row:2}
  .bar-r .vol{display:none}.pill-b span{display:none}
  .bn-cov{width:46px;height:46px}
  .moods{grid-template-columns:repeat(2,1fr)}.mood{min-height:96px}
  .rail{grid-auto-columns:minmax(150px,160px)}
}
@media (prefers-reduced-motion:reduce){.eq i,.cb.hit span{animation:none}}
/* embedded in My space or popped out */
body.embed .topbar .tb-r a{display:none}
body.mini .np{display:none}body.mini .main{right:0}body.mini .side{display:none}body.mini .main{left:0}
[hidden]{display:none!important}
.np>*{flex:none}
.np .empty,.stages .empty{border:0!important;padding:4px 0!important;background:none!important;color:var(--mute)}
.np .now h2,.hero h1{text-shadow:none!important}
html input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--soft2);outline:0;border:0;box-shadow:none}
html input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;margin-top:0}
html input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
html input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:transparent}
.np-cover{width:100%}
.deck .subh{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:18px 0 10px;font-weight:600}