/* generated by tools/home-clay/port.py from the approved mock; do not edit by hand */
:host{all:initial;display:block;position:relative;overflow:hidden;contain:layout style}.hk-b{display:block}@supports (width:round(nearest,100%,1px)){.hk-b{width:round(nearest,100%,1px)}}[hidden]{display:none!important}
.hk-b{margin:0}img{max-width:100%}

/* ── tokens: the cart's clay + the bento's hue, plus the four objects' own colours ── */
:host{
  --bg:#E8ECF3;--clay:#F8FAFE;--card:#F8FAFE;--well:#E3E8F2;--hair:rgb(20 37 79 / .07);
  --ink:#14254F;--ink-2:#46567E;--ink-3:#525F86;--navy:#14254F;--on-navy:#FFFFFF;
  --amber:#F5A524;--amber-2:#D98A0B;--go:#1F7A50;
  --glow-a:40%;--glow-b:16%;--glow-c:7%;
  --sh-card:0 14px 26px -16px rgb(20 37 79 / .36),inset 0 -4px 8px rgb(20 37 79 / .06),inset 0 5px 10px rgb(255 255 255 / .38);
  --sh-btn:0 8px 16px -8px rgb(20 37 79 / .40),inset 0 -3px 6px rgb(20 37 79 / .10),inset 0 4px 8px rgb(255 255 255 / .38);
  --sh-amber:0 10px 18px -9px rgb(179 111 0 / .60),inset 0 -4px 8px rgb(140 80 0 / .30),inset 0 5px 10px rgb(255 255 255 / .2);
  --sh-navy:0 8px 16px -8px rgb(20 37 79 / .55),inset 0 -3px 6px rgb(0 0 0 / .35),inset 0 4px 8px rgb(255 255 255 / .09);
  --sh-well:inset 0 3px 7px rgb(20 37 79 / .14),inset 0 -3px 8px rgb(255 255 255 / .36);
  --sh-sheet:0 28px 56px -30px rgb(20 37 79 / .42),0 6px 14px -8px rgb(20 37 79 / .14),inset 0 -8px 16px rgb(20 37 79 / .07),inset 0 7px 20px rgb(255 255 255 / .38);
  --sh-ball:inset 0 -6px 10px rgb(20 37 79 / .16),inset 0 7px 17.5px rgb(255 255 255 / .36),0 8px 14px -8px rgb(20 37 79 / .35);
  --drop:drop-shadow(0 10px 8px rgb(20 37 79 / .20)) drop-shadow(0 2px 2px rgb(20 37 79 / .12));
  /* the objects */
  --dome:rgb(236 243 255 / .62);--dome-rim:#CBD6EA;--white-clay:#FFFFFF;
  --belt:#5C6B8F;--belt-2:#4E5C7E;--belt-edge:#C9D2E3;--counter:#F2E6D6;--counter-2:#E5D3BC;--noren:#14254F;
  --pouch:#F6C3D3;--pouch-2:#EBA7BD;--pouch-ink:#7A2E4B;--lining:#FFF4F7;--lining-2:#F8E3EA;--teeth:#14254F;
  --face:#2B2140;--blush:#FF8FA8;
  --fd:Chubbo,"TE Chubbo Georgia","TE Chubbo Noto","TE Chubbo DejaVu",Amulya,"TE Amulya Arial","TE Amulya Roboto","TE Amulya DejaVu",Georgia,serif;--ft:Amulya,"TE Amulya Arial","TE Amulya Roboto","TE Amulya DejaVu",system-ui,sans-serif;
  --r-sheet:32px;--r-card:24px;--r-pad:16px;--r-pill:999px;--g2:16px;--g3:24px;--g4:32px;--g6:48px;
  --spring:cubic-bezier(.34,1.4,.64,1);--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light}
@media (prefers-color-scheme:dark){:host(:not([data-theme="light"])){
  --bg:#0B1229;--clay:#1B274C;--card:#141A2B;--well:#0A1129;--hair:rgb(210 222 255 / .09);
  --ink:#EEF2FB;--ink-2:#B3BEDA;--ink-3:#A3AECB;--navy:#2A3A6E;--go:#4CC38A;
  --glow-a:42%;--glow-b:12%;--glow-c:0%;
  --sh-card:0 16px 28px -14px rgb(0 0 0 / .72),0 0 0 1px rgb(210 222 255 / .08),inset 0 -4px 8px rgb(0 0 0 / .30),inset 0 4px 10px rgb(255 255 255 / .02);
  --sh-btn:0 8px 16px -6px rgb(0 0 0 / .65),0 0 0 1px rgb(210 222 255 / .12),inset 0 -3px 6px rgb(0 0 0 / .4),inset 0 4px 8px rgb(255 255 255 / .04);
  --sh-amber:0 10px 18px -8px rgb(0 0 0 / .70),inset 0 -4px 8px rgb(140 80 0 / .40),inset 0 5px 10px rgb(255 255 255 / .18);
  --sh-navy:0 8px 16px -6px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .14),inset 0 -3px 6px rgb(0 0 0 / .45),inset 0 4px 8px rgb(255 255 255 / .06);
  --sh-well:inset 0 3px 8px rgb(0 0 0 / .65),inset 0 -3px 8px rgb(255 255 255 / .02);
  --sh-sheet:0 30px 60px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(210 222 255 / .10),inset 0 -8px 16px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --sh-ball:inset 0 -6px 10px rgb(0 0 0 / .35),inset 0 7px 17.5px rgb(255 255 255 / .18),0 8px 14px -6px rgb(0 0 0 / .6);
  --drop:drop-shadow(0 10px 8px rgb(0 0 0 / .45)) drop-shadow(0 2px 2px rgb(0 0 0 / .35));
  --dome:rgb(120 150 220 / .16);--dome-rim:#33467A;--white-clay:#D3DBEA;
  --belt:#2A3557;--belt-2:#222C4A;--belt-edge:#3A4A78;--counter:#2B2433;--counter-2:#211B29;--noren:#F5A524;
  --pouch:#6B3A5C;--pouch-2:#572D4A;--pouch-ink:#FFD3E1;--lining:#24182B;--lining-2:#1C1222;--teeth:#F4F6FB;
  --face:#2B2140;--blush:#FF8FA8;
  color-scheme:dark}}
:host([data-theme="dark"]){
  --bg:#0B1229;--clay:#1B274C;--card:#141A2B;--well:#0A1129;--hair:rgb(210 222 255 / .09);
  --ink:#EEF2FB;--ink-2:#B3BEDA;--ink-3:#A3AECB;--navy:#2A3A6E;--go:#4CC38A;
  --glow-a:42%;--glow-b:12%;--glow-c:0%;
  --sh-card:0 16px 28px -14px rgb(0 0 0 / .72),0 0 0 1px rgb(210 222 255 / .08),inset 0 -4px 8px rgb(0 0 0 / .30),inset 0 4px 10px rgb(255 255 255 / .02);
  --sh-btn:0 8px 16px -6px rgb(0 0 0 / .65),0 0 0 1px rgb(210 222 255 / .12),inset 0 -3px 6px rgb(0 0 0 / .4),inset 0 4px 8px rgb(255 255 255 / .04);
  --sh-amber:0 10px 18px -8px rgb(0 0 0 / .70),inset 0 -4px 8px rgb(140 80 0 / .40),inset 0 5px 10px rgb(255 255 255 / .18);
  --sh-navy:0 8px 16px -6px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .14),inset 0 -3px 6px rgb(0 0 0 / .45),inset 0 4px 8px rgb(255 255 255 / .06);
  --sh-well:inset 0 3px 8px rgb(0 0 0 / .65),inset 0 -3px 8px rgb(255 255 255 / .02);
  --sh-sheet:0 30px 60px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(210 222 255 / .10),inset 0 -8px 16px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --sh-ball:inset 0 -6px 10px rgb(0 0 0 / .35),inset 0 7px 17.5px rgb(255 255 255 / .18),0 8px 14px -6px rgb(0 0 0 / .6);
  --drop:drop-shadow(0 10px 8px rgb(0 0 0 / .45)) drop-shadow(0 2px 2px rgb(0 0 0 / .35));
  --dome:rgb(120 150 220 / .16);--dome-rim:#33467A;--white-clay:#D3DBEA;
  --belt:#2A3557;--belt-2:#222C4A;--belt-edge:#3A4A78;--counter:#2B2433;--counter-2:#211B29;--noren:#F5A524;
  --pouch:#6B3A5C;--pouch-2:#572D4A;--pouch-ink:#FFD3E1;--lining:#24182B;--lining-2:#1C1222;--teeth:#F4F6FB;
  color-scheme:dark}

*{box-sizing:border-box}
:host{-webkit-text-size-adjust:100%;overflow-x:clip}
.hk-b{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--ft);-webkit-font-smoothing:antialiased;padding-inline:16px;padding-block:0 64px;overflow-x:hidden}
::selection{background:var(--amber);color:#14254F}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
svg{display:block}
h1,h2,h3{word-spacing:.12em}

/* ── mock toolbar ── */
.mk{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;margin-inline:-16px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;border-bottom:1px solid var(--hair)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--sh-well);border:1px solid transparent}
.seg button{border:1px solid transparent;background:none;min-height:40px;padding:0 14px;border-radius:var(--r-pill);font-weight:600;font-size:14px;color:var(--ink-2);transition:transform .22s var(--spring)}
.seg button[aria-pressed="true"]{background:var(--clay);color:var(--ink);box-shadow:var(--sh-btn)}
.seg button:active{transform:translateY(1px) scale(.97);transition-duration:.09s}
.mk__opt button b{font-family:var(--fd);font-weight:700;margin-right:6px;color:var(--amber-2)}
.mk__replay{min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--clay);box-shadow:var(--sh-btn);font-weight:700;font-size:14px}@container stage (max-width:640px){.mk{position:static;gap:6px}.seg button,.mk__replay{min-height:36px;padding:0 10px;font-size:13px}}
:host .mk{display:none}
.intro{max-width:1240px;margin:32px auto 8px;display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline}
.intro h1{font:700 clamp(1.6rem,1.2rem + 1.4vw,2.2rem)/1.1 var(--fd);margin:0;letter-spacing:-.01em;text-wrap:balance}
.intro p{margin:0;max-width:64ch;color:var(--ink-2);font-size:15px}
.stage{container:stage/inline-size;max-width:1240px;margin:0 auto}
.stage.is-phone{max-width:390px;border-radius:44px;padding:20px 16px 28px;background:var(--bg);box-shadow:0 0 0 10px var(--clay),0 0 0 11px var(--hair),0 40px 80px -30px rgb(20 37 79 / .5);margin-top:40px;overflow:hidden}

