@font-face{font-family:Anton;src:url(/fonts/Anton-Regular.ttf) format("truetype");font-display:swap}
:root{--disp:Anton,"Impact","Arial Narrow Bold",sans-serif;--r:18px}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--fx-body),var(--bg)}
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top));background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{font-family:var(--disp);font-size:24px;letter-spacing:.04em;line-height:1}
.brand span{color:var(--accent);text-shadow:var(--fx-glow-1)}
.price-pill{font-family:var(--disp);font-size:15px;letter-spacing:.03em;color:var(--on-accent-2);background:var(--accent-2);padding:6px 12px;border-radius:999px;box-shadow:0 0 18px rgba(var(--accent-2-rgb),calc(0.23 * var(--fx-k)));white-space:nowrap}
.price-pill em{font:600 10px/1 system-ui,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.08em;margin-left:6px;opacity:.9}

/* step indicator */
.steps{display:flex;align-items:center;max-width:520px;margin:0 auto;padding:4px 22px 6px}
.steps button{display:flex;align-items:center;gap:7px;padding:8px 0;border:0;background:none;color:var(--muted);font:600 11px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.steps button i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.25s}
.steps b{flex:1;height:1px;margin:0 10px;background:var(--line)}
.steps button.on{color:var(--text)}
.steps button.on i{background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 20px rgba(var(--accent-rgb),calc(0.25 * var(--fx-k)))}
.steps button.done i{background:var(--cream)}

main{max-width:520px;margin:0 auto;padding:6px 18px 10px}
.step{display:none;animation:in .35s ease}.step.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* poster type */
.hero{margin:6px 0 12px}
.hero h1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(56px,17vw,84px);line-height:.9;letter-spacing:.005em;text-transform:uppercase}
.hero h1 span{background:linear-gradient(92deg,var(--grad-1) 0%,var(--grad-2) 55%,var(--grad-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:10px 0 0;color:var(--muted);max-width:30ch}
.hero.slim h1{font-size:34px}.hero.slim p{display:none}
h2{margin:8px 0 14px;font-family:var(--disp);font-weight:400;font-size:42px;line-height:1;text-transform:uppercase}
h2 span{display:inline-block;vertical-align:middle;margin-left:8px;font:600 11px system-ui,sans-serif;letter-spacing:.14em;color:var(--cream);border:1px solid rgba(var(--cream-rgb),.35);padding:4px 8px;border-radius:999px}

/* stage */
.stage{position:relative;border-radius:var(--r);overflow:hidden;touch-action:none;background:radial-gradient(70% 55% at 50% 55%,rgba(var(--accent-rgb),calc(0.05 * var(--fx-k))),transparent 70%),var(--surface);border:1px solid var(--line)}
#preview{display:block;width:100%;height:auto;aspect-ratio:3/4;cursor:grab}
#preview:active{cursor:grabbing}
.chip{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:700 11px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.chip.warn{border-color:rgba(var(--warn-rgb),.6);color:var(--warn)}.chip.warn::before{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.note{margin:8px 2px 0;font-size:13px;color:var(--warn)}

/* buttons */
.btn{position:relative;display:block;width:100%;margin:14px 0 0;padding:16px 20px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--text);font:700 14px system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:center;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 22px rgba(var(--accent-rgb),calc(0.14 * var(--fx-k)))}
.btn.primary:active,.btn.primary:hover{box-shadow:var(--glow);transform:scale(.985)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:focus-visible,input:focus-visible,select:focus-visible,.seg button:focus-visible,.icon-btn:focus-visible,.steps button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.file input{position:absolute;width:1px;height:1px;opacity:0}
.hint{color:var(--muted);font-size:12px;margin:8px 2px 0}.hint.center{text-align:center}

/* controls */
.controls{margin-top:18px}
.ctl-row{display:flex;gap:10px;align-items:center}
.seg{position:relative;flex:1;display:flex;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.seg button{position:relative;z-index:1;flex:1;padding:10px;border:0;background:none;color:var(--muted);font:700 12px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.seg button.on{color:var(--on-accent)}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),calc(0.23 * var(--fx-k)));transition:transform .25s cubic-bezier(.3,.7,.2,1)}
.seg.fill .seg-thumb{transform:translateX(100%)}
.icon-btn{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--cream);cursor:pointer}
.icon-btn:active{box-shadow:var(--glow);color:var(--accent)}
.zoom{display:flex;align-items:center;gap:14px;margin-top:16px;font:700 11px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.zoom input{flex:1;-webkit-appearance:none;appearance:none;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--p,25%),var(--line) var(--p,25%));outline-offset:8px}
.zoom input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--white);border:0;box-shadow:0 0 0 4px rgba(var(--accent-rgb),calc(0.12 * var(--fx-k))),0 0 12px rgba(var(--accent-rgb),calc(0.35 * var(--fx-k)))}
.zoom input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--white);border:0;box-shadow:0 0 0 4px rgba(var(--accent-rgb),calc(0.12 * var(--fx-k))),0 0 12px rgba(var(--accent-rgb),calc(0.35 * var(--fx-k)))}

/* gallery */
.gallery-wrap{margin-top:22px}
.eyebrow{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--disp);font-size:20px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.eyebrow small{font:600 10px system-ui,sans-serif;letter-spacing:.14em;color:var(--muted)}
.gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px;padding:2px 18px 6px}
.gallery::-webkit-scrollbar{display:none}
.mk{flex:0 0 72%;scroll-snap-align:center;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.mk img{width:100%;height:100%;object-fit:cover;display:block}
.mk.load{background:linear-gradient(100deg,var(--surface) 30%,var(--shimmer) 50%,var(--surface) 70%);background-size:300% 100%;animation:sh 1.3s linear infinite}
@keyframes sh{from{background-position:100% 0}to{background-position:0 0}}
.mk.soon{flex-basis:100%;aspect-ratio:auto;position:relative;padding:22px 20px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,var(--grad-1),var(--grad-2),var(--grad-3)) border-box}
.mk.soon .t{font-family:var(--disp);font-size:26px;line-height:1.05;text-transform:uppercase}
.mk.soon .t span{color:var(--accent-2)}
.mk.soon p{margin:8px 0 0;color:var(--muted);font-size:13px}
.mk.soon .ghosts{display:flex;gap:8px;margin-top:14px}
.mk.soon .ghosts i{flex:1;aspect-ratio:1;border-radius:10px;border:1px dashed rgba(var(--cream-rgb),.25);background:radial-gradient(circle at 50% 40%,rgba(var(--accent-rgb),calc(0.04 * var(--fx-k))),transparent 70%)}

