:root{
  --bg:#fff6e6; --paper:#fffdf6; --ink:#2c221d; --dim:#6f6055; --faint:#a59788;
  --sun:#ffb81c; --orange:#ff7a2f; --mint:#5fd4a0; --sky:#7cc6ff; --red:#e5484d; --card:#ffffff;
  --display:'Fredoka','M PLUS Rounded 1c',system-ui,sans-serif; --body:'M PLUS Rounded 1c','Fredoka',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --b:3px solid var(--ink); --sh:5px 5px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font:500 17px/1.6 var(--body);background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%232c221d' stroke-opacity='.07' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='38' cy='44' r='16'/%3E%3Cpath d='M30 44h16M38 36v16'/%3E%3Cpath d='M150 40l26 26M160 30c14-4 28 2 34 14M150 40l-10 10'/%3E%3Ccircle cx='120' cy='160' r='16'/%3E%3Cpath d='M112 160h16'/%3E%3Cpath d='M30 170l24 24M40 160c14-4 26 2 32 14'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 500px at 90% -5%, rgba(255,184,28,.28), transparent 60%),
    radial-gradient(800px 500px at -10% 40%, rgba(95,212,160,.2), transparent 60%);
  background-attachment:fixed;
}
@media (max-width:760px){body{background-attachment:scroll}}
@media (pointer:fine){
  body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M6 26L19 13' stroke='%232c221d' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M6 26L19 13' stroke='%23ffd9a0' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c8-3 15 2 17 10l-5-2-3 3-3-3-4 1 1-4z' fill='%23ffb81c' stroke='%232c221d' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 28, auto}
  a,button,.tab,label,.chip,summary,input[type=range]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M6 26L19 13' stroke='%232c221d' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M6 26L19 13' stroke='%23ffd9a0' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c8-3 15 2 17 10l-5-2-3 3-3-3-4 1 1-4z' fill='%23ff7a2f' stroke='%232c221d' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 28, pointer}
}
.ripple{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border:3px solid var(--orange);border-radius:50%;pointer-events:none;animation:rip .65s ease-out forwards;z-index:99}
@keyframes rip{to{transform:scale(6);opacity:0;border-color:var(--sun)}}
a{color:var(--orange);text-decoration:none;font-weight:700} a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-.01em}
.mono{font-family:var(--mono)}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,246,230,.92);backdrop-filter:blur(8px);border-bottom:var(--b)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font:700 24px var(--display);color:var(--ink)!important}
.logo:hover{text-decoration:none}
.logo svg{width:38px;height:38px}
.links{display:flex;gap:6px;margin-left:auto}
.links a{color:var(--ink);padding:7px 14px;border-radius:999px;border:3px solid transparent;font:600 16px var(--display)}
.links a:hover{text-decoration:none;border-color:var(--ink);background:var(--paper)}
.links a.on{border-color:var(--ink);background:var(--sun)}
@media (max-width:760px){.links{display:none}.nav .btn{margin-left:auto}}
.launching{background:var(--ink);color:#ffe9b8;text-align:center;padding:9px 0;font:600 14px var(--display)}
.launching b{color:var(--sun)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--b);background:var(--paper);color:var(--ink);border-radius:999px;padding:12px 22px;font:700 17px var(--display);box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{text-decoration:none;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--sun)} .btn.orange{background:var(--orange);color:#fff}
.btn.mint{background:var(--mint)} .btn.small{padding:7px 16px;font-size:15px}
.btn.on{background:var(--mint)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* hero */
.hero{padding:56px 0 30px}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}.mascot{max-width:320px;margin:0 auto}}
.kicker{display:inline-block;background:var(--mint);border:var(--b);border-radius:999px;padding:4px 14px;font:700 13px var(--display);letter-spacing:.08em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink)}
.hero h1{font-size:clamp(44px,7.4vw,86px);margin:18px 0 14px}
.hero h1 em{font-style:normal;background:var(--sun);padding:0 12px;border:var(--b);border-radius:16px;display:inline-block;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink)}
.hero p.lead{font-size:19px;color:var(--dim);max-width:560px;margin:0 0 24px;font-weight:600}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.mascot svg{width:100%;height:auto;filter:drop-shadow(6px 6px 0 var(--ink));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(1.2deg)}}
.pick{transform-origin:70% 80%;animation:swing 1.1s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}}

