/* Self-hosted fonts (SIL Open Font License 1.1, see fonts/OFL-*.txt), latin subset from Fontsource 5.3.0. */
@font-face{font-family:"Archivo"; font-style:normal; font-display:swap; font-weight:100 900; font-stretch:62% 125%; src:url(fonts/archivo-latin-standard-normal.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;}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:400; src:url(fonts/ibm-plex-mono-latin-400-normal.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;}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:500; src:url(fonts/ibm-plex-mono-latin-500-normal.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;}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:700; src:url(fonts/ibm-plex-mono-latin-700-normal.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;}
/* Layout: a shop counter (cool steel-grey surface) with one printed thermal receipt as the object on it. */
:root{
  --counter:#e2e5e9; --surface:#f2f4f6; --ink:#121519; --muted:#58616c; --line:#c5ccd4;
  --accent:#2433c9;
  --paper:#fbfbf8; --paper-ink:#1d1f23; --paper-muted:#62666e; --paper-rule:#b8bcc2;
  --stamp-warn:#c22f1d; --stamp-info:#2433c9;
  --display:"Archivo", "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --counter:#15181c; --surface:#1d2126; --ink:#e9ecef; --muted:#9aa3ad; --line:#2d333a; --accent:#8f9bff; color-scheme:dark; }
}
:root[data-theme="dark"]{ --counter:#15181c; --surface:#1d2126; --ink:#e9ecef; --muted:#9aa3ad; --line:#2d333a; --accent:#8f9bff; color-scheme:dark; }

*{box-sizing:border-box}
html,body{margin:0; overflow-x:clip}
body{background:var(--counter); color:var(--ink); font:16px/1.55 var(--body); -webkit-font-smoothing:antialiased;}
.wrap{max-width:1080px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px;}

header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-block:20px;}
.brand{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.logo{font:800 17px/1 var(--display); font-stretch:72%; letter-spacing:.2em; text-transform:uppercase;}
.logo span{color:var(--accent)}
.parent{font:500 12px/1 var(--mono); letter-spacing:.04em; color:var(--muted); text-decoration:none;}
.parent:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
.pill{font:500 11px/1 var(--mono); letter-spacing:.06em; border:1px solid var(--line); border-radius:3px; padding:7px 9px; color:var(--muted); white-space:nowrap;}

.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; padding-block:24px 64px;}
.hero > *{min-width:0}
@media (max-width:860px){ .hero{grid-template-columns:1fr; gap:40px; padding-block:4px 48px;} }
h1{font:800 clamp(44px,8vw,84px)/.92 var(--display); font-stretch:68%; letter-spacing:-.005em; text-transform:uppercase; margin:0 0 20px; text-wrap:balance;}
h1 em{font-style:normal; color:var(--accent); display:block;}
.lede{font-size:18px; color:var(--muted); max-width:32em; margin:0 0 28px;}

form.lookup{display:flex; gap:8px; flex-wrap:wrap;}
.lookup input{flex:1 1 250px; min-width:0; font:500 15px/1 var(--mono); padding:15px 14px; border:1.5px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink);}
.lookup input::placeholder{color:var(--muted)}
.lookup input:focus{border-color:var(--ink); outline:none;}
button{font:700 13px/1 var(--mono); letter-spacing:.08em; border-radius:4px; padding:15px 16px; cursor:pointer;}
.btn-primary{background:var(--ink); color:var(--counter); border:1.5px solid var(--ink);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
button:disabled{opacity:.42; cursor:not-allowed;}
.linkish{padding:0; background:none; border:0; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font:inherit; letter-spacing:0; border-radius:0;}
.hint{font-size:14px; color:var(--muted); margin:12px 0 0;}
.msg{min-height:22px; font:500 13px/1.45 var(--mono); margin-top:12px;}
.msg.err{color:var(--stamp-warn);}
.opts{margin-top:14px; font-size:14px; color:var(--muted);}
.opts label{display:inline-flex; gap:8px; align-items:center; cursor:pointer;}
.opts input{accent-color:var(--accent); width:16px; height:16px;}

.stage{display:flex; flex-direction:column; align-items:center; gap:16px;}
.receipt-shadow{filter:drop-shadow(0 20px 28px rgba(10,16,24,.16)) drop-shadow(0 2px 3px rgba(10,16,24,.10)); width:100%; max-width:372px; transform:rotate(-1.4deg);}
.receipt{
  position:relative; background:var(--paper); color:var(--paper-ink);
  font:500 13px/1.5 var(--mono); font-variant-numeric:tabular-nums;
  padding:30px 22px 26px;
  -webkit-mask:radial-gradient(circle 7px at 50% 0,#0000 97%,#000) 50% 0/18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%,#0000 97%,#000) 50% 100%/18px 51% repeat-x;
          mask:radial-gradient(circle 7px at 50% 0,#0000 97%,#000) 50% 0/18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%,#0000 97%,#000) 50% 100%/18px 51% repeat-x;
}
.r-center{text-align:center}
.r-brand{font:800 26px/1 var(--display); font-stretch:70%; letter-spacing:.3em; padding-left:.3em; text-align:center; margin:6px 0 4px; text-transform:uppercase;}
.r-sub{color:var(--paper-muted); font-size:10.5px; letter-spacing:.16em;}
.r-rule{border:0; border-top:1.5px dashed var(--paper-rule); margin:14px 0;}
.r-row{display:flex; align-items:baseline; gap:6px; margin:3px 0;}
.r-row .k{white-space:nowrap; color:var(--paper-muted);}
.r-row .d{flex:1; border-bottom:1.5px dotted var(--paper-rule); transform:translateY(-4px); min-width:10px;}
.r-row .v{white-space:nowrap; font-weight:700; text-align:right;}
.r-big{font:800 40px/1 var(--display); font-stretch:66%; letter-spacing:.02em; text-align:center; margin:6px 0 0; text-transform:uppercase;}
.r-badges{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px;}
.r-badge{border:1.5px solid var(--paper-ink); padding:2px 6px; font-size:10.5px; font-weight:700; letter-spacing:.08em;}
.r-foot{color:var(--paper-muted); font-size:10px; text-align:center; line-height:1.55; letter-spacing:.05em;}
.barcode{display:block; width:100%; height:44px; margin:10px 0 8px; color:var(--paper-ink);}
.stamp{position:absolute; top:100px; right:10px; transform:rotate(13deg); border:2.5px solid currentColor; padding:4px 8px; font:700 12px/1.15 var(--mono); letter-spacing:.14em; text-align:center; opacity:.8; mix-blend-mode:multiply; border-radius:3px;}
.stamp.warn{color:var(--stamp-warn)}
.stamp.info{color:var(--stamp-info)}
.placeholder{color:var(--paper-muted); text-align:center; padding:44px 0; letter-spacing:.12em;}
.loading-line{animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .loading-line{animation:none} .receipt-shadow{transform:none} }
.caption{font-size:13px; color:var(--muted); text-align:center; margin:0;}

section.band{border-top:1px solid var(--line); padding-block:52px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.grid3 > *{min-width:0}
@media (max-width:760px){ .grid3{grid-template-columns:1fr; gap:24px;} }
.step-n{font:700 11px/1 var(--mono); color:var(--accent); letter-spacing:.14em;}
h2{font:800 34px/1 var(--display); font-stretch:72%; text-transform:uppercase; letter-spacing:.01em; margin:0 0 28px; text-wrap:balance;}
h3{font:700 19px/1.25 var(--body); margin:10px 0 6px;}
p{margin:0 0 10px;}
.muted{color:var(--muted);}
.kicker{font:700 11px/1 var(--mono); letter-spacing:.14em; color:var(--muted);}
.kicker + h2{margin-top:12px;}
.notice{border:1.5px dashed var(--line); border-radius:4px; padding:16px; font-size:14px; color:var(--muted); background:var(--surface);}
.notice strong{color:var(--ink);}
footer{border-top:1px solid var(--line); padding-block:28px 44px; font-size:13px; color:var(--muted);}
footer p{margin:0 0 8px; max-width:72ch;}
footer a{color:var(--ink); text-underline-offset:3px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}