/* messages */
.msg{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.msg.ok{border-color:rgba(var(--accent-rgb),calc(0.23 * var(--fx-k)))}
.msg.ok strong{color:var(--accent)}
.msg.warn{border-color:rgba(var(--warn-rgb),.5);color:var(--warn)}
.msg.err{border-color:rgba(var(--err-rgb),.55);color:var(--err)}

/* panels + form */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:12px}
form.panel{margin-top:0}
form label{display:block;font:600 11px system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
form>label:first-child,form>.row:first-child>label{margin-top:0}
form label small{font-size:10px;color:var(--muted-2);letter-spacing:.08em}
form input,form select{display:block;width:100%;height:50px;margin-top:6px;padding:0 14px;font:400 16px system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
form select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
form input:focus,form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),calc(0.07 * var(--fx-k)))}
form .bad{border-color:var(--err)}
.ferr{color:var(--err);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;margin-top:5px}
.row{display:flex;gap:10px;align-items:flex-start}
.row>label{margin-top:14px}.row>label{flex:1;min-width:0}

/* review */
.mini-sum{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 12px}
.mini-sum img{width:44px;border-radius:6px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.mini-sum p{margin:0}.mini-sum div:nth-child(2){flex:1}
.mini-tot{font-family:var(--disp);font-size:24px;color:var(--accent-2);text-shadow:var(--fx-glow-2)}
.review{display:flex;gap:14px;align-items:center}
.review img{width:84px;border-radius:10px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 0 24px rgba(var(--accent-deep-rgb),calc(0.12 * var(--fx-k)))}
.review p{margin:0 0 4px}.strong{font-weight:800}.muted{color:var(--muted);font-size:13px}
.totals div{display:flex;justify-content:space-between;padding:7px 0;color:var(--muted)}
.totals .free{color:var(--accent);font-weight:700}
.totals .tot{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);color:var(--text);font-family:var(--disp);font-size:26px;text-transform:uppercase}
.totals .tot span:last-child{color:var(--accent-2);text-shadow:var(--fx-glow-2)}
.pay-placeholder{font-size:13px;color:var(--muted);border-style:dashed}
.pay-placeholder p{margin:0 0 6px}.pay-placeholder .strong{color:var(--text)}
details{margin-top:12px}summary{font-weight:700;cursor:pointer;color:var(--muted);font-size:13px}
pre{background:var(--code-bg);color:var(--accent);border:1px solid var(--line);padding:12px;border-radius:12px;overflow:auto;font-size:11px;max-height:50vh}
.foot{text-align:center;color:var(--muted-2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:26px 16px calc(24px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- top nav tabs ---------- */
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.tabs a{padding:7px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font:700 11px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.tabs a.on{background:var(--accent-2);color:var(--on-accent-2);box-shadow:0 0 16px rgba(var(--accent-2-rgb),calc(0.23 * var(--fx-k)))}
.pk{color:var(--accent-2);text-shadow:var(--fx-glow-2)}

/* ---------- empty design: shop vs make ---------- */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.pick-card{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r);text-decoration:none;color:var(--text);text-align:left;font:inherit;cursor:pointer;border:1px solid transparent;transition:transform .12s,box-shadow .2s}
.pick-card.shop{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(130deg,var(--accent),var(--accent-deep)) border-box;box-shadow:0 0 24px rgba(var(--accent-2-rgb),calc(0.09 * var(--fx-k)))}
.pick-card.make{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(130deg,var(--accent-hi),var(--accent-deep)) border-box;box-shadow:0 0 24px rgba(var(--accent-rgb),calc(0.07 * var(--fx-k)))}
.pick-card:active{transform:scale(.98)}
.pick-card strong{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.05;text-transform:uppercase;margin-top:6px}
.pick-card.shop strong{color:var(--accent-2)}.pick-card.make strong{color:var(--accent)}
.pick-card span{color:var(--muted);font-size:12px;line-height:1.35}
.pick-thumbs{display:flex;height:64px}
.pick-thumbs img,.pick-thumbs i{width:52px;height:64px;object-fit:cover;border-radius:10px;background:var(--surface-2);border:2px solid var(--bg);margin-right:-14px;box-shadow:0 4px 12px rgba(var(--shadow-rgb),.5)}
.pick-thumbs img:nth-child(1),.pick-thumbs i:nth-child(1){transform:rotate(-7deg)}.pick-thumbs img:nth-child(3),.pick-thumbs i:nth-child(3){transform:rotate(7deg)}
.pick-icon{height:64px;display:grid;place-items:center;width:64px;border-radius:14px;border:1px dashed rgba(var(--accent-rgb),calc(0.25 * var(--fx-k)));color:var(--accent);font:300 40px/1 system-ui,sans-serif;text-shadow:var(--fx-glow-1)}

/* ---------- shop ---------- */
.view{animation:in .35s ease}
.shop-hero h1{font-size:clamp(56px,17vw,84px)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px -18px 0;padding:2px 18px 4px}
.chips::-webkit-scrollbar{display:none}
.chips.small{margin:10px 0 0;padding:0;flex-wrap:wrap}
.chip-btn{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:700 11px system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip-btn.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),calc(0.23 * var(--fx-k)))}
.chips.small .chip-btn{padding:5px 10px;font-size:10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:block;text-decoration:none;color:var(--text);border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line);animation:in .4s ease both;animation-delay:var(--d,0ms);transition:transform .12s,box-shadow .2s,border-color .2s}
.card:active,.card:hover{border-color:rgba(var(--accent-2-rgb),calc(0.3 * var(--fx-k)));box-shadow:0 0 22px rgba(var(--accent-2-rgb),calc(0.12 * var(--fx-k)))}
.card:active{transform:scale(.98)}
.card-img{aspect-ratio:1;background:var(--stage)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-meta{display:flex;flex-direction:column;gap:2px;padding:9px 11px 11px}
.card-t{font-family:var(--disp);font-size:16px;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-p{font:800 13px system-ui,sans-serif;color:var(--accent-2)}
.card.skel .card-img{background:linear-gradient(100deg,var(--surface) 30%,var(--shimmer) 50%,var(--surface) 70%);background-size:300% 100%;animation:sh 1.3s linear infinite}
.grid-more{height:1px}
.diy{margin-top:22px}

/* ---------- product page ---------- */
.back{display:inline-block;margin:6px 0 10px;color:var(--muted);text-decoration:none;font:700 11px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.pdp-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r);border:1px solid var(--line);background:var(--stage);box-shadow:0 0 40px rgba(var(--accent-deep-rgb),calc(0.11 * var(--fx-k)))}
.pdp-gallery::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;margin:0;scroll-snap-align:center;position:relative;aspect-ratio:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide figcaption{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(var(--bg-rgb),.78);color:var(--cream);font:700 10px system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.dots{display:flex;justify-content:center;gap:6px;margin-top:10px;min-height:6px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.pdp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:10px}
.pdp-head h2{margin:0;font-size:38px}
.pdp-price{font-family:var(--disp);font-size:30px;color:var(--accent-2);text-shadow:var(--fx-glow-2);white-space:nowrap}
.specs{list-style:none;padding:0;margin:14px 0 0;color:var(--muted);font-size:13px}
.specs li{padding:8px 0 8px 18px;border-bottom:1px solid var(--line);position:relative}
.specs li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.btn{text-decoration:none}

/* Collab */
.tabs a{padding:7px 11px;letter-spacing:.1em}
.collab-hero h1 span{filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),calc(0.25 * var(--fx-k))))}
.collab-hero p b{color:var(--text)}
.btn.pitch{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 26px;text-decoration:none}
.btn.pitch svg{width:22px;height:22px}
.soc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.soc-pill{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--white);text-decoration:none;font:800 13px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:.2s}
.soc-pill svg{width:22px;height:22px;color:var(--accent);flex:none}
.soc-pill:hover,.soc-pill:focus-visible{border-color:var(--accent);box-shadow:0 0 18px rgba(var(--accent-rgb),calc(0.17 * var(--fx-k)))}
.soc-pill:active{transform:scale(.97)}
.foot-soc{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.foot-soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--muted-2);transition:.2s}
.foot-soc a:hover,.foot-soc a:focus-visible{color:var(--accent)}
.foot-soc svg{width:18px;height:18px}
.soc-grid{grid-template-columns:1fr}

