:root{
  --ground:#07080d; --panel:#0e1220; --panel2:#141a2c; --raise:#182135;
  --ink:#eaeef7; --muted:#98a2bd; --dim:#6b778f;
  --cobalt:#5f8cf0; --violet:#b98cf2; --gold:#d2b267;
  --line:rgba(126,160,242,.20); --line-gold:rgba(210,178,103,.45);
  --display:Constantia,"Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --wrap:660px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font:17px/1.62 var(--sans);-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:var(--cobalt)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.gold{color:var(--gold)}

h1{font-family:var(--display);font-size:30px;line-height:1.14;margin:0 0 10px;text-wrap:balance}
h2{font-family:var(--display);font-size:24px;line-height:1.18;margin:0 0 12px;text-wrap:balance}
h3{font-size:13px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:600}
h3.sub{margin-top:30px}
h4{margin:0}
p{margin:0 0 16px}
.lede{font-family:var(--display);font-size:19.5px;line-height:1.45;margin:0 0 18px}
.muted{color:var(--muted)}
.small{font-size:13.5px;line-height:1.58;color:var(--muted)}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cobalt);
  margin:0 0 10px;font-weight:600}

.hero{position:relative;margin-bottom:8px}
.hero img{width:100%;opacity:.92}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:66%;
  background:linear-gradient(to bottom,rgba(7,8,13,0),var(--ground))}
.hero-txt{position:relative;margin-top:-70px;text-align:center;z-index:2;padding:0 18px}
.hero-txt h1{font-size:33px}
.hero-sub{font-family:var(--display);font-size:21px;margin:10px 0 0}
.hero-sub b{color:var(--gold);font-weight:400}

.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;margin:24px 0 28px}
.trust span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt);
  font-weight:600;white-space:nowrap}
.trust span+span::before{content:"✦";color:var(--gold);margin:0 10px;font-size:9px;
  position:relative;top:-2px}

.btn{display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;
  font:600 16px var(--sans);padding:16px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);margin:0 0 12px}
.btn small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.btn.gold{border-color:var(--line-gold);
  background:linear-gradient(180deg,rgba(210,178,103,.16),rgba(210,178,103,.06));color:var(--gold)}
.btn.gold small{color:rgba(210,178,103,.78)}
.btn.ghost{background:none}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;pointer-events:none}

