@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-600.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2")}
/* Identity: a risograph event poster. Two fluorescent inks (pink + blue) on lemon stock, misregistered type,
   ticket stubs with perforation, a marquee of dates. Dark = the same inks on night-blue stock.
   Layout: one hub, sticky tab bar, every tool a view on the same five engines. Mobile first. */
:root{
  --paper:#fbf6c9; --stock:#fff8dc; --ink:#141a3d; --ink-2:#4a5078; --rule:#141a3d;
  --pink:#ff3d8f; --blue:#1f4fff; --purple:#6a1bb5; --lime:#c6ff3d;
  --on-ink:#fbf6c9; --on-pink:#ffffff; --on-blue:#ffffff;
  --display:"Bricolage Grotesque","Arial Narrow",Impact,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --grain-op:.35; --blend:multiply;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0f1230; --stock:#171b40; --ink:#fbf6c9; --ink-2:#b9bcd6; --rule:#fbf6c9;
  --pink:#ff5fa8; --blue:#6f8dff; --purple:#b07cff; --lime:#d4ff5a;
  --on-ink:#0f1230; --on-pink:#1a0a12; --on-blue:#0a0f2a; --grain-op:.22; --blend:screen; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f1230; --stock:#171b40; --ink:#fbf6c9; --ink-2:#b9bcd6; --rule:#fbf6c9;
  --pink:#ff5fa8; --blue:#6f8dff; --purple:#b07cff; --lime:#d4ff5a;
  --on-ink:#0f1230; --on-pink:#1a0a12; --on-blue:#0a0f2a; --grain-op:.22; --blend:screen; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html.pre .view:not(#v-home){position:absolute;left:-200vw;width:100vw;height:0;overflow:hidden}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;margin:0;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:var(--grain-op);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 72px}
h1,h2,h3{text-wrap:balance;margin:0;line-height:.92;font-weight:800;letter-spacing:-.025em}
h1{font-size:clamp(44px,10vw,104px);text-transform:uppercase;font-variation-settings:"wdth" 80}
h2{font-size:clamp(22px,4.5vw,36px);text-transform:uppercase;font-variation-settings:"wdth" 85}
h3{font-size:19px;font-variation-settings:"wdth" 90;line-height:1.05}
p{margin:0}
.muted{color:var(--ink-2)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.tabular{font-variant-numeric:tabular-nums}
.riso{position:relative;color:var(--ink)}
.riso::before,.riso::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;mix-blend-mode:var(--blend)}
.riso::before{color:var(--pink);transform:translate(5px,4px);opacity:.75}
.riso::after{color:var(--blue);transform:translate(-4px,-3px);opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .riso.live::before{animation:drift1 7s ease-in-out infinite}.riso.live::after{animation:drift2 9s ease-in-out infinite}
  @keyframes drift1{50%{transform:translate(7px,2px)}}@keyframes drift2{50%{transform:translate(-2px,-6px)}}
}

/* marquee */
.ticker{background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--pink)}
.ticker .track{display:inline-flex;padding-block:9px;will-change:transform;animation:slide 48s linear infinite}
.ticker span{padding:0 18px;border-right:1px solid var(--ink-2)}
.ticker em{color:var(--lime);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none;display:block}.ticker{white-space:normal}.ticker .copy{display:none}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:2px solid var(--rule)}
.top .wrap{padding-block:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-size:28px;font-weight:800;margin-right:auto;text-decoration:none;color:var(--ink);text-transform:uppercase;letter-spacing:-.03em;display:flex;align-items:center;gap:12px;font-variation-settings:"wdth" 80}
.brand i{width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:9px 0 0 var(--blue);display:inline-block;transform:translateX(-4px);mix-blend-mode:var(--blend)}
.brand small{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:400}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:7px 11px;border:2px solid var(--ink);border-radius:999px;background:var(--stock);transition:transform .12s,background .12s}
.tabs a:hover{transform:translateY(-1px)}
.tabs a.on{background:var(--ink);color:var(--on-ink)}

.view{display:flex;flex-direction:column;gap:40px;padding-top:36px}
@media (prefers-reduced-motion:no-preference){.view{animation:up .45s cubic-bezier(.2,.8,.2,1) both}@keyframes up{from{opacity:0;transform:translateY(14px)}}}
.hero{display:grid;gap:16px;grid-template-columns:1fr auto;align-items:end}
.hero p{max-width:58ch;font-size:17px}
.hero .stamp{justify-self:end}
@media (max-width:640px){.hero{grid-template-columns:1fr}.hero .stamp{justify-self:start}}
.stamp{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);border:3px double var(--pink);padding:8px 12px;border-radius:6px;transform:rotate(-6deg);mix-blend-mode:var(--blend);white-space:nowrap}

