/* Teddy Ships. Design read: consumer shop, soft playful-premium, mascot-led.
   Dials: variance 6, motion 5, density 3.
   Shape lock: pill = every button, chip, nav, tag. Surface = 28px shell / 22px core (double bezel).
   Tile = 16px for size pickers, inputs, small inner blocks. Nothing else. */
@font-face{font-family:Outfit;font-weight:400;src:url(/assets/fonts/outfit-400-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:Outfit;font-weight:500;src:url(/assets/fonts/outfit-500-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:Outfit;font-weight:600;src:url(/assets/fonts/outfit-600-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:Fredoka;font-weight:300 700;src:url(/assets/fonts/fredoka-var-latin.woff2) format("woff2");font-display:swap}

:root{
  --bg:#FBF7F4; --bg2:#F3ECE7; --surface:#FFFFFF; --shell:rgba(60,30,40,.04); --hair:rgba(60,30,40,.12); --tint:#F6E9DC;
  --ink:#251F2E; --ink2:#433B4A; --muted:#675E6E;
  --accent:#D9822B; --accent-ink:#251F2E; --accent-text:#A45716; --accent-soft:rgba(217,130,43,.12);
    --hi:inset 0 1px 0 rgba(255,255,255,.9);
  --amb:0 1px 2px rgba(60,30,40,.04),0 12px 40px -12px rgba(60,30,40,.12);
  --ease:cubic-bezier(.32,.72,0,1);
  --r-shell:28px; --r-core:22px; --r-tile:16px;
  --gut:clamp(16px,4vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#17141B; --bg2:#1E1A23; --surface:#231F29; --shell:rgba(255,255,255,.03); --hair:rgba(255,255,255,.12); --tint:#2C2420;
  --ink:#F4EEF2; --ink2:#D6CED9; --muted:#A39BA8;
  --accent:#EE9A45; --accent-ink:#1E1407; --accent-text:#EE9A45; --accent-soft:rgba(238,154,69,.14);
    --hi:inset 0 1px 0 rgba(255,255,255,.05);
  --amb:0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.6);
  color-scheme:dark;
}}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{overflow-x:clip}
body{font-family:Outfit,system-ui,sans-serif;font-size:16px;color:var(--ink2);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{font-family:Fredoka,Outfit,sans-serif;color:var(--ink);font-weight:600;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
.ph-light{line-height:1;vertical-align:-.12em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* eyebrow tag */
.eyebrow{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--hair);
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.eyebrow i{color:var(--accent);font-size:13px}

/* ── island nav ── */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;padding:6px;
  border-radius:999px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 0 0 1px var(--hair),var(--amb);width:max-content;max-width:calc(100% - 24px)}
.brand{display:flex;align-items:center;gap:8px;padding:0 12px 0 4px;font-family:Fredoka,sans-serif;font-weight:600;font-size:19px;color:var(--ink);white-space:nowrap}
.brand img{width:34px;height:34px;object-fit:contain}
.links{display:flex;gap:2px}
.links a{padding:9px 16px;border-radius:999px;font-weight:500;font-size:15px;transition:background .5s var(--ease),color .5s var(--ease)}
.links a:hover{background:var(--bg2);color:var(--ink)}
.links a.on{background:var(--ink);color:var(--bg)}
.nav-actions{display:flex;gap:4px;margin-left:6px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:999px;display:grid;place-items:center;font-size:21px;color:var(--ink);background:var(--bg2);transition:transform .5s var(--ease)}
.icon-btn:active{transform:scale(.94)}
.cart-btn em{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:11px;font-weight:600;display:grid;place-items:center}
.burger{display:none}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .6s var(--ease),opacity .3s}
.burger span:nth-child(1){transform:translateY(-4px)}
.burger span:nth-child(2){transform:translateY(4px)}
body.menu-open .burger span:nth-child(1){transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 28px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.overlay a{font-family:Fredoka,sans-serif;font-size:44px;font-weight:600;color:var(--ink);transform:translateY(40px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.overlay a:nth-child(2){transition-delay:.06s}.overlay a:nth-child(3){transition-delay:.12s}.overlay a:nth-child(4){transition-delay:.18s}.overlay a:nth-child(5){transition-delay:.24s}
body.menu-open .overlay{opacity:1;pointer-events:auto}
body.menu-open .overlay a{transform:none;opacity:1}
@media (max-width:760px){
  .nav{left:12px;right:12px;transform:none;width:auto;max-width:none}
  .links{display:none}.burger{display:grid}
  .nav-actions{margin-left:auto}
}

/* ── buttons (pill, button-in-button arrow) ── */
.btn{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 22px;min-height:52px;border-radius:999px;font-weight:600;font-size:16px;
  transition:transform .6s var(--ease),background .5s var(--ease),box-shadow .6s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn .orb{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font-size:17px;transition:transform .6s var(--ease)}
.btn:hover .orb{transform:translate(2px,-1px) scale(1.05)}
.btn-main{background:var(--ink);color:var(--bg)}
.btn-main .orb{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair);padding:8px 22px}
.btn-ghost:hover{background:var(--surface)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent .orb{background:rgba(255,255,255,.3)}
.btn.full{width:100%;justify-content:space-between}
.btn.plain{padding:8px 22px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ── double bezel ── */
.bezel{padding:6px;border-radius:var(--r-shell);background:var(--shell);box-shadow:0 0 0 1px var(--hair)}
.core{border-radius:var(--r-core);background:var(--surface);box-shadow:var(--hi),var(--amb);padding:24px}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}

/* ── promo ── */
.promo{display:flex;justify-content:center;padding:92px var(--gut) 0}
.promo div{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 16px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-size:14px;font-weight:500;text-align:center}
.promo b{font-weight:600}
.promo i{color:var(--accent);font-size:16px}
.promo span.tag{padding:3px 10px;border-radius:999px;background:var(--surface);font-size:12px;color:var(--ink2)}
body:not(.has-promo) main{padding-top:84px}

/* ── hero (editorial split) ── */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center;padding:32px 0 72px}
.hero h1{font-size:clamp(40px,5vw,68px);max-width:14ch;font-weight:600;letter-spacing:-.025em;line-height:.96;margin:20px 0 22px}
.hero h1 span{color:var(--accent-text)}
.hero .lead{font-size:clamp(17px,1.5vw,19px);max-width:30ch;color:var(--ink2)}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.stage{position:relative}
.stage .bezel{transform:rotate(1.5deg)}
.stage .core{padding:0;overflow:hidden;background:var(--tint);aspect-ratio:1/1.02;display:grid;place-items:center}
.stage .core img{width:86%}
.stage .float{position:absolute;left:-28px;bottom:42px;transform:rotate(-3deg);width:230px}
.stage .float .core{aspect-ratio:auto;display:block;padding:16px 18px;background:var(--surface)}
.stage .float small{display:block;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stage .float strong{display:block;font-family:Fredoka;font-size:38px;font-weight:600;color:var(--ink);line-height:1.1}
.stage .float span{font-size:14px;color:var(--ink2)}
@keyframes bob{50%{transform:translateY(-12px)}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;padding:24px 0 40px}
  .stage .bezel,.stage .float{transform:none}
  .stage .float{position:relative;left:auto;bottom:auto;width:auto;margin-top:12px}
  .stage .core{aspect-ratio:4/3}.stage .core img{width:62%}
}

/* ── trust marquee ── */
.marquee{overflow:hidden;padding:20px 0;border-block:1px solid var(--hair);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;gap:48px;width:max-content;animation:slide 40s linear infinite}
.marquee span{display:inline-flex;align-items:center;gap:10px;font-family:Fredoka;font-size:20px;font-weight:500;color:var(--ink);white-space:nowrap}
.marquee i{color:var(--accent);font-size:22px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── sections ── */
.sec{padding:clamp(64px,10vw,128px) 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(34px,4.4vw,56px);margin-top:14px;letter-spacing:-.02em}
.sec-head p{max-width:44ch;margin-top:10px}

/* ── bento ── */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(220px,auto);gap:16px}
.bento > .bezel{display:flex}
.bento .core{flex:1;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.bento h3{font-size:clamp(24px,2.4vw,32px)}
.b-lab{grid-column:span 7;grid-row:span 2}
.b-lab .core{background:var(--surface)}
.b-ship{grid-column:span 5}
.b-ship .core{background:var(--tint)}
.b-care{grid-column:span 5}
.b-care .core{background:var(--accent-soft)}
.bento .art{position:absolute;right:-6px;bottom:-6px;width:150px;pointer-events:none}
.b-lab .art{width:230px;right:10px;bottom:10px}
.b-ship .core,.b-care .core{padding-right:150px}
.bento p{max-width:34ch}
.bento .lnk{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-weight:600;color:var(--ink)}
.bento .lnk i{transition:transform .6s var(--ease)}
.bento a:hover .lnk i{transform:translateX(3px)}
.pur-list{display:flex;flex-direction:column;gap:2px;margin:12px 0 18px;max-width:300px}
.pur-list div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair)}
.pur-list b{font-family:Fredoka;font-size:28px;font-weight:600;color:var(--ink)}
@media (max-width:860px){.bento{grid-template-columns:1fr;grid-auto-rows:auto}.bento > *{grid-column:auto!important;grid-row:auto!important}
  .b-lab .art{position:static;width:150px;margin:8px 0 0 auto}.bento .core{min-height:200px}
  .b-ship .core,.b-care .core{padding-right:24px;padding-bottom:120px}.bento .art{width:120px}}

/* ── products ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;align-items:start}
.pcard .core{display:flex;flex-direction:column;gap:14px;padding:22px}
.pcard .cat{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pcard h3{font-size:22px;line-height:1.15}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.size{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:var(--r-tile);background:var(--bg);box-shadow:0 0 0 1px var(--hair);text-align:left;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.size:hover{box-shadow:0 0 0 1px var(--accent)}
.size:active{transform:scale(.96)}
.size small{font-size:13px;color:var(--muted)}
.size b{font-family:Fredoka;font-size:19px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.size s{font-size:12px;color:var(--muted);font-family:Outfit;font-weight:400;margin-right:4px}
.size i{position:absolute;top:9px;right:9px;font-size:15px;color:var(--accent);opacity:0;transition:opacity .4s var(--ease)}
.size:hover i,.size.on i{opacity:1}
.size.on{background:var(--accent-soft);box-shadow:0 0 0 1.5px var(--accent)}
.pcard .unit{font-size:13px;color:var(--muted)}

.toolbar{display:flex;flex-direction:column;margin-bottom:14px}
.search{display:flex;align-items:center;gap:10px;height:54px;padding:0 20px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--hair),var(--hi)}
.search i{font-size:20px;color:var(--muted)}
.search input{border:0;outline:0;font:inherit;flex:1;min-width:0;background:none;color:var(--ink)}
.cats{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;margin-bottom:20px}
.cats::-webkit-scrollbar{display:none}
.cats button{white-space:nowrap;padding:9px 16px;border-radius:999px;box-shadow:0 0 0 1px var(--hair);font-weight:500;font-size:14px;transition:background .5s var(--ease),color .5s var(--ease)}
.cats button:hover{background:var(--surface)}
.cats button.on{background:var(--ink);color:var(--bg);box-shadow:none}

/* skeleton */
.sk{border-radius:var(--r-tile);background:linear-gradient(90deg,var(--bg2) 0,var(--surface) 50%,var(--bg2) 100%);background-size:200% 100%;animation:shim 1.6s var(--ease) infinite}
@keyframes shim{to{background-position:-200% 0}}
.sk-card .core{display:flex;flex-direction:column;gap:12px;min-height:220px}

/* empty states */
.empty{text-align:center;padding:56px 10px;max-width:420px;margin:0 auto}
.empty img{width:170px;margin:0 auto 14px}
.empty h2{font-size:clamp(30px,4vw,42px);margin-bottom:8px}
.empty .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ── giveaway cascade ── */
.gift{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(28px,5vw,56px);border-radius:var(--r-shell);
  background:var(--tint);box-shadow:0 0 0 1px var(--hair)}
.gift > img{width:clamp(130px,16vw,200px);transform:rotate(-4deg)}
.gift h2{font-size:clamp(32px,4.4vw,54px);margin:14px 0 12px}
.gift .rules{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 26px}
.gift .rules div{padding:12px 16px;border-radius:var(--r-tile);background:var(--surface);box-shadow:0 0 0 1px var(--hair)}
.gift .rules b{display:block;font-family:Fredoka;font-size:26px;font-weight:600;color:var(--accent-text);line-height:1.1}
.gift .rules span{font-size:14px}
.gift .cta{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:700px){.gift{grid-template-columns:1fr;text-align:left}.gift > img{width:130px}}

/* ── page header ── */
.phead{padding:clamp(40px,7vw,80px) 0 28px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.phead h1{font-size:clamp(40px,5.5vw,64px);letter-spacing:-.025em;margin-top:16px}
.phead p{max-width:46ch;margin-top:14px}
.phead > img{width:clamp(110px,14vw,170px)}
@media (max-width:640px){.phead{grid-template-columns:1fr}.phead > img{display:none}}

/* ── lab ── */
.coas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.coa .core{padding:0;overflow:hidden}
.coa .core img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;background:#fff;cursor:zoom-in;transition:transform 1s var(--ease)}
.coa:hover .core img{transform:scale(1.02)}
.coa .meta{padding:20px 22px 22px}
.coa h3{font-size:20px}
.coa .pur{display:flex;align-items:baseline;gap:8px;margin:6px 0 10px}
.coa .pur b{font-family:Fredoka;font-size:44px;font-weight:600;color:var(--ink);line-height:1}
.coa dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.coa dt{color:var(--muted)}
.coa code{font-family:ui-monospace,Menlo,monospace;font-size:13px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--ink)}
.pending{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.pending span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;box-shadow:0 0 0 1px var(--hair);font-size:14px}
.pending i{color:var(--accent)}

/* ── help ── */
.help{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start;padding-bottom:40px}
.help aside{position:sticky;top:100px}
.help aside img{width:150px;margin-bottom:-4px}
.help aside .core h3{font-size:22px;margin-bottom:6px}
.help aside .core p{margin-bottom:16px}
.faq{display:flex;flex-direction:column}
details{border-radius:var(--r-tile);transition:background .5s var(--ease)}
details[open]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;font-family:Fredoka;font-size:20px;font-weight:500;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary i{flex:none;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--bg2);font-size:16px;transition:transform .6s var(--ease),background .5s var(--ease)}
details[open] summary i{transform:rotate(45deg);background:var(--accent-soft);color:var(--accent)}
details p{padding:0 66px 18px 16px;max-width:64ch}
@media (max-width:860px){.help{grid-template-columns:1fr}.help aside{position:static}}

/* ── cart ── */
.two{display:grid;grid-template-columns:1.35fr .9fr;gap:20px;align-items:start;padding-bottom:40px}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.line{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--hair)}
.line:first-child{padding-top:0}.line:last-child{border-bottom:0;padding-bottom:0}
.line .nm{flex:1;min-width:0}
.line .nm b{display:block;font-family:Fredoka;font-weight:600;font-size:18px;color:var(--ink)}
.line .nm span{font-size:14px;color:var(--muted)}
.line > b{min-width:58px;text-align:right;font-family:Fredoka;font-weight:600;font-size:18px;color:var(--ink)}
.qty{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--bg)}
.qty button{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--surface);box-shadow:0 0 0 1px var(--hair);font-size:15px;transition:transform .4s var(--ease)}
.qty button:active{transform:scale(.9)}
.qty span{min-width:20px;text-align:center;font-weight:600;color:var(--ink)}
.sum div{display:flex;justify-content:space-between;padding:7px 0}
.sum .disc{color:var(--accent-text);font-weight:500}
.sum .tot{font-family:Fredoka;font-size:28px;font-weight:600;color:var(--ink);border-top:1px solid var(--hair);margin-top:8px;padding-top:16px}
label.fl{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:20px 0 8px}
textarea,.copy input{width:100%;border:0;border-radius:var(--r-tile);padding:12px 14px;font:inherit;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair);resize:vertical;outline:0}
textarea{min-height:84px}
textarea:focus,.copy input:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
#checkout{margin-top:18px}
.note{font-size:14px;color:var(--muted);margin-top:14px;text-align:center}