/* all body text bold */
body,body *:not(h1):not(h2):not(h1 *):not(h2 *):not(.pick-card strong){font-weight:800!important}
input,textarea,select,button{font-weight:800!important}

/* brand is ALL CAPS */
body,body *{text-transform:uppercase!important}
input,textarea{text-transform:none!important}
input::placeholder,textarea::placeholder{text-transform:uppercase}


/* ---------- SINK IT. ---------- */
.tabs{gap:2px;padding:3px}
.tabs a{padding:7px 8px;font-size:10.5px;letter-spacing:.06em}
.top{padding-left:14px;padding-right:14px}
@media (max-width:360px){.brand{font-size:20px}.tabs a{padding:6px 6px;font-size:10px}}
.play-hero h1 span{filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),calc(0.25 * var(--fx-k))))}
.green-wrap{position:relative;margin-top:6px;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--accent-rgb),calc(0.12 * var(--fx-k))),0 0 40px rgba(var(--accent-rgb),calc(0.07 * var(--fx-k)));background:var(--turf-2)}
#green{display:block;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair}
.g-call{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:max-content;max-width:86%;padding:12px 18px;border-radius:22px;background:rgba(var(--bg-rgb),.86);font-family:var(--disp);font-size:clamp(22px,6.6vw,30px);line-height:1.05;letter-spacing:.02em;text-align:center;text-wrap:balance;pointer-events:none;animation:gpop .35s ease both}
.g-call.win{color:var(--accent);text-shadow:var(--fx-glow-1);box-shadow:0 0 0 1px rgba(var(--accent-rgb),calc(0.25 * var(--fx-k))),0 0 30px rgba(var(--accent-rgb),calc(0.15 * var(--fx-k)))}
.g-call.miss{color:var(--accent-2);text-shadow:var(--fx-glow-2);box-shadow:0 0 0 1px rgba(var(--accent-2-rgb),calc(0.23 * var(--fx-k)))}
@keyframes gpop{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.g-hint{min-height:1.5em;margin:10px 0 0;letter-spacing:.12em}
.g-result{margin-top:14px;text-align:center}
.g-result p{margin:6px 0 0;color:var(--muted)}
.g-title{font-family:var(--disp);font-size:40px;line-height:1;color:var(--accent-2);text-shadow:var(--fx-glow-2)}
.g-title.win{color:var(--accent);text-shadow:var(--fx-glow-1)}
.code-row{display:flex;gap:8px;align-items:stretch;margin-top:14px}
.code-row code{flex:1;display:grid;place-items:center;padding:12px 10px;border-radius:14px;border:1px dashed var(--accent);background:var(--code-bg);color:var(--accent);font:800 20px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:none!important;user-select:all}
.g-copy{width:auto;margin:0;padding:0 18px}
.totals .disc span:last-child{color:var(--accent)}
.mini-tot{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.mini-tot s{color:var(--muted);font-size:12px}
.mini-tot small{color:var(--accent);font:800 10px system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.g-call{animation:none}}
.play-hero .play-sub{line-height:1.25}
.play-hero .play-sub .pk{display:inline-block;margin-top:2px}

/* ---------- HOME ---------- */
a.brand{color:var(--text);text-decoration:none;-webkit-tap-highlight-color:transparent}
a.brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.home-hero h1{font-size:clamp(54px,16vw,80px)}
.cta-row{display:flex;gap:10px;margin-top:18px}
.cta-row .btn{flex:1;margin:0;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
.fan{position:relative;display:block;overflow-x:clip;height:clamp(210px,58vw,300px);margin:22px 0 8px}
.fan-c{position:absolute;left:50%;bottom:6px;width:44%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;background:var(--white);
  box-shadow:0 14px 34px rgba(var(--shadow-rgb),.55),0 0 0 1px rgba(var(--white-rgb),.06);
  --x:calc((var(--i) - 2) * 24%);--r:calc((var(--i) - 2) * 7deg);
  transform:translateX(-50%) translateX(var(--x)) translateY(calc(var(--off,0) * 1px)) rotate(var(--r));transform-origin:50% 75%;transition:transform .3s}
.fan-c:nth-child(1),.fan-c:nth-child(5){--off:26;z-index:1}.fan-c:nth-child(2),.fan-c:nth-child(4){--off:10;z-index:2}.fan-c:nth-child(3){z-index:3;width:48%;box-shadow:0 18px 40px rgba(var(--shadow-rgb),.6),0 0 34px rgba(var(--accent-rgb),calc(0.12 * var(--fx-k)))}
i.fan-c.skel{display:block;background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);background-size:300% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-150% 0}}
@keyframes floaty{50%{translate:0 -6px}}
.fan img.fan-c:nth-child(3){animation:floaty 4s ease-in-out infinite}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:118px;padding:16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.tile b{font-family:var(--disp);font-weight:400;font-size:34px;line-height:1}
.tile span{margin-top:6px;color:var(--muted);font-size:12px}
.tile.play{grid-column:1/-1;min-height:104px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,var(--grad-1),var(--grad-2),var(--grad-3)) border-box}
.tile.play span{color:var(--accent-2);font-size:14px}
.tile:active,.tile:hover{border-color:var(--accent);box-shadow:0 0 22px rgba(var(--accent-rgb),calc(0.09 * var(--fx-k)))}
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 10px}
.row-head h2,.h2{margin:0;font-family:var(--disp);font-weight:400;font-size:26px;line-height:1}
.h2{margin:30px 0 12px}
.row-head a{color:var(--accent);text-decoration:none;font-size:12px;letter-spacing:.1em}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:42%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px 6px;scroll-padding:0 18px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .card{scroll-snap-align:start}
.why{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.why li{display:flex;flex-direction:column;padding:14px 16px;border-radius:14px;background:var(--surface);border-left:3px solid var(--accent)}
.why li:nth-child(2){border-left-color:var(--cream)}.why li:nth-child(3){border-left-color:var(--accent-2)}
.why b{font-family:var(--disp);font-weight:400;font-size:20px;line-height:1.05}
.why span{color:var(--muted);font-size:12px;margin-top:4px}
.collab-tease{display:flex;align-items:center;gap:14px;margin:22px 0 6px;padding:16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none}
.collab-tease svg{width:30px;height:30px;color:var(--accent-2);flex:none}
.collab-tease span{flex:1;display:flex;flex-direction:column}
.collab-tease b{font-family:var(--disp);font-weight:400;font-size:24px;line-height:1}
.collab-tease small{color:var(--muted);font-size:12px;margin-top:4px}
.collab-tease i{font-style:normal;color:var(--accent);font-size:22px}
@media (min-width:700px){.tiles{grid-template-columns:repeat(3,1fr)}.tile.play{grid-column:auto;min-height:118px}.rail{grid-auto-columns:22%}.why{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.fan img.fan-c:nth-child(3),i.fan-c.skel{animation:none}.fan-c{transition:none}}
.home .fan{margin:4px 0 34px}
.home .fan-c{bottom:34px}
.play-hero .play-sub span,.play-hero .play-sub b{display:block}
.play-hero .play-sub .pk{margin-top:0}
.play-hero{position:relative}
.sound-fab{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:46px;height:46px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(var(--accent-rgb),calc(0.17 * var(--fx-k)));background:rgba(var(--bg-rgb),.72);color:rgba(var(--text-rgb),.7);cursor:pointer;transition:color .2s,box-shadow .2s,border-color .2s}
.sound-fab svg{width:20px;height:20px}.sound-fab .w{display:none}.sound-fab.on .w{display:inline}.sound-fab.on .x{display:none}
.sound-fab.on{color:var(--accent);border-color:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),calc(0.23 * var(--fx-k)))}
.g-hud{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:10px}
.g-hud-l{display:flex;flex-direction:column;gap:2px;padding-bottom:4px;font:800 11px system-ui,sans-serif;letter-spacing:.1em;color:var(--muted)}
.g-hud-l b{font-family:var(--disp);font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em;color:var(--text)}
.g-hud-r{display:flex;flex-direction:column;align-items:flex-end}
#g-break{display:block}
#g-stimp{font:800 10px system-ui,sans-serif;letter-spacing:.1em;color:var(--muted)}#g-stimp.pk,.g-hud-l .pk{color:var(--accent-2)}
.g-pips{display:flex;gap:6px;margin:4px 0 2px}.g-pips i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(var(--accent-rgb),calc(0.23 * var(--fx-k)));transition:.25s}
.g-pips i.in{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent)}
.g-pips i.x{color:var(--accent-2);border-color:rgba(var(--accent-2-rgb),.55);background:transparent;opacity:.5;position:relative}.g-pips i.x::after{content:"";position:absolute;inset:3px 4.2px;border-left:2px solid currentColor;transform:rotate(45deg)}
.g-pips.big{justify-content:center;gap:10px;margin:0 0 10px}.g-pips.big i{width:20px;height:20px}
#view-collab{padding-top:clamp(48px,12vh,110px)}
.brand{font-size:clamp(26px,7.6vw,34px);letter-spacing:.02em;-webkit-text-stroke:1px currentColor;paint-order:stroke fill;text-shadow:0 2px 0 rgba(var(--shadow-rgb),.35)}
.brand span{-webkit-text-stroke:1px var(--accent);text-shadow:var(--fx-brand)}
@media (max-width:480px){.top{padding-left:14px;padding-right:14px;gap:6px}.brand{font-size:clamp(20px,7.6vw,34px)}.tabs a{padding:7px 6px;letter-spacing:.04em}}
@media (max-width:360px){.tabs a{padding:6px 5px;font-size:10px;letter-spacing:.02em}}
@media (max-width:340px){.brand{font-size:7.1vw}}

