/* shieldy.world — the zeclaunch.family register (LCD receipt printer: Silkscreen labels, VT323 typed
   body, 2px rules, dotted inner borders, 4px hard offset shadows, cheque cards with a MICR line and
   an ink stamp) re-inked in genius.fun's palette: near-black violet paper, pale text for "ink", one
   pink accent for money and the stamp, genius green for a buy. Structure and rhythm are kept 1:1. */
:root {
  --lcd: #0d0a14;                     /* the page: genius's dark ground */
  --lcd-hi: #120a1e;                  /* cheque paper / panels */
  --lcd-lo: #090014;                  /* the hero block, tape */
  --ghost: #2e2145;                   /* hard shadows, ghost rules (genius hairline) */
  --ink: #f2f0ff;                     /* everything zeclaunch drew in ink */
  --ink-soft: #9194a1;
  --pink: #ff3884;
  --pink-hi: #fe86b4;
  --green: #00ff88;
  --grid: rgba(242, 240, 255, .045);
  --grid-dot: rgba(242, 240, 255, .11);
  --label: "Silkscreen", "Courier New", monospace;
  --typed: "VT323", "Courier New", Courier, monospace;
}
* { box-sizing: border-box; }
html { background: var(--lcd); }
body { margin: 0; background: var(--lcd); color: var(--ink); font-family: var(--typed); font-size: 20px; line-height: 1.15; padding-inline: clamp(16px, 2.4vw, 32px); padding-block: 18px 40px; min-height: 100%; }
/* the pixel grid over everything, exactly as the original — 3px cells */
/* ground: the dotted grid genius draws, a vignette toward the hero, faint 4px scanlines on top */
body { background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.2px); background-size: 24px 24px; background-position: 12px 12px; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 55% at 50% 22%, rgba(255, 56, 132, .07), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; background-image: linear-gradient(rgba(0, 0, 0, .18) 1px, transparent 1px); background-size: 100% 4px; mix-blend-mode: multiply; opacity: .55; }
/* the LCD refresh bar that sweeps the page once in a while */
body > .sweep { position: fixed; left: 0; right: 0; top: -12%; height: 10%; pointer-events: none; z-index: 6; background: linear-gradient(to bottom, transparent, rgba(242, 240, 255, .05), transparent); animation: sweep 9s linear infinite; }
@keyframes sweep { 0% { top: -12%; } 100% { top: 112%; } }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.stack { display: flex; flex-direction: column; gap: 24px; max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------------- header ---------------- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-bottom: 14px; border-bottom: 3px solid var(--ink); }
.mark { font-family: var(--label); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: .06em; display: flex; align-items: center; text-shadow: 2px 2px 0 var(--ghost); text-transform: uppercase; }
.mark .sh { color: var(--pink); }
.cursor { display: inline-block; width: .55em; height: .78em; background: var(--ink); margin-left: .12em; vertical-align: baseline; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ind { display: flex; align-items: center; gap: 10px; font-family: var(--label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ind b { background: var(--pink); color: var(--lcd); padding: 3px 7px; }
.ind a { color: var(--ink); text-decoration: none; border: 1px solid var(--ink); padding: 2px 6px; }
.nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.tab { background: transparent; border: 2px solid var(--ink); padding: 5px 12px; font-family: var(--label); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; display: inline-block; }
.tab[aria-selected="true"], .tab:hover { background: var(--ink); color: var(--lcd); }
.tab.connect { border-style: dotted; }
.go { background: var(--pink); color: var(--lcd); border: 2px solid var(--pink); padding: 9px 14px; font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.go:hover { background: var(--ink); border-color: var(--ink); color: var(--lcd); }
.go[disabled], .tab[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------- tape ---------------- */
.tape { overflow: hidden; border-block: 2px solid var(--ink); background: var(--lcd-lo); white-space: nowrap; position: relative; }
.tape-run { display: inline-flex; gap: 0; animation: tape 70s linear infinite; will-change: transform; }
.tape:hover .tape-run { animation-play-state: paused; }
@keyframes tape { 100% { transform: translateX(-50%); } }
.tape button, .tape span.t { border: 0; border-right: 1px dotted var(--ink-soft); background: transparent; padding: 6px 18px; font-size: 18px; color: var(--ink); display: inline-block; }
.tape b { font-family: var(--label); font-size: 10px; letter-spacing: .1em; padding: 1px 5px; margin-right: 8px; font-weight: 700; vertical-align: 1px; }
.tape b.buy { background: var(--green); color: var(--lcd); }
.tape b.sell { border: 1px solid var(--pink); color: var(--pink); }
.tape button:hover { background: var(--ink); color: var(--lcd); }

/* ---------------- hero ---------------- */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px 44px; align-items: center; padding: clamp(26px, 4vw, 56px); border: 2px solid var(--ghost); color: var(--ink);
  background: linear-gradient(112deg, #100a20 0%, #1c1236 38%, #4a2a6e 68%, #c96aa8 100%); box-shadow: 4px 4px 0 var(--ghost); }
/* the ghost mark behind the copy, as the original's rotated z-mark */
.hero::before { content: ""; position: absolute; right: -3%; top: 50%; width: min(70vw, 860px); aspect-ratio: 1 / 1; transform: translateY(-50%) rotate(-8deg); background: var(--ink); opacity: .06; pointer-events: none; -webkit-mask: url("/brand/glyph.svg") center / contain no-repeat; mask: url("/brand/glyph.svg") center / contain no-repeat; }
.hero > * { position: relative; z-index: 1; }
.hero .kicker { font-family: var(--label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.hero .kicker i { width: 8px; height: 8px; background: var(--green); display: inline-block; animation: blink 1.6s steps(1) infinite; }
.hero h1 { font-family: var(--label); font-weight: 700; font-size: clamp(34px, 6.2vw, 84px); line-height: 1; margin: 0; text-transform: uppercase; letter-spacing: .02em; }
.hero p { margin: 18px 0 0; font-size: 23px; line-height: 1.25; opacity: .85; max-width: 44ch; }
.hero-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-go .go { width: auto; padding-inline: 26px; }
.hero-go .tab { padding: 9px 16px; font-size: 13px; }
.hero-art { position: relative; transform: rotate(-3deg); transform-origin: center; filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, .55)); transition: transform .25s steps(4); }
.hero-art:hover { transform: rotate(-1deg) scale(1.02); }
.inkstamp { position: absolute; right: 24%; top: 7%; transform: rotate(-12deg); border: 3px double var(--pink); color: var(--pink); padding: 6px 12px 4px; font-family: var(--label); font-weight: 700; font-size: clamp(13px, 1.5vw, 20px); letter-spacing: .14em; text-transform: uppercase; background: rgba(13, 10, 20, .55); mix-blend-mode: normal; }
.inkstamp small { display: block; font-size: .5em; letter-spacing: .2em; font-weight: 400; }

/* ---------------- strip ---------------- */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 2px solid var(--ink); background: var(--lcd-hi); box-shadow: 4px 4px 0 var(--ghost); }
.strip div { display: grid; gap: 4px; padding: 12px 16px; border-right: 1px dotted var(--ink-soft); }
.strip div:last-child { border-right: 0; }
.strip span { font-family: var(--label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.strip b { font-size: clamp(26px, 3vw, 40px); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.strip b.pink { color: var(--pink); }

/* ---------------- sections ---------------- */
h2 { font-family: var(--label); font-weight: 700; font-size: 16px; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; text-transform: uppercase; letter-spacing: .06em; }
h2 span { font-family: var(--typed); font-weight: 400; font-size: 18px; color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
section { display: grid; gap: 14px; }
.notice { border: 2px dotted var(--ink); padding: 6px 10px; background: var(--lcd-hi); }
.notice::before { content: "> "; }
.notice.pink { border-color: var(--pink); color: var(--pink-hi); }

/* fresh row */
.fresh { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.fresh button { display: grid; gap: 6px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--ink); }
.fresh .pic { aspect-ratio: 1 / 1; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ghost); background: var(--ghost) center / cover no-repeat; color: var(--ink); display: grid; place-items: center; font-family: var(--label); font-weight: 700; font-size: 44px; image-rendering: pixelated; }
.fresh button:hover .pic { box-shadow: 6px 6px 0 var(--pink); }
.fresh .nm { font-family: var(--label); font-weight: 700; font-size: 12px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fresh .sub { font-size: 17px; color: var(--ink-soft); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- cheques ---------------- */
.cheques { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.cheque { position: relative; background: var(--lcd-hi); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ghost); padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; color: var(--ink); }
.cheque::before { content: ""; position: absolute; inset: 4px; border: 1px dotted var(--ink-soft); pointer-events: none; }
.c-head { display: flex; gap: 10px; align-items: center; }
.seal { flex: 0 0 auto; width: 60px; height: 60px; background: var(--ink); color: var(--lcd); display: grid; place-items: center; font-family: var(--label); font-weight: 700; font-size: 15px; }
.seal.pic { background-color: var(--ghost); background-size: cover; background-position: center; color: transparent; border: 2px solid var(--ink); }
.c-name { font-family: var(--label); font-weight: 700; font-size: 15px; line-height: 1.15; overflow-wrap: anywhere; text-transform: uppercase; }
.c-name .lnk { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.c-name .lnk:hover { text-decoration: underline; }
.c-tick { font-size: 18px; color: var(--ink-soft); }
.c-no { margin-left: auto; text-align: right; font-size: 17px; line-height: 1.05; flex: 0 0 auto; }
.c-no b { font-size: 22px; font-weight: 400; }
.lbl { font-family: var(--label); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.line { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.fill { flex: 1 1 0; min-width: 0; border-bottom: 2px solid var(--ink); padding-bottom: 1px; min-height: 24px; display: flex; align-items: flex-end; overflow-wrap: anywhere; }
.redact { display: inline-block; height: 15px; background: var(--ink); margin-bottom: 3px; box-shadow: 1px 1px 0 var(--ghost); }
.amt { flex: 0 0 auto; background: var(--pink); color: var(--lcd); padding: 0 8px; font-size: 24px; letter-spacing: .04em; }
.words { font-size: 18px; }
.words .fill { flex-wrap: nowrap; overflow: hidden; overflow-wrap: normal; }
.words .run { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.words .fill::after { content: ""; flex: 1 1 0; min-width: 0; border-bottom: 2px dotted var(--ink-soft); margin: 0 0 5px 8px; }
.words .lbl { flex: 0 0 auto; padding-bottom: 4px; }
.c-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.c-foot .fill { overflow: hidden; }
.c-foot .run { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig { font-size: 26px; line-height: .9; padding-inline: 4px 12px; border-bottom: 2px solid var(--ink); white-space: nowrap; transform: skewX(-14deg); transform-origin: left bottom; }
.micr { font-size: 18px; letter-spacing: .1em; padding-top: 5px; border-top: 2px dotted var(--ink-soft); overflow-wrap: anywhere; }
.c-data { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
canvas.plot { width: 150px; max-width: 100%; height: auto; image-rendering: crisp-edges; display: block; }
.meta { display: grid; gap: 0; font-size: 18px; color: var(--ink-soft); line-height: 1.05; }
.meta div { display: flex; justify-content: space-between; gap: 10px; }
.meta b { color: var(--ink); font-weight: 400; white-space: nowrap; }
.meta b.pink { color: var(--pink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-family: var(--label); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; background: var(--ink); color: var(--lcd); }
.tag.pink { background: var(--pink); }
.tag.spec { background: transparent; color: var(--ink); border: 1px dotted var(--ink); }
a.tag.link { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 1px 6px; text-decoration: none; }
a.tag.link:hover { background: var(--ink); color: var(--lcd); }

/* ---------------- ledger table ---------------- */
.tablewrap { overflow: auto; border: 2px solid var(--ink); background: var(--lcd-hi); box-shadow: 4px 4px 0 var(--ghost); }
table { border-collapse: collapse; width: 100%; min-width: 800px; }
th, td { padding: 4px 12px; text-align: right; border-bottom: 1px dotted var(--ink-soft); white-space: nowrap; }
th:nth-child(2), td:nth-child(2), th:last-child, td:last-child { text-align: left; }
th { background: var(--ink); color: var(--lcd); font-family: var(--label); font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; }
tbody tr:nth-child(2n) { background: var(--lcd); }
tbody tr:hover { background: var(--ghost); }
td .nm { font-family: var(--label); font-size: 12px; text-transform: uppercase; }
td .redact { height: 12px; vertical-align: middle; margin: 0; }
td .pink { color: var(--pink); }

/* ---------------- write ---------------- */
.write { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.panel { display: grid; gap: 12px; border: 2px solid var(--ink); background: var(--lcd-hi); padding: 18px; box-shadow: 4px 4px 0 var(--ghost); min-width: 0; }
label.f { display: grid; gap: 4px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--lcd); border: 2px solid var(--ink); border-radius: 0; padding: 4px 8px; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--ink-soft); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
select { appearance: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drop { border: 2px dashed var(--ink); background: var(--lcd); min-height: 110px; display: grid; place-items: center; gap: 8px; cursor: pointer; color: var(--ink-soft); padding: 10px; text-align: center; }
.drop input[type="file"] { width: auto; border: 0; background: transparent; padding: 4px; color: var(--ink-soft); font-size: 16px; }
.drop input[type="file"]::file-selector-button { font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--lcd); border: 2px solid var(--ink); border-radius: 0; padding: 7px 12px; margin-right: 12px; cursor: pointer; }
.drop input[type="file"]::file-selector-button:hover { background: var(--pink); border-color: var(--pink); }
.drop:hover, .drop.over { border-color: var(--pink); color: var(--ink); }
.drop img { max-width: 96px; max-height: 96px; border: 2px solid var(--ink); }
.key { border: 2px dotted var(--pink); padding: 10px; background: var(--lcd); font-size: 17px; overflow-wrap: anywhere; }
.key b { font-family: var(--label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); display: block; margin-bottom: 4px; }
.key code { font-family: var(--typed); font-size: 18px; }
.steps { display: grid; gap: 4px; font-size: 18px; }
.steps .step { display: flex; gap: 8px; color: var(--ink-soft); }
.steps .step .i { color: var(--ink-soft); }
.steps .step.ok .i { color: var(--green); }
.steps .step.err, .steps .step.err .i { color: var(--pink); }
.steps .step a { color: var(--pink-hi); }
.kv { display: grid; gap: 6px; font-size: 18px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--ink-soft); padding-bottom: 4px; }
.kv b { font-weight: 400; color: var(--ink); }

/* ---------------- footer ---------------- */
.foot { border-top: 3px solid var(--ink); padding-top: 10px; font-size: 18px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot .own { margin-left: 12px; }

@media (max-width: 900px) {
  .hero, .write { grid-template-columns: 1fr; }
  .hero::before { display: none; }
  .fresh { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tape-run { animation: none; } }

/* ---------------- day (their NIGHT, inverted for a dark-default site) ---------------- */
html[data-day] { --lcd: #f4eef6; --lcd-hi: #fbf7fc; --lcd-lo: #ece2ef; --ghost: #d9c9df; --ink: #1a1230; --ink-soft: #6b5e7a; --grid: rgba(26, 18, 48, .06); }
html[data-day] .hero { background: linear-gradient(112deg, #2a1b4a 0%, #4a2a6e 40%, #c96aa8 100%); color: #f2f0ff; --ink: #f2f0ff; --ghost: #5a3f78; }
html[data-day] .hero-art { --lcd: #f4eef6; --lcd-hi: #fbf7fc; --ghost: #d9c9df; --ink: #1a1230; --ink-soft: #6b5e7a; color: #1a1230; }
html[data-day] .tape b.buy { color: #fff; }
/* the stamp on any cheque (specimen / preview) */
.cheque .stamp { position: absolute; right: 10px; top: 10px; transform: rotate(-9deg); border: 3px double var(--pink); color: var(--pink); padding: 3px 8px 2px; font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; background: rgba(13, 10, 20, .35); }
.cheque.specimen { opacity: .82; }
th button { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; cursor: pointer; }
th[aria-sort="ascending"] button::after { content: " ▲"; } th[aria-sort="descending"] button::after { content: " ▼"; }
.tab[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--lcd); }

/* ---------------- AAA: motion ---------------- */
/* the boot screen: a receipt printer coming up. Shown once per session. */
#boot { position: fixed; inset: 0; z-index: 50; background: var(--lcd); display: grid; place-items: center; color: var(--ink); }
#boot .paper { width: min(520px, 90vw); border: 2px solid var(--ink); background: var(--lcd-hi); box-shadow: 6px 6px 0 var(--ghost); padding: 18px 20px 14px; position: relative; overflow: hidden; }
#boot .paper::before { content: ""; position: absolute; inset: 4px; border: 1px dotted var(--ink-soft); pointer-events: none; }
#boot .paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); opacity: .5; }
#boot .hd { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
#boot .hd b { background: var(--pink); color: var(--lcd); font-family: var(--label); font-size: 10px; letter-spacing: .12em; padding: 3px 7px; }
#boot .hd span { font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .06em; }
#boot .line { display: block; font-size: 20px; line-height: 1.25; min-height: 1.25em; white-space: pre; }
#boot .line.ok::after { content: " ok"; color: var(--green); font-family: var(--label); font-size: 10px; letter-spacing: .12em; }
#boot .bar { height: 10px; border: 2px solid var(--ink); margin-top: 10px; background: var(--lcd); }
#boot .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--pink) 0 4px, transparent 4px 6px); transition: width .25s steps(6); }
#boot.out { animation: bootOut .55s steps(8) forwards; }
@keyframes bootOut { to { clip-path: inset(0 0 100% 0); opacity: .2; } }
html.booting main { visibility: hidden; }

/* printing in: a screen wipes in top to bottom on an LCD scan, its blocks a beat apart */
main.print > * { animation: printIn .5s steps(10) both; }
main.print > *:nth-child(2) { animation-delay: .06s } main.print > *:nth-child(3) { animation-delay: .12s } main.print > *:nth-child(4) { animation-delay: .18s } main.print > *:nth-child(5) { animation-delay: .24s }
@keyframes printIn { from { clip-path: inset(0 0 100% 0); transform: translateY(6px); } to { clip-path: inset(0 0 0 0); transform: none; } }
[data-view].wipe > * { animation: printIn .45s steps(9) both; }
[data-view].wipe > *:nth-child(2) { animation-delay: .07s } [data-view].wipe > *:nth-child(3) { animation-delay: .14s } [data-view].wipe > *:nth-child(4) { animation-delay: .21s }

/* a cheque prints line by line, then the stamp slams down */
.cheque.printing > * { animation: lineIn .28s steps(5) both; }
.cheque.printing > :nth-child(2) { animation-delay: .08s } .cheque.printing > :nth-child(3) { animation-delay: .16s } .cheque.printing > :nth-child(4) { animation-delay: .24s } .cheque.printing > :nth-child(5) { animation-delay: .32s } .cheque.printing > :nth-child(6) { animation-delay: .40s } .cheque.printing > :nth-child(7) { animation-delay: .48s } .cheque.printing > :nth-child(8) { animation-delay: .56s }
@keyframes lineIn { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.cheque .stamp, .inkstamp { animation: slam .42s steps(6) .62s both; transform-origin: 60% 40%; }
.hero-art .inkstamp { animation-delay: 1.1s; }
@keyframes slam { 0% { transform: rotate(-24deg) scale(2.2); opacity: 0; } 60% { transform: rotate(-10deg) scale(.92); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); opacity: 1; } }
.cheque .stamp { animation-name: slamSmall; }
@keyframes slamSmall { 0% { transform: rotate(-20deg) scale(2); opacity: 0; } 60% { transform: rotate(-7deg) scale(.94); opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }

/* the headline types itself; the cursor rides the last glyph */
.hero h1 .ty { visibility: hidden; }
.hero h1 .ty.on { visibility: visible; }
.hero h1 .caret { display: inline-block; width: .5em; height: .85em; background: var(--pink); vertical-align: -.06em; margin-left: .06em; animation: blink .9s steps(1) infinite; }
.hero h1 .caret.done { animation-duration: 1.1s; background: var(--ink); }
/* the ghost glyph drifts with the pointer (set from JS as --gx / --gy) */
.hero::before { transform: translate(calc(var(--gx, 0) * 1px), calc(-50% + var(--gy, 0) * 1px)) rotate(-8deg); transition: transform .35s steps(7); }

/* hover physics: a cheque lifts a notch, a tape print inverts, tabs press */
.cheque { transition: transform .18s steps(3), box-shadow .18s steps(3); }
.cheque:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--pink); }
.tab, .go { transition: transform .12s steps(2), background .12s steps(2), color .12s steps(2); }
.tab:active, .go:active { transform: translate(2px, 2px); }
.strip b { transition: color .2s steps(2); }
.strip b.tick { color: var(--pink-hi); }
.fresh button { transition: transform .18s steps(3); }
.fresh button:hover { transform: translate(-2px, -2px); }
.tape button.fresh-print { animation: flash .9s steps(3); }
@keyframes flash { 0%, 66% { background: var(--pink); color: var(--lcd); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  #boot { display: none; } html.booting main { visibility: visible; }
  main.print > *, [data-view].wipe > *, .cheque.printing > *, .cheque .stamp, .inkstamp, body > .sweep { animation: none !important; }
  .hero h1 .ty { visibility: visible; } .hero h1 .caret { display: none; }
}