/* ── section head ── */
.sec{margin-top:var(--g6);position:relative}
.sec__hd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;margin-bottom:var(--g2)}
.sec__tt{flex:1 1 280px;min-width:0}
.sec__tt h2{font:700 clamp(1.6rem,1.3rem + 1.2cqi,2.2rem)/1.1 var(--fd);margin:0 0 4px;letter-spacing:-.015em}
.sec__tt p{margin:0;color:var(--ink-2);font-size:15px}
.sec__nav{display:flex;align-items:center;gap:12px}
.see{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-weight:700;font-size:15px;text-decoration:none;color:var(--ink)}
.arw{width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:var(--clay);box-shadow:var(--sh-btn);display:grid;place-items:center;transition:transform .22s var(--spring),opacity .2s}
.arw:active{transform:translateY(1px) scale(.95);transition-duration:.09s}
.arw[disabled]{opacity:.38;cursor:default}
@container stage (max-width:560px){.sec__nav{gap:8px}.arw{width:40px;height:40px}}

.rail{list-style:none;margin:0;padding:8px 4px 28px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw,216px);gap:var(--g2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none;margin-inline:-4px}
.rail::-webkit-scrollbar{display:none}
.rail>li{scroll-snap-align:start;display:flex;min-width:0}
@container stage (max-width:560px){.rail{--cw:calc((100cqi - 16px) / 2.28);margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}}

/* ── the shared product body: name link, code, price, Add ── */
.it{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.it__go{text-decoration:none;outline:none}
.it__go::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);z-index:3}
.it:has(.it__go:focus-visible){outline:3px solid var(--amber);outline-offset:4px;border-radius:var(--r-card)}
.pb{display:flex;flex-direction:column;gap:2px;padding:10px 6px 4px;flex:1;position:relative}
.pb__nm{font-weight:600;font-size:15px;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pb__meta{font-size:13px;color:var(--ink-3);display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden}
.pb__meta i{width:7px;height:7px;border-radius:50%;background:var(--cat);flex:none}
.buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap;container:buy/inline-size}
.pr{min-width:0;font-variant-numeric:tabular-nums}
.pr b{display:block;font:700 21px/1.05 var(--ft);letter-spacing:-.01em;white-space:nowrap}
.pr b small{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.pr span{display:block;font-size:13px;color:var(--ink-2);white-space:nowrap}
.add{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--amber);color:#14254F;font-weight:700;font-size:15px;box-shadow:var(--sh-amber);transition:transform .22s var(--spring);white-space:nowrap}
.add:hover{transform:translateY(-1px)}
.add:active{transform:translateY(1px) scale(.97);transition-duration:.09s}
.step{position:relative;z-index:4;display:inline-grid;grid-template-columns:36px auto 36px;align-items:center;gap:4px;min-height:44px;padding:4px;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--sh-well);border:1px solid transparent}
.step button{width:36px;height:36px;border-radius:50%;border:1px solid transparent;background:var(--clay);box-shadow:var(--sh-btn);display:grid;place-items:center}
.step output{min-width:44px;text-align:center;font-weight:700;font-size:14px;line-height:1.1;font-variant-numeric:tabular-nums}
.step output small{display:block;font-weight:600;font-size:11.5px;color:var(--ink-2)}
.lock{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;width:100%;padding:0 10px;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--sh-well);border:1px solid transparent;font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink);white-space:nowrap}
.lock svg{flex:none;color:var(--amber-2)}
@container buy (max-width:190px){.buy{flex-direction:column;align-items:stretch}.buy .add,.buy .step{width:100%}.step{grid-template-columns:36px 1fr 36px}.lock svg{display:none}.lock{font-size:13px}}
.coin{position:absolute;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--fd);background:var(--navy);color:#fff;box-shadow:var(--sh-navy);border:1px solid transparent;pointer-events:none}
.coin.is-top{background:var(--amber);color:#14254F;box-shadow:var(--sh-amber)}

/* ═════════ 1 · THE CAPSULE MACHINE ═════════ */
.gc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--g3);align-items:end}
@container stage (max-width:560px){.gc{grid-template-columns:1fr;gap:8px}}
.gm{--u:10px;position:relative;width:calc(var(--u)*24);height:calc(var(--u)*34);flex:none;margin-bottom:28px}
@container stage (max-width:560px){.gm{--u:4.4px;margin:0}.gc__mhd~.sec__tt{flex:1 1 160px}.gc__mhd{align-self:center}}
.gm__dome{position:absolute;left:calc(var(--u)*1);top:0;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:var(--dome);box-shadow:inset 0 -10px 22px rgb(20 37 79 / .14),inset 0 10px 35px rgb(255 255 255 / .22),0 0 0 calc(var(--u)*.6) var(--dome-rim),0 18px 30px -18px rgb(20 37 79 / .4);overflow:hidden;z-index:1}
.gm__dome::after{content:"";position:absolute;left:16%;top:9%;width:34%;height:20%;border-radius:50%;border-top:calc(var(--u)*.9) solid rgb(255 255 255 / .85);transform:rotate(-24deg);filter:blur(.3px)}
.gm__balls{position:absolute;inset:0}
.ball{position:absolute;width:calc(var(--u)*5.2);height:calc(var(--u)*5.2);border-radius:50%;overflow:hidden;background:var(--white-clay);box-shadow:var(--sh-ball)}
.ball::before{content:"";position:absolute;inset:0 0 50% 0;background:var(--c)}
.ball::after{content:"";position:absolute;left:18%;top:12%;width:30%;height:22%;border-radius:50%;background:rgb(255 255 255 / .75)}
.gm__body{position:absolute;left:0;bottom:calc(var(--u)*1.6);width:100%;height:calc(var(--u)*14);border-radius:calc(var(--u)*3.2);background:var(--amber);box-shadow:var(--sh-amber);border:1px solid transparent;z-index:2}
.gm__neck{position:absolute;left:calc(var(--u)*7);bottom:calc(var(--u)*14.8);width:calc(var(--u)*10);height:calc(var(--u)*3);border-radius:calc(var(--u)*1.2);background:var(--amber-2);z-index:1}
.gm__tag{position:absolute;left:calc(var(--u)*1.8);top:calc(var(--u)*1.6);padding:calc(var(--u)*.5) calc(var(--u)*1.2);border-radius:var(--r-pill);background:var(--navy);color:#fff;font:700 calc(var(--u)*1.5)/1 var(--fd);letter-spacing:.04em;box-shadow:var(--sh-navy)}
.gm__knob{position:absolute;right:calc(var(--u)*2);top:calc(var(--u)*2);width:calc(var(--u)*7.4);height:calc(var(--u)*7.4);border-radius:50%;border:1px solid transparent;background:var(--white-clay);box-shadow:var(--sh-btn);display:grid;place-items:center;z-index:5;padding:0}
.gm__knob i{width:72%;height:24%;border-radius:var(--r-pill);background:var(--navy);box-shadow:var(--sh-navy)}
.gm__knob:hover i{animation:wig .5s var(--ease)}
@keyframes wig{30%{transform:rotate(-14deg)}70%{transform:rotate(8deg)}}
.gm__coin{position:absolute;left:calc(var(--u)*16);top:calc(var(--u)*10);width:calc(var(--u)*5);height:calc(var(--u)*3.4);border-radius:calc(var(--u)*1);background:var(--navy);box-shadow:var(--sh-navy)}
.gm__coin::after{content:"";position:absolute;left:44%;top:22%;width:12%;height:56%;border-radius:4px;background:rgb(0 0 0 / .45)}
.gm__chute{position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*1.4);width:calc(var(--u)*8);height:calc(var(--u)*4.4);border-radius:calc(var(--u)*1.4) calc(var(--u)*1.4) calc(var(--u)*2) calc(var(--u)*2);background:#7A4A05;box-shadow:inset 0 6px 10px rgb(0 0 0 / .45)}
.gm__flap{position:absolute;inset:0 0 40% 0;border-radius:inherit;background:var(--amber-2);transform-origin:50% 0}
.gm__foot{position:absolute;left:calc(var(--u)*1);bottom:0;width:calc(var(--u)*22);height:calc(var(--u)*2.6);border-radius:var(--r-pill);background:var(--navy);box-shadow:var(--sh-navy)}
.gm__hint{position:absolute;right:calc(var(--u)*-1);top:calc(var(--u)*25.4);font:700 13px/1.1 var(--ft);color:var(--ink-2);white-space:nowrap;pointer-events:none}
@container stage (max-width:560px){.gm__hint{display:none}}
.gc__mhd{display:flex;gap:14px;align-items:flex-end}
@container stage (min-width:561px){.gc__mhd .gm{display:none}}
@container stage (max-width:560px){.gc>.gm{display:none}}

.cap{position:relative;aspect-ratio:1;border-radius:var(--r-pad);isolation:isolate;overflow:hidden}
.cap::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:radial-gradient(135% 95% at 50% 2%,color-mix(in srgb,var(--cat) var(--glow-a),transparent) 0%,color-mix(in srgb,var(--cat) var(--glow-b),transparent) 55%,color-mix(in srgb,var(--cat) var(--glow-c),transparent) 100%)}
/* the capsule: two halves. Shut, they meet in the middle and hide the product. Open, they part and settle BEHIND the
   product (top half up in the right corner, bottom half down in the left), so the capsule stays in the picture
   without covering anything. */
