:root{--bg:#050f21;--bg2:#0a1830;--bg3:#0f2242;--line:#1a2a46;--ink:#f6ead2;--dim:#8794ad;--soft:#c6cbd8;--acc:#ff6a1f;--teal:#34d1bf;--sand:#e7c58f}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}html,body{overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:16px 'Bricolage Grotesque',system-ui,sans-serif;position:relative;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.m,small,code{font-family:'JetBrains Mono',monospace}
.wrap{max-width:1400px;margin:0 auto;padding-left:40px;padding-right:40px}
#bubs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bub{position:absolute;border:1.5px solid rgba(52,209,191,.3);border-radius:50%;animation:rise linear infinite}
@keyframes rise{from{transform:translateY(0);opacity:0}10%{opacity:1}to{transform:translateY(-480px);opacity:0}}
/* header */
.hd{position:relative;z-index:3;display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font:800 24px 'Bricolage Grotesque';letter-spacing:-.02em;text-decoration:none}
.face{position:relative;width:46px;height:46px;display:block}.face img{width:100%;height:100%;display:block}
.eye{position:absolute;width:9.4%;height:9.4%;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.eye.l{left:64.9%;top:54.2%}.eye.r{left:80.3%;top:54.2%}
.eye b{position:absolute;left:50%;top:50%;width:62%;height:62%;margin:-31% 0 0 -31%;border-radius:50%;background:#111;transition:transform .08s}
nav{display:flex;gap:22px;font:500 15px 'Bricolage Grotesque';color:var(--dim)}nav a{text-decoration:none}nav a:hover{color:var(--ink)}
.dnd{margin-left:auto;display:flex;align-items:center;gap:8px;font:12px 'JetBrains Mono';background:#0c1d38;border:1px solid var(--line);border-radius:30px;padding:7px 12px;white-space:nowrap}
.dnd i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(52,209,191,.15)}
.dnd.red i{background:var(--acc);box-shadow:0 0 0 4px rgba(255,106,31,.2)}
.cta{font:700 15px 'Bricolage Grotesque';background:var(--acc);color:#1a0a02;border-radius:30px;padding:10px 18px;text-decoration:none;white-space:nowrap}
.tick{position:relative;z-index:2;overflow:hidden;white-space:nowrap;font:12px 'JetBrains Mono';color:var(--dim);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:9px 0}
.tick .run{display:inline-flex;gap:34px;padding-left:40px;animation:run 60s linear infinite}
.tick b{color:var(--ink);font-weight:500}.tick .o{color:var(--acc)}.tick .t{color:var(--teal)}
@keyframes run{to{transform:translateX(-50%)}}
/* hero */
.hero{position:relative;display:grid;grid-template-columns:560px minmax(0,1fr);gap:20px;padding-top:34px;padding-bottom:30px}
.left{position:relative;z-index:2}
.eb{display:inline-flex;align-items:center;gap:8px;font:12px 'JetBrains Mono';color:var(--teal);border:1px dashed rgba(52,209,191,.4);border-radius:6px;padding:5px 9px}
h1{font:800 82px/.92 'Bricolage Grotesque';letter-spacing:-.045em;margin-top:16px}
.o{color:var(--acc)}
.scrib{position:relative;display:inline-block}.scrib svg{position:absolute;left:-6px;bottom:-12px;width:105%;height:22px}
.sub{margin-top:16px;font-size:19px;line-height:1.45;color:var(--soft);max-width:520px}
/* the app */
.app{margin-top:22px;background:var(--bg2);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.ah{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font:12px 'JetBrains Mono';color:var(--dim)}
.ah .sh{display:flex;align-items:center;gap:6px;background:var(--bg3);border-radius:20px;padding:4px 10px 4px 4px;color:var(--ink);font:12px 'JetBrains Mono'}
.ah .sh img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.ah .r{margin-left:auto;white-space:nowrap}
.chat{padding:14px;display:flex;flex-direction:column;gap:10px;height:250px;overflow-y:auto;scroll-behavior:smooth}
.u{align-self:flex-end;background:#13284c;border-radius:14px 14px 4px 14px;padding:9px 12px;max-width:82%;white-space:pre-wrap;word-break:break-word}
.a{display:flex;gap:9px;max-width:94%}.a>img{width:28px;height:28px;flex:none}
.a>div{background:#0d1f3c;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:9px 12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.a small{display:block;font:11px 'JetBrains Mono';color:var(--teal);margin-top:5px;white-space:normal}
.a .think{display:block;font:11px 'JetBrains Mono';color:var(--dim);margin-bottom:4px}
.typing{display:flex;align-items:center;gap:8px;font:12px 'JetBrains Mono';color:var(--dim);padding-left:37px}
.typing span{display:inline-flex;gap:3px}.typing span i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:clack .9s infinite}
.typing span i:nth-child(2){animation-delay:.15s}.typing span i:nth-child(3){animation-delay:.3s}
@keyframes clack{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
.wake{padding:16px 16px 14px;border-top:1px solid var(--line)}
.wk-top b{display:block;font:800 20px 'Bricolage Grotesque'}.wk-top span{display:block;color:var(--soft);font-size:14px;margin-top:4px;line-height:1.45}
.sand{position:relative;height:42px;margin:14px 0 10px;border-radius:21px;background:repeating-linear-gradient(90deg,rgba(231,197,143,.25) 0 6px,transparent 6px 14px)}
.sand .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:21px;background:linear-gradient(90deg,rgba(255,106,31,.25),rgba(255,106,31,.5));transition:width .3s}
.sand .walker{position:absolute;left:0;top:-4px;width:46px;transition:left .3s}
.sand .walker.walking{animation:waddle .5s infinite}
@keyframes waddle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.sand .home{position:absolute;right:0;top:-6px;width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.wk-row{display:flex;align-items:center;gap:12px}
.go{background:var(--acc);color:#1a0a02;font:700 15px 'Bricolage Grotesque';border-radius:12px;padding:11px 18px}
.go[disabled]{opacity:.6;cursor:wait}
.wk-row small{color:var(--dim);font-size:12px}
.in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.in textarea{flex:1;resize:none;background:#081429;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);font:15px 'Bricolage Grotesque';outline:none;max-height:120px}
.in textarea:focus{border-color:var(--teal)}
.in button{background:var(--acc);color:#1a0a02;font-weight:700;border-radius:12px;padding:0 16px}
.in #stop{background:var(--bg3);color:var(--ink)}
.meters{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.meters div{padding:10px 14px;border-right:1px solid var(--line)}.meters div:last-child{border:0}
.meters small{font:10.5px 'JetBrains Mono';color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.meters b{display:block;font:800 24px 'Bricolage Grotesque'}.meters .z{color:var(--teal)}.meters .bad{color:var(--acc)}
.tools{margin-top:8px;font:12px 'JetBrains Mono';color:var(--dim)}.tools button{text-decoration:underline;color:var(--soft);font:12px 'JetBrains Mono'}
/* scene */
.scene{position:relative;display:flex;align-items:center}
.art{position:relative;width:100%}
.art img{width:100%;display:block;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 62%,transparent 100%)}
.pin{position:absolute;display:flex;align-items:center;gap:8px;font:12px 'JetBrains Mono';white-space:nowrap}
.pin i{width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px rgba(255,106,31,.2),0 0 0 12px rgba(255,106,31,.08);animation:pulse 2.4s infinite}
.pin span{background:rgba(5,15,33,.88);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.pin span b{color:var(--acc);font-weight:500}
.pin.t i{background:var(--teal);box-shadow:0 0 0 6px rgba(52,209,191,.2),0 0 0 12px rgba(52,209,191,.08)}.pin.t span b{color:var(--teal)}
.pin.rv{flex-direction:row-reverse}
@keyframes pulse{50%{transform:scale(1.25)}}
.sticky{position:absolute;right:-6px;bottom:-14px;width:180px;background:#ffe27a;color:#3a2a00;font:15px/1.3 'Bricolage Grotesque';padding:12px 12px 16px;transform:rotate(4deg);box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.sticky b{display:block;font:11px 'JetBrains Mono';margin-bottom:4px}
/* sections */
section.s{padding-top:80px}
.sh2{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.sh2 h2{font:800 54px/1 'Bricolage Grotesque';letter-spacing:-.04em}
.sh2 p{max-width:440px;color:var(--dim);font-size:16px;text-align:right}
/* shell shop */
.shop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.shell{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:12px 12px 14px;position:relative;text-align:left;transition:transform .2s,border-color .2s;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--ink)}
.shell:hover{transform:translateY(-4px);border-color:#2b4170}
.shell img{width:100%;border-radius:12px;display:block;aspect-ratio:1;object-fit:cover}
.shell .nm{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px}
.shell .nm b{font:800 22px 'Bricolage Grotesque'}.shell .nm small{font:11px 'JetBrains Mono';color:var(--dim);white-space:nowrap}
.shell .tg{font-size:13px;color:var(--soft);margin-top:3px}
.shell .sp{display:flex;gap:6px;margin-top:auto;padding-top:10px;flex-wrap:wrap}.shell .sp span{font:11px 'JetBrains Mono';background:var(--bg3);border-radius:6px;padding:3px 7px;color:var(--soft)}
.shell .lk{position:absolute;z-index:2;top:20px;left:20px;max-width:calc(100% - 40px);white-space:nowrap;font:11px 'JetBrains Mono';background:rgba(5,15,33,.85);border:1px solid var(--acc);color:var(--acc);border-radius:20px;padding:4px 9px}
.shell .lk.free{border-color:var(--teal);color:var(--teal)}
.shell.cur{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.shell:focus{outline:none}.shell:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shell.locked img{filter:saturate(.6) brightness(.8)}
.sandpath{margin-top:16px;height:16px;background:repeating-linear-gradient(90deg,rgba(231,197,143,.35) 0 6px,transparent 6px 16px);border-radius:8px;position:relative}
.sandpath .crab{position:absolute;top:-28px;width:44px;transition:left .8s cubic-bezier(.5,0,.3,1)}
.note{margin-top:14px;font:12px 'JetBrains Mono';color:var(--dim)}
/* plug + outbox */
.plugbox{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:24px;position:relative}
.card h3{font:800 30px 'Bricolage Grotesque';letter-spacing:-.03em}
.card p{color:var(--soft);margin-top:8px;line-height:1.5}
.socket{margin-top:20px;width:100%;max-width:520px;touch-action:none;user-select:none}
.plugstate{margin-top:6px;font:12px 'JetBrains Mono';color:var(--dim)}.plugstate.on{color:var(--acc)}
.ob{margin-top:18px;border:2px dashed var(--line);border-radius:14px;min-height:150px;display:grid;place-items:center;text-align:center;color:var(--dim);font:13px 'JetBrains Mono';padding:14px}
.ob b{display:block;font:800 64px 'Bricolage Grotesque';color:var(--teal);line-height:1}
.ob b.bad{color:var(--acc)}
.ob ul{list-style:none;padding:0;margin-top:10px;text-align:left;font-size:11px;max-height:120px;overflow:auto}
/* token */
.tok{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
.tok .big{font:800 46px/1 'Bricolage Grotesque';letter-spacing:-.03em}
.tiers{list-style:none;padding:0;margin-top:16px;display:grid;gap:10px}
.tiers li{display:flex;gap:12px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.tiers li b{font:700 13px 'JetBrains Mono';color:var(--acc);width:64px;flex:none}
.burn{background:linear-gradient(160deg,#1a0e08,#0a1830);border-color:#3a2216}
.ca{margin-top:14px;display:flex;align-items:center;gap:10px;font:13px 'JetBrains Mono';background:#081429;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;color:var(--dim)}
.ca b{color:var(--ink);font-weight:500;white-space:nowrap}.ca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ca button{margin-left:auto;font:11px 'JetBrains Mono';border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.bag{display:flex;gap:8px;margin-top:10px}
.bag input{flex:1;min-width:0;background:#081429;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font:12px 'JetBrains Mono';outline:none}
.bag button{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:0 14px;font:600 13px 'Bricolage Grotesque';white-space:nowrap}
.bag .verify{flex:1;background:var(--acc);border-color:var(--acc);color:#1a0a02;padding:12px 14px;font:700 15px 'Bricolage Grotesque';cursor:pointer}
.openw{display:block;margin-top:8px;font-size:13px;color:var(--teal)}
.bagmsg{display:block;margin-top:10px;color:var(--soft);font-size:12px;min-height:16px}
/* faq */
.faq details{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-top:10px}
.faq summary{font:700 18px 'Bricolage Grotesque';cursor:pointer;list-style:none}.faq summary::before{content:'🦀 ';}
.faq p{color:var(--soft);margin-top:8px;line-height:1.55}
footer.ft{margin-top:90px;border-top:1px dashed var(--line);padding-top:26px;padding-bottom:40px;display:flex;justify-content:space-between;gap:20px;font:12px 'JetBrains Mono';color:var(--dim);position:relative;flex-wrap:wrap}
footer b{color:var(--teal);font-weight:500}
.walk{position:absolute;top:-34px;left:0;width:56px;animation:stroll 26s linear infinite}
@keyframes stroll{0%{left:2%;transform:scaleX(1)}48%{left:90%;transform:scaleX(1)}50%{left:90%;transform:scaleX(-1)}98%{left:2%;transform:scaleX(-1)}100%{left:2%;transform:scaleX(1)}}
.steps{position:absolute;top:-10px;left:6%;color:#2b3c5c;letter-spacing:6px}
/* shell menu + toast */
.menu{position:fixed;z-index:40;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:6px;min-width:260px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px;border-radius:10px;font:13px 'JetBrains Mono'}
.menu button:hover{background:var(--bg3)}.menu img{width:30px;height:30px;border-radius:8px}.menu em{margin-left:auto;font-style:normal;color:var(--dim);font-size:11px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--line);color:var(--ink);padding:12px 18px;border-radius:12px;font:13px 'JetBrains Mono';z-index:50}
@media (max-width:1100px){.hero{grid-template-columns:minmax(0,1fr)}.scene{max-width:720px;margin:10px auto 0}.shop{grid-template-columns:repeat(3,minmax(0,1fr))}.plugbox,.tok{grid-template-columns:1fr}nav{display:none}}
@media (max-width:640px){.wrap{padding-left:16px;padding-right:16px}h1{font-size:50px}.sub{font-size:16px}.dnd{display:none}.cta{margin-left:auto;padding:9px 14px;font-size:14px}
.shop{grid-template-columns:repeat(2,minmax(0,1fr))}.sh2{flex-direction:column;align-items:flex-start}.sh2 p{text-align:left}.sh2 h2{font-size:38px}.tok .big{font-size:34px}
.pin span{font-size:10px;padding:4px 6px}.pin.rv{display:none}.pin.fl{flex-direction:row-reverse;transform:translateX(calc(-100% + 14px))}.pin.fl[style*="57%"]{left:68%!important}.sticky{display:none}.chat{height:220px}}

/* the pet */
.pet{position:fixed;z-index:30;bottom:18px;left:0;width:92px;user-select:none;touch-action:none;cursor:grab}
.pet.drag{cursor:grabbing}
.pet .body{position:relative;width:100%;aspect-ratio:1;transform-origin:50% 90%;animation:bob 2.6s ease-in-out infinite}
.pet .body img{width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.pet .body.flip{scale:-1 1}
.pet .eye{position:absolute;width:9.4%;height:9.4%;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:height .15s}
.pet .eye.l{left:64.9%;top:54.2%}.pet .eye.r{left:80.3%;top:54.2%}
.pet .eye b{position:absolute;left:50%;top:50%;width:62%;height:62%;margin:-31% 0 0 -31%;border-radius:50%;background:#111}
.pet .shadow{position:absolute;left:18%;right:18%;bottom:-6px;height:8px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(3px);z-index:-1}
.pet.walking .body{animation:waddle .35s infinite}
.pet.busy .body{animation:waddle .18s infinite}
.pet .body.hop{animation:hop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes bob{50%{transform:translateY(-3px) scaleY(1.02)}}
@keyframes hop{0%{transform:translateY(0) scaleY(.85)}40%{transform:translateY(-34px) scaleY(1.08)}100%{transform:translateY(0)}}
.pet.sleep .eye{height:1.6%}.pet.sleep .eye b{display:none}.pet.sleep .body{animation:bob 4s ease-in-out infinite}
.pet .zz{position:absolute;right:-4px;top:-6px;font:700 15px 'JetBrains Mono';color:var(--teal);opacity:0;pointer-events:none}
.pet.sleep .zz{opacity:1;animation:zz 2.4s infinite}.pet .zz i{font-style:normal;margin-left:2px;font-size:11px}
@keyframes zz{50%{transform:translate(4px,-6px)}}
.pet.hide .body{transform:scale(.72) translateY(14px);transition:transform .25s}.pet.hide .eye{opacity:0}
.pet .say{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,6px);background:var(--ink);color:#1a1205;font:600 13px 'Bricolage Grotesque';padding:8px 11px;border-radius:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.pet .say::after{content:'';position:absolute;left:50%;top:100%;border:7px solid transparent;border-top-color:var(--ink);margin-left:-7px}
.pet .say.on{opacity:1;transform:translate(-50%,0)}
.pet .heart{position:absolute;bottom:60%;color:var(--acc);font-size:16px;pointer-events:none;animation:heart 1.4s ease-out forwards}
@keyframes heart{to{transform:translateY(-70px) scale(1.4);opacity:0}}
.crabspot{position:absolute;left:36%;top:44%;width:26%;height:22%;border-radius:40%;cursor:pointer;z-index:2}
.crabspot:hover{box-shadow:0 0 0 2px rgba(255,106,31,.35) inset}
.art.wig img{animation:wig .5s}
@keyframes wig{20%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}80%{transform:rotate(-.4deg)}}
@media (max-width:640px){.pet{width:68px;bottom:12px}.pet .say{font-size:12px;white-space:normal;width:170px;text-align:center}}

.shell .sp .st{background:rgba(52,209,191,.15);color:var(--teal)}.shell .sp .out{background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer}.shell .sp .out:hover{color:var(--acc);border-color:var(--acc)}
.pet.tuck{transform:translateY(calc(100% + 30px));transition:transform .3s;pointer-events:none}.pet{transition:transform .3s}

/* coin bar */
.coin{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 16px;background:var(--bg2);border-bottom:1px solid var(--line);font:13px 'JetBrains Mono';color:var(--soft)}
.coin .tk{font:800 16px 'Bricolage Grotesque';color:var(--acc)}
.coin .addr{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.coin button,.coin a{flex:none;font:700 13px 'Bricolage Grotesque';border-radius:20px;padding:6px 14px;text-decoration:none;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink)}
.coin button:hover,.coin a:hover{border-color:var(--teal)}
.coin a.buy{background:var(--acc);border-color:var(--acc);color:#1a0a02}
.coin[data-live="1"]{background:#10203c;border-bottom-color:var(--acc)}
@media (max-width:640px){.coin{gap:8px;padding:8px 12px;font-size:12px;justify-content:flex-start}.coin .chart{display:none}.coin button,.coin a{padding:6px 10px}}
.tok>*,.tok .card{min-width:0}.ca span{min-width:0;flex:1}