/* home poster */
.poster-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch;position:relative;overflow:hidden}
@media (max-width:760px){.poster-hero{grid-template-columns:1fr}}
.poster-hero .copy{display:flex;flex-direction:column;gap:18px;justify-content:center;position:relative;z-index:1}
.poster-hero .copy h1{font-size:clamp(64px,15vw,168px);line-height:.82}
.poster-hero .copy .tag{font-family:var(--serif);font-style:italic;font-size:clamp(22px,4vw,34px);line-height:1.15;color:var(--ink)}
.poster-hero .copy p{max-width:50ch;font-size:16px}
.sun{position:absolute;right:-6%;top:-10%;width:min(70vw,560px);aspect-ratio:1;pointer-events:none;z-index:0;opacity:.9}
.sun canvas{width:100%;height:100%;display:block}
.feature{position:relative;z-index:1;background:var(--ink);color:var(--on-ink);border:2px solid var(--ink);padding:22px 20px 18px;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  -webkit-mask:radial-gradient(circle 12px at 0 78%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 78%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 12px at 0 78%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 78%,transparent 98%,#000) right/51% 100% no-repeat}
.feature::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--on-ink) .8px,transparent 1px);background-size:9px 9px;opacity:.12;pointer-events:none}
.feature::after{content:"";position:absolute;left:16px;right:16px;top:78%;border-top:2px dashed var(--on-ink);opacity:.5}
.feature .fe-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;position:relative}
.feature .fe-top em{font-style:normal;color:var(--lime)}
.feature .fe-title{font-size:clamp(26px,5vw,40px);font-weight:800;line-height:.95;font-variation-settings:"wdth" 80;letter-spacing:-.02em;position:relative}
.feature .fe-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;position:relative}
.feature .fe-digits div{text-align:center;border-right:1px dashed var(--ink-2);padding:2px}
.feature .fe-digits div:last-child{border:0}
.feature .fe-digits b{display:block;font-size:clamp(34px,8vw,64px);font-weight:800;line-height:.9;color:var(--lime);font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 78}
.feature .fe-digits span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.feature .fe-foot{margin-top:auto;padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;position:relative}
.feature .fe-foot a{color:var(--lime);text-decoration:none;font-weight:600;border-bottom:2px solid var(--pink)}

