:root { --paper:#edf2f5; --surface:#f9fbfc; --ink:#172332; --muted:#5a6a77; --rule:#aebbc5; --blue:#254ec9; --blue-soft:#dce5ff; --red:#d2403d; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; --body:"Trebuchet MS","Segoe UI",sans-serif; --display:"Arial Narrow","Franklin Gothic Medium",Impact,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--paper); }
body { color:var(--ink); font-family:var(--body); }
button,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin-top:0; }
.instrument { width:min(1220px,calc(100% - 64px)); margin:auto; padding:clamp(58px,10vh,112px) 0 90px; }
.question-stage { display:flex; max-width:1080px; margin:auto; align-items:center; flex-direction:column; text-align:center; }
.eyebrow { margin:0 0 14px; color:var(--blue); font:700 11px/1.3 var(--mono); letter-spacing:.08em; }
.question-stage > .eyebrow { margin-bottom:20px; font-size:clamp(15px,1.6vw,20px); letter-spacing:.055em; }
h1 { display:flex; flex-direction:column; width:fit-content; margin:0 auto 26px; font:900 clamp(76px,12vw,162px)/.8 var(--display); letter-spacing:-.072em; text-transform:uppercase; }
h1 span { display:block; white-space:nowrap; }
h1 span + span { color:var(--blue); }
h1 s { position:relative; color:var(--ink); text-decoration:none; }
h1 s::after { position:absolute; top:51%; left:-.07em; width:109%; height:.085em; background:var(--red); content:""; transform:rotate(-8deg); }
.intro { max-width:730px; margin:0 auto 30px; font:20px/1.45 Georgia,serif; }
.ask-form { width:100%; max-width:780px; border:2px solid var(--ink); background:var(--surface); box-shadow:9px 9px 0 var(--blue-soft); text-align:left; }
.ask-form:focus-within { box-shadow:9px 9px 0 var(--blue); }
textarea { display:block; width:100%; min-height:108px; resize:vertical; border:0; border-bottom:1px solid var(--rule); padding:19px 21px; color:var(--ink); background:transparent; font-size:19px; line-height:1.4; }
textarea:focus { outline:0; }
textarea::placeholder { color:#81909c; }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px 10px 20px; }
.character-limit,.constraint-note { color:var(--muted); font:11px/1.5 var(--mono); }
.primary-button { border:0; padding:12px 18px; color:#fff; background:var(--blue); font-size:14px; font-weight:700; }
.primary-button:hover { background:#173aab; }
.primary-button:disabled { opacity:.5; cursor:default; }
.primary-button span { margin-left:9px; }
.constraint-note { margin:19px 0 0; }
.experiment-toggle { margin:5px 0 0; border:0; padding:2px 4px; color:var(--muted); background:transparent; font:10px/1.5 var(--mono); }
.experiment-toggle::before { margin-right:6px; color:var(--muted); content:"○"; }
.experiment-toggle[aria-pressed="true"]::before { color:var(--blue); content:"●"; }
.experiment-toggle:hover { color:var(--ink); }
.vignettes { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:8px 18px; max-width:1080px; margin:42px auto 0; }
.vignettes-label { color:var(--muted); font:700 10px/1.5 var(--mono); letter-spacing:.08em; }
.vignette-links { display:flex; align-items:center; flex-wrap:wrap; gap:0 12px; color:var(--rule); font:12px/1.6 var(--mono); }
.vignette-links a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.vignette-links a:hover { color:var(--ink); }
.console { margin-top:clamp(72px,12vh,140px); border-top:3px solid var(--ink); }
.console-topline { padding:28px 0; }
.console-topline h2 { max-width:940px; margin:0; font:700 clamp(30px,4vw,50px)/1.05 Georgia,serif; letter-spacing:-.05em; }
.console-topline h2 em { color:var(--red); font-weight:inherit; }
.console-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,290px); gap:34px; border-top:1px solid var(--rule); }
.answer-panel { min-width:0; padding:23px 0 0; }
.answer-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font:700 11px/1.3 var(--mono); letter-spacing:.04em; }
.answer-meta #status-label { color:var(--blue); }
.inspect-hint { margin:33px 0 0; color:var(--muted); font:11px/1.4 var(--mono); }
.answer-text { display:block; min-height:200px; padding:18px 0 36px; white-space:pre-wrap; overflow-wrap:anywhere; font:600 clamp(44px,6.5vw,86px)/1.16 var(--body); letter-spacing:-.055em; }
.empty-answer { color:#8f9ca6; font:400 22px/1.35 Georgia,serif; letter-spacing:0; }
.guard-message { display:block; color:var(--red); font-size:.82em; line-height:1; }
.guard-detail { display:block; max-width:720px; margin-top:15px; color:var(--ink); font:700 clamp(15px,2vw,21px)/1.35 var(--mono); letter-spacing:.015em; }
.answer-attempt { display:block; min-height:1.16em; }
.answer-character { display:inline-block; min-width:.3em; min-height:1em; border:0; border-bottom:.045em solid transparent; border-radius:0; padding:0 .005em; color:inherit; background:transparent; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:center; vertical-align:baseline; cursor:help; }
.answer-character:hover,.answer-character:focus-visible { color:var(--blue); border-bottom-color:var(--blue); background:var(--blue-soft); outline:none; }
.answer-character.is-space { min-width:.38em; }
.attempt-aborted { margin-bottom:.35em; color:#7d8b97; font-size:.57em; line-height:1.25; }
.attempt-aborted s { text-decoration-color:var(--red); text-decoration-thickness:.055em; }
.attempt-aborted .answer-character { text-decoration-line:line-through; text-decoration-color:var(--red); text-decoration-thickness:.055em; }
.attempt-label { display:block; margin:0 0 .6em; color:var(--red); font:800 10px/1 var(--mono); letter-spacing:.1em; }
.caret { display:inline-block; width:3px; height:.82em; margin-left:4px; vertical-align:-.06em; background:var(--red); animation:blink 1s steps(1,end) infinite; }
.character-track { height:12px; border-top:1px solid var(--rule); }
.character-track progress { display:block; width:100%; height:5px; appearance:none; border:0; background:transparent; }
.character-track progress::-webkit-progress-bar { background:transparent; }
.character-track progress::-webkit-progress-value { background:var(--blue); }
.character-track progress::-moz-progress-bar { background:var(--blue); }
.telemetry { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:8px 0 0; border-top:1px solid var(--rule); }
.telemetry div { min-width:0; padding:15px 8px 10px 0; }
.telemetry dt { margin-bottom:7px; color:var(--muted); font:10px/1.3 var(--mono); }
.telemetry dd { margin:0; overflow:hidden; font:700 14px/1.2 var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.answer-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.quiet-button { border:1px solid var(--ink); padding:9px 12px; color:var(--ink); background:transparent; font-size:12px; font-weight:700; }
.quiet-button:hover { color:#fff; background:var(--ink); }
.quiet-button:disabled { opacity:.35; cursor:default; }
.decision-rail { border-left:1px solid var(--rule); padding:23px 0 28px 26px; }
.decision-rail h2 { margin:0; font:700 22px/1.2 Georgia,serif; letter-spacing:-.03em; }
.dots { color:var(--red); }
.decision-detail { min-height:47px; margin:22px 0 12px; color:var(--muted); font:12px/1.45 var(--mono); }
.probability-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.probability-row { display:grid; grid-template-columns:52px 50px 1fr; align-items:center; gap:8px; font:12px/1.2 var(--mono); }
.probability-label { overflow:hidden; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.probability-value { color:var(--muted); text-align:right; }
.probability-bar { width:100%; height:6px; appearance:none; border:0; background:var(--blue-soft); }
.probability-bar::-webkit-progress-bar { background:var(--blue-soft); }
.probability-bar::-webkit-progress-value { background:var(--blue); }
.probability-bar::-moz-progress-bar { background:var(--blue); }
.probability-empty { padding:12px 0; color:var(--muted); font:12px/1.45 var(--mono); }
.selected-character { display:flex; align-items:baseline; justify-content:space-between; margin-top:25px; border-top:1px solid var(--rule); padding-top:13px; font:700 10px/1.3 var(--mono); letter-spacing:.08em; }
.selected-character strong { color:var(--red); font-size:25px; letter-spacing:0; }
.model-name { margin:30px 0 0; color:var(--muted); font:10px/1.35 var(--mono); overflow-wrap:anywhere; }
.completion { margin-top:30px; border-left:3px solid var(--blue); padding:15px 20px; background:var(--surface); }
.completion.is-error { border-left-width:7px; border-left-color:var(--red); padding:20px 24px; }
.completion.is-error h3 { color:var(--red); font-size:13px; }
.completion h3 { margin:0 0 10px; color:var(--blue); font:800 11px/1.3 var(--mono); letter-spacing:.08em; }
.completion p { margin:0 0 9px; font:14px/1.5 var(--body); }
.completion p:last-child { margin-bottom:0; }
.completion blockquote { margin:12px 0 0; border-left:2px solid var(--red); padding-left:12px; color:var(--muted); font:14px/1.45 Georgia,serif; white-space:pre-line; }
.takeaway { display:grid; grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr); gap:clamp(34px,7vw,100px); margin-top:clamp(72px,11vh,132px); border-top:3px solid var(--ink); padding:clamp(30px,5vw,58px) 0 8px; }
.takeaway-mark { margin:0; color:var(--red); font:900 clamp(90px,13vw,174px)/.72 var(--display); letter-spacing:-.075em; }
.takeaway-copy { max-width:650px; }
.takeaway-copy h2 { margin:0 0 27px; font:700 clamp(29px,4.2vw,54px)/1.03 Georgia,serif; letter-spacing:-.05em; }
.takeaway-copy p { max-width:590px; margin:0 0 18px; font:17px/1.55 var(--body); }
.takeaway-copy p:last-child { margin-bottom:0; font-family:var(--mono); font-size:13px; }
.takeaway-copy a { color:var(--blue); font-weight:700; text-underline-offset:3px; }
.character-trace { position:fixed; z-index:10; width:min(310px,calc(100vw - 24px)); border:1px solid var(--ink); padding:13px 15px 14px; color:var(--ink); background:var(--surface); box-shadow:5px 5px 0 var(--blue-soft); pointer-events:none; font:11px/1.4 var(--mono); }
.trace-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid var(--rule); padding-bottom:8px; font-weight:700; }
.trace-heading strong { color:var(--blue); font-size:17px; }
.trace-selected { margin:11px 0; }
.trace-options { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.trace-options li { display:flex; justify-content:space-between; gap:12px; }
.trace-options li.is-chosen { color:var(--blue); font-weight:700; }
.trace-meta { margin:11px 0 0; border-top:1px solid var(--rule); padding-top:8px; color:var(--muted); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes blink { 50% { opacity:0; } }
@media (max-width:760px) {
  .instrument { width:min(100% - 32px,1220px); padding-top:48px; }
  h1 { font-size:clamp(57px,13.8vw,104px); line-height:1.08; }
  .intro { font-size:17px; }
  .console-grid { grid-template-columns:1fr; gap:0; }
  .answer-text { min-height:170px; font-size:clamp(44px,10vw,70px); }
  .telemetry { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .decision-rail { margin-top:25px; border-top:1px solid var(--rule); border-left:0; padding:23px 0; }
  .takeaway { grid-template-columns:1fr; gap:30px; }
  .takeaway-mark { font-size:clamp(86px,27vw,140px); }
}
@media (max-width:390px) { h1 { font-size:13.3vw; } .telemetry { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }