@font-face{font-family:"Cormorant";src:url(/fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JB";src:url(/fonts/jbmono.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#05060a; --bg2:#0a0d14; --ink:#e8edf3; --ink2:#b9c3d1; --mist:#7f8ca1; --line:rgba(200,215,235,.12);
  --spectral:#b8ffe6; --spectral-d:#6fe6c0; --ember:#ff9a4a;
  --day:#e7e5df; --day2:#d9d7d0; --dayink:#8f8c85;
  --serif:"Cormorant","Cormorant Garamond",Georgia,serif; --sans:"Inter",system-ui,-apple-system,Segoe UI,sans-serif; --mono:"JB","JetBrains Mono",ui-monospace,Menlo,monospace;
  --mx:50vw; --my:40vh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);line-height:1.55;overflow-x:hidden;min-height:100svh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
em{font-style:italic}
.dim{opacity:.45}
.defs{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:var(--spectral);color:#05060a}

/* --------------- mode switching --------------- */
html.is-day body{background:var(--day);color:var(--dayink)}
html.is-night body{background:var(--bg);color:var(--ink)}
html.is-day #night{display:none}
html.is-night #day{display:none}
html.is-day{scroll-behavior:auto}
html.is-day body{overflow:hidden;height:100svh}

/* ================================ DAY ================================ */
#day{position:relative;min-height:100svh;height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 40%,#f1f0ec 0%,var(--day) 55%,var(--day2) 100%)}
.day-wash{position:absolute;inset:-10%;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .54  0 0 0 0 .5  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
.day-ghost{position:absolute;width:min(52vh,60vw);height:auto;left:78%;top:62%;opacity:.085;filter:blur(1.5px) grayscale(1);
  transform:translate(-50%,-56%);animation:dayDrift 14s ease-in-out infinite;pointer-events:none;transition:opacity 1.2s ease}
.day-inner{position:relative;z-index:2;max-width:640px}
.day-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:#a7a49c;display:flex;gap:.8em;justify-content:center}
.day-kicker .sep{opacity:.5}
.day-title{font-family:var(--serif);font-weight:300;font-size:clamp(54px,11vw,128px);line-height:.92;letter-spacing:-.02em;color:#a9a69f;margin:22px 0 18px}
.day-title em{color:#9a978f}
.day-sub{font-size:15px;color:#aaa79f;margin-bottom:38px}
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:clamp(8px,2vw,18px);font-family:var(--mono);color:#8e8b84}
.countdown div{display:flex;flex-direction:column;align-items:center;min-width:2.2ch}
.countdown b{font-weight:300;font-size:clamp(40px,8vw,76px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.countdown small{font-size:10px;letter-spacing:.3em;text-transform:uppercase;margin-top:10px;color:#b0ada5}
.countdown i{font-style:normal;font-weight:200;font-size:clamp(34px,7vw,64px);line-height:1;opacity:.35;animation:blink 2s steps(2) infinite}
.cd-label{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#a29f97;margin-top:22px}
.local{font-size:13px;color:#a6a39b;margin-top:28px;line-height:1.7}
.local b{font-family:var(--mono);font-weight:500;color:#8e8b84;font-variant-numeric:tabular-nums}
.day-foot{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:0;right:0;font-family:var(--serif);font-style:italic;font-size:16px;color:#b5b2aa;z-index:2;padding:0 20px}
@keyframes dayDrift{0%,100%{transform:translate(-50%,-56%) rotate(-4deg)}50%{transform:translate(-46%,-61%) rotate(2deg)}}
@keyframes blink{50%{opacity:.08}}

/* dusk transition (day -> night) */
.dusk-veil{position:fixed;inset:0;background:#030407;opacity:0;pointer-events:none;z-index:100}
html.dusk #day{animation:duskDrain 2.6s ease-in forwards}
html.dusk .day-ghost{opacity:.6;filter:blur(0) grayscale(1) brightness(.9);transition:opacity 1.6s ease .4s,filter 1.6s ease .4s}
html.dusk .dusk-veil{animation:duskVeil 2.8s ease-in forwards}
@keyframes duskDrain{0%{filter:none}35%{filter:saturate(.3) brightness(.85)}60%{filter:saturate(0) brightness(.45)}100%{filter:saturate(0) brightness(.12)}}
@keyframes duskVeil{0%{opacity:0}55%{opacity:0}62%{opacity:.7}66%{opacity:.15}72%{opacity:.85}76%{opacity:.4}100%{opacity:1}}
html.arrive .dusk-veil{opacity:1;animation:arriveVeil 1.6s ease-out forwards}
@keyframes arriveVeil{0%{opacity:1}100%{opacity:0}}
html.arrive .mascot-wrap{animation:rise 2.2s cubic-bezier(.2,.7,.2,1) both}
html.arrive .hero-title,html.arrive .kicker,html.arrive .hero-sub,html.arrive .ca,html.arrive .cta{animation:fadeUp 1.4s ease-out both}
html.arrive .kicker{animation-delay:.5s} html.arrive .hero-title{animation-delay:.7s} html.arrive .hero-sub{animation-delay:.95s} html.arrive .hero .ca{animation-delay:1.1s} html.arrive .cta{animation-delay:1.25s}
@keyframes rise{0%{opacity:0;transform:translateY(60px) scale(.92);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
html.dawn .dusk-veil{background:#e7e5df;animation:arriveVeil 1.4s ease-out forwards}

/* ================================ NIGHT ================================ */
#night{position:relative;overflow:hidden;isolation:isolate}
#night::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(90% 60% at 70% 0%,rgba(70,96,140,.22),transparent 60%),radial-gradient(70% 50% at 10% 100%,rgba(60,110,100,.12),transparent 70%),linear-gradient(#070a12,#05060a 40%,#040507)}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none}
.moon{position:absolute;top:clamp(64px,10vh,110px);right:clamp(18px,9vw,160px);width:clamp(54px,7vw,96px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#f6f3ea 0%,#e2ddd0 45%,#bdb6a6 100%);
  box-shadow:0 0 40px 6px rgba(230,228,215,.22),0 0 140px 40px rgba(160,180,210,.12);opacity:.9;filter:blur(.3px)}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 40%,transparent 0 42%,rgba(5,6,10,.0) 43%),radial-gradient(circle at 30% 62%,rgba(120,112,98,.18) 0 9%,transparent 10%),radial-gradient(circle at 58% 28%,rgba(120,112,98,.14) 0 7%,transparent 8%),radial-gradient(circle at 66% 66%,rgba(120,112,98,.16) 0 11%,transparent 12%)}
.stars{position:absolute;inset:0;opacity:.55;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 8%,#cfe,transparent),radial-gradient(1px 1px at 46% 22%,#fff,transparent),
  radial-gradient(1px 1px at 63% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 26%,#def,transparent),radial-gradient(1px 1px at 91% 9%,#fff,transparent),
  radial-gradient(1px 1px at 7% 40%,#fff,transparent),radial-gradient(1px 1px at 37% 35%,#cde,transparent),radial-gradient(1px 1px at 72% 44%,#fff,transparent);
  animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.25}}

.fog{position:fixed;left:0;right:0;pointer-events:none;background-repeat:repeat-x;will-change:background-position}
.fog-back{bottom:-8vh;height:70vh;z-index:-1;background-image:url(/img/fog-b.webp);background-size:auto 100%;opacity:.28;animation:fogMove 90s linear infinite}
.fog-front{bottom:-14vh;height:55vh;z-index:6;background-image:url(/img/fog-a.webp);background-size:auto 100%;opacity:.22;animation:fogMove 55s linear infinite reverse}
@keyframes fogMove{from{background-position:0 0}to{background-position:-1600px 0}}
@media (max-width:700px){.fog-back{height:46vh}.fog-front{height:34vh;bottom:-10vh;opacity:.18}@keyframes fogMove{from{background-position:0 0}to{background-position:-680px 0}}}

.flashlight{position:fixed;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,248,230,.06) 0,rgba(0,0,0,0) 140px,rgba(2,3,6,.22) 340px,rgba(2,3,6,.42) 720px);
  transition:opacity .08s}
.grain{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.motes{position:fixed;inset:0;z-index:5;pointer-events:none}
.motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--spectral);opacity:0;box-shadow:0 0 8px 2px rgba(184,255,230,.5);animation:mote linear infinite}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.6}85%{opacity:.35}100%{opacity:0;transform:translate(var(--dx),-38vh)}}

/* flicker: the light source stutters */
html.flicker .flashlight{animation:flick .7s steps(1) both}
html.flicker .mascot-glow{animation:flickGlow .7s steps(1) both}
@keyframes flick{0%{opacity:1}10%{opacity:.2}14%{opacity:1}30%{opacity:.4}34%{opacity:1}52%{opacity:.1}60%{opacity:1}}
@keyframes flickGlow{0%{opacity:1}10%{opacity:.3}14%{opacity:1}52%{opacity:.2}60%{opacity:1}}

/* hidden ink revealed by the flashlight */
.ink{position:absolute;z-index:3;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,24px);color:var(--spectral);letter-spacing:.01em;white-space:nowrap;pointer-events:none;user-select:none;
  text-shadow:0 0 18px rgba(184,255,230,.55);
  -webkit-mask-image:radial-gradient(circle 150px at var(--lx,-999px) var(--ly,-999px),#000 0,rgba(0,0,0,.6) 45%,transparent 100%);
          mask-image:radial-gradient(circle 150px at var(--lx,-999px) var(--ly,-999px),#000 0,rgba(0,0,0,.6) 45%,transparent 100%)}
.ink.big{font-size:clamp(40px,5vw,72px)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:max(14px,env(safe-area-inset-top)) clamp(16px,4vw,48px) 14px;background:linear-gradient(rgba(5,6,10,.85),rgba(5,6,10,0));}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--mono);font-weight:600;letter-spacing:.14em;font-size:14px}
.brand svg{width:26px;height:28px;filter:drop-shadow(0 0 8px rgba(220,240,255,.45))}
.links{display:flex;gap:clamp(18px,3vw,36px);font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.links a{text-decoration:none;color:var(--ink2);transition:color .2s}
.links a:hover{color:var(--spectral)}
.btn-x{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.btn-x svg{width:14px;height:14px}
.btn-x:hover{border-color:rgba(184,255,230,.45);background:rgba(184,255,230,.06)}

/* hero */
main{position:relative;z-index:4}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(92px,12vh,130px) clamp(18px,5vw,64px) clamp(70px,10vh,110px)}
.mascot-wrap{position:relative;width:clamp(140px,21vh,250px);aspect-ratio:220/240;margin-bottom:clamp(14px,3vh,30px)}
.mascot{position:relative;z-index:2;width:100%;height:100%;overflow:visible;animation:float 6.5s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(215,235,255,.35)) drop-shadow(0 0 60px rgba(160,200,255,.18))}
.mascot-glow{position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle,rgba(190,225,255,.20),rgba(184,255,230,.05) 45%,transparent 70%);z-index:1;animation:breathe 6.5s ease-in-out infinite}
.mascot-shadow{position:absolute;left:18%;right:18%;bottom:-16%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(184,255,230,.16),transparent);animation:shadow 6.5s ease-in-out infinite}
#eyes{transition:transform .25s ease-out}
.eye{transform-box:fill-box;transform-origin:center}
html.blink .eye{animation:blinkEye .22s ease-in-out}
@keyframes blinkEye{50%{transform:scaleY(.08)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.8);opacity:.5}}

.kicker{font-family:var(--mono);font-size:clamp(10.5px,1.1vw,12px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:.7em;flex-wrap:wrap;justify-content:center}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--spectral);box-shadow:0 0 10px var(--spectral);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.2vw,112px);line-height:.95;letter-spacing:-.025em;margin:clamp(14px,2.4vh,24px) 0 clamp(14px,2.4vh,22px);max-width:15ch;
  text-shadow:0 0 30px rgba(200,225,255,.12);animation:titleFlicker 9s infinite}
.hero-title .tick{font-family:var(--mono);font-weight:500;font-size:.62em;letter-spacing:-.02em;color:#fff;text-shadow:0 0 24px rgba(220,240,255,.5);vertical-align:.08em}
.hero-title em{color:var(--spectral);font-weight:400;text-shadow:0 0 34px rgba(184,255,230,.35)}
@keyframes titleFlicker{0%,91%,100%{opacity:1}92%{opacity:.55}93%{opacity:1}95.5%{opacity:.7}96%{opacity:1}}
.hero-sub{font-size:clamp(15px,1.25vw,18px);color:var(--ink2);max-width:540px;margin-bottom:clamp(20px,3.4vh,30px)}

.ca{display:flex;align-items:center;gap:12px;width:100%;max-width:520px;padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(rgba(14,18,28,.75),rgba(8,10,16,.75));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--mono)}
.ca-label{font-size:11px;letter-spacing:.2em;color:var(--mist);flex:none}
.ca-value{flex:1;min-width:0;font-family:var(--mono);font-size:14px;color:var(--ink);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca.pending .ca-value{color:var(--spectral);letter-spacing:.06em}
.ca.pending .ca-value::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:4px;vertical-align:-2px;background:var(--spectral);opacity:.7;animation:blink 1.1s steps(2) infinite}
.ca-copy{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:9px;padding:9px 14px;cursor:pointer}
.ca-copy:disabled{opacity:.45;cursor:default}
.ca-copy:not(:disabled):hover{border-color:rgba(184,255,230,.5)}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary{background:var(--ink);color:#06070b;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 40px -10px rgba(184,255,230,.45)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 14px 50px -8px rgba(184,255,230,.6)}
.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(184,255,230,.45)}
.scroll-hint{position:absolute;bottom:clamp(18px,4vh,34px);left:50%;transform:translateX(-50%);width:22px;height:36px;border:1px solid var(--line);border-radius:12px}
.scroll-hint span{position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;border-radius:2px;background:var(--ink2);animation:scrollDot 2.2s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* sections */
.section{position:relative;max-width:1180px;margin:0 auto;padding:clamp(80px,13vh,150px) clamp(18px,5vw,64px)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--spectral-d);margin-bottom:18px}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.6vw,78px);line-height:1;letter-spacing:-.02em;max-width:16ch}
h2 em{color:var(--ink2)}
h3{font-family:var(--serif);font-weight:500;font-size:clamp(23px,2vw,28px);line-height:1.15;letter-spacing:-.005em;margin-bottom:8px}
.lore-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,56px);margin:clamp(28px,5vh,48px) 0 clamp(40px,7vh,72px);max-width:960px}
.lore-body p{color:var(--ink2);font-size:clamp(16px,1.3vw,18px)}
.lore-body em{color:var(--ink)}
.rules{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.rules li{background:rgba(7,9,14,.86);padding:clamp(22px,3vw,34px);position:relative}
.rules .num{display:block;font-family:"IM FELL English SC",var(--serif);font-size:30px;color:var(--spectral);opacity:.8;margin-bottom:26px;text-shadow:0 0 18px rgba(184,255,230,.4)}
.rules p,.steps p,.tk p{color:var(--mist);font-size:15px}

.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:clamp(30px,5vh,52px) 0 28px}
.steps li{position:relative;padding:26px 22px 26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(16,20,30,.7),rgba(8,10,16,.6));transition:border-color .3s,transform .3s}
.steps li:hover{border-color:rgba(184,255,230,.3);transform:translateY(-2px)}
.step-n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--spectral-d);margin-bottom:30px}
.buy-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.buy-row .ca{flex:1;max-width:560px}

