Made of little things.

/* Controls belong to the photographic instrument, with the same ink as its annotations. */
:root {
  --bg:#05090d; --fg:#d6e4e6; --primary:#94d8df;
  --ink:color-mix(in srgb,var(--fg) 18%,#c6dfe7);
  --accent:color-mix(in srgb,var(--primary) 22%,#b8dce4);
  --muted:color-mix(in srgb,var(--ink) 67%,transparent);
  --border:color-mix(in srgb,var(--ink) 32%,transparent);
  --surface:color-mix(in srgb,var(--bg) 9%,#050b12);
  --control-h:28px; --napplet-text-selection:none;
  font:13px/1.45 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html, body, #app { height:100%; margin:0; background:var(--bg); color:var(--fg); overflow:hidden; }
body { user-select:var(--napplet-text-selection); }
#app { position:relative; container-type:inline-size; isolation:isolate; }
button,input { font:inherit; }
button { color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,input:focus-visible,#universe:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
button:hover { color:#f0fcff; background:color-mix(in srgb,var(--accent) 9%,transparent); }
[hidden] { display:none!important; }
#universe { position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; outline-offset:-3px; }
#universe.dragging { cursor:grabbing; } #universe.over-beacon { cursor:crosshair; }
canvas { position:absolute; inset:0; width:100%; height:100%; }
.grain { position:absolute; inset:0; pointer-events:none; opacity:.08; background:repeating-linear-gradient(0deg,#0000 0 2px,#0009 2px 3px); mix-blend-mode:multiply; }
.frame-corners { position:absolute; inset:12px; pointer-events:none; background:linear-gradient(#b9d7da70,#b9d7da70) 0 0/16px 1px no-repeat,linear-gradient(#b9d7da70,#b9d7da70) 0 0/1px 16px no-repeat,linear-gradient(#b9d7da70,#b9d7da70) 100% 0/16px 1px no-repeat,linear-gradient(#b9d7da70,#b9d7da70) 100% 0/1px 16px no-repeat,linear-gradient(#b9d7da70,#b9d7da70) 0 100%/16px 1px no-repeat,linear-gradient(#b9d7da70,#b9d7da70) 100% 100%/16px 1px no-repeat; }
.readout { position:absolute; pointer-events:none; color:var(--muted); font-size:9px; line-height:1.9; letter-spacing:.07em; text-shadow:0 1px 5px #000; }
.upper-left { left:24px; top:22px; }
.readout-heading { color:var(--ink); letter-spacing:.18em; margin-bottom:8px; }
.readout-heading i { display:inline-block; width:4px; height:4px; margin-right:6px; background:var(--ink); box-shadow:0 0 9px #a1dfdf70; }
.readout-heading span { opacity:.5; margin-left:10px; }.readout b { font-weight:400; margin-left:12px; }
.faint { opacity:.58; font-size:8px; letter-spacing:.1em; }
.tools { position:absolute; display:flex; align-items:center; gap:4px; top:20px; right:20px; padding:4px 0; border-bottom:1px solid var(--border); color:var(--ink); }
.tools::before { content:"CTL / 01"; position:absolute; right:0; top:-8px; font-size:6px; letter-spacing:.14em; color:var(--muted); pointer-events:none; }
.icon-button { width:var(--control-h); height:var(--control-h); flex:0 0 var(--control-h); border:0; background:transparent; font-size:14px; line-height:1; padding:0; display:inline-grid; place-items:center; }
.icon-button[aria-pressed="true"],.icon-button[aria-expanded="true"] { color:var(--accent); box-shadow:inset 0 -1px var(--accent); }
.tour-button { height:28px; display:flex; align-items:center; gap:8px; padding:0 10px 0 3px; margin-right:4px; background:transparent; border:0; border-right:1px solid var(--border); font-size:8px; letter-spacing:.08em; }
.tour-symbol { font-size:20px; }.tour-button[aria-pressed="true"] { color:var(--accent); text-shadow:0 0 9px #bcecff50; }
.floating-panel { position:absolute; width:min(260px,calc(100% - 32px)); color:var(--ink); background:color-mix(in srgb,var(--surface) 91%,transparent); border:0; border-top:1px solid var(--border); border-left:1px solid var(--border); padding:12px; backdrop-filter:blur(9px); font-size:10px; }
.floating-panel::after { content:""; position:absolute; right:0; bottom:0; width:16px; height:12px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); pointer-events:none; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; letter-spacing:.16em; color:var(--muted); font-size:8px; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--border); }
.options-panel,.guide-panel { top:70px; right:20px; z-index:4; max-height:calc(100% - 140px); overflow:auto; }
.options-panel label { display:flex; align-items:center; gap:8px; min-height:28px; }
input { accent-color:var(--accent); }
input[type="checkbox"] { appearance:none; width:9px; height:9px; margin:4px; border:1px solid var(--border); background:transparent; }
input[type="checkbox"]:checked { background:var(--accent); box-shadow:inset 0 0 0 2px var(--surface); }
.guide-panel dl { display:grid; grid-template-columns:50px 1fr; gap:8px; margin:0; }.guide-panel dt { color:var(--accent); }.guide-panel dd { margin:0; font-size:9px; }
.floating-panel p { color:var(--muted); font-size:10px; line-height:1.7; margin-bottom:0; }
.observation { left:24px; top:32%; z-index:3; }
.observation-name { font-size:10px; letter-spacing:.1em; }.observation-value { font-size:18px; color:var(--accent); margin:12px 0; letter-spacing:-.05em; }
.small-button { border:0; background:transparent; font-size:17px; line-height:18px; }
.observation-controls { display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:var(--muted); font-size:8px; }
.text-button { border:0; background:transparent; padding:4px 0; font-size:8px; letter-spacing:.07em; }
.lower-left { bottom:108px; left:24px; }.tiny-cross { font-size:20px; vertical-align:middle; margin-right:8px; }
.scale-control { position:absolute; right:20px; bottom:100px; display:flex; align-items:center; gap:4px; color:var(--ink); border-bottom:1px solid var(--border); padding:0; }
.scale-control::before { content:"MAG / RELATIVE"; position:absolute; top:-12px; left:0; color:var(--muted); font-size:6px; letter-spacing:.12em; }
.scale-control output { width:48px; text-align:center; font-size:9px; color:var(--ink); }
.player { position:absolute; bottom:28px; left:24px; display:flex; align-items:center; gap:12px; max-width:calc(100% - 196px); padding:8px 0 0; color:var(--ink); border-top:1px solid var(--border); background:linear-gradient(90deg,#040a1170,transparent); text-shadow:0 1px 6px #02070d; }
.player::before { content:"RX / AMBIENT TRANSMISSION"; position:absolute; left:36px; top:-15px; font-size:7px; letter-spacing:.14em; color:var(--muted); }
.player::after { content:""; position:absolute; width:16px; height:16px; left:0; top:-9px; border-left:1px solid var(--border); border-top:1px solid var(--border); transform:rotate(45deg); pointer-events:none; }
.play-button { width:28px; height:28px; flex:0 0 28px; border:0; background:transparent; color:var(--accent); display:grid; place-items:center; padding:6px; }
.play-button svg { width:15px; height:15px; fill:currentColor; }
.station-copy { min-width:0; width:220px; }.station-name { font-size:9px; letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#radio-status { display:block; color:var(--muted); font-size:8px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.signal-meter { height:20px; display:flex; gap:2px; align-items:center; padding:0 8px; border-left:1px solid var(--border); }.signal-meter i { display:block; width:1px; height:2px; background:var(--accent); opacity:.35; }
[data-playing="true"] .signal-meter i { opacity:.65; animation:receive 1.8s ease-in-out infinite alternate; }
.signal-meter i:nth-child(3n) { --bar:12px; animation-delay:-.7s; }.signal-meter i:nth-child(3n + 1) { --bar:6px; animation-delay:-.3s; }.signal-meter i:nth-child(3n + 2) { --bar:17px; animation-delay:-1.3s; }
@keyframes receive { from { height:3px; } to { height:var(--bar); } }
.volume-control { display:flex; align-items:center; gap:5px; color:var(--muted); }.volume-control span { font-size:9px; }
.volume-control input { appearance:none; -webkit-appearance:none; width:56px; height:20px; background:transparent; margin:0; }
.volume-control input::-webkit-slider-runnable-track { height:1px; background:var(--border); }
.volume-control input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:5px; height:5px; margin-top:-2px; border:1px solid var(--ink); background:var(--surface); transform:rotate(45deg); }
.volume-control input::-moz-range-track { height:1px; background:var(--border); }.volume-control input::-moz-range-thumb { width:4px; height:4px; border:1px solid var(--ink); border-radius:0; background:var(--surface); }
.volume-control input:disabled { opacity:.4; }
.inspect-button { position:absolute; bottom:28px; right:20px; height:32px; border:0; border-bottom:1px solid var(--border); background:transparent; font-size:16px; padding:0 2px; }
.inspect-button span { font-size:8px; letter-spacing:.1em; margin-left:6px; vertical-align:2px; }.inspect-button output { color:var(--muted); font-size:7px; margin-left:8px; }
.navigation-hint { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); font-size:6px; letter-spacing:.16em; white-space:nowrap; color:var(--muted); opacity:.6; pointer-events:none; transition:opacity 1s; }.navigation-hint span { margin:0 8px; opacity:.5; }
@media(min-width:1600px) { .upper-left,.lower-left,.player { left:32px; }.tools,.scale-control,.inspect-button { right:32px; }.readout { font-size:10px; }.player { bottom:32px; }.station-copy { width:246px; } }
@media(max-width:899px) { .signal-meter,.volume-control { display:none; }.player { gap:8px; }.station-copy { width:220px; }.navigation-hint { display:none; } #tour-label { display:none; }.tour-button { padding-right:8px; } }
@media(max-width:479px) {
  .upper-left { left:12px; top:13px; }.readout b { margin-left:4px; }.upper-left>div:not(:first-child) { display:none; }.tools { right:8px; top:8px; gap:0; }.tools::before { display:none; }.tools .icon-button { width:24px; flex-basis:24px; }.tour-button { margin-right:0; padding-left:0; gap:0; }
  .readout-heading { font-size:7px; }.readout-heading span { display:none; }
  .player { left:12px; bottom:14px; right:12px; max-width:none; padding:6px 0 0; gap:8px; }.station-copy { flex:1; width:auto; }.station-name { font-size:8px; }.player>.icon-button { width:24px; flex-basis:24px; }.player::before { font-size:6px; }
  .lower-left { display:none; }.scale-control { right:12px; bottom:82px; }.inspect-button { left:12px; right:auto; bottom:82px; height:28px; }.inspect-button output { margin-left:4px; }
  .observation { left:8px; top:64px; width:calc(100% - 16px); max-height:calc(100% - 202px); overflow:auto; }.options-panel,.guide-panel { right:8px; top:50px; }.frame-corners { inset:6px; }
}
@media(max-width:279px) { .inspect-button span { display:none; } }
@media(max-width:239px) {
  .upper-left,#help,#layers,.inspect-button,.station-name,#retry,#station-link { display:none; }.tools { top:4px; right:4px; }.player { bottom:6px; left:8px; right:8px; padding:4px 0; gap:6px; }.player::before { content:"RX / DRONE ZONE"; left:0; top:-12px; }.player::after { display:none; }.station-copy { width:100%; }.play-button { width:24px; height:24px; flex-basis:24px; padding:4px; }#radio-status { font-size:7px; }
  .scale-control { bottom:65px; right:8px; padding:0; }.scale-control output { width:38px; }.scale-control::before { display:none; }
}
@media(max-height:359px) {
  .upper-left>div:not(:first-child),.lower-left,.navigation-hint { display:none; }.player { bottom:8px; }.scale-control { bottom:80px; }.observation { top:8px; max-height:calc(100% - 92px); overflow:auto; }.observation-value { font-size:15px; margin:4px 0; }.observation-controls { margin-top:8px; }.guide-panel,.options-panel { top:52px; max-height:calc(100% - 120px); }
}
@media(max-width:239px) and (max-height:359px) { .player { bottom:6px; }.scale-control { bottom:65px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* A final tape treatment sits over the complete instrument, including controls. */
.tape-defs { position:absolute; width:0; height:0; pointer-events:none; overflow:hidden; }
#app[data-tape-enabled="true"] { filter:saturate(var(--tape-saturation,1)); }
#app[data-tape-glitch="true"] { filter:url(#tape-glitch) saturate(var(--tape-saturation,1)); }
#app[data-tape-glitch="true"][data-tape-phase="chroma"] { filter:url(#tape-chroma) saturate(var(--tape-saturation,1)); }
#tape-overlay { position:absolute; inset:0; z-index:20; overflow:hidden; pointer-events:none; opacity:var(--tape-amount,.45); background:radial-gradient(ellipse at center,transparent 55%,#0005 100%); }
.tape-scanlines { position:absolute; inset:0; background:repeating-linear-gradient(to bottom,transparent 0 1px,#0008 1px 2px); opacity:.38; }
#tape-noise { position:absolute; inset:-64px; opacity:.14; mix-blend-mode:soft-light; }
#tape-roll { position:absolute; top:-20%; left:0; width:100%; height:18%; opacity:.5; background:linear-gradient(transparent,#b3d0c418 44%,#0002 55%,transparent); }
#tape-dropout { position:absolute; left:0; width:100%; height:3px; opacity:0; background:repeating-linear-gradient(90deg,#d2e0d580 0 7px,transparent 7px 19px,#000a 19px 23px,transparent 23px 50px); }
.tape-controls { border-top:1px solid var(--border); margin-top:8px; padding-top:6px; }
.tape-controls label { font-size:9px; }.tape-controls output { margin-left:auto; font-size:8px; color:var(--muted); }
#tape-wear { display:block; appearance:none; -webkit-appearance:none; width:100%; height:22px; margin:0; background:transparent; }
#tape-wear::-webkit-slider-runnable-track { height:1px; background:var(--border); }
#tape-wear::-webkit-slider-thumb { -webkit-appearance:none; width:7px; height:7px; margin-top:-3px; border:1px solid var(--ink); background:var(--surface); transform:rotate(45deg); }
#tape-wear::-moz-range-track { height:1px; background:var(--border); }
#tape-wear::-moz-range-thumb { width:6px; height:6px; border:1px solid var(--ink); border-radius:0; background:var(--surface); }
#tape-pulse { min-height:28px; color:var(--accent); }
@media(prefers-reduced-motion:reduce) { #app[data-tape-enabled="true"],#app[data-tape-glitch="true"][data-tape-phase] { filter:none; } #tape-overlay { display:none; } }