/* Advent Calendar — one stylesheet, themed per calendar by [data-theme] on <html>.
   Layout primitive tokens from jen-web-design assets/layout.css. */

:root{
  --pad:clamp(1rem,4vw,2.5rem);
  --text-sm:clamp(.86rem,.83rem + .14vw,.95rem);
  --text:clamp(1rem,.94rem + .30vw,1.2rem);
  --text-lg:clamp(1.08rem,.99rem + .48vw,1.36rem);
  --h2:clamp(1.4rem,1.2rem + 1vw,2.1rem);
  --h1:clamp(1.9rem,1.4rem + 2.4vw,3.3rem);
  --font-head:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --font-body:'Figtree','Avenir Next',system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* workshop (Jen Built It): pine night, terracotta + copper wrapping, gold for the last doors */
  --bg:#10221C; --bg2:#173029; --ink:#FBF3E9; --ink-soft:#C9D6CE;
  --card:#FBF3E9; --card-ink:#2E2A26; --card-soft:#5A524A;
  --wrap-a:#C97B5F; --wrap-b:#7A9579; --wrap-c:#B8845A; --wrap-d:#A85F45;
  --ribbon:#E8B04B; --gold:#E8B04B; --gold-deep:#B9812A;
  --accent:#E89E80; --btn:#A85F45; --btn-ink:#fff; --btn-hover:#8E4D37;
  --inside:#0B1814; --focus:#E8B04B;
}
html[data-theme="plum"]{
  /* Jen Tried It: Deep Soft Plum night, peach gold + coral + sage mist wrapping */
  --bg:#2A1F2E; --bg2:#3A2B3F; --ink:#FAF8F5; --ink-soft:#DCCFDD;
  --card:#FAF8F5; --card-ink:#2C2C2C; --card-soft:#57425B;
  --wrap-a:#57425B; --wrap-b:#E07A5F; --wrap-c:#7E9A7E; --wrap-d:#8A5F7E;
  --ribbon:#E8A87C; --gold:#E8A87C; --gold-deep:#B9774D;
  --accent:#E8A87C; --btn:#E07A5F; --btn-ink:#2A1F2E; --btn-hover:#E8A87C;
  --inside:#1D1520; --focus:#E8A87C;
}

