:root {
  --ground: #0a0806;
  --screen: #1f160b;
  --ink: #ffb547;
  --muted: #b8864a;
  --edge: #8a6536;
  --dot: #ffb03f;
  --glow: rgba(255, 170, 60, .45);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}
:root[data-phosphor="green"] {
  --ground: #050a06; --screen: #0c1d11; --ink: #59f58a; --muted: #3fa863; --edge: #2f7a49; --dot: #4ef07f; --glow: rgba(70, 240, 120, .4);
}
:root[data-phosphor="cyan"] {
  --ground: #05090b; --screen: #0b1b20; --ink: #62e1ff; --muted: #3e9db5; --edge: #2f7585; --dot: #55dcff; --glow: rgba(80, 210, 255, .4);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--ground);
  background-image: radial-gradient(ellipse farthest-corner at 50% 45%, var(--screen) 0%, var(--ground) 72%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.page {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100%;
}
.portrait { position: relative; margin: 0; min-height: 16rem; overflow: hidden; }
body::after {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: clamp(14px, 3vmin, 36px);
  box-shadow: 0 0 0 40px #000, inset 0 0 clamp(24px, 6vmin, 90px) rgba(0, 0, 0, .85);
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .16) 3px),
    radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .7) 100%);
}
.controls { z-index: 1; }
.portrait canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

.controls {
  position: absolute;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: 12px;
  display: flex; gap: 8px;
}
.controls button {
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-grid; place-items: center;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 50%;
  cursor: pointer;
}
.controls button:hover { border-color: var(--ink); }
.controls button:not(:focus-visible) {
  position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0;
  overflow: hidden; clip-path: inset(50%); border: 0;
}
.controls svg { width: 16px; height: 16px; }

.words {
  min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: 1.5rem;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2.25rem);
  text-align: center;
}
h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-shadow: 0 0 .35em var(--glow);
}
h1 .tld { color: var(--muted); font-weight: 400; }
h1 > span[aria-hidden] { white-space: pre; }
.words p { margin: .6rem auto 0; max-width: 64ch; color: var(--muted); font-family: var(--font-mono); font-size: .95rem; text-shadow: 0 0 .5em var(--glow); }
.banner { white-space: pre-wrap; }
.ch { visibility: hidden; }
.ch.on { visibility: visible; }
.cur { display: inline-block; position: relative; width: 0; }
.cur::after {
  content: "";
  position: absolute; left: .08em; bottom: -.12em;
  width: .55em; height: 1.05em;
  background: var(--ink);
  box-shadow: 0 0 .4em var(--glow);
  animation: blink 1.06s steps(1) infinite;
}
.still .cur::after { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.under { position: relative; z-index: 1; color: var(--ground); text-shadow: none; animation: inv 1.06s steps(1) infinite; }
@keyframes inv { 50% { color: var(--ink); } }
.still .under { animation: none; }

.term {
  width: min(64ch, 100%);
  margin: 1.1rem auto 0;
  font-family: var(--font-mono);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
  text-shadow: 0 0 .5em var(--glow);
}
.out { max-height: min(22.5em, 45vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.out:empty { display: none; }
.out > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.out .echo { color: var(--ink); }
.prompt { display: block; position: relative; cursor: text; color: var(--ink); min-height: 1.5em; margin-top: .35rem; }
.prompt:focus-within { outline: 2px solid var(--edge); outline-offset: 2px; border-radius: 2px; }
.prompt input { font-size: 16px; }
.hint { color: var(--muted); margin-left: .9em; font-style: italic; }

@media (orientation: landscape) {
  .page { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .portrait { min-height: 100vh; min-height: 100svh; }
  .words {
    display: flex; flex-direction: column; justify-content: center;
    text-align: left;
    padding-left: clamp(16px, 5vw, 5rem);
  }
  .words p { margin-left: 0; }
  .term { margin-left: 0; }
}
@media (orientation: portrait) {
  .page { grid-template-rows: minmax(16rem, 62svh) auto; }
  .words { text-align: left; }
  .words p, .term { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cur::after, .under { animation: none; } }
@media (forced-colors: active) {
  .controls button { border: 1px solid ButtonText; }
  body::after { display: none; }
  .cur::after { background: CanvasText; }
  .under { color: Canvas; }
}
@media print { .controls, body::after { display: none; } }