@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/jbm-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/jbm-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ROBBEDHOOD ($ROBBED) — receipt system
   Palette: 5 values only. Receipt white, ink black, stamp red, faded grey, tricolor rule. */
:root{
  --paper:#F7F5EE;
  --ink:#1A1A1A;
  --red:#C8102E;
  --grey:#6E6B65;      /* text grey, 4.6:1 on paper */
  --grey-deco:#8A8781; /* brand faded ink for rules, dots, borders */
  --table:#1A1A1A;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --col:640px;
  --pad:clamp(18px,5vw,40px);
  --fs:15px;
  --lh:1.55;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--table);
  color:var(--ink);
  font-family:var(--mono);
  font-size:var(--fs);
  line-height:var(--lh);
  font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* table surface texture: static noise, no gradient */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35;
}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}

/* ---------- the receipt strip ---------- */
.receipt{
  position:relative;z-index:1;
  width:min(100%,var(--col));
  margin:0 auto;
  background:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  padding:0 var(--pad);
  margin-top:0;
}
/* torn edges */
.edge{position:relative;z-index:1;width:min(100%,var(--col));margin:0 auto;height:14px;
  background-repeat:repeat-x;background-size:16px 14px}
.edge.top{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M0 14 L8 2 L16 14Z' fill='%23F7F5EE'/%3E%3C/svg%3E");margin-top:clamp(28px,7vh,72px)}
.edge.bottom{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M0 0 L8 12 L16 0Z' fill='%23F7F5EE'/%3E%3C/svg%3E");margin-bottom:96px}
.tricolor{height:3px;display:flex}
.tricolor i{flex:1;display:block}
.tricolor i:nth-child(1){background:#002B7F}.tricolor i:nth-child(2){background:#FCD116}.tricolor i:nth-child(3){background:#CE1126}

/* ---------- global receipt primitives ---------- */
section{padding:44px 0 40px}
.tear{position:relative;height:24px;margin:0 calc(-1*var(--pad));display:flex;align-items:center;color:var(--grey-deco);font-size:12px}
.tear::before,.tear::after{content:"";flex:1;border-top:2px dashed var(--grey-deco);opacity:.7}
.tear span{padding:0 10px;letter-spacing:.2em;user-select:none}
.tear.mute{height:0}
.tear.mute span{display:none}
.center{text-align:center}
.grey{color:var(--grey)}
.red{color:var(--red)}
.small{font-size:12.5px}
.tiny{font-size:11px;line-height:1.5}
.kicker{color:var(--grey);font-size:12px;letter-spacing:.08em;margin:0 0 6px}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:0}
h2{font-size:clamp(22px,4.6vw,30px);margin-bottom:6px}
h2 .no{color:var(--grey);font-weight:400;margin-right:.35em}
.lede{margin:14px 0 22px;color:var(--ink)}
p{margin:0 0 16px}
.row{display:flex;align-items:baseline;gap:10px;padding:5px 0;margin:0}
.row .l{flex:0 1 auto;min-width:0}
.row .dots{flex:1 1 20px;border-bottom:2px dotted var(--ink);opacity:.35;transform:translateY(-4px);min-width:16px}
.row .v{flex:0 0 auto;text-align:right;white-space:nowrap;font-weight:700}
.row .v.red{color:var(--red)}
.row .v.grey{color:var(--grey);font-weight:400}
.row.sub .l,.row.sub .v{font-size:12.5px;color:var(--grey);font-weight:400}
.row.total{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:10px 0;margin-top:10px;font-weight:700}
.row.total .dots{opacity:.6}
.row .src{display:block;font-size:11px;color:var(--grey);font-weight:400;margin-top:2px}
.row .src a{text-decoration-color:var(--grey)}
.hairline{border:0;border-top:1px solid var(--ink);opacity:.25;margin:22px 0}
.dbl{border:0;border-top:3px double var(--ink);margin:18px 0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);
  padding:13px 18px;min-height:48px;text-decoration:none;font-weight:700;
  letter-spacing:.01em;line-height:1;border-radius:0;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.red:hover{background:var(--paper);color:var(--red)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.pre{background:transparent;color:var(--grey);border-color:var(--grey);border-style:dashed;pointer-events:none}
.btn.sm{padding:9px 12px;min-height:38px;font-size:13px}
.btn.full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 12px}
.btn-row .btn{flex:1 1 200px}
.ca{word-break:break-all;font-size:12.5px;color:var(--grey);margin:0}
.ca strong{color:var(--ink);font-weight:400}

/* language toggle & sound */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  height:40px;margin:0 calc(-1*var(--pad));padding:0 var(--pad);background:var(--paper);
  border-bottom:1px dashed var(--grey-deco);font-size:12px}
.topbar .brand{font-weight:700;letter-spacing:.02em;text-decoration:none}
.topbar .brand .tk{color:var(--red)}
.seg{display:inline-flex;border:1.5px solid var(--ink)}
.seg button{background:transparent;border:0;padding:5px 9px;font-size:12px;line-height:1;font-weight:700;color:var(--grey)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.iconbtn{background:transparent;border:1.5px solid var(--ink);padding:5px 8px;font-size:12px;line-height:1;font-weight:700}
.iconbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.topbar .tools{display:flex;gap:8px;align-items:center}

/* ---------- hero: the printer ---------- */
.hero{padding:0 0 36px;position:relative}
.printer{
  position:relative;margin:0 calc(-1*var(--pad));height:22px;background:var(--ink);
}
.printer::after{content:"";position:absolute;left:16px;right:16px;bottom:-2px;height:4px;background:var(--ink)}
.printer .led{position:absolute;right:18px;top:8px;width:6px;height:6px;background:var(--red);border-radius:50%}
.printer .led.busy{animation:blink .35s steps(2) infinite}
@keyframes blink{to{opacity:.15}}
.paper{
  position:relative;padding-top:34px;min-height:560px;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='3' y='3' width='26' height='26' rx='5' fill='none' stroke='%23C8102E' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23C8102E'/%3E%3C/svg%3E") 16 16,crosshair;
}
.paper .line{
  position:relative;white-space:pre-wrap;margin:0;min-height:calc(var(--fs)*var(--lh));
}
.paper .line.blank{min-height:calc(var(--fs)*var(--lh)*.7)}
.paper .line.c{text-align:center}
.paper .line.hd{font-weight:700}
.paper .line.big{font-size:clamp(24px,6.2vw,38px);font-weight:700;line-height:1.1;letter-spacing:-.02em;padding:14px 0 10px;text-align:left}
.paper .line.big .tk{color:var(--red)}
.paper .line .v{float:right;font-weight:700}
.paper .line .v.red{color:var(--red)}
.paper .line .v.grey{color:var(--grey);font-weight:400}
.paper .line .dots{display:inline-block}
.paper .row{padding:3px 0}
.hat{display:block;margin:0 auto 12px;width:64px;height:64px}
/* print animation: lines reveal in order, thermal fade from grey to ink */
.printing .paper .line,.printing .paper .row,.printing .paper .hat,.printing .paper .stamp-wrap{
  opacity:0;
  animation:print .28s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--i)*var(--step,75ms) + 100ms);
}
@keyframes print{
  0%{opacity:0;transform:translateY(-6px);filter:blur(1.2px);color:var(--grey)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:none;color:inherit}
}
.printhead{
  position:absolute;left:calc(-1*var(--pad));right:calc(-1*var(--pad));top:0;height:2px;
  background:var(--ink);opacity:0;pointer-events:none;
}
.printing .printhead{animation:head var(--dur,1.6s) linear forwards;animation-delay:100ms}
@keyframes head{0%{opacity:.6;top:0}95%{opacity:.6}100%{opacity:0;top:100%}}
.paper.done .line,.paper.done .row,.paper.done .hat,.paper.done .stamp-wrap{opacity:1;animation:none;transform:none;filter:none}
.paper.done .stamp.big{opacity:.88;animation:none}