/* ---------- theme-driven extras (values in theme.css) ---------- */
::selection{background:rgba(var(--accent-rgb),.35);color:var(--white)}
:focus-visible{outline-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 22px rgba(var(--accent-rgb),calc(.14 * var(--fx-k)))}
.btn.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.primary:active{background:var(--accent-deep)}
.brand{color:var(--text);-webkit-text-stroke:1px var(--text)}
.brand span{color:var(--accent);-webkit-text-stroke:1px var(--accent);text-shadow:var(--fx-brand)}
/* product art staged (dark stage in charcoal-gold; neon keeps the original light tiles) */
.card-img{background:var(--stage-bg);padding:var(--stage-pad)}
.card-img img{border-radius:var(--stage-radius)}
.pdp-gallery{background:var(--stage-bg)}
.slide{padding:var(--stage-pad)}.slide img{border-radius:var(--stage-radius)}
.fan-c{background:var(--stage);border:var(--fan-border) solid var(--stage)}
.mini-sum img,.review img{background:var(--stage);padding:var(--thumb-pad)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.g-fine{font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:4px}
/* ---- MORE NEON (vars are "none" on charcoal-gold, so this block is neon-only). Static shadows only: no filters on scroll. ---- */
body{background:var(--fx-haze),var(--fx-grid),var(--fx-body),var(--bg)}
.hero h1,h2,.row-head h2,.h2{text-shadow:var(--fx-title)}
.brand span{text-shadow:var(--fx-glow-1),var(--fx-glow-3)}
.tabs a.on{box-shadow:var(--fx-tab),0 0 16px rgba(var(--accent-2-rgb),calc(0.23 * var(--fx-k)))}
.btn.primary{box-shadow:var(--fx-btn),0 0 22px rgba(var(--accent-rgb),calc(0.14 * var(--fx-k)))}
.card,.totals{box-shadow:var(--fx-card)}
#green-wrap{box-shadow:var(--fx-card)}
/* ---------- DROPS: sets of 4 ---------- */
.drops{display:grid;gap:18px;margin-top:16px}
@media (min-width:700px){.drops{grid-template-columns:1fr 1fr}}
.drop{position:relative;display:block;text-decoration:none;color:var(--text);padding:16px 14px 14px;border-radius:22px;overflow:hidden;
  background:var(--fx-haze),linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);box-shadow:var(--fx-card);animation:in .45s ease both;animation-delay:var(--d,0ms);transition:transform .12s,box-shadow .2s,border-color .2s}
