/* Potions countdown: the workbench night stage, dense dark panels and cream parchment, the Pixelify type. */
@font-face{font-family:'Pixelify';src:url(/assets/fonts/pixelify-sans.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Potions Figures';src:url(/assets/fonts/potions-figures.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
/* Arial scaled to Pixelify's width and line metrics, and to the figures' fixed digit width, so nothing reflows when the fonts arrive */
@font-face{font-family:'Pixelify Fallback';src:local('Arial'),local('ArialMT');size-adjust:110.34%;ascent-override:83.38%;descent-override:25.38%;line-gap-override:0%}
@font-face{font-family:'Figures Fallback';src:local('Arial'),local('ArialMT');size-adjust:105.36%;ascent-override:87.32%;descent-override:26.58%;line-gap-override:0%;unicode-range:U+0030-0039}
:root{
 --bg:#050605;--panel:#0d100b;--raised:#141810;--fill:rgba(243,239,219,.06);--fill-2:rgba(243,239,219,.1);
 --ink:#f3efdb;--muted:rgba(243,239,219,.7);--faint:rgba(243,239,219,.55);
 --lime:#c8ef55;--lime-hover:#b6e03f;--lime-ink:#10190a;--up:#bde66b;--down:#f08c5e;
 --parch:#d9d0b1;--parch-ink:#1f2318;--parch-muted:#4d4b37;--parch-rule:rgba(31,35,24,.07);--parch-accent:#30560a;
 --glass:rgba(13,15,11,.62);--blur:blur(16px) saturate(140%);
 --gutter:clamp(16px,4vw,56px);--measure:1240px;--r-card:16px;--r-cell:12px;--r-pill:999px;--bar-h:72px;
 --focus:rgba(200,239,85,.2);
 --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--bar-h)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Potions Figures','Figures Fallback','Pixelify','Pixelify Fallback',Arial,sans-serif;font-variant-ligatures:no-common-ligatures;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
/* No line ends on a lone word: headings balance their lines, running text keeps two words or more on its last line */
h2,h3,dd{text-wrap:balance}
p,li,em,small,.pour-head span{text-wrap:pretty}
.tabular{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;z-index:60;padding:8px 14px;border-radius:var(--r-pill);background:var(--lime);color:var(--lime-ink)}
.skip:focus{left:8px}
.sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* Keyboard focus shows as a change of fill and ink on the control itself: no outline, no ring */
:focus,:focus-visible{outline:none}
.btn.lime:focus-visible,.skip:focus-visible{background:var(--focus);color:var(--lime)}
.btn.soft:focus-visible,.chip.glass:focus-visible,.contract-copy:focus-visible,.bar-nav a:focus-visible{background:var(--lime);color:var(--lime-ink)}
.chip.glass:focus-visible span,.chip.glass:focus-visible svg,.contract-copy:focus-visible svg{color:var(--lime-ink)}
.brand:focus-visible{background:rgba(200,239,85,.45)}
.foot-links a:focus-visible{margin:0 -4px;padding:0 4px;border-radius:4px;background:var(--lime);color:var(--lime-ink)}
.parch a:focus-visible{margin:0 -4px;padding:0 4px;border-radius:4px;background:var(--parch-ink);color:var(--parch)}
.wrap{width:min(calc(100% - 2 * var(--gutter)),var(--measure));margin-inline:auto}

/* Controls: pills, one lime action per view, chevron moves 2px on hover */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border:0;border-radius:var(--r-pill);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
.btn.lg{height:48px;padding:0 26px;font-size:16px}
.btn.lime{background:var(--lime);color:var(--lime-ink)}
.btn.lime:hover{background:var(--lime-hover)}
.btn.soft{background:var(--fill);color:var(--ink)}
.btn.soft:hover{background:var(--fill-2)}
.btn:active{transform:scale(.98)}
.chev{transition:transform .16s var(--ease)}
.btn:hover .chev{transform:translateX(2px)}

/* The bar: transparent over the night stage, dark glass after scrolling */
.bar{position:fixed;inset:0 0 auto;z-index:40;transition:background-color .2s var(--ease)}
.bar.scrolled{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.bar-in{width:min(calc(100% - 2 * var(--gutter)),var(--measure));margin:auto;height:var(--bar-h);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.brand{display:inline-flex;justify-self:start;border-radius:8px}
.brand img{width:120px;height:38px;object-fit:contain;image-rendering:pixelated}
.bar-nav{display:flex;gap:4px}
.bar-nav a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-pill);font-size:14px;font-weight:500;color:rgba(243,239,219,.92);transition:color .16s}
.bar-nav a:hover{color:var(--lime)}
.bar .btn{justify-self:end}

/* The hero: the workbench plate as a cover stage, the real bottles on its bench */
.hero{--mist:rgba(170,205,190,.16);--mist-slow:rgba(150,190,175,.12);--fly:#d9f27a;position:relative;height:max(min(100svh,max(1080px,calc(614px + 21.6vw))),760px);overflow:hidden;background:var(--bg);container-type:size;isolation:isolate}
.art{position:absolute;inset:0;z-index:-1}
.stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.stage.wide{width:max(100cqw,150cqh);aspect-ratio:3/2}
.stage.tall{display:none;width:max(100cqw,66.667cqh);aspect-ratio:2/3}
/* The stage grows with the width and stands on the hero's floor, so past 1080px tall a wider hero keeps the bench below the copy */
@media(max-aspect-ratio:4/5){.stage.wide{display:none}.stage.tall{display:block}.hero{height:max(min(100svh,max(1080px,calc(560px + 60vw))),760px)}}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.layer{position:absolute;inset:0;transition:transform .2s linear}
.hero.alive .layer.back{transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -8px),0) scale(1.02)}
.hero.alive .layer.front{transform:translate3d(calc(var(--px,0) * 22px),calc(var(--py,0) * 10px),0)}
.bottle{position:absolute;display:block;transform:translateX(-50%)}
.loop{position:relative;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.shadow{position:absolute;left:6%;right:6%;bottom:-3.5%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,0))}
.night{position:absolute;overflow:hidden;pointer-events:none}
.mist{position:absolute;left:-60%;right:-60%;top:48%;height:34%;border-radius:50%;background:radial-gradient(closest-side,var(--mist),transparent);opacity:0}
.mist.slow{top:62%;height:26%;background:radial-gradient(closest-side,var(--mist-slow),transparent)}
.hero.alive .mist{opacity:1;animation:mist 26s ease-in-out infinite alternate}
.hero.alive .mist.slow{animation-duration:38s;animation-direction:alternate-reverse}
@keyframes mist{from{transform:translateX(-14%)}to{transform:translateX(14%)}}
.fly{position:absolute;width:4px;height:4px;border-radius:1px;background:var(--fly);opacity:0}
.hero.alive .fly{animation:fly-drift 9s ease-in-out infinite alternate,fly-blink 3.4s steps(4,end) infinite}
@keyframes fly-drift{0%{transform:translate(0,0)}33%{transform:translate(14px,-10px)}66%{transform:translate(-8px,-22px)}100%{transform:translate(10px,-6px)}}
@keyframes fly-blink{0%,100%{opacity:0}25%{opacity:.9}50%{opacity:.35}75%{opacity:.8}}
/* Stage layout: generated by gate/build.py from its stage tables; edit those, not these lines */
.stage.wide .n1{left:13.300%;top:9.300%;width:10.800%;height:49.300%}
.stage.wide .n2{left:35%;top:2.400%;width:30.100%;height:56.200%}
.stage.wide .n3{left:75.900%;top:9.300%;width:11%;height:49.300%}
.stage.wide .b-flask-clean{left:21.500%;bottom:18.500%;height:13.226%;aspect-ratio:264/400}
.stage.wide .b-flask-net{left:31%;bottom:18.500%;height:13.751%;aspect-ratio:274/400}
.stage.wide .b-decanter{left:40.500%;bottom:18.500%;height:13.788%;aspect-ratio:260/400}
.stage.wide .b-jar{left:50%;bottom:18.500%;height:12.870%;aspect-ratio:348/400}
.stage.wide .b-gem{left:59.500%;bottom:18.500%;height:12.964%;aspect-ratio:278/400}
.stage.wide .b-vial{left:68%;bottom:18.500%;height:14.500%;aspect-ratio:170/400}
.stage.wide .b-bulb{left:77%;bottom:18.500%;height:13.357%;aspect-ratio:230/400}
.stage.tall .n1{left:31.100%;top:1%;width:39%;height:56.300%}
.stage.tall .b-flask-net{left:30%;bottom:28.400%;height:10.906%;aspect-ratio:274/400}
.stage.tall .b-jar{left:50%;bottom:28.400%;height:10.207%;aspect-ratio:348/400}
.stage.tall .b-gem{left:70%;bottom:28.400%;height:10.282%;aspect-ratio:278/400}
.fly.f0{left:12%;top:62%}
.hero.alive .fly.f0{animation-delay:0s,0.00s}
.fly.f1{left:31%;top:48%}
.hero.alive .fly.f1{animation-delay:1.6s,1.12s}
.fly.f2{left:52%;top:70%}
.hero.alive .fly.f2{animation-delay:3.1s,2.17s}
.fly.f3{left:68%;top:42%}
.hero.alive .fly.f3{animation-delay:0.8s,0.56s}
.fly.f4{left:84%;top:66%}
.hero.alive .fly.f4{animation-delay:2.3s,1.61s}
.fly.f5{left:22%;top:30%}
.hero.alive .fly.f5{animation-delay:4s,2.80s}
.fly.f6{left:60%;top:24%}
.hero.alive .fly.f6{animation-delay:2.8s,1.96s}
.fly.f7{left:44%;top:55%}
.hero.alive .fly.f7{animation-delay:1.1s,0.77s}
.fly.f8{left:76%;top:78%}
.hero.alive .fly.f8{animation-delay:3.6s,2.52s}
.fly.f9{left:90%;top:34%}
.hero.alive .fly.f9{animation-delay:0.4s,0.28s}
/* End of the generated stage layout */