/* stamps */
.stamp-wrap{position:relative;height:0;text-align:center;pointer-events:none}
.stamp{
  display:inline-block;color:var(--red);border:4px solid var(--red);
  padding:6px 14px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  transform:rotate(-9deg);line-height:1;font-size:clamp(20px,5vw,30px);
  mix-blend-mode:multiply;opacity:.88;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -1.6'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%23000'/%3E%3Crect width='200' height='200' filter='url(%23g)' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -1.6'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%23000'/%3E%3Crect width='200' height='200' filter='url(%23g)' fill='%23fff'/%3E%3C/svg%3E");
  mask-size:200px 200px;-webkit-mask-size:200px 200px;
  user-select:none;
}
.stamp.big{position:absolute;right:2%;top:-34px;transform:rotate(-12deg);border-width:5px;font-size:clamp(24px,6vw,40px);padding:8px 18px}
.stamp.sm{font-size:12px;border-width:2.5px;padding:3px 7px;letter-spacing:.14em}
.stamp.inline{position:relative;top:auto;left:auto;transform:rotate(-6deg);vertical-align:middle;margin-left:8px}
.printing .stamp.big{opacity:0;animation:slam .42s cubic-bezier(.25,1.6,.4,1) forwards;animation-delay:var(--slam,2.1s)}
@keyframes slam{
  0%{opacity:0;transform:rotate(-28deg) scale(2.4)}
  70%{opacity:.9;transform:rotate(-12deg) scale(.96)}
  100%{opacity:.88;transform:rotate(-12deg) scale(1)}
}
.printing.shake .paper{animation:shake .32s linear;animation-delay:var(--slam,2.1s)}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(2px,1px) rotate(.3deg)}40%{transform:translate(-2px,-1px)}60%{transform:translate(1px,2px) rotate(-.2deg)}80%{transform:translate(-1px,-1px)}}
/* click stamps */
.tap{position:absolute;pointer-events:none;color:var(--red);border:3px solid var(--red);padding:3px 8px;font-size:13px;font-weight:800;letter-spacing:.14em;
  line-height:1;mix-blend-mode:multiply;opacity:.85;transform:translate(-50%,-50%) rotate(var(--r));
  animation:tapin .28s cubic-bezier(.25,1.5,.4,1) both}
