/* Extracted verbatim from the P1 Green design system. Do not hand-edit:
   re-extract from the source document so the two cannot drift apart. */
/* ============================================================
   THE TERMINAL — P1 Green
   Single theme by intent. This machine has one look.
   ============================================================ */
:root{
  --bg:#050B07;
  --bg-2:#091308;
  --fg:#7DFFA6;
  --fg-hi:#DCFFE7;
  --fg-mid:rgba(125,255,166,.84);
  --fg-dim:rgba(125,255,166,.62);
  --rule:rgba(125,255,166,.24);
  --rule-2:rgba(125,255,166,.42);
  --ghost:rgba(125,255,166,.13);
  --accent:#3DE874;
  --on-accent:#03170A;
  --up:#DCFFE7;
  --down:#FF6B47;
  --keycap:#FFB000;
  --glow:rgba(61,232,116,.42);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --dot:"DotGothic16","IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --s1:4px; --s2:8px; --s3:10px; --s4:14px; --s5:18px; --s6:26px; --s7:38px;
  --tap:44px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ghost)}
:focus-visible{outline:2px solid var(--fg-hi);outline-offset:2px}

/* ── CRT atmosphere. Optional. Keep subtle or omit entirely. ── */
.crt-scan,.crt-vig{position:fixed;inset:0;pointer-events:none;z-index:60}
.crt-scan{
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.13) 2px 3px);
  mix-blend-mode:multiply;
}
.crt-vig{
  background:radial-gradient(ellipse 130% 100% at 50% 44%,
    rgba(0,0,0,0) 46%, rgba(0,0,0,.30) 100%);
}
.glow{text-shadow:0 0 9px var(--glow)}

/* ── Layout ──────────────────────────────────────────────── */
.shell{
  max-width:1060px;margin:0 auto;
  padding-inline:16px;
  padding-block:var(--s4) var(--s7);
}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s6)}
.row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}

/* ── Section header: block, label, flexing rule, number ──── */
.hd{display:flex;align-items:center;gap:var(--s3);margin-bottom:3px}
.hd-b{width:9px;height:13px;background:var(--accent);flex:0 0 auto}
.hd-t{
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-hi);white-space:nowrap;font-weight:600;
}
.hd-r{flex:1;border-bottom:1px dotted var(--rule-2);min-width:10px;transform:translateY(1px)}
.hd-n{font-size:11px;letter-spacing:.1em;color:var(--fg-dim);font-variant-numeric:tabular-nums}

