/* Tokens follow Diego's Cinema portfolio: neutral near-black, warm white text,
   cool gray accent, DM Sans with Instrument Serif. Ask Diego reads like a printed
   page: one narrow column, footnotes in the margin, answers on a light sheet.
   Color appears only as small status signals. */
@font-face { font-family: "DM Sans"; font-weight: 300; font-display: swap; src: url(/fonts/dm-sans-300.ttf) format("truetype"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(/fonts/dm-sans-400.ttf) format("truetype"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(/fonts/dm-sans-500.ttf) format("truetype"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif.ttf) format("truetype"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic.ttf) format("truetype"); }

:root {
  color-scheme: dark;
  --bg: #08090b;
  --text: #e6e4df;
  --muted: #a6a6ac;
  --soft: #d1d3d9;
  --line: rgba(255, 255, 255, 0.13);
  --accent: #c5c7ce;
  /* Functional signals only: ready status. */
  --signal: #8bcdd2;
  /* The answer section: a slightly lifted dark band. */
  --paper: #0d0e11;
  --ink: #e6e4df;
  --ink-muted: #a6a6ac;
  --ink-line: rgba(255, 255, 255, 0.13);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --column: 620px;
  --margin: 240px;
  --gap: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 300 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
body { position: relative; }
.grain {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.55' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* The sheet is the page frame: a reading column plus a margin, centered as a pair. */
.sheet {
  display: grid;
  grid-template-columns: minmax(0, var(--column)) var(--margin);
  gap: var(--gap);
  justify-content: center;
  padding-inline: 24px;
}
.column { grid-column: 1; min-width: 0; }

.eyebrow { display: block; margin: 0; color: var(--muted); font: 400 11px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }

.topline { align-items: baseline; padding-block: 30px; }
.identity { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.3; }
.identity span { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: 0.04em; }
.folio { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; }

/* Opening: a giant outlined question mark, cropped by the right edge, lit like a title card. */
html, body { overflow-x: clip; }
.opening { position: relative; padding-block: 96px 88px; }
.opening > .column { position: relative; z-index: 1; }
.glyph {
  position: absolute;
  top: -120px;
  right: max(-40px, calc((100vw - 1100px) / 2 - 160px));
  z-index: 0;
  color: transparent;
  font: italic 400 min(800px, 62vw)/1 var(--serif);
  -webkit-text-stroke: 1px rgba(197, 199, 206, 0.32);
  text-shadow: 0 0 80px rgba(197, 199, 206, 0.08);
  pointer-events: none;
  user-select: none;
  animation: glyph-in 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.opening::after {
  content: "";
  position: absolute;
  top: -30%;
  right: 4%;
  width: 46vw;
  height: 110%;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(197, 199, 206, 0.07), transparent);
  pointer-events: none;
}
@keyframes glyph-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
h1 { margin: 26px 0 0; font: 400 clamp(76px, 10vw, 128px)/0.92 var(--serif); letter-spacing: -0.035em; }
h1 em { font-style: italic; color: var(--accent); }
.intro { margin: 32px 0 0; color: var(--muted); font-size: 18px; line-height: 1.8; }

.ask { display: flex; align-items: baseline; gap: 18px; margin-top: 64px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); transition: border-color 0.3s; }
.ask:focus-within { border-color: var(--text); }
.ask-label { color: var(--muted); font: italic 400 34px/1 var(--serif); }
.ask input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: 400 clamp(28px, 3.4vw, 38px)/1.2 var(--serif); }
.ask input::placeholder { color: #5c5d63; font-style: italic; }
.ask input:focus { outline: none; }
.ask button { padding: 0; border: 0; border-bottom: 1px solid #ffffff44; background: none; color: var(--text); font-size: 13px; letter-spacing: 0.04em; }
.ask button:hover { border-color: var(--accent); color: #fff; }
.ask button:disabled { opacity: 0.4; cursor: progress; }

.mode-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.modes { display: inline-flex; gap: 18px; }
.mode { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); font-size: 14px; }
.mode::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.mode:hover:not(:disabled) { color: var(--text); }
.mode[aria-checked="true"] { color: var(--text); border-color: var(--accent); }
.mode[aria-checked="true"]::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 8px #8bcdd266; }
.mode:disabled { color: #5c5d63; cursor: not-allowed; }
.mode:disabled::before { border-style: dashed; }
.mode-detail { margin: 0; color: #7d7e85; font-size: 13px; }
.notice { margin: 16px 0 0; color: var(--soft); font-size: 13px; }
.notice::before { content: "Note. "; color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 15px; }

.progress { margin-top: 18px; }
.progress-bar { height: 1px; background: var(--line); overflow: hidden; }
.progress-bar span { display: block; width: 0; height: 100%; background: var(--soft); transition: width 0.3s; }
.progress p { margin: 8px 0 0; color: var(--muted); font: 11px var(--mono); }

/* The answer sheet: a lifted dark band framed by hairlines. */
.paper { background: var(--paper); color: var(--ink); border-block: 1px solid var(--line); }
.paper .eyebrow { color: var(--ink-muted); }
.reading { position: relative; padding-block: 84px 96px; }
.reading > .column, .reading > .margin { position: relative; z-index: 1; }

/* Leader lines from each footnote marker to its margin note, drawn when an answer arrives. */
.leaders { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leaders path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; transition: stroke 0.2s; }
.leaders.animate path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.1s 0.3s cubic-bezier(0.3, 0.6, 0.2, 1) forwards; }
.leaders path.is-active { stroke: var(--ink); stroke-width: 1.25; }
.leaders circle { fill: var(--ink-muted); }
.leaders.animate circle { opacity: 0; animation: dot-in 0.3s 1.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot-in { to { opacity: 1; } }
.answer { animation: rise 0.7s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.q, .a { position: relative; margin: 0; }
.mark { position: absolute; right: calc(100% + 18px); color: var(--ink-muted); font: italic 400 26px/1.5 var(--serif); }
.q { margin-top: 28px; font: italic 400 clamp(30px, 3.4vw, 40px)/1.2 var(--serif); color: var(--soft); }
.q .mark { line-height: 1.25; }
.a { margin-top: 36px; }
.answer { font: 400 clamp(25px, 2.5vw, 30px)/1.5 var(--serif); letter-spacing: -0.003em; }
.answer.error { font: 300 16px/1.7 var(--sans); color: #e0a99c; }
.answer.streaming::after { content: ""; display: inline-block; width: 1px; height: 0.9em; margin-left: 4px; background: var(--ink); vertical-align: -0.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cite {
  margin-left: 1px;
  padding: 0 2px;
  border-radius: 2px;
  color: var(--ink-muted);
  font: 500 0.48em/1 var(--sans);
  text-decoration: none;
  vertical-align: super;
  transition: background 0.2s, color 0.2s;
}
.cite:hover, .cite.is-active { background: var(--ink); color: var(--paper); }
.engine { display: flex; align-items: center; gap: 8px; margin: 34px 0 0; color: var(--ink-muted); font: 11px/1.6 var(--mono); }
.engine::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6d6e75; }
.engine[data-engine="workers-ai"]::before, .engine[data-engine="webllm"]::before { background: var(--signal); }

/* Margin notes. On wide screens main.ts sets each note's top to sit beside its first marker. */
.margin { grid-column: 2; position: relative; padding-top: 2px; }
.sources { position: relative; list-style: none; margin: 18px 0 0; padding: 0; }
.sources li {
  padding: 12px 0 14px;
  border-top: 1px solid var(--ink-line);
  font-size: 13px;
  line-height: 1.6;
  scroll-margin-top: 30px;
  transition: opacity 0.25s;
}
.margin.placed .sources li { position: absolute; left: 0; right: 0; }
.sources.has-active li:not(.is-active) { opacity: 0.35; }
.source-n { color: var(--ink); font: 500 10px var(--sans); vertical-align: super; margin-right: 4px; }
.source-title { color: var(--ink); font: 400 19px/1.25 var(--serif); }
.source-title span { display: block; color: var(--ink-muted); font-style: italic; font-size: 15px; }
.source-snippet { margin: 6px 0 6px; color: var(--ink-muted); }
.source-path { display: inline-block; color: var(--muted); font: 10px/1.6 var(--mono); text-decoration: none; border-bottom: 1px solid var(--ink-line); overflow-wrap: anywhere; transition: color 0.2s, border-color 0.2s; }
.source-path:hover, .source-path:focus-visible { color: var(--ink); border-color: var(--accent); }

/* Contents: suggested questions set like a table of contents. */
.contents { padding-block: 80px 96px; }
.prompts { list-style: none; margin: 22px 0 0; padding: 0; }
.prompt {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
}
.prompt .num { color: var(--muted); font: italic 400 17px var(--serif); }
.prompt .text { font: 400 27px/1.25 var(--serif); color: var(--soft); transition: color 0.2s, letter-spacing 0.3s; }
.prompt:hover .text { color: #fff; }
.prompt:hover .num { color: var(--accent); }

footer { align-items: baseline; padding-block: 28px 56px; border-top: 1px solid var(--line); color: #7d7e85; font-size: 11px; }
footer span:last-child { color: #5c5d63; letter-spacing: 0.06em; }
footer code { font: 11px var(--mono); color: var(--muted); }

/* Narrower screens: one column, notes become footnotes under the answer. */
@media (max-width: 1000px) {
  .sheet { grid-template-columns: minmax(0, var(--column)); gap: 0; padding-inline: 28px; }
  .margin, .column { grid-column: 1; }
  .margin { margin-top: 48px; }
  .folio { display: none; }
  .mark { position: static; display: block; margin-bottom: 6px; font-size: 20px; }
  .leaders { display: none; }
  .glyph { top: -150px; right: -130px; font-size: 540px; -webkit-text-stroke-color: rgba(197, 199, 206, 0.14); }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .sheet { padding-inline: 22px; }
  .topline { padding-block: 22px; }
  .opening { padding-block: 64px 56px; }
  h1 { font-size: clamp(66px, 20vw, 92px); }
  .intro { font-size: 16px; }
  .ask { margin-top: 44px; gap: 12px; }
  .ask-label { font-size: 26px; }
  .ask input { font-size: 26px; }
  .reading { padding-block: 56px 64px; }
  .answer { font-size: 24px; }
  .prompt { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; }
  .prompt .text { font-size: 22px; }
  .contents { padding-block: 56px 64px; }
  footer { display: flex; flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}