html[data-theme="jen8n"]{
  /* Jen8n: Blackberry Marigold kit (approved 2026-10-11), night version */
  --bg:#1E1030; --bg2:#2E1A48; --ink:#F9F5FC; --ink-soft:#D9C2F2;
  --card:#F9F5FC; --card-ink:#221A2C; --card-soft:#5F5470;
  --wrap-a:#5B2A86; --wrap-b:#D2581A; --wrap-c:#8A56B8; --wrap-d:#0F5D63;
  --ribbon:#F6B93B; --gold:#F6B93B; --gold-deep:#B9822A;
  --accent:#FFCFA6; --btn:#A13F0C; --btn-ink:#fff; --btn-hover:#7F300A;
  --inside:#140A22; --focus:#F6B93B;
}
html[data-theme="meadow"]{
  /* Seeding Serendipity: Fresh Mint Morning kit, evening garden version */
  --bg:#0E2A1D; --bg2:#164030; --ink:#F3FAF5; --ink-soft:#BFE3CC;
  --card:#F3FAF5; --card-ink:#1D2A22; --card-soft:#3F5A4A;
  --wrap-a:#1B8052; --wrap-b:#C93A56; --wrap-c:#D35E27; --wrap-d:#377F33;
  --ribbon:#FFC84A; --gold:#FFC84A; --gold-deep:#C9922A;
  --accent:#FFD3DA; --btn:#A92C45; --btn-ink:#fff; --btn-hover:#8A2238;
  --inside:#081C13; --focus:#FFC84A;
}
html[data-theme="arcade"]{
  /* Admin Arcade: arcade black, teal, coin yellow, red card (from adminarcade.com) */
  --bg:#08090C; --bg2:#13161A; --ink:#F4FFFD; --ink-soft:#B9C8C6;
  --card:#F4FFFD; --card-ink:#08090C; --card-soft:#3D4A49;
  --wrap-a:#C7314A; --wrap-b:#1D7F78; --wrap-c:#3A3F4A; --wrap-d:#9E2A3A;
  --ribbon:#FFD166; --gold:#FFD166; --gold-deep:#C99A2E;
  --accent:#2EC4B6; --btn:#B32A40; --btn-ink:#fff; --btn-hover:#8E2133;
  --inside:#050608; --focus:#2EC4B6;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg)}
body{
  font-family:var(--font-body);font-size:var(--text);line-height:1.6;color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 9%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(2px 2px at 64% 32%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 70%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1px 1px at 46% 88%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(120% 70% at 50% 0%,var(--bg2),var(--bg) 70%);
  background-size:340px 340px,420px 420px,380px 380px,300px 300px,460px 460px,360px 360px,100% 100%;
}
button,input,select,textarea{font-family:inherit}
[hidden]{display:none !important}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding:clamp(1.2rem,3vw,2.4rem) var(--pad) 1.5rem}

/* ── header ─────────────────────────────── */
.cal-head{text-align:center;margin-bottom:clamp(1rem,2.5vw,1.8rem)}
.lockup{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-bottom:1rem;padding:6px 8px;margin-inline:-8px}
.mark{width:34px;height:34px;flex:none}
.wordmark{font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.wordmark .pop{color:var(--gold)}
.cal-title{font-family:var(--font-head);font-weight:800;font-size:var(--h1);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.cal-sub{color:var(--ink-soft);font-size:var(--text-lg);max-width:46ch;margin:.6rem auto 0;text-wrap:pretty}
.cal-status{margin-top:.9rem;font-family:var(--font-head);font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;min-height:1.6em}

/* ── Sock: the stocking mascot that is also the stamp card ── */
.stampbar{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2.5vw,1.6rem);margin:0 auto 1.4rem;max-width:760px}
.sock{flex:none;width:clamp(74px,11vw,100px);cursor:pointer;transform-origin:50% 6%;animation:sockIdle 3.4s ease-in-out infinite;border-radius:14px}
.sock svg{width:100%;height:auto;display:block;overflow:visible}
.sk-body{fill:var(--wrap-a)}
.sk-stripe{fill:var(--card);opacity:.92}
.sk-toe{stroke:var(--wrap-b)}
.sk-cuff{fill:var(--card)}
.sk-fill{fill:var(--gold);opacity:.55;transition:y .7s var(--spring)}
.sk-gifts rect{stroke:rgba(0,0,0,.18);stroke-width:1}
.sk-eyes ellipse{fill:var(--card-ink)}
.sk-eyes{transform-box:fill-box;transform-origin:center;animation:sockBlink 4.6s infinite}
.sk-mouth{stroke:var(--card-ink)}
.sock.gulp{animation:sockGulp .6s var(--spring)}
.sock.shake{animation:sockShake .5s ease-in-out}
.sock.party{animation:sockParty .45s ease-in-out 4}
.sk-pop rect,.sk-pop circle{animation:popOut .7s var(--spring) both}
@keyframes sockIdle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes sockBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes sockGulp{0%{transform:scale(1)}35%{transform:scale(1.08,.94)}70%{transform:scale(.97,1.05)}100%{transform:scale(1)}}
@keyframes sockShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-5deg)}}
@keyframes sockParty{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-6px)}}
@keyframes popOut{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.drop{position:fixed;z-index:45;width:18px;height:16px;border-radius:4px;background:var(--gold);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);pointer-events:none}
.drop::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:4px;background:var(--wrap-a)}
.sock-talk{min-width:0;display:grid;gap:.4rem}
.bubble{position:relative;background:var(--card);color:var(--card-ink);border-radius:16px;padding:.65rem .95rem;font-family:var(--font-head);font-weight:700;font-size:clamp(.95rem,.9rem + .3vw,1.1rem);line-height:1.35;max-width:36ch;text-wrap:pretty;min-height:2.6em}
.bubble::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-left:0;border-right-color:var(--card)}
.stamp-count{font-family:var(--font-head);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:var(--text-sm)}