.copy{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(88px,11svh,128px) var(--gutter) 0}
.copy h1{display:flex;flex-direction:column;font-size:clamp(36px,min(4.4vw,7.4svh),76px);font-weight:500;line-height:.94;letter-spacing:-.04em}
.copy h1 span{white-space:nowrap}
.copy h1 span+span{color:var(--lime)}
.lead{max-width:56ch;margin-top:clamp(10px,1.6svh,16px);font-size:clamp(14px,min(1.1vw,1.9svh),17px);line-height:1.5;color:rgba(243,239,219,.92)}
.count{display:flex;flex-direction:column;align-items:center;align-self:stretch;margin-top:clamp(12px,2svh,20px)}
/* Full-width lines, so the local date and the opening label change their words without moving the clock */
.count-label,.count-when{align-self:stretch;text-align:center}
.count-label{font-size:clamp(14px,1.15vw,17px);color:rgba(243,239,219,.9)}
.digits{display:flex;align-items:flex-start;gap:clamp(8px,1.2vw,16px);margin-top:6px}
.digits span{display:flex;flex-direction:column;align-items:center;min-width:2.2ch}
.digits b{font-size:clamp(36px,min(4vw,6.4svh),64px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.digits small{margin-top:4px;font-size:12px;color:rgba(243,239,219,.88)}
.digits i{font-style:normal;font-size:clamp(28px,min(3.2vw,5.2svh),50px);line-height:1.1;color:var(--lime)}
.count-when{margin-top:6px;font-size:13px;color:rgba(243,239,219,.88)}
.acts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(14px,2.2svh,22px)}
.chip{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 12px;border:0;border-radius:var(--r-pill);cursor:pointer;font-size:14px;transition:background-color .16s}
.chip.glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--ink)}
.chip.glass:hover{background:rgba(13,15,11,.8)}
.chip img{width:24px;height:24px;border-radius:6px}
.chip span{color:var(--muted)}
.chip svg{color:var(--lime)}