.tk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:clamp(30px,5vh,52px) 0 30px}
.tk{padding:24px 22px;border-top:1px solid rgba(184,255,230,.35);background:linear-gradient(180deg,rgba(184,255,230,.05),transparent 70%)}
.tk small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-bottom:12px}
.tk b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin-bottom:10px;color:var(--ink)}
.disclaimer{max-width:760px;font-size:13.5px;color:var(--mist);line-height:1.65;border-left:1px solid var(--line);padding-left:16px}

.footer{position:relative;z-index:4;max-width:1180px;margin:0 auto;padding:40px clamp(18px,5vw,64px) calc(56px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line)}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:600;letter-spacing:.14em}
.foot-brand svg{width:22px;height:24px}
.foot-line{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.foot-links{display:flex;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.foot-links a{color:var(--ink2);text-decoration:none}
.foot-links a:hover{color:var(--spectral)}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:200;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:#06070b;padding:10px 16px;border-radius:999px;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s ease}
.rv.in{opacity:1;transform:none}

/* responsive */
@media (max-width:980px){
  .steps,.tk-grid{grid-template-columns:repeat(2,1fr)}
  .rules{grid-template-columns:1fr}
  .rules .num{margin-bottom:14px}
}
@media (max-width:700px){
  .links{display:none}
  .lore-body{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .tk-grid{grid-template-columns:1fr 1fr;gap:10px}
  .tk{padding:18px 14px}
  .ink{font-size:16px}
  .ink.big{font-size:40px}
  .hero{padding-top:96px}
  .ca{padding-left:12px;gap:10px}
  .ca-value{font-size:13px}
  .buy-row .btn{width:100%}
  .footer{flex-direction:column;align-items:flex-start}
  .day-title{margin:18px 0 14px}
  .day-ghost{left:74%;top:80%;width:72vw;opacity:.09}
  .day-sub{margin-bottom:30px;font-size:14px}
}
@media (max-width:380px){.tk-grid{grid-template-columns:1fr}.cta .btn{width:100%}}
@media (max-height:640px) and (orientation:landscape){.day-ghost{width:40vh}.day-sub{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
}