/* ── login, bear perched on the button ── */
.login{max-width:480px;margin:0 auto;text-align:center;padding:clamp(24px,6vw,64px) 0}
.login h1{font-size:clamp(44px,7vw,68px);margin:16px 0 10px}
.perch{position:relative;display:inline-block;margin-top:196px}
.perch img{position:absolute;left:50%;bottom:calc(100% - 12px);transform:translateX(-50%);width:128px;pointer-events:none;z-index:2;filter:drop-shadow(0 8px 10px rgba(60,30,40,.12))}
.perch .tg-wrap{position:relative;z-index:1;padding:8px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--hair),var(--amb);min-width:260px;min-height:58px;display:grid;place-items:center}
.perch.small{margin-top:150px}

/* ── account ── */
.acct{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding-bottom:40px}
.acct .me-card{grid-column:span 5}.acct .gw-card{grid-column:span 7}.acct .orders{grid-column:1/-1}
@media (max-width:860px){.acct{grid-template-columns:1fr}.acct > *{grid-column:auto!important}}
.me{display:flex;align-items:center;gap:14px}
.me img{width:60px;height:60px;border-radius:999px;object-fit:cover;background:var(--bg2)}
.me h3{font-size:24px}
.entries{display:flex;align-items:baseline;gap:10px;margin:8px 0 6px}
.entries b{font-family:Fredoka;font-size:64px;font-weight:600;color:var(--accent-text);line-height:1}
.copy{display:flex;gap:8px;margin-top:14px}
.copy input{flex:1;min-width:0}
.copy .btn{min-height:46px;padding:6px 18px}
.order{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--hair)}
.order:last-child{border-bottom:0}
.order b{font-family:Fredoka;font-weight:600;font-size:18px;color:var(--ink)}
.order .items{grid-column:1/-1;font-size:14px;color:var(--muted)}
.order .go{grid-column:1/-1;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent-text)}
.order{border-radius:var(--r-tile);transition:background .5s var(--ease)}
.order:hover{background:var(--bg)}
.badge{align-self:center;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--bg2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.badge.paid{background:var(--accent-soft)}.badge.shipped{background:var(--ink);color:var(--bg);box-shadow:none}.badge.cancelled{color:var(--muted)}

/* ── footer ── */
.foot{margin:clamp(40px,8vw,96px) 12px 12px;border-radius:var(--r-shell);background:var(--tint);color:var(--ink2);padding:clamp(36px,6vw,72px) clamp(20px,5vw,64px) 24px;overflow:hidden;position:relative}
.foot .big{font-family:Fredoka;font-weight:600;font-size:clamp(56px,13vw,180px);line-height:.85;letter-spacing:-.03em;color:var(--ink)}
.foot .big span{color:var(--accent-text)}
.foot-row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-top:32px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px}
.foot-links a{padding:9px 16px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair);font-size:14px;transition:background .5s var(--ease)}
.foot-links a:hover{background:var(--bg)}
.foot > img{position:absolute;right:clamp(10px,4vw,60px);top:clamp(10px,3vw,40px);width:clamp(80px,12vw,150px)}
.fine{font-size:13px;color:var(--muted);margin-top:28px}

