/* ═══════════════════════════════════════════════════════════════
   बोल — voice RAG
   Design language: dusk-maroon ground with a marigold signal —
   the colour pair of a temple courtyard at evening, not a terminal.
   Serif display carries the Latin wordmark; Devanagari stays the
   typographic subject. Telemetry set in mono, everything else warm.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:        #180e12;
  --bg-lift:   #21131a;
  --line:      rgba(245,237,224,.10);
  --line-hot:  rgba(245,237,224,.20);
  --fg:        #f5ede0;
  --fg-dim:    #b8a89c;
  --fg-faint:  #6e5c56;

  /* signal palette — marigold against maroon, not vermilion-on-black */
  --signal:    #e0a733;
  --signal-lo: rgba(224,167,51,.16);
  --grounded:  #7fb069;
  --abstain:   #e0a733;
  --refuse:    #c1443c;

  --sans: "Source Serif 4", Georgia, "Noto Serif Devanagari",
          "Noto Serif Bengali", "Noto Serif Tamil", "Noto Serif Telugu",
          "Noto Serif Kannada", "Noto Serif Malayalam", "Noto Serif Gujarati",
          "Noto Serif Gurmukhi", "Noto Serif Oriya", "Noto Naskh Arabic", serif;
  --deva: "Noto Serif Devanagari", "Nirmala UI", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --gut: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` rather than `hidden`: overflow-x:hidden on body propagates to the
     viewport and turns it into a scroll container, which breaks anchor jumps
     and scrollIntoView. `clip` contains the overflow without that side effect. */
  overflow-x: clip;
}

/* ── signature motion ───────────────────────────────────────── */
#field {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(8,9,12,.72) 100%),
    radial-gradient(80% 60% at 50% 100%, rgba(8,9,12,.9) 0%, transparent 70%);
}
main, .topbar { position: relative; z-index: 2; }

/* ── top bar ────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px,2.2vh,22px) var(--gut);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(8,9,12,.78), transparent);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-lo), 0 0 18px var(--signal);
  animation: breathe 3.6s var(--ease) infinite;
}
@keyframes breathe { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.82)} }
.brand-name { font-weight: 600; letter-spacing: -.02em; font-size: 15px; }
.brand-name .dim { color: var(--fg-faint); font-weight: 400; }

.status { display: flex; gap: 8px; align-items: center; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--fg-dim); text-decoration: none;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.02);
  transition: .3s var(--ease);
}
.stat-chip.link:hover { color: var(--fg); border-color: var(--line-hot); }
.stat-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-faint);
  transition: .4s var(--ease);
}
.stat-chip.ready .dot { background: var(--grounded); box-shadow: 0 0 10px var(--grounded); }

/* ── stage (act I) ──────────────────────────────────────────── */
.stage {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(88px,12vh,130px) var(--gut) clamp(24px,4vh,44px);
  gap: clamp(18px,3vh,34px);
}
.hero { max-width: 940px; width: 100%; margin: 0 auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: clamp(10px,1.1vw,11.5px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-dim);
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  margin: 0 0 clamp(18px,3vh,30px);
  background: rgba(255,255,255,.02);
}
.pulse {
  width: 5px; height: 5px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
  animation: breathe 2.4s var(--ease) infinite;
}

/* the wordmark — Devanagari as the subject */
.wordmark {
  margin: 0 0 clamp(18px,3vh,28px);
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(14px,2.5vw,28px); flex-wrap: wrap;
  /* Devanagari needs real headroom: matras (ो, ी, े) sit above the shirorekha,
     so a Latin-style tight line-height clips the top of the word. */
  line-height: 1.24;
}
.wordmark .deva {
  font-family: var(--deva);
  font-weight: 700;
  font-size: clamp(76px, 17vw, 210px);
  letter-spacing: -.02em;
  /* the gradient is clipped to the glyph, so it needs the same headroom */
  padding: .06em 0 .1em;
  background: linear-gradient(178deg, #fff 30%, #9aa1ad 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 60px rgba(255,107,53,.16));
}
.wordmark .latin {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(14px,1.7vw,19px);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--fg-faint);
  position: relative; top: -.4em;
}
.cursor {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 4px;
  background: var(--signal); vertical-align: -.14em;
  animation: blink 1.15s steps(2) infinite;
}
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

.lede {
  max-width: 620px; margin: 0 auto clamp(26px,4.5vh,42px);
  font-size: clamp(14.5px,1.55vw,17px);
  color: var(--fg-dim); line-height: 1.68;
}
.lede strong { color: var(--fg); font-weight: 500; }

/* ── answered state ───────────────────────────────────────────
   The hero yields to the answer. Without this the response lands
   below the fold on a laptop and the demo reads as "nothing
   happened". Everything transitions, so the handover is legible
   rather than a jump cut. */
.wordmark, .lede, .eyebrow, .samples {
  transition: font-size .7s var(--ease), opacity .5s var(--ease),
              max-height .7s var(--ease), margin .7s var(--ease),
              transform .7s var(--ease);
}
body.answered .eyebrow { opacity: 0; max-height: 0; margin-bottom: 0; padding-block: 0; border-color: transparent; overflow: hidden; }
body.answered .wordmark .deva { font-size: clamp(40px, 7vw, 78px); }
body.answered .wordmark .latin { font-size: 11px; letter-spacing: .3em; }
body.answered .wordmark { margin-bottom: 14px; }
body.answered .lede { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
body.answered .samples { transform: scale(.94); opacity: .65; margin-top: 14px; }
body.answered .samples:hover { opacity: 1; transform: none; }

/* ── the console ────────────────────────────────────────────── */
.console { max-width: 680px; margin: 0 auto; }
.console-row { display: flex; gap: 14px; align-items: center; }

.mic {
  position: relative; z-index: 10; flex: 0 0 auto;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid rgba(245,237,224,.18);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), var(--bg-lift));
  color: var(--fg); cursor: pointer; pointer-events: auto;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: all .3s var(--ease);
}
.mic:hover:not(:disabled) {
  border-color: var(--signal); color: var(--signal);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(224,167,51,.25);
}
.mic:disabled { opacity: .35; cursor: not-allowed; }
.mic-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.mic-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--signal); opacity: 0; pointer-events: none;
}
.mic.rec { border-color: var(--signal); color: var(--signal); background: var(--signal-lo); }
.mic.rec .mic-ring { animation: sonar 1.5s var(--ease) infinite; }
@keyframes sonar {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.85); }
}

/* ── Centered Voice Recording Modal & Wave Visualizer ── */
.voice-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  z-index: 9999999;
  display: none; pointer-events: none;
  align-items: center; justify-content: center;
  background: rgba(10, 6, 8, 0.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 20px;
}
.voice-modal.active {
  display: flex !important; pointer-events: auto !important;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.voice-card {
  position: relative;
  max-width: 440px; width: 100%;
  background: linear-gradient(180deg, rgba(33,19,26,.94), rgba(18,12,16,.98));
  border: 1px solid rgba(224,167,51,.35);
  border-radius: 28px;
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow: 0 30px 70px -10px rgba(0,0,0,.85), 0 0 40px rgba(224,167,51,.15), inset 0 1px 0 rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center;
  animation: cardPop .4s var(--ease) both;
}
.voice-modal-close {
  position: absolute; top: 16px; right: 18px;
  background: transparent; border: 0;
  color: var(--fg-dim); font-size: 18px; cursor: pointer;
  padding: 6px; border-radius: 8px; transition: .2s;
}
.voice-modal-close:hover {
  color: var(--fg); background: rgba(255,255,255,.08);
}
@keyframes cardPop {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.voice-mic-wrap {
  position: relative;
  width: 96px; height: 96px;
  margin-bottom: 20px;
  display: grid; place-items: center;
}

.voice-mic-btn {
  position: relative; z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid var(--signal);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), var(--signal-lo));
  color: var(--signal);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(224,167,51,.4);
  transition: all .25s var(--ease);
}
.voice-mic-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 45px rgba(224,167,51,.65);
}
.voice-modal-icon {
  width: 36px; height: 36px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.voice-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--signal);
  opacity: 0; pointer-events: none;
}
.voice-ring.r1 { animation: voiceRipple 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite; }
.voice-ring.r2 { animation: voiceRipple 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite 0.6s; }
.voice-ring.r3 { animation: voiceRipple 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite 1.2s; }

@keyframes voiceRipple {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.2); }
}

.voice-status {
  font-family: var(--deva);
  font-size: 20px; font-weight: 600;
  color: var(--fg);
  margin-bottom: 14px;
}

.voice-wave-container {
  width: 100%; max-width: 360px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  margin-bottom: 16px;
  padding: 4px 10px;
}
#voiceWave { width: 100%; height: 100%; }

.voice-subtext {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .06em;
  color: var(--signal); opacity: .9;
  text-transform: uppercase;
}

.field-wrap {
  flex: 1; display: flex; align-items: center;
  border: 1px solid rgba(245,237,224,.14); border-radius: 999px;
  background: rgba(255,255,255,.04);
  padding: 0 8px 0 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all .3s var(--ease);
}
.field-wrap:focus-within {
  border-color: var(--signal);
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 3px rgba(224,167,51,.15);
}
#q {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--fg); font-family: var(--deva); font-size: 16px;
  padding: 16px 0; letter-spacing: .01em;
}
#q::placeholder { color: var(--fg-dim); opacity: .65; }
.go {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  border: 0; background: var(--fg); color: var(--bg); cursor: pointer;
  display: grid; place-items: center; transition: all .3s var(--ease);
}
.go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.go:hover { background: var(--signal); transform: translateX(2px) scale(1.04); }

.hint {
  margin-top: 13px; font-family: var(--mono); font-size: 12px;
  color: var(--fg-dim); min-height: 18px; letter-spacing: .02em;
}
.hint.err { color: var(--refuse); font-weight: 500; }

.samples {
  display: flex; gap: 9px; justify-content: center; flex-wrap: wrap;
  margin-top: clamp(20px,3.2vh,28px);
}
.sample {
  font-family: var(--deva); font-size: 13px;
  color: var(--fg); background: rgba(255,255,255,.05);
  border: 1px solid rgba(245,237,224,.12); border-radius: 999px;
  padding: 8px 17px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: all .25s var(--ease);
}
.sample:hover {
  color: var(--signal);
  background: rgba(255,255,255,.09);
  border-color: rgba(224,167,51,.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.sample.ghost {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--abstain); border: 1px dashed rgba(224,167,51,.35);
  background: rgba(224,167,51,.04);
}
.sample.ghost:hover {
  background: rgba(224,167,51,.1);
  border-color: var(--abstain);
}

/* ── Session Conversation Feed & Cards ────────────────────────── */
.convo-feed {
  max-width: 820px; width: 100%; margin: clamp(20px,3.5vh,32px) auto 0;
  display: flex; flex-direction: column; gap: 20px;
}
.convo-feed[hidden] { display: none !important; }

.convo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 10px; border-bottom: 1px solid var(--line);
}
.convo-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-dim);
}
.convo-clear-btn {
  background: transparent; border: 1px solid var(--line-hot);
  color: var(--fg-dim); font-family: var(--mono); font-size: 10.5px;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  transition: all .2s var(--ease);
}
.convo-clear-btn:hover {
  color: var(--refuse); border-color: var(--refuse);
  background: rgba(255,90,90,.08);
}

.convo-items {
  display: flex; flex-direction: column; gap: 24px;
}

.convo-turn {
  display: flex; flex-direction: column; gap: 12px;
  animation: rise .45s var(--ease) both;
}

.user-query-wrap {
  align-self: flex-end; max-width: 85%;
  background: linear-gradient(135deg, rgba(224,167,51,.15), rgba(224,167,51,.05));
  border: 1px solid rgba(224,167,51,.3);
  border-radius: 18px 18px 4px 18px;
  padding: 11px 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.user-query-text {
  font-family: var(--deva); font-size: 15.5px; color: var(--fg);
  line-height: 1.45;
}

.assistant-card {
  width: 100%;
  background: linear-gradient(180deg, rgba(33,19,26,.88), rgba(18,12,16,.94));
  border: 1px solid rgba(245,237,224,.14);
  border-radius: 20px 20px 20px 6px;
  padding: clamp(18px,2.5vw,26px);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* Prominent Main Answer Text */
.main-answer {
  font-family: var(--deva);
  font-size: clamp(17px, 2vw, 20.5px);
  font-weight: 500;
  line-height: 1.65;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -.005em;
}
.main-answer.muted {
  color: var(--fg-dim); font-size: 16px;
}

/* Small, subtle technical details row */
.meta-details-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 12px; border-top: 1px solid rgba(245,237,224,.08);
  margin-top: 8px;
}
.detail-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 5px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  color: var(--fg-dim);
}
.detail-chip.good {
  color: var(--grounded); border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08);
}
.detail-chip.warn {
  color: var(--abstain); border-color: rgba(224,167,51,.3); background: rgba(224,167,51,.08);
}
.detail-chip.bad {
  color: var(--refuse); border-color: rgba(255,90,90,.3); background: rgba(255,90,90,.08);
}

/* the 200ms budget mini bar */
.budget-mini {
  width: 100%; margin: 10px 0 6px;
}
.budget-mini-bar {
  height: 3px; border-radius: 999px; background: rgba(255,255,255,.08);
  position: relative; overflow: visible;
}
.budget-mini-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--grounded), #7ef0a6);
  transition: width .7s var(--ease);
}
.budget-mini-fill.over {
  background: var(--refuse);
}
.budget-mini-legend {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); margin-top: 4px;
}

.verdicts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.v {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line);
  color: var(--fg-dim);
}
.v.good   { color: var(--grounded); border-color: rgba(74,222,128,.34); background: rgba(74,222,128,.07); }
.v.warn   { color: var(--abstain);  border-color: rgba(245,196,81,.34); background: rgba(245,196,81,.07); }
.v.bad    { color: var(--refuse);   border-color: rgba(255,90,90,.34);  background: rgba(255,90,90,.07); }

.sources details { border-top: 1px solid var(--line); padding-top: 13px; }
.sources summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px;
  color: var(--fg-faint); letter-spacing: .05em; list-style: none;
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary:hover { color: var(--fg-dim); }
.src {
  border-left: 2px solid var(--line-hot); padding: 3px 0 3px 14px;
  margin: 13px 0; font-family: var(--deva); font-size: 13.5px;
  color: var(--fg-dim); line-height: 1.6;
}
.src .meta {
  font-family: var(--mono); font-size: 10px; color: var(--fg-faint);
  margin-top: 5px; letter-spacing: .03em;
}

/* ── telemetry strip ────────────────────────────────────────── */
.telemetry {
  display: flex; gap: clamp(8px,1.4vw,14px); justify-content: center;
  flex-wrap: wrap; max-width: 820px; margin: 0 auto; width: 100%;
}
.tele {
  flex: 1 1 auto; min-width: 96px; text-align: center;
  border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 12px; background: rgba(255,255,255,.02);
  transition: .35s var(--ease);
}
.tele:hover { border-color: var(--line-hot); background: rgba(255,255,255,.04); }
.tele b {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: clamp(19px,2.3vw,26px); color: var(--fg);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tele span {
  display: block; margin-top: 4px; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-faint);
}
.tele.run { cursor: pointer; border-style: dashed; border-color: var(--line-hot); }
.tele.run:hover b { color: var(--signal); }
.tele.run b { font-size: 17px; }
.tele.busy b { animation: blink 1s steps(2) infinite; }

.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-faint);
}
.scroll-cue i { width: 1px; height: 26px; background: linear-gradient(180deg, var(--fg-faint), transparent); }

/* ── act II ─────────────────────────────────────────────────── */
.act { padding: clamp(70px,12vh,140px) var(--gut); max-width: 1080px; margin: 0 auto; }
.act-head { max-width: 640px; margin-bottom: clamp(28px,5vh,48px); }
.act-head.sub { margin-top: clamp(60px,9vh,100px); }
.act-num {
  font-family: var(--mono); font-size: 11px; color: var(--signal);
  letter-spacing: .2em; display: block; margin-bottom: 12px;
}
.act-head h2 {
  font-size: clamp(24px,3.6vw,40px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.16; margin: 0 0 12px;
}
.act-head p { color: var(--fg-dim); font-size: 15px; margin: 0; }
code {
  font-family: var(--mono); font-size: .88em;
  background: rgba(255,255,255,.055); padding: 2px 6px; border-radius: 5px; color: var(--fg-dim);
}

.latency-panel, .compare-panel { overflow-x: auto; }
.grid-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.grid-table th {
  text-align: right; font-weight: 500; color: var(--fg-faint);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 0 14px 12px; border-bottom: 1px solid var(--line);
}
.grid-table th:first-child, .grid-table td:first-child { text-align: left; }
.grid-table td {
  text-align: right; padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  font-variant-numeric: tabular-nums; color: var(--fg-dim);
}
.grid-table td:first-child { color: var(--fg); }
.grid-table tr.total td { color: var(--fg); font-weight: 700; border-bottom: 0; }
.grid-table tr.total td:first-child { color: var(--signal); }
.grid-table tr.served td { background: var(--signal-lo); }
.grid-table .skeleton td { text-align: center; color: var(--fg-faint); padding: 30px; border: 0; }
.tag {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal); border: 1px solid rgba(255,107,53,.4);
  padding: 2px 6px; border-radius: 4px; margin-left: 8px;
}

.ghost-btn {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--fg-dim); background: rgba(255,255,255,.03);
  border: 1px dashed var(--line-hot); border-radius: 10px;
  padding: 13px 20px; cursor: pointer; transition: .3s var(--ease); margin-bottom: 20px;
}
.ghost-btn:hover { color: var(--fg); border-color: var(--signal); }

.findings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-top: clamp(40px, 6vh, 70px);
}
.findings article {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(245,237,224,.12);
  border-radius: 16px;
  padding: clamp(20px, 2.5vw, 26px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all .3s var(--ease);
}
.findings article:hover {
  border-color: rgba(224,167,51,.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.findings h3 {
  font-size: 16.5px;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -.015em;
  color: var(--fg);
  line-height: 1.35;
}
.findings p {
  font-size: 14px;
  color: var(--fg-dim);
  margin: 0 0 16px;
  line-height: 1.62;
  flex: 1 1 auto;
}
.findings em {
  color: var(--fg);
  font-style: normal;
  font-weight: 500;
}
.findings strong {
  color: var(--signal);
  font-weight: 600;
}
.findings code {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  padding: 10px 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  color: var(--signal);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

@media (max-width: 768px) {
  .findings {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── footer ─────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding: clamp(30px,5vh,50px) var(--gut);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto;
}
.foot .deva.small { font-family: var(--deva); font-size: 26px; font-weight: 700; color: var(--fg); }
.foot p { color: var(--fg-faint); font-size: 12.5px; margin: 6px 0 0; max-width: 420px; }
.foot a { color: var(--fg-dim); }
.foot-meta { display: flex; flex-direction: column; gap: 5px; text-align: right; }
.foot-meta span { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); letter-spacing: .04em; }

/* ── entrance ───────────────────────────────────────────────── */
.anim {
  opacity: 0; transform: translateY(20px);
  animation: reveal .9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .wordmark { gap: 8px; }
  .wordmark .latin { top: 0; letter-spacing: .22em; }
  .console-row { flex-wrap: nowrap; gap: 10px; align-items: center; }
  .mic { width: 48px; height: 48px; flex: 0 0 48px; }
  .mic-icon { width: 19px; height: 19px; }
  .field-wrap { padding: 0 6px 0 16px; min-width: 0; }
  #q { font-size: 14.5px; padding: 13px 0; }
  .go { width: 38px; height: 38px; }
  .go svg { width: 15px; height: 15px; }
  .samples { gap: 6px; }
  .sample { font-size: 12px; padding: 6px 13px; }
  .answer-shell { padding: 18px 16px; border-radius: 18px; margin-top: 18px; }
  .answer { font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
  .unsourced { padding: 12px 14px; border-radius: 10px; margin: 10px 0 14px; }
  .unsourced p { font-size: 15px; }
  .telemetry { gap: 6px; }
  .tele { min-width: calc(50% - 3px); flex: 0 0 calc(50% - 3px); padding: 10px 8px; }
  .tele b { font-size: 18px; }
  .tele.run { flex: 1 1 100%; }
  .foot { flex-direction: column; gap: 18px; padding-block: 30px; }
  .foot-meta { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; animation: none; }
  .cursor, .pulse, .brand-mark, .mic-ring, .tier em { animation: none !important; }
  html { scroll-behavior: auto; }
  #field { display: none; }
}

/* ── unsourced answer ─────────────────────────────────────────
   Shown only when the corpus could not support an answer. It is
   deliberately styled as a *different kind of thing*: amber rule,
   warning label, no citations and no support score. */
.unsourced {
  margin: 14px 0 18px;
  padding: 16px 20px;
  border: 1px solid rgba(224,167,51,.25);
  border-left: 4px solid var(--abstain);
  background: linear-gradient(90deg, rgba(224,167,51,.08), rgba(224,167,51,.02));
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.unsourced .tag-un {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--abstain); margin-bottom: 8px;
}
.unsourced p {
  margin: 0; font-family: var(--deva); font-size: 16.5px;
  font-weight: 500; line-height: 1.6; color: var(--fg);
}
.unsourced .caveat {
  margin-top: 8px; font-family: var(--mono); font-size: 11px;
  color: var(--fg-dim); opacity: .75; letter-spacing: .02em;
}