.drop::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--grad-1),var(--grad-2),var(--grad-3))}
.drop:active{transform:scale(.985)}
.drop:hover,.drop:active{border-color:rgba(var(--accent-rgb),calc(0.3 * var(--fx-k)))}
.drop-top{display:flex;justify-content:space-between;align-items:center;font:800 11px system-ui,sans-serif;letter-spacing:.18em;color:var(--muted)}
.drop-num{display:inline-block;font:800 11px system-ui,sans-serif;letter-spacing:.2em;color:var(--accent-2);text-shadow:var(--fx-glow-2)}
.drop-name{margin:6px 0 2px;font-family:var(--disp);font-weight:400;font-size:clamp(40px,12.5vw,58px);line-height:.92;letter-spacing:.01em;text-transform:uppercase;color:var(--accent);text-shadow:var(--fx-glow-1),var(--fx-glow-3)}
.drop-name.xl{font-size:clamp(54px,17vw,88px);margin-top:8px}
.drop-tag{margin:0 0 12px;font:800 12px/1.35 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.quad{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:14px;overflow:hidden}
.quad img,.quad i{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--stage)}
.drop.skel{min-height:420px}.drop.skel .quad i,.dmini.skel .quad i{background:linear-gradient(100deg,var(--surface) 30%,var(--shimmer) 50%,var(--surface) 70%);background-size:300% 100%;animation:sh 1.3s linear infinite}
.drop-go{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:800 12px system-ui,sans-serif;letter-spacing:.16em;color:var(--accent)}
.drop-go i{font-style:normal;font-size:18px;transition:transform .2s}
.drop:hover .drop-go i{transform:translateX(4px)}
.drop-hero{margin:10px 0 16px}
.drop-hero .hint{margin-top:2px}
.drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dtowel{display:block;text-decoration:none;color:var(--text);border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--fx-card);animation:in .4s ease both;animation-delay:var(--d,0ms)}
.dtowel:active{transform:scale(.98)}
.dtowel-meta{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.dtowel-k{font:800 10px system-ui,sans-serif;letter-spacing:.2em;color:var(--accent-2)}
.drop-next{margin-top:18px}
.dmini{display:block;text-decoration:none;color:var(--text);scroll-snap-align:start;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--fx-card);animation:in .4s ease both;animation-delay:var(--d,0ms)}
.dmini .quad{gap:3px;border-radius:10px}
.dmini-n{display:block;margin-top:8px;font:800 9px system-ui,sans-serif;letter-spacing:.2em;color:var(--accent-2)}
.dmini b{display:block;font-family:var(--disp);font-weight:400;font-size:20px;line-height:1.05;text-transform:uppercase;color:var(--accent);text-shadow:var(--fx-glow-1)}
#home-rail{grid-auto-columns:46%}
@media (min-width:700px){#home-rail{grid-auto-columns:24%}}
.oneoff-sub{margin:-4px 0 10px;font:800 11px system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.oneoffs{margin-top:0}
.pdp-drop{margin-top:10px}.pdp-drop .chip-btn{display:inline-block}

/* ---------- PLAY: the PLAY tab's neon around everything (all via theme vars; off in charcoal-gold) ---------- */
#view-play .sink-title{white-space:nowrap;text-shadow:var(--fx-play-text)}
#view-play .sink-title span{text-shadow:none;filter:var(--fx-play-drop)}
#view-play .play-sub span,#view-play .play-sub b,#view-play .g-hint,#view-play .g-hud-l,#view-play #g-stimp,#view-play .g-result p,#view-play .g-title{text-shadow:var(--fx-play-text)}
#view-play .g-hud{padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);background:rgba(var(--bg-rgb),.55);box-shadow:var(--fx-play-box)}
#view-play .green-wrap{box-shadow:var(--fx-play-box)}
#view-play .g-result,#view-play .g-result .btn,#view-play .code-row code,#view-play .g-call{box-shadow:var(--fx-play-box)}
#view-play .g-pips i{box-shadow:var(--fx-play-box)}
#view-play .g-pips i.in{box-shadow:var(--fx-play-box),0 0 10px var(--accent)}

/* ---------- p9 ---------- */
/* nav: HOME + 4 tabs on one row at 360/390 */
@media (max-width:480px){.top{gap:4px}.brand{font-size:clamp(26px,7.3vw,34px)}.tabs{gap:1px;padding:2px}.tabs a{padding:7px 4px;letter-spacing:0;font-size:9.5px}}
@media (max-width:380px){.top{padding-left:10px;padding-right:10px}.tabs a{padding:6px 3px;font-size:9px}}
/* p9b: header/nav tabs keep their pre-p9 look (no ring) */
/* every clickable button in page content gets the home PLAY tile's colored ring (swap it with --btn-ring) */
.btn,.chip-btn,.tile,.icon-btn,.soc-pill,.pick-card,.collab-tease,.steps button,.seg,.back,#see-all{position:relative}
.btn::after,.chip-btn::after,.icon-btn::after,.soc-pill::after,.pick-card::after,.collab-tease::after,.steps button::after,.seg::after,.sound-fab::after,.back::after,#see-all::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:var(--btn-ring-w);background:var(--btn-ring);pointer-events:none;
  -webkit-mask:linear-gradient(var(--black) 0 0) content-box,linear-gradient(var(--black) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--black) 0 0) content-box exclude,linear-gradient(var(--black) 0 0)}
.steps button::after{inset:0}
.tile.play{border-width:var(--btn-ring-w)}
.steps button{padding:6px 10px;border-radius:999px}
.back,#see-all{padding:6px 12px;border-radius:999px}
.back{margin:6px 0 10px}
/* PLAY page: every piece of text gets a crisp dark outline, glow dialed back so it reads (was blown out) */
#view-play :is(h1,h2,h3,p,span,b,i,em,strong,code,div,a,button,label){text-shadow:var(--fx-play-outline)}
#view-play :is(.play-sub span,.play-sub b,.g-hint,.g-hud-l,.g-hud-l *,#g-stimp,.g-result p,.g-title,.g-call,.g-fine,code){text-shadow:var(--fx-play-text);-webkit-text-stroke:var(--play-stroke) var(--text-outline);paint-order:stroke fill}
#view-play .sink-title{text-shadow:var(--fx-play-text);-webkit-text-stroke:var(--play-title-stroke) var(--text-outline);paint-order:stroke fill}
#view-play .sink-title span{text-shadow:none;-webkit-text-stroke:var(--play-title-stroke) var(--text-outline);filter:var(--fx-play-drop)}
#view-play .btn.primary{text-shadow:none;-webkit-text-stroke:0}

/* p9b: smaller, lower mute button so it clears the home PLAY tile */
.sound-fab{width:40px;height:40px;right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
.sound-fab svg{width:18px;height:18px}

/* p10: home tiles (DROPS / CREATE / PLAY) and EVERY listing (drop cards, drop-page towels, one-offs, home rail) wear the
   multicolor ring and turn cyan (--tile-hover) on hover / press, exactly like the PLAY tile. Header tabs stay plain. */
.tile,.card,.dtowel,.dmini{border:var(--btn-ring-w) solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--btn-ring) border-box;transition:transform .12s,border-color .2s,box-shadow .2s}
.drop{border:var(--btn-ring-w) solid transparent;background:var(--fx-haze) padding-box,linear-gradient(160deg,var(--surface-2),var(--surface)) padding-box,var(--btn-ring) border-box}
.tile:hover,.tile:active,.tile:focus-visible,.card:hover,.card:active,.card:focus-visible,.dtowel:hover,.dtowel:active,.dtowel:focus-visible,.dmini:hover,.dmini:active,.dmini:focus-visible,.drop:hover,.drop:active,.drop:focus-visible{
  border-color:var(--tile-hover);box-shadow:0 0 22px rgba(var(--accent-rgb),calc(0.28 * var(--fx-k))),var(--fx-card)}
