/* Dropshop storefront — migrated from the Dropshop artifact. Sticker-shop look: ink outlines, hard offset shadows, candy colour per category. */
/* Layout: sticker-shop storefront. Ink-outlined blocks with hard offset shadows, candy colour per category,
   rotating "FREE" stickers on every product, a scrolling promo ribbon, chunky press-down buttons. */
:root{
  --ground:#FFF6FB; --surface:#FFFFFF; --surface-2:#FCEBF4; --ink:#1B1036; --muted:#6A5C86; --line:#1B1036; --hair:#EBDCF0;
  --pop:#FF2E7E; --pop-ink:#FFFFFF; --sun:#FFD23F; --sun-ink:#2A1B00; --mint:#16D3A0; --mint-ink:#062A20; --sky:#3BA8FF; --grape:#8B5CF6;
  --warn:#B25E00; --warn-soft:#FFF0D6; --bad:#D1263B; --bad-soft:#FFE3E7;
  --hard:4px 4px 0 var(--line); --hard-sm:3px 3px 0 var(--line);
  --scrim:rgba(27,16,54,.5);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --ground:#140C2B; --surface:#21163F; --surface-2:#2C1F52; --ink:#FFF4FB; --muted:#BFAEDD; --line:#05020F; --hair:#3A2C66;
  --pop:#FF4D93; --sun:#FFD84F; --mint:#2EE0B0; --sky:#5AB8FF; --grape:#A78BFA;
  --warn:#FFB547; --warn-soft:#3A2A14; --bad:#FF7A86; --bad-soft:#3D1D26; --scrim:rgba(0,0,0,.65);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#140C2B; --surface:#21163F; --surface-2:#2C1F52; --ink:#FFF4FB; --muted:#BFAEDD; --line:#05020F; --hair:#3A2C66;
  --pop:#FF4D93; --sun:#FFD84F; --mint:#2EE0B0; --sky:#5AB8FF; --grape:#A78BFA;
  --warn:#FFB547; --warn-soft:#3A2A14; --bad:#FF7A86; --bad-soft:#3D1D26; --scrim:rgba(0,0,0,.65);
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font:15px/1.5 var(--body);padding-inline:16px;padding-block:0 56px;
  background-image:radial-gradient(circle at 1px 1px,var(--hair) 1.2px,transparent 1.3px);background-size:22px 22px}
.wrap{max-width:1180px;margin:0 auto}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;text-wrap:balance;margin:0}
h1{font-size:clamp(36px,7vw,72px);font-weight:800;line-height:.95}
h2{font-size:clamp(22px,3.4vw,30px);font-weight:800;line-height:1.05}
h3{font-size:17px;font-weight:800}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:12px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--pop)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.hl{background:var(--sun);color:var(--sun-ink);padding:0 .12em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pink{color:var(--pop)}

/* promo ribbon */
.ribbon{margin-inline:-16px;background:var(--ink);color:var(--ground);overflow:hidden;white-space:nowrap;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase}
.ribbon .run{display:inline-flex;gap:28px;padding:8px 0;animation:marq 26s linear infinite}
.ribbon .run span{display:inline-flex;align-items:center;gap:28px}
.ribbon .run span::after{content:"✦";color:var(--sun)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--surface);border-bottom:2.5px solid var(--line);margin-inline:-16px;padding:10px 16px 0}
.hrow{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:8px;font:800 24px/1 var(--display);letter-spacing:-.03em;background:none;border:0;cursor:pointer;padding:4px;margin-left:-4px;border-radius:10px}
.logo i{width:30px;height:30px;border-radius:9px;background:var(--pop);border:2.5px solid var(--line);box-shadow:2px 2px 0 var(--line);position:relative;flex:none;transform:rotate(-8deg)}
.logo i::after{content:"";position:absolute;inset:6px 6px;border:3px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-2px)}
.search{flex:1;min-width:0;position:relative}
.search input[type=text]{width:100%;font:600 15px var(--body);padding:11px 14px 11px 40px;border-radius:999px;border:2.5px solid var(--line);background:var(--surface-2);color:var(--ink)}
.search input[type=text]::placeholder{color:var(--muted);font-weight:500}
.search input[type=text]:focus{outline:none;background:var(--surface);box-shadow:var(--hard-sm)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--ink)}
.hbtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:2.5px solid transparent;border-radius:12px;padding:8px 10px;cursor:pointer;font-weight:800;font-size:14px;white-space:nowrap}
.hbtn:hover{border-color:var(--line);box-shadow:var(--hard-sm)}
.hbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
.pts{display:inline-flex;align-items:center;gap:6px;font:800 13px var(--mono);background:var(--sun);color:var(--sun-ink);padding:7px 12px 7px 7px;border-radius:999px;border:2.5px solid var(--line);box-shadow:2px 2px 0 var(--line);white-space:nowrap}
.pts i{width:18px;height:18px;border-radius:50%;background:#FFB000;border:2px solid var(--sun-ink);display:grid;place-items:center;font:800 10px var(--body);font-style:normal;color:var(--sun-ink)}
.pts.bump{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.18) rotate(-4deg)}}
.cartbtn{position:relative}
.cartbtn b{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:99px;background:var(--pop);color:var(--pop-ink);border:2px solid var(--line);font:800 11px/16px var(--mono);text-align:center;padding:0 4px}
/* Responsive header: labels drop to icons first, then the search box (with the points pill) moves to its own row. */
.hbtn{min-height:40px;justify-content:center}
@media (max-width:1100px){.hbtn .lbl{display:none}.hbtn{padding:8px;min-width:40px}}
@media (max-width:860px){
  .hrow{flex-wrap:wrap;row-gap:10px}
  .brandwrap{margin-right:auto}
  .search{order:5;flex:1 1 60%}
  .pts{order:6}
}
@media (max-width:640px){
  .hrow{gap:6px}
  .logo{font-size:21px;gap:7px}
  .logo i,.logo img{width:27px;height:27px}
  .hbtn{padding:7px;min-width:38px;min-height:38px}
  .search input[type=text]{font-size:16px;padding:10px 12px 10px 38px}
  .pts{padding:6px 10px 6px 6px;font-size:12px}
}
@media (max-width:350px){#brandTxt{display:none}}

.cats{max-width:1180px;margin:0 auto;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 2px 12px}
.cats::-webkit-scrollbar{display:none}
.cats[hidden]{display:none}
.cats button{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px 13px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .12s}
.cats button i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--pop));border:1.5px solid var(--line)}
.cats button:hover{transform:translateY(-2px)}
.cats button[aria-pressed="true"]{background:var(--ink);color:var(--ground);box-shadow:2px 2px 0 var(--pop)}

