/* Packrekt: the page is a fat yellow thermal printer on a periwinkle desk, and everything below it is its paper roll. */
@font-face { font-family: "Doto"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/Doto.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; src: url(/assets/fonts/MartianMono.woff2) format("woff2"); }

:root {
  --desk: #6F7FE8; --desk-2: #4C58C4; --paper: #FFF6E3; --ink: #24223A; --case: #FFC93C; --case-2: #E0A21F; --rare: #FFE27A; --end: #FF8FB1;
  --s: 6; --col: min(560px, calc(100vw - 32px));
  --dot: "Doto", "Martian Mono", monospace; --mono: "Martian Mono", ui-monospace, monospace;
  --c-arrow: url(/assets/art/cursor-pointer.png) 2 2, auto;
  --c-finger: url(/assets/art/cursor-finger.png) 12 2, pointer;
  --c-cut: url(/assets/art/cursor-scissors.png) 2 18, pointer;
  color-scheme: light;
}
@media (max-width: 1099px), (max-height: 819px) { :root { --s: 5; } }
@media (max-width: 899px), (max-height: 700px) { :root { --s: 4; } }
@media (max-width: 559px) { :root { --s: 3; } }
@media (max-width: 359px) { :root { --s: 2; } }
@media (min-width: 1700px) and (min-height: 1020px) { :root { --s: 7; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; min-height: 100vh; background: var(--desk) url(/assets/art/desk.png) 0 0 / 256px 256px repeat; image-rendering: pixelated;
  color: var(--ink); font-family: var(--mono); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; cursor: var(--c-arrow);
  overflow-x: hidden;
}
img { image-rendering: pixelated; }
a, button, [role=button], label[for], summary, .ca, .ca-row, [data-tear] { cursor: var(--c-finger); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- header strip */
.strip { position: relative; z-index: 5; height: 44px; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 16px; max-width: 1280px; margin: 0 auto; }
.strip .mark { min-width: 44px; display: flex; align-items: center; gap: 10px; height: 44px; text-decoration: none; }
.strip .mark img { width: 28px; height: 28px; }
.strip .mark b { font-family: var(--dot); font-weight: 900; font-size: 22px; letter-spacing: -1px; color: var(--paper); }
.strip .tk { font: 600 13px/1 var(--mono); font-stretch: 75%; color: var(--paper); letter-spacing: .04em; }
.strip nav { display: flex; gap: 8px; align-items: flex-start; }

/* paper tabs: a slip of paper with a zigzag bottom edge; hover slides it out 4px, press = inverse print */
.tab {
  --z: 6px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 14px calc(6px + var(--z));
  background: var(--paper); color: var(--ink); font-family: var(--dot); font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -.5px; text-decoration: none; white-space: nowrap;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--z) * 2) 100%;
  transition: transform .12s steps(2);
}
.tab svg { width: 16px; height: 16px; flex: none; }
.tab:hover { transform: translateY(4px); }
.tab:active, .tab[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.tab[aria-disabled=true] { opacity: .45; pointer-events: none; }
.strip .tab { padding-top: 10px; }
.tab.sm { font-size: 22px; min-height: 40px; padding: 5px 10px calc(5px + var(--z)); }

/* ---------------------------------------------------------------- stage: name + printer */
.stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 16px 0; }
.name { margin: 0; font-family: var(--dot); font-weight: 900; color: var(--paper); line-height: .86; letter-spacing: -2px; font-size: clamp(52px, 10.5vw, 150px); text-align: center; white-space: nowrap; }
.name .tk2 { display: block; font: 600 14px/1.4 var(--mono); letter-spacing: .06em; }
.line { margin: 10px 0 0; font: 600 15px/1.3 var(--mono); font-stretch: 112%; color: var(--paper); text-align: center; }

