:root {
  --ground: #020805;
  --glass: #07210f;
  --scan: #0b331e;
  --after: #2fa055;
  --p1: #33ff66;
  --bloom: #b6ffb6;
  --amber: #ffb000;
  --glow: 0 0 2px rgba(51, 255, 102, .55), 0 0 9px rgba(51, 255, 102, .28);
  --glow-hot: 0 0 3px rgba(182, 255, 182, .8), 0 0 14px rgba(51, 255, 102, .5);
  --fs: 22px;
  --lh: 1.25;
  --gutter: clamp(16px, 3vw, 40px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--p1);
  font: var(--fs)/var(--lh) "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-shadow: var(--glow);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* The tube: scanlines and a curved-glass vignette sit over everything, never intercepting input. */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
body::before {
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .28) 2px 3px);
  mix-blend-mode: multiply;
}
body::after {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%),
    radial-gradient(60% 40% at 30% 20%, rgba(51, 255, 102, .035), rgba(0, 0, 0, 0) 70%);
}

::selection { background: var(--p1); color: var(--ground); text-shadow: none; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); z-index: 60; background: var(--bloom); color: var(--ground); padding: 4px 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- status bar ---------- */
.bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--scan);
  letter-spacing: .08em;
  font-size: 20px;
  white-space: nowrap;
}
.bar-right { display: flex; gap: 22px; }
.bar-link b { font-weight: normal; }
.bar-link.on b { color: var(--bloom); }
.bar-link.off b { color: var(--amber); text-shadow: none; }

.ticker {
  display: none;
  padding: 6px var(--gutter);
  border-bottom: 1px dashed var(--scan);
  color: var(--after);
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- tube layout ---------- */
.tube {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 4vw, 56px);
  padding: 28px var(--gutter) 24px;
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}