/* buttons */
.btn{appearance:none;border:2.5px solid var(--line);cursor:pointer;font:800 16px/1 var(--body);padding:15px 20px;border-radius:14px;background:var(--pop);color:var(--pop-ink);text-align:center;box-shadow:var(--hard);transition:transform .08s,box-shadow .08s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--hard-sm)}
.btn.block{width:100%}
.btn.sun{background:var(--sun);color:var(--sun-ink)}
.btn.mint{background:var(--mint);color:var(--mint-ink)}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn.sm{padding:9px 14px;font-size:13px;border-radius:10px;border-width:2px;box-shadow:var(--hard-sm)}
.btn.sm:active{box-shadow:0 0 0 var(--line);transform:translate(3px,3px)}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:13px;font-weight:600}
.back{background:none;border:0;padding:6px 0;color:var(--muted);font-weight:800;cursor:pointer}
.back:hover{color:var(--pop)}

/* stickers */
.sticker{position:absolute;z-index:2;display:grid;place-items:center;text-align:center;border-radius:50%;background:var(--sun);color:var(--sun-ink);border:2.5px solid var(--line);font:800 11px/1 var(--body);text-transform:uppercase;letter-spacing:.02em;box-shadow:2px 2px 0 var(--line);transform:rotate(12deg)}
.sticker b{display:block;font:800 18px/1 var(--display);letter-spacing:-.02em;text-transform:none}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:center;background:var(--surface);border:2.5px solid var(--line);border-radius:24px;box-shadow:6px 6px 0 var(--line);padding:20px 24px;margin:16px 0 12px;overflow:hidden}
.hero::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--sun) 0 38%,transparent 39%),radial-gradient(circle,var(--pop) 0 60%,transparent 61%);opacity:.18}
.hero .lead{position:relative;display:flex;flex-direction:column;gap:10px}
.hero h1{font-size:clamp(28px,3.9vw,44px);line-height:1.06;letter-spacing:-.03em;padding-bottom:.06em}
/* the key phrase: pink-to-violet gradient lettering, no box behind it, so nothing covers the descenders */
.hero h1 .hl{background:linear-gradient(100deg,var(--pop) 10%,var(--grape) 90%);color:transparent;-webkit-background-clip:text;background-clip:text;
  padding:0 .04em .12em 0;border-radius:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.hero h1 .hl{background:none;color:var(--pop)}}
