@font-face {
  font-family: 'Fantasque Sans Mono';
  src: url('/fonts/fantasque-sans-mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: 'Fantasque Sans Mono'; src: url('/fonts/fantasque-sans-mono-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fantasque Sans Mono'; src: url('/fonts/fantasque-sans-mono-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fantasque Sans Mono'; src: url('/fonts/fantasque-sans-mono-bolditalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #14163A;
  --indigo: #3547B3;
  --amber: #F2A71B;
  --vermilion: #E34234;
  --lavender: #E8EAF5;
  --chrome-text: #E8EAF5;
  font: 18px/1.6 'Fantasque Sans Mono', monospace;
  background: var(--ink);
  color: var(--lavender);
  font-synthesis: none;
  font-variant-ligatures: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
html { overflow-anchor: none; scrollbar-color: var(--indigo) var(--ink); }
body { margin: 0; }
.terminal { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.system-bar { background: var(--indigo); color: var(--chrome-text); padding: 8px clamp(16px, 3vw, 40px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.system-bar { position: sticky; top: 0; z-index: 3; }
.history { min-width: 0; padding: clamp(24px, 5vh, 56px) clamp(16px, 3vw, 40px) 24px; overflow-wrap: anywhere; }
.startup { margin-bottom: 36px; }
.startup, #output, .command-form { max-width: 80ch; }
h1 { font: inherit; font-size: clamp(40px, 6vw, 64px); line-height: 1.2; margin: 0 0 24px; }
.os-label { font-size: .4em; white-space: nowrap; }
p { margin: 0 0 24px; }
.entry { margin-bottom: 24px; white-space: pre-wrap; }
.entry p { margin: 0; }
.document { white-space: normal; max-width: 100%; }
.document p, .document h2, .document ul, .document ol { margin: 0 0 1.6em; }
.document p, .document h2, .document li { white-space: pre-wrap; }
.document h2 { font: inherit; font-weight: 700; }
.document ul, .document ol { padding-left: 3ch; }
.document li { margin-bottom: .4em; }
.post-image { display: block; max-width: 100%; height: auto; margin: 0 0 1.6em; }
.measure-document { position: absolute; visibility: hidden; pointer-events: none; left: 0; top: 0; }
.measure-document > :last-child { margin-bottom: 1.6em; }
.terminal-link { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.terminal-link[target="_blank"]:visited { color: var(--vermilion); }
.terminal-link:hover { color: var(--lavender); }
.terminal-link:active { color: var(--vermilion); }
.terminal-link:focus-visible { outline: 1px solid var(--lavender); outline-offset: 2px; }
.command-form { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; }
.prompt { white-space: normal; overflow-wrap: anywhere; max-width: calc(100% - 3ch); }
.input-wrap { position: relative; flex: 1; min-width: 0; }
input { display: block; width: 100%; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--lavender); caret-color: var(--lavender); font: inherit; line-height: 1.6; padding: 4px 0; min-height: 44px; }
.cursor { display: none; position: absolute; pointer-events: none; left: 0; top: 50%; transform: translateY(-50%); width: 1ch; height: 1em; background: var(--lavender); }
.input-wrap.empty:focus-within input { caret-color: transparent; }
.input-wrap.empty:focus-within .cursor { display: block; animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
.system-name { white-space: nowrap; letter-spacing: .06em; }
.shortcut-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
.shortcut-bar button { min-height: 28px; background: transparent; border: 0; padding: 0 4px; }
.key { text-decoration: underline; text-underline-offset: 4px; }
button:focus-visible, .history:focus-visible { outline: 2px solid var(--lavender); outline-offset: -2px; }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.no-script { padding: 16px; }
@media (max-width: 600px) {
  .terminal-link { display: inline-block; max-width: 100%; min-height: 44px; padding-block: 8px; }
  .system-bar { padding-block: 8px; }
  .history { padding-top: 28px; }
  .shortcut-bar { position: relative; width: 100%; gap: 4px 16px; margin-left: 0; }
  .shortcut-bar button { min-height: 44px; }
  .theme-anchor { position: static; }
}
@media (prefers-reduced-motion: reduce) { .input-wrap.empty:focus-within .cursor { animation: none; } }

.theme-anchor { position: relative; }
.theme-menu { position: absolute; z-index: 2; top: 100%; right: 0; width: min(360px, calc(100vw - 32px)); padding: 12px; background: var(--ink); color: var(--lavender); border: 1px solid var(--lavender); font-size: 14px; }
.theme-menu[hidden] { display: none; }
#theme-title { margin-bottom: 8px; }
#theme-list { outline: none; }
.theme-option { padding: 4px 8px; }
.theme-option[aria-selected="true"] { background: var(--indigo); color: var(--chrome-text); }
.theme-hint { margin: 12px 0 0; font-size: 14px; }
@media (max-width: 800px) {
  .shortcut-bar { position: relative; width: 100%; margin-left: 0; }
  .theme-anchor { position: static; }
  .theme-menu { left: 0; right: auto; }
}