.term {
  max-width: 82ch;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- transcript lines ---------- */
.ln { margin: 0; white-space: pre-wrap; min-height: calc(var(--fs) * var(--lh)); }
.ln.live { color: var(--bloom); text-shadow: var(--glow-hot); }
.ln.old, .block.old { color: var(--after); text-shadow: 0 0 6px rgba(47, 160, 85, .25); transition: color 1.2s cubic-bezier(.16, 1, .3, 1), text-shadow 1.2s; }
.ln.sys::before { content: "> "; }
.ln.you { color: var(--bloom); }
.ln.you::before { content: "visitor@mattmorrisjr:~$ "; color: var(--after); }
.ln.warn { color: var(--amber); text-shadow: 0 0 6px rgba(255, 176, 0, .35); }
.ln.warn::before { content: "WARN  "; }
.ln.ok::before { content: "OK    "; color: var(--after); }
.ln.dim { color: var(--after); }
.ln.q { margin-top: 18px; }
.ln.q::before { content: "?  "; color: var(--bloom); }
.rule { color: var(--scan); text-shadow: none; overflow: hidden; white-space: nowrap; }

.gap { height: 18px; }

/* boot wordmark */
.wordmark {
  font-size: clamp(4.2rem, 15vw, 9rem);
  line-height: .82;
  letter-spacing: .04em;
  margin: 0 0 10px;
  color: var(--p1);
  text-shadow: 0 0 4px rgba(182, 255, 182, .7), 0 0 22px rgba(51, 255, 102, .45), 0 0 60px rgba(51, 255, 102, .18);
  font-weight: normal;
}
.wordmark .cur { display: inline-block; width: .5em; height: .78em; margin-left: .08em; vertical-align: -.02em; }
.tag { font-size: 1.15em; letter-spacing: .14em; margin: 0 0 2px; }

/* blinking block cursor */
.cur {
  display: inline-block;
  width: .55em;
  height: 1em;
  background: var(--bloom);
  box-shadow: var(--glow-hot);
  vertical-align: -.12em;
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- options ---------- */
.opts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.opt {
  display: flex;
  gap: .6em;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--p1);
  text-shadow: var(--glow);
  background: transparent;
  border: 0;
  padding: 6px 10px;
  margin-left: -10px;
  cursor: pointer;
  min-height: 44px;
  align-items: center;
}
.opt .k { color: var(--after); }
.opt:hover, .opt:focus-visible {
  outline: none;
  background: var(--glass);
  color: var(--bloom);
  box-shadow: inset 0 0 0 1px var(--after);
}
.opt:hover .k, .opt:focus-visible .k { color: var(--bloom); }
.opt.primary { background: var(--bloom); color: var(--ground); text-shadow: none; box-shadow: 0 0 18px rgba(51, 255, 102, .35); width: auto; padding-right: 22px; }
.opt.primary .k { color: var(--glass); }
.opt.primary:hover, .opt.primary:focus-visible { background: #e2ffe2; color: var(--ground); }
.opts.done .opt { cursor: default; pointer-events: none; color: var(--after); text-shadow: none; background: none; box-shadow: none; }
.opts.done .opt.picked { color: var(--bloom); }
.opts.done .opt.picked::after { content: "  <"; }
.opts.done .opt.primary .k { color: var(--after); }

/* ---------- week map ---------- */
.week { margin: 10px 0 4px; white-space: pre; overflow-x: auto; line-height: 1.12; }
.week .w { color: var(--after); }
.week .o { color: var(--bloom); }
.week .x { color: var(--after); opacity: .7; }
.legend { color: var(--after); margin-top: 6px; white-space: pre-wrap; }

/* big stamp */
.stamp {
  display: inline-block;
  margin: 14px 0 6px;
  padding: 2px 18px 0;
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1;
  letter-spacing: .12em;
  color: var(--ground);
  background: var(--bloom);
  text-shadow: none;
  box-shadow: 0 0 30px rgba(51, 255, 102, .45);
}
.stamp.nurture { background: var(--amber); box-shadow: 0 0 30px rgba(255, 176, 0, .35); }

/* scheduler frame */
.cal-frame {
  margin: 16px 0 8px;
  border: 1px dashed var(--after);
  padding: 30px 6px 6px;
  position: relative;
  min-height: 420px;
}
.cal-frame::before {
  content: " /bin/book ";
  position: absolute;
  top: -.7em;
  left: 14px;
  background: var(--ground);
  color: var(--bloom);
  padding: 0 4px;
}
.cal-frame .wait { position: absolute; left: 16px; top: 24px; color: var(--after); }
.cal-frame iframe { color-scheme: dark; }

/* ---------- side panels ---------- */
.side { display: grid; align-content: start; gap: 22px; position: sticky; top: 24px; height: max-content; }
.panel { border: 1px solid var(--scan); padding: 12px 16px 14px; background: rgba(7, 33, 15, .35); }
.panel h2 { font-size: 1em; font-weight: normal; letter-spacing: .14em; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--scan); color: var(--bloom); }
.panel dl { margin: 0; display: grid; gap: 2px; }
.panel dl div { display: grid; grid-template-columns: 9ch 1fr; gap: 8px; }
.panel dt { color: var(--after); }
.panel dd { margin: 0; overflow-wrap: anywhere; }
.panel p { margin: 0; color: var(--after); }
.score { display: flex; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--scan); }
.score span:first-child { color: var(--after); width: 9ch; }
.meter { letter-spacing: -.02em; }
.flash { animation: flash .9s cubic-bezier(.16, 1, .3, 1); }
@keyframes flash { 0% { color: var(--ground); background: var(--bloom); text-shadow: none; } 100% { background: transparent; } }

/* ---------- prompt ---------- */
.prompt {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--scan);
  background: linear-gradient(to top, var(--ground) 70%, rgba(2, 8, 5, .92));
}
.ps1 { color: var(--after); white-space: nowrap; }
.prompt input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--bloom);
  text-shadow: var(--glow-hot);
  background: transparent;
  border: 0;
  outline: none;
  caret-color: var(--bloom);
  caret-shape: block;
  padding: 4px 0;
}
.prompt input::placeholder { color: var(--after); opacity: 1; text-shadow: none; }
.prompt:focus-within { box-shadow: inset 0 1px 0 var(--after); }
.enter {
  font: inherit;
  letter-spacing: .1em;
  color: var(--p1);
  background: transparent;
  border: 1px solid var(--after);
  padding: 2px 14px;
  min-height: 40px;
  cursor: pointer;
  text-shadow: var(--glow);
}
.enter:hover, .enter:focus-visible { outline: none; background: var(--bloom); color: var(--ground); text-shadow: none; }

.noscript { padding: var(--gutter); }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  :root { --fs: 20px; }
  .tube { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .side { display: none; }
  .ticker { display: block; }
  .bar { font-size: 17px; }
  .bar-host { overflow: hidden; text-overflow: ellipsis; }
  .bar-status { display: none; }
  .bar-right { gap: 14px; }
  .ps1 { font-size: 16px; }
  .ps1 .long { display: none; }
}
@media (max-width: 420px) {
  .bar-host { max-width: 12ch; }
  .week { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .cur { animation: none; }
  .flash { animation: none; }
  .ln.old { transition: none; }
}