/* ── the grid ───────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:clamp(86px,10.5vw,132px);grid-auto-flow:dense;gap:clamp(8px,1.2vw,14px)}
@media (max-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(78px,21vw,112px)}}
.cell{position:relative;perspective:900px}
.cell.w2{grid-column:span 2}
.cell.h2{grid-row:span 2}

.door{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:var(--inside);border-radius:14px;color:inherit;font:inherit;text-align:left;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
}
.door:active .panel{transform:scale(.97)}
.door .inside{position:absolute;inset:0;padding-left:30%;display:flex;align-items:center;justify-content:center;border-radius:14px;color:var(--gold)}
.door .inside svg{width:42%;max-width:56px;height:auto;opacity:0;transition:opacity .3s}
.door .panel{
  position:absolute;inset:0;border-radius:14px;transform-origin:left center;
  transition:transform .75s cubic-bezier(.25,.8,.3,1.05);
  background:var(--wrap-a);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.12);
  overflow:hidden;
}
/* wrapping paper colors cycle across the grid (classes, not inline styles: the CSP blocks those) */
.door .panel.wb{background:var(--wrap-b)}.door .panel.wc{background:var(--wrap-c)}.door .panel.wd{background:var(--wrap-d)}
/* paper texture: soft diagonal stripes */
.door .panel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 8px,transparent 8px 18px)}
.door .num{position:absolute;left:10px;bottom:6px;font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18);font-variant-numeric:tabular-nums}
.cell.h2 .door .num{font-size:clamp(2.6rem,6vw,4.4rem);left:16px;bottom:10px}
/* ribbon tiers: doors get fancier toward 24 */
.door .rib-v,.door .rib-h{position:absolute;background:var(--ribbon);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.door .rib-v{top:0;bottom:0;left:62%;width:9px}
.door .rib-h{left:0;right:0;top:34%;height:9px}
.door .bow{position:absolute;left:calc(62% + 4.5px);top:34%;width:30px;height:20px;transform:translate(-50%,-62%)}
.tier1 .rib-v,.tier1 .rib-h,.tier1 .bow,.tier2 .bow{display:none}
.tier4 .door .panel{background:linear-gradient(145deg,#F6D27A,var(--gold) 45%,var(--gold-deep))}
.tier4 .rib-v,.tier4 .rib-h{background:#fff8ec;width:14px}
.tier4 .rib-h{height:14px;width:auto}
.tier4 .bow{width:54px;height:36px}
.tier4 .num{color:#4a3110;text-shadow:0 1px 0 rgba(255,255,255,.4)}

/* opened: the panel swings open on its left hinge */
.cell.open .door .panel{transform:rotateY(-68deg);filter:brightness(.8)}
/* the open door sits ajar on its hinge, inside its own cell */
.cell{perspective-origin:0% 50%}
.cell.open .door .inside svg{opacity:1}
.cell.open .door{box-shadow:inset 0 0 0 2px var(--gold)}

/* locked: a padlock tag + a teasing wiggle when tapped */
.door .lock{position:absolute;top:8px;right:8px;width:22px;height:22px;opacity:.9}
.cell.open .door .lock,.cell.ready .door .lock{display:none}
html:not(.is-demo) .cell.ready .door .panel{animation:readyGlow 2.4s ease-in-out infinite}
@keyframes readyGlow{0%,100%{box-shadow:0 8px 18px -10px rgba(0,0,0,.6),0 0 0 0 rgba(232,176,75,.0)}50%{box-shadow:0 8px 18px -10px rgba(0,0,0,.6),0 0 0 4px rgba(232,176,75,.55)}}
.cell.wiggle .door .panel{animation:wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{transform:none}20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}
.cell .tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:3;white-space:nowrap;background:var(--card);color:var(--card-ink);font-weight:700;font-size:.85rem;padding:.4rem .7rem;border-radius:10px;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);pointer-events:none;animation:tipIn .25s var(--spring)}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}

/* skeleton */
.cell.skel .door{background:rgba(255,255,255,.07);animation:skel 1.4s ease-in-out infinite}
@keyframes skel{50%{background:rgba(255,255,255,.12)}}

/* ── buttons ────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.6rem 1.15rem;border-radius:999px;border:0;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:1rem;text-decoration:none;background:var(--btn);color:var(--btn-ink);transition-property:transform,background-color,box-shadow;transition-duration:.2s}
.btn:hover{background:var(--btn-hover);transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(255,255,255,.05)}

.remind{margin:1.8rem auto 0;text-align:center;max-width:640px}
.remind-lede{color:var(--ink-soft);margin-bottom:.8rem;text-wrap:pretty}
.remind-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.demo-tools{margin-top:1.4rem;text-align:center}

/* ── door view ──────────────────────────── */
.back{background:none;border:0;color:var(--ink);font-weight:700;font-size:1rem;cursor:pointer;min-height:44px;padding:0 .2rem;margin-bottom:.6rem;display:inline-flex;align-items:center;gap:.4rem}
.back::before{content:"";width:9px;height:9px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg)}
.door-card{background:var(--card);color:var(--card-ink);border-radius:22px;padding:clamp(1.3rem,3.5vw,2.4rem);max-width:720px;margin:0 auto;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);animation:cardIn .45s var(--spring)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.dc-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.dc-badge{width:52px;height:52px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--wrap-a);color:#fff}
.dc-badge svg{width:30px;height:30px}
.dc-kicker{font-size:.8rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--card-soft)}
.dc-title{font-family:var(--font-head);font-weight:800;font-size:var(--h2);line-height:1.1;letter-spacing:-.015em;text-wrap:balance;margin-top:.1rem}
.dc-ad{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#2C2C2C;color:#fff;border-radius:6px;padding:.15rem .5rem;margin-bottom:.7rem}
.dc-img{width:100%;max-height:340px;object-fit:cover;border-radius:14px;margin:0 0 1rem}
.dc-blurb{white-space:pre-line;margin-bottom:1.1rem;text-wrap:pretty}
.dc-code{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.8rem;border-radius:14px;border:2px dashed var(--card-soft);margin-bottom:.4rem}
.dc-code code{font-family:var(--font-head);font-weight:800;font-size:1.35rem;letter-spacing:.06em;flex:1;min-width:0;overflow-wrap:anywhere}
.dc-code .btn{font-size:.9rem;min-height:40px;padding:.45rem .9rem}
.dc-note{font-size:var(--text-sm);color:var(--card-soft);margin-bottom:1.1rem}
.dc-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.dc-actions .btn.ghost{color:var(--card-ink);box-shadow:inset 0 0 0 2px var(--card-soft)}
.dc-disc{font-size:var(--text-sm);color:var(--card-soft);margin-top:.9rem}
.dc-next{margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.1);font-size:var(--text-sm);color:var(--card-soft)}