/* Sections */
.sec{padding-top:clamp(64px,7vw,104px);scroll-margin-top:calc(16px - clamp(64px,7vw,104px))}
.head{display:flex;flex-direction:column;gap:8px;max-width:760px;margin-bottom:22px}
.head h2{font-size:clamp(30px,3.3vw,46px);font-weight:500;line-height:1.02;letter-spacing:-.03em}
.head p{font-size:clamp(14px,1.1vw,16px);color:var(--muted)}
.panel{min-width:0;padding:20px;border-radius:var(--r-card);background:var(--panel)}
.parch{min-width:0;padding:20px 22px;border-radius:var(--r-card);background:var(--parch);color:var(--parch-ink)}

/* The token */
.token-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px}
.token-id{display:flex;align-items:center;gap:14px}
.token-id img{width:64px;height:64px;border-radius:14px}
.token-id h3{font-size:24px;font-weight:600;letter-spacing:-.01em}
.token-id p{font-size:13px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.stats div{padding:12px 14px;border-radius:var(--r-cell);background:var(--fill)}
.stats dt{font-size:12px;color:var(--faint)}
.stats dd{margin-top:2px;font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats dd.up{color:var(--up)}.stats dd.down{color:var(--down)}
.curve{margin-top:16px;padding:14px;border-radius:var(--r-cell);background:var(--fill)}
.curve-head{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.curve-head span{color:var(--lime)}
.bar-track{height:10px;margin-top:10px;border-radius:3px;background:rgba(243,239,219,.08);overflow:hidden}
.bar-track span{display:block;width:0;height:100%;background:var(--lime);transition:width .6s var(--ease)}
.curve.done .bar-track span{width:100%}
.curve p{margin-top:10px;font-size:13px;color:var(--muted)}
.contract{display:flex;align-items:center;gap:12px;margin-top:16px;min-width:0}
.contract-label{flex:none;font-size:12px;color:var(--faint)}
.contract-copy{display:flex;align-items:center;gap:10px;min-width:0;height:40px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--fill);cursor:pointer;font-size:13px;transition:background-color .16s}
.contract-copy:hover{background:var(--fill-2)}
.contract-copy span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contract-copy svg{flex:none;color:var(--lime)}
.buy{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facts h3{font-size:20px;font-weight:600;margin-bottom:10px}
.facts dl{display:grid;gap:4px}
.facts dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:8px;font-size:14px}
.facts dl div:nth-child(odd){background:var(--parch-rule)}
.facts dt{color:var(--parch-muted)}
.facts dd{font-weight:600;text-align:right}
.facts dd a{color:var(--parch-accent)}
.facts-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:14px}
.facts-links a{color:var(--parch-accent);font-weight:600}
.facts-links a:hover{color:var(--parch-ink)}

/* How to get it */
.token-grid .howto{grid-column:1/-1}
.howto h3{font-size:20px;font-weight:600;margin-bottom:10px}
.howto ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px;padding-left:22px;font-size:14px;color:var(--parch-muted)}
.howto b{color:var(--parch-ink)}