.cap__h{position:absolute;left:22%;width:56%;aspect-ratio:2/1;z-index:0}
.cap__h--t{bottom:50%;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:radial-gradient(120% 120% at 35% 20%,color-mix(in srgb,var(--cat) 50%,#fff) 0%,var(--cat) 72%,color-mix(in srgb,var(--cat) 78%,#000) 100%);transform-origin:50% 100%;transform:translate(46%,-34%) rotate(28deg) scale(.62)}
.cap__h--b{top:50%;border-radius:0 0 50% 50% / 0 0 100% 100%;background:radial-gradient(120% 90% at 35% 10%,#FFFFFF 0%,var(--white-clay) 45%,color-mix(in srgb,var(--white-clay) 80%,#7A88A8) 100%);transform-origin:50% 0;transform:translate(-46%,40%) rotate(-24deg) scale(.62)}
.cap__h--t::after,.cap__h--b::after{content:"";position:absolute;left:16%;width:20%;height:24%;border-radius:50%;background:rgb(255 255 255 / .7)}
.cap__h--t::after{top:22%}.cap__h--b::after{top:34%}
.cap__h--b::before{content:"";position:absolute;left:0;right:0;top:-12%;height:24%;border-radius:50%;background:color-mix(in srgb,var(--white-clay) 70%,var(--cat) 30%);box-shadow:inset 0 3px 5px rgb(20 37 79 / .3)}
.cap.is-shut .cap__h{transform:none;z-index:2;opacity:0}
.cap.is-shut .cap__h--b::before{display:none}
.cap__img{position:absolute;inset:9% 8% 6% 8%;z-index:1}
.cap__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:var(--drop);transform-origin:50% 70%}
.cap.is-shut .cap__img img{transform:scale(.3);opacity:0}
.cap__nav{display:flex;justify-content:center;margin-top:-8px}
.prog{width:120px;height:8px;border-radius:var(--r-pill);background:var(--well);box-shadow:var(--sh-well);overflow:hidden}
.prog i{display:block;height:100%;width:30%;border-radius:inherit;background:var(--navy);transition:transform .15s linear}
/* whole cards only: 4 beside the machine, 3 on a tablet, 2 on a phone. Nothing is cut at the edge. */
.gc .rail{grid-auto-columns:calc((100% - 3 * var(--g2)) / 4)}
@container stage (max-width:1000px){.gc .rail{grid-auto-columns:calc((100% - 2 * var(--g2)) / 3)}}
@container stage (max-width:560px){.gc .rail{gap:16px;grid-auto-columns:calc((100% - 16px) / 2)}}
.cap .coin{top:8px;left:8px}
.cap__new{position:absolute;top:8px;left:8px;z-index:4;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--clay);box-shadow:var(--sh-btn);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.cap__new svg{color:var(--amber-2)}
.gcard{background:var(--card);border:1px solid transparent;border-radius:var(--r-card);box-shadow:var(--sh-card);padding:8px}
.ghost{position:fixed;z-index:60;pointer-events:none;border-radius:50%;overflow:hidden;background:var(--white-clay);box-shadow:var(--sh-ball)}
.ghost::before{content:"";position:absolute;inset:0 0 50% 0;background:var(--c)}
.ghost::after{content:"";position:absolute;left:18%;top:12%;width:30%;height:22%;border-radius:50%;background:rgb(255 255 255 / .75)}

/* ═════════ 2 · THE SUSHI BELT ═════════ */
.kt__legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.band{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 8px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--clay);box-shadow:var(--sh-btn);font-size:13.5px;font-weight:700;color:var(--ink);transition:transform .22s var(--spring)}
.band i{width:24px;height:24px;border-radius:50%;background:var(--white-clay);box-shadow:inset 0 0 0 5px var(--b),0 2px 4px rgb(20 37 79 / .2)}
.band small{font-weight:600;color:var(--ink-2)}
.band[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:var(--sh-navy)}
.band[aria-pressed="true"] small{color:rgb(255 255 255 / .75)}
.band:active{transform:scale(.96);transition-duration:.09s}
.kt__note{font-size:14px;color:var(--ink-2);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.kt{position:relative;border-radius:var(--r-sheet);background:var(--counter);box-shadow:var(--sh-sheet);border:1px solid transparent;padding:0 0 4px;overflow:hidden}
.kt__belt{position:absolute;left:0;right:0;top:14px;height:var(--bh,196px);background:repeating-linear-gradient(90deg,var(--belt) 0 46px,var(--belt-2) 46px 48px);background-position:var(--o,0px) 0;box-shadow:inset 0 10px 14px rgb(0 0 0 / .28),inset 0 -6px 10px rgb(0 0 0 / .2);border-block:8px solid var(--belt-edge)}
.kt__belt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgb(255 255 255 / .05) 22px 24px);background-position:var(--o,0px) 0}
.kt__counter{position:absolute;left:0;right:0;top:calc(14px + var(--bh,196px));bottom:0;background:linear-gradient(var(--counter-2),var(--counter) 18px)}
.kt__noren{position:absolute;left:0;top:0;height:calc(var(--bh,196px) + 30px);width:84px;z-index:5;display:flex;gap:3px;padding:0 0 0 10px;pointer-events:none}
.kt__noren span{flex:1;height:62%;padding-top:10px;place-items:start center;background:var(--noren);border-radius:0 0 10px 10px;display:grid;place-items:center;color:var(--amber);font:700 15px/1 var(--fd);box-shadow:0 10px 14px -8px rgb(0 0 0 / .4),inset 0 -6px 8px rgb(0 0 0 / .25);transform-origin:50% 0}
:host([data-theme="dark"]) .kt__noren span{color:#14254F}
.kt__noren::before{content:"";position:absolute;left:4px;right:-4px;top:0;height:8px;border-radius:4px;background:#8A5A2B;box-shadow:0 2px 3px rgb(0 0 0 / .3)}
.kt .rail{position:relative;z-index:2;padding:14px 16px 20px 92px;scroll-padding-inline:92px 16px;margin:0;--cw:200px}
@container stage (max-width:560px){.kt .rail{--cw:172px;padding-left:72px;scroll-padding-inline:72px 16px;margin:0}.kt__noren{width:58px}.kt__noren span{font-size:12px}}
.pl{height:var(--bh,196px);display:grid;place-items:center;position:relative}
.pl__plate{position:relative;width:86%;aspect-ratio:1;border-radius:50%;background:var(--white-clay);box-shadow:inset 0 0 0 calc(9px) var(--b,#D3DAE6),inset 0 0 0 11px rgb(255 255 255 / .6),inset 0 -10px 18px rgb(20 37 79 / .18),0 14px 18px -8px rgb(0 0 0 / .45);display:grid;place-items:center}
.pl__plate::before{content:"";position:absolute;inset:22%;border-radius:50%;box-shadow:inset 0 3px 6px rgb(20 37 79 / .14)}
.pl__plate img{position:relative;width:80%;height:80%;object-fit:contain;filter:var(--drop);transform:translateY(-8%)}
.pl .coin{top:10px;left:4px}
.kt .pb{padding:12px 8px 4px;background:none}
.kt .rail>li{transition:none}
.kt .rail>li.is-out{display:none}

/* ═════════ 3 · THE PENCIL CASE ═════════ */
.pcase{position:relative;border-radius:40px;background:var(--pouch);box-shadow:0 30px 50px -30px rgb(122 46 75 / .55),0 8px 16px -10px rgb(20 37 79 / .2),inset 0 -12px 22px rgb(122 46 75 / .22),inset 0 10px 30px rgb(255 255 255 / .22);border:1px solid transparent;padding:0 16px 16px}
:host([data-theme="dark"]) .pcase{box-shadow:0 30px 50px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(255 210 230 / .10),inset 0 -12px 22px rgb(0 0 0 / .35),inset 0 8px 25px rgb(255 255 255 / .04)}
.pcase::before,.pcase::after{content:"";position:absolute;top:30px;width:22px;height:46px;border-radius:12px;background:var(--pouch-2);box-shadow:inset 0 -4px 6px rgb(0 0 0 / .15)}
.pcase::before{left:-10px}.pcase::after{right:-10px}
.pcase__band{position:relative;height:72px;display:flex;align-items:center}
.pcase__zip{position:absolute;left:28px;right:28px;top:50%;height:12px;margin-top:-6px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--teeth) 0 5px,transparent 5px 9px);opacity:.85}
.pcase__zip::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--pouch-2)}
.pcase__pull{position:absolute;top:50%;left:22px;width:46px;height:30px;margin-top:-15px;z-index:6;border-radius:12px;background:var(--amber);box-shadow:var(--sh-amber);border:1px solid transparent}
.pcase__pull::before{content:"";position:absolute;right:-12px;top:7px;width:18px;height:14px;border-radius:7px;border:4px solid var(--amber-2)}
.charm{position:absolute;right:-30px;top:16px;width:38px;transform-origin:50% 0;pointer-events:none}
.charm::before{content:"";display:block;width:3px;height:16px;margin:0 auto;background:var(--amber-2);border-radius:2px}
.charm b{display:block;width:38px;height:34px;border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;background:#FFF7FA;box-shadow:var(--sh-ball);position:relative}
.face{position:absolute;left:50%;top:52%;width:62%;height:40%;transform:translate(-50%,-50%)}
.face i{position:absolute;top:10%;width:14%;height:34%;border-radius:50%;background:var(--face)}
.face i:nth-child(1){left:14%}.face i:nth-child(2){right:14%}
.face s{position:absolute;top:50%;width:22%;height:22%;border-radius:50%;background:var(--blush);opacity:.75}
.face s:nth-of-type(1){left:-2%}.face s:nth-of-type(2){right:-2%}
.face u{position:absolute;left:50%;top:44%;width:18%;height:18%;margin-left:-9%;border:2.5px solid var(--face);border-top:0;border-radius:0 0 50% 50%/0 0 100% 100%}
.face.is-sleep i{height:5%;top:28%;border-radius:2px}
.face.is-happy u{width:30%;height:30%;margin-left:-15%;background:#FF6B88;border:0}
.pcase__label{margin-left:auto;margin-right:8px;position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:var(--r-pill);background:var(--lining);color:var(--pouch-ink);font:700 14px/1 var(--fd);box-shadow:inset 0 0 0 2px var(--pouch-2);outline:2px dashed var(--pouch-2);outline-offset:-6px}
.pcase__label .pf{position:relative;width:34px;height:30px}
@container stage (max-width:560px){.pcase__label{display:none}}
.pcase__body{position:relative;border-radius:28px;background:var(--lining);box-shadow:inset 0 8px 16px rgb(122 46 75 / .18),inset 0 -4px 8px rgb(255 255 255 / .24);padding:12px}
.pcase__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pcase__grid>.slot:first-child{grid-column:span 2;grid-row:span 2}
@container stage (max-width:1000px){.pcase__grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pcase__grid>.slot:nth-child(n+8){display:none}}
@container stage (max-width:560px){.pcase{padding:0 10px 10px;border-radius:32px}.pcase__body{padding:8px;border-radius:24px}.pcase__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pcase__grid>.slot:first-child{grid-column:1/-1;grid-row:auto}.pcase__grid>.slot:nth-child(n+6){display:none}}
.slot{border-radius:20px;background:var(--lining-2);box-shadow:inset 0 4px 10px rgb(122 46 75 / .2),inset 0 -3px 8px rgb(255 255 255 / .28);padding:8px}
:host([data-theme="dark"]) .slot,:host([data-theme="dark"]) .pcase__body{box-shadow:inset 0 4px 12px rgb(0 0 0 / .55)}
.slot__art{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:12%;border-radius:14px;overflow:hidden;isolation:isolate}
.slot__art::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--cat) 26%,transparent),transparent 75%)}
.slot__art img{width:100%;height:100%;object-fit:contain;filter:var(--drop)}
.slot .coin{top:6px;left:6px}
.slot:first-child .slot__art{aspect-ratio:auto;min-height:280px;flex:1}
.slot:first-child{display:flex;flex-direction:column}
.slot:first-child .pb{flex:none}
.slot:first-child .pb__nm{font:700 clamp(1.25rem,1.1rem + .5cqi,1.55rem)/1.15 var(--fd);min-height:0}
.slot:first-child .pr b{font-size:26px}
.slot:first-child .coin{width:44px;height:44px;font-size:20px;top:10px;left:10px}
.slot .pb__nm{font-size:14px}
.slot .pr b{font-size:18px}
@container stage (max-width:560px){.slot:first-child{flex-direction:row;gap:6px}.slot:first-child .slot__art{flex:0 0 44%;min-height:0;aspect-ratio:1}.slot:first-child .pb{justify-content:center}.slot:first-child .pr b{font-size:21px}.slot:first-child .coin{width:34px;height:34px;font-size:16px;top:6px;left:6px}}
.pcase__lid{position:absolute;inset:0;border-radius:inherit;z-index:5;background:var(--pouch);clip-path:inset(0 0 0 var(--cut,0%) round 28px);display:grid;place-items:center;overflow:hidden}
.pcase__lid::before{content:"";position:absolute;inset:14px;border-radius:20px;border:3px dashed var(--pouch-2)}
.pcase__lid p{position:relative;margin:0;font:700 clamp(1.1rem,1rem + .8cqi,1.6rem)/1.2 var(--fd);color:var(--pouch-ink);text-align:center;padding:0 24px}