.printer { position: relative; width: calc(108px * var(--s)); height: calc(82px * var(--s)); margin-top: calc(var(--s) * 3px); z-index: 3; }
.printer > img, .printer .ly { position: absolute; image-rendering: pixelated; }
.printer > img.base { inset: 0; width: 100%; height: 100%; }
/* layers in native px x --s (art/printer.json) */
.ly { left: calc(var(--x) * var(--s) * 1px); top: calc(var(--y) * var(--s) * 1px); width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); }
.ly > img { display: block; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.head { --x: 34; --y: 22; --w: 39; --h: 7; pointer-events: none; }
.head img + img { position: absolute; inset: 0; opacity: 0; }
.printer.printing .head img:first-child { opacity: 0; } .printer.printing .head img + img { opacity: 1; }
.printer.printing .head.b img:first-child { opacity: 1; } .printer.printing .head.b img + img { opacity: 0; }
.printer.printing .head { transform: translateX(calc(var(--jit, 0) * var(--s) * 1px)); }

/* keys: up / down (+1 native px) / disabled; hover lifts 1 native px */
.key { display: block; transition: transform .08s steps(1); }
.key:hover { transform: translateY(calc(var(--s) * -1px)); }
.key:active, .key.down { transform: translateY(calc(var(--s) * 1px)); }
.key:active > img, .key.down > img { filter: brightness(.9) sepia(.2); }
.key.off { cursor: var(--c-arrow); }
.key.off > img { opacity: .55; }
.key.off:hover { transform: none; }
.k-feed { --x: 51; --y: 46; --w: 23; --h: 26; }
.k-x { --x: 32; --y: 42; --w: 15; --h: 12; }
.k-pump { --x: 31; --y: 54; --w: 15; --h: 13; }
.key .lbl { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--ink); }
.k-feed .lbl { font-family: var(--dot); font-weight: 900; font-size: 22px; letter-spacing: -.5px; padding-bottom: calc(var(--s) * 3px); }
.k-feed .lbl i { display: none; font-style: normal; font: 800 18px/1 var(--mono); }
.k-x .lbl svg, .k-pump .lbl svg { width: calc(var(--s) * 4px); height: calc(var(--s) * 4px); }
.k-pump .lbl { padding-bottom: calc(var(--s) * 5px); } .k-x .lbl { padding-bottom: calc(var(--s) * 4px); }
.key::after { content: ""; position: absolute; inset: -6px; }
/* stub on the slot: the week's three numbers */
.stub { --x: 36; --y: 0; --w: 41; --h: 28; }
.stub .st { position: absolute; left: calc(var(--s) * 2.5px); width: calc(var(--s) * 34px); top: calc(var(--s) * 6.6px); height: calc(var(--s) * 13.4px); display: flex; flex-direction: column; justify-content: space-between; }
.st div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font: 600 10.5px/1.15 var(--mono); font-stretch: 75%; letter-spacing: .03em; color: var(--ink); }
.st div b { font: 800 13px/1.2 var(--mono); font-stretch: 100%; }
/* ca stub clipped to the front */
.castub { --x: 2; --y: 37; --w: 25; --h: 34; }
.castub .ca { position: absolute; left: calc(var(--s) * 3px); width: calc(var(--s) * 17px); top: calc(var(--s) * 14px); height: calc(var(--s) * 15px); display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; padding: 0 2px; }
.ca .cl { font: 800 11px/1 var(--mono); letter-spacing: .1em; margin-right: 8px; }
.ca .cv { font: 600 10px/1.25 var(--mono); font-stretch: 75%; overflow-wrap: anywhere; word-break: break-all; }
.ca .cs { font: 600 9.5px/1.2 var(--mono); font-stretch: 75%; letter-spacing: .06em; }
.ca.pre .cv { font: 800 12px/1.25 var(--mono); overflow-wrap: normal; word-break: normal; }
.ca.copied .cv { visibility: hidden; } .ca .cok { display: none; font-family: var(--dot); font-weight: 900; font-size: 22px; }
.ca.copied .cok { display: block; }
@media (max-width: 899px), (max-height: 700px) { .stub .st, .castub .ca { display: none; } .castub { pointer-events: none; } }

/* tooltip = 2-line mini receipt dropping from the element */
[data-tip] { position: relative; }
.tip { position: absolute; left: 50%; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: 220px; padding: 6px 10px 10px; background: var(--paper); color: var(--ink);
  font: 600 12px/1.35 var(--mono); font-stretch: 75%; letter-spacing: .03em; text-align: left; pointer-events: none;
  transform: translate(-50%, -8px) scaleY(.2); transform-origin: top; opacity: 0; transition: transform .12s steps(3), opacity .12s steps(3);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%; }
.tip b { display: block; font-weight: 800; font-stretch: 100%; }
[data-tip]:hover > .tip, [data-tip]:focus-visible > .tip { transform: translate(-50%, 0) scaleY(1); opacity: 1; }

