:root{
  --paper:#FFFBF2; --cream:#FFF4E0; --ink:#1E3D2F; --ink2:#2A5240;
  --orange:#FF7A1A; --berry:#E4572E; --leaf:#57A773; --sun:#FFC53D; --pink:#F2A7BB;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{overflow-x:clip}
body{margin:0; background:var(--cream); color:var(--ink); font-family:"Nunito",system-ui,sans-serif; font-size:16px; line-height:1.55}
::selection{background:var(--sun); color:var(--ink)}
a{color:inherit}
.display{font-family:"Baloo 2","Nunito",sans-serif; font-weight:800; line-height:0.98; letter-spacing:-0.01em}
.label{font-family:"Space Mono",ui-monospace,monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase}
.wrap{max-width:1240px; margin:0 auto; padding:0 16px}
@media(min-width:768px){.wrap{padding:0 28px}}
header.site{position:sticky; top:0; z-index:50; background:rgba(255,244,224,.92); backdrop-filter:blur(10px); border-bottom:3px solid var(--ink)}
.hrow{display:flex; align-items:center; justify-content:space-between; gap:14px; height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand .mark{width:38px; height:38px; border:3px solid var(--ink); border-radius:12px; background:var(--sun); display:grid; place-items:center; font-size:20px; box-shadow:3px 3px 0 var(--ink)}
.brand .display{font-size:24px}
.brand .display b{color:var(--berry)}
nav.links{display:flex; gap:20px; align-items:center}
nav.links a{text-decoration:none; font-weight:800; font-size:14px}
nav.links a:hover{color:var(--berry)}
nav.links a.hideS{display:none}
@media(min-width:820px){nav.links a.hideS{display:inline}}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:16px; padding:.8rem 1.5rem; border:3px solid var(--ink); border-radius:999px; background:var(--paper); color:var(--ink); cursor:pointer; box-shadow:4px 4px 0 var(--ink); transition:transform .15s, box-shadow .15s; text-decoration:none}
.btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.btn-orange{background:var(--orange); color:#fff}
.btn-sun{background:var(--sun)}
.btn-leaf{background:var(--leaf); color:#fff}
.btn:disabled{opacity:.55; cursor:wait}
.strip{background:var(--ink); color:var(--cream); overflow:hidden; white-space:nowrap; border-bottom:3px solid var(--ink)}
.strip .track{display:inline-flex; gap:0; animation:marq 30s linear infinite; padding:8px 0}
.strip span{font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.22em; padding:0 18px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero{padding:52px 0 10px; text-align:center}
.hero h1{font-size:17.5vw; margin:10px 0 0; text-transform:uppercase}
@media(min-width:900px){.hero h1{font-size:9.2rem}}
.hero h1 .b16{color:var(--berry)}
.hero .sub{max-width:640px; margin:18px auto 0; font-size:18px; font-weight:600; color:var(--ink2)}
.hero-beasts{display:flex; justify-content:center; gap:10px; margin-top:30px; flex-wrap:wrap}
.hero-beasts .sticker{width:104px; height:104px}
@media(min-width:768px){.hero-beasts .sticker{width:132px; height:132px}}
.sticker{border:3px solid var(--ink); border-radius:22px; overflow:hidden; background:var(--paper); box-shadow:5px 5px 0 var(--ink)}
.sticker svg{display:block; width:100%; height:100%}
.sticker img{display:block; width:100%; height:100%; object-fit:cover}
.scard img{display:block; width:100%; aspect-ratio:1; object-fit:cover}
.sticker.tilt-l{transform:rotate(-3.5deg)}
.sticker.tilt-r{transform:rotate(3deg)}
.board{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:38px auto 0; max-width:900px}
@media(min-width:820px){.board{grid-template-columns:repeat(4,1fr)}}
.board .cell{background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:16px 12px; box-shadow:4px 4px 0 var(--ink)}
.board .n{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:26px}
.board .l{margin-top:4px; color:var(--ink2)}
section.blk{padding:56px 0 8px}
.sec-head{text-align:center; max-width:680px; margin:0 auto}
.sec-head h2{font-size:42px; margin:10px 0 0; text-transform:uppercase}
@media(min-width:768px){.sec-head h2{font-size:56px}}
.sec-head p{color:var(--ink2); font-weight:600; margin-top:12px}
.lanes{display:grid; gap:14px; margin-top:30px}
@media(min-width:860px){.lanes{grid-template-columns:1fr 1fr}}
.lane{background:var(--paper); border:3px solid var(--ink); border-radius:24px; padding:26px 24px; box-shadow:6px 6px 0 var(--ink); position:relative}
.lane .tag{position:absolute; top:-15px; left:22px; background:var(--sun); border:3px solid var(--ink); border-radius:999px; padding:3px 14px; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em}
.lane.dark{background:var(--ink); color:var(--cream)}
.lane.dark .mut{color:#BCD3C6}
.lane h3{font-size:28px; margin:8px 0 0}
.lane ul{margin:14px 0 0; padding-left:20px; font-weight:600}
.lane li{margin:7px 0}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.scard{background:var(--paper); border:3px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:5px 5px 0 var(--ink); transition:transform .2s}
.scard:hover{transform:rotate(-1.2deg) scale(1.02)}
.scard .nm{padding:12px 14px; display:flex; justify-content:space-between; align-items:center}
.scard .nm .display{font-size:19px}
.scard .no{font-family:"Space Mono",monospace; font-size:11px; background:var(--cream); border:2px solid var(--ink); border-radius:999px; padding:2px 9px}
.scard.apex{border-color:var(--berry); box-shadow:5px 5px 0 var(--berry)}
.token-card{background:var(--ink); color:var(--cream); border:3px solid var(--ink); border-radius:26px; padding:30px 24px; box-shadow:7px 7px 0 var(--berry); margin-top:30px; text-align:center}
.token-card h3{font-size:38px; margin:8px 0 0}
.token-card .mut{color:#BCD3C6; font-weight:600}
.faq{max-width:820px; margin:28px auto 0}
.faq details{background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:16px 20px; margin-bottom:12px; box-shadow:4px 4px 0 var(--ink)}
.faq summary{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:18px; cursor:pointer}
.faq p{margin:10px 0 2px; font-weight:600; color:var(--ink2)}
footer.site{margin-top:64px; border-top:3px solid var(--ink); background:var(--paper)}
.frow{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; padding:26px 0 36px}
@media(max-width:640px){.frow{flex-direction:column; align-items:center; text-align:center} .frow .label{flex-wrap:wrap; justify-content:center} footer.site .label a{padding:10px 4px}}
.mixer{display:grid; gap:18px; margin-top:28px}
@media(min-width:900px){.mixer{grid-template-columns:420px 1fr}}
.stage{background:var(--paper); border:3px solid var(--ink); border-radius:26px; padding:18px; box-shadow:6px 6px 0 var(--ink)}
.stage .sticker{width:100%; height:auto; aspect-ratio:1}
.controls{background:var(--paper); border:3px solid var(--ink); border-radius:26px; padding:22px; box-shadow:6px 6px 0 var(--ink)}
.ctl{margin-bottom:18px}
.ctl .label{display:block; margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:"Nunito",sans-serif; font-weight:800; font-size:13px; padding:7px 13px; border:2.5px solid var(--ink); border-radius:999px; background:var(--cream); cursor:pointer}
.chip.on{background:var(--sun)}
.swatch{width:34px; height:34px; border-radius:50%; border:2.5px solid var(--ink); cursor:pointer; padding:0}
.swatch.on{outline:3px solid var(--berry); outline-offset:2px}
.traits-out{font-family:"Space Mono",monospace; font-size:12.5px; background:var(--cream); border:2.5px dashed var(--ink); border-radius:14px; padding:12px 14px; margin-top:6px; line-height:1.9}
#toast{position:fixed; left:12px; right:12px; bottom:12px; z-index:80; background:var(--ink); color:var(--cream); border-radius:16px; padding:14px 18px; font-weight:700; opacity:0; pointer-events:none; transform:translateY(8px); transition:all .3s; text-align:center}
#toast.show{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}}