/* ── share bar ── */
.sharebar{margin-top:1.3rem;padding:1rem;border-radius:16px;background:color-mix(in srgb,var(--gold) 24%,var(--card));color:var(--card-ink)}
.sharebar p{margin-bottom:.7rem;text-wrap:pretty}
.share-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.sharebar .btn.ghost{color:var(--card-ink);box-shadow:inset 0 0 0 2px var(--card-soft)}

/* ── nudge: one quiet line under the gift ── */
.nudge{margin-top:1.2rem;padding:.75rem .9rem;border-radius:14px;background:rgba(0,0,0,.05);font-size:var(--text-sm);color:var(--card-soft);display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:baseline}
.nudge-text{min-width:0}
.nudge-link{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--card-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
.nudge-link:hover{color:var(--wrap-a)}
.nudge-disc{font-size:.78rem;color:var(--card-soft)}
.remind.flash{animation:flash 1.4s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--gold)}30%{box-shadow:0 0 0 6px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}
.remind{border-radius:18px;padding:.6rem}

/* ── Play doors ── */
.play{display:grid;justify-items:center;gap:.9rem;margin:0 0 1.1rem;text-align:center}
.play-empty{color:var(--card-soft)}
.pick-card{width:min(100%,340px);min-height:150px;border-radius:18px;display:grid;place-items:center;padding:1.2rem;background:var(--wrap-a);color:#fff;box-shadow:0 14px 30px -16px rgba(0,0,0,.6),inset 0 0 0 6px rgba(255,255,255,.14)}
.pick-card.flip{animation:flipCard .36s ease-in-out}
@keyframes flipCard{50%{transform:rotateY(90deg)}}
.pick-q{font-family:var(--font-head);font-weight:800;font-size:3.4rem;opacity:.85}
.pick-a{font-family:var(--font-head);font-weight:800;font-size:clamp(1.1rem,1rem + .6vw,1.45rem);line-height:1.3;text-wrap:balance}
.spin-wrap{position:relative;width:min(100%,320px);aspect-ratio:1}
.spin-wheel{width:100%;height:100%;border-radius:50%;transition:transform 3.1s cubic-bezier(.15,.85,.25,1);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.spin-pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:2;border:13px solid transparent;border-top:24px solid var(--card-ink);border-bottom:0}
.spin-result{font-family:var(--font-head);font-weight:800;font-size:1.25rem;min-height:1.6em;text-wrap:balance}
.scratch{position:relative;width:min(100%,360px);min-height:140px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);display:grid;place-items:center;padding:1.2rem;overflow:hidden}
.scratch-text{font-family:var(--font-head);font-weight:800;font-size:clamp(1.05rem,1rem + .5vw,1.35rem);line-height:1.3;text-wrap:balance}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .5s}
.scratch canvas.gone{opacity:0;pointer-events:none}
.scratch-hint{font-size:var(--text-sm);color:var(--card-soft);min-height:1.2em}