@keyframes tapin{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(2)}100%{opacity:.85;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}}
.tapcount{position:absolute;right:0;top:8px;font-size:11px;color:var(--grey)}

/* after hero */
.after{margin-top:70px}
.after .btn-row{margin-top:8px}
.launchnote{font-size:12.5px;color:var(--grey);margin-top:10px}

/* ---------- live line + meter ---------- */
.live{border:2px solid var(--ink);padding:14px 16px;margin:8px 0 0}
.live .row{padding:4px 0}
.meter{font-size:13px;letter-spacing:-.05em;white-space:nowrap;overflow:hidden;margin:8px 0 2px;color:var(--ink)}
.meter .fill{color:var(--red)}
.meter .empty{color:var(--grey-deco);opacity:.5}
.clock{margin-top:14px;padding-top:12px;border-top:1px dashed var(--grey-deco)}
.clock .n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--red)}
.pulse{display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:8px;vertical-align:middle}
.pulse.on{animation:blink 1s steps(2) infinite}

/* ---------- story ---------- */
.story p{max-width:56ch}
.tagline{font-weight:700;font-size:clamp(17px,3.6vw,21px);line-height:1.35;margin-top:24px;max-width:30ch}

/* ---------- calculator ---------- */
.calc form{display:grid;gap:14px;margin:18px 0}
.field{display:grid;gap:6px}
.field label{font-size:12.5px;color:var(--grey)}
.field input[type=number],.field input[type=text]{
  font:inherit;font-size:20px;font-weight:700;padding:12px 14px;border:2px solid var(--ink);background:transparent;color:var(--ink);width:100%;border-radius:0;
}
.field input::placeholder{color:var(--grey);font-weight:400}
.field .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--grey);font-size:13px}
.field .wrap{position:relative}
.seg.wide{display:grid;grid-template-columns:1fr 1fr}
.seg.wide button{padding:11px 10px;font-size:13.5px}
.slip{
  position:relative;margin:26px calc(-1*var(--pad)) 0;padding:26px var(--pad) 30px;
  border-top:2px dashed var(--grey-deco);border-bottom:2px dashed var(--grey-deco);
}
.slip .head{text-align:center;margin-bottom:12px}
.slip .head .hat{width:40px;height:40px;margin-bottom:6px}
.slip .row{padding:4px 0}
.slip .stamp.big{top:-96px;left:auto;right:26%;transform:rotate(12deg);font-size:clamp(18px,4.5vw,28px);border-width:4px;padding:6px 12px}
.slip.printing .stamp.big{animation-delay:var(--slam,1.1s)}
@keyframes slam2{
  0%{opacity:0;transform:rotate(30deg) scale(2.4)}
  70%{opacity:.9;transform:rotate(12deg) scale(.96)}
  100%{opacity:.88;transform:rotate(12deg) scale(1)}
}
.slip.printing .stamp.big{animation-name:slam2}
.slip .foot{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.slip .foot .btn{flex:1 1 160px}
.slip .note{font-size:11px;color:var(--grey);margin-top:14px}

/* ---------- tokenomics ---------- */
.tok .row .v a{text-decoration-color:var(--grey);font-weight:400;color:var(--grey);font-size:12px;margin-left:6px}
.tok .row .v a:hover{color:var(--red);text-decoration-color:var(--red)}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;margin:14px 0 0;counter-reset:s}
.steps li{position:relative;padding:14px 0 14px 46px;border-top:1px dashed var(--grey-deco)}
.steps li:last-child{border-bottom:1px dashed var(--grey-deco)}
.steps li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:14px;font-weight:700;color:var(--red)}
.steps li strong{display:block;margin-bottom:4px}
.steps li .btn{margin-top:10px}
.steps li p{margin:0 0 6px;color:var(--ink)}
.steps li .grey{font-size:12.5px}

