/* ============ THE INSTRUMENTS — the CRT television and the player rig ============ */

.apparatus{padding-bottom:3rem}

/* ================= THE CRT TV — Analog Intel ================= */
.tv{
  width:min(440px,100%);border-radius:18px 18px 14px 14px;padding:20px 20px 16px;
  position:relative;user-select:none;
}
.tv .tv-inner{display:grid;grid-template-columns:1fr 86px;gap:14px}
.tv .screen-frame{border-radius:12px;padding:10px;background:#0c0a06}
.tv .screen{
  border-radius:10px 10px 26px 26px / 8px 8px 20px 20px;
  aspect-ratio:4/3.1;overflow:hidden;padding:14px 16px;
  font-family:var(--crtfont);font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.35;
  color:var(--phosphor);
}
.tv .screen .ln{display:block;white-space:pre;position:relative;z-index:2;letter-spacing:.04em}
.tv .screen .ln.amber{color:#fbbf24;text-shadow:0 0 6px rgba(251,191,36,.5)}
.tv .screen .ln.dimln{color:rgba(74,222,128,.5)}
.tv .screen .ln.title{font-size:1.2em;text-shadow:0 0 6px rgba(74,222,128,.55)}
.tv.on .screen{animation:tv-bloom .5s ease-out}
@keyframes tv-bloom{0%{transform:scaleY(.04);filter:brightness(6)}60%{transform:scaleY(1)}100%{filter:brightness(1)}}
.tv:hover .screen{animation:flicker 7s infinite}

/* controls column */
.tv .tv-controls{display:flex;flex-direction:column;align-items:center;gap:12px;
  border-radius:8px;padding:12px 8px}
.tv .dial{
  width:56px;height:56px;border-radius:50%;position:relative;cursor:pointer;border:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.tv .dial::before{content:"";position:absolute;left:50%;top:4px;width:3px;height:15px;
  transform:translateX(-50%);background:var(--alert);border-radius:2px;box-shadow:0 0 6px var(--alert)}
.tv .dial-label{font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;color:#3B372B;text-transform:uppercase}
.tv .vu{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:2px}
.tv .vu i{width:5px;background:rgba(74,222,128,.22);border-radius:1px}
.tv .vu i:nth-child(1){height:30%}.tv .vu i:nth-child(2){height:50%}
.tv .vu i:nth-child(3){height:70%}.tv .vu i:nth-child(4){height:88%}.tv .vu i:nth-child(5){height:100%}
.tv .vu i.on{background:var(--phosphor);box-shadow:0 0 5px rgba(74,222,128,.6)}
.tv .vu i.on.hotbar{background:#fbbf24;box-shadow:0 0 5px rgba(251,191,36,.6)}
.tv .tv-lamp{color:var(--alert)}
.tv .tv-feet{display:flex;justify-content:space-between;padding:10px 26px 0}
.tv .tv-feet i{width:34px;height:10px;background:var(--wood-lo);border-radius:0 0 4px 4px}
.tv .brandplate{text-align:center;font-family:var(--serif);color:#B7AE93;
  font-size:.78rem;margin-top:10px;letter-spacing:.04em}

/* ================= THE PLAYER RIG — walkman + vinyl + tuner ================= */
.rig{width:min(460px,100%);display:grid;grid-template-columns:1.35fr 1fr;gap:16px;user-select:none}
.walkman{border-radius:12px;padding:14px;position:relative}
.walkman .wm-plate{border-radius:6px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;color:#3B372B;text-transform:uppercase}
.walkman .wm-plate .lamp{color:var(--alert);opacity:.35;transition:opacity .3s}
.rig.playing .walkman .wm-plate .lamp{opacity:1}
.cassette{margin-top:10px;border-radius:6px;background:var(--cabinet);padding:10px 12px;position:relative;overflow:hidden}
.cassette .tape-label{font-family:var(--serif);font-size:.72rem;color:var(--paper);
  background:rgba(241,234,219,.08);border:1px solid rgba(241,234,219,.14);border-radius:3px;
  padding:2px 8px;text-align:center;margin-bottom:9px;letter-spacing:.03em}
.cassette .spools{display:flex;justify-content:space-between;align-items:center;padding:0 8px}
.spool{
  width:44px;height:44px;border-radius:50%;position:relative;flex:none;
  background:
    radial-gradient(circle,var(--screen) 0 26%,transparent 26%),
    repeating-conic-gradient(from 0deg,rgba(237,231,214,.55) 0deg 14deg,transparent 14deg 60deg);
  border:2px solid rgba(237,231,214,.25);
}
.spool::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--screen);
  border:1px solid rgba(237,231,214,.3)}
.rig.playing .spool{animation:deck-spin 2.2s linear infinite}
.cassette .tape-line{position:absolute;left:18px;right:18px;bottom:8px;height:2px;
  background:rgba(237,231,214,.18);border-radius:1px}
.walkman .transport{display:flex;gap:8px;margin-top:12px;justify-content:center}
.walkman .transport button{
  width:44px;height:30px;border:none;border-radius:4px;background:#3B372B;color:var(--cream);
  font-size:.72rem;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.4);font-family:var(--mono);
}
.walkman .transport button:active{transform:translateY(2px);box-shadow:none}
.walkman .transport button[aria-pressed="true"]{background:var(--amber);color:var(--void);box-shadow:0 2px 0 var(--amber-deep)}

.rig-right{display:flex;flex-direction:column;gap:14px}
.deck{border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:center}
.vinyl{
  width:92px;height:92px;border-radius:50%;position:relative;flex:none;
  background:repeating-radial-gradient(circle at 50% 50%,#111 0 2px,#1c1c1c 2px 4px);
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.vinyl::before{content:"";position:absolute;inset:35%;border-radius:50%;background:var(--amber);opacity:.85}
.vinyl::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:#000;transform:translate(-50%,-50%)}
.rig.playing .vinyl{animation:deck-spin 1.8s linear infinite}
.tuner{border-radius:8px;height:44px;position:relative;overflow:hidden;background:rgba(0,0,0,.72)}
.tuner::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(103,232,249,.35) 0 1px,transparent 1px 14px)}
.tuner .needle{position:absolute;left:33%;top:0;height:100%;width:2px;background:var(--alert);
  box-shadow:0 0 8px var(--alert);transition:left 1.2s cubic-bezier(.2,.7,.3,1)}
.rig.playing .tuner .needle{animation:tuner-wander 9s ease-in-out infinite alternate}
@keyframes tuner-wander{0%{left:22%}35%{left:64%}70%{left:41%}100%{left:78%}}
.rig .rig-status{font-family:var(--mono);font-size:.52rem;letter-spacing:.2em;color:var(--cream-faint);
  text-transform:uppercase;text-align:center}
.rig.playing .rig-status{color:var(--aqua)}
@media(max-width:480px){.rig{grid-template-columns:1fr}}

/* ---- paper sheet (field notes, FAQs) ---- */
.sheet{max-width:880px;width:100%;padding:clamp(2rem,5vw,3.6rem) clamp(1.6rem,5vw,3.4rem);border-radius:2px;position:relative}
.sheet .sh-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--ink-soft);
  text-transform:uppercase;padding-bottom:1rem;border-bottom:1px solid var(--ledger-line);margin-bottom:2rem}
.sheet h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.01em;color:var(--ink);margin-bottom:1.6rem}
.sheet dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2.6rem}
.sheet dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:.45rem}
.sheet dd{color:var(--ink);font-size:1rem;line-height:1.65}
@media(max-width:760px){.sheet dl{grid-template-columns:1fr}}