.msg-card{background:var(--card);color:var(--card-ink);border-radius:22px;padding:2rem;max-width:560px;margin:1rem auto;text-align:center}
.msg-card h2{font-family:var(--font-head);font-size:var(--h2);margin-bottom:.5rem}
.msg-card p{margin-bottom:1rem}

/* ── footer ─────────────────────────────── */
.foot{margin-top:2.2rem;text-align:center;font-size:var(--text-sm);color:var(--ink-soft)}
.powered{display:inline-block;color:var(--ink-soft);text-decoration:none;font-weight:700;padding:11px 8px;margin:-11px -8px}
.powered:hover{color:var(--gold)}
.foot-legal{margin-top:.9rem;display:grid;gap:.4rem}
.foot-legal nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1rem}
.foot-legal a{color:var(--ink-soft);padding:11px 4px;margin:-11px -4px}

/* ── toast + confetti (both hidden at rest) ─ */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);visibility:hidden;background:var(--card);color:var(--card-ink);font-weight:700;padding:.7rem 1.1rem;border-radius:14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);z-index:50;transition:transform .3s var(--spring),visibility 0s .3s}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .3s var(--spring)}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;visibility:hidden}
.confetti.on{visibility:visible}

/* ── embedded in a blog post ─────────────── */
.is-embedded .standalone-only{display:none !important}
.is-embedded .wrap{padding-top:1rem;max-width:none}
.is-embedded body{background-attachment:scroll}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}