:root {
  color-scheme: dark;
  --canvas: #000;
  --prompt-surface: #171a20;
  --output-surface: #1b2027;
  --token-surface: #171a20;
  --field: #0f1115;
  --field-raised: #1d2128;
  --line: #343b46;
  --line-strong: #46505d;
  --text: #f3f5f7;
  --muted: #a5aeba;
  --dim: #737d89;
  --accent: #8bd450;
  --accent-pressed: #73bd3d;
  --coral: #ff765f;
  --focus: #7eb7ff;
  --prompt-size: 62px;
  --output-size: 62px;
  --prompt-width: 240px;
  --prompt-min-width: 240px;
  --prompt-max-width: min(560px, 72vw);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; }

html, body { min-width: 320px; min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--canvas);
  font-family: var(--sans);
}

button, input { font: inherit; }
button { cursor: pointer; }

.page-shell {
  width: min(1320px, calc(100% - 64px));
  height: 100svh;
  min-height: 620px;
  margin: 0 auto;
  padding: 26px 0 20px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 22px;
  overflow: hidden;
}

.masthead,
.prompt-heading,
.output-heading,
.token-heading,
.status-cluster {
  display: flex;
  align-items: center;
}

.masthead {
  min-height: 40px;
  justify-content: space-between;
}

.wordmark {
  color: var(--text);
  font: 600 13px/1 var(--mono);
  letter-spacing: .12em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 10px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  font: 600 12px/1 var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .2s var(--ease-out-quart), background .2s var(--ease-out-quart);
}

.about-link:hover { color: var(--text); background: var(--field-raised); }
.about-link:focus-visible { color: var(--text); background: var(--field-raised); outline: 3px solid rgb(126 183 255 / 22%); outline-offset: 1px; }

.status-cluster {
  gap: 9px;
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  letter-spacing: .08em;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
  transition: background .25s var(--ease-out-quart), box-shadow .25s var(--ease-out-quart), transform .25s var(--ease-out-quart);
}

.status-dot.live {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(139 212 80 / 18%);
  transform: scale(1.08);
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(120px, .46fr) minmax(240px, 1fr);
  gap: clamp(30px, 5vh, 68px);
  padding: 0 clamp(12px, 7vw, 96px);
  overflow: hidden;
}

.prompt-panel,
.output-panel {
  min-width: 0;
  min-height: 0;
}

.prompt-panel {
  display: grid;
  align-content: start;
  justify-items: center;
}

.prompt-heading,
.output-heading {
  width: min(100%, 900px);
  justify-content: space-between;
  gap: 12px;
}

.prompt-heading h1,
.output-heading h2,
.token-heading h2 {
  margin: 0;
  color: var(--muted);
  font: 600 12px/1 var(--mono);
  letter-spacing: .12em;
}

.input-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 28px;
}

#promptInput {
  display: block;
  width: min(var(--prompt-width), var(--prompt-max-width));
  min-width: min(var(--prompt-min-width), var(--prompt-max-width));
  max-width: var(--prompt-max-width);
  height: 86px;
  padding: 0 4px 13px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  outline: none;
  font: 300 var(--prompt-size)/1 var(--sans);
  letter-spacing: -.035em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: width .36s var(--ease-out-expo), color .22s var(--ease-out-quart), border-color .22s var(--ease-out-quart);
}

#promptInput:focus { border-color: #fff; }
#promptInput::placeholder { color: var(--dim); opacity: .85; }
#promptInput:disabled { color: var(--muted); }

.run-controls {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  margin-left: 10px;
}

.icon-button {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--canvas);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: scale(.78) rotate(-12deg);
  transition: opacity .18s var(--ease-out-quart), transform .34s var(--ease-out-expo), background .2s var(--ease-out-quart), border-color .2s var(--ease-out-quart);
}

.icon-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) rotate(0deg);
}