/* ── misc ── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);padding:12px 20px 12px 14px;border-radius:999px;box-shadow:var(--amb);font-weight:500;font-size:15px;max-width:calc(100% - 32px)}
.toast i{font-size:20px;color:var(--accent)}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(23,20,27,.78);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.lightbox img{max-height:92dvh;border-radius:var(--r-tile)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none;filter:none}
  .marquee .track{flex-wrap:wrap;width:auto;justify-content:center;row-gap:12px}
  .marquee .dup{display:none}
}

/* ── friends + decorations ── */
.deco{position:absolute;pointer-events:none;user-select:none}
.sky{position:absolute;top:56px;right:0;width:clamp(150px,20vw,280px);opacity:.9;pointer-events:none;z-index:0}
main{position:relative;z-index:1}
.stage .d-balloon{width:clamp(90px,10vw,140px);top:-46px;right:-26px;z-index:2}
.stage .d-plane{width:clamp(80px,9vw,120px);top:34%;left:-60px;z-index:2;transform:rotate(-8deg)}
@keyframes drift{50%{transform:translate(-8px,-14px) rotate(3deg)}}
.crew{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(48px,8vw,96px) 0}
.crew > img:not(.deco){width:100%;max-width:560px}
.crew h2{font-size:clamp(34px,4.4vw,56px);margin:14px 0 20px;letter-spacing:-.02em}
.crew ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.crew li{padding:14px 18px;border-radius:var(--r-tile);background:var(--surface);box-shadow:0 0 0 1px var(--hair),var(--hi)}
.crew li b{font-family:Fredoka;font-weight:600;color:var(--accent-text);margin-right:4px}
.crew .d-shells{width:120px;right:0;top:20px;opacity:.9}
.bento .art{filter:drop-shadow(0 6px 10px rgba(60,30,40,.08))}
.help aside .deco{display:none}
@media (max-width:860px){
  .crew{grid-template-columns:1fr}.crew .d-shells{display:none}
  .stage .d-balloon{top:-30px;right:-6px;width:84px}.stage .d-plane{display:none}
  .sky{width:110px;top:64px;right:0;opacity:.55}
}
.sky img{width:100%}
.pcard .core{position:relative}
.pcat{position:absolute;top:14px;right:14px;width:52px;height:52px;object-fit:contain;transition:transform .8s var(--ease)}
.pcard:hover .pcat{transform:rotate(-8deg) scale(1.08)}
.pcard h3{padding-right:52px}
.chip-art{width:20px;height:20px;object-fit:contain;display:inline-block;vertical-align:-5px;margin-right:6px}
.gift{overflow:visible}
.gift .d-stamp{width:clamp(80px,9vw,110px);top:-34px;left:46%;transform:rotate(-6deg)}
.coa{position:relative}
.coa .d-tape{width:64px;top:-14px;right:14px;transform:rotate(8deg);z-index:2}
.login{position:relative}
.login .d-rainbow{width:clamp(110px,14vw,170px);top:0;right:-40px;opacity:.9}
.wave{display:block;width:min(1180px,calc(100% - 24px));margin:clamp(40px,8vw,96px) auto -6px;height:auto;opacity:.85}
.wave + .foot{margin-top:0}
@media (max-width:640px){.login .d-rainbow{right:-10px;width:90px;top:-10px}.gift .d-stamp{right:12px;width:70px}}
.mini{font-size:22px;margin-bottom:4px}
.fgroup{margin-bottom:34px}
.fgroup h3{font-size:14px;font-family:Outfit;font-weight:600;color:var(--muted);margin:0 0 6px 16px}
/* crew: vertical stack */
.crew{display:flex;flex-direction:column;align-items:center;text-align:center;grid-template-columns:none}
.crew h2{margin:0 0 12px}
.crew .crew-art{width:min(620px,100%);margin:8px 0 18px}
.crew p{max-width:46ch;font-size:18px}
.crew .d-shells{top:40px;right:6%}
/* giveaway: copy left, entry tiles right */
.gift{grid-template-columns:1.1fr .9fr}
.gift .d-bear{width:clamp(100px,11vw,140px);right:-20px;bottom:-34px;transform:rotate(8deg)}
.gift .rules{flex-direction:column;margin:0}
.gift .rules div{display:flex;align-items:baseline;gap:14px;padding:16px 20px}
.gift .rules b{font-size:36px;min-width:56px}
.gift-copy{padding-top:24px}
@media (max-width:700px){.gift .d-bear{right:6px;bottom:auto;top:-46px;width:84px}.gift .d-stamp{display:none}}
@media (max-width:760px){.gift{grid-template-columns:1fr}.gift .rules{flex-direction:row;flex-wrap:wrap}.gift .rules div{flex:1 1 140px}}
.crew{padding-top:0}