/* ---------------------------------------------------------------- the roll */
.roll { position: relative; width: var(--col); margin: calc(var(--s) * -4px) auto 0; z-index: 2; }
.paper { position: relative; background: var(--paper); padding: 22px 26px; }
.paper + .paper { margin-top: 0; }
.head-p { padding-top: calc(var(--s) * 4px + 18px); text-align: left; }
.head-p .hl { margin: 0 0 12px; font: 800 15px/1.35 var(--mono); font-stretch: 112%; letter-spacing: -.01em; }
.slot { position: relative; display: flex; align-items: stretch; background: var(--ink); padding: 6px; box-shadow: inset 0 -4px 0 var(--desk-2); }
.slot input { flex: 1; min-width: 0; height: 44px; background: transparent; border: 0; outline: 0; color: var(--paper); caret-color: transparent;
  font: 500 16px/1 var(--mono); font-stretch: 85%; letter-spacing: .01em; padding: 0 8px; cursor: text; }
.slot input::placeholder { color: var(--paper); opacity: .55; }
.slot .caret { position: absolute; top: 18px; width: 9px; height: 20px; background: var(--paper); left: 14px; animation: blink 1s steps(1) infinite; pointer-events: none; }
.slot.has .caret, .slot:not(.focus) .caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.slot .tab.sm { align-self: center; min-height: 36px; font-size: 22px; padding: 4px 9px 9px; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.acts .or { font: 600 12px/1 var(--mono); font-stretch: 75%; letter-spacing: .08em; }
.msg { min-height: 20px; margin: 10px 0 0; font: 700 13px/1.4 var(--mono); }
.msg.err::before { content: "! "; }
.m-only { display: none; }
@media (max-width: 899px), (max-height: 700px) { .m-only { display: block; } }
.mca { margin-top: 14px; padding-top: 12px; border-top: 3px dotted var(--ink); }
.mca .ca { display: block; text-align: left; width: 100%; }
.mca .cl { display: inline-block; margin-right: 8px; }
.mca .cv { font-size: 13px; }
.mstats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
@media (max-width: 899px), (max-height: 700px) { .mstats.m-only { display: grid; } }
.mstats div { font: 600 11px/1.25 var(--mono); font-stretch: 75%; letter-spacing: .03em; }
.mstats b { display: block; font: 800 15px/1.2 var(--mono); }

/* rules on paper */
.rule { height: 0; border: 0; border-top: 3px dotted var(--ink); margin: 14px 0; }
.rule.dash { border-top-style: dashed; }

/* receipt */
.rcpt { position: relative; overflow: hidden; padding-top: 18px; padding-bottom: 8px; }
.rc-h { font-family: var(--dot); font-weight: 900; font-size: 44px; line-height: .9; letter-spacing: -1.5px; margin: 0; }
.rc-w { margin-top: 8px; font: 600 13px/1.35 var(--mono); font-stretch: 75%; overflow-wrap: anywhere; word-break: break-all; }
.rc-sub { margin-top: 4px; font: 600 12px/1.35 var(--mono); font-stretch: 75%; letter-spacing: .04em; text-transform: uppercase; }
.ln { display: flex; align-items: baseline; gap: 8px; margin: 7px 0; }
.ln .k { font: 600 14px/1.25 var(--mono); font-stretch: 85%; letter-spacing: .02em; text-transform: uppercase; }
.ln .d { flex: 1; border-bottom: 2px dotted var(--ink); transform: translateY(-4px); min-width: 10px; }
.ln .v { font: 800 17px/1.2 var(--mono); font-stretch: 105%; white-space: nowrap; }
.ln .v small { font-size: 12px; font-weight: 600; }
.note { font: 600 12px/1.4 var(--mono); font-stretch: 75%; letter-spacing: .02em; margin: 6px 0; }
.tot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.tot .k { font-family: var(--dot); font-weight: 900; font-size: 34px; letter-spacing: -1px; line-height: 1; }
.tot .v { font: 800 30px/1 var(--mono); font-stretch: 112%; padding: 8px 10px; white-space: nowrap; }
.tot .v.inv { background: var(--ink); color: var(--paper); }
.roi { text-align: right; font: 700 13px/1.2 var(--mono); }
.pulls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0; }
.pull h4 { margin: 0 0 6px; font-family: var(--dot); font-weight: 900; font-size: 24px; letter-spacing: -.5px; }
.pull .pic { position: relative; width: 100%; aspect-ratio: 5 / 7; background: var(--paper); outline: 2px solid var(--ink); display: grid; place-items: center; }
.pull canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.pull .pic span { font: 700 12px/1.3 var(--mono); font-stretch: 75%; text-align: center; padding: 8px; }
.pull .nm { margin-top: 8px; font: 700 13px/1.3 var(--mono); font-stretch: 80%; overflow-wrap: anywhere; }
.pull .gr { font: 600 11px/1.3 var(--mono); font-stretch: 75%; letter-spacing: .04em; }
.pull .pv { font: 800 18px/1.3 var(--mono); }
.ttl { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 8px 0; }
.ttl img { width: 92px; height: 92px; }
.ttl .tw { display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--dot); font-weight: 900; font-size: clamp(30px, 9vw, 46px); line-height: 1; letter-spacing: -1px; padding: 6px 12px 8px; }
.ttl .tr { margin-top: 6px; font: 600 12px/1.35 var(--mono); font-stretch: 75%; }
.ttl.stamp .tw { animation: stamp .3s steps(3) both; }
@keyframes stamp { from { transform: scale(1.5) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bars { display: flex; gap: 0; height: 56px; margin: 14px 0 4px; }
.bars i { display: block; background: var(--ink); height: 100%; }
.prog { margin: 10px 0; }
.prog .bar { height: 14px; background: url(/assets/art/dither-50.png) 0 0 / 8px 8px; position: relative; }
.prog .bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .4s steps(8); }
.rc-top { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.demo-stamp { flex: none; background: var(--ink); color: var(--paper); font-family: var(--dot); font-weight: 900; font-size: 30px; padding: 4px 10px 6px; transform: rotate(4deg); }
.dash-ln .v { letter-spacing: .1em; }

/* print cover: blank paper below the moving head */
.cover { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--paper); z-index: 3; pointer-events: none; will-change: transform; }
.cover .rail { position: absolute; left: -2px; right: -2px; top: -6px; height: 21px; background: url(/assets/art/head-strip.png) 0 0 / auto 21px repeat-x; image-rendering: pixelated; }
.cover.b .rail { background-image: url(/assets/art/head-strip-b.png); }

/* perforation + tear */
.perf { position: relative; height: 54px; background: var(--paper); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: var(--c-cut); touch-action: none; user-select: none; -webkit-user-select: none; }
.perf::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px dashed var(--ink); }
.perf span { position: relative; background: var(--paper); padding: 0 10px; font-family: var(--dot); font-weight: 900; font-size: 22px; letter-spacing: -.3px; }
.perf img { position: relative; width: 54px; height: 40px; }
.slip { position: relative; will-change: transform; transform-origin: 50% 0; }
.slip.torn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--paper);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; }
.torn-gap { height: 10px; }