.dmini:active,.dtowel:active,.card:active{transform:scale(.98)}
/* p10: 10 pips fit at 360px */
.g-hud-l{min-width:0;flex:1 1 auto}.g-hud-r{flex:none}#g-for,#g-miss{white-space:normal;overflow-wrap:anywhere}#g-pips{gap:4px;flex-wrap:nowrap}#g-pips i{width:10px;height:10px;flex:none}#g-pips i.x::after{inset:2px 3.2px}
/* p10: home SHOP DROPS / MAKE YOURS wear the same multicolor ring + cyan hover/press as the tiles */
#cta-shop,#cta-make{border:var(--btn-ring-w) solid transparent;transition:transform .12s,border-color .2s,box-shadow .2s}
#cta-shop{background:linear-gradient(var(--accent),var(--accent)) padding-box,var(--btn-ring) border-box}
#cta-make{background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--btn-ring) border-box}
#cta-shop::after,#cta-make::after{content:none}
#cta-shop:hover,#cta-shop:active,#cta-shop:focus-visible,#cta-make:hover,#cta-make:active,#cta-make:focus-visible{border-color:var(--tile-hover);box-shadow:0 0 22px rgba(var(--accent-rgb),calc(0.28 * var(--fx-k))),var(--fx-card)}
#cta-shop:active,#cta-make:active{transform:scale(.985)}
/* p10: tighter fan gap so the PLAY tile clears the mute button at 390x844 */
.home .fan{margin:4px 0 8px}
.home .tiles{margin-top:8px}
/* p11: drops feed cards: drop number stays top-left, name + tagline centered; no towel count / SHOP THE DROP */
.drop .drop-top{justify-content:flex-start}
.drop .drop-name,.drop .drop-tag{text-align:center}
/* p11: home SHOP DROPS = MAKE YOURS, identical look */
#cta-shop.btn.primary,#cta-shop{background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--btn-ring) border-box;color:var(--text);box-shadow:none;text-shadow:none}
#cta-shop:hover,#cta-shop:active,#cta-shop:focus-visible{background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--btn-ring) border-box;border-color:var(--tile-hover);box-shadow:0 0 22px rgba(var(--accent-rgb),calc(0.28 * var(--fx-k))),var(--fx-card)}
/* p11: won code stays visible above the practice green */
.g-banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:8px 10px;border-radius:var(--r);border:var(--btn-ring-w) solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--btn-ring) border-box;font:800 11px system-ui,sans-serif;letter-spacing:.1em}
.g-banner[hidden]{display:none}
.g-banner code{font:800 14px ui-monospace,monospace;letter-spacing:.08em;color:var(--text)}
.g-banner .btn{width:auto;margin:0;padding:7px 12px;font-size:11px}
.g-banner span{flex:1 0 100%}