/* ---------- loyalty card ---------- */
.card{border:2px solid var(--ink);padding:16px 16px 14px;margin-top:14px}
.card .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 10px}
.slot{aspect-ratio:1;border:2px dashed var(--grey-deco);display:grid;place-items:center;position:relative;font-size:11px;color:var(--grey);text-align:center;padding:4px}
.slot .stamp.sm{position:absolute;left:50%;top:50%;--r:-12deg;transform:translate(-50%,-50%) rotate(-12deg)}
.slot.got{border-style:solid;border-color:var(--red)}
.slot.got .slot-l{opacity:0}
.slot.got .stamp.sm{animation:tapin .3s cubic-bezier(.25,1.5,.4,1) both}
.slot .stamp.sm{display:none}
.slot.got .stamp.sm{display:inline-block}
.card .legend{font-size:12px;color:var(--grey);margin:0}
.card .legend li{margin:3px 0}
.card .legend li.got{color:var(--ink)}
.card .legend li.got::before{content:"✓ ";color:var(--red);font-weight:700}
.card ol{padding-left:18px;margin:10px 0 0}

/* honors */
.honors ul{list-style:none;padding:0;margin:12px 0 0}
.honors li{padding:8px 0;border-top:1px dashed var(--grey-deco)}
.honors li:last-child{border-bottom:1px dashed var(--grey-deco)}