/* marquee */
.marquee{border-top:var(--b);border-bottom:var(--b);background:var(--sun);overflow:hidden;white-space:nowrap;margin-top:30px}
.marquee div{display:inline-block;padding:11px 0;font:700 17px var(--display);animation:mq 38s linear infinite}
.marquee span{margin:0 22px} .marquee i{font-style:normal;color:var(--orange)}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections / cards */
section{padding:60px 0 6px}
section h2{font-size:clamp(30px,4.4vw,48px);margin-bottom:8px}
.lead2{color:var(--dim);font-weight:600;max-width:720px;margin:0 0 26px}
.card{background:var(--card);border:var(--b);border-radius:22px;padding:22px;box-shadow:var(--sh)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}}
.stat{background:var(--paper);border:var(--b);border-radius:18px;padding:16px 18px;box-shadow:4px 4px 0 var(--ink)}
.stat .k{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.stat .v{font:700 clamp(22px,3vw,32px) var(--display);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .s{font:600 13px var(--body);color:var(--faint)}
.sk{display:inline-block;min-width:80px;height:.95em;border-radius:8px;background:linear-gradient(90deg,#f0e2c8,#fff3da,#f0e2c8);background-size:200% 100%;animation:sh 1.1s linear infinite;color:transparent!important;vertical-align:middle}
@keyframes sh{to{background-position:-200% 0}}
.step .n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--sun);border:var(--b);font:700 20px var(--display);box-shadow:3px 3px 0 var(--ink)}
.step h3{font-size:24px;margin:14px 0 6px}
.step p{margin:0;color:var(--dim);font-weight:600}
.step code,.codeline{font:600 13px var(--mono);background:#fff3da;border:2px solid var(--ink);border-radius:8px;padding:1px 6px;word-break:break-all}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rules li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.rules li:before{content:"✔";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint);border:3px solid var(--ink);font-size:14px;margin-top:1px}
.rules li.warn:before{content:"!";background:var(--sun)}
.rules li b{font-weight:800}

/* forms */
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;font:700 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.field input[type=number],.field input[type=text]{width:100%;background:var(--paper);border:var(--b);border-radius:14px;padding:11px 14px;font:700 18px var(--display);color:var(--ink);outline:none}
.field input:focus{box-shadow:0 0 0 4px rgba(255,184,28,.55)}
input[type=range]{width:100%;accent-color:var(--orange);height:30px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:3px solid var(--ink);background:var(--paper);border-radius:999px;padding:3px 12px;font:700 13px var(--display)}
.chip:hover{background:var(--sun)}
.quote{border-top:3px dashed var(--ink);margin-top:16px;padding-top:14px;display:grid;gap:6px;font-weight:700}
.quote div{display:flex;justify-content:space-between;gap:12px}
.quote span:first-child{color:var(--dim);font-weight:600}
.quote .big{font:700 24px var(--display)}
.pos{color:#1f9d63}.neg{color:var(--red)}
.pill{display:inline-block;border:3px solid var(--ink);border-radius:999px;padding:2px 12px;font:700 13px var(--display);background:var(--paper)}
.pill.ok{background:var(--mint)} .pill.bad{background:#ffb3b5} .pill.warn{background:var(--sun)}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{flex:1;text-align:center;padding:10px;border:var(--b);border-radius:999px;background:var(--paper);font:700 17px var(--display);box-shadow:3px 3px 0 var(--ink)}
.tab.on{background:var(--sun)} .tab.sell.on{background:var(--orange);color:#fff}
.warnbox{border:3px solid var(--ink);background:#fff0c9;border-radius:16px;padding:12px 16px;font-weight:700;font-size:15px}
.minebox .big{font:700 40px var(--display)}
.bar{height:22px;border:var(--b);border-radius:999px;background:#fff;overflow:hidden;position:relative}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(45deg,var(--sun),var(--sun) 10px,#ffc94d 10px,#ffc94d 20px);transition:width .8s}
table{width:100%;border-collapse:collapse;font-weight:600;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:3px solid var(--ink)}
th{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
tr:last-child td{border-bottom:0} td.n,th.n{text-align:right}
.tablewrap{overflow-x:auto;border:var(--b);border-radius:18px;background:var(--card);box-shadow:var(--sh)}
.cmd{background:#2c221d;color:#ffe9b8;border:var(--b);border-radius:16px;margin:12px 0 0;position:relative}
.cmd .hd{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:2px solid #5b4a3f;font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#ffcf70}
.cmd pre{margin:0;padding:14px 16px;font:13px/1.65 var(--mono);white-space:pre-wrap;word-break:break-all}
.copy{background:none;border:2px solid #ffcf70;color:#ffcf70;border-radius:999px;padding:1px 12px;font:700 12px var(--display)}
.copy.done{background:#5fd4a0;border-color:#5fd4a0;color:var(--ink)}
details{border:var(--b);border-radius:16px;background:var(--card);padding:14px 18px;margin-bottom:12px;box-shadow:4px 4px 0 var(--ink)}
summary{font:700 20px var(--display);list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::-webkit-details-marker{display:none} summary:after{content:"+";font-size:26px;line-height:1}
details[open] summary:after{content:"–"}
details p{margin:10px 0 0;color:var(--dim);font-weight:600}
#toasts{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:min(400px,calc(100vw - 32px))}
.toast{background:var(--paper);border:var(--b);border-radius:16px;padding:12px 16px;font:700 15px/1.4 var(--body);box-shadow:4px 4px 0 var(--ink);animation:tin .3s ease-out}
.toast.bad{background:#ffd9da}
.toast.out{animation:tout .4s ease-in forwards}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateX(-20px)}}
footer{border-top:var(--b);margin-top:80px;padding:28px 0 56px;background:var(--paper)}
.frow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.flinks{display:flex;gap:18px;flex-wrap:wrap}
.fine{color:var(--dim);font-size:13px;font-weight:600;max-width:760px}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.js .reveal.in{opacity:1;transform:none}
.dim{color:var(--dim)} .center{text-align:center}
[hidden]{display:none!important}
/* wallet picker */
.wmodal{position:fixed;inset:0;z-index:200;background:rgba(44,34,29,.55);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .15s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.wcard{background:#fffaf0;border:var(--b);border-radius:22px;box-shadow:var(--sh);padding:22px;width:min(380px,100%)}
.wcard h3{margin:0 0 4px;font:700 26px var(--display)} .wcard p{margin:0 0 14px;color:var(--dim);font-weight:600}
.wlist{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.wopt{display:flex;align-items:center;gap:12px;text-align:left;border:3px solid var(--ink);border-radius:14px;background:var(--paper);padding:10px 14px;font:700 17px var(--display);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.wopt:hover,.wopt:focus{background:var(--sun);outline:none} .wopt img{width:30px;height:30px;border-radius:8px;flex:none}
.wopt .wdot{width:30px;height:30px;border-radius:8px;background:var(--mint);border:2px solid var(--ink);flex:none}
.wopt b{flex:1} .wopt i{font:700 11px var(--display);border:2px solid var(--ink);border-radius:999px;padding:0 8px;background:var(--mint);font-style:normal}