/* ticket stubs */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ticket{position:relative;background:var(--stock);border:2px solid var(--ink);padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:transform .15s,box-shadow .15s;
  -webkit-mask:radial-gradient(circle 11px at 0 calc(100% - 52px),transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% calc(100% - 52px),transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 calc(100% - 52px),transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% calc(100% - 52px),transparent 98%,#000) right/51% 100% no-repeat}
.ticket::after{content:"";position:absolute;left:14px;right:14px;bottom:52px;border-top:2px dashed var(--ink);opacity:.6}
a.ticket{text-decoration:none;color:inherit;cursor:pointer}
a.ticket *{pointer-events:none}
a.ticket:hover{transform:translate(-2px,-2px)}
.ticket .foot{margin-top:auto;padding-top:26px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.ticket .foot a,.ticket .foot .go{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:2px solid var(--pink)}
.ticket .code{color:var(--ink-2)}
.ticket.pink{background:var(--pink);color:var(--on-pink);border-color:var(--pink)}
.ticket.pink .eyebrow,.ticket.pink .muted,.ticket.pink .code{color:var(--on-pink);opacity:.85}
.ticket.pink .foot a,.ticket.pink .foot .go{color:var(--on-pink);border-color:var(--on-pink)}
.ticket.pink::after{border-color:var(--on-pink)}
.ticket.blue{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.ticket.blue .eyebrow,.ticket.blue .muted,.ticket.blue .code{color:var(--on-blue);opacity:.85}
.ticket.blue .foot a,.ticket.blue .foot .go{color:var(--on-blue);border-color:var(--lime)}
.ticket.blue::after{border-color:var(--on-blue)}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border:2px solid currentColor;border-radius:999px}
.halftone{background-image:radial-gradient(var(--ink) 1.1px,transparent 1.3px);background-size:7px 7px;opacity:.5;height:10px}
/* mini previews inside tool tickets */
.mini{margin-top:4px;border:2px solid currentColor;padding:8px;display:grid;gap:4px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.mini.bingo{grid-template-columns:repeat(5,1fr)}
.mini.bingo i{aspect-ratio:1;border:1.5px solid currentColor;display:block;opacity:.75}
.mini.bingo i.x{background:currentColor;opacity:1}
.mini.santa{grid-template-columns:repeat(3,1fr)}
.mini.santa i{display:block;height:22px;border:1.5px solid currentColor;position:relative;overflow:hidden}
.mini.santa i::before{content:"";position:absolute;left:0;right:0;top:0;height:11px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%);opacity:.9}
.mini.price{grid-template-columns:1fr;gap:2px;font-size:11px}
.mini.price s{opacity:.6}
.mini.price b{font-family:var(--display);font-size:22px;letter-spacing:0}
.mini.letter{grid-template-columns:1fr;font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.3}

/* forms */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
button{font:inherit;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em;border:2px solid var(--ink);border-radius:0;padding:13px 20px;background:var(--pink);color:var(--on-pink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
button:disabled{opacity:.6;cursor:default;transform:none;box-shadow:4px 4px 0 var(--ink)}
button.ghost{background:var(--stock);color:var(--ink)}
button.blue{background:var(--blue);color:var(--on-blue)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
input,textarea,select{font:inherit;font-family:var(--mono);font-size:15px;color:var(--ink);background:var(--stock);border:2px solid var(--ink);border-radius:0;padding:12px;width:100%}
textarea{min-height:160px;resize:vertical}
label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.field2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media (prefers-reduced-motion:reduce){button,.tabs a,.ticket{transition:none}}

/* countdown board */
.board{background:var(--ink);color:var(--on-ink);padding:26px 16px 20px;border:2px solid var(--ink);position:relative;overflow:hidden}
.board::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--on-ink) .8px,transparent 1px);background-size:9px 9px;opacity:.12;pointer-events:none}
.board .glow{position:absolute;inset:-40% -10% auto;height:120%;background:radial-gradient(ellipse at 50% 0,var(--pink) 0,transparent 55%);opacity:.22;pointer-events:none;mix-blend-mode:screen}
.count{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.count div{text-align:center;border-right:1px dashed var(--ink-2);padding:4px;overflow:hidden}
.count div:last-child{border-right:0}
.count b{display:block;font-size:clamp(40px,11vw,112px);font-weight:800;line-height:.9;font-variation-settings:"wdth" 78;color:var(--lime);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){.count b.flip{animation:flip .35s cubic-bezier(.2,.8,.2,1)}@keyframes flip{0%{transform:translateY(-60%);opacity:0}100%{transform:none;opacity:1}}}
.count span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--on-ink);opacity:.8}
.board .where{position:relative;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;text-align:center}
.bignum{font-size:clamp(30px,6vw,52px);font-weight:800;line-height:1;font-variation-settings:"wdth" 80;color:var(--purple)}
pre{background:var(--stock);border:2px solid var(--ink);padding:12px;overflow-x:auto;font-family:var(--mono);font-size:13px;margin:0;line-height:1.5}

/* retention */
.streakbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;background:var(--ink);color:var(--on-ink);text-decoration:none;padding:12px 16px;border:2px solid var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.streakbar b{color:var(--lime);font-family:var(--display);font-size:24px;letter-spacing:0}
.progress{display:flex;flex-direction:column;gap:6px}
.pbar{height:16px;border:2px solid var(--ink);background:var(--stock);position:relative;overflow:hidden}
.pbar i{position:absolute;inset:0;width:0;background:repeating-linear-gradient(90deg,var(--pink) 0 8px,var(--blue) 8px 16px);background-size:32px 100%;transition:width .9s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:no-preference){.pbar i{animation:stripes 1.2s linear infinite}@keyframes stripes{to{background-position:32px 0}}}
.plabels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.plabels span:nth-child(2){color:var(--ink);font-weight:600}
.stamps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:300px}
.stamps i{aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-style:normal;color:var(--ink-2)}
.stamps i.on{background:var(--pink);border-color:var(--pink);color:var(--on-pink);transform:rotate(-8deg)}
.stamps i.today{border-style:dashed}
@media (prefers-reduced-motion:no-preference){.stamps i.pop{animation:pop .5s cubic-bezier(.2,1.4,.3,1)}@keyframes pop{0%{transform:scale(1.8) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}}
.poll{display:flex;flex-direction:column;gap:6px}
.poll button{text-align:left;text-transform:none;letter-spacing:0;font-size:14px;background:var(--stock);color:var(--ink);box-shadow:none;padding:10px 12px;position:relative;overflow:hidden}
.poll button:hover{transform:none;box-shadow:none}
.poll button i.fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--lime);opacity:.5;z-index:0;transition:width .6s}
.poll button em{position:relative;z-index:1;font-style:normal;display:flex;justify-content:space-between;gap:8px}
.poll button.mine{border-color:var(--pink);border-width:3px}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.map div{border:2px solid var(--ink);padding:6px;display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);min-width:0}
.map div b{font-family:var(--display);font-size:18px;color:var(--ink);letter-spacing:0}
.map div.me{background:var(--lime);color:#141a3d}.map div.me b{color:#141a3d}
.envelope{position:relative;background:var(--ink);color:var(--on-ink);margin-top:6px}
.env-flap{height:48px;background:var(--pink);clip-path:polygon(0 0,100% 0,50% 100%)}
.env-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.env-body b{font-size:22px;font-weight:800;line-height:1;font-variation-settings:"wdth" 82;color:var(--lime)}
.btnlink{display:inline-block;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em;border:2px solid var(--ink);padding:13px 20px;background:var(--pink);color:var(--on-pink);text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.friend-code{font-family:var(--mono);font-size:16px;font-weight:600;background:var(--ink);color:var(--lime);padding:10px 12px;letter-spacing:.06em}
.compare{display:flex;flex-direction:column;gap:8px}
.compare .cmp{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.compare .bar{height:22px;position:relative;border:2px solid var(--ink);background:var(--stock)}
.compare .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--blue);transition:width .6s}
.compare .bar.f i{background:var(--pink)}
.compare .bar b{position:absolute;right:6px;top:1px;font-family:var(--display);font-size:14px}
.compare .who{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;font-weight:800;font-size:13px}
.compare .verdict{font-family:var(--serif);font-style:italic;font-size:19px;margin-top:4px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:10px}
.badge{aspect-ratio:1;border-radius:50%;border:3px double var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:10px;background:var(--stock);transform:rotate(-4deg);min-width:0}
.badge:nth-child(even){transform:rotate(5deg)}
.badge .ico{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;color:var(--purple)}
.badge b{font-size:12px;line-height:1.1;text-transform:uppercase;letter-spacing:.04em}
.badge small{font-family:var(--mono);font-size:9px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
.badge.on{background:var(--lime);border-color:#141a3d;color:#141a3d}.badge.on .ico,.badge.on small{color:#141a3d}
.badge.locked{opacity:.4;border-style:dashed}
.stubs{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.stub{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:baseline;padding:8px 12px;border:2px solid var(--ink);background:var(--stock);font-size:14px;border-left:10px solid var(--blue)}
.stub:nth-child(odd){border-left-color:var(--pink)}
.stub .when{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.stub.empty{border-style:dashed;color:var(--ink-2);grid-template-columns:1fr}
.bookhead{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--ink);color:var(--on-ink);border:2px solid var(--ink);padding:18px 20px}
.bookhead .no{font-size:clamp(40px,9vw,80px);font-weight:800;line-height:.9;color:var(--lime);font-variation-settings:"wdth" 78;letter-spacing:-.03em}
.bookhead .l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.bookhead .serif{font-size:20px}
@media (max-width:520px){.bookhead{grid-template-columns:1fr}}

/* bingo */
.bingo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:2px solid var(--ink);background:var(--ink)}
.bingo button{background:var(--stock);color:var(--ink);border:1px solid var(--ink);border-radius:0;box-shadow:none;padding:8px 4px;font-family:var(--display);font-size:11.5px;font-weight:800;text-transform:none;letter-spacing:0;min-height:72px;line-height:1.15;font-variation-settings:"wdth" 88;position:relative}
.bingo button:hover,.bingo button:active{transform:none;box-shadow:none}
.bingo button.hit{background:var(--pink);color:var(--on-pink)}
.bingo button.hit::after{content:"";position:absolute;inset:14%;border-radius:50%;border:3px solid var(--on-pink);opacity:.5;transform:rotate(-8deg)}
.bingo button.free{background:var(--lime);color:#141a3d}

/* santa cards */
.pairs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.pairs button{background:var(--stock);color:var(--ink);text-align:left;text-transform:none;letter-spacing:0;font-size:18px;padding:14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pairs button.open{background:var(--blue);color:var(--on-blue);border-color:var(--ink)}
.pairs small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.75}
.pairs .to{font-size:15px;font-weight:800}
.pairs .to b{color:var(--lime)}

/* result + ad slot */
.result{background:var(--stock);border:2px solid var(--ink);padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;box-shadow:6px 6px 0 var(--pink)}
.result .big{font-size:clamp(44px,12vw,96px);font-weight:800;line-height:.9;font-variation-settings:"wdth" 78;letter-spacing:-.03em}
.verdict-good{color:var(--blue)} .verdict-bad{color:var(--pink)}
.adslot{border:2px dashed var(--ink-2);padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.5}
.adslot b{color:var(--ink)}

/* calendar + structure */
.poster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.date{background:var(--stock);border:2px solid var(--ink);padding:12px 12px 10px;display:flex;flex-direction:column;gap:4px;min-width:0;transition:transform .15s}
.date:hover{transform:translate(-2px,-2px)}
.date .d{font-size:clamp(22px,4vw,32px);font-weight:800;line-height:1;font-variation-settings:"wdth" 80;letter-spacing:-.03em}
.date .n{font-weight:800;font-size:14px;line-height:1.2}
.date p{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.4}
.date.peak{background:var(--pink);color:var(--on-pink);border-color:var(--pink)}
.date.peak p{color:var(--on-pink);opacity:.9}
table{border-collapse:collapse;width:100%;font-size:14px;background:var(--stock);border:2px solid var(--ink)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink);vertical-align:top}
th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--on-ink);background:var(--ink)}
.scroll{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--lime);padding:10px 18px;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--lime);z-index:60}
.colophon{font-family:var(--mono);font-size:12px;color:var(--ink-2);border-top:2px solid var(--ink);padding-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.08em}

