/* Slabify - pixel school: GBA/DS item icons + a collection. Muted teal-grey world, gold coin, yellow label, light acrylic. */
@font-face { font-family: "Micro 5"; src: url(/assets/fonts/Micro5.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(/assets/fonts/Silkscreen-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(/assets/fonts/Silkscreen-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DotGothic16"; src: url(/assets/fonts/DotGothic16.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/InstrumentSans-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/GeistMono-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --plum: #729694; --plum-l: #84A8A4; --plum-d: #608484; --plum-dd: #101652;
  --navy: #101652; --ink: #101652; --cream: #FBFBBF; --cream-2: #FCFC7F; --line: #E8C836;
  --label: #FCF23E; --label-d: #C37E02; --label-l: #FBFBBF; --gold: #FDC70D; --brown: #7B5604;
  --acr: #B6D3FC; --acr-d: #7D9EFB; --acr-l: #FEFEFE; --acr-dd: #5B79E8; --white: #FEFEFE; --steel: #8E9FC7; --steel-d: #6677A1;
  --clean: #FDC70D; --solid: #5B79E8; --risky: #C37E02; --rekt: #E8484B;
  --f-px: "Micro 5", "Silkscreen", monospace; --f-ui: "Silkscreen", monospace; --f-body: "DotGothic16", "Silkscreen", sans-serif;
  --f-num: "Instrument Sans", system-ui, sans-serif; --f-mono: "Geist Mono", ui-monospace, monospace;
  --u: 5px; --cu: 6px;
  --cur: url(/assets/px/cursor.png) 4 2, auto;
}
@media (max-height: 860px), (max-width: 1100px) { :root { --u: 4px; } }
@media (max-width: 899px) { :root { --cu: 4px; } }
@media (max-width: 379px) { :root { --u: 3px; --cu: 3px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; background: #729694; }
body { margin: 0; color: var(--cream); background: transparent; font: 16px/1.5 var(--f-body); overflow-x: hidden; cursor: var(--cur); }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, textarea { font: inherit; color: inherit; }
a, button, [role=button], summary, label, .ca, .ca-chip, .ca-line, .sleeve, .page { cursor: url(/assets/px/cursor.png) 4 2, pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
::selection { background: var(--label); color: var(--navy); }
:focus-visible { outline: 3px solid var(--label); outline-offset: 2px; }

/* sections: each has a procedural dithered background canvas (bg.js) */
main > section { position: relative; overflow: hidden; isolation: isolate; }
canvas.bands { display: none; }
canvas.bands-page { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; display: block; pointer-events: none; }
.sc-cobalt, .sc-yellow, .sc-mint, .sc-pink { background: transparent; }
.sc-yellow .tag-s, .sc-pink .tag-s, .sc-pink .perk, .sc-pink .pg-n { color: var(--navy); }

/* ------------------------------------------------ pixel windows (DS item description box) */
.win { position: relative; background: var(--cream); color: var(--navy); padding: 14px 18px;
  clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }
.win::before { content: ""; position: absolute; inset: 5px; border: 2px solid var(--line); pointer-events: none; }
.win-k { margin: 0 0 6px; font: 400 12px/1 var(--f-ui); letter-spacing: .06em; color: var(--brown); text-transform: uppercase; }
.win-k b { font-weight: 700; color: var(--navy); }

/* ------------------------------------------------ keys (buttons): pixel key caps with an inner bevel band */
.key { --k: var(--label); --kd: var(--label-d); --kl: var(--label-l); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px 4px; border: 0; background: var(--k); color: var(--navy); text-decoration: none;
  font: 700 13px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 -4px 0 var(--kd), inset 0 3px 0 var(--kl), inset 3px 0 0 var(--kl), inset -3px 0 0 color-mix(in srgb, var(--kd) 40%, var(--k));
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
  transition: none; }
.key span { position: relative; top: 0; }
.key svg { width: 15px; height: 15px; }
.key:hover { --k: var(--gold); }
.key:active, .key.on { box-shadow: inset 0 -1px 0 var(--kd), inset 0 3px 0 var(--kd), inset 3px 0 0 color-mix(in srgb, var(--kd) 40%, var(--k)); padding-bottom: 0; padding-top: 4px; }
.key:disabled { --k: var(--steel); --kd: var(--steel-d); --kl: var(--acr); color: var(--navy); opacity: .7; cursor: not-allowed; }
.key-b { --k: var(--acr); --kd: var(--acr-d); --kl: var(--acr-l); }
.key-b:hover { --k: var(--acr-l); }
.key-s { min-height: 34px; padding: 0 10px 3px; font-size: 11px; }
.key-s:active { padding-top: 3px; padding-bottom: 0; }

/* ------------------------------------------------ header */
.top { position: fixed; z-index: 50; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; pointer-events: none; }
.top > * { pointer-events: auto; }
.top.scrolled { background: #608484; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.brand-mark { width: 40px; height: 40px; background: url(/assets/px/mark.png) center/contain no-repeat; image-rendering: pixelated; }
.brand-word { font: 400 40px/1 var(--f-px); letter-spacing: .01em; }
.ticker { font: 700 13px/1 var(--f-num); color: var(--label); }
.top-r { display: flex; align-items: center; gap: 8px; }
.top .key { min-height: 38px; }
.ca-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; border: 0; background: var(--navy); color: var(--cream);
  font: 400 12px/1.2 var(--f-mono); clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
.ca-k { font: 700 11px/1 var(--f-ui); color: var(--label); }
.ca-v { overflow-wrap: anywhere; }
.ca-chip.unset .ca-v, .ca-line.unset span:last-child { font: 400 11px/1 var(--f-ui); color: var(--acr); letter-spacing: .04em; }
.ca-ok { display: none; font: 700 11px/1 var(--f-ui); color: var(--label); }
.copied .ca-ok { display: inline; } .copied .ca-v { display: none; }

/* ------------------------------------------------ hero: the bench */
.bench { min-height: 100svh; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr; align-items: center; padding: 84px 28px 40px; }
.bench-word { grid-area: 2 / 1 / 3 / 4; display: flex; justify-content: space-between; margin: 0; pointer-events: none; font: 400 clamp(120px, 15vw, 248px)/.8 var(--f-px); color: var(--label); letter-spacing: -.01em; }
.bench-word { justify-content: center; gap: calc(var(--u) * 84 + 7vw); --o: max(4px, calc(var(--u) * 1));
  text-shadow: 0 var(--o) 0 var(--label-d), var(--o) 0 0 var(--navy), calc(var(--o) * -1) 0 0 var(--navy), 0 calc(var(--o) * -1) 0 var(--navy), 0 calc(var(--o) * 2) 0 var(--navy), var(--o) var(--o) 0 var(--navy), calc(var(--o) * -1) var(--o) 0 var(--navy), var(--o) calc(var(--o) * -1) 0 var(--navy), calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--navy); }
.stage { grid-area: 1 / 2 / 4 / 3; position: relative; z-index: 2; display: grid; place-items: center; }
.slab-tilt { position: relative; }
.slab { --sw: 84; --sh: 140; position: relative; width: calc(var(--u) * var(--sw)); height: calc(var(--u) * var(--sh)); }
.slab-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.label { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 11); width: calc(var(--u) * 68); height: calc(var(--u) * 13);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 0 calc(var(--u) * 1.5); color: var(--navy); }
.label-in { display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; }
.label textarea { flex: 1; min-width: 0; height: calc(var(--u) * 10); resize: none; border: 0; background: transparent; padding: 2px 0; outline: none;
  font: 500 clamp(10px, calc(var(--u) * 2.5), 13px)/1.25 var(--f-mono); color: var(--navy); overflow: hidden; overflow-wrap: anywhere; caret-color: var(--navy); }
.label textarea::placeholder { font: 400 clamp(10px, calc(var(--u) * 2.4), 12px)/1.3 var(--f-ui); color: #8A6A1A; opacity: 1; }
.label:focus-within { background: repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 2), rgba(195, 126, 2, .14) calc(var(--u) * 2) calc(var(--u) * 2 + 1px)); }
.label-out { display: none; }
.grade-box { display: none; align-items: center; justify-content: center; min-width: calc(var(--u) * 14); height: calc(var(--u) * 11); }
.slab.graded .grade-box { display: flex; }
.slab.graded .label:not(:focus-within) .grade-btn { display: none; }
.slab.graded .label:focus-within .grade-box { display: none; }
.odo { display: flex; align-items: flex-start; height: calc(var(--u) * 10); overflow: hidden; font: 700 calc(var(--u) * 9)/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--navy); letter-spacing: -.04em; }
.odo .col { display: flex; flex-direction: column; }
.odo .col span { height: calc(var(--u) * 10); display: flex; align-items: center; }
.well { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 30); width: calc(var(--u) * 66); height: calc(var(--u) * 98); }
.card3d { position: absolute; inset: 0; transform-origin: 50% 50%; }
.card3d .c-back { position: absolute; inset: 0; display: none; }
.card3d .c-back img { width: 100%; height: 100%; }
.card3d.back .c-back { display: block; }
.card3d.back .c-face { visibility: hidden; }
.c-face { position: absolute; inset: 0; }
.slab.busy .c-back img { animation: scanline .9s steps(9) infinite; }
@keyframes scanline { 50% { filter: brightness(1.15); } }
.weld { position: absolute; left: calc(var(--u) * -9); top: calc(var(--u) * -30); width: calc(var(--u) * 84); height: calc(var(--u) * 140); pointer-events: none; }
.weld-cv { width: 100%; height: 100%; display: block; }
.stamp { position: absolute; right: calc(var(--u) * -26); bottom: calc(var(--u) * -8); width: calc(var(--u) * var(--stw, 28)); height: auto; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.slab.graded .stamp { opacity: 1; }
.gword { position: absolute; right: calc(var(--u) * -26); bottom: calc(var(--u) * -8 + var(--u) * var(--sth, 42) * .28); width: calc(var(--u) * var(--stw, 28)); height: calc(var(--u) * var(--sth, 28) * .72); display: none; align-items: center; justify-content: center;
  font: 700 calc(var(--u) * 2.6)/1 var(--f-ui); color: var(--navy); letter-spacing: .02em; pointer-events: none; }
.slab.graded .gword { display: flex; }
.desc { grid-area: 3 / 1 / 4 / 4; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; align-self: end; pointer-events: none; }
.desc > * { pointer-events: auto; }
.desc .win { width: min(400px, calc(50% - var(--u) * 42 - 24px)); }
.line { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.line.err { color: #B4232A; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nums { display: flex; gap: 10px; margin: 0; }
.nums > div { min-width: 104px; padding: 10px 14px 12px; background: var(--navy); clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
.nums dt { font: 400 11px/1 var(--f-ui); color: var(--acr); text-transform: uppercase; letter-spacing: .05em; }
.nums dd { margin: 6px 0 0; font: 700 30px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--label); }
.nums.pending { visibility: hidden; }
.tag-last { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); z-index: 3; padding: 6px 10px; background: var(--navy); color: var(--acr); font: 400 11px/1 var(--f-ui); text-transform: uppercase; }

/* ------------------------------------------------ the pixel card */
.pc { --pu: var(--u); position: relative; width: calc(var(--pu) * 66); height: calc(var(--pu) * 98); color: var(--navy); user-select: none; }
.well .pc { --pu: var(--u); }
.read-card .pc, .loupe-card .pc { --pu: var(--cu); }
.pc-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc canvas.pxa { position: absolute; left: calc(var(--pu) * 13); top: calc(var(--pu) * 22); width: calc(var(--pu) * 40); height: calc(var(--pu) * 40); background: var(--steel); }
.pc canvas.holo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: hard-light; }
.pc.r-common canvas.holo { mix-blend-mode: normal; }
.img-flag { position: absolute; left: calc(var(--pu) * 13); top: calc(var(--pu) * 56); width: calc(var(--pu) * 40); text-align: center; font: 700 calc(var(--pu) * 2.2)/1 var(--f-ui); color: var(--cream); background: var(--navy); padding: 3px 0; z-index: 2; }
.tcg-head { position: absolute; left: calc(var(--pu) * 11.5); top: calc(var(--pu) * 9); width: calc(var(--pu) * 43); height: calc(var(--pu) * 8); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tcg-name { font: 400 calc(var(--pu) * 5)/1 var(--f-px); white-space: nowrap; overflow: hidden; text-overflow: clip; min-width: 0; }
.tcg-hp { font: 700 calc(var(--pu) * 3.6)/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcg-hp small { font: 700 calc(var(--pu) * 1.9)/1 var(--f-ui); margin-right: 2px; color: #B4232A; }
.tcg-atk { position: absolute; left: calc(var(--pu) * 11); top: calc(var(--pu) * 68); width: calc(var(--pu) * 44); height: calc(var(--pu) * 16); margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(3, 1fr); }
.tcg-atk li { display: flex; align-items: center; gap: calc(var(--pu) * 1); min-width: 0; }
.tcg-atk .ti { width: calc(var(--pu) * 3.2); height: calc(var(--pu) * 3.2); flex: none; }
.atk-n { flex: 1; min-width: 0; font: 400 calc(var(--pu) * 2.3)/1 var(--f-mono); white-space: nowrap; overflow: hidden; }
.atk-n small { margin-left: 4px; font: 600 calc(var(--pu) * 2)/1 var(--f-num); color: var(--steel-d); }
.atk-d { font: 700 calc(var(--pu) * 3.2)/1 var(--f-num); font-variant-numeric: tabular-nums; }
.tcg-atk li.na { opacity: .5; }
.tcg-foot { position: absolute; left: calc(var(--pu) * 12.5); top: calc(var(--pu) * 88); width: calc(var(--pu) * 41); height: calc(var(--pu) * 5); display: flex; align-items: center; justify-content: space-between; font: 700 calc(var(--pu) * 2.2)/1 var(--f-num); font-variant-numeric: tabular-nums; }
.tcg-weak small, .tcg-rar { font: 700 calc(var(--pu) * 1.9)/1 var(--f-ui); letter-spacing: .03em; }
.tcg-weak small { margin-right: 4px; color: var(--steel-d); }
.pc [data-f] { transition: none; }
.pc.hl-hp .tcg-hp, .pc.hl-atk .tcg-atk, .pc.hl-weak .tcg-weak, .pc.hl-rar .tcg-rar { background: var(--label); box-shadow: 0 0 0 3px var(--label); }

/* ------------------------------------------------ scene titles */
.tag { margin: 0 0 18px; }
.tag-k { display: inline-block; margin: 0; padding: 6px 14px 8px; background: var(--navy); color: var(--label); font: 400 clamp(44px, 6vw, 76px)/.9 var(--f-px); }
.tag-s { margin: 10px 0 0; max-width: 34ch; font-size: 16px; color: var(--navy); }

/* ------------------------------------------------ read */
.read { padding: 120px 28px; }
.read-stage { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto 1fr; gap: 24px 48px; align-items: center; }
.tag-read { grid-area: 1 / 1 / 2 / 4; text-align: center; }
.tag-read .tag-s { margin-inline: auto; }
.read-card { grid-area: 2 / 2 / 3 / 3; position: relative; z-index: 2; }
.calls { display: contents; list-style: none; }
.call { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 14px 16px 16px; background: var(--cream); color: var(--navy); max-width: 340px;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
.call[data-f=hp], .call[data-f=rar] { grid-column: 3; justify-self: start; }
.call[data-f=atk], .call[data-f=weak] { grid-column: 1; justify-self: end; }
.call[data-f=hp] { grid-row: 2; align-self: start; margin-top: 20px; }
.call[data-f=rar] { grid-row: 2; align-self: end; margin-bottom: 30px; }
.call[data-f=atk] { grid-row: 2; align-self: center; margin-top: 60px; }
.call[data-f=weak] { grid-row: 2; align-self: end; margin-bottom: 30px; }
.call[data-f=atk] { align-self: start; margin-top: 150px; }
.call-i { width: 32px; height: 32px; grid-row: span 3; }
.call-k { font: 700 13px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--brown); }
.call-v { font: 700 22px/1.15 var(--f-num); font-variant-numeric: tabular-nums; }
.call-v small { display: block; font: 500 13px/1.3 var(--f-num); color: var(--steel-d); }
.call-d { font-size: 13px; line-height: 1.35; color: var(--steel-d); }
.call.on { background: var(--label); }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.wires path { fill: none; stroke: var(--cream); stroke-width: 4; stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--draw))); }
.wires rect { fill: var(--cream); }

/* ------------------------------------------------ loupe */
.loupe-sc { padding: 120px 28px; }
.loupe-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.loupe-card-wrap { position: relative; width: calc(var(--cu) * 66); height: calc(var(--cu) * 98); }
.loupe-sc.lens-on .loupe-card-wrap { cursor: none; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); min-width: 34px; height: 30px; padding: 0 6px 3px; display: grid; place-items: center; background: var(--cream); color: var(--navy); font: 700 15px/1 var(--f-num);
  box-shadow: inset 0 -3px 0 rgba(16, 22, 82, .25); clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
.pin.g-clean { background: var(--label); } .pin.g-solid { background: var(--acr); } .pin.g-risky { background: var(--gold); } .pin.g-rekt { background: #FF9C9E; }
.pin.on { outline: 3px solid var(--label); }
.pin::after { content: attr(data-n); position: absolute; left: 100%; top: 50%; transform: translate(6px, -50%); padding: 4px 6px; background: var(--navy); color: var(--cream); font: 400 10px/1 var(--f-ui); text-transform: uppercase; white-space: nowrap; display: none; }
.pin.on::after { display: block; }
.lens { --lu: calc(var(--cu) * 1.5); position: absolute; left: 0; top: 0; z-index: 4; width: calc(var(--lu) * var(--lw, 64)); height: calc(var(--lu) * var(--lh, 64)); pointer-events: none; }
.lens-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.lens-in { position: absolute; left: calc(var(--lu) * (var(--lcx, 26) - var(--lr, 18))); top: calc(var(--lu) * (var(--lcy, 26) - var(--lr, 18))); width: calc(var(--lu) * var(--lr, 18) * 2); height: calc(var(--lu) * var(--lr, 18) * 2); border-radius: 50%; overflow: hidden; background: var(--steel); z-index: 1; }
.lz { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lz .loupe-card .pc { --pu: var(--cu); }
.subs .tag-s { color: var(--navy); }
.sub-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sub { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; gap: 4px 14px; padding: 12px 14px; background: var(--cream); color: var(--navy);
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
.sub-g { grid-row: span 3; display: grid; place-items: center; background: var(--navy); color: var(--label); font: 700 24px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.sub-g.na { font: 700 13px/1 var(--f-ui); color: var(--acr); }
.sub-n { font: 700 14px/1.2 var(--f-ui); text-transform: uppercase; }
.sub-n small { margin-left: 8px; font: 400 14px/1.2 var(--f-body); text-transform: none; color: var(--steel-d); }
.sub-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 12px; }
.sub-bar i { background: #C5B549; opacity: .35; }
.sub-bar i.on { opacity: 1; }
.sub.g-clean .sub-bar i.on { background: var(--clean); } .sub.g-solid .sub-bar i.on { background: var(--solid); } .sub.g-risky .sub-bar i.on { background: var(--risky); } .sub.g-rekt .sub-bar i.on { background: var(--rekt); }
.sub-w { font: 500 12px/1.2 var(--f-num); font-variant-numeric: tabular-nums; color: var(--steel-d); }
.sub-foot { margin: 14px 0 0; font-size: 14px; color: var(--navy); }
.sub-foot .lnk { color: var(--navy); }
.lnk { display: inline-block; padding: 7px 0; color: var(--label); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ------------------------------------------------ binder */
.binder { padding: 110px 28px 90px; text-align: center; }
.tag-binder .tag-s { margin-inline: auto; }
.binder-book { --bu: 8px; position: relative; margin: 6px auto 0; width: calc(var(--bu) * var(--bw, 120)); height: calc(var(--bu) * var(--bh, 70)); overflow: hidden; }
.binder-book.half { width: calc(var(--bu) * (var(--bw, 120) / 2 + 5)); }
.binder-art, .page { position: absolute; left: 0; top: 0; width: calc(var(--bu) * var(--bw, 120)); height: calc(var(--bu) * var(--bh, 70)); max-width: none; }
@media (max-width: 1100px) { .binder-book { --bu: 6px; } }
@media (max-width: 759px) { .binder-book { --bu: 5px; } }
.tabs { display: flex; justify-content: center; gap: 8px; margin: 18px 0 14px; flex-wrap: wrap; }
.tab:not(.on) { --k: var(--acr); --kd: var(--acr-d); --kl: var(--acr-l); }
.tab:not(.on):hover { --k: var(--acr-l); }
.sel-src { font: 400 11px/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--steel-d); }
.sleeve { position: absolute; padding: 0; border: 0; background: transparent; display: block; }
.sleeve canvas.pxa { position: absolute; left: 8.333%; top: 6.667%; width: 83.333%; height: 73.333%; }
.sleeve .sl-g { position: absolute; right: -4px; top: -6px; min-width: 26px; height: 24px; padding: 0 5px; display: grid; place-items: center; font: 700 14px/1 var(--f-num); color: var(--navy); background: var(--cream); }
.sl-g.g-clean { background: var(--label); } .sl-g.g-solid { background: var(--acr); } .sl-g.g-risky { background: var(--gold); } .sl-g.g-rekt { background: #FF9C9E; }
.sleeve .sl-n { position: absolute; left: 0; right: 0; bottom: 2%; font: 400 min(10px, calc(var(--bu) * 12 / var(--n, 6)))/1 var(--f-ui); color: var(--navy); white-space: nowrap; overflow: hidden; text-transform: uppercase; }
.sleeve:hover canvas.pxa, .sleeve.on canvas.pxa { outline: 3px solid var(--label); }
.invite { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 12px; justify-items: center; font-size: 15px; }
.page-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.pg-n { font: 700 16px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--navy); }
.sel { display: grid; gap: 10px; justify-items: center; max-width: 560px; margin: 18px auto 0; }
.sel-name { font: 400 30px/1 var(--f-px); }
.ca-line { border: 0; background: transparent; padding: 4px 0; font: 400 13px/1.4 var(--f-mono); overflow-wrap: anywhere; text-align: center; color: inherit; }
.ca-line.copied::after { content: " copied"; font: 700 11px/1 var(--f-ui); color: var(--label-d); }
.sel-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.perk { margin: 18px auto 0; max-width: 46ch; font-size: 14px; color: var(--navy); }

/* ------------------------------------------------ ending */
.ending { min-height: 92svh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 100px 20px 60px; }
.end-slab { position: relative; width: calc(var(--u) * 84); height: calc(var(--u) * 140); }
.end-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.end-label { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 11); width: calc(var(--u) * 68); height: calc(var(--u) * 13); display: flex; align-items: center; gap: 6px; padding: 0 calc(var(--u) * 1.5); color: var(--navy); }
.end-label textarea { flex: 1; min-width: 0; height: calc(var(--u) * 10); resize: none; border: 0; background: transparent; outline: none; font: 500 clamp(10px, calc(var(--u) * 2.5), 13px)/1.25 var(--f-mono); color: var(--navy); overflow: hidden; }
.end-label textarea::placeholder { font: 400 12px/1.3 var(--f-ui); color: #8A6A1A; opacity: 1; }
.end-well { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 29); width: calc(var(--u) * 68); height: calc(var(--u) * 100); display: grid; place-items: center; }
.end-ghost { position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * 1); width: calc(var(--u) * 66); height: calc(var(--u) * 98); opacity: .35; }
.end-t { position: relative; margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 3); background: var(--navy); font: 400 calc(var(--u) * 12)/.85 var(--f-px); color: var(--label); text-align: center; }
.end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ------------------------------------------------ footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 26px 28px 30px; background: transparent; color: var(--navy); font-size: 13px; }
.foot .lnk { color: var(--navy); }
.honest { margin: 0; max-width: 62ch; }
.foot-r { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.foot .ca-line { color: var(--navy); text-align: left; }
.foot .ca-k { margin-right: 6px; color: var(--navy); font-weight: 700; }

/* ------------------------------------------------ 404 */
.nf { min-height: 100svh; display: grid; place-items: center; padding: 100px 20px 40px; text-align: center; position: relative; overflow: hidden; isolation: isolate; background: transparent; }
.nf-in { display: grid; justify-items: center; gap: 18px; }
.nf-pic { margin: 0; position: relative; width: calc(var(--u) * var(--cw, 60)); }
.nf-pic img { width: 100%; height: auto; }
.nf-code { position: absolute; left: 22%; right: 14%; top: 7.5%; margin: 0; text-align: center; font: 400 calc(var(--u) * 12)/1 var(--f-px); color: var(--navy); }
.nf-p { margin: 0; font-size: 17px; }

/* ------------------------------------------------ docs */
.doc { max-width: 900px; margin: 0 auto; padding: 120px 22px 60px; position: relative; }
.docs-page { background: var(--plum); }
.scene-t { margin: 0 0 12px; font: 400 clamp(52px, 8vw, 96px)/.9 var(--f-px); color: var(--label); }
.scene-s { margin: 0 0 30px; max-width: 60ch; font-size: 17px; }
.sheet { margin: 0 0 18px; }
.sheet h2 { margin: 0 0 10px; font: 400 40px/1 var(--f-px); }
.sheet h3 { margin: 18px 0 6px; font: 700 14px/1.2 var(--f-ui); text-transform: uppercase; }
.sheet p, .sheet li { font-size: 15px; line-height: 1.55; }
.sheet ul { padding-left: 20px; }
.sheet code, .fx { font: 500 13px/1.4 var(--f-mono); background: var(--cream-2); padding: 1px 5px; overflow-wrap: anywhere; }
.fx { display: block; padding: 10px 12px; margin: 8px 0 12px; }
.tbl-w { overflow-x: auto; }
.ft { width: 100%; border-collapse: collapse; font: 500 14px/1.35 var(--f-num); font-variant-numeric: tabular-nums; }
.ft th { text-align: left; font: 700 11px/1 var(--f-ui); text-transform: uppercase; padding: 8px 8px; border-bottom: 3px solid var(--navy); }
.ft td { padding: 8px; border-bottom: 2px solid var(--line); vertical-align: top; }
.ft .pen { text-align: right; }
.muted { color: var(--brown); font-weight: 400; }
.doc-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.doc-g { display: grid; place-items: center; width: 54px; height: 54px; background: var(--navy); color: var(--label); font: 700 28px/1 var(--f-num); }

/* ------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .bench-word { font-size: clamp(96px, 13vw, 160px); }
}
@media (max-width: 899px) {
  .top { padding: 10px 12px; gap: 8px; }
  .brand-word { font-size: 32px; } .brand-mark { width: 32px; height: 32px; }
  .top .key span:not(.x-t) { display: none; } .top .key { min-width: 40px; padding: 0 10px 4px; min-height: 40px; }
  .top .key.ico span { display: none; } .top .key.docs-l span { display: inline; }
  .ca-chip { display: none; }
  .bench { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 76px 16px 36px; }
  .bench-word { order: -1; justify-content: center; gap: .08em; font-size: clamp(76px, 25vw, 120px); }
  .bench-word span { padding: 0 !important; }
  .desc { flex-direction: column; align-items: stretch; width: 100%; max-width: 520px; }
  .desc .win { width: 100%; }
  .nums { justify-content: space-between; } .nums > div { flex: 1; min-width: 0; } .nums dd { font-size: 24px; }
  .mob-ca { display: flex !important; }
  .tag-last { display: none !important; }
  .stamp, .gword { --u2: 3px; right: -10px; }
  .stamp { width: calc(var(--u2) * var(--stw, 36)); bottom: calc(var(--u) * -16); }
  .gword { width: calc(var(--u2) * var(--stw, 36)); height: calc(var(--u2) * var(--sth, 42) * .72); bottom: calc(var(--u) * -16 + var(--u2) * var(--sth, 42) * .28); font-size: 8px; }
  .bench .stage { margin-bottom: calc(var(--u) * 12); }
  .read, .loupe-sc { padding: 84px 16px; }
  .read-stage { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .tag-read, .read-card, .call { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; justify-self: stretch !important; max-width: none; }
  .read-card { justify-self: center !important; }
  .wires { display: none; }
  .loupe-in { grid-template-columns: 1fr; justify-items: center; gap: 30px; }
  .binder { padding: 84px 16px 70px; }
  .foot { padding: 22px 16px 28px; }
}
.mob-ca { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
.bands-fixed { position: fixed !important; z-index: 0 !important; }
.docs-page .doc, .docs-page .foot { position: relative; z-index: 1; }
.docs-page .doc { color: var(--navy); }
.docs-page .sheet { color: var(--navy); padding: 22px 26px; }
.nf .nf-p { color: var(--navy); }

/* ------------------------------------------------ how it works: the film (handheld screen in a navy bezel, pixel keys) */
.how { padding: 110px 28px 100px; text-align: center; }
.tag-how .tag-s { margin-inline: auto; color: var(--navy); }
.film { margin: 34px auto 0; max-width: 1040px; padding: 14px; background: var(--navy); display: grid; gap: 12px;
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); }
.film-scr { position: relative; aspect-ratio: 16 / 9; background: #608484; box-shadow: 0 0 0 4px var(--acr-d); }
.film-scr video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.film-big { position: absolute; inset: 0; margin: auto; width: max-content; height: 64px; min-height: 64px; padding: 0 26px 6px; gap: 12px; font-size: 16px; }
.film-big i { width: 0; height: 0; border-left: 16px solid var(--navy); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.film.is-on .film-big { opacity: 0; pointer-events: none; }
.film-bar { display: flex; align-items: center; gap: 10px; }
.film-pp { width: 44px; padding: 0 0 3px; }
.ic-play { width: 0; height: 0; border-left: 11px solid var(--navy); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.film.is-on .ic-play { width: 11px; height: 13px; border: 0; background: linear-gradient(90deg, var(--navy) 0 4px, transparent 4px 7px, var(--navy) 7px 11px); }
.film-tl { position: relative; flex: 1; height: 34px; cursor: url(/assets/px/cursor.png) 4 2, pointer; touch-action: none; }
.film-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; bottom: 11px; background: #4E7272; box-shadow: inset 0 3px 0 #101652; }
.film-tl i, .film-tl b { position: absolute; left: 0; top: 11px; bottom: 11px; width: 0; }
.film-tl i { background: var(--steel-d); }
.film-tl b { background: var(--label); box-shadow: inset 0 -3px 0 var(--label-d); }
.film-tl:focus-visible { outline: 3px solid var(--label); outline-offset: 2px; }
.film-t { font: 700 14px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--cream); white-space: nowrap; }
@media (max-width: 760px) { .how { padding: 80px 16px 60px; } .film { padding: 8px; } .film-bar { flex-wrap: wrap; } .film-tl { flex-basis: 100%; order: -1; } .film-t { margin-right: auto; } }