/* Doppler — brand tokens borrowed from the Slow Fourier dusk palette */
@font-face{font-family:"Outfit";src:local("Outfit"),url("fonts/Outfit-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:local("Cormorant Garamond Italic"),url("fonts/CormorantGaramond-Italic.ttf") format("truetype");font-style:italic;font-weight:400 600;font-display:swap}

:root{
  --indigo:#131024; --panel:#1B1733; --panel-2:#221D40; --line:#2E2850;
  --cream:#F3E9D2; --muted:#8C87A6; --dim:#5C5778;
  --amber:#F2B441; --rose:#D48A9B; --sage:#8FB996; --powder:#8FB3E6; --lavender:#B7A6E8;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--indigo)}
body{margin:0;font-family:var(--sans);color:var(--cream);background:var(--indigo);line-height:1.45;-webkit-font-smoothing:antialiased}
main{max-width:540px;margin:0 auto;padding:22px 18px 72px;position:relative}

/* ambient equation watermark, like the app */
.watermark{position:absolute;left:0;right:0;top:64px;text-align:center;font-family:var(--serif);font-style:italic;font-size:30px;color:var(--cream);opacity:.06;pointer-events:none;user-select:none;white-space:nowrap;overflow:hidden}

header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.wordmark{font-weight:600;font-size:34px;letter-spacing:-.03em;margin:0;line-height:1}
.wordmark .blue{color:var(--powder)} .wordmark .red{color:var(--rose)}
.day{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.08em}
.tag{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--lavender);margin:2px 0 26px}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative}
.card.target{border-color:var(--amber);box-shadow:0 0 0 1px rgba(242,180,65,.25),0 0 40px rgba(242,180,65,.08)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.card.target .eyebrow{color:var(--amber)}
.title{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.meta{color:var(--muted);font-size:14px;margin-top:2px}
.spec{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:8px;letter-spacing:.02em}
.spec.hidden{visibility:hidden}
.ask{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--cream);margin:22px 0 10px}

.cands{display:grid;gap:8px}
button.cand{all:unset;display:block;cursor:pointer;border-radius:12px}
button.cand .card{transition:transform .15s,border-color .15s}
button.cand:hover .card,button.cand:focus-visible .card{border-color:var(--lavender);transform:translateX(3px)}
button.cand:focus-visible{outline:2px solid var(--powder);outline-offset:3px}
button.cand:disabled{cursor:default}
button.cand:disabled .card{transform:none}
.card .dist{position:absolute;right:16px;top:14px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.card.is-answer{border-color:var(--amber)} .card.is-answer .dist{color:var(--amber)}
.card.is-pick:not(.is-answer){border-color:var(--rose)} .card.is-pick:not(.is-answer) .dist{color:var(--rose)}
.card .badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:8px}
.is-answer .badge{color:var(--amber)} .is-pick:not(.is-answer) .badge{color:var(--rose)}

/* the calculation ledger — the signature */
.ledger{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:22px;font-family:var(--mono);font-size:12.5px}
.ledger .head{display:flex;justify-content:space-between;color:var(--muted);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.ledger .formula{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--cream);margin-bottom:14px}
.row{display:grid;grid-template-columns:76px 34px 1fr 60px;gap:8px;align-items:center;padding:4px 0;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.row.on{opacity:1;transform:none}
.row .g{color:var(--cream)} .row .w{color:var(--dim)} .row .v{text-align:right;color:var(--lavender)}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.row.far .bar i{background:var(--rose)}
.sum{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:10px;padding-top:10px;color:var(--muted)}
.sum b{font-family:var(--sans);font-weight:600;font-size:26px;color:var(--amber);letter-spacing:-.02em}
.sum.wrong b{color:var(--rose)}
.ledger .note{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);margin-top:8px}

.verdict{font-family:var(--serif);font-style:italic;font-size:26px;margin:26px 0 4px;color:var(--cream)}
.verdict.right{color:var(--amber)} .verdict.wrong{color:var(--rose)}
.legend{display:flex;gap:18px;font-family:var(--mono);font-size:11px;color:var(--muted);margin:8px 0 4px;letter-spacing:.06em}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .k-twin{background:var(--amber)} .legend .k-pick{background:var(--rose)}
svg.radar{width:100%;height:auto;display:block;margin:4px 0 6px}
.listen{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px;align-items:center}
.listen .lead{width:100%;color:var(--muted);font-size:14px}
.listen a{font-size:13px;font-weight:500;text-decoration:none;color:var(--cream);border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--panel)}
.listen a:hover,.listen a:focus-visible{border-color:var(--powder);color:var(--powder)}
.share{all:unset;cursor:pointer;display:inline-block;background:var(--cream);color:var(--indigo);font-weight:600;padding:12px 20px;border-radius:10px;margin-top:12px}
.share:focus-visible{outline:2px solid var(--powder);outline-offset:3px}
.runners{margin-top:22px;font-size:14px;color:var(--muted)}
.runners b{color:var(--cream);font-weight:500}
footer{margin-top:44px;font-size:12px;color:var(--dim);line-height:1.6}
footer a{color:var(--muted)}
.hidden{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}