*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --red:             #e03030;
  --red-dim:         #6b1515;
  --red-glow:        rgba(224,48,48,0.15);
  --grey:            #888888;
  --grey-dim:        #333333;
  --grey-dark:       #1c1c1c;
  --bg:              #0a0a0a;
  --bg-panel:        rgba(10,10,10,0.88);
  --panel-shadow-in: rgba(0,0,0,0.65);
  --scanline:        rgba(0,0,0,0.14);
  --text:            #cccccc;
  --muted:           #555555;
  --disabled:        #2a2a2a;
  --disabled-text:   #444444;
  --disabled-border: #2e2e2e;
  --cursor-w:        10px;
  --cursor-h:        1.15em;
}

/* ── Light theme (system) ────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --red-dim:         #8b2020;
    --red-glow:        rgba(224,48,48,0.10);
    --grey-dim:        #c0bbb4;
    --grey-dark:       #e0ddd8;
    --bg:              #f0eeea;
    --bg-panel:        rgba(240,238,234,0.93);
    --panel-shadow-in: rgba(0,0,0,0.07);
    --scanline:        rgba(0,0,0,0.03);
    --text:            #2c2c2c;
    --muted:           #888888;
    --disabled:        #dddbd7;
    --disabled-text:   #aaaaaa;
    --disabled-border: #c8c4be;
  }
}

/* ── Light theme (explicit) ──────────────────────────────────────────────── */
html[data-theme="light"] {
  --red-dim:         #8b2020;
  --red-glow:        rgba(224,48,48,0.10);
  --grey-dim:        #c0bbb4;
  --grey-dark:       #e0ddd8;
  --bg:              #f0eeea;
  --bg-panel:        rgba(240,238,234,0.93);
  --panel-shadow-in: rgba(0,0,0,0.07);
  --scanline:        rgba(0,0,0,0.03);
  --text:            #2c2c2c;
  --muted:           #888888;
  --disabled:        #dddbd7;
  --disabled-text:   #aaaaaa;
  --disabled-border: #c8c4be;
}

body {
  background-color: var(--bg);
  font-family: 'Courier New', Courier, monospace;
}

/* ── CRT scanlines ───────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    var(--scanline) 3px,
    var(--scanline) 4px
  );
  pointer-events: none;
  z-index: 100;
}

/* ── Background layer ────────────────────────────────────────────────────── */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@keyframes bgEnter {
  0%   { opacity: 0; filter: brightness(2) saturate(1.5); transform: translateX(-5px); }
  15%  { opacity: 0.7; filter: brightness(1.5); transform: translateX(4px); }
  25%  { opacity: 0.5; filter: brightness(0.8); transform: translateX(-3px); }
  40%  { opacity: 1; filter: brightness(1.3); transform: none; }
  55%  { opacity: 0.85; filter: none; }
  70%  { opacity: 1; }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes bgExit {
  0%   { opacity: 1; filter: none; }
  25%  { opacity: 0.6; filter: brightness(1.6); transform: translateX(5px); }
  50%  { opacity: 0; filter: brightness(2); }
  100% { opacity: 0; }
}
.bg-layer.entering { animation: bgEnter 0.55s ease forwards; }
.bg-layer.exiting  { animation: bgExit  0.25s ease forwards; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--red-dim);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 1px var(--red-dim),
    0 0 44px var(--red-glow),
    inset 0 0 30px var(--panel-shadow-in);
}
.panel::before, .panel::after {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  border-color: var(--red);
  border-style: solid;
}
.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.panel-inner { position: relative; }
.panel-inner::before, .panel-inner::after {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  border-color: var(--red);
  border-style: solid;
}
.panel-inner::before { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.panel-inner::after  { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }

/* ── Header bar ──────────────────────────────────────────────────────────── */
.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--red-dim);
}
.bar-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 7px var(--red);
  animation: blink-dot 3s ease-in-out infinite;
}
@keyframes blink-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.bar-label { font-size: 11px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; flex: 1; }

/* ── Content protection ──────────────────────────────────────────────────── */
img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ── Readable font ───────────────────────────────────────────────────────── */
body.readable { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ── Controls (font + theme toggles) ────────────────────────────────────── */
.ctrl-btn {
  position: fixed;
  right: 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--grey-dim);
  padding: 5px 10px;
  cursor: pointer;
  z-index: 200;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ctrl-btn:hover { color: var(--red); border-color: var(--red-dim); }
.font-toggle  { bottom: 16px; }
.theme-toggle { bottom: 44px; }