/* event switcher, card engine, grid engine */
.seg{display:flex;gap:0;flex-wrap:wrap;border:2px solid var(--ink);background:var(--ink);width:fit-content;max-width:100%}
.seg button{background:var(--stock);color:var(--ink);border:0;border-right:2px solid var(--ink);border-radius:0;box-shadow:none;padding:9px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.seg button:last-child{border-right:0}
.seg button:hover{transform:none;box-shadow:none}
.seg button.on{background:var(--pink);color:var(--on-pink)}
.gta-only.off{display:none}
.tool2{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:start;background:var(--stock);border:2px solid var(--ink);padding:20px;box-shadow:8px 8px 0 var(--pink)}
@media (max-width:760px){.tool2{grid-template-columns:1fr}}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{padding:8px 12px;font-size:12px;letter-spacing:.06em;box-shadow:none;border:2px solid var(--ink);opacity:.7}
.swatches button.on{opacity:1;box-shadow:3px 3px 0 var(--ink)}
.swatches button:hover{transform:none}
.sq-wrap{overflow-x:auto}
.sq{display:grid;grid-template-columns:70px repeat(10,minmax(44px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);min-width:560px;font-family:var(--mono);font-size:11px}
.sq div{background:var(--stock);min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;padding:2px;line-height:1.1;word-break:break-word}
.sq .h{background:var(--ink);color:var(--lime);font-weight:600;font-size:16px;font-family:var(--display)}
.sq .h.q{color:var(--on-ink);opacity:.5}
.sq .t{background:var(--pink);color:var(--on-pink);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.sq .win{background:var(--lime);color:#141a3d;font-weight:600;outline:3px solid var(--pink);outline-offset:-3px}
.sq .c{font-family:var(--display);font-weight:800;font-size:12px}
body.kids .adslot{display:none}
.wheelwrap{position:relative;width:100%;max-width:360px;aspect-ratio:1}
.wheelwrap canvas{width:100%;height:100%;display:block;border-radius:50%;border:3px solid var(--ink)}
.wheelwrap .pointer{position:absolute;right:-6px;top:50%;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:30px solid var(--ink);transform:translateY(-50%)}
.wheelwrap .pointer::after{content:"";position:absolute;right:-30px;top:-12px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:22px solid var(--pink)}
.brwrap{overflow-x:auto}
.br{display:flex;gap:18px;min-width:min-content;align-items:stretch}
.br .round{display:flex;flex-direction:column;justify-content:space-around;gap:10px;min-width:150px}
.br .round h4{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.br .match{display:flex;flex-direction:column;border:2px solid var(--ink);background:var(--stock)}
.br .match button{background:var(--stock);color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px;padding:9px 10px;text-align:left;box-shadow:none;border:0;border-radius:0;border-bottom:2px solid var(--ink);min-height:40px}
.br .match button:last-child{border-bottom:0}
.br .match button:hover{transform:none;box-shadow:none;background:var(--paper)}
.br .match button.win{background:var(--lime);color:#141a3d;font-weight:800}
.br .match button.lose{opacity:.45;text-decoration:line-through}
.br .match button:disabled{opacity:.35;cursor:default}
.br .champ{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--ink);color:var(--lime);font-weight:800;font-size:18px;padding:16px;min-width:150px;font-variation-settings:"wdth" 82;line-height:1.1}
.rc-head{display:flex;justify-content:space-between;font-weight:800;font-size:18px;font-variation-settings:"wdth" 85}
.rc-wrap{overflow-x:auto}
.rc{display:grid;grid-template-columns:120px repeat(7,minmax(40px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);min-width:420px}
.rc div{background:var(--stock);min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;font-family:var(--mono);font-size:11px;line-height:1.1}
.rc .h{background:var(--ink);color:var(--on-ink);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.rc .task{justify-content:flex-start;font-family:var(--display);font-weight:800;font-size:12px}
.rc button{min-height:44px;width:100%;height:100%;background:var(--stock);border:0;border-radius:0;box-shadow:none;padding:0;font-size:22px;color:var(--ink-2)}
.rc button:hover{transform:none;box-shadow:none;background:var(--paper)}
.rc button.on{background:var(--lime);color:#141a3d}
.pickbox{background:var(--ink);color:var(--on-ink);padding:26px 20px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;border:2px solid var(--ink);min-height:180px;justify-content:center}
.pickbox .eyebrow{color:var(--on-ink);opacity:.7}
.pickbox b{font-size:clamp(36px,9vw,72px);font-weight:800;line-height:.95;color:var(--lime);font-variation-settings:"wdth" 80;letter-spacing:-.02em}
.pickbox.spin b{color:var(--pink)}
.pickbox small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.groups{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.groups div{border:2px solid var(--ink);background:var(--stock);padding:10px;font-size:14px;line-height:1.4}
.groups div b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:4px}
.kidsbadge{display:none;align-items:center;gap:10px;background:var(--lime);color:#141a3d;border:2px solid #141a3d;padding:10px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body.kids .kidsbadge{display:flex}
.kidsbadge b{font-family:var(--display);font-size:16px;letter-spacing:0;text-transform:none}
/* header utilities, catalog, now block, about, print */
.util{display:flex;align-items:center;gap:8px;position:relative;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:6px;border:2px solid var(--ink);background:var(--stock);padding:0 10px;font-family:var(--mono);font-size:13px;flex-direction:row;text-transform:none;letter-spacing:0;font-weight:400}
.search input{border:0;padding:8px 0;width:190px;background:transparent;font-size:13px}
.search input:focus-visible{outline:0}
.search:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.ico{padding:8px 11px;font-size:13px;font-family:var(--mono);box-shadow:none;background:var(--stock);color:var(--ink);letter-spacing:.06em}
.ico:hover{transform:none;box-shadow:none;background:var(--paper)}
.results{position:absolute;top:calc(100% + 6px);left:0;width:min(420px,calc(100vw - 32px));background:var(--stock);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);z-index:20;max-height:60vh;overflow:auto}
.results a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line,var(--ink));text-decoration:none;color:var(--ink);font-size:14px}
.results a:hover,.results a.sel{background:var(--lime);color:#141a3d}
.results a small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.results a.sel small{color:#141a3d}
.filters{display:flex;flex-direction:column;gap:10px}
.fgroup{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{padding:6px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;box-shadow:none;background:var(--stock);color:var(--ink);border-radius:999px}
.chips button:hover{transform:none;box-shadow:none}
.chips button.on{background:var(--ink);color:var(--on-ink)}
.now{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:2px solid var(--ink);background:var(--stock);padding:16px}
.now-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.now-list{display:flex;flex-direction:column;gap:6px}
.now-list a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;text-decoration:none;color:var(--ink);border-bottom:1px dashed var(--ink);padding-bottom:6px;font-size:14px}
.now-list a .d{font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap}
.now-list a .n{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-list a .x{font-family:var(--display);font-weight:800;color:var(--pink);white-space:nowrap}
.now-list a:hover .n{color:var(--blue)}
.ab{padding-top:4px}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.55}
.prose h2{margin-top:8px}
kbd{font-family:var(--mono);font-size:12px;border:2px solid var(--ink);padding:1px 7px;background:var(--stock);box-shadow:2px 2px 0 var(--ink)}
.bingo button:focus-visible,.pairs button:focus-visible,.br .match button:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:1;position:relative}
@media print{
  body{background:#fff;color:#000}
  body::after,body::before,.ticker,.top,.adslot,.streakbar,.stamp,.kidsbadge,.seg,.bp-toggle,button,.row,.toast,.glow,.colophon{display:none!important}
  .view{padding-top:0;animation:none}
  .bingo{border-color:#000;background:#000}.bingo button{display:flex!important;background:#fff;color:#000;border-color:#000;min-height:90px;font-size:14px}.bingo button.hit{background:#ddd}.bingo button.free{background:#eee}
  .rc{min-width:0;background:#000}.rc div,.rc button{display:flex!important;background:#fff;color:#000}.rc .h{background:#000;color:#fff}
  .sq{min-width:0}.sq div{background:#fff;color:#000}.sq .h{background:#000;color:#fff}.sq .t{background:#000;color:#fff}
  canvas{max-width:100%!important;page-break-inside:avoid}
  .ticket,.tool2,.board{box-shadow:none;border-color:#000;background:#fff;color:#000;-webkit-mask:none;mask:none}
  .riso::before,.riso::after{display:none}
}
/* guide */
.g-map{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g-layer{border:2px solid var(--ink);padding:14px;background:var(--stock);display:flex;flex-direction:column;gap:6px}
.g-layer h3{font-size:16px}
.g-layer p{font-size:13px;color:var(--ink-2);line-height:1.45}
.g-layer ul{margin:0;padding-left:16px;font-size:13px;line-height:1.5}
.g-item{border:2px solid var(--ink);background:var(--stock);display:grid;grid-template-columns:200px 1fr;gap:0;min-width:0}
.g-item .g-art{border-right:2px solid var(--ink);display:flex;flex-direction:column}
.g-item .g-art canvas{display:block;width:100%;aspect-ratio:16/9}
.g-item .g-art .who{padding:8px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-top:2px solid var(--ink);line-height:1.5}
.g-item .g-art .who b{display:block;color:var(--ink);font-size:11px}
.g-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.g-body h3{font-size:19px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.g-body h3 a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink)}
.g-body p{font-size:14px;line-height:1.5;max-width:70ch}
.g-steps{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.g-steps div{border:2px dashed var(--ink);padding:8px 10px;font-size:12.5px;line-height:1.4}
.g-steps b{font-family:var(--display);font-size:18px;color:var(--purple);display:block;line-height:1}
.g-why{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);border-left:4px solid var(--lime);padding-left:10px;line-height:1.5}
.g-why b{color:var(--ink);text-transform:uppercase;letter-spacing:.12em}
@media (max-width:680px){.g-item{grid-template-columns:1fr}.g-item .g-art{border-right:0;border-bottom:2px solid var(--ink)}.g-steps{grid-template-columns:1fr}}
/* generative riso art per theme */
.art{display:block;width:100%;aspect-ratio:16/9;border:2px solid var(--ink);background:var(--paper);margin-bottom:4px}
.ticket.pink .art,.ticket.blue .art{border-color:currentColor}
.themes{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.themes button{padding:0;background:var(--stock);color:var(--ink);text-transform:none;letter-spacing:0;box-shadow:none;display:flex;flex-direction:column;align-items:stretch;text-align:left;overflow:hidden}
.themes button canvas{display:block;width:100%;aspect-ratio:16/10;border-bottom:2px solid var(--ink)}
.themes button span{padding:8px 10px;font-size:12px;font-weight:800;line-height:1.2;display:flex;justify-content:space-between;gap:6px;align-items:center}
.themes button small{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:400}
.themes button.on{outline:3px solid var(--pink);outline-offset:-3px}
.themes button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.themes button.kid span{background:var(--lime);color:#141a3d}.themes button.kid small{color:#141a3d}
/* citable blocks: facts, faq, examples */
.facts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fact{border:2px solid var(--ink);background:var(--stock);padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.fact h3{font-size:15px}
.fact p{font-size:14px;line-height:1.5}
.fact time,.fact .src{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.lead{max-width:66ch;font-size:17px;line-height:1.55;border-left:6px solid var(--pink);padding-left:14px}
.examples{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ex{border:2px dashed var(--ink);padding:12px;font-size:14px;line-height:1.5;background:var(--paper)}
.ex b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;color:var(--ink-2);margin-bottom:4px}
.faq details{border:2px solid var(--ink);background:var(--stock)}
.faq details+details{border-top:0}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:800;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--pink);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 14px 14px;color:var(--ink-2);max-width:70ch;font-size:15px;line-height:1.5}
/* social share row + together rooms */
.share{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.share .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
.share a,.share button.s{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);background:var(--stock);border:2px solid var(--ink);padding:7px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;box-shadow:none;transition:transform .08s}
.share a:hover,.share button.s:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.share i{width:16px;height:16px;border-radius:3px;display:inline-block;font-style:normal;font-size:10px;line-height:16px;text-align:center;color:#fff;font-weight:700}
.together{border:2px solid var(--ink);background:var(--stock);padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:6px 6px 0 var(--purple)}
.together .hd{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.together .hd b{font-size:16px}
.peers{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:30px}
.peer{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;color:#141a3d;position:relative}
.peer.me::after{content:"you";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.1em;color:var(--ink-2)}
.peer.idle{opacity:.45}
.room-code{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:.2em;background:var(--ink);color:var(--lime);padding:6px 12px}
.feed{font-family:var(--mono);font-size:11px;color:var(--ink-2);max-height:70px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.bingo button .pm{position:absolute;right:3px;bottom:2px;display:flex;gap:2px}
.bingo button .pm i{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);display:inline-block}
/* wheel extras */
.chk{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-family:var(--display);font-weight:800;font-size:13px}
.chk input{width:auto}
.wh-conf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border:0!important;border-radius:0!important}
.wheelwrap:fullscreen{background:var(--ink);display:flex;align-items:center;justify-content:center;max-width:none;aspect-ratio:auto;padding:4vh}
.wheelwrap:fullscreen canvas#wheel{width:min(90vh,90vw);height:min(90vh,90vw)}
.wheelwrap:fullscreen .pointer{right:calc(50% - min(45vh,45vw) - 6px)}
.wheelwrap:fullscreen::after{content:attr(data-win);position:absolute;bottom:3vh;left:0;right:0;text-align:center;color:var(--lime);font-family:var(--display);font-weight:800;font-size:clamp(24px,5vw,64px);text-transform:uppercase;font-variation-settings:"wdth" 80}
/* santa per-person codes */
.percodes{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.percodes div{border:2px solid var(--ink);background:var(--stock);padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.percodes b{font-size:15px}
.percodes code{font-family:var(--mono);font-size:10px;word-break:break-all;color:var(--ink-2)}
.percodes button{padding:6px 10px;font-size:11px;box-shadow:none;align-self:flex-start}
/* bingo sizes, print sheet, caller */
.bingo.s4{grid-template-columns:repeat(4,minmax(0,1fr))}.bingo.s4 button{min-height:84px;font-size:13px}
.bingo.s3{grid-template-columns:repeat(3,minmax(0,1fr))}.bingo.s3 button{min-height:96px;font-size:15px}
.sheet-wrap{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pcard{border:2px solid var(--ink);background:var(--stock);padding:10px;display:flex;flex-direction:column;gap:6px;break-inside:avoid}
.pcard h4{margin:0;font-size:14px;font-weight:800;display:flex;justify-content:space-between;gap:8px}
.pcard h4 span{font-family:var(--mono);font-size:10px;color:var(--ink-2);font-weight:400}
.pcard .g{display:grid;gap:1px;background:var(--ink);border:1.5px solid var(--ink)}
.pcard .g div{background:var(--stock);font-size:9px;line-height:1.1;padding:4px 2px;min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600}
.pcard .g div.free{background:var(--lime);color:#141a3d}
@media print{
  .sheet-wrap{display:block}
  .pcard{page-break-inside:avoid;border-color:#000;background:#fff;color:#000;margin:0 auto 10mm}
  .pcard .g{background:#000}.pcard .g div{background:#fff;color:#000;font-size:11px;min-height:0;aspect-ratio:1}.pcard .g div.free{background:#eee}
  .per1 .pcard{width:170mm}.per1 .pcard .g div{font-size:14px}
  .per2 .pcard{width:150mm}
  .per4 .pcard{width:88mm;display:inline-block;vertical-align:top;margin:3mm}.per4 .pcard .g div{font-size:8px}
  body.printing-sheet .view>*:not(#bm-print){display:none!important}
  body.printing-sheet #bm-print>*:not(.sheet-wrap){display:none!important}
}
/* fullscreen board + zero moment */
.board:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:6vh 4vw;border:0}
.board:fullscreen .count b{font-size:clamp(60px,18vw,300px)}
.board:fullscreen .where{font-size:clamp(14px,2vw,24px);margin-top:4vh}
.board:fullscreen::after{content:attr(data-title);position:absolute;top:4vh;left:0;right:0;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(20px,4vw,48px);text-transform:uppercase;letter-spacing:-.02em;font-variation-settings:"wdth" 80;color:var(--on-ink)}
.zero{position:absolute;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:3}
.zero canvas{position:absolute;inset:0;width:100%;height:100%}
.zero-in{position:relative;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:20px}
.zero-in b{font-size:clamp(44px,12vw,140px);font-weight:800;line-height:.9;color:var(--lime);font-variation-settings:"wdth" 78;letter-spacing:-.03em}
.zero-in .mono{color:var(--on-ink);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.saved-chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:2px solid var(--ink);background:var(--stock);padding:5px 9px;display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.saved-chip i{font-style:normal;color:var(--pink);font-weight:600}
/* phone mockups: deliberately single-look (a real phone screen) */
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.step{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.step figcaption{font-size:13px;line-height:1.45;color:var(--ink-2)}
.step figcaption b{color:var(--ink);font-size:14px}
.phone{background:#15171c;border-radius:30px;padding:10px;border:2px solid var(--ink);max-width:270px;width:100%;margin:0 auto}
.screen{background:#fbf6c9;border-radius:22px;aspect-ratio:9/16;position:relative;overflow:hidden;color:#141a3d;font-family:var(--display);display:flex;flex-direction:column;gap:8px;padding:8px}
.sbar{font-family:var(--mono);font-size:10px;text-align:center;color:#141a3d}
.mini-brand{font-weight:800;font-size:14px;letter-spacing:-.02em}
.mini-board{background:#141a3d;color:#c6ff3d;padding:12px 8px;text-align:center}
.mini-board b{display:block;font-size:44px;font-weight:800;line-height:.9}
.mini-board span{font-family:var(--mono);font-size:9px;color:#fbf6c9;letter-spacing:.1em}
.mini-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;border:1.5px solid #141a3d;padding:6px 8px;background:#fff8dc}
.mini-row b{font-size:18px}
.mini-btn{background:#ff3d8f;color:#fff;font-weight:800;font-size:11px;text-transform:uppercase;text-align:center;padding:9px;border:1.5px solid #141a3d;box-shadow:3px 3px 0 #141a3d;position:relative}
.mini-btn.ghost{background:#fff8dc;color:#141a3d;box-shadow:none}
.tap{position:absolute;left:60%;top:62%;width:22px;height:22px;border-radius:50%;border:3px solid #1f4fff;background:rgba(31,79,255,.25)}
@media (prefers-reduced-motion:no-preference){.pulse{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:translate(2px,2px);box-shadow:1px 1px 0 #141a3d}}}
.s2 .dim{position:absolute;inset:0;background:rgba(20,26,61,.55)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#f2f2f7;border-radius:18px 18px 0 0;padding:12px 12px 16px;color:#111;display:flex;flex-direction:column;gap:10px;font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.sheet-title{font-weight:600;font-size:12px;text-align:center}
.sheet-preview{display:flex;gap:10px;align-items:center;background:#fff;border-radius:10px;padding:8px;font-size:11px;line-height:1.3}
.sheet-preview canvas{width:36px;height:64px;border-radius:3px;border:1px solid #ddd}
.sheet-preview i{color:#888;font-style:normal}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:9px;text-align:center}
.apps div{display:flex;flex-direction:column;gap:4px;align-items:center}
.ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:11px;color:#fff}
.ic.ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)} .ic.tg{background:#2aabee} .ic.wa{background:#25d366} .ic.sv{background:#8e8e93}
.s3{padding:0;background:#000}
.story-canvas{position:absolute;inset:0;width:100%;height:100%}
.ig-top,.ig-bottom{position:absolute;left:0;right:0;display:flex;justify-content:space-between;padding:10px 12px;color:#fff;font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:11px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ig-top{top:0} .ig-bottom{bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.ig-bottom span{background:rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.browser{border:2px solid var(--ink);background:#fff;color:#222;font-family:Georgia,serif;overflow:hidden}
.bbar{background:#e9e9ee;display:flex;align-items:center;gap:6px;padding:6px 10px;font-family:var(--mono);font-size:10px;color:#555}
.bbar i{width:9px;height:9px;border-radius:50%;background:#c9c9d0;display:inline-block}
.bbar span{margin-left:8px;background:#fff;border-radius:4px;padding:2px 8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbody{padding:12px;display:flex;flex-direction:column;gap:8px}
.bh{font-weight:700;font-size:14px;line-height:1.3}
.bt{font-size:12px;line-height:1.5;color:#333}
.widget{background:#141a3d;color:#c6ff3d;padding:10px 12px;display:flex;align-items:baseline;gap:10px;font-family:var(--display);width:100%;max-width:320px;border:2px solid #ff3d8f}
.widget .wb{font-size:10px;font-weight:800;color:#fbf6c9;letter-spacing:.06em}
.widget b{font-size:34px;font-weight:800;line-height:1}
.widget .wl{font-family:var(--mono);font-size:10px;color:#fbf6c9}
.wlink{color:#1a0dab;text-decoration:underline;font-size:12px;font-family:Arial,sans-serif;cursor:pointer}