/* ---------- mascot ---------- */
.mascot{display:block;margin:18px auto 0;width:min(220px,55%);height:auto}
.mascot-cap{font-size:11px;color:var(--grey);text-align:center;margin-top:6px}

/* ---------- footer ---------- */
footer{padding:36px 0 40px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 22px;padding:0;list-style:none}
footer .links a{text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:1px}
footer .links a:hover{border-color:var(--red);color:var(--red)}
footer .disc{font-size:11.5px;line-height:1.55;color:var(--grey);margin:0 0 14px}
footer .barcode{height:44px;margin:26px 0 8px;background-repeat:repeat-x;background-size:auto 44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='44'%3E%3Cg fill='%231A1A1A'%3E%3Crect x='0' width='2' height='44'/%3E%3Crect x='4' width='1' height='44'/%3E%3Crect x='7' width='3' height='44'/%3E%3Crect x='12' width='1' height='44'/%3E%3Crect x='15' width='2' height='44'/%3E%3Crect x='19' width='4' height='44'/%3E%3Crect x='25' width='1' height='44'/%3E%3Crect x='28' width='2' height='44'/%3E%3Crect x='32' width='1' height='44'/%3E%3Crect x='35' width='3' height='44'/%3E%3Crect x='40' width='1' height='44'/%3E%3Crect x='43' width='2' height='44'/%3E%3Crect x='47' width='1' height='44'/%3E%3Crect x='50' width='4' height='44'/%3E%3Crect x='56' width='1' height='44'/%3E%3Crect x='58' width='2' height='44'/%3E%3C/g%3E%3C/svg%3E")}
footer .barcode+.tiny{letter-spacing:.3em;text-align:center}

/* ---------- toast (achievement slips) ---------- */
.toasts{position:fixed;right:12px;bottom:12px;z-index:50;display:grid;gap:8px;max-width:min(320px,calc(100vw - 24px));pointer-events:none}
.toast{background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:10px 12px;font-size:12.5px;line-height:1.4;
  animation:toastin .3s cubic-bezier(.2,.9,.2,1) both;position:relative}
.toast::before{content:"";position:absolute;left:-2px;right:-2px;top:-8px;height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8 L6 0 L12 8Z' fill='%231A1A1A'/%3E%3C/svg%3E");background-size:12px 8px}
.toast b{color:var(--red)}
.toast.out{animation:toastout .3s forwards}
@keyframes toastin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(8px)}}

/* ---------- sticky CA bar (live only) ---------- */
.cabar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:var(--paper);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.cabar.on{transform:none}
.cabar .in{width:min(100%,var(--col));margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px var(--pad);font-size:12.5px}
.cabar .addr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--paper);opacity:.85}
.cabar .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cabar .btn:hover{background:var(--ink);color:var(--paper)}
.cabar .btn.red{background:var(--red);color:var(--paper);border-color:var(--red)}
.cabar .btn.red:hover{background:var(--paper);color:var(--red)}

/* ---------- reduced motion: show everything printed ---------- */
@media (prefers-reduced-motion:reduce){
  .printing .paper .line,.printing .paper .row,.printing .paper .hat,.printing .paper .stamp-wrap,.printing .stamp.big,.slot.got .stamp.sm,.tap,.toast{animation:none!important;opacity:1!important;transform:none!important}
  .printing .stamp.big{transform:rotate(-12deg)!important}
  .slip.printing .stamp.big{transform:rotate(12deg)!important}
  .tap{transform:translate(-50%,-50%) rotate(var(--r))!important}
  .printing .printhead,.printing.shake .paper{animation:none!important}
  .printer .led.busy,.pulse.on{animation:none!important}
  .cabar{transition:none}
}
@media (max-width:420px){
  .row .v{font-size:13.5px}
  .card .grid{gap:8px}
}
@media print{
  body{background:#fff}body::before{display:none}
  .topbar,.cabar,.toasts,.edge{display:none}
}