/* share dialog */
.share { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(36, 34, 58, .55); }
.sh-slip { position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); padding: 26px 22px 30px; transform-origin: 50% 0; }
.sh-slip::before, .sh-slip::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--paper); }
.sh-slip h3 { margin: 0 0 12px; font-family: var(--dot); font-weight: 900; font-size: 30px; letter-spacing: -1px; padding-right: 56px; }
.sh-slip img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 675; outline: 2px solid var(--ink); background: var(--desk); }
.sh-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sh-x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 800 20px/1 var(--mono); }
.sh-link { margin-top: 12px; font: 600 12px/1.4 var(--mono); font-stretch: 75%; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the board on the spike */
.sec-h { font-family: var(--dot); font-weight: 900; font-size: 40px; line-height: .95; letter-spacing: -1.5px; margin: 6px 0 6px; }
.sec-s { font: 600 12px/1.45 var(--mono); font-stretch: 80%; letter-spacing: .02em; margin: 0 0 12px; }
.board { padding-top: 26px; }
.bctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 12px/1 var(--mono); font-stretch: 75%; letter-spacing: .06em; }
.sw img { width: 68px; height: 26px; }
.spike { position: relative; margin: 10px 0 18px; padding-left: 70px; min-height: 170px; }
.spike > img { position: absolute; left: 0; top: 0; width: 88px; height: 160px; z-index: 2; }
.spike .mini { position: relative; background: var(--paper); outline: 2px solid var(--ink); padding: 10px 12px 12px 30px; margin-bottom: -6px; }
.spike .mini:nth-child(2) { transform: rotate(-2.2deg); z-index: 3; }
.spike .mini:nth-child(3) { transform: rotate(1.6deg) translateX(6px); z-index: 1; }
.spike .mini:nth-child(4) { transform: rotate(-.8deg) translateX(-4px); z-index: 0; }
.spike .mini::before { content: ""; position: absolute; left: 8px; top: 14px; width: 8px; height: 8px; background: var(--ink); }
.mini .mr { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mini .rk { font-family: var(--dot); font-weight: 900; font-size: 30px; line-height: 1; }
.mini a { font: 700 13px/1.3 var(--mono); font-stretch: 75%; text-decoration: none; border-bottom: 2px dotted var(--ink); overflow-wrap: anywhere; }
.mini .nv { font: 800 18px/1.1 var(--mono); padding: 3px 6px; white-space: nowrap; }
.mini .nv.inv { background: var(--ink); color: var(--paper); }
.mini .ms { font: 600 11px/1.3 var(--mono); font-stretch: 75%; letter-spacing: .04em; text-transform: uppercase; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 2px dotted var(--ink); font: 600 13px/1.3 var(--mono); }
.rows li a { font-stretch: 75%; text-decoration: none; overflow-wrap: anywhere; display: inline-block; padding: 8px 0; }
.rows li a:hover { background: var(--ink); color: var(--paper); }
.rows .p { font-stretch: 75%; }
.rows .n { font-weight: 800; text-align: right; min-width: 92px; }
.empty-inv { padding: 16px 0; font: 700 14px/1.4 var(--mono); }
.empty-inv .tab { margin-top: 10px; }

/* ---------------------------------------------------------------- coupons */
.coupons { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 10px -26px 0; }
.cp { position: relative; padding: 16px 18px 20px; border-top: 3px dashed var(--ink); }
.cp:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.cp:nth-child(odd) { border-right: 3px dashed var(--ink); }
.cp img { width: 92px; height: 92px; display: block; margin-bottom: 6px; }
.cp h4 { margin: 0; font-family: var(--dot); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.8px; overflow-wrap: anywhere; }
.cp p { margin: 6px 0 0; font: 600 12px/1.4 var(--mono); font-stretch: 80%; }
.cp .no { font: 700 11px/1 var(--mono); font-stretch: 75%; letter-spacing: .08em; }
.holder { background: var(--rare); margin: 22px -26px 0; padding: 22px 26px 26px; border-top: 3px dashed var(--ink); }
.holder .hh { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.holder img { width: 92px; height: 92px; }
.holder h3 { margin: 0; font-family: var(--dot); font-weight: 900; font-size: 34px; line-height: .95; letter-spacing: -1px; }
.holder ul { list-style: none; padding: 0; margin: 14px 0 0; }
.holder li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 2px dotted var(--ink); font: 700 13px/1.35 var(--mono); }
.holder li span:last-child { font-stretch: 75%; letter-spacing: .06em; white-space: nowrap; }
.holder .why { margin: 12px 0 0; font: 600 12px/1.5 var(--mono); font-stretch: 80%; }

/* film (only when a film exists) */
.film-p .fp { position: relative; aspect-ratio: 16 / 9; background: var(--ink); outline: 2px solid var(--ink); }
.film-p video, .film-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-p .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------------------------------------------------------------- end of roll */
.endp { text-align: center; padding-bottom: 30px; background: linear-gradient(90deg, var(--end) 0 10px, var(--paper) 10px calc(100% - 10px), var(--end) calc(100% - 10px)); }
.endp .el { font-family: var(--dot); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -1px; margin: 4px 0 14px; }
.core { display: block; margin: -2px auto 0; width: 128px; height: 116px; position: relative; z-index: 2; }
.end-key { display: inline-block; position: relative; width: calc(23px * 5); height: calc(26px * 5); background: none; transition: transform .08s steps(1); }
.end-key img { width: 100%; height: 100%; }
.end-key .lbl { position: absolute; inset: 0 0 16px; display: grid; place-items: center; font-family: var(--dot); font-weight: 900; font-size: 22px; }
.end-key:hover { transform: translateY(-4px); } .end-key:active { transform: translateY(4px); }

.foot { width: var(--col); margin: 18px auto 0; padding: 0 0 40px; color: var(--paper); }
.foot .ca { display: block; width: 100%; text-align: left; background: var(--ink); color: var(--paper); padding: 12px 14px; }
.foot .ca .cv { font-size: 13px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.foot p { font: 600 11px/1.5 var(--mono); font-stretch: 75%; letter-spacing: .04em; margin: 14px 0 0; }

/* docs */
.docs .paper h2 { font-family: var(--dot); font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: -1px; margin: 4px 0 10px; }
.docs .paper p, .docs .paper li { font: 500 13.5px/1.6 var(--mono); font-stretch: 90%; }
.docs .paper ul { padding-left: 18px; margin: 6px 0; }
.docs code { font: 700 13px/1.4 var(--mono); background: var(--ink); color: var(--paper); padding: 0 4px; overflow-wrap: anywhere; }
.docs .fx { font: 600 13px/1.55 var(--mono); font-stretch: 85%; padding: 10px 0; border-top: 2px dotted var(--ink); }
.docs .name { font-size: clamp(48px, 9vw, 120px); }
.docs .roll { margin-top: 26px; }

/* 404 */
.jam { display: flex; flex-direction: column; align-items: center; padding: 30px 16px 60px; text-align: center; }
.jam img { width: min(648px, calc(100vw - 32px)); height: auto; aspect-ratio: 648 / 570; }
.jam h1 { font-family: var(--dot); font-weight: 900; color: var(--paper); font-size: clamp(30px, 6vw, 56px); line-height: 1; letter-spacing: -1px; margin: 20px 0 18px; }

@media (max-width: 559px) {
  .paper { padding: 18px 16px; }
  .coupons { grid-template-columns: 1fr; margin: 10px -16px 0; }
  .cp:nth-child(odd) { border-right: 0; }
  .holder { margin: 22px -16px 0; padding: 20px 16px 24px; }
  .holder .hh { grid-template-columns: 92px 1fr; }
  .rc-h { font-size: 36px; }
  .tot .k { font-size: 28px; } .tot .v { font-size: 24px; }
  .spike { padding-left: 46px; } .spike > img { width: 44px; height: 80px; }
  .rows li { grid-template-columns: 28px 1fr auto; } .rows .p { display: none; }
  .strip .mark b { display: none; }
  .k-feed .lbl b { display: none; } .k-feed .lbl i { display: block; }
  .sec-h { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* number flow */
.od { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: top; }
.od > span { display: block; width: 1ch; word-break: break-all; white-space: normal; line-height: 1.2em; transition: transform .45s steps(5); }
.lg-l { display: inline; } .sm-l { display: none; }
@media (max-width: 559px) { .lg-l { display: none; } .sm-l { display: inline; } }
@media (max-width: 359px) { .strip nav .tab[href="/docs"] { display: none; } }
.slot.has input { caret-color: var(--paper); }

/* live tape: big and ugly pulls, right now (desktop desk only) */
.tape { display: none; }
@media (min-width: 1200px) {
  .tape { display: block; position: absolute; top: 0; bottom: 0; left: calc(100% + 48px); width: 230px; z-index: 1; }
  .tape-in { position: sticky; top: 24px; }
  .tape h2 { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--dot); font-weight: 900; font-size: 22px; line-height: 1; padding: 10px 12px 12px; letter-spacing: -.3px; }
  .tape .tr { font: 600 11px/1.4 var(--mono); font-stretch: 75%; letter-spacing: .03em; color: var(--paper); margin: 8px 0 10px; }
  .chits { display: grid; gap: 10px; }
  .chit { display: grid; grid-template-columns: 70px 1fr; gap: 10px; background: var(--paper); padding: 10px; }
  .chit.in { animation: chit .36s steps(6) both; }
  @keyframes chit { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .chit .pic { width: 70px; height: 98px; outline: 2px solid var(--ink); display: grid; place-items: center; }
  .chit canvas { width: 70px; height: 98px; display: block; image-rendering: pixelated; }
  .chit .pic span { font: 700 10px/1.2 var(--mono); font-stretch: 75%; text-align: center; }
  .chit .kd { display: inline-block; background: var(--ink); color: var(--paper); font: 800 11px/1 var(--mono); letter-spacing: .08em; padding: 3px 5px; }
  .chit .nm { margin-top: 6px; font: 700 12px/1.25 var(--mono); font-stretch: 80%; overflow-wrap: anywhere; }
  .chit .pv { margin-top: 4px; font: 800 12.5px/1.25 var(--mono); }
  .chit .ms { font: 600 10.5px/1.3 var(--mono); font-stretch: 75%; letter-spacing: .03em; }
}
.mca .cs, .foot .ca .cs { display: block; margin-top: 4px; }
.mini a { display: inline-block; padding: 7px 0; }

/* ---------------------------------------------------------------- gold roll: holder tools (only with a CA) */
.holder.open .locks, .holder.open .why { display: none; }
.gold-gate { margin-top: 16px; }
.gmsg { min-height: 18px; margin: 10px 0 0; font: 700 12.5px/1.45 var(--mono); }
.gmsg.err::before { content: "! "; }
.wls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; background: var(--paper); font: 800 13px/1 var(--mono); outline: 2px solid var(--ink); }
.wl:hover { background: var(--ink); color: var(--paper); } .wl img { width: 22px; height: 22px; image-rendering: auto; }
.gold { margin-top: 14px; }
.g-who { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding-bottom: 12px; border-bottom: 3px dashed var(--ink); }
.g-who span { font: 800 11px/1 var(--mono); letter-spacing: .1em; }
.g-who b { flex: 1 1 220px; font: 600 12px/1.35 var(--mono); font-stretch: 75%; overflow-wrap: anywhere; }
.g-sec { padding: 14px 0 16px; border-bottom: 3px dashed var(--ink); }
.g-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.g-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.g-h h4 { margin: 0; font-family: var(--dot); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.8px; }
.g-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-sub { margin: 4px 0 8px; font: 600 11.5px/1.45 var(--mono); font-stretch: 75%; letter-spacing: .03em; overflow-wrap: anywhere; }
.g-sub.err::before { content: "! "; }
.seg { display: inline-flex; outline: 2px solid var(--ink); }
.seg button { min-height: 40px; padding: 0 10px; font: 800 11px/1 var(--mono); letter-spacing: .08em; }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.ledger { max-height: 360px; overflow: auto; background: var(--paper); outline: 2px solid var(--ink); overscroll-behavior: contain; }
.lr { display: grid; grid-template-columns: 96px 1fr auto 86px; gap: 10px; align-items: baseline; padding: 7px 10px; border-bottom: 2px dotted var(--ink); font: 600 12px/1.3 var(--mono); }
.lr.lh { position: sticky; top: 0; background: var(--ink); color: var(--paper); font: 800 10px/1 var(--mono); letter-spacing: .08em; border: 0; padding: 8px 10px; z-index: 1; }
.lr .d { font-stretch: 75%; font-size: 11px; }
.lr .c { font-stretch: 80%; overflow-wrap: anywhere; } .lr .c i { font-style: normal; font-size: 10.5px; } .lr .c em { display: block; font-style: normal; font: 800 9.5px/1.4 var(--mono); letter-spacing: .08em; }
.lr .n { text-align: right; font-weight: 800; } .lr .n.inv { background: var(--ink); color: var(--paper); padding: 0 4px; }
.g-sec [data-more] { margin-top: 10px; }
.g-slot { margin: 4px 0 10px; }
.g-slot .tab.sm { align-self: center; }
.vsg { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.vx { align-self: center; font-family: var(--dot); font-weight: 900; font-size: 30px; }
.vc { position: relative; background: var(--paper); padding: 10px 12px 12px; outline: 2px solid var(--ink); min-width: 0; }
.vc .ln { margin: 4px 0; } .vc .ln .k { font-size: 11.5px; } .vc .ln .v { font-size: 14px; }
.vw { font: 600 11px/1.3 var(--mono); font-stretch: 75%; overflow-wrap: anywhere; margin-bottom: 6px; }
.vt { margin-top: 8px; display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--dot); font-weight: 900; font-size: 20px; padding: 3px 8px 5px; }
.vn { font-family: var(--dot); font-weight: 900; font-size: 20px; margin: 6px 0; }
.vc.lose { transform: rotate(-1.2deg); }
.vst { position: absolute; right: -6px; top: -14px; background: var(--ink); color: var(--paper); font-family: var(--dot); font-weight: 900; font-size: 22px; padding: 3px 8px 5px; transform: rotate(5deg); animation: stamp .3s steps(3) both; }
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.skins { display: flex; flex-wrap: wrap; gap: 8px; }
.sk { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; min-height: 44px; padding: 4px; font: 800 9.5px/1 var(--mono); letter-spacing: .08em; }
.sk i { display: block; width: 44px; height: 30px; outline: 2px solid var(--ink); background: var(--sk-p); box-shadow: inset 0 -8px 0 var(--sk-d); }
.sk[aria-checked=true] i { outline-width: 4px; } .sk[aria-checked=true] span { background: var(--ink); color: var(--paper); padding: 2px 3px; }
.sk-paper { --sk-p: #FFF6E3; --sk-d: #6F7FE8; } .sk-pink { --sk-p: #FFE3EC; --sk-d: #6F7FE8; } .sk-mint { --sk-p: #F0FAF2; --sk-d: #5FB89A; } .sk-carbon { --sk-p: #FFE27A; --sk-d: #2F2D48; }
.sh-skins { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.sh-skins > span { font: 800 11px/1 var(--mono); letter-spacing: .1em; }
@media (max-width: 559px) {
  .g-two { grid-template-columns: 1fr; }
  .vsg { grid-template-columns: 1fr; } .vx { justify-self: center; font-size: 24px; }
  .lr { grid-template-columns: 1fr auto; } .lr .d { grid-column: 1 / -1; } .lr .p { display: none; }
  .lr.lh span:nth-child(1), .lr.lh span:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------------- polish: a lit desk, the roll's shadow, things on the desk */
/* desk lamp: the desk darkens in three 1-bit steps away from the printer (fixed, behind everything) */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; image-rendering: pixelated; }
body::before { background: url(/assets/art/d25.png) 0 0 / 16px 16px;
  -webkit-mask: radial-gradient(ellipse 70% 85% at 50% 30%, #0000 62%, #000 62%); mask: radial-gradient(ellipse 70% 85% at 50% 30%, #0000 62%, #000 62%); }
body::after { background: url(/assets/art/d50.png) 0 0 / 16px 16px;
  -webkit-mask: radial-gradient(ellipse 70% 85% at 50% 30%, #0000 84%, #000 84%); mask: radial-gradient(ellipse 70% 85% at 50% 30%, #0000 84%, #000 84%); }
/* the paper roll lies on the desk: a hard dithered shadow to the right and below (light from the top left) */
.roll::after { content: ""; position: absolute; z-index: -1; left: 14px; right: -14px; top: 14px; bottom: 120px; background: url(/assets/art/d75.png) 0 0 / 16px 16px; image-rendering: pixelated; pointer-events: none; }
/* things on the desk (wide screens only): pixel props with the same dithered shadow, cut by their own shape */
.props { display: none; }
@media (min-width: 1200px) {
  .props { display: block; position: absolute; top: 0; bottom: 200px; right: calc(100% + 70px); width: 160px; pointer-events: none; z-index: 1; }
  .prop { position: absolute; top: var(--t); right: var(--x, 0); width: 138px; height: 138px; transform: rotate(var(--r, 0)); }
  .prop img { position: relative; width: 100%; height: 100%; }
  .prop::before { content: ""; position: absolute; inset: 0; transform: translate(12px, 12px); background: url(/assets/art/d75.png) 0 0 / 16px 16px; image-rendering: pixelated;
    -webkit-mask: var(--i) center / 100% 100% no-repeat; mask: var(--i) center / 100% 100% no-repeat; }
}
/* paper tabs lying on paper read as text: on the roll they are highlighter-yellow slips */
.paper .tab:not([aria-pressed=true]):not(.slot .tab) { background: var(--rare); }
.holder .tab:not([aria-pressed=true]) { background: var(--paper); }
/* board: ranks 4-10, the rest folded; every row carries a 1-bit bar of its size */
.rows li { position: relative; }
.rows li.more { display: none; } .rows.open li.more { display: grid; }
.rows .lb { position: absolute; left: 44px; bottom: 3px; height: 6px; width: calc((100% - 44px) * var(--w, 0)); background: url(/assets/art/dither-50.png) 0 0 / 4px 4px; image-rendering: pixelated; }
.rows-more { margin-top: 14px; }
/* titles: an odd last coupon lies flat instead of leaving half a coupon empty */
.cp:last-child:nth-child(odd) { display: grid; grid-template-columns: 92px 1fr; gap: 0 16px; align-items: center; }
.cp:last-child:nth-child(odd) img { grid-row: span 2; margin: 0; }
@media (max-width: 559px) {
  .rows .lb { left: 38px; width: calc((100% - 38px) * var(--w, 0)); }
  /* phone: coupons as compact rows (icon left) instead of eleven tall cards */
  .cp, .cp:last-child:nth-child(odd) { display: grid; grid-template-columns: 64px 1fr; gap: 0 14px; align-items: center; padding: 12px 16px 14px; }
  .cp img, .cp:last-child:nth-child(odd) img { width: 64px; height: 64px; grid-row: span 2; margin: 0; }
  .cp h4 { font-size: 22px; }
}
.holder .gold .sw img { width: 68px; height: 26px; }
.paper .holder .tab:not([aria-pressed=true]):not(.slot .tab) { background: var(--paper); }
.gold .skins { gap: 4px; } .gold .sk { min-width: 50px; }