:root {
  --font: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', 'Menlo', monospace;
  --fs: 16px;
  --lh: 1.25;
  --cols: 80;
  --rows: 25;
  --bodyrows: 17;
  --fg: #33ff66;
  --hi: #b6ffc9;
  --dim: #1f9e40;
  --red: #ff5a4f;
  --bg: #050805;
  --bezel: #121512;
  --glow: 0 0 2px rgba(51, 255, 102, 0.55), 0 0 9px rgba(51, 255, 102, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--fg);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

body.contrast {
  --fg: #ffffff;
  --hi: #ffffff;
  --dim: #c8c8c8;
  --red: #ffffff;
  --glow: none;
}

#bezel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: radial-gradient(ellipse at center, #1a1f1a 0%, #070807 75%);
}

body.coarse #bezel { bottom: 56px; align-items: flex-start; }

#screen {
  position: relative;
  font-size: var(--fs);
  line-height: var(--lh);
  width: calc((var(--cols) + 4) * 1ch);
  padding: 0.6em 2ch;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: 0 0 0 10px var(--bezel), 0 0 0 11px #262b26, 0 20px 80px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.crt #screen { text-shadow: var(--glow); }

.crt #screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.22) 3px);
  z-index: 2;
}

.crt #screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(51, 255, 102, 0.05) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 3;
  animation: flicker 6s infinite steps(1);
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 0.93; }
  48% { opacity: 1; }
  82% { opacity: 0.96; }
}

.row, .line {
  white-space: pre;
  height: calc(var(--lh) * 1em);
  overflow: hidden;
}

#body {
  padding-left: 1ch;
  height: calc(var(--bodyrows) * var(--lh) * 1em);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
#body::-webkit-scrollbar { display: none; }
#body.fade { animation: phosphor 0.16s ease-out; }

@keyframes phosphor {
  from { opacity: 0.2; filter: blur(0.6px); }
  to { opacity: 1; filter: none; }
}

.hi { color: var(--hi); font-weight: 600; }
.dim { color: var(--dim); }
.red { color: var(--red); }
.rev { background: var(--fg); color: var(--bg); text-shadow: none; }

#r-status {
  color: var(--dim);
  border-top: 1px solid rgba(51, 255, 102, 0.25);
}

#r-msg .rev { padding-right: 1ch; }

.opt { cursor: pointer; }
.opt .mark { color: var(--hi); }
.opt.sel .line { background: var(--fg); color: var(--bg); text-shadow: none; }
.opt.sel .line .hi, .opt.sel .mark { color: var(--bg); }
.opt.chosen .line { animation: blinkSel 0.14s steps(2) 1; }

@keyframes blinkSel { 50% { background: transparent; color: var(--fg); } }

.fk { cursor: pointer; }
.fk:hover { color: var(--hi); }

#r-cmd { position: relative; cursor: text; }
#cmd {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: 16px;
}
.cursor {
  display: inline-block;
  width: 1ch;
  background: var(--fg);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { background: transparent; } }

.blink { animation: blinkText 1.4s steps(1) infinite; }
@keyframes blinkText { 60% { opacity: 0.35; } }

#touchbar { display: none; }
body.coarse #touchbar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  gap: 6px;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: #0c0f0c;
  border-top: 1px solid #1c231c;
  overflow-x: auto;
}
#touchbar button {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 14px;
  color: var(--fg);
  background: #111811;
  border: 1px solid #2a3a2a;
  border-radius: 6px;
  padding: 0 12px;
  min-width: 44px;
}
#touchbar button:active { background: var(--fg); color: var(--bg); }
#touchbar .enter { min-width: 72px; }
#touchbar .dyn { display: flex; gap: 6px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}