/* ── order / pay ── */
.pay h3{font-size:28px;margin-bottom:8px}
.pay > p{margin-bottom:16px}
.coins{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:16px 0 20px}
.coin{padding:16px;border-radius:var(--r-tile);background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--hair);font-weight:600;color:var(--ink);text-align:left;transition:box-shadow .5s var(--ease),transform .4s var(--ease)}
.coin:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.coin:active{transform:scale(.97)}
.coin[disabled],.btn[disabled]{opacity:.5;pointer-events:none}
.amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
.amount b{font-family:Fredoka;font-size:clamp(32px,4vw,44px);font-weight:600;color:var(--ink);line-height:1.1;word-break:break-all}
.amount span{font-weight:600;color:var(--ink2)}
.amount .copybtn{margin-left:auto}
.net{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:18px}
.net i{color:var(--accent-text)}
.payto{display:grid;grid-template-columns:168px 1fr;gap:18px;align-items:start;padding:16px;border-radius:var(--r-tile);background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.qr{background:#fff;border-radius:12px;padding:6px;aspect-ratio:1}
.qr svg{width:100%;height:auto;display:block}
.addr{display:flex;flex-direction:column;gap:10px;min-width:0}
.addr .fl{margin:0}
.addr input,.shipf input{width:100%;border:0;border-radius:var(--r-tile);padding:12px 14px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair);outline:0}
.addr input{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.addr input:focus,.shipf input:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.addr .btn,.copybtn{min-height:44px}
.timer{margin-top:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.wait{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-weight:600}
.track{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.track code{font-family:ui-monospace,Menlo,monospace;font-size:18px;color:var(--ink);padding:8px 14px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.shipf{display:flex;flex-direction:column}
.shipf .fl{margin:14px 0 6px}
.shipf .btn{margin-top:20px}
.ostat{margin-bottom:12px}
@media (max-width:560px){.payto{grid-template-columns:1fr}.qr{max-width:200px}}
.tgbtn{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:999px;background:#1769B8;color:#fff;font-weight:600;font-size:17px;transition:transform .5s var(--ease)}
.tgbtn:active{transform:scale(.97)}
.tgbtn i{font-size:22px}
/* auth entry points */
.nav-login{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-radius:999px;background:#1769B8;color:#fff;font-weight:600;font-size:15px;transition:transform .5s var(--ease)}
.nav-login:active{transform:scale(.96)}
.nav-login i{font-size:18px}
.nav-login:not([hidden]) + #nav-account{display:none}
.ov-auth{margin-top:28px;transform:translateY(40px);opacity:0;transition:transform .8s var(--ease) .3s,opacity .8s var(--ease) .3s}
body.menu-open .ov-auth{transform:none;opacity:1}
.overlay .ov-auth a{font-family:Outfit,sans-serif;font-size:18px;transform:none;opacity:1}
.ov-auth .tgbtn{padding:16px 28px}
.ov-me{display:inline-flex;align-items:center;gap:14px;color:var(--ink)}
.ov-me img,.ov-me > i{width:52px;height:52px;border-radius:999px;object-fit:cover;background:var(--bg2);display:grid;place-items:center;font-size:24px}
.ov-me span{display:flex;flex-direction:column;font-weight:600;font-size:20px;line-height:1.2}
.ov-me small{font-size:14px;font-weight:500;color:var(--muted)}
@media (max-width:760px){.nav-login{display:none!important}.nav-login + #nav-account{display:grid!important}}