/* p12: uniform drops grid: number centered, fixed title + tagline boxes so every 2x2 lines up with its neighbour */
.drops{align-items:start}
.drop .drop-top{justify-content:center;height:16px}
.drop-nbox{height:94px;margin:6px 0 4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.drop .drop-name{margin:0;max-width:100%;text-align:center;line-height:.95;font-size:44px;overflow-wrap:normal}
.drop .drop-name.two{text-wrap:balance;line-height:.98}
.drop-tbox{height:34px;margin:0 0 12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.drop .drop-tag{margin:0;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-wrap:balance}
.drop.skel{min-height:0}.drop.skel .quad{margin-top:166px}
/* p12: every towel image gets a neon frame */
.quad{gap:8px;border-radius:0;overflow:visible}
.quad img,.quad i,.card-img img{box-sizing:border-box;border:var(--towel-ring-w) solid transparent;border-radius:var(--towel-r);background:linear-gradient(var(--stage),var(--stage)) padding-box,var(--towel-ring) border-box;box-shadow:var(--towel-glow)}
.quad img,.quad i{width:100%;aspect-ratio:1;object-fit:cover}
.dmini .quad{gap:5px}.dmini .quad img,.dmini .quad i{border-radius:8px}
.card-img img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
/* p12: SINK IT. neon stage backdrop (canvas from playbg.js) */
#view-play{position:relative;isolation:isolate}
#play-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
/* p12: home hero fan towels get the same neon towel frame */
.home .fan-c{box-sizing:border-box;padding:max(0px,calc(var(--fan-border) - var(--towel-ring-w)));border:var(--towel-ring-w) solid transparent;background:linear-gradient(var(--stage),var(--stage)) padding-box,var(--towel-ring) border-box}
.home .fan-c:not(:nth-child(3)){box-shadow:var(--towel-glow)}
/* p13: home hero centered, no CTA buttons; tiles centered, PLAY centered (full row on phones, middle of 3-up on wide) */
.home-hero{text-align:center}
.home-hero h1,.home-hero p{margin-left:auto;margin-right:auto}
.home .tile{align-items:center;text-align:center}
@media (min-width:700px){.home .tile.play{order:2}.home .tile[data-tile=design]{order:3}}
/* p14: every heading + subheading centered on every view, balanced wraps, never wider than the page */
.view h1,.view h2,.view h3,.step h1,.step h2,.step h3,.hero p,.oneoff-sub,.drop-hero,.drop-hero .drop-tag,.drop-hero .hint,.pdp-drop,.g-result,.g-result p,.play-sub{text-align:center;text-wrap:balance}
.view h1,.view h2,.view h3,.step h1,.step h2,.step h3{max-width:100%;overflow-wrap:break-word;margin-left:auto;margin-right:auto}
.hero p{margin-left:auto;margin-right:auto}
.row-head{flex-direction:column;align-items:center;gap:4px}
.eyebrow{justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
.pdp-head{flex-direction:column;align-items:center;gap:6px}
.drop-hero .drop-num{display:block;text-align:center}
/* p14: hero fan towels are tappable links with the listings' cyan hover (neon frame stays at rest) */
.home .fan-c[data-href]{cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:transform .3s,box-shadow .2s,background .2s}
.home .fan-c[data-href]:hover,.home .fan-c[data-href]:active,.home .fan-c[data-href]:focus-visible{z-index:4;outline:none;background:linear-gradient(var(--stage),var(--stage)) padding-box,linear-gradient(var(--tile-hover),var(--tile-hover)) border-box;box-shadow:0 0 0 1px var(--tile-hover),0 0 24px rgba(var(--accent-rgb),calc(0.45 * var(--fx-k))),0 14px 34px rgba(var(--shadow-rgb),.5)}
.home .fan img.fan-c:nth-child(3):hover,.home .fan img.fan-c:nth-child(3):active{animation-play-state:paused}

/* p15: the "1" in SINK 1 IN 3 is upright and inline, same style as the words around it */
[data-need]{display:inline !important;font-style:normal !important;transform:none !important;font:inherit;color:inherit}

/* p15 logo: the ORIGINAL display font (var(--disp)), 25% bigger than p14 at every size (p14: clamp(26px,7.6vw,34px) / <=480 7.3vw / <=340 7.1vw).
   Wide screens: beside the nav as before. Below 700px the logo gets its own centered row, one line, nav under it, so it never collides. */
.brand{font-family:var(--disp);font-size:clamp(32px,9.5vw,42px);white-space:nowrap}
@media (max-width:700px){.top{flex-wrap:wrap;justify-content:center;row-gap:8px}.brand{font-size:clamp(32px,9.1vw,42px);flex:0 0 100%;text-align:center}.tabs{margin:0 auto}}
@media (max-width:340px){.brand{font-size:8.9vw}}

/* p15: PRACTICE GREEN button in the done / won box: bold caps, multicolor --btn-ring (from .btn::after), cyan on hover / press / focus */
#g-result .g-practice{font-weight:900;letter-spacing:.14em}
#g-result .g-practice:hover,#g-result .g-practice:active,#g-result .g-practice:focus-visible{border-color:var(--tile-hover);color:var(--tile-hover);box-shadow:0 0 22px rgba(var(--accent-rgb),calc(0.28 * var(--fx-k)))}
#g-result .g-practice:hover::after,#g-result .g-practice:active::after,#g-result .g-practice:focus-visible::after{background:var(--tile-hover)}
/* p17: DESKTOP + iPad landscape (>=900px). Wider container, more air between everything, content dropped lower.
   Phones (<700px) untouched. The play view stays a centered column so the green canvas keeps its sizing. */
@media (min-width:900px){
  :root{--dk-pad:clamp(40px,4vw,64px);--dk-max:1400px;--dk-gap:clamp(28px,2.4vw,40px);--dk-sec:clamp(72px,7vw,112px)}
  .top{padding:22px max(var(--dk-pad),calc((100vw - var(--dk-max)) / 2 + var(--dk-pad)))}
  .brand{font-size:clamp(42px,3.4vw,52px)}
  .tabs{gap:6px;padding:5px}
  .tabs a{padding:10px 20px;font-size:12.5px;letter-spacing:.16em}
  main{max-width:var(--dk-max);padding:clamp(48px,6vh,88px) var(--dk-pad) var(--dk-sec)}
  .steps{max-width:760px;padding:clamp(28px,4vh,48px) var(--dk-pad) 0}
  .btn{margin-top:22px;padding:18px 28px;font-size:15px}
  .hero{margin:0 0 clamp(28px,4vh,48px)}
  .hero h1{font-size:clamp(84px,7.4vw,128px)}
  .hero p{font-size:17px;margin-top:18px}
  h2{font-size:52px;margin:10px 0 24px}

  /* HOME */
  .home .fan{max-width:720px;height:410px;margin:0 auto 56px}
  .home .fan-c{bottom:30px}
  .home .tiles{max-width:1120px;margin:0 auto;gap:var(--dk-gap)}
  .home .tile{min-height:176px;padding:28px}
  .home .tile b{font-size:44px}
  .home .tile span{font-size:14px}
  .row-head{margin:var(--dk-sec) 0 18px}
  .row-head h2,.h2{font-size:48px}
  .h2{margin:var(--dk-sec) 0 32px}
  .oneoff-sub{margin:0 0 36px;font-size:13px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--dk-gap);margin-top:0}
  .card-t{font-size:19px}
  .why{max-width:1120px;margin:0 auto;gap:var(--dk-gap)}
  .why li{padding:28px}
  .collab-tease{max-width:760px;margin:var(--dk-sec) auto 0;padding:24px 28px}

  /* DROPS */
  .shop-hero{margin-bottom:clamp(36px,5vh,64px)}
  .drops{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--dk-gap);margin-top:0}
  .drop{padding:22px 20px 20px}
  .quad{gap:12px}
  .diy{max-width:520px;margin:clamp(48px,6vh,72px) auto 0}
  .drop-hero{margin:24px 0 clamp(36px,5vh,56px)}
  .drop-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--dk-gap)}
  .drop-next{max-width:520px;margin:clamp(48px,6vh,72px) auto 0}

  /* PRODUCT: gallery left, details right */
  #view-product:not([hidden]){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(48px,5vw,96px);align-items:start;max-width:1240px;margin:0 auto}
  #view-product > *{grid-column:2}
  #view-product > .back{grid-column:1 / -1;justify-self:start;margin:0 0 28px}
  #view-product > .pdp-gallery{grid-column:1;grid-row:2 / span 7}
  #view-product > .dots{grid-column:1;grid-row:2 / span 7;align-self:start;margin-top:calc(100% + 18px)} /* gallery is square: % margin = column width */
  #view-product .pdp-head{margin-top:clamp(24px,6vh,72px);gap:12px}
  #view-product .pdp-head h2{font-size:60px}
  #view-product .pdp-drop{margin-top:16px}
  #view-product .specs{margin-top:32px;font-size:15px}
  #view-product .btn{margin-top:24px}

  /* CREATE: towel stage left, controls right; review + ship in a roomy center column */
  #step-design.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,5vw,96px);align-items:start;max-width:1240px;margin:0 auto}
  #step-design > *{grid-column:2}
  #step-design > .stage{grid-column:1;grid-row:1 / span 8;width:100%;max-width:560px;justify-self:end}
  #step-design .hero{margin-top:8px}
  .pick{gap:var(--dk-gap);margin-bottom:12px}
  .pick-card{padding:22px}
  .controls{margin-top:28px}
  #step-review.on,#step-ship.on{max-width:760px;margin:0 auto}
  .panel{padding:24px;margin-top:24px}

  /* PLAY: title + HUD on the left, the whole green on the right, sized to fit the screen height (canvas sizes to its wrap) */
  #view-play:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,5vw,96px);align-items:start;align-content:start;max-width:1240px;margin:0 auto}
  #view-play > :not(.hp):not(#play-bg){grid-column:1;width:100%;max-width:520px;justify-self:center}
  #view-play > #green-wrap.green-wrap{grid-column:2;grid-row:1 / span 6;width:min(560px,calc((100vh - 190px) * .714));max-width:none;margin:0}
  #view-play .play-hero{margin-top:clamp(12px,4vh,48px)}
  #view-play .g-hud{margin-top:28px}
  /* COLLAB */
  #view-collab{max-width:900px;margin:0 auto}
  .soc-grid{gap:var(--dk-gap)}
  .foot{padding-top:56px}
}
@media (min-width:1700px){:root{--dk-max:1560px}.home .fan{max-width:780px;height:520px}}
/* p18: SUBHEADINGS: short punchy sentences, one per line, stacked + centered */
.lines > span,.lines > b{display:block}
.hero p.lines,.oneoff-sub.lines,.drop-hero .lines,.play-sub.lines,.pick-card .lines,.collab-tease .lines{text-align:center;margin-left:auto;margin-right:auto}
.hero p.lines{max-width:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.tile .lines,.why .lines{text-align:center}
.pick-card .lines{text-align:inherit;margin:0}
.drop .drop-tag.lines{display:block;-webkit-line-clamp:none;line-clamp:none}
.drop .drop-tag.lines span{white-space:nowrap;overflow:hidden;text-overflow:clip;font-size:11px;line-height:1.35}
.drop-tbox{height:36px}

/* p19: NEON HEADING TEXT: the letters themselves are the tube (stroke + layered glow in break-1 cyan / break-2 pink), flickering like a busted sign. Opacity-only flicker, staggered; static under reduced motion */
.view h1,.view h2:not(.drop-name),.step h1,.step h2{-webkit-text-stroke:1.5px var(--break-1);paint-order:stroke fill;
  text-shadow:0 0 2px var(--break-1),0 0 9px color-mix(in srgb,var(--break-1) 70%,transparent),0 0 22px color-mix(in srgb,var(--break-2) 55%,transparent),0 0 42px color-mix(in srgb,var(--break-2) 30%,transparent);
  animation:neon-flicker 7.3s linear infinite;will-change:opacity}
.view h2:not(.drop-name),.step h2{-webkit-text-stroke:1px var(--break-2);
  text-shadow:0 0 2px var(--break-2),0 0 8px color-mix(in srgb,var(--break-2) 70%,transparent),0 0 18px color-mix(in srgb,var(--break-1) 45%,transparent),0 0 34px color-mix(in srgb,var(--break-1) 25%,transparent);
  animation:neon-flicker-b 9.1s linear infinite}
.drop-hero h1.drop-name{-webkit-text-stroke-color:var(--break-2)}
#view-shop .hero h1{animation-delay:-2.1s}#view-design .hero h1{animation-delay:-4.4s}#view-play .hero h1{animation-delay:-1.3s}#view-collab .hero h1{animation-delay:-5.6s}
.view h2.h2{animation-delay:-3.7s}#pdp-title{animation-delay:-6.2s}.step:nth-of-type(2n) h2{animation-delay:-2.9s}.step:nth-of-type(3n) h2{animation-delay:-5.3s}
@keyframes neon-flicker{0%,13%,15.5%,17%,52%,54%,79%,100%{opacity:1}14%{opacity:.25}16%{opacity:.6}16.4%{opacity:.15}53%{opacity:.55}80%{opacity:.08}80.6%{opacity:1}81.2%{opacity:.3}82%{opacity:1}}
@keyframes neon-flicker-b{0%,31%,33%,66%,68.5%,100%{opacity:1}32%{opacity:.2}67%{opacity:.4}67.6%{opacity:.1}68%{opacity:.7}}
/* a touch more air around headings and their stacked lines */
.view h1,.view h2,.step h1,.step h2{margin-bottom:.22em}
.hero h1{margin-bottom:6px}
.lines > span,.lines > b{margin:3px 0}
.row-head{gap:10px;margin-bottom:6px}

/* p18: HERO TOWELS spread out (more air between them); still links, still clipped to the page on phones */
/* translateX % is of the towel's own width: 40% (was 24%) on phones, nearly a full towel apart on desktop */
.home .fan{height:clamp(196px,52vw,280px)}
.home .fan-c{width:38%;--x:calc((var(--i) - 2) * 37%);--r:calc((var(--i) - 2) * 6deg)}
.home .fan-c:nth-child(3){width:42%}
.home .hero p.lines{font-size:13px;line-height:1.3;margin-top:8px}
.tile .lines{line-height:1.3}
@media (min-width:900px){
  .home .fan{max-width:1180px;height:380px;overflow:visible}
  .home .fan-c{width:20%;--x:calc((var(--i) - 2) * 96%);--r:calc((var(--i) - 2) * 4deg)}
  .home .fan-c:nth-child(3){width:22%}
  .home .hero p.lines{font-size:17px;margin-top:18px}
}
@media (min-width:1700px){.home .fan{max-width:1300px;height:420px}}

/* p18: AMBIENT LIGHT: slow neon glow drifting behind every page. Compositor-only (transform/opacity), paused on the green */
html{background:var(--fx-haze),var(--fx-grid),var(--fx-body),var(--bg)}
body{background:transparent}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:90vmax;height:90vmax;border-radius:50%;will-change:transform,opacity}
body::before{left:-30vmax;top:-35vmax;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.16),rgba(var(--accent-deep-rgb),.07) 55%,transparent);animation:amb-a 34s ease-in-out infinite alternate}
body::after{right:-35vmax;bottom:-40vmax;background:radial-gradient(closest-side,rgba(var(--accent-2-rgb),.14),rgba(var(--accent-deep-rgb),.06) 55%,transparent);animation:amb-b 27s ease-in-out infinite alternate}
@keyframes amb-a{0%{transform:translate(0,0) scale(1);opacity:.9}50%{transform:translate(45vw,30vh) scale(1.15);opacity:.55}100%{transform:translate(15vw,70vh) scale(.95);opacity:.85}}
@keyframes amb-b{0%{transform:translate(0,0) scale(1);opacity:.6}50%{transform:translate(-40vw,-35vh) scale(1.1);opacity:1}100%{transform:translate(-10vw,-65vh) scale(.9);opacity:.7}}
body:has(#view-play:not([hidden]))::before,body:has(#view-play:not([hidden]))::after{animation-play-state:paused;opacity:0}

/* p19: hero towels: thicker neon frame + more glow (hover/click rules still win) */
.home .fan > .fan-c{border-width:4px;padding:max(0px,calc(var(--fan-border) - 4px));
  box-shadow:0 14px 30px rgba(var(--shadow-rgb),.5),0 0 14px rgba(var(--accent-rgb),.55),0 0 30px rgba(var(--accent-2-rgb),.35),0 0 54px rgba(var(--accent-deep-rgb),.25)}
/* p19: every hero towel bobs on its own clock (uses `translate`, so fan transform/rotation and hover stay intact) */
.home .fan img.fan-c{animation:floaty 4s ease-in-out infinite}
.home .fan img.fan-c:nth-child(1){animation-duration:4.6s;animation-delay:-1.2s}
.home .fan img.fan-c:nth-child(2){animation-duration:3.7s;animation-delay:-2.6s}
.home .fan img.fan-c:nth-child(4){animation-duration:4.3s;animation-delay:-.7s}
.home .fan img.fan-c:nth-child(5){animation-duration:3.9s;animation-delay:-3.1s}
.home .fan img.fan-c:hover,.home .fan img.fan-c:active,.home .fan img.fan-c:focus-visible{animation-play-state:paused}
/* p20: roomier heading lines so the flickering glow of stacked words never touches */
.hero h1{line-height:1.06}
.view h2:not(.drop-name),.step h2{line-height:1.12}
.drop-hero h1.drop-name{line-height:1.08}
.drop .drop-name.two{line-height:1.04}
/* THE DROPS. on one line at every width */
.hero h1.one-line{white-space:nowrap;font-size:clamp(48px,16vw,84px)}
/* p20: home hero sits lower, balanced between the header and the towel fan + buttons */
.home-hero{padding-top:22px}
.home-hero p.lines{margin-top:12px}
@media (min-width:900px){
  .home-hero{padding-top:64px}
  .hero h1.one-line{font-size:clamp(84px,7.4vw,128px)}
}
@media (min-width:900px){.home .fan{height:320px;margin-top:10px}}
@media (min-width:1700px){.home .fan{height:370px}}