:root {
  color-scheme: dark;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface: #313244;
  --text: #cdd6f4;
  --muted: #a6adc8;
  --blue: #89b4fa;
  --green: #a6e3a1;
  --red: #f38ba8;
  --mono: "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--base); color: var(--text); font-family: var(--mono); }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; min-width: 280px; }
a { color: var(--blue); text-underline-offset: .2em; }
a:hover { color: #b4befe; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: #45475a; color: var(--text); }

.terminal-page { overflow: hidden; }
.terminal-shell {
  background: var(--base);
  height: 100svh;
  height: 100dvh;
  position: relative;
}
.terminal-viewport {
  background: var(--base);
  cursor: text;
  height: 100%;
  min-height: 0;
  overscroll-behavior: none;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  position: relative;
  touch-action: none;
  width: 100%;
}
.terminal-screen {
  color: var(--terminal-fg, var(--text));
  font-family: var(--mono);
  font-size: clamp(.8125rem, .775rem + .18vw, .9375rem);
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  height: 100%;
  line-height: 1.55;
  overflow: hidden;
  white-space: pre;
  width: 100%;
}
.terminal-row { height: 1.55em; min-width: max-content; }
.terminal-cell { display: inline-block; min-width: 1ch; }
.terminal-cell.is-wide { min-width: 2ch; }
.terminal-cell.is-bold { font-weight: 700; }
.terminal-cell.is-italic { font-style: italic; }
.terminal-cell.is-dim { opacity: .58; }
.terminal-cell.is-underlined { text-decoration: underline; text-underline-offset: .16em; }
.terminal-cell.is-struck { text-decoration: line-through; }
.terminal-cell.is-hidden { color: transparent !important; }
.terminal-link { color: var(--blue); }
.terminal-cursor { animation: cursor-blink 1.1s step-end infinite; background: var(--green) !important; color: var(--base) !important; }
.cursor-bar { box-shadow: inset 2px 0 var(--green); background: transparent !important; color: inherit !important; }
.cursor-underline { box-shadow: inset 0 -2px var(--green); background: transparent !important; color: inherit !important; }
.cursor-hollow { box-shadow: inset 0 0 0 1px var(--green); background: transparent !important; color: inherit !important; }
.terminal-input { height: 1px; left: 1rem; opacity: .01; overflow: hidden; padding: 0; pointer-events: none; position: absolute; resize: none; top: 1rem; width: 1px; }
.cell-measure {
  font-family: var(--mono);
  font-size: clamp(.8125rem, .775rem + .18vw, .9375rem);
  font-variant-ligatures: none;
  font-weight: 400;
  left: -9999px;
  line-height: 1.55;
  position: fixed;
  top: -9999px;
  visibility: hidden;
}
.loading-copy { color: var(--text); line-height: 1.8; }
.loading-copy span { color: var(--muted); }
.has-error .terminal-screen { color: var(--red); }
@keyframes cursor-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: .15; } }

@media (max-width: 680px) {
  .terminal-viewport {
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .terminal-viewport { padding-block: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-bottom)); }
}

.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .terminal-cursor { animation: none; }
}