/* GRIM/OS themes: --fg text, --dim secondary, --br bright glyphs (brackets/borders/keys), --hi active */
:root,.theme-cyan{--fg:#6ff6ff;--dim:#2fa9b8;--br:#e6fdff;--bg:#00090c;--hi:#ffffff;--acc:#ffc640;--bar:#5ff0ff;--barfg:#001418;--glow:0 0 3px rgba(111,246,255,.9),0 0 10px rgba(111,246,255,.35)}
.theme-green{--fg:#4dff7c;--dim:#25b04d;--br:#d8ffe2;--bg:#010a03;--hi:#ffffff;--acc:#ffc640;--bar:#4dff7c;--barfg:#001a06;--glow:0 0 3px rgba(77,255,124,.9),0 0 10px rgba(77,255,124,.35)}
.theme-amber{--fg:#ffbb20;--dim:#b37a00;--br:#fff0c8;--bg:#0b0600;--hi:#ffffff;--acc:#7dffa0;--bar:#ffbb20;--barfg:#1a0d00;--glow:0 0 3px rgba(255,187,32,.9),0 0 10px rgba(255,187,32,.35)}
.theme-red{--fg:#ff4a4a;--dim:#b82626;--br:#ffd6d6;--bg:#0c0101;--hi:#ffffff;--acc:#ffd23f;--bar:#ff4a4a;--barfg:#1a0000;--glow:0 0 3px rgba(255,74,74,.9),0 0 10px rgba(255,40,40,.4)}
.theme-gray{--fg:#d4d4d4;--dim:#8a8a8a;--br:#ffffff;--bg:#060606;--hi:#ffffff;--acc:#ffffff;--bar:#d4d4d4;--barfg:#000;--glow:0 0 3px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.2)}
.theme-fire{--fg:#ffa22e;--dim:#c4451a;--br:#fff3a0;--bg:#0d0300;--hi:#fffbe0;--acc:#ffe14d;--bar:#ff6a1a;--barfg:#1a0400;--glow:0 0 2px #fff09a,0 0 6px rgba(255,140,20,.95),0 0 16px rgba(255,30,0,.6)}
.theme-ice{--fg:#bfeaff;--dim:#6aa8cc;--br:#ffffff;--bg:#010610;--hi:#ffffff;--acc:#9fd8ff;--bar:#cfefff;--barfg:#001020;--glow:0 0 2px #ffffff,0 0 7px rgba(170,225,255,.9),0 0 18px rgba(90,170,255,.45)}
.theme-fire #topbar{background:linear-gradient(90deg,#ff2a00,#ff8a00 55%,#ffe14d)}
.theme-ice #topbar{background:linear-gradient(90deg,#7fc4ff,#d6f0ff 60%,#fff)}
.theme-fire .lbl{background:linear-gradient(90deg,#c4251a,#ff8a00)}
.theme-ice .lbl{background:linear-gradient(90deg,#6aa8cc,#dff4ff)}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:var(--fg);font:20px/1.15 "VT323","IBM Plex Mono",monospace;min-height:100%}
body{background:radial-gradient(ellipse at center,var(--bg) 60%,#000 100%)}
#crt{position:relative;min-height:100vh;display:flex;flex-direction:column;padding:0 0 1.6em;text-shadow:var(--glow);background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.04),transparent 70%)}
/* CRT filter: scanlines + vignette/curvature + glow + flicker; body.nocrt turns all off */
#crt::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.22) 3px)}
#crt::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:51;box-shadow:inset 0 0 140px 30px rgba(0,0,0,.8),inset 0 0 0 6px #000;border-radius:28px/22px}
:root{--corner:#000}
@media (prefers-color-scheme:light){:root{--corner:#fff}}
html{background:var(--corner)}
body:not(.nocrt)::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;border-radius:28px/22px;box-shadow:0 0 0 80px var(--corner)}
body.flicker:not(.nocrt) #crt{animation:flick 6s infinite}
body.nocrt #crt{text-shadow:none;background:none}
body.nocrt #crt::before,body.nocrt #crt::after{display:none}
body.nocrt .win{box-shadow:none}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.97}48%{opacity:.9}49%{opacity:1}80%{opacity:.985}}
a{color:var(--br)}a:hover{background:var(--fg);color:var(--bg);text-shadow:none}
button{font:inherit;color:var(--br);background:transparent;border:1px solid var(--fg);padding:.05em .45em;cursor:pointer;text-shadow:inherit;touch-action:manipulation}
button:hover{background:var(--fg);color:var(--bg);text-shadow:none}
button[aria-pressed=true]{background:var(--fg);color:var(--bg);text-shadow:none}
:focus-visible{outline:2px dashed var(--acc)!important;outline-offset:2px}
.dim{color:var(--dim)}.br{color:var(--br)}
kbd{font:inherit;color:var(--bg);background:var(--br);padding:0 .25em;margin-right:.25em;text-shadow:none;box-shadow:0 0 6px var(--fg)}
#topbar{position:sticky;top:0;z-index:20;display:flex;gap:.8em;align-items:center;background:var(--bar);color:var(--barfg);text-shadow:none;padding:.1em .6em;flex-wrap:wrap}
#topbar .brand{font-weight:bold;letter-spacing:.1em}
#topbar nav{display:flex;gap:.25em;flex-wrap:wrap;flex:1}
#topbar nav button{color:var(--barfg);border:1px solid transparent;text-shadow:none;display:inline-flex;align-items:center;gap:.35em;min-height:32px}
#topbar nav button:hover{border-color:var(--barfg);background:transparent;color:var(--barfg)}
#topbar nav button.on,#topbar nav button[aria-current=true]{background:var(--barfg);color:var(--bar);border-color:var(--barfg)}
.ico{width:16px;height:16px;flex:none;image-rendering:pixelated;shape-rendering:crispEdges}
.ico rect{fill:currentColor}
#tools{display:flex;gap:.3em;align-items:center}
#tools button,#tools select{color:var(--barfg);border:1px solid var(--barfg);background:transparent;font:inherit;text-shadow:none;padding:0 .4em;min-height:28px}
#tools select{cursor:pointer}#tools select option{background:#000;color:#fff}
#tools button:hover{background:var(--barfg);color:var(--bar)}
#clock{margin-left:.3em}
#desk{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,1fr);grid-template-areas:"fetch fetch man" "player tracks tracks" "links links links" "shell shell shell";grid-template-rows:auto;gap:14px;padding:16px 14px 10px;width:100%;max-width:2000px;margin:0 auto}
#tracks{grid-area:tracks;display:flex;flex-direction:column;min-height:0}#tracks .plhead{margin-top:0}#fetch{grid-area:fetch}#man{grid-area:man}#player{grid-area:player}#links{grid-area:links}#shell{grid-area:shell}
.win{border:2px double var(--br);padding:1.1em .8em .7em;position:relative;background:rgba(0,0,0,.3);box-shadow:0 0 14px -6px var(--fg) inset,0 0 6px -2px var(--fg);min-width:0;scroll-margin-top:3em}
.win.focus{border-color:var(--hi);box-shadow:0 0 18px -4px var(--fg) inset,0 0 12px var(--fg)}
.wt{position:absolute;top:-.62em;left:.8em;margin:0;font-size:1em;font-weight:normal;color:var(--br)}
.wt span{background:var(--bg);padding:0 .2em}
.fetchbody{display:flex;flex-wrap:wrap;gap:1em;align-items:flex-start}
.logo{margin:0;font-size:12px;line-height:1.05;color:var(--br);font-family:"IBM Plex Mono",monospace}
.info{list-style:none;margin:0;padding:0}
.info b{color:var(--acc)}
.info .dim{color:var(--br)}
.swatch i{display:inline-block;width:1.2em;height:.8em;margin-right:2px}
.swatch i:nth-child(1){background:#6ff6ff}.swatch i:nth-child(2){background:#4dff7c}.swatch i:nth-child(3){background:#ffbb20}.swatch i:nth-child(4){background:#ff4a4a}.swatch i:nth-child(5){background:linear-gradient(#ffe14d,#ff2a00)}.swatch i:nth-child(6){background:linear-gradient(#fff,#7fc4ff)}.swatch i:nth-child(7){background:#bbb}
.manbody{overflow:auto;max-height:15em}
#man{display:flex;flex-direction:column;min-height:0}
.manbody h3{margin:.5em 0 .1em;font-size:1em;color:var(--br)}
.manbody p{margin:0 0 .3em 2ch}.manbody .mh{margin:0;color:var(--dim)}
#player{display:flex;flex-direction:column;min-height:0}
.np{display:flex;gap:16px;align-items:center}
.cover{margin:0;font:11px/11px "IBM Plex Mono",monospace;letter-spacing:0;white-space:pre;color:var(--fg);flex:none;box-sizing:content-box;width:37ch;height:209px;min-width:37ch;max-width:37ch;padding:6px;overflow:hidden;contain:strict;font-variant-ligatures:none;font-kerning:none}
.cover .l{color:var(--hi)}.cover .a{color:var(--rec,var(--acc))}.cover .g{color:var(--dim)}
.npinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3em}
#nptitle{color:var(--hi);font-size:1.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.2em}
#bplay{color:var(--bg);background:var(--br);text-shadow:none;min-width:6em}
.row{min-width:0;max-width:100%}
.volrow{display:flex;align-items:center;gap:.3em;width:100%;box-sizing:border-box;overflow:hidden;white-space:nowrap}
.volrow button{flex:none}
#volbar{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;letter-spacing:-1px;color:var(--br)}
#volpct{flex:none;white-space:pre}
.np>*,.npinfo>*,.transport,.viz>*{min-width:0;max-width:100%;box-sizing:border-box}
#player,#tracks,#links,#shell,#fetch,#man{min-width:0;box-sizing:border-box}
.transport{overflow:hidden}
.viz{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"wave" "spec";gap:10px;margin-top:10px}
.vizbox{border:1px solid var(--fg);padding:2px 6px 6px;min-width:0;display:flex;flex-direction:column}
.vb-spec{grid-area:spec}.vb-wave{grid-area:wave}
.lbl{color:var(--bg);background:var(--fg);align-self:flex-start;padding:0 .4em;font-size:.8em;text-shadow:none;margin:4px 0 4px}
#spec{margin:0;font:13px/12px "IBM Plex Mono",monospace;white-space:pre;overflow:hidden;width:100%;height:110px;color:var(--fg)}
#spec .p{color:var(--acc)}#spec .h{color:var(--br)}
canvas{display:block;width:100%;background:rgba(0,0,0,.4)}
.ringwrap{position:relative;flex:none;padding:22px;box-sizing:content-box;contain:layout}
#ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ringwrap .cover{position:relative;z-index:1}
#wave{cursor:pointer;height:56px;touch-action:none}
.plhead{display:flex;gap:.4em;margin-top:10px;align-items:center}
.plhead label{color:var(--br)}
input{font:inherit;color:var(--hi);background:transparent;border:none;border-bottom:1px solid var(--fg);flex:1;outline:none;caret-color:var(--br);text-shadow:inherit;min-width:0}
#playlist{list-style:none;margin:4px 0 0;padding:0;max-height:340px;overflow:auto;scrollbar-color:var(--fg) transparent}
#playlist .div{color:var(--br);padding-top:.35em;white-space:nowrap;overflow:hidden;cursor:default}
#playlist .div small{color:var(--acc);font-size:.85em}
#playlist .tr{display:flex;gap:.6em;cursor:pointer;padding:0 .3em}
#playlist .tr .t{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#playlist .tr .star{color:var(--acc);text-shadow:0 0 6px var(--acc)}
#playlist .tr:hover{background:rgba(255,255,255,.08)}
#playlist .tr.sel{background:var(--fg);color:var(--bg);text-shadow:none}
#playlist .tr.sel .dim,#playlist .tr.sel .star{color:var(--bg);text-shadow:none}
#playlist .tr.cur{color:var(--hi);font-weight:bold}
#playlist .tr.cur .n::before{content:"▶";color:var(--br)}
#playlist .tr.cur:not(.sel){box-shadow:inset 3px 0 0 var(--br);background:rgba(255,255,255,.06)}
#playlist .tr.sel,#playlist .tr.sel.cur,#playlist .tr.sel:hover{background:var(--fg);color:var(--barfg);font-weight:bold;text-shadow:none}
#playlist .tr.sel .dim,#playlist .tr.sel .star,#playlist .tr.sel .n::before{color:var(--barfg);text-shadow:none}
#out{min-height:18em;max-height:520px;overflow:auto;white-space:pre-wrap;word-break:break-word}
#shell{display:flex;flex-direction:column}
#prompt{display:flex;gap:.5em}#prompt label{color:var(--acc)}
.lnk{list-style:none;padding:0;margin:0}.lnk li{color:var(--dim)}.lnk a{margin-left:.5em}
#keys{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--bg);border-top:1px solid var(--br);display:flex;flex-wrap:wrap;gap:.2em 1em;padding:.15em .6em;font-size:.85em}
#keys button{border:none;padding:0;color:inherit}
#boot{position:fixed;inset:0;z-index:100;background:#000;color:var(--fg);text-shadow:var(--glow);padding:1.2em;overflow:hidden;cursor:pointer}
#boot pre{margin:0;font:inherit;white-space:pre-wrap}
#boot .skip{position:absolute;bottom:1em;right:1em;color:var(--br);animation:blink 1s steps(1) infinite}
#boot.gone{opacity:0;transition:opacity .4s;pointer-events:none}
@keyframes blink{50%{opacity:0}}
.cursor::after{content:"█";animation:blink 1s steps(1) infinite}
#help{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:1em}
#help[hidden]{display:none}
#help .win{background:var(--bg);max-width:100%;max-height:100%;overflow:auto}
#help pre{font:inherit;margin:0 0 .6em}
#matrix{position:fixed;inset:0;z-index:95;background:#000;cursor:pointer}
/* large screens: fill the viewport, playlist absorbs remaining height */
@media (min-width:1100px) and (min-height:900px){
 #player>*{flex:none}
 #tracks>#playlist{flex:1 1 0;max-height:none;min-height:0}
 #player{overflow:visible}
 #shell #out{min-height:22em;max-height:60vh}
}
@media (min-width:1600px){
 html,body{font-size:21px}
}
@media (max-width:1099px){#desk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"fetch man" "player tracks" "links links" "shell shell";grid-template-rows:auto}}
@media (max-width:960px){
 #desk{grid-template-columns:1fr;grid-template-areas:"fetch" "player" "tracks" "links" "man" "shell";padding:12px 6px}
 html,body{font-size:18px}
 .logo{font-size:7.5px}
 .viz{grid-template-columns:1fr;grid-template-areas:"wave" "spec"}
 .ringwrap{padding:16px}
 .np{flex-direction:column;align-items:center}
 .cover{font-size:8px;line-height:8px;height:152px}
 #keys{display:none}
 #crt{padding-bottom:1em}
 #clock{display:none}
 #topbar{gap:.3em}
 #topbar nav{flex-wrap:nowrap;overflow-x:auto;font-size:.85em;order:3;flex-basis:100%}
 #topbar nav .lb{display:none}
 #topbar nav button.on .lb{display:inline}
 #tools{margin-left:auto;font-size:.85em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (min-width:1100px){
 .fetchbody{flex-wrap:nowrap}
 .info{flex:1;min-width:0}
 .info li{break-inside:avoid}
 .manbody{max-height:9.5em}
}
@media (min-width:1500px){.info{columns:2;column-gap:2em}}
@media (min-width:1100px) and (max-width:1499px){.logo{font-size:9px}}

/* photos */
#photos{margin:14px;scroll-margin-top:3em}
.gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ph{border:1px solid var(--br);background:#000;box-shadow:0 0 10px -3px var(--fg);cursor:pointer;display:flex;flex-direction:column}
.ph .bar{display:flex;justify-content:space-between;gap:.5em;padding:0 .4em;background:var(--fg);color:var(--bg);text-shadow:none;font-size:.8em;white-space:nowrap;overflow:hidden}
.ph .frame{position:relative;aspect-ratio:4/5;overflow:hidden}
.ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s,filter .3s}
.ph .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 30px rgba(0,0,0,.7);border-radius:6px/5px;opacity:.6;transition:opacity .3s}
.ph:hover .frame::after,.ph:focus-visible .frame::after{opacity:1;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.ph:hover img,.ph:focus-visible img{transform:scale(1.04);filter:contrast(1.15) saturate(1.2)}
.ph .cap{font-size:.8em;padding:.1em .4em;color:var(--dim)}
.ph:hover{border-color:var(--hi);box-shadow:0 0 16px var(--fg)}
body.nocrt .ph .frame::after{display:none}body.nocrt .ph{box-shadow:none}
#lb{position:fixed;inset:0;z-index:92;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:1em;touch-action:pan-y}
#lb[hidden]{display:none}
.lbwin{background:var(--bg);max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
#lbimg{max-width:min(90vw,800px);max-height:calc(100vh - 7em);object-fit:contain;display:block;border:1px solid var(--dim)}
.lbnav{display:flex;gap:.6em;align-items:center;margin-top:.4em}
@media (max-width:960px){#photos{margin:12px 6px}.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ph .bar span+span{display:none}}

/* photos as its own full-screen view */
#photos{position:fixed;inset:0;z-index:90;margin:0;overflow:auto;background:var(--bg);padding:14px;box-sizing:border-box}
#photos[hidden]{display:none}
body.photos-open{overflow:hidden}
.phhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* modals: mail / irc */
.modal{position:fixed;inset:0;z-index:91;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:1em}
.modal[hidden]{display:none}
.modal .win{background:var(--bg);max-width:100%;max-height:100%;overflow:auto;box-sizing:border-box}
.cwin{width:min(560px,100%)}
.iwin{width:min(1000px,100%);height:min(720px,100%);display:flex;flex-direction:column}
#ircf{flex:1;width:100%;min-height:0;border:1px solid var(--br);background:#fff}
.mbar{display:flex;gap:1em;justify-content:flex-end;align-items:center;margin-bottom:.6em}.mbar .dim{margin-right:auto}
.cform{display:flex;flex-direction:column;gap:.5em}
.cform label{display:flex;flex-direction:column;gap:.15em;color:var(--br)}
.cform input,.cform select,.cform textarea{font:inherit;color:var(--hi);background:rgba(0,0,0,.5);border:1px solid var(--br);padding:.3em .4em;width:100%;box-sizing:border-box;caret-color:var(--hi)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:1px solid var(--hi)}
.cform textarea{resize:vertical}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cbtns{display:flex;gap:1em;align-items:center;flex-wrap:wrap}
.cstatus{color:var(--hi)}
body.standalone .solo{display:flex;justify-content:center;padding:3em 1em}

.gettip{margin:.4em 0 0;font-size:.82em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.getlink{all:unset;cursor:pointer;color:var(--fg);text-decoration:underline dotted;text-underline-offset:2px}
.getlink:hover,.getlink:focus-visible{color:var(--hi);outline:1px dotted var(--hi)}

/* irc client */
#ircbox,.irc{flex:1;min-height:0;display:flex;flex-direction:column;gap:.4em}
.irc-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 11em;gap:.5em}
.irc-log{overflow:auto;border:1px solid var(--br);padding:.3em .5em;white-space:pre-wrap;word-break:break-word;min-height:10em;background:rgba(0,0,0,.35)}
.irc-users{list-style:none;margin:0;padding:.3em .5em;border:1px solid var(--br);overflow:auto;white-space:nowrap;text-overflow:ellipsis}
.irc-ts{color:var(--dim)}.irc-sys{color:var(--dim)}.irc-me{font-style:italic}.irc-l.self{opacity:.92}
.irc-in{display:flex;gap:.5em;align-items:center;border:1px solid var(--br);padding:.2em .5em}
.irc-pr{color:var(--hi);white-space:nowrap}
.irc-in input{flex:1;min-width:0;font:inherit;color:var(--hi);background:transparent;border:0;outline:0;caret-color:var(--hi)}
@media (max-width:700px){.irc-main{grid-template-columns:1fr}.irc-users{display:none}}
body.standalone .solo .iwin{height:calc(100vh - 6em);width:min(1100px,100%);display:flex;flex-direction:column}

#matrix.fx-intro{z-index:101;transition:opacity .15s linear}
.np{flex-wrap:wrap;justify-content:center}.npinfo{flex:1 1 230px}

.transport{flex-wrap:nowrap;gap:.25em}.transport button{padding-left:.35em;padding-right:.35em;white-space:nowrap}#bplay{min-width:0;padding-left:.6em;padding-right:.6em}
.npinfo{align-self:flex-end;padding-bottom:4px}
@media (max-width:960px){.npinfo{flex:0 0 auto;align-self:stretch}}

/* DJ FX knobs (Ableton-style) */
.knob{position:relative;width:38px;display:flex;flex-direction:column;align-items:center;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;text-shadow:none}
.knob svg{width:36px;height:36px;display:block;overflow:visible}
.knob .kbody{fill:rgba(255,255,255,.07);stroke:rgba(0,0,0,.6);stroke-width:1}
.knob .ktrack{fill:none;stroke:var(--dim);stroke-opacity:.45;stroke-width:2.6;stroke-linecap:butt}
.knob .kval{fill:none;stroke:var(--fg);stroke-width:2.6;stroke-linecap:butt;filter:drop-shadow(0 0 2px var(--fg))}
.knob .kptr{stroke:var(--br);stroke-width:1.8;stroke-linecap:round}
.knob .klbl{font:9px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--dim);margin-top:1px}
.knob.on .klbl{color:var(--fg)}
.knob .kro{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font:10px/1 "IBM Plex Mono",monospace;white-space:nowrap;color:var(--barfg);background:var(--fg);padding:1px 3px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:3}
.knob:hover .kro,.knob.drag .kro,.knob:focus-visible .kro{opacity:1}
.knob:focus-visible .kbody{stroke:var(--br)}
/* narrow player (class set from the player's own width by a ResizeObserver, so it also works in desktop-site mode) */
.np.narrow{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:6px}
.np.narrow .ringwrap{align-self:center}
.np.narrow .npinfo{flex:0 0 auto;align-self:stretch;width:100%;min-width:0}
.np.narrow .transport{flex-wrap:wrap;row-gap:.3em}

/* pop-out terminal */
.termpop{font-size:.8em;line-height:1;padding:0 .3em;margin-left:.4em;vertical-align:middle;background:var(--bg)}
#shell.floating{position:fixed;z-index:90;margin:0;resize:both;overflow:hidden;min-width:320px;min-height:200px;max-width:100vw;max-height:100vh;background:var(--bg);box-shadow:0 0 0 1px var(--fg),0 0 24px -4px var(--fg),0 10px 40px rgba(0,0,0,.8);padding:0 .6em .5em;display:flex;flex-direction:column}
#shell.floating .wt{position:static;display:flex;align-items:center;justify-content:space-between;margin:0 -.6em .4em;padding:.15em .5em;background:var(--bar);color:var(--barfg);cursor:move;user-select:none;touch-action:none}
#shell.floating .wt span{background:none}
#shell.floating .termpop{color:var(--barfg);border-color:var(--barfg);background:transparent}
#shell.floating #out{flex:1;min-height:0;max-height:none}
#shell.floating.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;height:55vh!important;resize:none;border-radius:8px 8px 0 0}
#shell.floating.sheet .wt{cursor:default}
/* playlist fills the row next to the player at every desktop width */
@media (min-width:700px){#tracks{align-self:stretch}#tracks>#playlist{flex:1 1 0;max-height:none;min-height:240px}}
/* modal windows scroll, so keep their title inside the box instead of on the (clipped) border */
.modal .win{padding-top:1.9em}
.modal .win>.wt{top:.35em;line-height:1.2}
.modal .win>.wt span{padding:0 .3em}
/* ---------- ANSI palette (warm, muted retro; per-theme tweaks keep ≥4.5:1 on each bg) ---------- */
:root{--a0:#4a4038;--a1:#e07a62;--a2:#a8bd72;--a3:#dcaa4c;--a4:#86a6d6;--a5:#cf90ae;--a6:#74c4b4;--a7:#e2d8bf;--a8:#958a7c;--a9:#ff9a7e;--a10:#c8de90;--a11:#f6cc70;--a12:#aec8f2;--a13:#eeacca;--a14:#9ae8d8;--a15:#fff5de;
 --ab0:#1c1a17;--ab1:#7a4a32;--ab2:#6f7f52;--ab3:#b8642e;--ab4:#6c6838;--ab5:#b8893e;--ab6:#d8ccb0;--ab7:#ece4d0}
.theme-green{--a2:#c4d890;--a10:#e2f2b8}
.theme-amber{--a3:#f0c070;--a11:#ffe0a0;--a1:#ff8a70}
.theme-red{--a1:#ff9a86;--a9:#ffbcae;--a5:#e8a6c4}
.theme-gray{--a1:#d8a090;--a2:#b8c098;--a3:#d8c08a;--a4:#a8b8d0;--a5:#c8a8b8;--a6:#a0c8c0}
.theme-fire{--a3:#f2c88a;--a11:#ffe4b0;--a1:#ff8f7a;--a4:#9ab6e6}
.theme-ice{--a4:#b4cdf6;--a6:#a8e0f0;--a12:#d0e0ff}
.a0{color:var(--a0)}.a1{color:var(--a1)}.a2{color:var(--a2)}.a3{color:var(--a3)}.a4{color:var(--a4)}.a5{color:var(--a5)}.a6{color:var(--a6)}.a7{color:var(--a7)}
.a8{color:var(--a8)}.a9{color:var(--a9)}.a10{color:var(--a10)}.a11{color:var(--a11)}.a12{color:var(--a12)}.a13{color:var(--a13)}.a14{color:var(--a14)}.a15{color:var(--a15)}
.ab0{background:var(--ab0)}.ab1{background:var(--ab1)}.ab2{background:var(--ab2)}.ab3{background:var(--ab3)}.ab4{background:var(--ab4)}.ab5{background:var(--ab5)}.ab6{background:var(--ab6)}.ab7{background:var(--ab7)}
.ab8{background:var(--a8)}.ab9{background:var(--a9)}.ab10{background:var(--a10)}.ab11{background:var(--a11)}.ab12{background:var(--a12)}.ab13{background:var(--a13)}.ab14{background:var(--a14)}.ab15{background:var(--a15)}
#out [class*="ab"]{text-shadow:none}
.ab-b{font-weight:bold}.ab-d{opacity:.62}.ab-i{font-style:italic}.ab-u{text-decoration:underline;text-underline-offset:2px}
#out span[class^="a"]:not(.ab-b):not(.ab-d):not(.ab-i):not(.ab-u){text-shadow:0 0 4px currentColor}
/* syntax highlighting */
.sx-cmd{color:var(--a11);font-weight:bold}.sx-bad{color:var(--a9);text-decoration:underline wavy;text-underline-offset:3px}
.sx-flag{color:var(--a13)}.sx-var{color:var(--a12)}.sx-var i{font-style:italic}.sx-num{color:var(--a3)}.sx-str{color:var(--a10)}
.sx-op{color:var(--a5);font-weight:bold}.sx-path{color:var(--a14);text-decoration:underline;text-underline-offset:2px}.sx-arg{color:var(--hi)}
.pr-uh{color:var(--a10);font-weight:bold}.pr-path{color:var(--a12);font-weight:bold}
.neo b{font-weight:bold}
/* input overlay */
.cmdwrap{position:relative;flex:1;display:flex;min-width:0;overflow:hidden}
.cmdwrap #cmd{color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;padding:0;margin:0;width:100%}
.cmdwrap #cmd::selection{background:var(--fg);-webkit-text-fill-color:var(--bg)}
.cmdhl{position:absolute;left:0;top:0;bottom:1px;display:flex;align-items:center;white-space:pre;pointer-events:none;color:var(--hi);text-shadow:inherit;font:inherit}
body.nocolor #out span[class^="a"],body.nocolor .cmdhl span,body.nocolor .pr-uh,body.nocolor .pr-path{color:inherit!important;font-weight:inherit;font-style:inherit;text-decoration:none;background:none!important;opacity:1}
body.nocolor .sx-bad{text-decoration:none}
/* ---------- fixed-size transport buttons (no reflow on state change) ---------- */
.transport button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:1.6em;line-height:1;white-space:nowrap;overflow:hidden;padding:0;font-variant-numeric:tabular-nums;flex:none}
#bprev,#bnext{width:3.4ch}#bplay{width:9ch;min-width:0;padding:0}#brep{width:11ch}#bshuf{width:9ch}
/* ---------- FX panel above the record ---------- */
.fxbox{margin:0 0 6px}
#fxknobs{display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:flex-end;margin:2px 0 0;padding:0 4px}
#fxknobs .knob{width:auto;min-width:0;flex:0 1 64px;padding-top:12px}
#fxknobs .knob svg{width:38px;height:38px}
#fxknobs .kled{position:absolute;top:2px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#1a1f22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 2px rgba(0,0,0,.8);transition:background .08s,box-shadow .08s}
#fxknobs .knob.on .kled{background:var(--led);box-shadow:0 0 4px 1px var(--led),0 0 10px 2px color-mix(in srgb,var(--led) 55%,transparent),inset 0 -1px 1px rgba(0,0,0,.25)}
#fxknobs .k-filter{--led:#3fe4ff}#fxknobs .k-res{--led:#ffb12a}#fxknobs .k-verb{--led:#4dff6e}#fxknobs .k-crush{--led:#ff4646}
#fxknobs .kro{top:-14px}
@media (max-width:480px){#fxknobs .knob svg{width:32px;height:32px}#fxknobs .knob{flex-basis:56px}}
/* FX panel v2: LED right of label, compact */
.fxbox{padding-bottom:3px}
.fxbox>.lbl{margin:3px 0 0}
#fxknobs{margin:-6px 0 0;align-items:center}
#fxknobs .knob{padding-top:0}

#fxknobs .knob svg{width:38px;height:38px}
#fxknobs .klbl{display:inline-flex;align-items:center;gap:4px;margin-top:-2px;line-height:1}
#fxknobs .kled{position:static;margin:0;width:6px;height:6px;flex:none}
#fxknobs .kro{top:-12px}
@media (max-width:480px){#fxknobs .knob svg{width:36px;height:36px}}
/* transport spans the VOL row; widths proportional, independent of text */
.npinfo .transport{display:flex;width:100%;gap:.25em;flex-wrap:nowrap}
.npinfo .transport button{min-width:0;flex-basis:0;flex-shrink:1}
#bprev,#bnext{width:auto;flex-grow:3.4}#bplay{width:auto;flex-grow:9}#brep{width:auto;flex-grow:11}#bshuf{width:auto;flex-grow:9}
.volrow #volpct{margin-left:auto}
/* waveform tap-to-arm (touch) */
#wave{touch-action:pan-y}
.vb-wave.armed{border-color:var(--br);animation:armpulse 1s ease-in-out infinite}
.vb-wave.armed .lbl{background:var(--br)}
@keyframes armpulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 10px 1px var(--fg),inset 0 0 8px -2px var(--fg)}}
/* ---------- colorful themes (sampled from Tom's ls/htop screenshots) ---------- */
.theme-silicon{--fg:#b3c088;--dim:#8f9c5a;--br:#eef4d8;--bg:#2b2b2b;--hi:#ffffff;--acc:#eaaf24;--bar:#c9dca2;--barfg:#1c2212;--ring:#6fb8b4;--glow:0 0 3px rgba(179,192,136,.55),0 0 9px rgba(111,184,180,.18);
 --specgrad:linear-gradient(90deg,#5fb3b0,#9ccf5a 35%,#c8d84a 55%,#eaaf24 75%,#e06c5c);
 --a0:#9a9a90;--a1:#e8766a;--a2:#9ccf5a;--a3:#eaaf24;--a4:#6ab0d4;--a5:#d088c8;--a6:#6fc4be;--a7:#d8d8c8;--a8:#a8a89c;--a9:#ff9a8a;--a10:#c4e27a;--a11:#ffd060;--a12:#98ccec;--a13:#eaa8e0;--a14:#98e2dc;--a15:#f6f6ec}
.theme-silicon #topbar{background:linear-gradient(90deg,#eaaf24,#e8892a 70%,#e07a2a)}
.theme-silicon .lbl{background:linear-gradient(90deg,#8f9c5a,#5f9a98)}
.theme-nightshift{--fg:#a9b8f0;--dim:#7d89c4;--br:#e2e8ff;--bg:#1a1b26;--hi:#ffffff;--acc:#e0cf6a;--bar:#7ecfff;--barfg:#0b1424;--ring:#b28dfd;--glow:0 0 3px rgba(169,184,240,.6),0 0 10px rgba(126,207,255,.22);
 --specgrad:linear-gradient(90deg,#7ecfff,#79a3f4 35%,#9196d9 55%,#b288fd 75%,#e0cf6a);
 --a0:#8088b0;--a1:#f7768e;--a2:#9ece6a;--a3:#e0cf6a;--a4:#7aa2f7;--a5:#bb9af7;--a6:#7dcfff;--a7:#c0caf5;--a8:#9aa2c8;--a9:#ff98aa;--a10:#b8e08a;--a11:#f0e08a;--a12:#a0bcff;--a13:#d0b8ff;--a14:#a8e0ff;--a15:#eef0ff}
.theme-nightshift #topbar{background:linear-gradient(90deg,#9a7fd9,#b288fd 60%,#c8a8ff)}
.theme-nightshift .lbl{background:linear-gradient(90deg,#79a3f4,#b28dd9)}
.theme-neon{--fg:#4cc6ff;--dim:#3a98d0;--br:#e0f4ff;--bg:#070825;--hi:#ffffff;--acc:#ffd23f;--bar:#e48dfc;--barfg:#1a0424;--ring:#df81fc;--glow:0 0 3px rgba(76,198,255,.8),0 0 12px rgba(223,129,252,.3);
 --specgrad:linear-gradient(90deg,#41afef,#7f8cf6 30%,#df81fc 55%,#e312a0 72%,#e28020 86%,#dbcf4e);
 --a0:#7a7aa0;--a1:#ff5c7a;--a2:#5ee8a0;--a3:#ffd23f;--a4:#41afef;--a5:#df81fc;--a6:#4ce0ff;--a7:#d0d0e0;--a8:#9a9ab8;--a9:#ff8aa0;--a10:#8affc0;--a11:#ffe27a;--a12:#80ccff;--a13:#f0a8ff;--a14:#8af0ff;--a15:#ffffff}
.theme-neon #topbar{background:linear-gradient(90deg,#aba6a6,#cfcaca);--barfg:#14142a;color:#14142a}
.theme-neon .lbl{background:linear-gradient(90deg,#e312a0,#df81fc)}
.theme-silicon #spec,.theme-nightshift #spec,.theme-neon #spec{background:var(--specgrad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.theme-silicon #spec .h,.theme-nightshift #spec .h,.theme-neon #spec .h{color:var(--br)}
/* record v2: dim grooves, bright edge ring, solid colored label, true black spindle hole */
.cover .v{color:var(--dim);opacity:.85}
.cover .e{color:var(--br);text-shadow:0 0 3px var(--br)}
.cover .lf{background:color-mix(in srgb,var(--rec,var(--acc)) 78%,#fff 0%);color:#0a0a0a;text-shadow:none}
.cover .lf.l{font-weight:bold;color:#000}
.cover .hole{background:color-mix(in srgb,var(--rec,var(--acc)) 78%,#fff 0%);color:#000;text-shadow:0 0 0 #000,0 0 1.5px var(--br);font-weight:bold}
.theme-silicon #playlist .tr.sel,.theme-nightshift #playlist .tr.sel,.theme-neon #playlist .tr.sel,.theme-silicon #playlist .tr.sel:hover,.theme-nightshift #playlist .tr.sel:hover,.theme-neon #playlist .tr.sel:hover{background:var(--bar);color:var(--barfg)}
/* help v2 */
.helpout{white-space:normal;margin:.2em 0 .4em}
.helpout .hs{color:var(--a5);font-weight:bold;margin-top:.45em}
.helpout .hr{display:flex;flex-wrap:wrap;column-gap:1.5ch;padding-left:2ch}
.helpout .hc{min-width:min(34ch,100%);white-space:pre-wrap;word-break:break-word}
.helpout .hc .sx-cmd{font-weight:bold}
.helpout .hd,.helpout .sep,.helpout .hn{color:var(--dim)}
.helpout .hf{padding-left:2ch;word-break:break-word}
.helpout .hf b{font-weight:bold;color:var(--a3)}
.theme-silicon #topbar,.theme-nightshift #topbar,.theme-neon #topbar{z-index:52}
/* record area blends into the panel in every theme */
#ring{background:transparent}
.ringwrap,.ringwrap .cover{background:transparent}
.theme-silicon #spec .h,.theme-nightshift #spec .h,.theme-neon #spec .h{color:transparent}