:root { color-scheme: dark; --bg:#07101c; --panel:#0e1b2c; --panel-2:#13243a; --text:#f7f9fc; --muted:#aebbd0; --accent:#4d92ff; --accent-soft:#183d70; --line:#2a3c55; --success:#7dd3ae; --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -20%,#163257 0,transparent 42%),var(--bg); color:var(--text); font:16px/1.55 var(--sans); letter-spacing:-.008em; -webkit-font-smoothing:antialiased; }
.preview-header { display:flex; justify-content:space-between; align-items:center; padding:1.15rem max(1rem,calc((100vw - 800px)/2)); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); backdrop-filter:blur(12px); }
.brand { color:var(--text); text-decoration:none; font-family:var(--serif); font-weight:400; letter-spacing:.02em; }
.private-badge,.step-meta,.help,.field-help { color:var(--muted); }
.private-badge { padding:.35rem .65rem; border:1px solid var(--line); border-radius:99px; font-size:.75rem; letter-spacing:.03em; }
.shell { width:min(760px,calc(100% - 2rem)); margin:clamp(1.5rem,5vw,3.5rem) auto; }
.eyebrow,.section-meta { color:var(--accent); font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.section-meta { margin:0 .1rem .7rem; }
.progress { height:6px; overflow:hidden; background:#1b2b41; border-radius:99px; box-shadow:inset 0 1px 2px #020812; }
.progress div { width:0; height:100%; background:var(--accent); transition:width .2s ease; }
.section-meta { font-size:.7rem; }
.progress-footer { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; margin:.9rem .1rem 0; }
.step-meta { margin:0; color:var(--muted); font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; }
.card { min-height:390px; padding:clamp(1.25rem,4vw,2.5rem); border:1px solid color-mix(in srgb,var(--line) 78%,transparent); border-radius:22px; background:linear-gradient(160deg,color-mix(in srgb,var(--panel-2) 78%,transparent),var(--panel)); box-shadow:0 24px 70px rgba(0,0,0,.22); }
.card h1 { max-width:680px; margin:.4rem 0 1rem; font-family:var(--serif); font-size:clamp(1.65rem,4.5vw,2.45rem); font-weight:400; letter-spacing:-.018em; line-height:1.18; text-wrap:balance; }
.question-block { padding-bottom:1.35rem; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); }
.question-block .help { max-width:640px; margin:.15rem 0 0; }
.answer-area { padding-top:.35rem; }
.help { max-width:640px; margin:-.25rem 0 1.1rem; }
.field { margin:1.2rem 0; }
.field + .conditional-followup,.field + .factual-followup { margin-top:1.35rem; }
.conditional-followup,.factual-followup { padding:1rem 1rem .2rem; border-left:3px solid color-mix(in srgb,var(--accent) 65%,transparent); border-radius:0 12px 12px 0; background:color-mix(in srgb,var(--panel-2) 32%,transparent); }
.field-group-heading { margin:1.4rem 0 .55rem; padding-top:.85rem; border-top:1px solid color-mix(in srgb,var(--line) 62%,transparent); color:var(--accent); font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.field > label,.field legend { display:block; margin-bottom:.4rem; font-weight:600; }
.field input[type="text"],.field input[type="number"],.field textarea,.field select { width:100%; min-height:52px; padding:.85rem 1rem; color:var(--text); border:1px solid var(--line); border-radius:12px; background:#091525; font:inherit; }
.field textarea { min-height:118px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent); outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent); }
.select-shell { position:relative; }
.field select { appearance:none; -webkit-appearance:none; padding-right:3.25rem; cursor:pointer; white-space:normal; }
.select-arrow { position:absolute; top:50%; right:1.15rem; width:.65rem; height:.65rem; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:.6rem; }
.options-inline { grid-template-columns:repeat(3,minmax(0,1fr)); }
.option { position:relative; display:flex; gap:.65rem; align-items:center; min-height:48px; width:100%; max-width:100%; padding:.72rem .9rem; border:1px solid color-mix(in srgb,var(--line) 72%,transparent); border-radius:12px; background:color-mix(in srgb,var(--panel-2) 42%,transparent); cursor:pointer; transition:border-color .12s ease,background .12s ease,color .12s ease; }
.option:hover { border-color:#496786; background:color-mix(in srgb,var(--panel-2) 68%,transparent); }
.option input { position:absolute; width:1px; height:1px; opacity:0; }
.option:focus-within { border-color:var(--accent); outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:#fff; box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.option-marker { display:grid; place-items:center; flex:0 0 20px; height:20px; border:1px solid #4b607c; border-radius:6px; color:transparent; font-size:.7rem; font-weight:800; }
.option:has(input:checked) .option-marker { border-color:var(--accent); background:var(--accent); color:white; }
.option-copy { line-height:1.35; }
.options.compact { display:flex; }
.provenance { margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:13px; background:#0a1728; }
.provenance legend { padding:0 .35rem; font-size:.86rem; color:var(--muted); }
.provenance-compact { margin-top:.8rem; }
.provenance-compact > label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem 1rem; margin-bottom:.4rem; color:var(--muted); font-size:.9rem; font-weight:600; }
.provenance-compact > label span { font-weight:400; }
.field > label.state { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; margin:.45rem .5rem 0 0; padding:.3rem .5rem; color:var(--muted); border-radius:9px; cursor:pointer; font-weight:500; }
.state:hover { color:var(--text); background:color-mix(in srgb,var(--panel-2) 38%,transparent); }
.state:has(input:checked) { color:var(--text); background:color-mix(in srgb,var(--accent-soft) 55%,transparent); }
.state:focus-within { outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent); }
.field select:disabled { opacity:.62; cursor:not-allowed; }
.input-shell { position:relative; }
.number-pair { display:grid; grid-template-columns:minmax(0,120px) auto minmax(0,120px); align-items:center; gap:.75rem; }
.number-pair.shared-denominator { grid-template-columns:minmax(0,120px) auto minmax(180px,1fr); align-items:center; }
.pair-part label { display:block; margin:0 0 .35rem; color:var(--muted); font-size:.82rem; font-weight:600; }
.pair-separator { color:var(--text); font-size:1rem; font-weight:650; }
.pair-cohort { margin:0; color:var(--muted); font-size:.9rem; }
.pair-cohort strong { color:var(--text); font-size:1rem; }
.pair-caption { margin:.4rem 0 0; color:var(--muted); font-size:.8rem; }
.scale-anchors { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin-top:.65rem; color:var(--muted); font-size:.78rem; }
.scale-anchors span { display:flex; flex-direction:column; }
.scale-anchors span:nth-child(2) { text-align:center; }
.scale-anchors span:last-child { text-align:right; }
.scale-anchors strong { color:var(--text); font-size:.88rem; }
.required-mark { color:var(--accent); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.input-prefix,.input-suffix { position:absolute; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:700; pointer-events:none; }
.input-prefix { left:1rem; }.input-suffix { right:1rem; }
.input-shell:has(.input-prefix) input { padding-left:2.15rem; }.input-shell:has(.input-suffix) input { padding-right:5.5rem; }
.actions { display:flex; justify-content:space-between; gap:1rem; margin-top:1rem; }
.button { min-height:48px; padding:.8rem 1.3rem; border:0; border-radius:11px; background:var(--accent); color:white; font-family:var(--sans); font-size:.92rem; font-weight:600; cursor:pointer; }
.button.secondary { background:transparent; border:1px solid var(--line); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.error { color:#ffb4b4; font-size:.82rem; }
.result { margin-top:1.5rem; }
.result pre { overflow:auto; padding:1rem; border:1px solid var(--line); background:#050c16; }
@media (max-width:600px) { .shell{width:min(100% - 1rem,760px);margin-top:1rem}.card{min-height:400px;padding:1.15rem;border-radius:17px}.card h1{font-size:clamp(1.55rem,7vw,2rem)}.question-block{padding-bottom:1.05rem}.actions .button{flex:1}.preview-header{gap:1rem;padding:.9rem 1rem}.private-badge{text-align:right}.section-meta{max-width:100%}.option{min-height:48px;padding:.7rem .78rem}.progress-footer{gap:.75rem}.number-pair,.number-pair.shared-denominator{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.pair-cohort{margin:0}.field-group-heading{margin-top:1.15rem}.conditional-followup,.factual-followup{padding:.85rem .8rem .1rem}.provenance-compact>label{display:block}.scale-anchors{gap:.35rem;font-size:.7rem} }