.bar{position:sticky;top:0;z-index:30;background:rgba(7,8,13,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .in{max-width:var(--wrap);margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:14px}
.bar a{color:var(--muted);text-decoration:none;font:600 12px var(--sans);letter-spacing:.1em}
.bar a:hover{color:var(--gold)}
.bar .count{margin-left:auto;font:600 12px var(--sans);letter-spacing:.05em;color:var(--gold)}

section{padding:34px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

.roles{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
@media(min-width:600px){.roles{grid-template-columns:1fr 1fr}}
.role{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;
  display:flex;flex-direction:column}
.role.seraphim{border-color:rgba(95,140,240,.34)}
.role.fallen{border-color:rgba(185,140,242,.34)}
.role.on{border-color:var(--line-gold);box-shadow:inset 0 0 0 1px rgba(210,178,103,.35)}
.role figure{margin:0;background:#05060a}
.role .body{padding:15px 16px 16px;flex:1;display:flex;flex-direction:column}
.role h4{font-family:var(--display);font-size:21px;line-height:1.15}
.role .side{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  margin:5px 0 13px}
.role.seraphim .side{color:var(--cobalt)}
.role.fallen .side{color:var(--violet)}
.role dl{margin:0 0 auto}
.role dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin-bottom:3px}
.role dd{margin:0 0 12px;font-size:14.5px;line-height:1.5}
.role .pick{display:block;width:100%;margin-top:12px;padding:12px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);color:var(--muted);
  font:600 13.5px var(--sans);cursor:pointer}
.role.on .pick{border-color:var(--line-gold);color:var(--gold);
  background:linear-gradient(180deg,rgba(210,178,103,.18),rgba(210,178,103,.06))}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.chip{padding:10px 15px;border-radius:99px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font:600 14px var(--sans);cursor:pointer}
.chip.on{border-color:var(--line-gold);color:var(--gold);background:rgba(210,178,103,.12)}

.laws{list-style:none;padding:0;margin:0 0 20px}
.laws li{margin-bottom:15px}
.laws b{display:block;color:var(--gold);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:4px}
.note{background:var(--panel);border-left:2px solid var(--line-gold);border-radius:0 9px 9px 0;
  padding:14px 16px;margin:0 0 20px}
.note p:last-child{margin:0}

.prog{height:3px;background:var(--panel2)}
.prog i{display:block;height:100%;background:var(--gold);width:0;transition:width .25s}
.q{max-width:var(--wrap);margin:0 auto;padding:26px 20px 44px}
.step{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  margin:0 0 12px;font-weight:600}
.opt{display:block;width:100%;text-align:left;padding:15px 74px 15px 16px;margin:0 0 10px;
  border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font:15.5px/1.45 var(--sans);cursor:pointer;position:relative}
.opt .tag{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font:600 9.5px var(--sans);letter-spacing:.1em;padding:4px 8px;border-radius:99px}
.opt.primary{border-color:var(--line-gold);background:rgba(210,178,103,.13)}
.opt.primary .tag{color:var(--gold);border:1px solid var(--line-gold)}
.opt.secondary{border-color:rgba(95,140,240,.5);background:rgba(95,140,240,.10)}
.opt.secondary .tag{color:var(--cobalt);border:1px solid rgba(95,140,240,.5)}
.hint{font-size:13.5px;color:var(--dim);margin:0 0 18px}
.nav{display:flex;gap:10px;margin-top:22px}
.nav .btn{margin:0}

.res{background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:16px 17px;margin:0 0 13px}
.res .h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin-bottom:8px}
.res .r{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:22px}
.res .pc{margin-left:auto;font:600 15px var(--sans);color:var(--gold);
  font-variant-numeric:tabular-nums}
.res .r.second{font-size:18px;color:var(--muted);margin-top:8px}
.res .r.second .pc{color:var(--cobalt)}
.meter{height:4px;border-radius:2px;background:var(--panel2);margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--cobalt),var(--gold))}
.all{width:100%;border-collapse:collapse;font-size:14.5px}
.all td{padding:8px 0;border-bottom:1px solid rgba(126,160,242,.10)}
.all td:last-child{text-align:right;color:var(--gold);font-variant-numeric:tabular-nums}
details{margin:0 0 20px}
details summary{cursor:pointer;color:var(--muted);font:600 13.5px var(--sans);padding:12px 0}

textarea{width:100%;min-height:220px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:11px;padding:14px;
  font:15px/1.6 var(--sans);resize:vertical}
label.accept{display:flex;gap:12px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:14px 15px;margin:0 0 22px;
  cursor:pointer;font-size:15px}
label.accept input{margin-top:3px;width:20px;height:20px;accent-color:#d2b267;flex:0 0 auto}

footer{text-align:center;color:var(--dim);font-size:12.5px;padding:34px 20px 60px}
footer a{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--raise);border:1px solid var(--line-gold);color:var(--gold);
  padding:11px 20px;border-radius:99px;font:600 14px var(--sans);opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

.res .r a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(210,178,103,.35)}
.res .r a:hover{color:var(--gold)}
.all a{color:var(--ink);text-decoration:none}
.all a:hover{color:var(--gold)}
.bar .in{overflow-x:auto;scrollbar-width:none}
.bar .in::-webkit-scrollbar{display:none}
.role{scroll-margin-top:64px}

.btn.skip{margin-top:12px;font-size:14px;color:var(--dim);border-color:rgba(126,160,242,.14)}
.btn.skip small{color:var(--dim);font-size:12px}