/* V21 is additive. Classic continues to use the unmodified styles.css. */
@font-face {
  font-family: "Neural77 CRT";
  src: url("/fonts/Neural77CRT.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neural77 Terminess";
  src: url("/fonts/Terminess.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.theme-brand { display: none; }
.theme-control { display: inline-flex; align-items: center; gap: .4rem; font-size: 10px; letter-spacing: .05em; white-space: nowrap; }
.theme-control select { color: var(--label); background: var(--paper); border: 1px solid var(--deep); border-radius: 3px; padding: .3rem; font: inherit; cursor: pointer; }
.theme-control select:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

html[data-theme="v21"] {
  --ink: #d1e8ac;
  --soft: #aec693;
  --deep: #22383a;
  --orange: #ff9b26;
  --paper: #030e08;
  --panel: #223a30;
  --muted: #91ae85;
  --label: #e3ecb3;
  --value: #bdd1a0;
  --error: #ffad72;
  --diagram-base: #d1e8ac;
  --diagram-base-shadow: #82976d;
  --diagram-result: #d1e8ac;
  --diagram-result-highlight: #eff8c5;
  --diagram-change: #ff9b26;
  --diagram-guide: #56724a;
  --diagram-text: #dcecb6;
  --rim: #22383a;
}
html[data-theme="v21"] { --v21-font: "Neural77 CRT"; }
html[data-theme="v21"][data-v21-font="terminus"] { --v21-font: "Neural77 Terminess"; }
html[data-theme="v21"][data-v21-font="ibm-plex-mono"] { --v21-font: "IBM Plex Mono"; }
html[data-theme="v21"][data-v21-font="jetbrains-mono"] { --v21-font: "JetBrains Mono"; }
html[data-theme="v21"] * { font-family: var(--v21-font), "Neural77 Mono", monospace; }
.font-control, .font-control[hidden] { display: none; }
html[data-theme="v21"] .font-control:not([hidden]) { display: inline-flex; }
html[data-theme="v21"] .theme-control,
html[data-theme="v21"] .theme-control select { font-family: "Neural77 Mono", monospace; }
.font-control select { max-width: 180px; font-size: 11px; }
html[data-theme="v21"] body { background: #020906; color: var(--ink); font-size: 16px; }
html[data-theme="v21"] .machine {
  width: min(100%, 1800px); height: 100dvh; margin: 0 auto;
  padding: 10px; border: 1px solid #22383a; border-radius: 12px;
  background:
    repeating-linear-gradient(112deg, #8eaa7e06 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 30% 0, #223a3033, transparent 60%),
    linear-gradient(150deg, #223a30, #22383a 62%, #222c3a);
  box-shadow: inset 0 1px 1px #c0d5a742, inset 0 -2px 6px #000b, 0 10px 40px #0008;
}
html[data-theme="v21"] .machine::after {
  opacity: .10; mix-blend-mode: normal;
  background: repeating-linear-gradient(180deg, transparent 0 3px, #0005 3px 4px);
}
html[data-theme="v21"] .machine-top {
  height: 48px; gap: 16px; padding: 5px 12px; border: 1px solid var(--rim); border-radius: 7px;
  background: linear-gradient(#223a30, #030e08); box-shadow: inset 0 2px 5px #000a, 0 1px #6e8d5555;
}
html[data-theme="v21"] .system-label { display: none; }
html[data-theme="v21"] .theme-brand { display: block; font-size: clamp(18px, 2.4vw, 30px); letter-spacing: .08em; color: var(--label); white-space: nowrap; }
html[data-theme="v21"] .theme-brand span { color: var(--orange); }
html[data-theme="v21"] .build-label { font-size: 10px; color: var(--muted); }
html[data-theme="v21"] .machine-top-actions { gap: 16px; }
html[data-theme="v21"] .workspace { height: calc(100% - 48px); padding-top: 9px; gap: 10px; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
html[data-theme="v21"] .insight-column { gap: 10px; grid-template-rows: minmax(0, 1fr) minmax(255px, 34%); }
html[data-theme="v21"] :is(.terminal, .interpret-panel, .field-panel, .remembered-panel) {
  position: relative; min-width: 0; padding: 10px; border: 1px solid var(--rim); border-radius: 14px;
  background: linear-gradient(145deg, #223a30, #22383a);
  box-shadow: inset 0 1px #a9bd8b42, inset 0 -1px 2px #000, 0 1px 2px #0009;
}
/* Small recessed fasteners, drawn rather than baked into a screenshot. */
html[data-theme="v21"] :is(.terminal, .interpret-panel, .field-panel)::before,
html[data-theme="v21"] :is(.terminal, .interpret-panel, .field-panel)::after {
  content: ""; position: absolute; top: 5px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, #b8b182, #384535 45%, #050d07 48% 60%, #6d7550 65%);
  box-shadow: 0 0 0 1px #030c07, 0 1px 1px #b3be6b33;
}
html[data-theme="v21"] :is(.terminal, .interpret-panel, .field-panel)::before { left: 4px; }
html[data-theme="v21"] :is(.terminal, .interpret-panel, .field-panel)::after { right: 4px; }
html[data-theme="v21"] .terminal { gap: 6px; grid-template-rows: auto minmax(0, 1fr) auto auto; }
html[data-theme="v21"] .terminal:has(.reframe-editor:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
html[data-theme="v21"] .terminal:has(#continuation-context:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
html[data-theme="v21"] .terminal:has(.reframe-editor:not([hidden])):has(#continuation-context:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
html[data-theme="v21"] :is(.status-line, .interpret-header, .field-header) {
  min-height: 30px; padding: 3px 9px 7px; border-bottom: 1px solid #567446;
  background: #101c19; border-radius: 7px 7px 0 0; color: var(--label); gap: 8px;
}
html[data-theme="v21"] .terminal-brand { color: var(--label); font-size: 12px; letter-spacing: .04em; }
html[data-theme="v21"] .connection-line { gap: 10px; font-size: 12px; }
html[data-theme="v21"] #terminal-clock { font-size: 10px; }
html[data-theme="v21"] #connection-status { animation: secure-link-blink 3.6s ease-in-out infinite; color: var(--soft); }
html[data-theme="v21"] #connection-status::before { color: #8edd8b; border-radius: 50%; width: 6px; height: 6px; font-size: 1em; }
html[data-theme="v21"] :is(.terminal-output, .interpret-output, .field-stage) {
  background: radial-gradient(ellipse at top, #223a3022, transparent 75%), #030e08;
  box-shadow: inset 0 2px 8px #000a; border-radius: 4px;
}
html[data-theme="v21"] .terminal-output { padding: 13px 14px; }
html[data-theme="v21"] .entry { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
html[data-theme="v21"] .entry.follow-up { color: var(--label); opacity: 1; border-left-color: var(--orange); }
html[data-theme="v21"] .entry.interpretation-label { color: var(--orange); font-size: 13px; }
html[data-theme="v21"] .interpret-panel { gap: 0; }
html[data-theme="v21"] .interpret-header { align-items: center; }
html[data-theme="v21"] .interpret-header h2 { color: var(--label); font-size: 15px; letter-spacing: .02em; }
html[data-theme="v21"] .eyebrow { color: var(--muted); font-size: 11px; }
html[data-theme="v21"] .panel-actions > span { font-size: 9px; }
html[data-theme="v21"] .interpret-output { padding: 12px 14px; font-size: 14px; line-height: 1.6; overflow: auto; }
html[data-theme="v21"] .interpret-output > div { grid-template-columns: minmax(90px, auto) minmax(0, 1fr); }
html[data-theme="v21"] .interpret-output .diagnostic-value { color: var(--label); }
html[data-theme="v21"] :is(.interpret-empty, .field-empty) { font-size: 12px; }
html[data-theme="v21"] .field-panel { grid-template-rows: auto minmax(0, 1fr) auto; }
html[data-theme="v21"] .field-header h2 { font-size: 14px; color: var(--label); }
html[data-theme="v21"] .field-stage { min-height: 210px; }
html[data-theme="v21"] :is(.field-mod-value, .field-title-mod, .field-title-mark-mod) { fill: var(--orange); }
html[data-theme="v21"] .field-frame-corner { stroke: var(--deep); }
html[data-theme="v21"] .field-bar { opacity: .9; }
html[data-theme="v21"] .field-footer { border-color: var(--rim); padding-top: 5px; }
html[data-theme="v21"] .field-meta { border-color: var(--rim); }
html[data-theme="v21"] .field-meta span { border-color: var(--deep); }
html[data-theme="v21"] .terminal-form { padding: 4px 8px; gap: 8px; background: #030e08; border: 1px solid #6d8756; border-radius: 4px; box-shadow: inset 0 2px 3px #000a; }
html[data-theme="v21"] .terminal-form label { font-size: 14px; }
html[data-theme="v21"] .terminal-form textarea,
html[data-theme="v21"] .terminal-input-mirror { font-size: 16px; line-height: 1.4; }
html[data-theme="v21"] .cursor-block { background: var(--orange); box-shadow: none; }
html[data-theme="v21"] .terminal-form button { min-width: 50px; align-self: stretch; font-size: 12px; }
html[data-theme="v21"] .terminal-footer { flex-wrap: wrap; gap: 6px; font-size: 12px; padding: 3px 0 0; }
html[data-theme="v21"] .terminal-commands { gap: 5px; flex: 1 1 100%; }
html[data-theme="v21"] .terminal-footer button,
html[data-theme="v21"] :is(.fullscreen-toggle, .view-switch button, .mobile-tab, .remember-button, .remembered-actions button, .remembered-actions a, .remembered-item-actions button, .remembered-item-actions a, #remembered-more, .diagram-calculate, .reframe-actions button, .reframe-modifiers button) {
  padding: 5px 8px; border: 1px solid var(--rim); border-radius: 4px; color: var(--ink);
  background: linear-gradient(#223a30, #030e08); box-shadow: inset 0 1px #96ad7033, 0 1px 2px #0008;
  font-size: 12px; cursor: pointer;
}
html[data-theme="v21"] .view-switch button { font-size: 10px; padding: 4px 5px; }
html[data-theme="v21"] :is(button:hover, button.active, button[aria-pressed="true"]) { color: var(--orange); border-color: #bc792d; }
html[data-theme="v21"] button:focus-visible,
html[data-theme="v21"] a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
html[data-theme="v21"] .terminal-form:focus-within { border-color: var(--orange); }
html[data-theme="v21"] button:disabled { cursor: default; opacity: .45; }
html[data-theme="v21"] :is(.reframe-editor, .reframe-comparison) { background: var(--paper); border-color: var(--deep); }
html[data-theme="v21"] .gate-mark { border-color: var(--deep); box-shadow: none; }
html[data-theme="v21"] .gate-entry { border-color: var(--rim); background: var(--paper); }
html[data-theme="v21"] .gate-entry button { border-color: var(--rim); }
html[data-theme="v21"] .gate { inset-block-start: 65px; }
html[data-theme="v21"] .splash { inset-block-start: 65px; }
html[data-theme="v21"] .reframe-editor textarea { border-color: var(--rim); }
html[data-theme="v21"] .panel-expanded { height: 100%; }
html[data-theme="v21"] .panel-expanded.field-panel { grid-template-rows: auto auto minmax(0, 1fr) auto; }
html[data-theme="v21"] .workspace.remembered-view > .remembered-panel { height: 100%; }
html[data-theme="v21"] .machine:fullscreen { width: 100vw; max-width: none; height: 100dvh; margin: 0; }

@media (min-width: 641px) and (max-width: 1080px) {
  html[data-theme="v21"] body { overflow: hidden; }
  html[data-theme="v21"] .machine { min-height: 0; height: 100dvh; }
  html[data-theme="v21"] .panel-actions > span { display: none; }
  html[data-theme="v21"] #terminal-clock { display: none; }
  html[data-theme="v21"] .entry { font-size: 14px; }
  html[data-theme="v21"] .build-label { font-size: 9px; }
  html[data-theme="v21"] .machine-top-actions { gap: 8px; }
  html[data-theme="v21"] .interpret-output { padding: 10px; }
  html[data-theme="v21"] .field-header { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  html[data-theme="v21"] .machine { height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); padding: 6px; border-radius: 8px; }
  html[data-theme="v21"] .machine-top { height: 38px; padding: 3px 6px; gap: 6px; }
  html[data-theme="v21"] .theme-brand { font-size: 17px; letter-spacing: 0; }
  html[data-theme="v21"] .machine-top-actions { gap: 5px; }
  html[data-theme="v21"] .build-label { display: none; }
  html[data-theme="v21"] .theme-control { font-size: 10px; gap: 3px; }
  html[data-theme="v21"] .theme-control select { min-height: 28px; }
  html[data-theme="v21"] .workspace { height: calc(100% - 38px); padding-top: 43px; display: block; }
  html[data-theme="v21"] .mobile-tabs { inset: 6px 0 auto; gap: 4px; }
  html[data-theme="v21"] .mobile-tab { min-height: 32px; font-size: 10px; padding: 4px; }
  html[data-theme="v21"] :is(.terminal, .interpret-panel, .field-panel, .remembered-panel) { padding: 7px; border-radius: 10px; }
  html[data-theme="v21"] .entry { font-size: 14px; line-height: 1.5; }
  html[data-theme="v21"] .terminal-output { padding: 10px; }
  html[data-theme="v21"] .interpret-output { font-size: 14px; padding: 10px; }
  html[data-theme="v21"] .interpret-output > div { grid-template-columns: minmax(75px, auto) minmax(0, 1fr); gap: 6px; }
  html[data-theme="v21"] .panel-actions > span, html[data-theme="v21"] #terminal-clock { display: none; }
  html[data-theme="v21"] .terminal-brand { font-size: 10px; }
  html[data-theme="v21"] .connection-line { font-size: 10px; gap: 6px; }
  html[data-theme="v21"] .field-panel { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  html[data-theme="v21"] .field-header { display: grid; padding-inline: 6px; }
  html[data-theme="v21"] .terminal-footer button { min-height: 30px; padding: 4px 6px; font-size: 11px; }
  html[data-theme="v21"] .gate, html[data-theme="v21"] .splash { inset-block-start: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="v21"] .cursor-block, html[data-theme="v21"] #connection-status { animation: none; }
}

html[data-theme="v21"] .theme-brand span { display: inline; }

/* Mobile header: brand and app version on the left, matching desktop. */
@media (max-width: 640px) {
  html .machine-top, html[data-theme="v21"] .machine-top { justify-content: space-between; gap: 6px; }
  html .system-label { display: none; }
  html .machine-top-actions { order: 1; margin-left: auto; gap: 5px; }
  html .machine-top .build-label { display: none; }
  html .theme-brand, html[data-theme="v21"] .theme-brand {
    display: block; order: 0; text-align: left; margin-right: auto;
    font-size: 17px; line-height: 1; letter-spacing: 0; white-space: nowrap;
  }
  html .theme-brand span { display: inline; color: var(--orange); }
  html .theme-brand::after {
    content: "v." attr(data-app-version); display: block; margin-top: 3px;
    font-size: 10px; color: var(--muted); letter-spacing: 0;
  }
  html .terminal-footer { flex-wrap: wrap; gap: 6px; }
  html .terminal-commands { flex: 1 1 100%; }
  html .terminal-footer > button { flex: 1 1 0; white-space: nowrap; font-size: 10px; }
  html[data-theme="v21"] .terminal-footer > button { padding-inline: 3px; font-size: 10px; }
}

@media (max-width: 640px) {
  html .terminal-brand { font-size: 10px; letter-spacing: .02em; }
  html .interpret-output, html[data-theme="v21"] .interpret-output {
    min-width: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior-x: none; touch-action: pan-y pinch-zoom;
  }
  html .interpret-output > div, html[data-theme="v21"] .interpret-output > div {
    min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); gap: 2px;
  }
  html .interpret-output .diagnostic-label, html .interpret-output .diagnostic-value {
    white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; max-width: 100%;
  }
}

/* A second header row keeps all three font names usable on small screens. */
@media (max-width: 640px) {
  html[data-theme="v21"] .machine-top { height: 72px; }
  html[data-theme="v21"] .machine-top-actions { display:grid; min-width:0; grid-template-columns:minmax(0,1fr) auto; gap:4px 6px; }
  html[data-theme="v21"] .font-control { min-width:0; grid-row:2; grid-column:1 / -1; justify-content:flex-end; }
  html[data-theme="v21"] .machine-top-actions > .fullscreen-toggle { grid-row:1; grid-column:2; }
  html[data-theme="v21"] .workspace { height:calc(100% - 72px); }
  html[data-theme="v21"] .gate, html[data-theme="v21"] .splash { inset-block-start:86px; }
  .font-control select { min-width:0; max-width:160px; }
}