.hero .sub{font-size:14px;max-width:48ch}
.hero .ctas .btn{padding:12px 18px;font-size:15px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.perks{display:flex;flex-wrap:wrap;gap:8px}
.perks span{font:700 12px var(--body);padding:5px 10px;border-radius:999px;background:var(--surface-2);border:1.5px solid var(--line)}
.fan{position:relative;height:210px}
.fan .card{cursor:pointer;position:absolute;width:52%;max-width:190px;left:50%;top:50%;border:2.5px solid var(--line);border-radius:20px;box-shadow:var(--hard);overflow:hidden;background:var(--surface);animation:bob 4s ease-in-out infinite}
.fan .card .art{border-radius:0;border-bottom:2.5px solid var(--line)}
.fan .card .cap{padding:8px 10px;display:flex;justify-content:space-between;gap:6px;font:800 13px var(--body);white-space:nowrap}
.fan .card .cap s{color:var(--muted);font-weight:600}
.fan .card .cap em{font-style:normal;color:var(--pop)}
.fan .c1{transform:translate(-88%,-58%) rotate(-10deg)}
.fan .c2{transform:translate(-50%,-50%) rotate(2deg);z-index:2;animation-delay:.6s}
.fan .c3{transform:translate(-12%,-40%) rotate(11deg);animation-delay:1.2s}
@keyframes bob{50%{margin-top:-6px}}
.fan .sticker{width:76px;height:76px;right:4%;top:0;z-index:3;background:var(--pop);color:#fff;font-size:11px;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-9px) rotate(14deg)}}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding:20px 18px}.fan{height:190px}}
@media (max-width:560px){
  .hero{padding:22px 18px;gap:18px}
  .hero .ctas .btn{flex:1 1 auto}
  .fan{height:160px}
  .fan .card{width:40%;max-width:150px;border-width:2px;border-radius:14px;box-shadow:3px 3px 0 var(--line)}
  .fan .card .cap{padding:6px 8px}
  .fan .card .cap .nm{font-size:10px}
  .fan .card .cap em{font-size:13px}
  .fan .card .cap s{font-size:11px}
  .fan .card .flag{font-size:8px;padding:2px 6px;top:6px;left:6px}
  .fan .c1{transform:translate(-100%,-56%) rotate(-9deg)}
  .fan .c3{transform:translate(0%,-42%) rotate(10deg)}
  .fan .sticker{width:62px;height:62px;right:2%;top:0;font-size:9px}
  .fan .sticker b{font-size:13px}
}

/* 1-2-3 stepper inside the banner: the active step pulses in turn */
.steps3{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));align-items:center;gap:6px 10px}
.steps3 .arrow{display:none}
.steps3 li:not(.arrow){display:flex;align-items:center;gap:8px;background:var(--surface-2);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;animation:stepglow 6.6s ease-in-out infinite}
.steps3 li:nth-child(3){animation-delay:1.65s}.steps3 li:nth-child(5){animation-delay:3.3s}.steps3 li:nth-child(7){animation-delay:4.95s}
.steps3 b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--display);border:2px solid var(--line);color:#fff;background:var(--pop);flex:none}
.steps3 li:nth-child(3) b{background:var(--sun);color:var(--sun-ink)}.steps3 li:nth-child(5) b{background:var(--sky);color:#06213B}.steps3 li:nth-child(7) b{background:var(--mint);color:var(--mint-ink)}
.steps3 span{display:flex;flex-direction:column;line-height:1.1;font:800 12px var(--body)}
.steps3 small{font:600 10px var(--body);color:var(--muted)}
.steps3 .arrow{font:800 14px var(--body);color:var(--muted)}
@keyframes stepglow{0%,30%,100%{transform:none;box-shadow:none;background:var(--surface-2)}8%,22%{transform:translateY(-3px) rotate(-1.5deg);box-shadow:var(--hard-sm);background:var(--surface)}}
.steps3.flash li:not(.arrow){animation:stepflash .6s ease-in-out 2}
@keyframes stepflash{50%{transform:scale(1.06);box-shadow:var(--hard-sm);background:var(--sun)}}
@media (max-width:560px){.steps3{gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}.steps3 li:not(.arrow){padding:3px 10px 3px 3px}.steps3 small{display:none}}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.how div{display:flex;gap:9px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:8px 10px;box-shadow:var(--hard-sm)}
.how b{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font:800 14px var(--display);border:2px solid var(--line)}
.how div:nth-child(1) b{background:var(--pop);color:#fff}.how div:nth-child(2) b{background:var(--sun);color:var(--sun-ink)}.how div:nth-child(3) b{background:var(--mint);color:var(--mint-ink)}
.how span{font-weight:700;font-size:13px;line-height:1.25}
.how small{display:block;font-weight:500;color:var(--muted);font-size:11px}
@media (max-width:820px){.how{grid-template-columns:1fr;gap:6px}.how div{padding:6px 10px}.how small{display:inline;margin-left:4px}}

.toolbar{display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.toolbar .cnt{font:700 14px var(--body);color:var(--muted);letter-spacing:0}
@media (max-width:430px){.grid{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:330px){.grid{grid-template-columns:1fr}}
.toolbar select{font:700 14px var(--body);padding:8px 12px;border-radius:10px;border:2px solid var(--line);background:var(--surface);color:var(--ink)}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
/* dense catalog grid: more choices per screen */
.grid.dense{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.grid.dense .pcard{padding:8px 8px 10px;border-radius:16px;gap:4px;box-shadow:var(--hard-sm);animation-delay:calc(var(--i,0)*18ms)}
.grid.dense .pcard:hover{box-shadow:5px 6px 0 var(--line)}
.grid.dense .pcard .art{width:calc(100% + 16px);margin:-8px -8px 4px;border-radius:13.5px 13.5px 0 0;border-bottom-width:2px}
.grid.dense .pcard .art svg{width:32%}
.grid.dense .pcard .sticker{width:46px;height:46px;top:-8px;right:-6px;font-size:8px;transform:rotate(12deg)}
.grid.dense .pcard .sticker b{font-size:12px}
.grid.dense .pcard .brand{font-size:10px;padding:0 2px}
.grid.dense .pcard .nm{font-size:13px;line-height:1.2;min-height:2.4em;padding:0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid.dense .prow{padding:0 2px;gap:6px}
.grid.dense .prow .now{font-size:19px}
.grid.dense .prow .was{font-size:12px}
.grid.dense .how2{font:700 11px var(--body);color:var(--muted);padding:0 2px}
.badge2{position:absolute;top:8px;left:8px;z-index:4;font:800 10px/1 var(--body);letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:2px solid var(--line);box-shadow:2px 2px 0 var(--line);background:var(--surface);color:var(--ink)}
.badge2.you{background:var(--pop);color:#fff}
.badge2.top{background:var(--sun);color:var(--sun-ink)}
.badge2.quick{background:var(--mint);color:var(--mint-ink)}
.badge2.new{background:var(--sky);color:#06213B}
.badge2.hot{background:var(--ink);color:var(--ground)}
.badge2.cat{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;text-transform:none;letter-spacing:0;font-size:11px;padding:3px 9px 3px 5px}
.badge2.cat svg{width:14px;height:14px;filter:drop-shadow(1px 1px 0 rgba(27,16,54,.4))}
.badge2.low{background:var(--bad);color:#fff;animation:lowpulse 1.6s ease-in-out infinite}
@keyframes lowpulse{50%{transform:scale(1.07)}}
.pcard.soldout .art{filter:grayscale(.6);opacity:.75}
.rate{font:800 11px var(--body);color:var(--sun-ink);background:var(--sun);border:1.5px solid var(--line);border-radius:999px;padding:1px 6px;margin-left:auto}
.rate.big{font-size:12px;vertical-align:1px;color:var(--sun-ink)}
@media (max-width:430px){.grid.dense{grid-template-columns:1fr 1fr;gap:10px}.grid.dense .pcard .nm{font-size:12px}.grid.dense .prow .now{font-size:17px}}
/* department cards on the homepage */
.depts{display:flex;gap:8px;margin-bottom:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.depts::-webkit-scrollbar{display:none}
.dept{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:7px 12px 7px 8px;cursor:pointer;box-shadow:var(--hard-sm);position:relative;transition:transform .12s,box-shadow .12s;text-align:left}
.dept::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--c);border:1.5px solid var(--line);flex:none}
.dept:hover{transform:translateY(-2px);box-shadow:var(--hard)}
.dept b{font:800 13px var(--body)}
.dept span{display:none}
.dept em{font:700 11px var(--mono);font-style:normal;color:var(--muted)}
/* filter bar */
.toolbar .crumb{font:700 14px var(--body);color:var(--muted);letter-spacing:0}
.toolbar .sortlbl{font-weight:700;white-space:nowrap}
.fbar{display:flex;flex-direction:column;gap:8px;margin:-4px 0 14px}
.frow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:0 -2px;scroll-snap-type:x proximity}
.frow::-webkit-scrollbar{display:none}
.frow2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.frow2 .frow{flex:1 1 auto;min-width:0}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:5px 11px;font:800 12px var(--body);cursor:pointer;scroll-snap-align:start;transition:transform .1s}
.fchip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--pop));border:1.5px solid var(--line)}
.fchip small{font:700 11px var(--mono);color:var(--muted)}
.fchip:hover{transform:translateY(-1px)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.fchip[aria-pressed="true"] small{color:var(--ground);opacity:.8}
.fchip.price[aria-pressed="true"]{background:var(--sun);color:var(--sun-ink)}
.fchip.price[aria-pressed="true"] small{color:var(--sun-ink)}
.brandsel select{font:800 12px var(--body);padding:6px 28px 6px 11px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);max-width:190px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px;background-size:5px 5px;background-repeat:no-repeat}
.cats button small{font:700 11px var(--mono);opacity:.7;margin-left:2px}
#sentinel{display:block;height:1px}
.pcard{position:relative;display:flex;flex-direction:column;gap:7px;text-align:left;background:var(--surface);border:2.5px solid var(--line);border-radius:20px;padding:10px 10px 14px;cursor:pointer;box-shadow:var(--hard);transition:transform .14s,box-shadow .14s;animation:pop .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i,0)*40ms)}
.pcard:hover{transform:translate(-2px,-4px) rotate(-.6deg);box-shadow:7px 8px 0 var(--line)}
@keyframes pop{from{opacity:.001;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.pcard .sticker{width:64px;height:64px;top:-14px;right:-12px;z-index:4}
.pcard .sticker b{font-size:16px}
.pcard .brand{font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.pcard .nm{font-weight:800;font-size:15px;line-height:1.25;min-height:2.5em;padding:0 4px}
.prow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:0 4px}
.prow .was{font:700 15px var(--mono);color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--pop)}
.prow .now{font:800 24px var(--mono);color:var(--pop)}
.prow .how2{font:700 12px var(--body);color:var(--muted)}
.paybar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px}
.instock{display:inline-flex;align-items:center;gap:5px;font:800 12px var(--body);color:var(--muted)}
.instock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);border:1.5px solid var(--line)}
.go{font:800 12px var(--body);background:var(--ink);color:var(--ground);padding:6px 10px;border-radius:999px}
.art{position:relative;width:100%;max-width:100%;aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;overflow:hidden;border:2px solid var(--line)}
.art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.28) 1.5px,transparent 1.6px);background-size:14px 14px}
.art::after{content:"";position:absolute;width:64%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.22)}
.art svg{position:relative;z-index:1;width:40%;max-width:110px;height:auto;filter:drop-shadow(3px 4px 0 rgba(27,16,54,.35));transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.pcard:hover .art svg{transform:scale(1.12) rotate(-6deg)}
.art.sq{aspect-ratio:1}
.more{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}
.empty{padding:48px 16px;text-align:center;color:var(--muted);background:var(--surface);border:2.5px dashed var(--line);border-radius:20px}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:14px;align-items:start}
@media (max-width:820px){.pdp{grid-template-columns:1fr;gap:24px}.pdp .stage{width:100%;max-width:520px;margin:0 auto}}
@media (max-width:560px){.pdp .stage .sticker{width:84px;height:84px;top:-10px;right:-4px}.pdp .stage .sticker b{font-size:20px}}
/* pay-option cards: title + price on one line, description under them */
.ways .way .badge{right:auto;left:50px}
.ways .way .dot{grid-column:1;grid-row:1/3}.ways .way b{grid-column:2;grid-row:1}.ways .way em{grid-column:3;grid-row:1;white-space:nowrap;align-self:center}.ways .way > span:not(.badge){grid-column:2/4;grid-row:2}
@media (max-width:440px){.ways .way{padding:14px 12px;gap:4px 10px}.ways .way em{font-size:16px}}
.pdp .stage{position:relative}
.pdp .stage .art{border-radius:28px;border-width:2.5px;box-shadow:6px 6px 0 var(--line)}
.pdp .stage .sticker{width:110px;height:110px;top:-14px;right:-8px;background:var(--pop);color:#fff;font-size:12px}
.pdp .stage .sticker b{font-size:26px}
.pdp .info{display:flex;flex-direction:column;gap:14px}
.pdp h1{font-size:clamp(28px,4.4vw,44px);line-height:1}
.pricebox{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:2.5px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:var(--hard-sm)}
.pricebox .was{font:700 20px var(--mono);color:var(--muted);text-decoration:line-through;text-decoration-color:var(--pop);text-decoration-thickness:3px}
.pricebox .now{font:800 38px var(--mono);color:var(--pop);line-height:1}
.pricebox span:last-child{font:700 13px var(--body);color:var(--muted)}
.ways{display:grid;gap:12px}
.way{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;text-align:left;background:var(--surface);border:2.5px solid var(--line);border-radius:18px;padding:14px 16px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.way:hover{transform:translate(-1px,-1px);box-shadow:var(--hard-sm)}
.way[aria-pressed="true"]{background:var(--sun);color:var(--sun-ink);box-shadow:var(--hard)}
.way .dot{grid-row:span 2;width:24px;height:24px;border-radius:50%;border:2.5px solid var(--line);background:var(--surface);display:grid;place-items:center}
.way[aria-pressed="true"] .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--line)}
.way b{font:800 17px var(--display)}
.way span{font-size:13px;opacity:.85}
.way em{grid-row:span 2;font:800 18px var(--mono);font-style:normal}
.way .badge{position:absolute;top:-11px;right:14px;font:800 10px var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--pop);color:#fff;border:2px solid var(--line);border-radius:999px;padding:3px 8px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.facts div{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:10px 12px;font-size:12px;color:var(--muted)}
.facts b{display:block;font-size:14px;color:var(--ink)}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
details.faq{border-top:2px dashed var(--hair);padding:12px 0;font-size:14px}
details.faq summary{cursor:pointer;font-weight:800}
details.faq p{margin-top:8px;color:var(--muted)}