.icon-button-start:hover:not(:disabled) { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.icon-button-stop { color: var(--text); background: var(--coral); border-color: var(--coral); }
.icon-button-stop:hover:not(:disabled) { background: #ea6654; border-color: #ea6654; }
.icon-button:active:not(:disabled) { transform: scale(.9) rotate(0deg); }
.icon-button:focus-visible { outline: 3px solid rgb(126 183 255 / 28%); outline-offset: 4px; }
.icon-button svg { width: 20px; height: 20px; fill: currentColor; }

.output-panel {
  display: grid;
  align-content: start;
  justify-items: center;
}

.output-window {
  position: relative;
  width: min(700px, 76vw);
  min-height: clamp(188px, 22vw, 220px);
  margin-top: 60px;
  display: grid;
  place-items: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: 20px 24px;
  color: var(--text);
  background: #303030;
  border-radius: 24px;
  font: 300 var(--output-size)/1.24 var(--sans);
  letter-spacing: -.045em;
  text-align: center;
  white-space: pre-wrap;
  transition: color .34s var(--ease-out-quart), box-shadow .62s var(--ease-out-expo);
}

.output-window.is-complete {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 12px 42px rgb(139 212 80 / 16%);
}

.output-content { position: relative; z-index: 1; display: inline-block; max-width: 100%; }
.output-char,
.output-ghost { display: inline-block; white-space: pre; }
.output-ghost { visibility: hidden; }
.completion-wash {
  position: absolute;
  z-index: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 20px rgb(139 212 80 / 52%);
  pointer-events: none;
  will-change: transform, offset-distance, opacity;
}

.caret {
  position: absolute;
  left: 100%;
  top: 50%;
  display: block;
  width: .08em;
  height: .82em;
  margin-left: .12em;
  background: var(--accent);
  transform: translateY(-50%);
  animation: blink 1s step-end infinite;
}

.caret[hidden] { display: none; }

@keyframes blink { 50% { opacity: 0; } }

.metrics-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.metric-card {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 10px 12px;
  background: var(--field-raised);
  border-radius: var(--radius-sm);
  transition: background .22s var(--ease-out-quart), transform .22s var(--ease-out-quart);
}

.metric-card:hover { background: #242a33; transform: translateY(-1px); }

.metric-label {
  overflow: hidden;
  color: var(--dim);
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-value {
  overflow: hidden;
  color: var(--text);
  font: 500 13px/1.2 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-value { color: var(--focus); }

.token-section {
  min-height: 0;
  padding: 0;
  background: transparent;
}

.token-heading { justify-content: space-between; margin-bottom: 10px; }

.token-atlas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.token-chip {
  display: inline-flex;
  min-width: 31px;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: 500 12px/1 var(--mono);
  opacity: .62;
  transition: color .22s var(--ease-out-quart), background-color .22s var(--ease-out-quart), border-color .22s var(--ease-out-quart), opacity .22s var(--ease-out-quart), transform .34s var(--ease-out-expo), box-shadow .22s var(--ease-out-quart);
}

.token-chip.escape { color: #6d9ac5; border-color: #31465d; }
.token-chip.end { color: #ba6e68; border-color: #613c3a; }
.token-chip.probable { opacity: 1; }
.token-chip.is-best { transform: translateY(-3px) scale(1.07); box-shadow: 0 8px 22px rgb(139 212 80 / 18%); }
.token-chip:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }

.flying-token {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  color: var(--accent);
  font: 300 28px/1 var(--sans);
  letter-spacing: -.04em;
  text-shadow: 0 0 18px rgb(139 212 80 / 35%);
  transform-origin: center;
  will-change: transform, offset-distance, opacity;
}

.flying-end {
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgb(139 212 80 / 55%);
  font-size: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .page-shell { width: min(100% - 32px, 680px); padding: 18px 0 16px; gap: 18px; }
  .workspace { gap: 30px; padding: 0 8px; }
  .metrics-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card-trace { grid-column: span 3; }
}

@media (max-width: 560px) {
  body { overflow: auto; }
  .page-shell { height: auto; min-height: 100svh; overflow: visible; }
  .workspace { grid-template-rows: 140px minmax(300px, 1fr); gap: 36px; overflow: visible; }
  .input-stage { margin-top: 30px; }
  .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card-trace { grid-column: 1 / -1; }
  .token-chip { min-width: 29px; min-height: 29px; padding: 0 7px; }
  .token-heading { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}