/* Fyr FM listener, the approved Bold design (Nov 2026). Base rules follow the approved mockup (banger-lab/mockup/try-bold.html, round 2); additions for the real app at the bottom. */
:root{
  --ember:#FF4A1C; --ember2:#FF9A1F; --hot:linear-gradient(120deg,#FF2D2D,#FF6A1A 55%,#FFB52E);
  --display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif; --ui:'Instrument Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,Consolas,monospace;
}
html[data-theme="dark"]{--bg:#0B0A09;--card:#161412;--card2:#211E1B;--ink:#F4EFE7;--mut:#9A938A;--line:rgba(244,239,231,.11);--dock:#1D1A17;--dockink:#F4EFE7;--inv:#F4EFE7;--invink:#0B0A09;--out:#000;--shadow:0 18px 50px rgba(0,0,0,.55)}
html[data-theme="light"]{--bg:#F3EEE5;--card:#FFFCF6;--card2:#EAE3D7;--ink:#15120F;--mut:#6F685F;--line:rgba(21,18,15,.12);--dock:#15120F;--dockink:#F3EEE5;--inv:#15120F;--invink:#F3EEE5;--out:#D9D2C6;--shadow:0 18px 50px rgba(60,40,20,.18)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--out);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden;font-size:15px;line-height:1.4}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
::-webkit-scrollbar{width:0;height:0}
.ic{flex:none;display:block}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
h1,h2,.disp{font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;letter-spacing:-.02em;line-height:.9}
h2{font-size:24px;letter-spacing:-.01em;line-height:1}
.sub{color:var(--mut);font-size:13.5px}

/* ---------- frame ---------- */
#app{position:relative;background:var(--bg);overflow:hidden;height:100%;width:100%}


.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:0 18px 178px}
.blk{margin-top:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px}
.card h2{margin-bottom:4px}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:10px;padding:16px 0 4px}
.wm{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:3px;margin-right:auto}
.wm b{color:var(--ember)} .wm small{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--mut)}
.pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:13.5px;white-space:nowrap;transition:transform .12s}
.pill:active,.rb:active,.btn:active{transform:scale(.95)}
.pill.solid{background:var(--inv);color:var(--invink);border-color:transparent}
.pill.hot{background:var(--hot);color:#1a0800;border-color:transparent}
.rb{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform .12s}
.rb.big{width:68px;height:68px;background:var(--inv);color:var(--invink);border:0}
.rb.sm{width:38px;height:38px}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;height:54px;border-radius:18px;font-weight:700;font-size:15.5px;padding:0 18px;transition:transform .12s;white-space:nowrap}
.btn.hot{background:var(--hot);color:#1a0800}
.btn.inv{background:var(--inv);color:var(--invink)}
.btn.line{border:1px solid var(--line)}
.btn.wide{width:100%}

/* ---------- channel dial ---------- */
.dial{display:flex;gap:20px;overflow-x:auto;margin:8px -18px 0;padding:6px 18px 12px;align-items:baseline}
.dial button{font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1;color:var(--mut);opacity:.5;white-space:nowrap;padding-bottom:8px;position:relative;transition:.2s}
.dial button.on{color:var(--ink);opacity:1}
.dial button.on::after{content:"";position:absolute;left:50%;bottom:-24px;width:3px;height:26px;margin-left:-1.5px;background:var(--ember);border-radius:2px;z-index:1}
.ruler{height:12px;margin:0 -18px;opacity:.45;background:repeating-linear-gradient(90deg,var(--mut) 0 1px,transparent 1px 8px) top/100% 6px no-repeat,repeating-linear-gradient(90deg,var(--mut) 0 1px,transparent 1px 40px) top/100% 12px no-repeat}

/* ---------- hero ---------- */
.hero{position:relative;height:330px;border-radius:30px;overflow:hidden;margin-top:12px;background:linear-gradient(150deg,hsl(var(--h1) 80% 30%),hsl(var(--h2) 85% 16%));color:#fff;isolation:isolate}
.heat{position:absolute;inset:0;z-index:-1;filter:blur(34px) saturate(1.3)}
.heat i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;animation:drift 11s ease-in-out infinite alternate}
.heat i:nth-child(1){background:hsl(var(--h1) 95% 58%);left:-18%;top:-22%}
.heat i:nth-child(2){background:hsl(var(--h2) 95% 52%);right:-22%;bottom:-30%;animation-duration:14s;animation-direction:alternate-reverse}
.heat i:nth-child(3){background:#FF5A1C;width:42%;left:34%;top:38%;opacity:.75;animation-duration:8s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(16%,12%) scale(1.25)}}
.paused .heat i,.paused .eq i{animation-play-state:paused}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,rgba(0,0,0,.55));z-index:-1}
.hero-top{position:absolute;left:16px;right:16px;top:16px;display:flex;justify-content:space-between;align-items:center}
.onair{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:#E6200F;color:#fff;padding:7px 11px;border-radius:8px;box-shadow:0 0 22px rgba(255,45,20,.65)}
.onair b{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
.onair.off{background:rgba(0,0,0,.45);box-shadow:none;border:1px solid rgba(255,255,255,.35)}
.onair.quiet{background:none;box-shadow:none;color:var(--ember);padding:0}.onair.quiet b{background:var(--ember)}
@keyframes blink{50%{opacity:.25}}
.aud{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.4);padding:6px 10px;border-radius:8px;backdrop-filter:blur(6px)}
.hero-bot{position:absolute;left:18px;right:18px;bottom:18px}
.hero .eyebrow{color:rgba(255,255,255,.8)}
.hero h1{font-size:60px;margin:8px 0 10px;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.by{font-family:var(--mono);font-size:13px;display:flex;gap:8px;align-items:center}
.by span{opacity:.5}
.bar{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:12px}
.track{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.track i{display:block;height:100%;background:var(--ember);border-radius:2px;transition:width 1s linear}
.lyricline{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:13px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.lyricline span{flex:1;font-family:var(--display);font-variation-settings:"wdth" 85;font-weight:600;font-size:17px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyricline em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
.transport{display:flex;align-items:center;gap:10px;margin-top:14px}
.fyr{flex:1;height:68px;border-radius:34px;background:var(--hot);color:#1a0800;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-variation-settings:"wdth" 80;font-weight:800;font-size:25px;letter-spacing:-.01em;box-shadow:0 10px 30px rgba(255,80,20,.35);transition:transform .14s cubic-bezier(.3,1.5,.5,1);position:relative;overflow:hidden}
.fyr:active{transform:scale(.94)}
.fyr.on{background:var(--inv);color:var(--ember);box-shadow:none}
.fyr.dim{background:var(--card2);color:var(--mut);box-shadow:none}
.fyr small{font-family:var(--mono);font-size:12px;font-weight:500;opacity:.75}

/* ---------- DJ ---------- */
.dj-head{display:flex;align-items:center;gap:12px}
.dj-av{width:46px;height:46px;border-radius:50%;background:var(--hot);color:#1a0800;font-family:var(--display);font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.talk .dj-av::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ember);animation:ring 1.2s infinite}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.dj-head b{font-size:16px;display:block}.dj-head small{color:var(--mut);font-size:12.5px}
.eq{margin-left:auto;display:flex;gap:3px;align-items:flex-end;height:22px}
.eq i{width:4px;background:var(--ember);border-radius:2px;height:20%}
.talk .eq i{animation:eq .5s ease-in-out infinite alternate}.talk .eq i:nth-child(2){animation-delay:.12s}.talk .eq i:nth-child(3){animation-delay:.3s}.talk .eq i:nth-child(4){animation-delay:.2s}
@keyframes eq{to{height:100%}}
.dj-say{font-family:var(--display);font-variation-settings:"wdth" 88;font-weight:500;font-size:20px;line-height:1.2;margin:14px 0;min-height:72px;letter-spacing:-.01em}
.row{display:flex;gap:8px;flex-wrap:wrap}
.muted .dj-say{color:var(--mut)}

/* ---------- lists ---------- */
.lh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.lh .mono{color:var(--mut)}
.t{display:flex;align-items:center;gap:12px;width:100%;padding:9px 0;border-top:1px solid var(--line)}
.t:first-of-type{border-top:0}
.t .art{width:46px;height:46px;border-radius:12px;flex:none}
.t .tt{flex:1;min-width:0}.t b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t small{color:var(--mut);font-size:12.5px}.t .mono{color:var(--mut)}
.t .rank{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:30px;width:36px;text-align:center;flex:none;line-height:1}
.t.top3 .rank{color:var(--ember)}
.tr-up{color:#2FA84F}.tr-down{color:#D2452F}.tr-new{color:var(--ember)}
.evs{display:flex;gap:10px;overflow-x:auto;margin:0 -18px;padding:0 18px}
.ev{flex:none;width:210px;border-radius:22px;padding:16px;color:#fff;background:linear-gradient(150deg,hsl(var(--h) 75% 38%),hsl(calc(var(--h) + 50) 80% 18%));display:flex;flex-direction:column;gap:6px;min-height:138px}
.ev small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.ev b{font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;font-size:24px;line-height:.95}
.ev span{margin-top:auto;font-size:12.5px;opacity:.9}
.promo{width:100%;border-radius:26px;padding:20px;background:var(--inv);color:var(--invink);display:block;position:relative;overflow:hidden}
.promo .eyebrow{color:var(--ember)}
.promo b{display:block;font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;font-size:34px;line-height:.92;margin:8px 0;letter-spacing:-.02em}
.promo span{font-size:13.5px;opacity:.75;display:block;max-width:250px}
.promo .dots{position:absolute;right:-10px;bottom:-14px;width:150px;height:110px;opacity:.9}
.getapp{display:flex;align-items:center;gap:14px}
.getapp .droid{width:54px;height:54px;border-radius:16px;background:#3DDC84;color:#062b14;display:flex;align-items:center;justify-content:center;flex:none}

/* ---------- dock (phone) ---------- */
.dock{position:absolute;left:14px;right:14px;bottom:14px;height:66px;border-radius:33px;background:var(--dock);color:var(--dockink);display:flex;align-items:center;padding:0 8px;z-index:20;box-shadow:var(--shadow)}
.dock button{flex:1;height:50px;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:600;opacity:.55;transition:.18s}
.dock button.on{opacity:1;background:var(--hot);color:#1a0800}
.mini{position:absolute;left:14px;right:14px;bottom:88px;height:58px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 8px 0 8px;z-index:19;box-shadow:var(--shadow)}
.mini .art{width:42px;height:42px;border-radius:12px;flex:none}
.mini .tt{flex:1;min-width:0}.mini b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini small{font-family:var(--mono);font-size:10.5px;color:var(--ember);letter-spacing:.08em;text-transform:uppercase}
.mini .rb{width:40px;height:40px}.mini .rb.f{background:var(--hot);color:#1a0800;border:0}.mini .rb.f.on{background:var(--inv);color:var(--ember)}

/* ---------- lyrics full screen ---------- */
.lyr{position:absolute;inset:0;z-index:40;background:linear-gradient(160deg,hsl(var(--h1) 75% 26%),hsl(var(--h2) 80% 10%));color:#fff;display:flex;flex-direction:column;padding:16px 18px 22px;isolation:isolate;overflow:hidden}
.lyr .heat{opacity:.55}
.lyr-top{display:flex;align-items:center;gap:12px}.lyr-top div{flex:1;min-width:0}.lyr-top b{display:block}.lyr-top small{opacity:.7;font-family:var(--mono);font-size:12px}
.lyr .rb{border-color:rgba(255,255,255,.3)}.lyr .rb.big{background:#fff;color:#111}
.lyr-body{flex:1;overflow-y:auto;position:relative;margin:14px 0;scroll-behavior:smooth;-webkit-mask:linear-gradient(transparent,#000 14%,#000 80%,transparent);mask:linear-gradient(transparent,#000 14%,#000 80%,transparent);padding:30% 0 60%}
.lyr-body p{font-family:var(--display);font-variation-settings:"wdth" 80;font-weight:800;font-size:38px;line-height:1;letter-spacing:-.02em;margin-bottom:20px;opacity:.38;transition:.35s;transform-origin:left;text-wrap:balance}
.lyr-body p.on{opacity:1;transform:scale(1.04)}.lyr-body p.past{opacity:.2}
.lyr .bar{color:rgba(255,255,255,.7)}.lyr .track{background:rgba(255,255,255,.22)}.lyr .track i{background:#fff}

/* ---------- generate ---------- */
.g-head h1{font-size:64px;margin:10px 0 12px;text-wrap:balance}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);white-space:nowrap}
.chip.hot{background:var(--ember);color:#fff;border-color:transparent}
.g-dial{position:relative}
.disc{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1}
.disc svg{width:100%;height:100%;display:block;overflow:visible}
.disc circle.arc{cursor:pointer;transition:opacity .2s}
.disc circle.base{stroke:var(--line)}
.disc .needle{transform-origin:180px 180px;transition:transform .12s linear}
.disc .needle line{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.disc .needle circle{fill:var(--ember)}
.disc .cut{stroke:var(--bg);stroke-width:2.5}
.disc .fill{stroke:var(--bg);stroke-width:1.6;opacity:.75}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:34%;pointer-events:none}
.hub .mono{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:block}
.hub b{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:30px;line-height:.95;display:block;margin:3px 0;letter-spacing:-.02em}
.secs{display:flex;gap:3px;margin-top:14px}
.secs button{flex:var(--w);font-family:var(--mono);font-size:10px;letter-spacing:.02em;text-align:center;padding:7px 0;border-radius:7px;background:var(--card);border:1px solid var(--line);color:var(--mut);white-space:nowrap;overflow:hidden}
.secs button.on{background:var(--inv);color:var(--invink);border-color:transparent}
.g-trans{display:flex;gap:10px;align-items:center;margin-top:14px}
.g-trans .btn{flex:1}
.cap{font-size:12.5px;color:var(--mut);margin-top:10px}

.steer h2{display:flex;align-items:center;justify-content:space-between}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.step{border-radius:20px;background:var(--card2);padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid transparent;text-align:center}
.step.on{border-color:var(--c)}
.step .lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:6px;color:var(--mut)}
.step .lab i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.step .ud{width:100%;height:50px;border-radius:14px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:transform .1s}
.step .ud:active{transform:scale(.94);background:var(--c);color:#111}
.step .val{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:54px;line-height:1;min-height:56px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;letter-spacing:-.02em}
.step .val.notes{font-size:22px;gap:4px}
.step .val.notes span{background:var(--bg);border-radius:8px;padding:5px 7px;border:1px solid var(--line)}
.step .off{font-family:var(--mono);font-size:11.5px;color:var(--mut)}
.klabel{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:16px 0 8px;display:flex;justify-content:space-between}
.klabel b{color:var(--ink);font-weight:500}
.keys{display:flex;gap:3px;height:74px}
.keys button{flex:1;border-radius:0 0 9px 9px;background:#F6F1E8;color:#15120F;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding-bottom:7px;font-family:var(--mono);font-size:11px;font-weight:500;position:relative;border:1px solid var(--line);transition:.12s}
.keys button.blk{background:#1c1917;color:#F4EFE7;height:70%}
.keys button i{width:6px;height:6px;border-radius:50%;background:transparent}
.keys button.in i{background:var(--ember)}
.keys button.on{background:var(--hot);color:#1a0800;height:100%}.keys button.on i{background:#1a0800}
.seg{display:flex;gap:6px;overflow-x:auto;margin:0 -18px;padding:0 18px}
.seg button{flex:none;height:38px;padding:0 13px;border-radius:12px;border:1px solid var(--line);font-weight:600;font-size:13.5px}
.seg button.on{background:var(--inv);color:var(--invink);border-color:transparent}
.tempo{display:flex;align-items:center;gap:10px}
.tempo .n{flex:1;font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:40px;line-height:1;display:flex;align-items:baseline;gap:6px}
.tempo .n small{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--mut)}
.tempo .beat{width:10px;height:10px;border-radius:50%;background:var(--ember);align-self:center}
canvas.search{display:block;width:100%;height:150px;margin-top:12px;--grid:rgba(128,128,128,.22)}
.srow{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--mut)}
.srow b{color:var(--ink);font-weight:500}
.legend{display:flex;gap:4px 10px;flex-wrap:wrap;margin-top:10px}
.legend button{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:5px}
.legend i{width:8px;height:8px;border-radius:50%;background:var(--c)}
/* step grid */
.sg-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.sg-name{width:66px;font-weight:600;font-size:13px;flex:none;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.sg-cells{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:3px}
.sg-c{height:24px;border-radius:5px;background:var(--card2);position:relative;display:block}
.sg-c:nth-child(4n+1){margin-left:2px}
.sg-c.hit{background:color-mix(in srgb,var(--c) calc(var(--v) * 100%),var(--card2))}
.sg-c.now{box-shadow:0 0 0 1.5px var(--ink);transform:scaleY(1.14)}
.sg-c.now.hit{box-shadow:0 0 0 1.5px var(--ink),0 0 14px var(--c)}
.sg-row.searching .sg-cells{outline:1.5px dashed var(--c);outline-offset:3px;border-radius:6px}
.sg-row.muted{opacity:.38}
.sg-fit{width:50px;text-align:right;font-family:var(--mono);font-size:11.5px;color:color-mix(in srgb,var(--c) 70%,var(--ink));flex:none}
.g-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-acts .full{grid-column:1/-1}

/* ---------- sheets ---------- */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.scrim.fresh{animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{background:var(--bg);width:100%;max-height:88%;overflow-y:auto;border-radius:30px 30px 0 0;padding:10px 20px 26px;border:1px solid var(--line);border-bottom:0}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.scrim.fresh .sheet{animation:up .28s cubic-bezier(.2,.9,.3,1)}
.grab{width:42px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.sh-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.sh-head h1{font-size:38px;flex:1;text-wrap:balance}
.steps{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.st{display:flex;gap:14px;padding:14px;border-radius:20px;border:1px solid var(--line);opacity:.5}
.st.cur{opacity:1;background:var(--card);border-color:var(--ember)}
.st.done{opacity:1}
.st .n{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--mut);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;flex:none}
.st.cur .n{background:var(--ember);border-color:var(--ember);color:#fff}
.st.done .n{background:#2FA84F;border-color:#2FA84F;color:#fff}
.st .b{flex:1;min-width:0}.st .b b{display:block;font-size:15.5px}.st .b p{color:var(--mut);font-size:13.5px;margin:2px 0 0}
.st .btn{margin-top:12px;height:48px}
.pbar{height:8px;border-radius:4px;background:var(--card2);overflow:hidden;margin-top:12px}
.pbar i{display:block;height:100%;background:var(--hot);width:0;transition:width .14s linear}
.dlg{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--card2);font-size:12.5px}
.dlg b{display:inline!important;font-size:12.5px!important}
.fine{font-size:12.5px;color:var(--mut);margin-top:14px;line-height:1.5}
.fine button{text-decoration:underline;color:var(--ink)}
.qr{display:none}
.yes{text-align:center;padding:16px 0 4px}
.yes .big{width:74px;height:74px;border-radius:24px;background:var(--hot);color:#1a0800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.set{display:flex;align-items:center;gap:12px;width:100%;padding:15px 0;border-top:1px solid var(--line)}
.set .tt{flex:1}.set b{display:block;font-size:15px}.set small{color:var(--mut);font-size:12.5px}
.sw{width:48px;height:28px;border-radius:14px;background:var(--card2);border:1px solid var(--line);position:relative;flex:none;transition:.2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--mut);transition:.2s}
.sw.on{background:var(--ember);border-color:transparent}.sw.on::after{left:23px;background:#fff}
.rule{padding:14px 0;border-top:1px solid var(--line)}
.rule .rh{display:flex;justify-content:space-between;font-weight:600}
.rule .rh span{font-family:var(--mono);font-size:12.5px}
.rule .rb2{height:6px;border-radius:3px;background:var(--card2);margin:8px 0;overflow:hidden}
.rule .rb2 i{display:block;height:100%;background:var(--c);border-radius:3px}
.rule p{color:var(--mut);font-size:13.5px}.rule cite{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink);border-bottom:1px solid var(--line)}
.toast{position:absolute;left:50%;bottom:170px;transform:translateX(-50%);background:var(--inv);color:var(--invink);padding:11px 16px;border-radius:14px;font-size:13.5px;font-weight:600;z-index:60;max-width:86%;text-align:center;box-shadow:var(--shadow)}
.toast.fresh{animation:up .22s}
.empty{text-align:center;padding:34px 10px}.empty p{color:var(--mut);margin:8px 0 16px}
.pg h1{font-size:60px;margin:6px 0 4px}

/* ================= ROUND 2: fire kept and better ================= */
/* the roiling fireball from the app (Concept G), now on the track's beat. --e is set per orb by the frame loop */
#fx{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden}
.shock{position:absolute;border-radius:50%;border:2px solid #FF9A1F;transform:translate(-50%,-50%)}
.particle{position:absolute;border-radius:50%}
.fv{position:absolute;aspect-ratio:1;pointer-events:none;--e:.4}
.fv-blob{position:absolute;left:50%;top:50%;aspect-ratio:1;mix-blend-mode:screen;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;will-change:transform;transform:translate(-50%,-50%) scale(.86)}
.fv-halo{position:absolute;inset:-24%;border-radius:50%;background:radial-gradient(circle,rgba(255,130,40,.62),rgba(255,60,20,.2) 42%,transparent 68%);transform:scale(calc(.8 + var(--e)*.36));opacity:calc(.28 + var(--e)*.62)}
.fv-sparks{position:absolute;inset:0;opacity:calc(.2 + var(--e,.6)*.8);pointer-events:none}
.fv-sparks span,.embers span{position:absolute;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(circle,#FFF0C0,#FF7A1A 55%,transparent);animation:fvSpark linear infinite}
@keyframes fvSpark{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx,0),calc(-1*var(--dy,90px))) scale(.1);opacity:0}}
.embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.embers span{bottom:-6px;top:auto!important}
html[data-theme="light"] .onpage span,html[data-theme="light"] .onpage .fv-sparks span{mix-blend-mode:normal;background:radial-gradient(circle,#FFB52E,#FF4A1C 55%,transparent)}
.paused .embers span,.paused .fv-sparks span,.still .fv-sparks span{animation-play-state:paused}
.paused .embers,.paused .fv-sparks{opacity:0;transition:opacity .5s}
.coal{position:relative;display:block;border-radius:50%;background:radial-gradient(circle at 50% 38%,#3a1408,#150805);box-shadow:inset 0 0 0 1px rgba(255,140,40,.45),0 0 calc(8px + var(--env,.4)*22px) rgba(255,100,30,.5);flex:none}
.coal .fv{inset:4%}
.coal>.ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;color:#3a1005}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.08);opacity:1}}
@keyframes bar{0%,100%{height:18%}50%{height:90%}}
@keyframes bump{0%{transform:translateY(0)}40%{transform:translateY(-7px) scale(1.2);color:#FFC93C}100%{transform:translateY(0)}}
@keyframes epulse{0%{box-shadow:0 0 0 0 rgba(255,90,20,.6)}70%{box-shadow:0 0 0 10px rgba(255,90,20,0)}100%{box-shadow:0 0 0 0 rgba(255,90,20,0)}}
@keyframes flick{0%,100%{text-shadow:0 0 10px rgba(255,90,20,.55),0 -2px 16px rgba(255,180,40,.25)}35%{text-shadow:0 0 16px rgba(255,90,20,.85),0 -6px 22px rgba(255,180,40,.5)}60%{text-shadow:0 0 8px rgba(255,90,20,.4),0 -1px 12px rgba(255,180,40,.2)}}
/* listen: the now-playing fireball */
.hero{height:350px;background:linear-gradient(150deg,hsl(var(--h1) 70% 19%),hsl(var(--h2) 80% 8%) 70%,#120604)}
.hero .heat{opacity:.5}
.fv.big{left:50%;top:38%;width:min(66%,250px);transform:translate(-50%,-50%);z-index:-1}
.hero .embers{z-index:-1}
.onair{box-shadow:0 0 calc(12px + var(--env,.4)*26px) rgba(255,45,20,.75)}
.onair b{animation:blink 1.4s infinite,epulse 2s infinite}
.wm b{text-shadow:0 0 calc(5px + var(--env,.4)*16px) rgba(255,90,20,.95)}
.fyr .ic,.mini .rb.f .ic,.fl .ic,.empty .efl .ic{animation:breathe 2.6s ease-in-out infinite;transform-origin:center}
.fyr.on,.mini .rb.f.on{background:radial-gradient(circle at 50% 38%,#3a1408,#1a0a05);color:#FFB347;box-shadow:inset 0 0 0 1.5px rgba(255,160,40,.7),0 0 calc(16px + var(--env,.4)*24px) rgba(255,110,30,.6)}
.fyr.on .ic{filter:drop-shadow(0 0 8px rgba(255,140,40,.9))}
.fyr.dim .ic{animation:none}
.fyr small.bump{animation:bump .4s}
.fyr small{display:inline-block}
.dj-av{box-shadow:0 0 calc(6px + var(--env,.4)*18px) rgba(255,90,20,.55)}
.dock button.on{box-shadow:0 0 calc(8px + var(--env,.4)*16px) rgba(255,90,20,.5)}
.art{position:relative;overflow:hidden}
.viz{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px;padding:7px;background:linear-gradient(transparent 20%,rgba(0,0,0,.5));pointer-events:none}
.viz i{flex:1;background:linear-gradient(#FFC93C,#FF4A1C);border-radius:2px;height:18%;animation:bar 1s ease-in-out infinite}
.viz i:nth-child(2){animation-delay:-.35s}.viz i:nth-child(3){animation-delay:-.7s}.viz i:nth-child(4){animation-delay:-.2s}
.viz.off i{animation-play-state:paused}
.art .hotfv{position:absolute;inset:0;background:radial-gradient(circle,#3a1408,#120604);border-radius:inherit;pointer-events:none}
.art .hotfv .fv{inset:2%}
.lyr .fv.amb{left:50%;top:40%;width:125%;transform:translate(-50%,-50%);z-index:-1;opacity:.5}
.lyr-body p.on{text-shadow:0 0 30px rgba(255,150,60,.6)}
/* charts, my fyr, sheets */
.pg.fiery{position:relative;isolation:isolate}
.pg.fiery .embers{inset:-20px -18px -10px;z-index:-1}
.pg.fiery .coal.hd{position:absolute;right:2px;bottom:6px;width:62px;height:62px}
.t.top3 .rank{animation:flick 2.3s ease-in-out infinite}
.t.top3:nth-of-type(2) .rank{animation-delay:-.8s}.t.top3:nth-of-type(3) .rank{animation-delay:-1.5s}
.fy{display:inline-flex;align-items:center;gap:3px;justify-content:flex-end}.fy .ic{color:var(--ember)}
.fl{color:var(--ember);display:inline-flex}
.empty .efl{color:var(--ember);display:inline-flex;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(255,90,20,.5))}
.sheet{box-shadow:0 -1px 0 rgba(255,110,30,.6),0 -26px 60px -30px rgba(255,90,20,.65)}
.sh-head .coal{width:46px;height:46px;margin-top:2px}
.st.cur .n{animation:epulse 2s infinite}
.pbar{overflow:visible}
.pbar i{position:relative;border-radius:4px;min-width:2px}
.pbar i::after{content:"";position:absolute;right:-7px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle,#fff,#FFC93C 40%,#FF4A1C 70%,transparent);box-shadow:0 0 14px 4px rgba(255,120,30,.8)}
.pbar .fuse{position:absolute;right:-16px;top:-14px;width:32px;height:32px;inset:auto -16px auto auto}
.yes .coal{width:104px;height:104px;margin:6px auto 18px}

/* ================= ROUND 2: generate, the thumb orb ================= */
.g-head h1{font-size:50px;margin:8px 0 10px}
.chip.learn{border-color:var(--ember);color:var(--ember);display:inline-flex;align-items:center;gap:5px}
.oread{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px}
.oread>div{flex:1;min-width:0}
.oread .big{font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.oread .big i{font-style:normal;color:var(--mut);font-weight:500}
.oread .big em{font-style:normal;color:var(--ember)}
.oread .mono{color:var(--mut);margin-top:4px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oread .mono b{color:var(--ink);font-weight:500}
.mem{height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;white-space:nowrap;flex:none;background:var(--card)}
.mem u{width:11px;height:11px;border-radius:50%;background:#E6200F;text-decoration:none;flex:none}
.mem.rec{background:#E6200F;color:#fff;border-color:transparent;animation:epulse 1.4s infinite}
.mem.rec u{background:#fff;border-radius:2px}
.pad{position:relative;aspect-ratio:1;border-radius:30px;overflow:hidden;border:1px solid var(--line);--line:rgba(244,239,231,.12);--bg:#140b08;--ink:#F4EFE7;--mut:#A39A90;color:#F4EFE7;--m:0;--p:0;--ox:.5;--oy:.5;
  background:radial-gradient(circle at calc(12% + var(--ox)*76%) calc(12% + var(--oy)*76%),hsl(calc(10 + var(--m)*22) 78% calc(17% + var(--m)*6%)),#140b08 62%)}
.pad .trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.pad .disc{position:absolute;inset:9.5%;width:auto;max-width:none;margin:0}
.pad .disc svg{filter:hue-rotate(calc(var(--m)*-26deg)) saturate(calc(1 + var(--m)*.45)) brightness(calc(1 + var(--m)*.16));transition:filter .15s}
.pad .rg{transform-origin:180px 180px;transform:translate(calc((var(--ox) - .5)*var(--k)),calc((var(--oy) - .5)*var(--k)));transition:transform .16s}
.pad .rg circle.arc{stroke-width:calc(9.5px + var(--v)*2.6px);transition:stroke-width .16s}
.pad .rg5{--k:12px;--v:var(--pb,0)}.pad .rg6{--k:21px;--v:var(--pc,0)}.pad .rg7{--k:32px;--v:var(--p)}
.ax{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,231,.82);display:flex;align-items:center;gap:4px;z-index:3;pointer-events:none;white-space:nowrap}
.ax b{color:#FFB347;font-weight:500}
.ax.at{top:9px;left:50%;transform:translateX(-50%)}.ax.ab{bottom:9px;left:50%;transform:translateX(-50%)}
.ax.al{left:10px;top:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;margin-left:6px}
.ax.ar{right:10px;top:50%;transform:translate(50%,-50%) rotate(90deg);transform-origin:center;margin-right:6px}
.pad .home{position:absolute;left:50%;top:50%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed rgba(255,160,60,.45);z-index:1;pointer-events:none}
.orb{position:absolute;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;touch-action:none;cursor:grab;border-radius:50%;transition:left .13s linear,top .13s linear;-webkit-user-select:none;user-select:none}
.orb .coal{position:absolute;inset:0;transform:scale(calc(1 - var(--p)*.1));filter:hue-rotate(calc((var(--m) - 1)*9deg)) brightness(calc(.9 + var(--m)*.18));transition:transform .15s;box-shadow:inset 0 0 0 1px rgba(255,140,40,.5),0 0 calc(12px + var(--genv,.4)*30px) rgba(255,100,30,.65)}
.orb.held{cursor:grabbing;transition:none}
.orb.held .coal{box-shadow:inset 0 0 0 2px #FFC93C,0 0 0 9px rgba(255,150,50,.2),0 0 44px rgba(255,110,30,.9)}
.orb>b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;font-size:23px;color:#3a1005;pointer-events:none;letter-spacing:-.02em}
.moodbar{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:8px}
.moodbar span{font-family:var(--mono);font-size:10.5px;text-align:center;padding:7px 0;border-radius:7px;background:var(--card);border:1px solid var(--line);color:var(--mut);white-space:nowrap;overflow:hidden}
.moodbar span.on{background:var(--hot);color:#1a0800;border-color:transparent;font-weight:500}
.nrows{margin-top:10px}
.nr{display:flex;align-items:center;gap:8px;padding:2px 0}
.nr>span{width:50px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);flex:none}
.nr>b{width:54px;text-align:right;font-family:var(--mono);font-size:11.5px;font-weight:500;flex:none;white-space:nowrap;overflow:hidden}
.nc{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:2px}
.nc i{height:24px;border-radius:4px;background:var(--card2);position:relative;display:block}
.nc i.now{box-shadow:0 0 0 1.5px var(--ink)}
.nc i.hit::after,.sg-c[data-nt]::after{content:"";position:absolute;left:1px;right:1px;height:4px;border-radius:2px;background:var(--c);bottom:calc(var(--h)*(100% - 4px));transition:bottom .13s}
.sg-c[data-nt]::after{background:var(--ink);height:3px}
.sg-row[data-tall] .sg-c{height:34px}
.pad-ctl{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.pad-ctl .pill{background:var(--card)}
.pad-ctl .sw{transform:scale(.8);margin:0 -5px 0 -6px}
.pad-ctl .mono{margin-left:auto;color:var(--mut);font-size:11px;text-align:right}
.take{margin-top:12px;border-radius:20px;border:1px solid var(--ember);background:var(--card);padding:14px}
.take b{display:block;font-size:15px}.take p{color:var(--mut);font-size:13px;margin:2px 0 12px}
.take .row .btn{height:46px;flex:1;font-size:14px;padding:0 12px}
.take .row .rb{width:46px;height:46px}
.take .row{flex-wrap:nowrap}.take .row .btn{min-width:0;padding:0 8px}
.learnline{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:11px 12px;border-radius:14px;background:var(--card2);font-size:13px;line-height:1.35}
.learnline .ic{color:var(--ember);margin-top:1px}
.nud{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:16px;background:var(--card2);margin-top:8px;border:2px solid transparent}
.nud.on{border-color:var(--c)}
.nud .lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:6px;width:92px;flex:none}
.nud .lab i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.nud .v{flex:1;min-width:0;font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;font-size:21px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nud .v small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--mut);margin-top:3px;letter-spacing:0}
.nud .rb{background:var(--bg)}
.mv-art{background:radial-gradient(circle,#3a1408,#120604)!important;display:flex;align-items:center;justify-content:center}
.seg.sc{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.seg.sc button{height:36px;padding:0 11px;font-size:13px}
.mv-art svg{width:100%;height:100%;display:block}

/* ---------- desk ---------- */
.rail,.pbarD{display:none}
.main{position:absolute;inset:0}
html[data-view="desk"] #app{display:grid;grid-template-columns:236px 1fr;grid-template-rows:1fr 78px}
html[data-view="desk"] .dock,html[data-view="desk"] .mini,html[data-view="desk"] .top .pill,html[data-view="desk"] .top .rb,html[data-view="desk"] .top .wm{display:none}
html[data-view="desk"] .top{padding:0;height:58px}
html[data-view="desk"] .rail{display:flex;flex-direction:column;gap:4px;padding:22px 16px 16px;border-right:1px solid var(--line);grid-row:1;overflow-y:auto}
html[data-view="desk"] .rail .wm{font-size:40px;margin:0 0 20px 8px}
.rail .nav{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:14px;font-weight:600;color:var(--mut)}
.rail .nav.on{background:var(--hot);color:#1a0800}
.rail .nav:hover:not(.on){color:var(--ink);background:var(--card)}
.rail .sp{flex:1}
.rail .app{border-radius:20px;background:var(--card);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.rail .app b{font-family:var(--display);font-variation-settings:"wdth" 78;font-weight:800;font-size:21px;line-height:.95}
.rail .app small{color:var(--mut);font-size:12px}
.rail .app .btn{height:42px;font-size:13.5px;border-radius:13px}
html[data-view="desk"] .main{position:relative;grid-row:1;grid-column:2;min-width:0}
html[data-view="desk"] .scroll{padding:0 34px 30px}
html[data-view="desk"] .pbarD{display:flex;grid-column:1/-1;grid-row:2;align-items:center;gap:16px;padding:0 22px;border-top:1px solid var(--line);background:var(--card);z-index:5}
.pbarD .art{width:50px;height:50px;border-radius:13px;flex:none}
.pbarD .tt{width:230px;min-width:0}.pbarD .tt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pbarD .tt small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember)}
.pbarD .bar{flex:1;margin:0}.pbarD .rb.big{width:50px;height:50px}
.pbarD .fyr{flex:none;height:50px;padding:0 22px;font-size:19px;box-shadow:none}
.pbarD .ll{max-width:220px;font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-view="desk"] .cols{display:grid;gap:22px;align-items:start}
html[data-view="desk"] .cols.listen{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
html[data-view="desk"] .cols.listen .hero{height:400px}
html[data-view="desk"] .cols.listen .hero h1{font-size:92px}
html[data-view="desk"] .cols.gen{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) 340px}
html[data-view="desk"] .cols.listen .fv.big{left:72%;top:42%;width:330px}
html[data-view="desk"] .pbarD .fyr.on{box-shadow:inset 0 0 0 1.5px rgba(255,160,40,.7),0 0 calc(10px + var(--env,.4)*16px) rgba(255,110,30,.6)}
html[data-view="desk"] .pg.fiery .coal.hd{width:84px;height:84px;right:auto;left:430px;bottom:10px}
html[data-view="desk"] .cols.three{grid-template-columns:1fr 1fr 1fr}
html[data-view="desk"] .cols.two{grid-template-columns:1fr 1fr}
html[data-view="desk"] .dial,html[data-view="desk"] .evs,html[data-view="desk"] .seg{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
html[data-view="desk"] .ruler{margin:0}
html[data-view="desk"] .g-head h1{font-size:76px}
html[data-view="desk"] .disc{max-width:300px}
html[data-view="desk"] .g-head .chip[data-b="searching"],html[data-view="desk"] .steer>.sub{display:none}
html[data-view="desk"] .step .ud{height:40px}
html[data-view="desk"] .step .val{font-size:46px;min-height:48px}
html[data-view="desk"] .step .val.notes{font-size:22px}
html[data-view="desk"] .g-trans .btn{min-width:0;padding:0 12px}
html[data-view="desk"] .keys{height:58px}
html[data-view="desk"] .klabel{margin:13px 0 7px}
html[data-view="desk"] canvas.search{height:128px}
html[data-view="desk"] .scrim{align-items:center;position:fixed}
html[data-view="desk"] .sheet{width:560px;border-radius:30px;border-bottom:1px solid var(--line);max-height:86vh}
html[data-view="desk"] .sheet.wide{width:820px}
html[data-view="desk"] .grab{visibility:hidden}
html[data-view="desk"] .inst{display:grid;grid-template-columns:1fr 250px;gap:26px;align-items:start}
html[data-view="desk"] .qr{display:block;text-align:center;border-radius:22px;background:var(--card);border:1px solid var(--line);padding:18px;margin-top:16px}
.qr>svg{width:100%;height:auto;border-radius:10px;background:#fff;padding:10px;display:block}
.qr b{display:block;margin:12px 0 2px}.qr small{color:var(--mut);font-size:12.5px;display:block;margin-bottom:12px}
html[data-view="desk"] .toast{bottom:100px;position:fixed}
html[data-view="desk"] .lyr{position:fixed;padding:28px 12vw 30px}
html[data-view="desk"] .lyr-body p{font-size:62px}
html[data-view="desk"] .pg h1{font-size:84px}

/* ================= the real app (Nov 2026): additions on top of the approved design ================= */
#fx{position:fixed}
html,body{overscroll-behavior:none}
#app{height:100dvh}
.scroll{padding-bottom:calc(178px + env(safe-area-inset-bottom))}
.dock{bottom:calc(14px + env(safe-area-inset-bottom))}
.mini{bottom:calc(88px + env(safe-area-inset-bottom))}
button[disabled]{opacity:.55;cursor:default}
a.btn{color:inherit}
/* orb modes: what the orb controls, beside the pad, same feel as the mood strip */
.omodes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 8px}
.omodes button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:9px 0;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--mut)}
.omodes button.on{background:var(--inv);color:var(--invink);border-color:transparent;font-weight:500}
.pad .padmode{position:absolute;left:12px;top:10px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#FFB347;background:rgba(0,0,0,.35);padding:4px 8px;border-radius:6px;pointer-events:none}
.ax.at,.ax.ab{white-space:nowrap}
/* autopilot: the orb drifts by itself; a dashed ring says "the code has it" */
.orb.auto .coal{box-shadow:inset 0 0 0 1px rgba(255,140,40,.5),0 0 0 6px rgba(255,180,80,.12),0 0 calc(12px + var(--genv,.4)*30px) rgba(255,100,30,.65)}
.orb.auto::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed rgba(255,200,120,.7);animation:spin 6s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.orb{transition:left .1s linear,top .1s linear}
.orb:focus-visible{outline:2px solid #FFC93C;outline-offset:6px}
.pad-ctl .pill{height:36px;padding:0 11px;font-size:12.5px}
/* endless: the next track mixing in */
.disc circle.nextring{opacity:.85;animation:fadein 2s ease}
@keyframes fadein{from{opacity:0}}
.handover{margin-top:12px;border-radius:16px;border:1px dashed var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.handover .mono{color:var(--mut);display:flex;align-items:center;gap:6px}
.handover b{font-family:var(--display);font-variation-settings:"wdth" 80;font-weight:800;font-size:20px;line-height:1.05}
.handover small{color:var(--mut);font-size:12.5px}
.handover.live{border:1px solid var(--ember);background:linear-gradient(120deg,rgba(255,74,28,.14),transparent)}
.handover.live .mono{color:var(--ember)}
.g-trans .btn .sw{transform:scale(.8);margin:0 -2px 0 -4px}
/* instrument switcher */
.kit .kit-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.kit .kit-row .lab{width:62px;flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.kit .kit-row .seg{flex:1}
.kit h2{display:flex;align-items:center;justify-content:space-between}
/* station */
.hero .by .pill{height:30px;border-color:rgba(255,255,255,.4)}
.lyrics-body{margin-top:14px}.lyrics-body p{font-family:var(--display);font-variation-settings:"wdth" 85;font-weight:700;font-size:22px;line-height:1.15;margin-bottom:8px}
.sheet .chips .chip{white-space:normal}
.st.cur .n{background:var(--ember);border-color:var(--ember);color:#fff}
html[data-view="desk"] .scroll{padding-bottom:30px}
html[data-view="desk"] .cols.gen{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 330px}
html[data-view="desk"] .pad{max-width:520px}
.st .b p strong{color:var(--ink);font-weight:600}
i.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:#E6200F;margin-right:6px;vertical-align:middle}
.kit .seg{margin:0;padding:0 0 2px}
.kit .seg button{height:34px;padding:0 11px;font-size:12.5px}
.omodes{grid-template-columns:repeat(5,1fr)}
.omodes button{font-size:10.5px;letter-spacing:.03em}
/* ---- round 3: the matrix (tap on/off), the keyboard, the orb's set positions ---- */
.card h2 .mono{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--mut);margin-left:auto;padding-left:10px;text-transform:none}
.card h2{display:flex;align-items:baseline}
.mx{margin-top:12px;display:flex;flex-direction:column;gap:5px}
.mx-row{display:flex;align-items:center;gap:5px}
.mx-name{width:62px;flex:none;font-weight:600;font-size:12.5px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.mx-name small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--mut)}
.mx-ms{width:24px;height:30px;flex:none;border-radius:7px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--mut);text-align:center}
.mx-ms.on{background:var(--inv);color:var(--invink);border-color:transparent}
.mx-ms.solo.on{background:#FFC93C;color:#1a0800}
.mx-cells{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:2px;min-width:0}
.mx-c{height:30px;border-radius:5px;background:var(--card2);border:1px solid transparent;padding:0;touch-action:manipulation;transition:background .08s}
.mx-c:nth-child(4n+1){margin-left:2px}
.mx-c.on{background:color-mix(in srgb,var(--c) calc(var(--v) * 100%),var(--card2));border-color:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.mx-c.now{outline:1.5px solid var(--ink);outline-offset:0}
.mx-c.on.now{box-shadow:0 0 12px var(--c)}
.mx-row.silent .mx-cells,.mx-row.silent .mx-name{opacity:.3}
.mx-row.resting .mx-cells{opacity:.6}
html[data-view="desk"] .mx-c{height:26px}
.keyb .kb{display:flex;gap:3px;height:120px;margin-top:12px;touch-action:none;-webkit-user-select:none;user-select:none}
.kb-k{flex:1;min-width:0;border-radius:0 0 10px 10px;background:#F6F1E8;color:#15120F;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;padding-bottom:8px;font-family:var(--mono);font-size:11px;font-weight:500;border:1px solid var(--line);transition:transform .06s,background .1s}
.kb-k.blk{background:#1c1917;color:#F4EFE7;height:72%}
.kb-k i{width:7px;height:7px;border-radius:50%;background:transparent}
.kb-k.inch i{background:var(--ember)}
.kb-k.inch{box-shadow:inset 0 -4px 0 var(--ember)}
.kb-k.root i{background:#FFC93C;box-shadow:0 0 8px #FF9A1F}
.kb-k.down{background:var(--hot)!important;color:#1a0800!important;transform:translateY(2px)}
.kb-k span{white-space:nowrap;overflow:hidden;max-width:100%}
.pad .slots{position:absolute;inset:0;pointer-events:none;z-index:2}
.pad .sl{position:absolute;background:rgba(255,190,110,.55);border-radius:2px}
.pad .sl.sy{left:4.5%;width:12px;height:2px;margin-top:-1px}
.pad .sl.sx{bottom:4.5%;height:12px;width:2px;margin-left:-1px}
.omodes{grid-template-columns:repeat(4,1fr)}
.kb-k small{font-size:9px;opacity:.6;margin-top:-3px}
.kb-k.blk{position:relative;z-index:1}
/* ---- one tap to play: the splash (browsers, the Tesla too, need one tap before any sound) ---- */
.splash{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#fff;
  background:radial-gradient(circle at 50% 42%,#3a1408,#120604 55%,#000);isolation:isolate;overflow:hidden;cursor:pointer;width:100%}
.splash .fv.big{left:50%;top:42%;width:min(70vmin,520px);transform:translate(-50%,-50%);z-index:-1}
.splash .embers{z-index:-1}
.sp-wm{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:clamp(44px,8vmin,96px);letter-spacing:-.03em;line-height:1;margin-bottom:auto;margin-top:7vh}
.sp-wm b{color:var(--ember)} .sp-wm small{font-family:var(--mono);font-size:.22em;letter-spacing:.1em;color:#d8cfc4;margin-left:4px}
.sp-play{width:clamp(110px,20vmin,180px);height:clamp(110px,20vmin,180px);border-radius:50%;background:#F4EFE7;color:#0B0A09;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 14px rgba(255,140,40,.18),0 0 60px rgba(255,100,30,.7);animation:breathe 2.6s ease-in-out infinite}
.sp-play .ic{width:45%;height:45%;margin-left:6%}
.sp-say{font-family:var(--display);font-variation-settings:"wdth" 80;font-weight:800;font-size:clamp(30px,5vmin,56px);letter-spacing:-.02em}
.sp-sub{font-family:var(--mono);font-size:clamp(12px,1.8vmin,16px);letter-spacing:.1em;text-transform:uppercase;color:#FFB347;margin-bottom:9vh}
/* ---- touch screens on the desk layout (tablets, the Tesla's 1920x1200 screen): thumb-sized targets ---- */
html[data-touch="1"][data-view="desk"] .pill{height:48px;padding:0 18px;font-size:15px}
html[data-touch="1"][data-view="desk"] .rb{width:56px;height:56px}
html[data-touch="1"][data-view="desk"] .rb.sm{width:48px;height:48px}
html[data-touch="1"][data-view="desk"] .rb.big{width:76px;height:76px}
html[data-touch="1"][data-view="desk"] .rail .nav{height:60px;font-size:17px}
html[data-touch="1"][data-view="desk"] .omodes button{padding:15px 0;font-size:12.5px}
html[data-touch="1"][data-view="desk"] .seg button,html[data-touch="1"][data-view="desk"] .seg.sc button,html[data-touch="1"] .kit .seg button{height:46px;padding:0 15px;font-size:14.5px}
html[data-touch="1"][data-view="desk"] .mx-c{height:40px}
html[data-touch="1"][data-view="desk"] .mx-ms{width:36px;height:40px;font-size:13px}
html[data-touch="1"][data-view="desk"] .mx-name{width:84px;font-size:14px}
html[data-touch="1"] .keyb .kb{height:170px}
html[data-touch="1"][data-view="desk"] .keys{height:80px}
html[data-touch="1"][data-view="desk"] .pbarD{height:96px}
html[data-touch="1"][data-view="desk"] #app{grid-template-rows:1fr 96px}
html[data-touch="1"][data-view="desk"] .pbarD .fyr{height:64px;font-size:22px}
html[data-touch="1"][data-view="desk"] .dial button{font-size:36px;padding:6px 4px 10px}
html[data-touch="1"][data-view="desk"] .pad{max-width:600px}
html[data-touch="1"] .orb{width:28%}
html[data-touch="1"][data-view="desk"] .g-trans .btn{height:64px;font-size:17px}
html[data-touch="1"][data-view="desk"] .fyr{height:76px}
html[data-touch="1"][data-view="desk"] .cols.gen{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}