:root{--bg:#100E0F;--fg:#EDE6DA;--muted:rgba(237,230,218,.68);--faint:rgba(237,230,218,.42);--line:rgba(237,230,218,.12);--warm:#E9A04C;--warm-fg:#1D1307;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--fg);font:400 16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg)}
a{color:inherit;text-decoration:none}
canvas#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:1;background:var(--bg)}
#shade{position:fixed;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(16,14,15,.9) 0,rgba(16,14,15,.72) 27%,rgba(16,14,15,0) 47%)}
@media (max-width:760px){#shade{background:linear-gradient(0deg,rgba(16,14,15,.5) 0,rgba(16,14,15,.62) 22%,rgba(16,14,15,.55) 50%,rgba(16,14,15,0) 74%)}.col{text-shadow:0 1px 12px rgba(16,14,15,.9),0 0 3px rgba(16,14,15,.6)}.go{text-shadow:none}}
header.top{position:fixed;top:0;left:0;right:0;z-index:20;background:linear-gradient(var(--bg) 70%,rgba(16,14,15,0))}
header.top .in{max-width:1200px;margin:0 auto;padding:22px 28px;display:flex;align-items:baseline;gap:30px}
.mark{font:500 22px/1 Newsreader,Georgia,serif;letter-spacing:-.01em;display:flex;align-items:baseline;gap:9px}
.mark i{width:7px;height:7px;border-radius:50%;background:var(--warm);display:inline-block;transform:translateY(-3px)}
.links{display:flex;gap:24px;font:400 14.5px/1 Inter;color:var(--muted)}.links a:hover{color:var(--fg)}
.sp{flex:1}
#snd{all:unset;cursor:pointer;font:400 14px/1 Inter;color:var(--faint);display:flex;align-items:center;gap:7px}
#snd:hover{color:var(--muted)}#snd svg{width:15px;height:15px}
#snd[aria-pressed=true]{color:var(--fg)}#snd .on{display:none}#snd[aria-pressed=true] .on{display:inline}#snd[aria-pressed=true] .off{display:none}
.cta{font:500 14.5px/1 Inter;color:var(--warm);border-bottom:1px solid rgba(233,160,76,.4);padding-bottom:3px}.cta:hover{border-color:var(--warm)}
@media (max-width:760px){.links{display:none}header.top .in{gap:18px}#snd span{display:none}#snd{padding:13px;margin:-13px -5px -13px -13px}#snd svg{width:18px;height:18px}}
main{position:relative;z-index:3}
section.stop{min-height:100vh;display:flex;align-items:center;padding:100px 28px 120px;pointer-events:none}
section.stop .in{max-width:1200px;width:100%;margin:0 auto}
.col{max-width:28rem;pointer-events:auto}
@media (max-width:760px){section.stop{align-items:flex-end;padding-bottom:120px}}
.kicker{font:400 15px/1.4 Newsreader,Georgia,serif;font-style:italic;color:var(--warm)}
h1{font:400 clamp(44px,5.6vw,76px)/1.02 Newsreader,Georgia,serif;letter-spacing:-.02em;margin:14px 0 20px}
h2{font:400 clamp(34px,3.8vw,50px)/1.06 Newsreader,Georgia,serif;letter-spacing:-.015em;margin:10px 0 16px}
.lede{font-size:18px;color:var(--muted);margin:0 0 30px}
p.body{color:var(--muted);margin:0}
.row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.go{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--warm);color:var(--warm-fg);font:500 15px/1 Inter}.go:hover{filter:brightness(1.07)}
.ghost{font:500 15px/1 Inter;color:var(--muted)}.ghost:hover{color:var(--fg)}
a:focus-visible,button:focus-visible{outline:2px solid var(--warm);outline-offset:3px;border-radius:4px}
.done{list-style:none;margin:6px 0 0;padding:0}
.done li{padding:14px 0;border-top:1px solid var(--line);color:var(--muted)}
.done li b{display:block;color:var(--fg);font:400 21px/1.25 Newsreader,Georgia,serif;margin-bottom:2px}
.done li:last-child{border-bottom:1px solid var(--line)}
#steps{position:fixed;right:28px;bottom:24px;z-index:20;display:flex;gap:20px;font:400 14px/1 Inter}
#steps button{all:unset;cursor:pointer;color:var(--faint);display:flex;align-items:baseline;gap:6px;padding:6px 0}
#steps button span{font:italic 400 13px/1 Newsreader,Georgia,serif}
#steps button:hover{color:var(--muted)}
#steps button[aria-current=true]{color:var(--fg)}#steps button[aria-current=true] span{color:var(--warm)}
@media (max-width:760px){#steps{left:20px;right:20px;justify-content:space-between;gap:6px;font-size:12.5px}#steps button span{display:none}}
footer{position:relative;z-index:3;padding:30px 28px 90px;color:var(--faint);font-size:13.5px}
footer .in{max-width:1200px;margin:0 auto}
footer .col{display:flex;gap:24px;border-top:1px solid var(--line);padding-top:22px}
p.body.spaced{margin-bottom:28px}
/* before the script paints (or without it), show the same sunset as a plain gradient */
canvas#c{background:linear-gradient(180deg,#261F3C 0,#683C4E 42%,#CC7044 60%,#4A3326 60%,#1E1512 100%)}