/* ═══ TBC/OS — desktop shell ═══════════════════════════════ */

:root{
  --acid:#c8ff2d;
  --bg:#0a0a0a;
  --ink:#e8e8e4;
  --ink-bright:#f2f2ee;
  --line:#1e1e1e;
  --line-2:#222;
  --line-3:#333;
  --mute:#555;
  --red:#ff4d2d;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Archivo Black',system-ui,sans-serif;
}

*{box-sizing:border-box}

/* Class rules like .cta{display:block} outclass the UA [hidden] rule. */
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--bg);
  overflow:hidden;
  overscroll-behavior:none;
}

a{color:var(--acid);text-decoration:none}
a:hover{color:#fff}
.acid{color:var(--acid)}

/* ── shell ────────────────────────────────────────────────── */

.desktop{
  position:fixed;
  inset:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#crt-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.18) 0px,rgba(0,0,0,0.18) 1px,transparent 1px,transparent 4px);
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,0.55) 100%);
}

/* ── menu bar ─────────────────────────────────────────────── */

.menubar{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,10,0.7);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-size:11px;letter-spacing:0.12em;
  z-index:900;
}
.menubar__group{display:flex;gap:22px;align-items:center}
.menubar__group > .viz + .music-btn{margin-left:-12px}
.menubar__group > .music-btn + .audio-btn{margin-left:-12px}
.menubar__brand{color:var(--acid);font-weight:700}
.menubar__sub{color:var(--mute)}

.viz{
  width:88px;height:18px;display:block;
  opacity:0.35;transition:opacity 0.5s ease;
}
.viz.is-live{opacity:1}

/* Deliberately smaller and shorter than the master control beside it — it is
   the secondary switch, and only exists while audio is on. */