/* ═════════ 4 · THE MOCHI CUSHIONS ═════════ */
.mo{position:relative;aspect-ratio:1/1.02;isolation:isolate}
.mo::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:var(--r-pad);background:radial-gradient(135% 95% at 50% 2%,color-mix(in srgb,var(--cat) var(--glow-a),transparent) 0%,color-mix(in srgb,var(--cat) var(--glow-b),transparent) 55%,color-mix(in srgb,var(--cat) var(--glow-c),transparent) 100%)}
.mo__blob{position:absolute;left:8%;right:8%;bottom:4%;height:42%;transform-origin:50% 100%;z-index:1}
.mo__blob b{position:absolute;inset:0;border-radius:50% 50% 44% 44% / 64% 64% 36% 36%;background:color-mix(in srgb,var(--cat) 16%,#FFFFFF);box-shadow:inset 0 -12px 18px color-mix(in srgb,var(--cat) 30%,rgb(20 37 79 / .2)),inset 0 11px 30px rgb(255 255 255 / .36),0 14px 18px -10px rgb(20 37 79 / .4)}
:host([data-theme="dark"]) .mo__blob b{background:color-mix(in srgb,var(--cat) 22%,#E7ECF6)}
.mo__blob .face{top:70%;width:40%;height:28%}
.mo__img{position:absolute;left:20%;right:20%;bottom:34%;height:56%;display:grid;place-items:end center;z-index:2;transform-origin:50% 100%}
.mo__img img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:var(--drop)}
.mo .coin{top:8px;left:8px}
.crown{position:absolute;left:50%;top:-20%;width:40%;margin-left:-20%;z-index:3}
.mcard{background:var(--card);border:1px solid transparent;border-radius:var(--r-card);box-shadow:var(--sh-card);padding:8px}
.heart{position:fixed;z-index:60;pointer-events:none;color:#FF6B88}


/* ═════════ MORE CLAY (owner, 8 Oct: "all is good just need more clay") ═════════
   Everything on the capsule shelf is now made of the same matte clay: a solid fill, one soft tinted shadow under it,
   a dark inset rising from the bottom and a light inset on top. The glossy gradients and hard white glints are gone. */
:host{
  --cx-amber:0 26px 38px -22px rgb(179 111 0 / .70),0 8px 14px -8px rgb(20 37 79 / .22),inset 0 -14px 20px rgb(140 80 0 / .38),inset 0 14px 40px rgb(255 255 255 / .2);
  --cx-white:0 12px 18px -10px rgb(20 37 79 / .45),inset 0 -7px 11px rgb(20 37 79 / .18),inset 0 8px 20px rgb(255 255 255 / .38);
  --cx-navy:0 12px 18px -10px rgb(20 37 79 / .55),inset 0 -6px 10px rgb(0 0 0 / .40),inset 0 6px 15px rgb(255 255 255 / .1);
  --cx-ball:0 6px 9px -5px rgb(20 37 79 / .40),inset 0 -5px 8px rgb(20 37 79 / .22),inset 0 6px 15px rgb(255 255 255 / .3);
  --cx-half-t:0 12px 16px -10px rgb(20 37 79 / .40),inset 0 -6px 10px rgb(0 0 0 / .20),inset 0 9px 25px rgb(255 255 255 / .22);
  --cx-half-b:0 14px 18px -10px rgb(20 37 79 / .40),inset 0 -9px 14px rgb(20 37 79 / .20),inset 0 6px 15px rgb(255 255 255 / .36);
  --cx-card:0 20px 32px -18px rgb(20 37 79 / .40),0 4px 10px -6px rgb(20 37 79 / .12),inset 0 -6px 12px rgb(20 37 79 / .08),inset 0 7px 20px rgb(255 255 255 / .38);
  --cx-pad:inset 0 5px 12px rgb(20 37 79 / .14),inset 0 -4px 8px rgb(255 255 255 / .36);
  --cx-rim:#E4EAF5}
@media (prefers-color-scheme:dark){:host(:not([data-theme="light"])){
  --cx-amber:0 26px 38px -18px rgb(0 0 0 / .75),inset 0 -14px 20px rgb(120 60 0 / .45),inset 0 14px 40px rgb(255 255 255 / .17);
  --cx-white:0 12px 18px -8px rgb(0 0 0 / .65),inset 0 -7px 11px rgb(20 37 79 / .35),inset 0 8px 20px rgb(255 255 255 / .24);
  --cx-navy:0 12px 18px -8px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .12),inset 0 -6px 10px rgb(0 0 0 / .45),inset 0 6px 15px rgb(255 255 255 / .06);
  --cx-ball:0 6px 9px -4px rgb(0 0 0 / .55),inset 0 -5px 8px rgb(0 0 0 / .30),inset 0 6px 15px rgb(255 255 255 / .18);
  --cx-half-t:0 12px 16px -8px rgb(0 0 0 / .6),inset 0 -6px 10px rgb(0 0 0 / .30),inset 0 9px 25px rgb(255 255 255 / .15);
  --cx-half-b:0 14px 18px -8px rgb(0 0 0 / .6),inset 0 -9px 14px rgb(20 37 79 / .38),inset 0 6px 15px rgb(255 255 255 / .22);
  --cx-card:0 20px 32px -14px rgb(0 0 0 / .75),0 0 0 1px rgb(210 222 255 / .08),inset 0 -6px 12px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --cx-pad:inset 0 5px 14px rgb(0 0 0 / .55),inset 0 -3px 8px rgb(255 255 255 / .02);
  --cx-rim:#2A3A6A}}
:host([data-theme="dark"]){
  --cx-amber:0 26px 38px -18px rgb(0 0 0 / .75),inset 0 -14px 20px rgb(120 60 0 / .45),inset 0 14px 40px rgb(255 255 255 / .17);
  --cx-white:0 12px 18px -8px rgb(0 0 0 / .65),inset 0 -7px 11px rgb(20 37 79 / .35),inset 0 8px 20px rgb(255 255 255 / .24);
  --cx-navy:0 12px 18px -8px rgb(0 0 0 / .7),0 0 0 1px rgb(210 222 255 / .12),inset 0 -6px 10px rgb(0 0 0 / .45),inset 0 6px 15px rgb(255 255 255 / .06);
  --cx-ball:0 6px 9px -4px rgb(0 0 0 / .55),inset 0 -5px 8px rgb(0 0 0 / .30),inset 0 6px 15px rgb(255 255 255 / .18);
  --cx-half-t:0 12px 16px -8px rgb(0 0 0 / .6),inset 0 -6px 10px rgb(0 0 0 / .30),inset 0 9px 25px rgb(255 255 255 / .15);
  --cx-half-b:0 14px 18px -8px rgb(0 0 0 / .6),inset 0 -9px 14px rgb(20 37 79 / .38),inset 0 6px 15px rgb(255 255 255 / .22);
  --cx-card:0 20px 32px -14px rgb(0 0 0 / .75),0 0 0 1px rgb(210 222 255 / .08),inset 0 -6px 12px rgb(0 0 0 / .32),inset 0 6px 17.5px rgb(255 255 255 / .03);
  --cx-pad:inset 0 5px 14px rgb(0 0 0 / .55),inset 0 -3px 8px rgb(255 255 255 / .02);
  --cx-rim:#2A3A6A}

/* the machine */
.gm__rim{position:absolute;left:calc(var(--u)*.1);top:calc(var(--u)*-.9);width:calc(var(--u)*23.8);height:calc(var(--u)*23.8);border-radius:50%;background:var(--cx-rim);box-shadow:var(--cx-white);z-index:1}
.gm__dome{box-shadow:inset 0 -14px 24px rgb(20 37 79 / .20),inset 0 14px 45px rgb(255 255 255 / .22);z-index:1}
:host([data-theme="dark"]) .gm__dome{box-shadow:inset 0 -14px 24px rgb(0 0 0 / .45),inset 0 14px 45px rgb(255 255 255 / .04)}
.gm__dome::after{left:14%;top:8%;width:40%;height:24%;border:0;border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255 / .22),transparent);transform:rotate(-24deg);filter:blur(2px)}
.ball{width:calc(var(--u)*5.6);height:calc(var(--u)*5.6);background:linear-gradient(var(--c) 0 47%,color-mix(in srgb,var(--c) 70%,#000) 47% 53%,var(--white-clay) 53% 100%);box-shadow:var(--cx-ball)}
.ball::before{display:none}
.ball::after{left:20%;top:10%;width:36%;height:26%;background:radial-gradient(closest-side,rgb(255 255 255 / .22),transparent);filter:blur(1px)}
.gm__body{border-radius:calc(var(--u)*4.2);box-shadow:var(--cx-amber)}
.gm__neck{border-radius:calc(var(--u)*1.6);box-shadow:inset 0 -5px 8px rgb(120 60 0 / .35),inset 0 6px 15px rgb(255 255 255 / .14);z-index:1}
.gm__tag{box-shadow:var(--cx-navy)}
.gm__knob{width:calc(var(--u)*7.8);height:calc(var(--u)*7.8);box-shadow:var(--cx-white)}
.gm__knob i{height:26%;box-shadow:var(--cx-navy)}
.gm__coin{border-radius:calc(var(--u)*1.4);box-shadow:var(--cx-navy)}
.gm__chute{border-radius:calc(var(--u)*2) calc(var(--u)*2) calc(var(--u)*2.4) calc(var(--u)*2.4);background:#8A5408;box-shadow:inset 0 9px 14px rgb(0 0 0 / .55),inset 0 -5px 8px rgb(255 255 255 / .09),0 2px 0 rgb(255 255 255 / .35)}
.gm__flap{box-shadow:inset 0 -4px 6px rgb(120 60 0 / .45),inset 0 5px 10px rgb(255 255 255 / .16)}
.gm__foot{height:calc(var(--u)*3);box-shadow:var(--cx-navy)}

/* the capsules */
.ghost{background:linear-gradient(var(--c) 0 47%,color-mix(in srgb,var(--c) 70%,#000) 47% 53%,var(--white-clay) 53% 100%);box-shadow:var(--cx-ball)}
.ghost::before{display:none}
.ghost::after{left:20%;top:10%;width:36%;height:26%;background:radial-gradient(closest-side,rgb(255 255 255 / .22),transparent);filter:blur(1px)}
.cap__h--t{background:color-mix(in srgb,var(--cat) 80%,#fff);box-shadow:var(--cx-half-t)}
.cap__h--b{background:var(--white-clay);box-shadow:var(--cx-half-b)}
.cap__h--t::after,.cap__h--b::after{width:34%;height:30%;left:14%;background:radial-gradient(closest-side,rgb(255 255 255 / .24),transparent);filter:blur(1.5px)}
.cap__h--b::before{background:color-mix(in srgb,var(--white-clay) 72%,var(--cat) 28%);box-shadow:inset 0 4px 7px rgb(20 37 79 / .32)}
.cap.is-shut .cap__h--t{box-shadow:inset 0 -6px 10px rgb(0 0 0 / .20),inset 0 9px 25px rgb(255 255 255 / .22)}

/* the card is a clay tile; the picture sits in a soft pressed tray, like a capsule machine's prize cup */
.gcard{box-shadow:var(--cx-card);padding:9px}
.gcard .cap{box-shadow:var(--cx-pad)}
.cap__new{box-shadow:var(--cx-white);background:var(--clay)}
.gcard .coin{box-shadow:var(--cx-navy)}.gcard .coin.is-top{box-shadow:var(--cx-amber)}
.prog{height:10px;box-shadow:var(--sh-well)}
.prog i{box-shadow:var(--cx-navy)}


/* ═════════ THE COLLECTOR'S CABINET ═════════ */
:host{--cab:#FFF4E2;--cab-2:#F3DFC0;--cab-in:#EFDCBD;--cab-ink:#7A4A12;--plank:#E2C08E;--lamp-on:#FFE38A;--beam:255 222 130}
@media (prefers-color-scheme:dark){:host(:not([data-theme="light"])){--cab:#2C2546;--cab-2:#221C3A;--cab-in:#17122B;--cab-ink:#FFD9A0;--plank:#43386D;--lamp-on:#FFD66B;--beam:255 210 110}}
:host([data-theme="dark"]){--cab:#2C2546;--cab-2:#221C3A;--cab-in:#17122B;--cab-ink:#FFD9A0;--plank:#43386D;--lamp-on:#FFD66B;--beam:255 210 110}
.cab{position:relative;border-radius:40px;background:var(--cab);border:1px solid transparent;padding:0 18px 20px;margin:28px 0 30px;
  box-shadow:0 34px 56px -34px rgb(122 74 18 / .55),0 10px 20px -12px rgb(20 37 79 / .2),inset 0 -14px 22px rgb(122 74 18 / .14),inset 0 12px 35px rgb(255 255 255 / .36)}
:host([data-theme="dark"]) .cab{box-shadow:0 34px 56px -26px rgb(0 0 0 / .8),0 0 0 1px rgb(255 220 170 / .08),inset 0 -14px 22px rgb(0 0 0 / .35),inset 0 10px 30px rgb(255 255 255 / .03)}
.cab__crown{display:flex;justify-content:center;transform:translateY(-50%);height:24px}
.cab__plate{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 12px;border-radius:var(--r-pill);background:var(--amber);color:#14254F;font:700 clamp(1rem,.9rem + .4cqi,1.25rem)/1 var(--fd);box-shadow:var(--cx-amber);white-space:nowrap}
.cab__plate .pf{position:relative;width:36px;height:32px;border-radius:50%;background:#FFF7FA;box-shadow:var(--cx-ball)}
.cab__body{position:relative;perspective:1800px;border-radius:26px;background:var(--cab-2);padding:14px;box-shadow:inset 0 6px 14px rgb(122 74 18 / .22),inset 0 -4px 8px rgb(255 255 255 / .28);margin-top:4px}
:host([data-theme="dark"]) .cab__body{box-shadow:inset 0 6px 16px rgb(0 0 0 / .6)}
.cab__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@container stage (max-width:1000px){.cab__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cab__grid>.cub:nth-child(n+7){display:none}}
@container stage (max-width:560px){.cab{padding:0 10px 14px;border-radius:32px}.cab__body{padding:8px;border-radius:22px}.cab__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.cub{display:flex;min-width:0}
.cub>.it{border-radius:20px;background:var(--cab);padding:8px;box-shadow:0 12px 18px -12px rgb(122 74 18 / .45),inset 0 -5px 9px rgb(122 74 18 / .10),inset 0 6px 15px rgb(255 255 255 / .36);border:1px solid transparent}
:host([data-theme="dark"]) .cub>.it{box-shadow:0 12px 18px -10px rgb(0 0 0 / .7),inset 0 -5px 9px rgb(0 0 0 / .3),inset 0 5px 12.5px rgb(255 255 255 / .03)}
.cub__in{position:relative;aspect-ratio:1;border-radius:14px;background:var(--cab-in);overflow:hidden;isolation:isolate;box-shadow:inset 0 10px 16px rgb(122 74 18 / .28),inset 0 -4px 8px rgb(255 255 255 / .24)}
:host([data-theme="dark"]) .cub__in{box-shadow:inset 0 10px 18px rgb(0 0 0 / .65)}
.cub__in::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--cat) 22%,transparent),transparent 70%)}
.cub__plank{position:absolute;left:0;right:0;bottom:0;height:9%;background:var(--plank);box-shadow:inset 0 5px 8px rgb(255 255 255 / .18),inset 0 -3px 5px rgb(0 0 0 / .18),0 -4px 8px -2px rgb(0 0 0 / .15);z-index:2}
.cub__stand{position:absolute;left:27%;width:46%;bottom:9%;aspect-ratio:3/1;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:color-mix(in srgb,var(--cat) 80%,#fff);box-shadow:inset 0 -5px 8px rgb(0 0 0 / .2),inset 0 7px 17.5px rgb(255 255 255 / .22);z-index:1}
.cub__img{position:absolute;left:10%;right:10%;top:11%;bottom:23%;z-index:2}
.cub__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:var(--drop)}
.tag{position:absolute;left:9%;top:0;z-index:3;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;pointer-events:none}
.tag i{width:2px;height:12px;background:var(--cab-ink);opacity:.5}
.tag b{display:grid;place-items:center;min-width:30px;height:34px;padding:0 6px;border-radius:9px 9px 12px 12px;background:var(--navy);color:#fff;font:700 15px/1 var(--fd);box-shadow:var(--cx-navy);position:relative}
.tag b::before{content:"";position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:rgb(0 0 0 / .35)}
.tag b{padding-top:6px}
.tag.is-top b{background:var(--amber);color:#14254F;box-shadow:var(--cx-amber)}
.cub__lamp{position:absolute;left:50%;top:0;width:34%;height:9%;margin-left:-17%;border-radius:0 0 999px 999px;background:var(--plank);box-shadow:inset 0 -4px 6px rgb(0 0 0 / .2);z-index:3;transition:background-color .3s}
.cub__light{position:absolute;inset:0;z-index:1;background:radial-gradient(70% 95% at 50% 0%,rgb(var(--beam) / .85),rgb(var(--beam) / .30) 50%,transparent 82%);opacity:0;transition:opacity .5s var(--ease)}
.cub.is-lit .cub__light{opacity:1}
.cub.is-lit .cub__lamp{background:var(--lamp-on);box-shadow:inset 0 -3px 5px rgb(180 110 0 / .3),0 4px 14px rgb(var(--beam) / .9)}
.cub .pb{padding:10px 4px 2px}
.cab__doors{position:absolute;inset:0;z-index:8;display:flex;border-radius:inherit;transform-style:preserve-3d}
.door{position:relative;flex:1;background:var(--cab);border:1px solid transparent;box-shadow:0 0 0 1px rgb(122 74 18 / .10),inset 0 -10px 18px rgb(122 74 18 / .14),inset 0 10px 30px rgb(255 255 255 / .36);backface-visibility:hidden}
:host([data-theme="dark"]) .door{box-shadow:0 0 0 1px rgb(255 220 170 / .08),inset 0 -10px 18px rgb(0 0 0 / .35),inset 0 8px 25px rgb(255 255 255 / .03)}
.door--l{border-radius:26px 6px 6px 26px}.door--r{border-radius:6px 26px 26px 6px}
.door b{position:absolute;inset:7% 9%;border-radius:20px;background:color-mix(in srgb,var(--cab-in) 70%,#fff 30%);box-shadow:inset 0 8px 16px rgb(122 74 18 / .22),inset 0 -4px 8px rgb(255 255 255 / .28)}
:host([data-theme="dark"]) .door b{background:var(--cab-in);box-shadow:inset 0 8px 16px rgb(0 0 0 / .55)}
.door b::after{content:"";position:absolute;left:12%;top:8%;width:30%;height:40%;border-radius:40%;background:radial-gradient(closest-side,rgb(255 255 255 / .2),transparent);transform:rotate(18deg)}
.door s{position:absolute;top:50%;width:18px;height:46px;margin-top:-23px;border-radius:9px;background:var(--amber);box-shadow:var(--cx-amber)}
.door--l s{right:12px}.door--r s{left:12px}
.cab__foot{position:absolute;bottom:-14px;width:70px;height:22px;border-radius:0 0 18px 18px;background:var(--cab-2);box-shadow:0 10px 14px -8px rgb(0 0 0 / .35),inset 0 -4px 6px rgb(0 0 0 / .15)}
.cab__foot--l{left:56px}.cab__foot--r{right:56px}

/* ═════════ ONE MACHINE, TWO CHUTES ═════════ */
.tc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--g3)}
.tc__mach{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;padding:calc(var(--g6) + 92px) 0 40px}
.tc__sec{grid-column:2}
.gm--top{margin:0}
.gm--top .gm__foot{display:none}
.tc__tube{position:relative;flex:1;min-height:80px;width:46px;margin-top:-18px;margin-bottom:-14px;border-radius:24px;background:var(--amber-2);box-shadow:inset 0 -8px 12px rgb(120 60 0 / .35),inset 0 8px 20px rgb(255 255 255 / .14),0 10px 16px -10px rgb(20 37 79 / .35);overflow:hidden;z-index:0}
.tc__tube::before{content:"";position:absolute;left:10px;right:10px;top:16px;bottom:16px;border-radius:14px;background:var(--dome);box-shadow:inset 0 4px 8px rgb(20 37 79 / .25)}
.tc__drop{position:absolute;left:50%;top:6px;width:26px;height:26px;margin-left:-13px;border-radius:50%;opacity:0;background:linear-gradient(var(--c,#2563EB) 0 47%,color-mix(in srgb,var(--c,#2563EB) 70%,#000) 47% 53%,var(--white-clay) 53% 100%);box-shadow:var(--cx-ball)}
.gbox{height:calc(var(--u)*17.4);margin:0}
.gbox .gm__body{height:calc(var(--u)*14)}
.gbox__stub{position:absolute;left:50%;top:0;width:calc(var(--u)*4.6);height:calc(var(--u)*3);margin-left:calc(var(--u)*-2.3);border-radius:calc(var(--u)*1.6) calc(var(--u)*1.6) 0 0;background:var(--amber-2);box-shadow:inset 0 6px 15px rgb(255 255 255 / .14);z-index:1}
.tc__mach .gbox__stub{display:none}
.tc .rail{grid-auto-columns:calc((100% - 3 * var(--g2)) / 4)}
@container stage (max-width:1000px){.tc .rail{grid-auto-columns:calc((100% - 2 * var(--g2)) / 3)}}
@container stage (max-width:560px){.tc{grid-template-columns:1fr}.tc__mach{display:none}.tc__sec{grid-column:1}.tc .rail{gap:16px;grid-auto-columns:calc((100% - 16px) / 2);margin-inline:-16px;padding-inline:16px}}


/* ═════════ THE LIVE PHOTOS (owner, 8 Oct: use the edited photos that are on the site, not the cut-outs) ═════════
   Every product is now its real shop photograph: the product on its pink, blue or glass podium, square, opaque.
   So the capsule can no longer hide behind the product. Instead it OPENS the photo: it lands closed, rattles and pops,
   the photo grows out of the opening as a circle, and the two halves snap back together as a little capsule charm
   clipped to the photo's top-right corner, over the backdrop, never over the product. */
.cap{overflow:hidden}
.cap::before{display:none}
.cap.is-shut::before{display:block}
.cap.is-shut{background:var(--well)}
.cap__img{inset:0;z-index:1}
.cap__img img{object-fit:cover;object-position:50% 50%;filter:none;border-radius:inherit;transform-origin:50% 50%}
.cap.is-shut .cap__img img{transform:none;opacity:1;clip-path:circle(0% at 50% 50%)}
.cap__h{z-index:3}
.cap__h--t{transform-origin:50% 100%;transform:translate(60.7%,-121.4%) rotate(18deg) scale(.3)}
.cap__h--b{transform-origin:50% 0;transform:translate(60.7%,-121.4%) rotate(18deg) scale(.3)}
.cap__h--b::before{display:none}
.cap__new,.cap .coin{z-index:4}
.gcard .cap{box-shadow:none}
.gcard .cap::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;box-shadow:inset 0 4px 10px rgb(20 37 79 / .18),inset 0 -4px 8px rgb(255 255 255 / .14)}
/* the cabinet: each cubby is a lit display window holding the photo */
.cub__in{background:var(--cab-in)}
.cub__in::before{display:none}
.cub__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform-origin:50% 60%}
.cub__in::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 12px 18px rgb(122 74 18 / .38),inset 8px 0 12px -6px rgb(122 74 18 / .22),inset -8px 0 12px -6px rgb(122 74 18 / .22)}
:host([data-theme="dark"]) .cub__in::after{box-shadow:inset 0 12px 20px rgb(0 0 0 / .65),inset 8px 0 14px -6px rgb(0 0 0 / .45),inset -8px 0 14px -6px rgb(0 0 0 / .45)}
.cub__plank{height:8%;z-index:3}
.cub__light{z-index:2;mix-blend-mode:screen}
.cub__lamp,.tag{z-index:4}

/* ── why ── */
.why{margin-top:var(--g4);padding:20px 24px;border-radius:var(--r-card);background:var(--clay);box-shadow:var(--sh-card);border:1px solid transparent;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px 32px}
.why h3{font:700 18px/1.2 var(--fd);margin:0 0 6px}
.why p,.why li{font-size:14.5px;color:var(--ink-2);margin:0}
.why ul{margin:0;padding-left:18px;display:grid;gap:4px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);opacity:0;z-index:70;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-pill);background:#14254F;color:#fff;box-shadow:var(--sh-navy);font-weight:600;font-size:14.5px;transition:transform .3s var(--ease),opacity .3s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast svg{color:var(--amber);flex:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (forced-colors:active){.gcard,.mcard,.add,.arw,.seg,.step,.lock,.coin,.why,.band,.kt,.pcase,.slot,.gm__knob{border:1px solid CanvasText}.seg button[aria-pressed="true"],.band[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}}

/* ═════ FOOTER OPTIONS (8 Oct 2026) ═════ */
:host{--paper:#FFF8EE;--paper-2:#F6E7D2;--paper-line:#E8D3B6;--paper-ink:#7A4A12;--wood:#E2B985;--wood-2:#C8935A;--kraft:#D9A86C;--kraft-2:#C48F52;--kraft-3:#A8743B;--tape:#E9C98E;--wa:#1FA855;
  --cx-paper:0 26px 44px -26px rgb(122 74 18 / .55),0 6px 14px -8px rgb(20 37 79 / .16),inset 0 -10px 18px rgb(122 74 18 / .10),inset 0 10px 30px rgb(255 255 255 / .36);
  --cx-green:0 12px 20px -10px rgb(20 110 60 / .65),inset 0 -6px 10px rgb(0 70 30 / .35),inset 0 7px 17.5px rgb(255 255 255 / .14)}
@media (prefers-color-scheme:dark){:host(:not([data-theme="light"])){--wood:#5A4470;--wood-2:#43325A;--kraft:#B98A55;--kraft-2:#9E7343;--kraft-3:#7E5A31;--tape:#C9A86E}}
:host([data-theme="dark"]){--wood:#5A4470;--wood-2:#43325A;--kraft:#B98A55;--kraft-2:#9E7343;--kraft-3:#7E5A31;--tape:#C9A86E}
.ft{position:relative;margin-top:24px}
.ft a{color:inherit}
.ft .key{color:#14254F}.ft .stamp{color:#fff}.ft .stk a{color:#14254F}
.ft :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}

/* ── A · THE RECEIPT ── */
.rc{position:relative;display:grid;grid-template-columns:clamp(280px,26cqi,360px) minmax(0,1fr);gap:0;align-items:stretch;padding:0}
.rc__counter{position:absolute;left:0;right:0;bottom:-26px;height:46px;border-radius:24px;background:var(--wood);box-shadow:0 22px 34px -22px rgb(122 74 18 / .7),inset 0 -10px 14px rgb(0 0 0 / .16),inset 0 10px 25px rgb(255 255 255 / .12);z-index:0}
/* the register */
.reg{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;padding-bottom:30px}
.reg__body{display:flex;flex-direction:column;flex:1 1 auto}
.reg__keys{flex:none}
.reg__plate{flex:1 1 auto;min-height:64px;display:grid;place-items:center;padding-top:10px}
.reg__plate svg{width:clamp(78px,40%,120px);height:auto;max-height:100%}
.reg__disp{position:relative;width:80%;height:74px;border-radius:18px 18px 8px 8px;background:#14254F;box-shadow:var(--cx-navy);display:grid;place-items:center;margin-bottom:-6px;z-index:2}
.reg__disp::after{content:"";position:absolute;left:50%;bottom:-16px;width:26px;height:20px;margin-left:-13px;background:#14254F}
.reg__scr{width:88%;height:44px;border-radius:10px;background:#BFF0D4;box-shadow:inset 0 3px 6px rgb(0 0 0 / .35);display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;white-space:nowrap;font:700 13px/1 var(--fd);letter-spacing:.08em;color:#14532D}
.reg__scr .rf{position:relative;flex:none;width:28px;height:18px}
.reg__scr .rf i{position:absolute;top:2px;width:5px;height:7px;border-radius:50%;background:#14532D}.reg__scr .rf i:nth-child(1){left:4px}.reg__scr .rf i:nth-child(2){right:4px}
.reg__scr .rf u{position:absolute;left:50%;top:9px;width:9px;height:5px;margin-left:-4.5px;border:2px solid #14532D;border-top:0;border-radius:0 0 9px 9px}
.reg__body{position:relative;width:100%;border-radius:30px 30px 18px 18px;background:#FF8FB1;padding:22px 18px 18px;z-index:1;
  box-shadow:0 22px 30px -18px rgb(150 40 80 / .6),inset 0 -12px 18px rgb(180 60 100 / .3),inset 0 12px 30px rgb(255 255 255 / .22)}
.reg__slot{position:absolute;right:-6px;top:30px;width:22px;height:96px;border-radius:8px;background:#7A2E4B;box-shadow:inset 0 4px 6px rgb(0 0 0 / .45);z-index:0}
.reg__keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;padding:10px 6px 9px;text-align:center;border-radius:16px;background:#FFF4E2;color:#14254F;text-decoration:none;font:700 13.5px/1.1 var(--ft);border:1px solid transparent;
  box-shadow:0 7px 0 -1px #E9C79F,0 12px 16px -8px rgb(120 40 70 / .5),inset 0 5px 10px rgb(255 255 255 / .36);transition:transform .12s ease,box-shadow .12s ease}
.key:active{transform:translateY(5px);box-shadow:0 2px 0 -1px #E9C79F,0 6px 10px -8px rgb(120 40 70 / .5),inset 0 5px 10px rgb(255 255 255 / .36)}
.key i{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#14254F;color:#fff;box-shadow:inset 0 -3px 5px rgb(0 0 0 / .4),inset 0 4px 8px rgb(255 255 255 / .08)}
.key--wa i{background:var(--wa)}
.key small{display:block;margin-top:2px;font-weight:600;font-size:11.5px;color:#46567E;white-space:nowrap}
.key span{white-space:nowrap}
.reg__drawer{position:relative;width:104%;margin-top:-8px;height:40px;border-radius:12px 12px 18px 18px;background:#E8678F;z-index:2;box-shadow:0 12px 16px -10px rgb(120 40 70 / .55),inset 0 -6px 9px rgb(0 0 0 / .18),inset 0 7px 17.5px rgb(255 255 255 / .16)}
.reg__drawer::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:10px;margin:-5px 0 0 -23px;border-radius:5px;background:#F5A524;box-shadow:inset 0 4px 8px rgb(255 255 255 / .2),0 2px 3px rgb(0 0 0 / .25)}
.reg__face{position:absolute;left:50%;bottom:52px;width:64px;height:26px;margin-left:-32px;pointer-events:none}
.reg__sp{position:absolute;pointer-events:none;color:#F5A524;opacity:0}
/* the receipt */
.rcpt{position:relative;z-index:2;margin:0 0 30px -14px;filter:drop-shadow(0 18px 18px rgb(122 74 18 / .28)) drop-shadow(0 3px 4px rgb(20 37 79 / .12))}
.rcpt__paper{position:relative;padding:28px clamp(18px,3cqi,38px) 26px clamp(26px,3.4cqi,44px);background:#FFFDF8;color:#14254F;
  -webkit-mask:linear-gradient(#000,#000) center/100% calc(100% - 22px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) top left/18px 11px repeat-x,conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) bottom left/18px 11px repeat-x;mask:linear-gradient(#000,#000) center/100% calc(100% - 22px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,transparent 0) top left/18px 11px repeat-x,conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) bottom left/18px 11px repeat-x}
.rcpt__paper::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgb(122 74 18 / .025) 3px 4px);pointer-events:none}
.rcpt__hd{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding-bottom:16px;border-bottom:2px dashed #E3D3BC}
.rcpt__hd img{width:52px;height:52px}
.rcpt__hd b{display:block;font:700 clamp(1.15rem,1rem + .6cqi,1.45rem)/1.1 var(--fd);letter-spacing:.02em}
.rcpt__hd span{display:block;font-size:13.5px;color:#46567E;line-height:1.4}
.rcpt__no{display:grid;gap:2px;justify-items:end;text-align:right;font:600 12px/1.5 var(--ft);color:#46567E;font-variant-numeric:tabular-nums}
.rcpt__hd a{text-decoration:none;font-weight:700;color:#14254F;white-space:nowrap}
.rcpt__no b{font:700 13px var(--ft);color:#14254F}
.rcpt__body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px clamp(18px,2cqi,28px);padding:16px 0 14px;border-bottom:2px dashed #E3D3BC}
.rcpt__col h2{margin:0 0 6px;font:700 11.5px/1 var(--ft);letter-spacing:.16em;color:#7A4A12}
.rcpt__col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rcpt__col a{display:flex;align-items:baseline;gap:6px;min-height:30px;padding:3px 0;text-decoration:none;font:600 14.5px/1.3 var(--ft);color:#14254F}
.rcpt__col a::after{content:"";flex:1;min-width:10px;border-bottom:2px dotted #D9C6AA;transform:translateY(-3px);order:1}
.rcpt__col a em{order:2;font-style:normal;font-size:12px;font-weight:700;color:#B98A55}
.rcpt__col a:hover{color:#D98A0B}.rcpt__col a:hover em{color:#D98A0B}
.rcpt__tot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px;padding-top:14px}
.rcpt__fine{margin:0;font-size:12.5px;line-height:1.55;color:#46567E;max-width:66ch}
.rcpt__fine b{color:#14254F}
.rcpt__fine a{color:#14254F;text-underline-offset:2px}
.bar{display:flex;flex-direction:column;align-items:center;gap:4px}
.bar i{display:block;width:150px;height:38px;background:repeating-linear-gradient(90deg,#14254F 0 2px,transparent 2px 4px,#14254F 4px 5px,transparent 5px 8px,#14254F 8px 11px,transparent 11px 12px,#14254F 12px 13px,transparent 13px 16px)}
.bar span{font:700 12px/1 var(--fd);letter-spacing:.06em;color:#14254F}
.rcpt__stamp{position:absolute;right:150px;top:50%;margin-top:-56px;width:96px;height:96px;color:#E02D6B;opacity:.85;transform:rotate(-12deg);pointer-events:none}
@container stage (max-width:1240px) and (min-width:1101px){.rcpt__stamp{display:none}}
/* side by side, the register stands as tall as the receipt it prints: its keys grow with it */
@container stage (min-width:1101px){.reg__disp{height:84px}.reg__scr{height:50px;font-size:14px}.key{gap:8px;font-size:15.5px;border-radius:18px}.key i{width:46px;height:46px;border-radius:14px}.key i svg{width:24px;height:24px}.key small{font-size:12.5px}.reg__keys{gap:12px}.reg__drawer{height:44px}}
@container stage (max-width:699px){
  .rc{grid-template-columns:1fr;padding:0 4px}
  .reg{width:min(320px,92%);justify-self:center;padding-bottom:0}
  .reg__slot{right:auto;left:50%;top:auto;bottom:-6px;width:70%;height:18px;margin-left:-35%}
  .rcpt{margin:-6px 0 34px}
  .rcpt__hd{grid-template-columns:auto minmax(0,1fr)}.rcpt__no{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 18px;justify-items:start;text-align:left}
  .rcpt__no{padding-right:92px}.rcpt__stamp{right:0;top:auto;bottom:-6px;margin:0;width:84px;height:84px}
  .rc__counter{display:none}}
@container stage (max-width:640px){.rcpt__tot{grid-template-columns:1fr}.rcpt__body{grid-template-columns:1fr}.reg__keys{gap:8px}.key{font-size:13px;min-height:86px}}

/* ── B · THE PARCEL ── */
.pk{position:relative;isolation:isolate;padding:70px clamp(8px,2cqi,30px) 30px}
.pk__floor{position:absolute;left:4%;right:4%;bottom:6px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgb(20 37 79 / .28),transparent)}
.box{position:relative;border-radius:20px 20px 26px 26px;background:var(--kraft);padding:clamp(24px,3.4cqi,40px) clamp(18px,3cqi,40px) clamp(22px,3cqi,34px);
  box-shadow:0 30px 46px -26px rgb(110 70 20 / .7),inset 0 -16px 24px rgb(110 70 20 / .32),inset 0 12px 16px rgb(255 240 210 / .45);
  background-image:repeating-linear-gradient(100deg,rgb(255 255 255 / .03) 0 2px,transparent 2px 7px)}
.box__back{position:absolute;left:7%;right:7%;top:-38px;height:44px;border-radius:14px 14px 0 0;background:var(--kraft-3);box-shadow:inset 0 8px 12px rgb(255 240 210 / .18),inset 0 -10px 12px rgb(60 35 5 / .35);z-index:-1}
.box__flap{position:absolute;top:-70px;height:76px;width:clamp(110px,22%,260px);background:linear-gradient(var(--kraft),var(--kraft-2));transform-origin:50% 100%;z-index:-1;filter:drop-shadow(0 -2px 0 rgb(255 240 210 / .25))}
.box__flap--l{left:-3%;clip-path:polygon(0 18%,74% 0,100% 100%,13% 100%);border-radius:0}
.box__flap--r{right:-3%;clip-path:polygon(26% 0,100% 18%,87% 100%,0 100%)}
.box__tape{position:absolute;left:50%;top:-6px;bottom:-6px;width:56px;margin-left:-28px;background:var(--tape);opacity:.92;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .25);
  background-image:repeating-linear-gradient(0deg,rgb(255 255 255 / .12) 0 1px,transparent 1px 6px);transform-origin:50% 0;z-index:1}
.box__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr);gap:clamp(18px,3cqi,40px);align-items:start}
.lbl2{position:relative;padding:18px 20px 16px;border-radius:12px;background:#FFFDF8;color:#14254F;transform:rotate(-1.4deg);box-shadow:0 14px 20px -12px rgb(80 50 10 / .55),inset 0 -4px 7px rgb(122 74 18 / .1)}
.lbl2__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:2.5px solid #14254F}
.lbl2__row b{font:700 12px/1 var(--ft);letter-spacing:.16em}
.lbl2__row span{font:700 11px/1 var(--ft);padding:5px 8px;border-radius:6px;background:#14254F;color:#fff;letter-spacing:.08em}
.lbl2__from{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px 0}
.lbl2__from img{width:50px;height:50px}
.lbl2__from b{display:block;font:700 clamp(1.1rem,1rem + .5cqi,1.35rem)/1.1 var(--fd)}
.lbl2__from span{display:block;font-size:13px;color:#46567E;line-height:1.4}
.lbl2__meta{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;padding:10px 0;border-top:1.5px dashed #C9D2E3;font-size:13px}
.lbl2__meta dt{font-weight:700;color:#46567E;font-size:11.5px;letter-spacing:.1em;padding-top:2px}
.lbl2__meta dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.lbl2__meta a{text-decoration:none}
.lbl2__bar{display:flex;align-items:center;gap:12px;padding-top:10px;border-top:2.5px solid #14254F}
.lbl2__bar i{flex:1;height:34px;background:repeating-linear-gradient(90deg,#14254F 0 2px,transparent 2px 4px,#14254F 4px 5px,transparent 5px 8px,#14254F 8px 11px,transparent 11px 12px)}
.lbl2__bar span{font:700 11px/1.2 var(--ft);letter-spacing:.08em;text-align:right}
.stk{display:flex;flex-wrap:wrap;gap:12px 12px;align-content:flex-start;padding-top:6px}
.stk a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;text-decoration:none;font:700 15px/1 var(--ft);color:#14254F;transform:rotate(var(--r,0deg));
  background:var(--c,#FFF);box-shadow:0 0 0 3px #fff,0 10px 14px -8px rgb(80 50 10 / .55),inset 0 -4px 6px rgb(0 0 0 / .1),inset 0 5px 10px rgb(255 255 255 / .24);transition:transform .25s var(--spring)}
.stk a:hover{transform:rotate(0deg) scale(1.06)}
.stamps{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;padding-bottom:26px}
.stamp{position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;text-decoration:none;color:#fff;background:var(--c);transform:rotate(var(--r,0deg));
  box-shadow:0 0 0 4px #fff,0 0 0 5px rgb(0 0 0 / .06),0 12px 16px -8px rgb(80 50 10 / .6),inset 0 -6px 9px rgb(0 0 0 / .22),inset 0 7px 17.5px rgb(255 255 255 / .14);transition:transform .25s var(--spring)}
.stamp:hover{transform:rotate(0) scale(1.08)}
.stamp svg{width:28px;height:28px}
.stamp span{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 12px/1 var(--ft);color:#3A2408}
:host([data-theme="dark"]) .stamp span{color:#FFE9C9}
@media (prefers-color-scheme:dark){:host(:not([data-theme="light"])) .stamp span{color:#FFE9C9}}
.box__print{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-top:20px;padding-top:14px;border-top:2px dashed rgb(80 50 10 / .3);color:#3A2408}
.box__fine{font-size:12.5px;line-height:1.55;max-width:66ch;font-weight:600}
.box__fine a{color:inherit;text-underline-offset:2px}
.box__marks{display:flex;gap:18px;align-items:center;font:700 12px/1.1 var(--ft);letter-spacing:.12em;color:#3A2408;opacity:.8}
.box__marks svg{width:30px;height:30px}
.box__face--row{align-self:center;margin-left:auto;margin-right:clamp(0px,3cqi,40px);width:clamp(96px,11cqi,132px);aspect-ratio:7/4}
.box__face--peek{display:none;position:absolute;top:-30px;right:50%;margin-right:-38px;width:76px;aspect-ratio:7/4;z-index:2}
@container stage (max-width:860px){.box__grid{grid-template-columns:1fr}.lbl2{max-width:460px}}
@container stage (max-width:560px){.pk{padding:58px 0 26px}.box{border-radius:16px 16px 22px 22px}.box__flap{top:-52px;height:58px}.box__back{top:-30px;height:36px}.stk a{font-size:14px;padding:0 14px;min-height:42px}.stamp{width:64px;height:64px}.box__marks{display:none}.box__face--row{display:none}.box__face--peek{display:block}.lbl2__row{flex-wrap:wrap}.lbl2__row b,.lbl2__row span{white-space:nowrap}.lbl2__row span{font-size:10px}}
.ft :is(a,button){-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){.ft *{animation:none!important;transition:none!important}}
@media (forced-colors:active){.reg__body,.key,.rcpt__paper,.box,.lbl2,.stk a,.stamp{border:1px solid CanvasText}}
@container stage (max-width:420px){.rcpt__paper{padding-inline:18px}.rcpt__hd{gap:10px}.rcpt__hd img{width:40px;height:40px}.rcpt__hd b{font-size:1.05rem}.rcpt__hd span{font-size:12.5px}}
@container stage (min-width:700px) and (max-width:1100px){.rc{grid-template-columns:clamp(220px,30cqi,300px) minmax(0,1fr);padding:0}.rcpt__stamp{display:none}.rcpt__paper{padding:24px 22px 22px 30px}}
@container stage (min-width:700px) and (max-width:919px){.rcpt__body{grid-template-columns:repeat(2,minmax(0,1fr))}.rcpt__tot{grid-template-columns:1fr}.reg__keys{grid-template-columns:1fr}}
:host .mk,:host .intro,:host .why,:host .mocknote{display:none!important}
:host,:host .hk-b{background:transparent!important}
:host .hk-b{padding:0 0 8px!important;overflow:hidden}
:host .stage{max-width:none}
:host .stage>.sec:first-child{margin-top:0}
:host{color-scheme:normal!important}
/* one rhythm for the whole page (9 Oct): 96px between sections on a desktop, 72 on a tablet, 56 on a phone */
:host .stage>.sec:last-child{margin-bottom:0!important}
:host .stage>.sec+.sec{margin-top:96px!important}@container stage (max-width:860px){:host .stage>.sec+.sec{margin-top:72px!important}}@container stage (max-width:560px){:host .stage>.sec+.sec{margin-top:56px!important}}
/* the shop's signboard rises above the awning: the heading keeps clear of it */
:host #talk .sec__hd+.sf{margin-top:72px!important}@container stage (max-width:560px){:host #talk .sec__hd+.sf{margin-top:64px!important}}
:host .ft{margin-top:0!important}
:host .cab{margin-bottom:14px!important}
.rcpt__col a em{color:#8B6232}
:host([data-theme="dark"]) .rcpt__paper{background:#D8D1C2}:host([data-theme="dark"]) .rcpt__paper::before{background:repeating-linear-gradient(0deg,transparent 0 3px,rgb(80 50 10 / .04) 3px 4px)}:host([data-theme="dark"]) .rcpt__hd,.rcpt__body{border-bottom-color:#B7A487}:host([data-theme="dark"]) .rcpt__col a::after{border-bottom-color:#AE9878}:host([data-theme="dark"]) .rcpt__col a em{color:#5E401C}:host([data-theme="dark"]) .rcpt__hd span,.rcpt__no,.rcpt__fine{color:#2E3A5C}:host([data-theme="dark"]) .rcpt__col h2{color:#66390A}:host([data-theme="dark"]) .key{background:#D6C9B2;box-shadow:0 7px 0 -1px #B49A74,0 12px 16px -8px rgb(0 0 0 / .55),inset 0 5px 10px rgb(255 255 255 / .18)}:host([data-theme="dark"]) .key:active{box-shadow:0 2px 0 -1px #B49A74,0 6px 10px -8px rgb(0 0 0 / .55),inset 0 5px 10px rgb(255 255 255 / .18)}:host([data-theme="dark"]) .key small{color:#2E3A5C}
@media (prefers-color-scheme:dark){:host(:not([data-theme="light"])) .rcpt__paper{background:#D8D1C2}:host(:not([data-theme="light"])) .rcpt__paper::before{background:repeating-linear-gradient(0deg,transparent 0 3px,rgb(80 50 10 / .04) 3px 4px)}:host(:not([data-theme="light"])) .rcpt__hd,.rcpt__body{border-bottom-color:#B7A487}:host(:not([data-theme="light"])) .rcpt__col a::after{border-bottom-color:#AE9878}:host(:not([data-theme="light"])) .rcpt__col a em{color:#5E401C}:host(:not([data-theme="light"])) .rcpt__hd span,.rcpt__no,.rcpt__fine{color:#2E3A5C}:host(:not([data-theme="light"])) .rcpt__col h2{color:#66390A}:host(:not([data-theme="light"])) .key{background:#D6C9B2;box-shadow:0 7px 0 -1px #B49A74,0 12px 16px -8px rgb(0 0 0 / .55),inset 0 5px 10px rgb(255 255 255 / .18)}:host(:not([data-theme="light"])) .key:active{box-shadow:0 2px 0 -1px #B49A74,0 6px 10px -8px rgb(0 0 0 / .55),inset 0 5px 10px rgb(255 255 255 / .18)}:host(:not([data-theme="light"])) .key small{color:#2E3A5C}}
.bar .hkg{display:inline;width:.59375em;height:.5703125em;vertical-align:.016em;margin-right:.06em;fill:currentColor}
:host(.embed) .hk-b{padding-bottom:0!important;padding-inline:0!important;overflow:visible!important}
@container stage (max-width:699px){.rcpt{margin-bottom:0}}