:root{--bg:#0b1210;--card:#111c18;--line:#22332c;--tx:#e8f1ed;--mut:#8fa69b;--track:#1b2b25;--g:#3ddc97;--r:#ff5d5d;--o:#ffa94d;--y:#ffd75e;--btn-tx:#06140e}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(900px 500px at 50% -10%,#123026,var(--bg)) fixed;background-color:var(--bg);color:var(--tx);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.w{max-width:860px;margin:0 auto;padding:24px 16px 40px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;margin-bottom:28px}
.brand em{font-style:normal;color:var(--g)}
h1{font-size:clamp(30px,6vw,50px);line-height:1.1;margin:.2em 0 .4em;letter-spacing:-.02em}
h2{font-size:24px;margin:1.6em 0 .6em}
h3{margin:0 0 6px}
p{color:var(--mut)}
a{color:var(--g)}
.tag{color:var(--g);font-size:14px;letter-spacing:.06em;font-weight:600}
.lead{font-size:18px;max-width:620px}
.small{font-size:13px}
.btn{background:var(--g);color:var(--btn-tx);border:0;border-radius:12px;padding:14px 26px;font-weight:700;font-size:16px;cursor:pointer;min-height:48px}
.btn.s{background:transparent;color:var(--tx);border:1px solid var(--line)}
.btn:disabled{opacity:.55;cursor:wait}
.linkbtn{background:none;border:0;color:var(--g);text-decoration:underline;cursor:pointer;font-size:14px;padding:10px}
:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;break-inside:avoid}
.num{color:var(--g);font-weight:700;font-size:14px}
input,select{width:100%;padding:13px;border-radius:10px;border:1px solid var(--line);background:#0c1613;color:var(--tx);font-size:16px;margin:4px 0 14px;min-height:48px}
label{font-size:14px;color:var(--mut)}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--mut);font-size:14px;margin:6px 0 10px}
.check input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none}
.bar{height:8px;background:var(--track);border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--g);transition:width .5s}
.meta{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--mut)}
.opt{display:block;width:100%;text-align:left;background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin:10px 0;font-size:16px;cursor:pointer;transition:border-color .15s,background .15s;min-height:52px}
.opt:hover{border-color:var(--g)}
.opt.on{border-color:var(--g);background:#173328;box-shadow:0 0 0 1px var(--g)}
.q{animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.q{animation:none}.bar i{transition:none}}
.err{color:var(--r);font-size:14px;min-height:22px;margin:4px 0}
.notice{background:#2a2410;border:1px solid #5b4b12;color:var(--y);border-radius:10px;padding:10px 14px;margin:12px 0;font-size:14px;text-align:left}
.row{display:flex;gap:12px;justify-content:space-between;margin-top:16px;flex-wrap:wrap}
.row.mid{justify-content:center}
.c{text-align:center}
.ring{position:relative;width:220px;height:220px;margin:16px auto}
.ring svg{display:block}
.ring .track{stroke:var(--track)}
.ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:52px;line-height:1}
.ring b small{font-size:15px;color:var(--mut);font-weight:400;margin-top:6px}
.pill{display:inline-block;padding:4px 14px;border-radius:99px;font-weight:700;border:1px solid currentColor}
.f{border-left:4px solid;padding-left:16px;margin:16px 0;break-inside:avoid}
.f.h{border-color:var(--r)}.f.m{border-color:var(--o)}.f.i{border-color:var(--y)}
.f p{margin:.3em 0}.f b{color:var(--tx)}
.dom{display:flex;justify-content:space-between;gap:8px}
.gate{max-width:440px;margin:24px auto;text-align:center}
.gate select{max-width:280px}
.blur{filter:blur(10px);user-select:none;font-size:64px;font-weight:700;line-height:1.1}
.blur small{font-size:20px}
.price{font-size:34px;font-weight:700;margin:6px 0 14px}
.spin{width:38px;height:38px;border:4px solid var(--track);border-top-color:var(--g);border-radius:50%;margin:30px auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.disc{font-size:13px;color:var(--mut);border-top:1px solid var(--line);margin-top:30px;padding-top:14px}
.foot{font-size:13px;color:var(--mut);text-align:center;padding-top:0}
.foot a{color:var(--mut)}
.t{color:var(--tx)}
ul.act{color:var(--mut);padding-left:18px;margin:6px 0 0}
.legal{max-width:760px}
.legal h2{font-size:20px;margin-top:1.8em}
.legal p,.legal li{color:var(--mut)}
.draft{background:#2a2410;border:1px solid #5b4b12;color:var(--y);border-radius:10px;padding:12px 16px;font-size:14px}
@media (max-width:520px){.btn{width:100%}.row .btn{flex:1 1 100%}.ring{width:190px;height:190px}.ring svg{width:190px;height:190px}.ring b{font-size:44px}}

/* Print / Save as PDF fallback: switch to a light theme */
@media print{
  :root{--bg:#fff;--card:#fff;--line:#cfd8d3;--tx:#111;--mut:#444;--track:#e1e8e4;--g:#128a59;--r:#c62828;--o:#c76a00;--y:#a8860a}
  body{background:#fff!important;padding:0}
  .no-print{display:none!important}
  .card,.f{break-inside:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .w{padding:0;max-width:none}
}

/* Plain-English explanations in brackets, "Did you know?" and How it works */
.gloss{font-size:.66em;font-weight:400;color:var(--mut);line-height:1.4}
.dyk{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--g);border-radius:12px;padding:14px 18px;margin:20px 0;color:var(--tx);font-size:15px}
.dyk b{color:var(--g)}
.dyk small{display:block;color:var(--mut);margin-top:6px;font-size:12px}
.steps .num{letter-spacing:.06em}

/* The question slide-in animation starts 18px to the right: clip it so the page never scrolls sideways */
body{overflow-x:hidden}
.w{overflow-x:clip}