/* a console you'd find on a deep-space vessel: dark glass, hairlines, lamps, readouts.
   cyan is the system, amber is anything you've set (the loop), red is only ever a peak. */
:root{
  --glass:rgba(5,9,17,.74);--glass2:rgba(8,14,26,.82);
  --hair:rgba(140,200,255,.16);--hair2:rgba(140,200,255,.32);
  --cyan:#7fe0ff;--cyan-dim:#3b6f8c;--amber:#ffb547;--red:#ff4d5e;--green:#7dffb2;
  --text:#cfe6ff;--dim:#5f7c9c;--ink:#02040a;
  --mono:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--text);font:14px var(--mono);letter-spacing:.04em}
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;display:block}
main{width:min(640px,calc(100% - 28px));margin:12px auto 40px}

.player{position:sticky;top:0;z-index:5;padding:12px;background:rgba(4,7,14,.88);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4)}
/* corner brackets — the panel is bolted in, not floating */
.cn{position:absolute;width:12px;height:12px;border:0 solid var(--cyan);opacity:.7;pointer-events:none}
.tl{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}.tr{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px}
.bl{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px}.br{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}

/* status strip */
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:0 2px 10px;border-bottom:1px solid var(--hair);font-size:11px;color:var(--dim)}
.lamp{display:flex;align-items:center;gap:6px}
.led{width:7px;height:7px;border-radius:50%;background:#16222f;box-shadow:inset 0 0 2px #000;transition:background .08s,box-shadow .08s}
.led.pwr{background:var(--green);box-shadow:0 0 6px var(--green)}
.led.on{background:var(--cyan);box-shadow:0 0 7px var(--cyan)}
.led.amber.on{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.led.blink{animation:blink 1.1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
.ro{color:var(--cyan)}.ro.dim{color:var(--dim)}
.grow{flex:1}

/* readout */
.lcd{margin-top:10px;padding:10px 12px;background:var(--ink);border:1px solid var(--hair);position:relative;overflow:hidden}
.lcd:after{content:"";position:absolute;inset:0;pointer-events:none;    /* scanlines */
  background:repeating-linear-gradient(0deg,rgba(127,224,255,.035) 0 1px,transparent 1px 3px)}
.ln{display:flex;align-items:baseline;gap:10px;min-width:0}
.tag{flex:none;width:22px;color:var(--dim);font-size:11px}
#now{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big{margin-top:6px;align-items:center}
#clock{font-weight:400;font-size:30px;line-height:1;color:var(--cyan);text-shadow:0 0 10px rgba(127,224,255,.45);font-variant-numeric:tabular-nums}
#dur{color:var(--dim);font-size:14px}
#meter{flex:1;height:14px;min-width:60px;margin-left:6px}
.tele{margin-top:8px;padding-top:6px;border-top:1px dashed var(--hair);color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tele b{font-weight:400;color:var(--text)}.tele .am{color:var(--amber)}

/* screens */
#wave,#over{display:block;width:100%;margin-top:10px;border:1px solid var(--hair);background:var(--ink);touch-action:pan-y;cursor:crosshair}
#wave{height:120px}#over{height:22px;margin-top:4px;cursor:pointer}
#vis{position:relative;margin-top:10px;aspect-ratio:16/9;border:1px solid var(--hair);background:#000;overflow:hidden}
#vis[hidden]{display:none}#viscv{display:block;width:100%;height:100%;cursor:pointer}
#visname{position:absolute;left:10px;top:8px;color:var(--cyan);font-size:11px;letter-spacing:.2em;text-shadow:0 0 6px #000;transition:opacity .6s;pointer-events:none}
#visfull{position:absolute;right:8px;bottom:8px;padding:2px 7px;font-size:14px;opacity:.55}#visfull:hover{opacity:1}
#vis.big{position:fixed;inset:0;z-index:50;margin:0;border:0;aspect-ratio:auto}body.visbig{overflow:hidden}

/* switches */
button,.btn{font:12px var(--mono);letter-spacing:.12em;cursor:pointer;color:var(--text);background:rgba(127,224,255,.04);
  border:1px solid var(--hair2);padding:7px 11px;text-decoration:none;border-radius:0;transition:background .12s,box-shadow .12s,color .12s}
button:hover,.btn:hover{background:rgba(127,224,255,.12);border-color:var(--cyan)}
button:active,.btn:active{background:rgba(127,224,255,.22)}
.controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
#play{min-width:74px;color:var(--ink);background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(127,224,255,.35)}
#play.live{background:transparent;color:var(--cyan)}
#zout,#zin{min-width:32px;padding:7px 0}
#loop.on{color:var(--ink);background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px rgba(255,181,71,.35)}
#visbtn.on{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}
#lvl{font-size:11px;padding:5px 8px}#lvl:not(.off){color:var(--cyan);border-color:var(--cyan)}#lvl.off{color:var(--dim)}

/* gain */
.vol{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:11px}
.vol label{color:var(--dim)}
.volwrap{flex:1;display:flex;position:relative}
.volwrap:after{content:"";position:absolute;left:calc(6px + (100% - 12px) * 40 / 52);top:2px;bottom:2px;width:1px;background:var(--amber);opacity:.8;pointer-events:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan))}
input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:16px;margin-top:-7px;background:var(--ink);border:1px solid var(--cyan);box-shadow:0 0 8px rgba(127,224,255,.5)}
input[type=range]::-moz-range-thumb{width:12px;height:16px;border-radius:0;background:var(--ink);border:1px solid var(--cyan)}
#volout{min-width:58px;padding:3px 6px;background:var(--ink);border:1px solid var(--hair);color:var(--cyan);font-weight:400;text-align:right}

.row{display:flex;gap:6px;margin-top:12px}
#dl{margin-left:auto;color:var(--amber);border-color:rgba(255,181,71,.5)}#dl:hover{background:rgba(255,181,71,.12);border-color:var(--amber)}

/* catalog */
#queue>p{margin:20px 0 6px;color:var(--dim);font-size:11px;letter-spacing:.2em}
ol{margin:0;padding:0;list-style:none;border:1px solid var(--hair);background:var(--glass2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
li button{display:grid;grid-template-columns:36px 1fr 48px;width:100%;padding:8px 10px;border:0;border-left:2px solid transparent;border-bottom:1px solid rgba(140,200,255,.07);background:transparent;color:var(--text);text-align:left;letter-spacing:.04em;font-size:13px}
li button:hover{background:rgba(127,224,255,.07);border-left-color:var(--cyan-dim)}
li.on button{background:rgba(127,224,255,.1);border-left-color:var(--cyan);color:#fff}
li i{color:var(--dim);font-style:normal}li.on i{color:var(--cyan)}
li small{display:block;color:var(--dim);margin-top:2px;font-size:11px}
li em{color:var(--cyan-dim);font-style:normal;font-size:12px;text-align:right}

@media(max-width:480px){
  main{width:calc(100% - 16px);margin:6px auto 24px}
  .player{padding:10px}
  #clock{font-size:26px}
  button,.btn{padding:6px 7px;font-size:11px;letter-spacing:.08em}#play{min-width:58px}
  .controls{flex-wrap:nowrap;gap:4px}#zout,#zin{min-width:26px}
  .vol{gap:6px}#volout{min-width:48px}#lvl{padding:4px 6px;font-size:10px}
  .hud{padding-bottom:8px}.lcd{padding:8px 10px}#wave{height:84px}
  #met{display:none}
}