/* The pour */
.pour-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:15px}
.pour-head span{font-size:13px;color:var(--faint);text-align:right}
.tiers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tier{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r-cell);background:var(--fill)}
.tier img{width:auto;height:76px;flex:none}
.tier div{display:flex;flex-direction:column;min-width:0}
.tier b{font-size:15px}
.tier .pour{font-size:30px;font-weight:600;line-height:1.1;color:var(--lime)}
.tier small{font-size:12px;color:var(--faint)}
.tier em{margin-top:4px;font-style:normal;font-size:12px;color:var(--muted)}

/* What opens */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step-n{font-size:40px;font-weight:600;line-height:1}
.step h3{display:inline;margin-left:8px;font-size:26px;font-weight:600;letter-spacing:-.01em}
.step p{margin-top:10px;font-size:14px;color:var(--parch-muted)}

/* Footer */
.foot{margin-top:clamp(72px,8vw,120px);padding:40px 0 48px;background:var(--panel)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-top img{width:120px;height:38px;object-fit:contain;image-rendering:pixelated}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--lime)}
.disclaimer{max-width:72ch;margin-top:24px;font-size:12px;line-height:1.6;color:var(--faint)}
.copyright{margin-top:12px;font-size:12px;color:var(--faint)}

.toast{position:fixed;left:50%;bottom:24px;z-index:80;padding:10px 16px;border-radius:var(--r-pill);background:var(--lime);color:var(--lime-ink);font-size:14px;font-weight:600;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 404 */
.lost{min-height:100svh;display:grid;place-items:center}
.lost-in{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;text-align:center}
.lost-in img{border-radius:20px}
.lost-in h1{font-size:44px;font-weight:500;letter-spacing:-.03em}
.lost-in p{color:var(--muted)}

/* Narrower screens */
@media(max-width:1100px){
 .token-grid{grid-template-columns:minmax(0,1fr)}
 .token-grid .howto{grid-column:auto}
 .howto ol{grid-template-columns:minmax(0,1fr)}
 .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){.bar-nav{display:none}.bar-in{grid-template-columns:auto 1fr}}
@media(max-width:640px){
 :root{--bar-h:60px}
 body{font-size:14px}
 .bar-in{height:var(--bar-h)}
 .brand img{width:96px;height:30px}
 .bar .btn{height:36px;padding:0 14px;font-size:13px}
 .hero{height:max(100svh,800px)}
 .copy{padding-top:84px}
 .copy h1{font-size:clamp(32px,9.4vw,42px)}
 .lead{font-size:13px}
 .digits b{font-size:38px}
 .digits i{font-size:30px}
 .digits small{font-size:11px}
 .acts{gap:8px}
 .acts .btn.lg{height:44px;padding:0 18px;font-size:14px}
 .chip{height:44px;font-size:13px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stats dd{font-size:18px}
 .steps{grid-template-columns:minmax(0,1fr)}
 .tiers{grid-template-columns:minmax(0,1fr)}
 .tier img{height:60px}
 .pour-head{flex-direction:column;align-items:flex-start}
 .pour-head span{text-align:left}
 .buy .btn{flex:1 1 0;min-width:0;padding:0 12px}
}
/* Under 360px the live figures step down a size, so a price like $0.00004275 shows whole instead of cut short */
@media(max-width:359px){.stats div{padding:12px 10px}.stats dd{font-size:15px}}
/* Under 300px (a phone at 200% page zoom): the title and clock scale with the screen, the figures stack, and the hero grows so the copy still clears the bench */
@media(max-width:299px){
 .hero{height:max(100svh,880px)}
 .copy h1{font-size:10.5vw}
 .digits b{font-size:12vw}
 .digits i{font-size:9vw}
 .chip span.tabular{display:none}
 .stats{grid-template-columns:minmax(0,1fr)}
 .facts dl div{flex-wrap:wrap;gap:0 16px}
 .facts dd{text-align:left}
 .panel,.parch{padding:16px 14px}
 .token-id{flex-wrap:wrap}
}
/* Short screens: the date line goes (the clock already counts to it) and the copy starts nearer the bar */
@media(max-height:860px) and (min-width:641px){.count-when{display:none}.copy{padding-top:84px}}
@media(max-width:640px) and (max-height:760px){.count-when{display:none}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .layer{transform:none!important}
 .mist,.fly{animation:none!important;opacity:0!important}
 .btn,.chev,.toast,.bar,.layer,.bar-track span,.chip,.contract-copy,.bar-nav a{transition:none}
}
/* Ultrawide, short screens: let the stage run a little below the fold so the copy clears the bench bottles */
@media(min-aspect-ratio:21/10){.hero{height:max(100svh,46vw)}}