/* voice: toy box and trading card. sentence case, headings without a full stop; capitals only where the box would print
   them (nav pills, the small labels, stamps: PACK #70, JACKPOT, SAMPLE). */
/* eggpop site. colours, fonts and every drawn object come from the brand kit (direction AB, club seal); this file only lays
   them out. riso drums: blue key, fluorescent pink, yellow on bright white stock. */
:root{--paper:#FBFAF5;--key:#0078BF;--pink:#FF48B0;--yellow:#FFE800;--ink:#1A1A1A;
  --fd:'Bowlby One';--fu:'Sniglet';--fm:'Sigmar';--line:color-mix(in srgb,var(--key) 30%,transparent);
  --pink-ink:#D4147A;   /* the pink drum for small text: the fluoro pink itself sits at 3.1:1 on the paper */
  --key-ink:#00629C;    /* the key drum for text on a key tint: the key itself falls to 4.1:1 there */
  --soft:#4A6E8A;       /* secondary text: the key greyed down, 5.2:1 on the paper. opacity on the key drops it under 3:1 */
  --out:cubic-bezier(.23,1,.32,1);
  --r:18px;--r2:12px;--bw:2px}   /* one radius for panels, one for controls inside them, one line weight */
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}
*{box-sizing:border-box;margin:0}
html{background:var(--paper)}
body{min-height:100vh;background:var(--paper);color:var(--key);font-family:var(--fu),system-ui,sans-serif;font-size:17px;line-height:1.35;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;mix-blend-mode:multiply;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .14 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}   /* the presses have their own feedback */
.mono{font-family:var(--fm);font-weight:400;font-size:13px}
.cap{text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.small{font-size:12px;color:var(--soft);margin-top:6px}
.quiet{color:var(--soft)}
.warn{color:var(--pink-ink);opacity:1}
code{font-family:var(--fu);font-weight:800;font-size:.92em}   /* function names and addresses: Sigmar is too heavy for 0x… */

.sampleband{display:none;position:sticky;top:0;z-index:40;background:var(--yellow);color:var(--ink);text-align:center;padding:7px 16px;font-family:var(--fm);font-weight:400;font-size:12px}
body.sample .sampleband{display:block}
.downband{position:sticky;top:0;z-index:41;background:var(--pink-ink);color:#fff;text-align:center;padding:7px 16px;font-family:var(--fu);font-size:14px}

.bar{display:flex;align-items:center;gap:18px;padding:16px 28px;max-width:1320px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--fd);font-size:26px;line-height:1}
.brand img{display:block}
.bar nav{display:flex;gap:6px;margin-left:auto}
/* the sound pill: round, the same outline and ink as the nav pills; off = the speaker struck through */
.snd{width:32px;height:32px;padding:0;border:1.5px solid currentColor;background:none;border-radius:99px;display:grid;place-items:center;color:var(--soft);flex:none;transition:transform .12s var(--out)}
.snd .x{display:none}.snd.off .w{display:none}.snd.off .x{display:block}
.snd:active{transform:scale(.95)}
@media (hover:hover){.snd:hover{color:var(--key)}}
/* the lot stamp: the build inked like the code on the bottom of a box. Sigmar in the key drum, set a little crooked, the ink
   uneven (a noise mask). a tap (or a hover) shows when it was packed; a newer build turns it pink and a tap loads it */
.lot{position:relative;flex:none;display:inline-flex;padding:6px;margin:-6px;border:0;background:none;color:var(--key);line-height:1;touch-action:manipulation}
.lot-t{display:block;padding:3px 6px 2px;border:1.5px solid currentColor;border-radius:4px;font-family:var(--fm);font-weight:400;font-size:10px;letter-spacing:.05em;white-space:nowrap;transform:rotate(-3deg);opacity:.82;mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lot.new .lot-t{color:var(--pink-ink);opacity:1}
.lot-i{position:absolute;left:0;top:calc(100% + 2px);z-index:70;display:none;padding:7px 10px;border-radius:var(--r2);background:var(--key);color:var(--paper);font-family:var(--fu);font-weight:800;font-size:13px;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.lot.open .lot-i{display:block}
@media (hover:hover){.lot:hover .lot-i{display:block}}
.bar .lot{align-self:center;margin-left:-4px;margin-top:4px}.bar .lot-t{font-size:11px}
dialog.sheet .lot{position:absolute;top:18px;right:58px;margin:0}   /* at the top, left of the close: the bottom of a sheet can sit under Safari's bar */
dialog.sheet .lot .lot-i{left:auto;right:0}
.bar nav a,.pill{font-family:var(--fm);font-weight:400;font-size:13px;text-transform:uppercase;text-decoration:none;padding:6px 12px;border-radius:99px;border:1.5px solid currentColor;background:none;color:var(--soft)}
@media (hover:hover){.bar nav a:hover,.pill:hover{color:var(--key)}}
.bar nav a.on{background:var(--key);color:var(--paper);border-color:var(--key)}
.pill.on{background:var(--key);color:var(--paper);border-color:var(--key);opacity:1}
.picker[hidden]{display:none}
.picker{position:fixed;right:24px;top:64px;z-index:60;display:grid;gap:6px;background:#fff;border:var(--bw) solid var(--key);border-radius:var(--r);padding:10px;box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
.picker button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 12px;border-radius:10px;text-align:left;font-weight:700}
.picker button:hover{background:color-mix(in srgb,var(--key) 10%,transparent)}
.picker img{width:22px;height:22px}
.picker .who{padding:6px 12px 8px;color:var(--soft);word-break:break-all;max-width:260px}

main{max-width:1320px;margin:0 auto;padding:0 28px 40px}
.btn{font-family:var(--fu);font-weight:800;font-size:17px;color:var(--paper);background:var(--key);border:0;border-radius:99px;padding:11px 20px;text-decoration:none;display:inline-block;transition:transform .16s var(--out)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:none;color:var(--key);box-shadow:inset 0 0 0 2px var(--key)}
.btn.big{font-size:21px;padding:15px 26px;width:100%;margin-top:14px}

/* ---- hero: copy | pack | buy ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px) minmax(0,1fr);grid-template-areas:'copy stage buy' 'odds stage buy';grid-template-rows:auto 1fr;column-gap:36px;align-items:start;padding-top:18px}
.copy{grid-area:copy}.odds{grid-area:odds}.stage{grid-area:stage}.buy{grid-area:buy;min-width:0}
h1{font-family:var(--fd);font-weight:400;font-size:clamp(52px,6.6vw,96px);line-height:.92;letter-spacing:-.01em;
  text-shadow:4px 3px 0 color-mix(in srgb,var(--pink) 85%,transparent)}
.lede{margin-top:16px;font-size:18px;font-weight:400;line-height:1.4;max-width:34ch}
.odds{margin-top:26px;max-width:360px;border:var(--bw) solid var(--key);border-radius:var(--r);padding:14px 16px;background:color-mix(in srgb,#fff 60%,transparent)}
.odds table{width:100%;border-collapse:collapse;font-family:var(--fm);font-weight:400;font-size:15px}
.odds td{padding:5px 0;border-bottom:var(--bw) dotted var(--line)}
.odds td:nth-child(2){font-family:var(--fd);font-size:20px;text-align:right;padding-right:14px;white-space:nowrap}
.odds td:nth-child(3){text-align:right;color:var(--soft);white-space:nowrap;font-size:13px}
#odds-j td:nth-child(2){font-size:16px;padding-right:10px}
.odds p{font-size:14px;line-height:1.4;margin-top:10px;color:var(--soft)}
.odds p a{color:var(--key)}
.odds p a{font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap}
.doc h2{scroll-margin-top:24px}

.stage{position:relative;display:grid;justify-items:center;padding-top:36px;min-height:560px}
.pack{position:relative;width:min(380px,84vw);aspect-ratio:4/5;touch-action:none;-webkit-user-select:none;user-select:none}
.pack[data-state=idle]{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-1deg)}}
.packwrap{position:relative}
/* three pets peeking out from behind the pack, as on the box: under the canvas, the egg covers half of each */
.peek{position:absolute;inset:0;pointer-events:none}
.peek .peekpet{position:absolute;width:36%;filter:drop-shadow(0 3px 0 color-mix(in srgb,var(--ink) 12%,transparent))}
.peek .pk0{left:-4%;top:52%;transform:rotate(-16deg)}
.peek .pk1{right:-6%;top:44%;width:34%;transform:rotate(14deg) scaleX(-1)}
.peek .pk2{left:6%;top:18%;width:26%;transform:rotate(-8deg)}
#tear{position:relative}
.stagepot,.hint,.liveline{position:relative;pointer-events:none}   /* over the empty band under the egg: touches go to the pack */
.stagepot{margin-top:-44px;font-family:var(--fd);font-size:40px;line-height:1;text-align:center;white-space:nowrap}
.stagepot small{font-size:.5em}
.stagepot span{display:block;margin-top:6px;font-family:var(--fm);font-size:13px;color:var(--soft)}
.stagepot b{font-weight:400;display:inline-block;min-width:4.2ch;height:1em;vertical-align:bottom}.stagepot b:empty{border-radius:6px;background:color-mix(in srgb,currentColor 14%,transparent)}
.liveline{margin-top:10px;min-height:1.4em;text-align:center;font-size:14px;color:var(--soft)}
.liveline .tag{margin-left:6px;padding:1px 6px;border-radius:5px;background:var(--yellow);color:var(--ink);font-family:var(--fm);font-size:11px}
.stage:has(.label.show) :is(.stagepot,.hint,.liveline){visibility:hidden}   /* the landed sticker's label takes that place */
.peek{transition:opacity .2s var(--out)}
.stage:has(.label.show) .peek{opacity:0}   /* the landed sticker and its name get the stage to themselves */
.stage:has(.label.show .a2hs){padding-bottom:96px}   /* the label grows up from the bottom: the hint's room is added below, the name stays put */
.hint{margin-top:22px;color:var(--soft);min-height:1.4em;text-align:center}
.label{position:absolute;left:0;right:0;bottom:0;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .25s var(--out),transform .25s var(--out);pointer-events:none}
.label.show{opacity:1;transform:none;pointer-events:auto}
.label b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1}
.label span{display:block;margin-top:8px;font-family:var(--fm);font-weight:400;font-size:13px;color:var(--soft)}
.label .row{display:flex;gap:10px;justify-content:center;margin-top:14px}

.buy{border:var(--bw) solid var(--key);border-radius:var(--r);padding:18px;background:color-mix(in srgb,#fff 70%,transparent);margin-top:28px}
.count{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.count button{width:40px;height:40px;border-radius:50%;border:2px solid var(--key);background:none;font-size:22px;line-height:1;font-weight:800}
.count b{font-family:var(--fd);font-weight:400;font-size:36px;min-width:1.4ch;text-align:center}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:color-mix(in srgb,var(--key) 10%,transparent);border-radius:var(--r2);padding:4px}
.seg button{border:0;background:none;color:var(--key-ink);border-radius:calc(var(--r2) - 3px);padding:9px 4px;font-family:var(--fm);font-weight:400;font-size:13px}
.seg button.on{background:var(--key);color:var(--paper)}
.price{margin-top:16px;min-height:117px}
/* before the quote lands (or while the chain is down): the shape of the number and its two lines, not an empty hole */
.price:empty{background:linear-gradient(color-mix(in srgb,var(--key) 10%,transparent) 0 0) 0 4px/58% 38px no-repeat,linear-gradient(color-mix(in srgb,var(--key) 8%,transparent) 0 0) 0 58px/34% 14px no-repeat,linear-gradient(color-mix(in srgb,var(--key) 8%,transparent) 0 0) 0 84px/88% 14px no-repeat;border-radius:8px}   /* the filled height (number, label, two lines): the button below does not jump when the quote lands */
.price b{display:block;font-weight:800;font-size:18px}
.price span{display:block;font-size:14px;color:var(--soft);margin-top:2px}
.price .burnn{font-family:var(--fd);font-size:40px;line-height:1}
.price .burnl{display:block;font-style:normal;margin-top:4px;color:var(--soft)}
.price .burnn small{font-size:.5em}
.collect-out{display:none}.collect.out .collect-out{display:block}.collect.out :is(#earned,#collect,.small){display:none}
.collect p.collect-out{font-size:17px;margin:2px 0 12px}
.status{margin-top:10px;min-height:1.3em;font-weight:700;font-size:15px}
.link{display:block;margin-top:10px;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.link.need{color:var(--pink-ink);opacity:1}
.bridge{margin-top:14px;padding-top:14px;border-top:2px dashed var(--line)}
.links{display:flex;gap:0 12px;flex-wrap:wrap}
.offer{margin-top:14px;padding-top:14px;border-top:2px dashed var(--line);display:grid;gap:8px;justify-items:start}
[hidden]{display:none!important}
.offer b{font-weight:800;font-size:17px}
.seg.two{grid-template-columns:1fr 1fr}
.amt{display:flex;align-items:center;gap:8px;margin-top:12px;border:var(--bw) solid var(--key);border-radius:var(--r2);padding:6px 8px 6px 12px;background:#fff}
.amt input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--fd);font-size:24px;color:var(--key)}
.amt button{border:1.5px solid var(--key);background:none;border-radius:99px;padding:4px 10px;text-transform:uppercase;font-size:11px}
.bq{margin-top:10px;min-height:2.6em;font-size:15px}
.bq b{font-weight:800}
.bridge .btn{margin-top:8px}
.status[data-kind=warn]{color:var(--pink-ink)}

/* ---- bands ---- */
.band{margin-top:56px;padding-top:28px;border-top:var(--bw) dashed var(--line)}
.band.first{margin-top:12px;border-top:0}
h2{font-family:var(--fd);font-weight:400;font-size:34px;margin-bottom:16px}
h2 small{font-size:13px;color:var(--soft);margin-left:12px}
.pot{display:grid;grid-template-columns:minmax(300px,520px) 1fr;gap:40px;align-items:center}
.potbox{position:relative;aspect-ratio:520/300}   /* the envelope's room before the script draws it */
.pot-env{display:block;width:100%;height:auto}
.potnum{position:absolute;left:9%;top:52%;font-family:var(--fd);font-size:clamp(40px,4.6vw,66px);line-height:1;color:#fff;text-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 55%,transparent)}
.potnum small{font-size:.4em}
.potside p{max-width:44ch}
#potca[hidden]{display:block!important;visibility:hidden}   /* the coin's line holds its room until the script fills it */
/* the stats as price stickers on the envelope's side: yellow paper, a slight lean, the number in the display face */
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 10px;margin-top:18px}   /* columns by the width, not by the numbers: they arrive late and must not rewrap the page */
.stamp{position:relative;background:var(--yellow);color:var(--ink);border-radius:8px;padding:9px 14px 8px;min-width:120px;transform:rotate(var(--lean,-1.5deg));box-shadow:1px 2px 0 color-mix(in srgb,var(--ink) 18%,transparent)}
.stamp:nth-child(2n){--lean:1.2deg}.stamp:nth-child(3n){--lean:-.6deg}
.stamp::before{content:"";position:absolute;inset:4px;border:1.5px dashed color-mix(in srgb,var(--ink) 35%,transparent);border-radius:5px;pointer-events:none}
.stamp i{display:block;font-style:normal;font-size:11px;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.stamp b{display:block;font-family:var(--fd);font-weight:400;font-size:24px;line-height:1.05;white-space:nowrap}
.stamp b small{font-size:.5em;font-family:var(--fm);font-weight:400}
.collect .big{font-family:var(--fd);font-size:clamp(34px,3.4vw,48px);line-height:1;white-space:nowrap}
/* the roll: a strip of backing paper torn off at the top, one sticker per line, perforation between lines */
.tape{list-style:none;padding:8px 22px 4px;margin-top:18px;background:#fff;border-radius:0 0 var(--r2) var(--r2);position:relative;font-size:15px;
  box-shadow:0 14px 30px -22px rgba(0,0,0,.35),inset 0 0 0 var(--bw) color-mix(in srgb,var(--key) 14%,transparent)}
.tape::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
  background:linear-gradient(-135deg,#fff 6px,transparent 0) 0 0/16px 10px repeat-x,linear-gradient(135deg,#fff 6px,transparent 0) 0 0/16px 10px repeat-x}
.tape li.row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;min-height:72px;padding:9px 0;border-bottom:var(--bw) dashed color-mix(in srgb,var(--key) 22%,transparent)}
.tape li.row:last-child{border-bottom:0}
.tape .mini{width:52px}.tape .mini>*{width:100%}
.tape .mini.sealed{width:34px;margin:0 9px;opacity:.9}
.tape .row>div b{display:block;font-weight:800;font-size:16px;line-height:1.2}
.tape .row>div span{display:block;font-family:var(--fm);font-weight:400;font-size:12px;color:var(--soft);margin-top:3px}
.tape .row code{font-size:12px}
.tape time{font-family:var(--fm);font-weight:400;font-size:12px;color:var(--soft);white-space:nowrap;align-self:start;margin-top:6px}
.tape a{font-family:var(--fm);font-size:12px;color:var(--soft);margin-left:6px}
.tape li.quiet{padding:18px 0}
/* before the chain answers: three rows of the same height, nothing jumps when they fill */
.tape li.sk{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;min-height:72px;border-bottom:var(--bw) dashed color-mix(in srgb,var(--key) 22%,transparent)}
.tape li.sk>i{display:block;border-radius:8px;background:color-mix(in srgb,var(--key) 10%,transparent)}
.tape li.sk>i:first-child{width:52px;height:52px}.tape li.sk>i:nth-child(2){height:16px;width:40%}.tape li.sk>i:last-child{height:12px;width:64px}
/* a claim: a drop of gold into the pot; a collect: a drop out */
.gold{position:relative;width:52px;height:52px;display:grid;place-items:center}
.gold::before{content:"";width:22px;height:22px;background:var(--yellow);border:var(--bw) solid var(--key);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.gold.out::before{background:#fff;border-style:dashed}
.tape li.rl-claim b{color:var(--key-ink)}
.tape li.rl-claim{background:color-mix(in srgb,var(--yellow) 22%,transparent);margin:0 -22px;padding-left:22px;padding-right:22px}
.alb-cta{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:-8px 0 26px;padding:12px 14px 12px 18px;background:#fff;border:var(--bw) solid var(--key);border-radius:var(--r2)}
.alb-cta p{font-size:16px}

.cols{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:36px}
.collect .btn{margin-top:14px}
.fuse{margin-top:22px;display:grid;gap:8px;justify-items:start}
.mine{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.mine li{display:flex;gap:12px;align-items:center;background:#fff;border:var(--bw) solid var(--line);border-radius:var(--r2);padding:10px 12px;min-height:88px}
#price.loading,#traycost.loading{opacity:.4;transition:opacity .15s}   /* a price for another count or way to pay, while the new one loads */
.mine .mini{width:64px;flex:none}.mine .mini>*{width:100%}
.mine li{content-visibility:auto;contain-intrinsic-size:auto 88px}   /* a full pond: rows off screen are not painted */
.mine .mini:empty{aspect-ratio:1}   /* the print's room before the row nears the screen */
.offscreen :is(.pet,.beam),#album .alb-slot:not(.awake) :is(.pet,.beam){animation-play-state:paused}
.mine .who{min-width:0;flex:1}
/* the weight big at the right: the one number a pet's cut is made of */
.mine .wt{flex:none;text-align:center;min-width:44px;padding-left:10px;border-left:var(--bw) dashed var(--line)}
.mine .wt b{font-size:26px;line-height:1}
.mine .wt span{font-size:10px;text-transform:uppercase;margin-top:2px;white-space:nowrap;overflow:visible}
.mine b{display:block;font-family:var(--fd);font-weight:400;font-size:18px;line-height:1.1}
.mine span{display:block;font-family:var(--fm);font-weight:400;font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mine .life{display:flex;align-items:center;gap:3px;margin-top:8px}
.mine .life i{flex:none;width:12px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--key) 14%,transparent)}
.mine .life i.on{background:var(--pink)}
.mine .left{font-style:normal;font-family:var(--fm);font-weight:400;font-size:12px;color:var(--pink-ink);margin-left:6px;white-space:nowrap}
.mine li.quiet{grid-column:1/-1;border-style:dashed;justify-content:center;font-family:var(--fm);font-size:13px}
body>footer{max-width:1320px;margin:0 auto;padding:22px 28px 36px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;color:var(--soft);border-top:2px dashed var(--line)}
.kinds{display:flex;gap:8px}

@media (max-width:1040px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'copy copy' 'stage buy' 'stage odds'}
  .odds{max-width:none}
}
@media (max-width:720px){
  .bar{padding:12px 16px;gap:10px;flex-wrap:wrap}
  .brand{font-size:22px}
  .bar nav{margin-left:0;order:3;width:100%}
  .snd{margin-left:auto;width:44px;height:44px}.snd svg{width:20px;height:20px}
  main{padding:0 16px 30px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:'copy' 'stage' 'buy' 'odds';gap:14px}
  /* the pack right under the lede: the canvas keeps a third of its box above the egg for the lid and the rising sticker (the
     module's own layout), so the box slides up under the lede and that empty band takes the overlap */
  .stage{min-height:0;padding-top:0;margin-top:-40px}
  .pack{width:min(380px,74vw)}
  .stagepot{font-size:34px;margin-top:-64px}
  .hint{margin-top:12px}   /* the pack in the first screen of a phone, the form below it */
  .lede-more{display:none}      /* three lines on a phone; the rest is on the back of the pack and in the docs */
  .buy{margin-top:0}
  .pot,.cols{grid-template-columns:1fr;gap:18px}
  .stamps{gap:10px 8px;grid-template-columns:1fr 1fr}.stamp{min-width:0}
  .tape{padding:6px 14px 2px}.tape li.row{grid-template-columns:44px 1fr auto;gap:10px;min-height:64px}.tape .mini{width:44px}.tape li.rl-claim{margin:0 -14px;padding-left:14px;padding-right:14px}
  .mine{grid-template-columns:1fr}
  h2 small{display:block;margin:8px 0 0}
  body>footer{padding:18px 16px 28px}
  /* every tap at least 44 px on a phone */
  .brand{padding:5px 0}
  .bar nav a,.pill{padding:11px 14px;min-height:44px;display:inline-flex;align-items:center}
  .count button{width:44px;height:44px}
  .seg button{padding:13px 4px;min-height:44px}
  .link{padding:14px 0;margin-top:2px}
  body>footer a{display:inline-block;padding:13px 0}
  .odds p a{position:relative}.odds p a::after{content:"";position:absolute;inset:-13px -4px}   /* a 44 px tap without moving the lines */
}
@media (prefers-reduced-motion:reduce){.pack[data-state=idle]{animation:none}}

/* ---- fuse: the fan (fuse.js, after tg-attach): its own layer over the dimmed page, the cards in the middle of the screen ---- */
.fan-layer{position:fixed;inset:0;z-index:70;pointer-events:none;background:color-mix(in srgb,var(--paper) 72%,transparent);opacity:0;transition:opacity .2s var(--out)}
.fan-layer.on{opacity:1}
@supports (backdrop-filter:blur(1px)){.fan-layer{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}
.fan-card{position:absolute;left:0;top:0;width:220px;will-change:transform;transform-origin:50% 50%;filter:drop-shadow(0 calc(4px + 14px * var(--hi,0)) calc(6px + 10px * var(--hi,0)) rgba(0,0,0,calc(.14 + .18 * var(--hi,0))))}
.fan-card::after{content:"";position:absolute;right:-8px;top:-8px;width:30px;height:30px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2.5px #fff;opacity:0;transform:scale(.4);transition:opacity .18s,transform .22s cubic-bezier(.34,1.45,.64,1)}
.fan-card.got::after{opacity:1;transform:scale(1)}
.fan-card .tilt-card{transform:none!important}
.fan-say{position:absolute;left:50%;top:calc(50% + 120px);transform:translateX(-50%);white-space:nowrap;font-size:14px;color:var(--key);background:#fff;padding:8px 16px;border-radius:99px;box-shadow:0 8px 24px -12px rgba(0,0,0,.3);transition:background .2s ease,color .2s ease}
.fan-say.ready{background:var(--pink);color:#fff}
#fuse .btn{touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .16s var(--out),background .2s ease}
#fuse .btn.holding{transform:scale(.96)}
#fuse .btn.ready{background:var(--pink)}
.fan-pop{position:absolute;z-index:71;left:50%;top:50%;width:min(320px,78vw);transform:translate(-50%,-56%) scale(.6);pointer-events:none;opacity:0;transition:opacity .2s var(--out),transform .55s cubic-bezier(.34,1.45,.64,1)}
.fan-pop.show{opacity:1;transform:translate(-50%,-56%) scale(1)}
.fan-pop .tilt-card{filter:drop-shadow(0 18px 26px rgba(0,0,0,.22))}
/* the flash: one fast lap of the beam round the rainbow frame and a glow that fades, then the slow beam as on any neon */
.fan-pop.show .foil>.beam{opacity:1;animation:beam .7s cubic-bezier(.22,1,.36,1) 1,beam 5.5s linear .7s infinite}
.fan-pop.show .foil{animation:neonglow 1.3s var(--out) 1}
@keyframes neonglow{0%{filter:brightness(1.6) drop-shadow(0 0 0 rgba(255,255,255,0))}20%{filter:brightness(1.4) drop-shadow(0 0 18px rgba(255,255,255,.95))}100%{filter:none}}
.fan-title{margin-top:22px;text-align:center;font-family:var(--fd);font-size:clamp(30px,4.2vw,46px);line-height:1;color:var(--key);text-shadow:3px 2px 0 color-mix(in srgb,var(--pink) 85%,transparent);white-space:nowrap}
.fan-title small{display:block;margin-top:12px;font-family:var(--fm);font-weight:400;font-size:24px;text-shadow:none;color:var(--soft)}

/* ---- the drop: the landed sticker as a dom seal over the canvas (tilt, then the view transition into its album cell) ---- */
.drop{position:absolute;pointer-events:auto;z-index:3}

/* ---- view transitions (transitions.dev tokens: cubic-bezier(.22,1,.36,1), 250 ms for the page, a longer morph for the sticker) ---- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(drop){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(drop),::view-transition-new(drop){animation:none;mix-blend-mode:normal;height:100%;width:100%;object-fit:contain}
.alb-stk[data-drop]{view-transition-name:drop}
.drop[data-drop]{view-transition-name:drop}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* number-flow: the pot, the payouts, the burn */
number-flow{--number-flow-mask-height:.2em}
.potnum>span:empty,.stamp b:empty,#earned:empty{display:inline-block;min-width:2.2ch;height:.9em;border-radius:6px;background:color-mix(in srgb,currentColor 18%,transparent);vertical-align:-.1em}
.stamp b:empty{display:block;width:2.2ch;height:1.05em}   /* the stamp's own line height: no jump when its number lands */
#pricenote{margin-top:14px}

/* ---- arrivals: things that used to appear from nowhere ---- */
/* the wallet menu grows out of the sign-in pill it belongs to */
.picker{transform-origin:top right;transition:opacity .16s var(--out),transform .16s var(--out)}
@starting-style{.picker{opacity:0;transform:scale(.96)}}
/* the bridge and the card offer open inside the buy box instead of popping in */
.bridge,.offer{transition:opacity .2s var(--out),transform .2s var(--out)}
@starting-style{.bridge,.offer{opacity:0;transform:translateY(-4px)}}
/* the small presses answer like the big button does */
.count button,.seg button,.pill,.bar nav a{transition:transform .12s var(--out)}
.count button:active,.seg button:active,.pill:active,.bar nav a:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){
  @starting-style{.picker,.bridge,.offer{transform:none}}
  .count button:active,.seg button:active,.pill:active,.bar nav a:active{transform:none}
}

/* Sigmar only for short labels, stamps, tabs, buttons and numbers (owner 30.09); every sentence and every roll line is Sniglet 400.
   last in the file so it wins over the per-block font lines above */
.mono.small,.hint,h2 small,.potside p>.mono,.label span,.tape .row>div span,body>footer,.sampleband,.mine li.quiet,.alb-foot{font-family:var(--fu);font-weight:400}
.mono.small,.hint,.tape .row>div span{font-size:14px}

/* ---- home screen: the notch and the home bar in standalone, the one-time add hint ---- */
@media (display-mode:standalone){
  .sampleband,.downband{padding-top:calc(7px + env(safe-area-inset-top))}
  body:not(.sample) .bar{padding-top:calc(16px + env(safe-area-inset-top))}
  body>footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .bar,main,body>footer{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}
.a2hs{display:flex;align-items:center;gap:8px;max-width:420px;margin:14px auto 0;padding:8px 6px 8px 14px;background:#fff;border:var(--bw) solid var(--key);border-radius:var(--r2);font-size:14px;text-align:left;pointer-events:auto}
.a2hs[hidden]{display:none}
.a2hs span{flex:1}
.a2hs-x{border:0;background:none;font-size:24px;line-height:1;width:44px;height:44px;color:var(--soft)}

/* the kit's album page on a phone: the title on one line, the page count beside it without wrapping */
@media (max-width:480px){
  /* the album head on a phone: the title on its own line, the page badge, the count and a stamp in one row under it */
  .alb-head{flex-wrap:wrap;gap:8px 10px;align-items:center;min-width:0;margin-bottom:22px}
  .alb-title{font-size:38px;white-space:nowrap;flex-basis:100%}
  .alb-meta{display:flex;flex-wrap:wrap;align-items:center;justify-items:start;gap:6px 10px;min-width:0}
  .alb-meta span{font-size:15px;white-space:nowrap}
  .friendstamp{margin-top:0}
}

/* ---- a shared pet on top of home (#/pet/N) ---- */
.spotpet{display:flex;align-items:center;gap:22px;max-width:640px;margin:10px 0 18px;padding:14px 18px;background:#fff;border:var(--bw) solid var(--key);border-radius:var(--r)}
.spotpet[hidden]{display:none}
body[data-pet] .spotpet[hidden]{display:flex!important;min-height:182px}   /* a shared pet's link: the card's room from the first paint */
@media (max-width:720px){body[data-pet] .spotpet[hidden]{min-height:148px}}
.spotstk{flex:none;transform:rotate(-3deg)}.spotstk .tilt{width:100%}
.spotpet b{display:block;font-family:var(--fd);font-weight:400;font-size:28px;line-height:1.05}
.spotpet span{display:block;margin:6px 0 12px;color:var(--soft);font-size:14px}
.label .row{align-items:center;flex-wrap:nowrap}
/* share: a round pill with the kit's line icon, in the same row as the two buttons */
.sharebtn{flex:none;width:44px;height:44px;padding:0;border:var(--bw) solid var(--key);background:none;color:var(--key);border-radius:99px;display:grid;place-items:center;transition:transform .12s var(--out)}
.sharebtn:active{transform:scale(.95)}
@media (max-width:480px){.label .row{gap:8px;padding:0 4px}.label .row .btn{padding:11px 14px;font-size:16px;flex:1;white-space:nowrap}}
.spotstk{width:150px}.spotstk .alb-slot{--k:var(--key)}
.spotstk.sk{height:150px;border-radius:var(--r);background:color-mix(in srgb,var(--key) 10%,transparent)}
@media (max-width:720px){.spotpet{gap:14px;padding:12px 14px}.spotstk{width:120px}.spotstk.sk{height:120px}.spotpet b{font-size:22px}}

/* ======== the app shell (research/APP-UX-2026-10-01.md): Tear · Pond · Pot, the Me chip, sheets ======== */
.tabs{display:none}
.oddslink{display:none}
/* the view named in the link from the first paint (the inline script sets body[data-view] before the sections arrive): a link to
   the pond or the pot never shows the Tear page first */
body[data-view=pond] :is(#v-home,#v-pot),body[data-view=pot] :is(#v-home,#v-pond),body[data-view=home] :is(#v-pot,#v-pond){display:none}
.chip{display:inline-flex;align-items:center;gap:6px}
.chip .chip-pet{display:inline-grid;width:22px;height:22px;place-items:center}.chip .chip-pet svg,.chip .chip-pet img{width:22px;height:22px}
.chip.on:not(.pill){color:var(--key)}   /* the wallet pill keeps .pill.on's paper text on its blue: the balance was blue on blue */
.band.cut{margin-top:28px;padding-top:0;border-top:0}
.cut .collect{max-width:520px;padding:18px;border:var(--bw) solid var(--key);border-radius:var(--r);background:color-mix(in srgb,#fff 70%,transparent)}
.cut .collect .btn{width:100%}
.addlink{margin-top:8px}
.stagepot{text-decoration:none;color:var(--key)}   /* a link to Pot, printed as the number it is */
.stagepot:hover span{text-decoration:underline}

/* sheets: a bottom sheet on a phone, a drawer on the right on a wide screen */
dialog.sheet{border:0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));background:var(--paper);color:var(--key);max-height:88svh;overflow:auto;overscroll-behavior:contain;
  position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px -18px rgba(0,0,0,.35);
  transition:transform .28s var(--out),overlay .28s allow-discrete,display .28s allow-discrete;transform:translateY(0)}
dialog.sheet:not([open]){transform:translateY(100%)}
@starting-style{dialog.sheet[open]{transform:translateY(100%)}}
dialog.sheet::backdrop{background:rgba(26,26,26,.28);transition:opacity .28s,overlay .28s allow-discrete,display .28s allow-discrete}
@starting-style{dialog.sheet[open]::backdrop{opacity:0}}
.grab{width:40px;height:5px;border-radius:99px;background:var(--line);margin:-10px auto 12px}
.sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;font-size:26px;line-height:1;color:var(--soft)}
.sheet .odds{margin:0;max-width:none;border:0;padding:0;background:none}
.sheet .payblock .seg{margin-top:4px}
.me-head{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.me-pet{width:48px;height:48px;display:grid;place-items:center}.me-pet svg,.me-pet img{width:44px;height:44px}
.me-who b{display:block;font-family:var(--fd);font-weight:400;font-size:20px}.me-who span{display:block;font-size:14px;color:var(--soft)}
.me-acts{display:flex;gap:8px;margin-bottom:14px}
.me-add{padding:14px 0;border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
.me-row{display:flex;justify-content:space-between;align-items:center;min-height:48px;text-decoration:none;font-weight:700}
@media (min-width:900px){
  dialog.sheet{inset:0 0 0 auto;width:420px;max-width:420px;max-height:100vh;height:100vh;border-radius:22px 0 0 22px;padding:28px 24px}
  dialog.sheet:not([open]){transform:translateX(100%)}
  @starting-style{dialog.sheet[open]{transform:translateX(100%)}}
  .grab{display:none}
  .buy .trayrow .paypick,.buy .traycost{display:none}
}

/* ---- the phone ---- */
@media (max-width:899px){
  :root{--sab:env(safe-area-inset-bottom)}
  main{overflow-x:clip}   /* the leaning stamps on the Pot pushed a 360 screen 4 px sideways; clip makes no scroll box */
  html{overscroll-behavior-y:none}
  .tape,.mine{overscroll-behavior:contain}
  button,a,.tab{touch-action:manipulation}
  .bar{padding:8px 16px;gap:10px;flex-wrap:nowrap;user-select:none;-webkit-user-select:none}
  .bar nav.top{display:none}
  .brand{font-size:22px}.brand img{width:30px;height:30px}
  .snd{margin-left:auto;width:40px;height:40px}
  #wallet{min-height:40px;padding:8px 12px}
  body>footer{display:none}
  main{padding:0 16px calc(84px + var(--sab))}
  body[data-view=home] main{padding-bottom:calc(64px + var(--trayh,128px) + 12px + var(--sab))}   /* --trayh: the tray's own height, measured in app.js */

  /* the tab bar: Pond · the egg (Tear, home) · Pot */
  .tabs{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;inset:auto 0 0;z-index:30;height:calc(64px + var(--sab));padding-bottom:var(--sab);
    background:var(--paper);border-top:var(--bw) solid var(--line);user-select:none;-webkit-user-select:none}
  .tab{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;text-decoration:none;color:var(--soft);font-family:var(--fu);font-size:12px;font-weight:800;transition:transform .12s var(--out)}
  .tab svg{width:26px;height:26px}
  .tab.on{color:var(--key)}.tab.on svg:not(.egg svg){fill:color-mix(in srgb,var(--key) 14%,transparent)}
  .tab:active{transform:scale(.96)}
  .tab.tear .egg{display:grid;place-items:center;width:26px;height:26px;color:var(--soft)}
  .tab.tear .egg svg{width:22px;height:27px}
  .tab.tear.on .egg{color:var(--key)}
  .tab .badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--pink-ink);color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center}
  .tab .dot{position:absolute;top:8px;left:calc(50% + 8px);width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--yellow);border:var(--bw) solid var(--key)}
  .tab [hidden]{display:none}
  /* the lot stamp under the word mark: Safari's own bar can cover the bottom of the screen, the top is always seen */
  .bar{position:relative;z-index:31;padding-bottom:30px}   /* over the page, so the stamp's note shows on top of the title */
  .bar .lot{position:absolute;left:calc(max(16px,env(safe-area-inset-left)) + 34px);bottom:2px;margin:0;padding:3px 6px}
  .bar .lot-t{font-size:14px;padding:3px 7px 2px;transform:rotate(-2deg)}

  /* Tear: a compact title, the pack, the tray */
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:'copy' 'stage' 'buy';gap:0;padding-top:6px}
  h1{font-size:32px;line-height:1}
  .copy{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
  .lede{flex-basis:100%;order:3;margin-top:4px;font-size:16px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .oddslink{display:inline-block;border:0;background:none;padding:10px 0;font-family:var(--fm);font-size:13px;color:var(--soft);text-align:left;line-height:1.15}
  .oddslink span{display:block;white-space:nowrap}   /* two short lines beside the title: one line did not fit next to it and fell under it */
  .stage{margin-top:-30px;padding-top:0;min-height:0}
  .pack{width:min(320px,74vw)}
  .stagepot{font-size:28px;margin-top:-58px;text-decoration:none;color:var(--key);pointer-events:auto}
  .stagepot span{margin-top:3px}
  .hint{margin-top:8px}
  .liveline{margin-top:4px}

  /* the buy tray, fixed over the tab bar */
  .buy{position:fixed;left:0;right:0;bottom:calc(64px + var(--sab));z-index:25;margin:0;padding:10px 16px 14px;border:0;border-top:var(--bw) solid var(--key);border-radius:0;background:var(--paper)}
  body:not([data-view=home]) .buy{display:none}
  .hero>.odds,.buy>.payblock{display:none}   /* their place on a phone is a sheet (place() moves them): never in the grid before it does */
  /* a pet has landed: its label holds "Tear another", so the tray slides down under the bar until the next pack */
  .buy{transition:transform .24s var(--out),visibility 0s linear 0s}
  body:has(#label.show) .buy{transform:translateY(calc(100% + 64px + var(--sab)));visibility:hidden;transition:transform .24s var(--out),visibility 0s linear .24s}
  .buycap,.upto{display:none}
  .trayrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .trayrow .count{margin:0;gap:8px}
  .trayrow .count b{font-size:28px;min-width:1.2ch}
  .paypick{min-height:44px;padding:0 14px;border:1.5px solid currentColor;border-radius:99px;background:none;color:var(--key);font-family:var(--fm);font-size:13px;text-transform:uppercase;white-space:nowrap}
  .paypick b{font-weight:400}
  .traycost{margin-left:auto;font-family:var(--fm);font-size:13px;color:var(--soft);white-space:nowrap}
  .buy #go{margin-top:0;min-height:52px;font-size:19px;padding:12px 20px}
  .buy .status{min-height:0;margin-top:6px;font-size:13px}
  .buy .status:empty{display:none}
  .addlink{display:none}
  /* one row on a phone while it fits: − n +, the pay pick with its cost under it, the big button on the rest. a label that does
     not fit on one line (a long price, "Tear 10 packs" at 360) takes the button to its own full row instead of folding it */
  .buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}
  .buy .trayrow{display:contents}
  .buy .count button{width:40px;height:40px}
  .buy .trayrow .count b{font-size:24px}
  .buy .paycol{display:grid;justify-items:center}
  .buy .paypick{min-height:32px;padding:0 10px;font-size:12px}
  .buy .traycost{margin:2px 0 0;font-size:11px;text-align:center}
  .buy #go{flex:1 0 auto;width:auto;min-height:48px;font-size:17px;padding:10px 14px;white-space:nowrap}
  .buy>:not(.trayrow,#go){flex-basis:100%}
  @media (max-width:374px){.buy #go{font-size:16px;padding:10px 8px}}   /* "Tear a pack" still beside the pick on a 360 */

  /* the album page, three pockets a row: the whole page of nine on one screen */
  #album .alb-grid{--cols:3;gap:44px 10px}
  #album .alb-grid>.alb-slot:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}   /* the kit centres a lone ninth pocket for 2 columns */
  #album .alb-tag{white-space:nowrap}
  #v-pot{display:flex;flex-direction:column}
  #v-pot .band.cut{order:-1;margin-top:8px}   /* the claim first, in reach of the thumb */
  #album .alb-sp{font-size:14px}
  #album .alb-tag{font-size:10px;bottom:-24px}
  .cut .collect{max-width:none}
}

/* the sample band: one line on a phone */
.sampleband .short{display:none}
@media (max-width:899px){.sampleband{padding:5px 12px;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sampleband .long{display:none}.sampleband .short{display:inline}}
.lede-phone{display:none}
@media (max-width:899px){.lede-full{display:none}.lede-phone{display:block;-webkit-line-clamp:unset}}

/* ---- tab transitions: the page slides 24 px with a crossfade in the direction of the tab; the bar and header hold still ---- */
.tabs{view-transition-name:tabs}.bar{view-transition-name:bar}main{view-transition-name:page}
::view-transition-group(page){animation-duration:.22s;animation-timing-function:var(--out)}
html:active-view-transition-type(forward)::view-transition-old(page){animation:.22s var(--out) both vt-out-l}
html:active-view-transition-type(forward)::view-transition-new(page){animation:.22s var(--out) both vt-in-r}
html:active-view-transition-type(back)::view-transition-old(page){animation:.22s var(--out) both vt-out-r}
html:active-view-transition-type(back)::view-transition-new(page){animation:.22s var(--out) both vt-in-l}
@keyframes vt-out-l{to{opacity:0;transform:translateX(-24px)}}@keyframes vt-in-r{from{opacity:0;transform:translateX(24px)}}
@keyframes vt-out-r{to{opacity:0;transform:translateX(24px)}}@keyframes vt-in-l{from{opacity:0;transform:translateX(-24px)}}
@media (prefers-reduced-motion:reduce){html:active-view-transition-type(forward,back)::view-transition-old(page),html:active-view-transition-type(forward,back)::view-transition-new(page){animation:.18s linear both vt-fade}}
@keyframes vt-fade{from{opacity:0}}

/* ---- immersive tear on a phone: once the pack is armed the header, the tray and the tab bar step aside; they come back with the pet ---- */
@media (max-width:899px){
  .tabs,.buy{transition:transform .18s var(--out)}
  .bar{transition:opacity .18s var(--out)}
  body:has(.pack[data-state=armed]) .tabs{transform:translateY(100%)}
  body:has(.pack[data-state=armed]) .buy{transform:translateY(calc(100% + 64px + var(--sab)))}
  body:has(.pack[data-state=armed]) .bar{opacity:0;pointer-events:none}   /* the header sits in the page's flow: it fades, the pack does not move */
}
.realodds{display:grid;gap:3px;margin-top:10px;font-size:13px;color:var(--soft)}.realodds:empty{display:none}
.label .pagenote{margin-top:4px;color:var(--pink-ink);letter-spacing:0}

/* ---- invites (the Me sheet) and the friend stamp on the album page ---- */
.me-inv{padding:14px 0;border-bottom:2px dashed var(--line)}
.inv{list-style:none;padding:0;display:grid;gap:6px;margin:6px 0 10px}
.inv li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.inv b{font-family:var(--fm);font-weight:400;font-size:15px;letter-spacing:.02em}
.inv span{font-size:14px;color:var(--soft)}
.alb-head{position:relative}
.friendstamp{margin-top:6px;transform:rotate(-4deg);white-space:nowrap;padding:3px 10px;border:2px solid var(--pink-ink);border-radius:8px;color:var(--pink-ink);font-family:var(--fm);font-size:12px;text-transform:uppercase;mix-blend-mode:multiply;z-index:3}
/* the pack is the hero on a wide screen: its canvas spills into the column gaps (the edges of the canvas are empty paper), so it
   grows ~1.2x without taking width from the title or the buy box; from 1560 px the page itself is wider and the pack ~1.4x.
   the canvas keeps a band below the egg: the pot and the lines under it move up into it */
@media (min-width:900px){
  .packwrap{width:calc(100% + 72px);margin:0 -36px -78px;display:grid;justify-items:center}
  .pack{width:100%}
}
@media (min-width:1560px){
  main,.bar,body>footer{max-width:1480px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(300px,460px) minmax(0,1fr)}
  .packwrap{margin-bottom:-96px}
}
/* lines that fill after the first chain read keep their room from the first paint, so the button under them does not jump */
@media (min-width:900px){.buy #balance{min-height:1.45em}.buy #pricenote{min-height:2.9em}}
.potside .potfine{margin-top:8px;font-size:14px;line-height:1.4;color:var(--soft);max-width:44ch}
.ca{overflow-wrap:anywhere}
button.link.cacopy{display:inline;margin:0;padding:0 4px;font-size:12px;color:inherit}
main.tabin{animation:tabin .14s var(--out)}@keyframes tabin{from{opacity:.55}}
@media (prefers-reduced-motion:reduce){main.tabin{animation:none}}
.tearall{margin-top:8px;text-align:center;color:var(--soft)}.tearall[hidden]{display:none}.tearall .link{display:inline;margin:0;padding:0;font-size:inherit}
.buy .tearall{grid-column:1/-1}
.status [data-unlock]{display:flex;width:fit-content;align-items:center;min-height:44px;padding:0 14px;margin-top:6px;border:1.5px solid currentColor;border-radius:99px;background:var(--paper);text-decoration:none;font-size:13px}   /* the way out of a signature the reload left open: a real target */
@media (max-width:899px){
  .stage+.tearall{display:flex;justify-content:center;gap:10px;margin:10px 0 0;position:relative;z-index:26}
  .stage+.tearall[hidden]{display:none}
  .stage+.tearall .sep{display:none}
  body:has(.pack[data-state=armed]) .stage+.tearall{position:fixed;left:0;right:0;bottom:calc(12px + var(--sab));margin:0}   /* the tray's place while it is away: always on screen */
  .stage+.tearall :is(.link,a){display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid currentColor;border-radius:99px;font-family:var(--fm);font-size:13px;text-decoration:none;color:var(--key);background:var(--paper)}
}
.allgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:14px 10px;margin:14px 0 18px}
.allgrid .cell{text-align:center;font-size:12px}.allgrid .cell b{display:block;font-size:13px}.allgrid .cell .mini{width:84px;margin:0 auto 4px}
.allgrid .cell.wait{opacity:.45}.allgrid .cell.best .mini{animation:bestflash 1.1s var(--out) 1}
@keyframes bestflash{0%{transform:scale(.6);filter:brightness(2.2)}60%{transform:scale(1.12)}100%{transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.allgrid .cell.best .mini{animation:none}}
body.sealed .buy :is(.count,.paypick,.traycost,.buycap,.payblock),body.sealed #price,body.sealed #balance,body.sealed #pricenote{display:none}
body.sealed .buy{grid-template-columns:1fr}body.sealed .buy #go{grid-column:1/-1;grid-row:auto;flex-basis:100%;white-space:normal}