:root { --bg:#0e1419; --surface:#172027; --text:#f5ede2; --muted:#b9bdbe; --line:#647079; --copper:#e59371; --pad-side:clamp(22px,5vw,88px); --font:"Geist",sans-serif; --display:"Instrument Serif",Georgia,serif; --mono:"Geist Mono",monospace; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:18px/1.65 var(--font); }
a { color:inherit; text-underline-offset:5px; }
button,input,textarea { font:inherit; }
button,a,input,textarea,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--copper); outline-offset:5px; }
.topbar,main,footer { padding-inline:var(--pad-side); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:22px; padding-block:25px; font-size:14px; }
.wordmark { font-size:22px; font-weight:700; text-decoration:none; letter-spacing:-1px; }
.wordmark span { color:var(--copper); font-size:12px; letter-spacing:2px; padding-left:7px; }
main { padding-block:44px 80px; }
.eyebrow { color:var(--copper); font:12px/1.5 var(--mono); letter-spacing:1.2px; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--display); font-weight:400; line-height:1.1; text-wrap:balance; }
h1 { font-size:clamp(44px,6vw,86px); margin:18px 0 24px; }
h1 em { color:var(--copper); }
h2 { font-size:clamp(32px,3vw,46px); margin:0 0 22px; }
h3 { font-size:32px; margin:0 0 8px; }
p { margin:0 0 20px; text-wrap:pretty; }
.lead { font-size:clamp(21px,2vw,28px); max-width:48em; }
.muted,.assumption,.caption { color:var(--muted); }
.assumption,.caption { font-size:15px; }
.intro { margin-bottom:46px; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:56px; margin:38px 0; }
.brand { padding:0; }
.brand-label { display:block; color:var(--copper); font:13px var(--mono); margin-bottom:12px; }
dl { margin:26px 0 0; }
.stat { margin-bottom:20px; }
dt { font-size:14px; color:var(--muted); }
dd { margin:4px 0 0; font-size:22px; line-height:1.4; overflow-wrap:anywhere; }
fieldset { padding:0; margin:28px 0; border:0; }
legend,.field-label { display:block; font-weight:600; margin-bottom:14px; }
.picks,.actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.pick { display:flex; align-items:center; gap:12px; padding:15px 20px; border:1px solid var(--line); border-radius:3px; cursor:pointer; }
.pick:has(input:checked) { border-color:var(--copper); background:var(--surface); }
input[type=radio] { accent-color:var(--copper); width:20px; height:20px; margin:0; flex-shrink:0; }
textarea { display:block; width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:3px; padding:16px; resize:vertical; }
.reason-field { max-width:52em; margin:28px 0; }
button,.button { display:inline-block; padding:13px 21px; border:1px solid var(--line); border-radius:3px; color:var(--text); background:transparent; text-decoration:none; cursor:pointer; line-height:1.4; }
button:hover,.button:hover { border-color:var(--copper); }
button.primary { background:var(--copper); color:var(--bg); border-color:var(--copper); font-weight:600; }
button:disabled { opacity:.55; cursor:default; }
.notice { color:var(--copper); padding:12px 0; }
.notice:empty { display:none; }
.result,.share { margin-top:64px; }
.result p { max-width:54em; }
.record { font:13px/1.6 var(--mono); color:var(--muted); }
.response-note { white-space:pre-wrap; overflow-wrap:anywhere; }
.friend { margin:34px 0; padding-left:22px; border-left:2px solid var(--copper); }
details { margin:26px 0; }
summary { cursor:pointer; color:var(--copper); }
details>div { padding-top:20px; }
.share { max-width:58em; }
.share h2 { margin-bottom:18px; }
.share .actions { margin-block:20px; }
.share-output { margin-top:26px; }
.share-output textarea { font:13px/1.6 var(--mono); overflow-wrap:anywhere; }
.disclosure { color:var(--copper); }
footer { padding-block:0 38px; color:var(--muted); font-size:14px; }
footer p { margin-bottom:10px; }
@media(max-width:960px) { .choices { grid-template-columns:1fr; gap:42px; } main { padding-top:30px; } .intro { margin-bottom:32px; } }
@media(max-width:420px) { .topbar { font-size:12px; gap:12px; } .wordmark { font-size:19px; } .wordmark span { font-size:10px; } .picks { align-items:stretch; flex-direction:column; } button { width:100%; } }