.music-btn{
  font-family:inherit;font-size:10px;letter-spacing:0.08em;line-height:1;
  border:1px solid #2f2f2f;background:none;color:var(--acid);
  padding:3px 7px;cursor:pointer;white-space:nowrap;
  transition:color 0.2s,border-color 0.2s,background 0.2s,opacity 0.2s;
}
.music-btn:hover{border-color:var(--acid);background:rgba(200,255,45,0.1)}
.music-btn[aria-pressed="true"]{color:#6b6b6b}
.music-btn[aria-pressed="true"]:hover{color:var(--acid)}

.audio-btn{
  font-family:inherit;font-size:11px;letter-spacing:0.12em;
  border:1px solid var(--acid);background:none;color:var(--acid);
  padding:4px 10px;cursor:pointer;white-space:nowrap;
  transition:color 0.2s,border-color 0.2s,background 0.2s;
  animation:audioglow 7.5s ease-in-out infinite;
}
.audio-btn:hover{background:var(--acid);color:var(--bg)}
.audio-btn[aria-pressed="true"]{color:#888;border-color:var(--line-3);animation:none}
.audio-btn[aria-pressed="true"]:hover{background:none;color:var(--acid);border-color:var(--acid)}

/* ── hero ─────────────────────────────────────────────────── */

.hero{
  position:absolute;
  top:clamp(56px,9vh,86px);
  left:clamp(20px,6vw,56px);
  z-index:10;pointer-events:none;
  margin:0;
}
.hero__title{
  margin:0;
  font-family:var(--display);font-weight:400;
  font-size:min(88px,11vh,15vw);
  line-height:0.9;letter-spacing:-0.02em;
  color:var(--ink-bright);
  text-shadow:0 0 60px rgba(10,10,10,0.9);
}
.hero__tag{
  margin:min(18px,2vh) 0 0;
  font-size:15px;color:var(--acid);
  height:20px;white-space:pre;
}
.caret{
  display:inline-block;width:9px;height:16px;
  background:var(--acid);vertical-align:-2px;
  animation:blink 0.8s step-end infinite;
}

/* ── icon grid ────────────────────────────────────────────── */

.icons{
  position:absolute;
  top:clamp(230px,42vh,318px);
  bottom:56px;
  left:clamp(20px,6vw,56px);
  right:12px;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(auto-fill,84px);
  grid-auto-columns:clamp(78px,22vw,92px);
  gap:6px 8px;
  align-content:start;justify-content:start;
  z-index:10;
}

.icon{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:none;cursor:pointer;padding:4px;
  font-family:inherit;color:inherit;
  transition:background 0.15s;
}
.icon:hover,.icon:focus-visible{background:rgba(200,255,45,0.06);outline:none}
.icon:focus-visible .icon__tile{border-color:var(--acid)}

.icon__tile{
  position:relative;width:46px;height:46px;
  border:1px solid var(--line-3);
  background:rgba(10,10,10,0.85);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:16px;color:var(--acid);
  overflow:hidden;
}
.icon__glyph{transition:opacity 0.14s}
.icon__art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;image-rendering:pixelated;
  opacity:0;transition:opacity 0.14s;
}
.icon.is-art .icon__glyph{opacity:0}
.icon.is-art .icon__art{opacity:1}
.icon__label{font-size:9px;color:#999;letter-spacing:0.08em}

/* ── windows ──────────────────────────────────────────────── */

.win{
  position:absolute;
  background:rgba(8,8,8,0.96);
  border:1px solid #3a3a3a;
  box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 0 1px rgba(200,255,45,0.08);
}
.win[hidden]{display:none}

.win__bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 12px;
  border-bottom:1px solid #2a2a2a;
  background:#111;
  cursor:grab;touch-action:none;
}
.win__bar:active{cursor:grabbing}
.win__title{font-size:11px;letter-spacing:0.12em;color:var(--acid);font-weight:700}
.win__btns{display:flex;gap:6px}
.win__btn{
  width:20px;height:18px;
  border:1px solid var(--line-3);background:none;color:#888;
  font-size:10px;cursor:pointer;font-family:inherit;line-height:1;
  transition:color 0.15s,border-color 0.15s;
}
.win__btn:hover{color:var(--acid);border-color:var(--acid)}
.win__btn--close:hover{color:var(--red);border-color:var(--red)}

/* ── panes ────────────────────────────────────────────────── */

.pane{padding:18px 20px;display:flex;flex-direction:column;gap:14px}

.cta{
  display:block;text-align:center;
  border:1px solid var(--acid);color:var(--acid);
  padding:10px;font-size:12px;letter-spacing:0.14em;font-weight:700;
  cursor:pointer;background:none;font-family:inherit;
  transition:background 0.18s,color 0.18s;
}
.cta:hover{background:var(--acid);color:var(--bg)}
.cta--dead{border:1px dashed var(--line-3);color:var(--mute);font-size:11px;font-weight:400;cursor:default}
.cta--dead:hover{background:none;color:var(--mute)}
.cta--inline{padding:8px 14px;font-size:11px;letter-spacing:0.12em;width:auto}

/* app */
.app__head{display:flex;align-items:center;gap:14px}
.app__art{
  width:62px;height:62px;object-fit:cover;
  border:1px solid var(--line-3);background:var(--bg);
  flex-shrink:0;image-rendering:pixelated;
}
.app__name{font-family:var(--display);font-size:30px;color:var(--ink-bright)}
.app__status{
  font-size:9px;letter-spacing:0.14em;color:var(--bg);
  background:var(--acid);padding:3px 8px;font-weight:700;
}
.app__desc{font-size:12px;line-height:1.7;color:#aaa}
.app__meta{
  display:flex;flex-direction:column;gap:5px;
  border-top:1px solid var(--line-2);padding-top:12px;
}
.app__meta > div{display:flex;justify-content:space-between;font-size:10px;letter-spacing:0.08em}
.app__meta .k{color:var(--mute)}
.app__meta .v{color:var(--acid)}
.app__legal{display:flex;gap:14px;font-size:9px;letter-spacing:0.1em}
.app__legal a{color:var(--mute)}
.app__legal a:hover{color:var(--acid)}

/* services */
.pane--services{gap:0}
.services__lede{font-size:10px;letter-spacing:0.14em;color:var(--mute);padding-bottom:10px}
.services__row{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line-2);padding:13px 0;
}
.services__n{font-family:var(--display);font-size:19px;color:var(--ink-bright)}
.services__i{font-size:10px;color:var(--acid);letter-spacing:0.1em}
.pane--services .cta{margin-top:12px}

/* about */
.pane--about{font-size:12px;line-height:1.8;color:#aaa;gap:12px}
.about__head{color:var(--ink-bright);font-family:var(--display);font-size:16px}
.about__foot{color:var(--acid);font-size:11px;letter-spacing:0.1em}

/* contact / trash key-value rows */
.pane--contact{gap:10px;font-size:12px}
.kv{display:flex;justify-content:space-between}
.kv__k{color:var(--mute)}
.kv__v{color:#aaa}
.kv__n{color:#888}
.kv__s{color:#444}

/* terminal */
.pane--terminal{padding:14px 16px;gap:2px;height:200px;overflow:auto;font-size:11px;line-height:1.6}
.term__log{display:flex;flex-direction:column;gap:2px}
.term__log div{color:#9c9;white-space:pre-wrap}
.term__prompt{display:flex;gap:6px;align-items:center}
.term__input{
  flex:1;background:none;border:none;outline:none;
  color:var(--ink);font-family:inherit;font-size:11px;
}

/* jukebox */
.juke__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.juke__title{font-size:12px;color:var(--ink-bright);font-weight:700;letter-spacing:0.08em}
.juke__sub{font-size:10px;color:var(--mute);letter-spacing:0.06em}

.juke__list{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.juke__track{
  display:grid;grid-template-columns:14px 1fr;grid-template-rows:auto auto;
  column-gap:8px;align-items:baseline;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line-2);
  padding:9px 4px;cursor:pointer;font-family:inherit;color:inherit;
  transition:background 0.15s;
}
.juke__track:hover,.juke__track:focus-visible{background:rgba(200,255,45,0.06);outline:none}
.juke__cue{grid-row:1/3;color:var(--line-3);font-size:10px}
.juke__cue::before{content:'○'}
.juke__track.is-on .juke__cue{color:var(--acid)}
.juke__track.is-on .juke__cue::before{content:'▶'}
.juke__n{font-size:12px;color:#999;letter-spacing:0.08em;font-weight:700}
.juke__track.is-on .juke__n{color:var(--acid)}
.juke__s{font-size:9px;color:var(--mute);letter-spacing:0.06em}

.juke__vu{
  display:flex;gap:3px;align-items:flex-end;
  height:44px;border:1px solid var(--line-2);padding:6px;
}
.juke__vu span{
  flex:1;background:var(--acid);opacity:0.15;height:8%;
  transition:height 0.09s linear,opacity 0.4s ease;
}
.juke__vu.is-on span{opacity:0.85}

.juke__note{font-size:9px;letter-spacing:0.1em;color:var(--line-3)}

/* trash */
.pane--trash{font-size:11px;gap:8px}
.trash__lede{color:var(--mute);letter-spacing:0.1em;font-size:10px}
.trash__foot{color:var(--acid);font-size:10px;margin-top:6px}

/* ── taskbar ──────────────────────────────────────────────── */

.taskbar{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 16px;
  border-top:1px solid var(--line);
  background:rgba(12,12,12,0.92);
  z-index:950;gap:12px;
}
.taskbar__left{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none}
.taskbar__left::-webkit-scrollbar{display:none}
.taskbar__items{display:flex;gap:8px;align-items:center}
.taskbar__right{
  display:flex;gap:16px;align-items:center;
  font-size:10px;color:var(--mute);letter-spacing:0.1em;flex-shrink:0;
}

.start-btn{
  background:var(--acid);color:var(--bg);border:none;
  font-family:var(--display);font-size:11px;padding:6px 12px;
  cursor:pointer;letter-spacing:0.04em;flex-shrink:0;
}

.task-btn{
  font-family:inherit;font-size:10px;letter-spacing:0.08em;
  padding:5px 10px;cursor:pointer;white-space:nowrap;
  background:#1a1a1a;border:1px solid var(--acid);color:var(--acid);
}
.task-btn.is-min{background:none;border-color:#2a2a2a;color:#666}

/* ── boot ─────────────────────────────────────────────────── */

.boot{
  position:absolute;inset:0;background:#050505;
  z-index:2000;display:flex;align-items:center;justify-content:center;
}
.boot[hidden]{display:none}
.boot__log{font-size:12px;line-height:2;color:var(--acid);letter-spacing:0.08em}
.boot__block{animation:blink 0.4s step-end infinite}

/* ── keyframes ────────────────────────────────────────────── */

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes audioglow{
  0%,100%{box-shadow:0 0 0 rgba(200,255,45,0);opacity:0.82}
  50%{box-shadow:0 0 14px rgba(200,255,45,0.45),inset 0 0 8px rgba(200,255,45,0.12);opacity:1}
}
/* The VU bars are driven from the analyser in JS now, not by keyframes. */

/* ── mobile ───────────────────────────────────────────────── */

@media (max-width:700px){
  .menubar__sub,.taskbar__right span:last-child{display:none}

  /* Brand and controls are within a pixel of colliding at 375px, so the
     waveform gives up width first. */
  .menubar{padding:12px 14px}
  .menubar__group{gap:10px}
  .menubar__group > .viz + .music-btn,
  .menubar__group > .music-btn + .audio-btn{margin-left:0}
  .viz{width:40px}

  /* Column-major fill is right on a wide desktop; on a phone it reads as noise. */
  .icons{
    right:20px;
    grid-auto-flow:row;
    grid-template-rows:none;
    grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
    grid-auto-rows:84px;
    justify-content:stretch;
    overflow-y:auto;
  }

  .win{
    position:fixed !important;
    left:10px;right:10px;top:58px;
    width:auto !important;
    max-height:calc(100vh - 118px);
    overflow-y:auto;
    background:rgba(8,8,8,0.98);
  }
  .win__bar{cursor:default;position:sticky;top:0;z-index:2}
  .win__btns{gap:10px}
  .win__btn{width:34px;height:30px;font-size:16px;display:flex;align-items:center;justify-content:center}
}

/* ── reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .caret{animation:none;opacity:1}
}