/* checkout */
.co{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start;margin-top:14px}
@media (max-width:900px){.co{grid-template-columns:1fr}.co aside{order:-1;position:static}}
.panel{background:var(--surface);border:2.5px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--hard)}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.steps span{font:800 12px var(--body);padding:6px 12px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--muted)}
.steps span.on{background:var(--mint);color:var(--mint-ink)}
.steps span.now{background:var(--ink);color:var(--ground)}
aside.sum{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hh,120px) + 14px)}
@media (max-width:900px){aside.sum{position:static}}
/* phone/tablet checkout: slim progress bar pinned to the bottom instead of a sticky summary */
.mbar{display:none}
@media (max-width:900px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:12px;align-items:center;background:var(--surface);border-top:2.5px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .mbar .meter{height:16px}
  .mbar>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .mbar .btn{flex:none;padding:11px 14px;font-size:14px}
  body.hasbar{padding-bottom:96px}
  body.hasbar .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
.mini{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center}
.mini .art{border-radius:14px}
.mini .art svg{width:50%}
.lines{display:grid;grid-template-columns:1fr auto;gap:7px 0;font-size:14px;font-weight:600}
.lines .n{text-align:right;padding-left:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.lines .save{color:var(--pop)}
.lines .ptsused{color:var(--warn);font-weight:800}
.lines .ptsused small{font:600 11px var(--body);color:var(--muted)}
.lines .tot{font:800 18px var(--body);border-top:2.5px solid var(--line);padding-top:10px}
.lines .tot.n{font-family:var(--mono)}
.meter{position:relative;height:22px;background:var(--surface-2);border:2.5px solid var(--line);border-radius:99px;overflow:hidden}
.meter span{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--pop) 0 10px,#FF5C99 10px 20px);border-right:2.5px solid var(--line);border-radius:99px;transition:width .7s cubic-bezier(.2,1.2,.3,1);animation:stripes 1s linear infinite;background-size:28px 28px}
.meter span.full{background:repeating-linear-gradient(-45deg,var(--mint) 0 10px,#5BEBC4 10px 20px);background-size:28px 28px}
.meter em{position:absolute;inset:0;display:grid;place-items:center;font:800 11px var(--mono);font-style:normal;color:var(--ink)}
@keyframes stripes{to{background-position:28px 0}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);font-weight:500}
.check input{margin-top:2px;width:20px;height:20px;accent-color:var(--pop);flex:none}
.goalnote{font:700 13px var(--body);margin-top:6px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.chip{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font:800 12px var(--body);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.deals{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.deal{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:14px;border:2px solid var(--line);border-radius:18px;background:var(--surface);transition:transform .12s,box-shadow .12s;animation:pop .4s both;animation-delay:calc(var(--i,0)*35ms)}
.deal:hover{transform:translate(-1px,-1px);box-shadow:var(--hard-sm)}
.deal.isdone{background:var(--surface-2)}
.dico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font:800 20px var(--display);color:#fff;border:2px solid var(--line)}
.dico.g{background:var(--mint);color:var(--mint-ink)} .dico.d{background:var(--sky);color:#06213B} .dico.ok{background:var(--sun);color:var(--sun-ink)}
.deal h4{margin:0 0 6px;font-size:15px;font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{font:700 11px/1 var(--body);padding:4px 8px;border-radius:999px;border:1.5px solid var(--hair);color:var(--muted)}
.tag.free{color:var(--mint-ink);background:var(--mint);border-color:var(--line)}
.tag.trial{color:var(--warn);border-color:var(--warn)}
.tag.paid{color:var(--bad);border-color:var(--bad)}
.coin{display:inline-flex;align-items:center;gap:5px;font:800 13px var(--mono);background:var(--sun);color:var(--sun-ink);border:2px solid var(--line);border-radius:999px;padding:3px 9px 3px 4px}
.coin i{width:15px;height:15px;border-radius:50%;background:#FFB000;border:1.5px solid var(--sun-ink);font:800 9px/12px var(--body);font-style:normal;text-align:center}
.ms{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:12px;color:var(--muted);font-weight:600}
.ms div{display:flex;justify-content:space-between;gap:8px}
.ms div.ok{color:var(--ink)}
.ms div.ok span:first-child{text-decoration:line-through;text-decoration-color:var(--pop)}
.trk{grid-column:2/-1;background:var(--surface-2);border:2px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:12px;display:flex;flex-direction:column;gap:8px}
.pend{color:var(--warn);font:800 13px var(--body);white-space:nowrap}
.done{font:800 12px var(--body);white-space:nowrap;background:var(--mint);color:var(--mint-ink);border:2px solid var(--line);border-radius:999px;padding:5px 10px}
.spin{display:inline-block;width:12px;height:12px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:520px){.deal{grid-template-columns:48px minmax(0,1fr)}.deal .act{grid-column:2}.trk{grid-column:1/-1}}

/* forms */
.form{display:grid;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
label.f{display:block;font-weight:800;font-size:13px;margin-bottom:6px}
input[type=text],input[type=email]{width:100%;font:600 15px var(--body);padding:12px 14px;border-radius:12px;border:2.5px solid var(--line);background:var(--surface);color:var(--ink)}
input[type=text]:focus,input[type=email]:focus{outline:none;box-shadow:var(--hard-sm)}
.err{color:var(--bad);font-size:13px;font-weight:700;min-height:18px}
input[type=tel],input[type=date]{width:100%;font:600 15px var(--body);padding:12px 14px;border-radius:12px;border:2.5px solid var(--line);background:var(--surface);color:var(--ink)}
input[type=tel]:focus,input[type=date]:focus{outline:none;box-shadow:var(--hard-sm)}
.hint{display:block;font:600 12px var(--body);color:var(--muted);margin-top:5px}
label.f .opt{font-weight:600;color:var(--muted)}

/* account: sign up / log in / profile */
.acct{max-width:560px;margin:24px auto 0}
.acct .tabs{display:flex;gap:6px;margin:0 0 16px;background:var(--surface-2);border:2px solid var(--line);border-radius:14px;padding:4px}
.acct .tabs button{flex:1;border:0;background:none;border-radius:10px;padding:10px;font:800 14px var(--body);cursor:pointer;color:var(--muted)}
.acct .tabs button[aria-selected="true"]{background:var(--ink);color:var(--ground)}
.acct .lead{margin:6px 0 16px}
.or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font:800 12px var(--body);text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;border-top:2px dashed var(--hair)}
#pkLogin svg{flex:none}
.prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;margin-top:20px;align-items:start}
@media (max-width:820px){.prof{grid-template-columns:1fr}}
.pcardx{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.avatar{width:84px;height:84px;border-radius:24px;background:var(--pop);color:#fff;border:2.5px solid var(--line);box-shadow:var(--hard-sm);display:grid;place-items:center;font:800 32px var(--display);transform:rotate(-4deg)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:6px}
.stats div{background:var(--surface-2);border:2px solid var(--line);border-radius:14px;padding:10px;font-size:12px;color:var(--muted);font-weight:700}
.stats b{display:block;font:800 20px var(--mono);color:var(--ink)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px;margin:12px 0 4px}
.dl dt{color:var(--muted);font-weight:700}
.dl dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.rowbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* orders */
.order{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;padding:16px 0;border-top:2px dashed var(--hair)}
.order:first-of-type{border-top:0}
.track{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.track span{font:800 11px var(--body);padding:5px 10px;border-radius:999px;border:2px solid var(--line);color:var(--muted);background:var(--surface)}
.track span.on{background:var(--mint);color:var(--mint-ink)}
.track span.now{background:var(--sun);color:var(--sun-ink)}
.st{display:inline-flex;align-items:center;gap:5px;font:800 12px var(--body);padding:4px 9px;border-radius:999px;border:2px solid var(--line)}
.st.warn{color:var(--warn);background:var(--warn-soft)}
.thanks{display:flex;gap:16px;align-items:center;background:var(--sun);color:var(--sun-ink);border:2.5px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--hard-sm)}
.thanks b{font:800 22px var(--display)}

/* drawer + toast + confetti */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:30;animation:fade .2s both}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:31;background:var(--ground);border-left:2.5px solid var(--line);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));gap:16px;animation:slide .3s cubic-bezier(.2,1.2,.4,1) both;overflow:auto}
@keyframes slide{from{transform:translateX(60px);opacity:.001}to{transform:none;opacity:1}}
.dhead{display:flex;justify-content:space-between;align-items:center}
.x{background:var(--surface);border:2px solid var(--line);width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1;cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:14px;border:2.5px solid var(--line);box-shadow:4px 4px 0 var(--pop);font-weight:800;font-size:14px;max-width:calc(100% - 32px);z-index:40;animation:tin .35s cubic-bezier(.2,1.5,.4,1) both}
@keyframes tin{from{opacity:.001;transform:translate(-50%,20px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

/* photos uploaded in the editor */
/* Photo tiles: plain white, no tint. Photos fill the tile ("cover") unless their shape is very different
   from the tile, in which case the whole photo shows centred on white. The choice is made per photo in JS. */
.art.photo{display:block;background:#fff;border-color:var(--line)}
.art.photo::before,.art.photo::after{display:none}
.art.photo > img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;padding:0;background:#fff}
.art.photo img.fit-contain{object-fit:contain}
/* product cards: the image runs edge to edge across the top of the card, divided by one rule, so there's a single border */
.pcard .art{width:calc(100% + 20px);max-width:none;margin:-10px -10px 6px;aspect-ratio:1;border:0;border-bottom:2.5px solid var(--line);border-radius:17.5px 17.5px 0 0}
.pcard .art svg{width:34%}
/* product page: square photo panel in the same style as the other panels */
.pdp .stage .art{aspect-ratio:1}
.pdp .stage .art.photo{box-shadow:var(--hard)}
#logoMark{display:flex;flex:none}
.logo img{width:30px;height:30px;border-radius:9px;object-fit:cover;border:2.5px solid var(--line);flex:none}
.brandwrap{position:relative;display:inline-flex;align-items:center}
.tm{position:absolute;right:-7px;top:9px;background:none;border:0;padding:1px 2px;font:800 10px/1 var(--display);color:var(--muted);cursor:pointer;border-radius:6px;transition:color .15s,transform .15s}
.tm:hover{color:var(--pop);transform:translateY(-1px) scale(1.15)}
@media (max-width:350px){.tm{display:none}}
.wz-h .wz-tm{font:800 .35em/1 var(--display);color:var(--muted);vertical-align:super;margin-left:2px}
.wz-brand sup{font:800 11px/1 var(--display);color:var(--muted);margin-left:1px;vertical-align:super}
/* photo slider: swipe, arrows or dots */
.slider .strack{position:absolute;inset:0;z-index:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slider .strack::-webkit-scrollbar{display:none}
.art.photo.slider .strack img{flex:0 0 100%;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;padding:0;background:#fff;scroll-snap-align:center;scroll-snap-stop:always}
.art.photo.slider .strack img.fit-contain{object-fit:contain}
.slider .nav{position:absolute;top:50%;z-index:3;width:32px;height:32px;margin-top:-16px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;font:800 18px/1 var(--body);cursor:pointer;box-shadow:2px 2px 0 var(--line);opacity:0;transition:opacity .15s,transform .1s;padding:0}
.slider .nav.prev{left:8px}.slider .nav.next{right:8px}
.slider:hover .nav,.slider .nav:focus-visible{opacity:1}
.slider .nav:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--line)}
@media (hover:none){.slider .nav{opacity:.92}}
.slider .dots{position:absolute;left:0;right:0;bottom:8px;z-index:3;display:flex;justify-content:center;gap:6px;pointer-events:none}
.slider .dots{bottom:10px}
.slider .dots i{width:8px;height:8px;border-radius:50%;background:rgba(27,16,54,.25);pointer-events:auto;cursor:pointer;transition:transform .15s,background .15s,width .15s}
.slider .dots i.on{background:var(--ink);width:20px;border-radius:99px}
.slider .count{position:absolute;top:8px;left:8px;z-index:3;font:800 11px var(--mono);background:var(--ink);color:var(--ground);padding:3px 7px;border-radius:999px}
.pdp .stage .slider .nav{width:42px;height:42px;margin-top:-21px;font-size:24px}
.pdp .stage .slider .count{top:14px;left:14px}
.heroimg{position:relative;border:2.5px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--hard);background:#fff;aspect-ratio:4/3;max-width:100%}
.heroimg img{width:100%;height:100%;object-fit:cover;display:block}

footer{max-width:1180px;margin:40px auto 0;border-top:2.5px solid var(--line);padding-top:16px;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;font-weight:600}
.fade{animation:fade .3s ease both}
@keyframes fade{from{opacity:.001}to{opacity:1}}

/* hero fan: cards swap every few seconds */
.fan .card{transition:opacity .35s,box-shadow .2s}
/* hover: just a deeper shadow and the name turning pink; no jumping, no re-stacking, no brightness flash */
.fan .card:hover{box-shadow:6px 7px 0 var(--line)}
.fan .card:hover .cap .nm{color:var(--pop)}
.fan .card.swap{opacity:0}
.fan .card.swapin{animation:swapin .5s ease}
@keyframes swapin{from{opacity:0}to{opacity:1}}
.fan .card .flag{position:absolute;top:8px;left:8px;z-index:3;font:800 10px var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:var(--sun-ink);border:2px solid var(--line);border-radius:999px;padding:3px 8px;box-shadow:2px 2px 0 var(--line)}
.fan .card .cap{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal}
.fan .card .cap .nm{font:700 11px/1.2 var(--body);color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;width:100%}
.fan .card .cap .pr{display:flex;gap:8px;align-items:baseline}
.fan .card .cap em{font-size:15px}
.hotbar{display:flex;align-items:center;gap:0;margin:0 0 12px;border:2.5px solid var(--line);border-radius:999px;background:var(--surface);overflow:hidden;box-shadow:var(--hard-sm)}
.hotlbl{flex:none;font:800 10px var(--body);letter-spacing:.1em;text-transform:uppercase;background:var(--pop);color:#fff;padding:7px 12px;border-right:2.5px solid var(--line)}
.hotrun{flex:1;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.hotin{display:inline-flex;gap:34px;padding:5px 0;animation:marq 95s linear infinite;font-size:13px;font-weight:600;color:var(--muted)}
.hotrun:hover .hotin{animation-play-state:paused}
.hotin .hot{display:inline-flex;gap:6px;align-items:baseline;background:none;border:0;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;font:inherit;color:inherit}
.hotin .hot:hover{background:var(--surface-2);color:var(--ink)}
.hotin .hot:hover b{color:var(--pop)}
.hotin span{display:inline-flex;gap:6px;align-items:baseline}
.hotin b{color:var(--ink);font-weight:800}
.hotin em{font-style:normal;color:var(--pop);font:800 13px var(--mono)}
.hotin .hot::after{content:"✦";color:var(--sun);margin-left:28px}

/* ===== welcome screen ===== */
body.gated{overflow:hidden}
#welcome{position:fixed;inset:0;z-index:70;background:var(--ground);display:grid;place-items:center;padding:16px;overflow:auto;animation:fade .3s both}
#welcome.bye{animation:byebye .45s forwards}
@keyframes byebye{to{opacity:0;transform:scale(1.03)}}
#welcome[hidden]{display:none}
.wz-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--pop) 22%,transparent),transparent 40%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--grape) 24%,transparent),transparent 40%),radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--sun) 30%,transparent),transparent 35%)}
.wz-bubbles{position:absolute;inset:0}
.bub{position:absolute;left:var(--x);bottom:-160px;width:110px;border:2.5px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--hard);opacity:.55;transform:rotate(var(--r));animation:rise var(--s) linear infinite;animation-delay:calc(var(--d) * -1)}
.bub .art{border:0;border-radius:0;aspect-ratio:1}
@keyframes rise{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(-120vh) rotate(calc(var(--r) * -1))}}
.wz-card{position:relative;width:min(560px,100%);background:var(--surface);border:2.5px solid var(--line);border-radius:28px;box-shadow:8px 8px 0 var(--line);padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;animation:wzin .55s cubic-bezier(.2,1.4,.4,1) both;margin:auto}
@keyframes wzin{from{opacity:0;transform:translateY(24px) scale(.96) rotate(-1deg)}to{opacity:1;transform:none}}
@media (max-width:520px){.wz-card{padding:20px 16px 18px;border-radius:22px}}
.wz-brand{display:flex;align-items:center;gap:8px;font:800 20px var(--display);letter-spacing:-.03em}
.mark{width:28px;height:28px;border-radius:8px;background:var(--pop);border:2.5px solid var(--line);box-shadow:2px 2px 0 var(--line);position:relative;display:inline-block;transform:rotate(-8deg);flex:none}
.mark i{position:absolute;inset:5px;border:3px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-2px)}
.wz-steps{display:flex;gap:6px}
.wz-steps i{height:6px;width:28px;border-radius:99px;background:var(--hair);border:1.5px solid var(--line);transition:background .3s,width .3s}
.wz-steps i.done{background:var(--mint)}
.wz-steps i.now{background:var(--pop);width:44px}
.wz-h{font-size:clamp(28px,6vw,40px);line-height:1.05;letter-spacing:-.03em}
.wz-h .hl{background:linear-gradient(100deg,var(--pop),var(--grape));color:transparent;-webkit-background-clip:text;background-clip:text;padding:0 .04em .1em 0;border-radius:0}
.wz-wave{display:inline-block;animation:wave 1.8s ease-in-out infinite;transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
.wz-sub{font-size:15px;color:var(--muted);font-weight:500;margin-top:-6px}
.wz-demo{border-color:var(--sun);background:color-mix(in srgb,var(--sun) 25%,var(--surface));color:var(--ink)}
.otp{display:flex;gap:8px;justify-content:center}
.otp input{width:48px;height:58px;text-align:center;font:800 24px var(--mono);padding:0;border-radius:14px;border:2.5px solid var(--line);background:var(--surface);color:var(--ink)}
.otp input:focus{outline:none;box-shadow:var(--hard-sm);background:var(--surface-2)}
@media (max-width:380px){.otp{gap:5px}.otp input{width:40px;height:50px;font-size:20px}}
.otp.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ints{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:560px){.ints{grid-template-columns:repeat(2,1fr)}}
.int{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;background:var(--surface);border:2.5px solid var(--line);border-radius:18px;cursor:pointer;text-align:center;box-shadow:var(--hard-sm);transition:transform .12s,box-shadow .12s,background .2s;animation:pop .45s both;animation-delay:calc(var(--i)*50ms)}
.int:hover{transform:translate(-1px,-2px);box-shadow:var(--hard)}
.int .iart{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));border:2px solid var(--line);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.int .iart svg{width:24px;height:24px;filter:drop-shadow(1px 2px 0 rgba(27,16,54,.35))}
.int b{font:800 13px/1.15 var(--body)}
.int small{font:700 11px var(--body);color:var(--muted)}
.int .tick{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--mint-ink);border:2px solid var(--line);display:grid;place-items:center;font:800 13px var(--body);font-style:normal;transform:scale(0);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.int[aria-pressed="true"]{background:color-mix(in srgb,var(--sun) 45%,var(--surface));box-shadow:var(--hard)}
.int[aria-pressed="true"] .iart{transform:rotate(-8deg) scale(1.08)}
.int[aria-pressed="true"] .tick{transform:scale(1)}
.int .iart.emo{font-size:26px;line-height:1;background:linear-gradient(135deg,var(--surface-2),var(--surface));}
.int.qo:nth-child(6n+1) .iart.emo{background:linear-gradient(135deg,#FFD0E1,#FF8DB7)}.int.qo:nth-child(6n+2) .iart.emo{background:linear-gradient(135deg,#FFF0B3,#FFD23F)}
.int.qo:nth-child(6n+3) .iart.emo{background:linear-gradient(135deg,#C9F7E8,#5BEBC4)}.int.qo:nth-child(6n+4) .iart.emo{background:linear-gradient(135deg,#CFE8FF,#7CC4FF)}
.int.qo:nth-child(6n+5) .iart.emo{background:linear-gradient(135deg,#E4D8FF,#B49BFF)}.int.qo:nth-child(6n+6) .iart.emo{background:linear-gradient(135deg,#FFE0C2,#FFB27A)}
.ints.quiz{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.ints.quiz{grid-template-columns:repeat(2,1fr)}}
.int .iart{animation:idlebob 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s)}
@keyframes idlebob{50%{transform:translateY(-3px) rotate(3deg)}}
.int[aria-pressed="true"] .iart{animation:none}
.int.boing{animation:boing .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes boing{30%{transform:scale(1.07) rotate(-2deg)}60%{transform:scale(.97) rotate(1deg)}}
.int[aria-pressed="true"]::after{content:"";position:absolute;inset:-2.5px;border-radius:inherit;border:2.5px solid var(--pop);opacity:0;animation:ring .6s ease-out}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}
.wz-meter{display:flex;align-items:center;gap:10px;font:700 13px var(--body);color:var(--muted)}
.wz-meter .bar{flex:1;height:12px;border:2px solid var(--line);border-radius:99px;background:var(--surface-2);overflow:hidden}
.wz-meter .bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--pop) 0 8px,#FF5C99 8px 16px);background-size:22px 22px;animation:stripes 1s linear infinite;transition:width .5s cubic-bezier(.2,1.2,.3,1)}
.wz-meter b{font:800 16px var(--mono);color:var(--ink);min-width:3ch;text-align:right}
.wz-nav{display:flex;gap:10px;align-items:stretch}
.wz-nav .btn.block{flex:1}
.spark{position:fixed;z-index:80;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line);pointer-events:none;transform:translate(-50%,-50%);animation:sparkfly .6s ease-out forwards}
@keyframes sparkfly{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}
.wz-done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0}
.wz-spin .mark{width:64px;height:64px;border-radius:18px;animation:spinmark 1.2s cubic-bezier(.6,0,.4,1) infinite}
.wz-spin .mark i{inset:14px;border-width:6px}
@keyframes spinmark{0%{transform:rotate(-8deg)}50%{transform:rotate(352deg) scale(1.1)}100%{transform:rotate(352deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== additions for the live site ===== */
.loading{display:grid;place-items:center;min-height:50vh;color:var(--muted);font-weight:700}
.loading .mark{width:42px;height:42px;border-radius:12px;animation:spinmark 1.2s cubic-bezier(.6,0,.4,1) infinite;margin-bottom:12px}
.loading .mark i{inset:9px;border-width:4px}
.note{font-size:12px;color:var(--muted);background:var(--surface-2);border:2px dashed var(--line);border-radius:12px;padding:10px 12px}
.trk a.btn{text-decoration:none}
.corp{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--body);color:var(--muted);text-decoration:none;white-space:nowrap}
.corp:hover{color:var(--pop)}
@media (max-width:640px){.corp .lbl{display:none}}
body.embedded .ribbon{display:none}
.pend a{color:inherit}

/* demo-data notice under the header */
.demo-note{max-width:1180px;margin:12px auto 0;background:var(--sun);color:var(--sun-ink);border:2.5px solid var(--line);border-radius:14px;padding:9px 14px;font:600 13px/1.4 var(--body);box-shadow:var(--hard-sm)}
.demo-note b{font-weight:800}