/* ── Dot-leader key/value ────────────────────────────────── */
.dl{display:flex;align-items:baseline;gap:var(--s2);font-size:13px}
.dl-k{
  color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;font-size:12px;
}
.dl-d{flex:1;border-bottom:1px dotted var(--rule-2);min-width:12px;transform:translateY(-3px)}
.dl-v{
  color:var(--fg-hi);letter-spacing:.04em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dl-v.lo{color:var(--fg-mid)}

/* ── Prose. Sans only. Used sparingly. ───────────────────── */
.p{
  font-family:var(--sans);font-size:14px;line-height:1.66;
  color:var(--fg-mid);max-width:62ch;margin:0;letter-spacing:0;
}
.p b{color:var(--fg-hi);font-weight:500}
.p em{color:var(--fg-hi);font-style:italic}

/* ── Tables ──────────────────────────────────────────────── */
.tw{overflow-x:auto}
table{
  border-collapse:collapse;width:100%;min-width:620px;
  font-variant-numeric:tabular-nums;
}
thead th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:500;padding:8px 14px 8px 0;
  border-bottom:1px solid var(--rule-2);white-space:nowrap;
}
thead th.num{text-align:right}
tbody td{
  padding:8px 14px 8px 0;border-bottom:1px solid var(--rule);
  font-size:13.5px;white-space:nowrap;color:var(--fg);
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{color:var(--fg-hi)}
td.sym{color:var(--fg-hi);font-weight:600;letter-spacing:.07em}
td.nm{color:var(--fg-mid);font-size:12px;white-space:normal;min-width:158px}
td.num{text-align:right}
td.spark{color:var(--fg-dim);letter-spacing:-1px;font-size:15px}

/* Direction. The glyph carries it; colour only reinforces. */
.up{color:var(--up)}
.dn{color:var(--down)}

/* Phosphor decay on a value that just changed */
.val{transition:text-shadow 1.1s ease-out,color 1.1s ease-out}
.val.lit{color:var(--fg-hi);text-shadow:0 0 10px var(--glow)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  appearance:none;font-family:var(--mono);font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  padding:0 16px;min-height:var(--tap);border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);
  display:inline-flex;align-items:center;justify-content:center;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn-ghost{background:transparent;color:var(--fg-mid);border-color:var(--rule-2)}
.btn-ghost:hover{color:var(--fg-hi);border-color:var(--fg-mid);filter:none}
.btn-danger{background:transparent;color:var(--down);border-color:var(--down)}
.btn-danger:hover{background:var(--down);color:var(--bg);filter:none}
.btn-sm{min-height:32px;font-size:11px;padding:0 11px}

/* ── Inputs ──────────────────────────────────────────────── */
.lbl{
  display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:var(--s1);
}
.inp{
  width:100%;min-height:var(--tap);padding:0 12px;
  background:var(--bg-2);border:1px solid var(--rule-2);
  color:var(--fg-hi);font-family:var(--mono);font-size:14px;
  letter-spacing:.05em;font-variant-numeric:tabular-nums;
}
.inp::placeholder{color:var(--fg-dim)}
.inp:focus{outline:none;border-color:var(--accent)}
.inp[aria-invalid="true"]{border-color:var(--down)}
.inp-err{color:var(--down);font-size:12px;margin-top:var(--s1)}
select.inp{appearance:none;cursor:pointer;padding-right:30px}

/* ── Command line: hidden caret, rendered block cursor ───── */
.cmd{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid var(--rule)}
.cmd-p{color:var(--fg-hi);font-weight:700;letter-spacing:.08em;flex:0 0 auto}
.cmd-f{position:relative;flex:1;min-width:0;height:22px;overflow:hidden}
.cmd-m{
  position:absolute;inset:0;display:flex;align-items:center;
  font-family:var(--mono);font-size:14.5px;letter-spacing:.09em;
  color:var(--fg-hi);white-space:pre;pointer-events:none;
}
.cmd-m .ph{color:var(--fg-dim)}
.cur{
  display:inline-block;width:9px;height:16px;background:var(--fg);
  margin-left:1px;animation:blink 1.06s steps(1,end) infinite;
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.cmd-i{
  position:absolute;inset:0;width:100%;padding:0;
  background:transparent;border:0;outline:0;
  font-family:var(--mono);font-size:14.5px;letter-spacing:.09em;
  color:transparent;caret-color:transparent;text-transform:uppercase;
}

/* ── Function-key rail ───────────────────────────────────── */
.fkeys{display:grid;grid-template-columns:repeat(8,1fr)}
.fk{
  appearance:none;background:transparent;border:0;border-right:1px solid var(--rule);
  color:var(--fg-mid);font-family:var(--mono);cursor:pointer;
  padding:9px 3px;min-height:var(--tap);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:11.5px;letter-spacing:.04em;min-width:0;
}
.fk:last-child{border-right:0}
.fk .fn{font-size:9.5px;color:var(--fg-dim);letter-spacing:.11em}
.fk .fl{font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fk:hover{background:var(--ghost);color:var(--fg-hi)}
.fk[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.fk[aria-current="page"] .fn{color:var(--on-accent);opacity:.7}

/* ── Status line ─────────────────────────────────────────── */
.stat{
  padding:6px 16px;font-size:11.5px;letter-spacing:.07em;color:var(--fg-dim);
  border-bottom:1px solid var(--rule);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat.ok{color:var(--up)}
.stat.err{color:var(--down)}

/* ── Ticker rail ─────────────────────────────────────────── */
.rail{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--bg-2);border-bottom:1px solid var(--rule-2);
  overflow:hidden;height:30px;display:flex;align-items:center;
}
.tape{display:flex;white-space:nowrap;animation:tape 58s linear infinite;will-change:transform}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{
  display:inline-flex;align-items:baseline;gap:8px;padding:0 15px;
  border-right:1px solid var(--rule);font-size:12px;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;color:var(--fg-mid);
}
.tick b{font-weight:600;color:var(--fg-hi)}

/* ── Badge ───────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--rule-2);color:var(--fg-mid);
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:2px 8px;white-space:nowrap;
}
.badge-on{border-color:var(--accent);color:var(--accent)}
.badge-err{border-color:var(--down);color:var(--down)}

/* ── Meter / bar ─────────────────────────────────────────── */
.meter{height:8px;background:var(--ghost);position:relative;overflow:hidden}
.meter-f{position:absolute;inset:0 auto 0 0;background:var(--fg-dim)}
.meter-f.hot{background:var(--accent)}

/* ── Modal ───────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:80;display:grid;place-items:center;padding:16px}
.modal{
  background:var(--bg-2);border:1px solid var(--rule-2);
  max-width:460px;width:100%;padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);
}

/* ── Toast ───────────────────────────────────────────────── */
.toast{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  max-width:420px;margin-inline:auto;
  background:var(--bg-2);border:1px solid var(--accent);
  padding:12px 14px;font-size:12.5px;letter-spacing:.05em;
  color:var(--fg-hi);text-transform:uppercase;
}
.toast.err{border-color:var(--down);color:var(--down)}

/* ── Empty + loading. A blinking block, not a spinner. ───── */
.empty{
  padding:var(--s7) 0;text-align:center;color:var(--fg-dim);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.loading::after{
  content:"█";margin-left:2px;color:var(--fg);
  animation:blink 1.06s steps(1,end) infinite;
}
.skel{background:var(--ghost);height:1em;width:100%;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Receipt. Always real paper, whatever the screen. ────── */
.rcpt{
  background:#E7D6B2;color:#2A2016;font-family:var(--mono);
  font-size:11.5px;line-height:1.68;padding:15px 17px 18px;
  max-width:318px;width:100%;position:relative;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.rcpt::before,.rcpt::after{
  content:"";position:absolute;left:0;right:0;height:7px;
  background-image:radial-gradient(circle at 50% 50%,var(--bg) 0 2.1px,rgba(0,0,0,0) 2.4px);
  background-size:12px 7px;
}
.rcpt::before{top:0}
.rcpt::after{bottom:0}
.rcpt hr{border:0;border-top:1px dashed rgba(42,32,22,.42);margin:8px 0}
.rh{font-family:var(--dot);font-size:13px;letter-spacing:.05em}
.rr{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.rr span:last-child{text-align:right}
.rlo{color:rgba(42,32,22,.66);font-size:10.5px;letter-spacing:.05em}
.rcal{word-break:break-all;font-size:10.5px;color:rgba(42,32,22,.82)}

/* ── The mark. Amber, always. ────────────────────────────── */
.cap{
  width:124px;height:124px;flex:0 0 auto;
  background:linear-gradient(168deg,#FFC93C 0%,var(--keycap) 45%,#C47C00 100%);
  border-radius:8px;
  box-shadow:0 7px 0 #8C5800,0 10px 26px rgba(0,0,0,.28),
             inset 0 2px 0 rgba(255,242,205,.7);
  display:flex;align-items:center;justify-content:center;
  color:#201607;font-weight:700;font-size:30px;position:relative;
}
.cap::after{
  content:"";position:absolute;left:10px;right:10px;top:9px;height:33%;
  border-radius:5px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.32),rgba(255,255,255,0));
}
.cap-sm{
  width:46px;height:46px;font-size:12px;border-radius:4px;
  box-shadow:0 3px 0 #8C5800,inset 0 1px 0 rgba(255,242,205,.7);
}
.wordmark{font-family:var(--dot);letter-spacing:.05em;color:var(--fg-hi)}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:640px){
  .fkeys{grid-template-columns:repeat(4,1fr)}
  .fk{border-bottom:1px solid var(--rule)}
  .fk:nth-child(4){border-right:0}
  .fk:nth-child(n+5){border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .tape,.cur,.loading::after,.skel{animation:none}
  .val{transition:none}
}