@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* ---------- Darkroom (2026-10-18, plans/ui-revamp-2): warm blacks and paper; colour belongs to the prints ---------- */
:root {
  /* surfaces, one step apart (no tints, no glass) and hairlines */
  --k0: #0b0b0c; --k1: #131315; --k2: #1b1b1e; --k3: #26262a;
  --rule: #232326; --rule2: #36363b;
  /* text: paper, three steps; nothing dimmer than --t3 (5.6:1 on the page) */
  --t1: #f3f1ec; --t2: #b8b5ad; --t3: #8b8983;
  /* states, as text and small marks */
  --live: #ff453a; --up: #46d39a; --down: #ff6b6b;
  /* rarity: process inks. 0 key, 1 cyan, 2 violet, 3 yellow, 4 magenta (Legend: cyan and magenta out of register) */
  --r0: #8b8983; --r1: #19b7e8; --r2: #9d7bff; --r3: #ffd60a; --r4: #ff3d9a;
  /* 5 Unique: a 1 of 1, in the founder's colour (the same #1afe49 in every game) */
  --r5: #1afe49; --r5-g: rgba(26,254,73,.38);
  /* corners: art 2, tags 6, controls 8, sheets and dialogs 14, people round */
  --ra: 2px; --rt: 6px; --rc: 8px; --rs: 14px;
  /* the one shadow, for what floats (sheets, menus, toasts, the selection bar) */
  --shadow: 0 18px 48px rgba(0,0,0,.55);
  /* THE HEADING FACE: every page title, print name, drop name, dialog title and the wordmark use it. The founder is
     choosing between two sharp grotesks in the spirit of OpenSea's and Blur's type (2026-10-18): Mona Sans here, Schibsted
     Grotesk as fonts.css's "darkroom-schibsted" (?fonts). Picking the face is this line (and its weight next to it). */
  --font-head: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-head-wt: 700; --font-head-ls: -.03em;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* the old names, on the new tokens (so every older rule takes the new look) */
  --bg: var(--k0); --panel: var(--k1); --panel2: var(--k2); --line: var(--rule); --line2: var(--rule2);
  --text: var(--t1); --dim: var(--t3); --dim2: var(--t3); --ink: #f2b53a;
  /* the rainbow is gone: what used it (meters, the old glow buttons, gradient text) is paper now */
  --grad: linear-gradient(90deg, var(--t1), var(--t1));
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--t1); color: var(--k0); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.hidden { display: none !important; }
.bg-aura { position: fixed; inset: -20% -10% auto; height: 80vh; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 50% at 20% 20%, rgba(155,93,229,.22), transparent 70%), radial-gradient(35% 45% at 80% 10%, rgba(0,187,249,.16), transparent 70%), radial-gradient(30% 40% at 55% 40%, rgba(255,46,136,.10), transparent 70%);
  display: none; }
@keyframes aura { to { transform: translate3d(3%, 4%, 0) scale(1.06); } }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 28px;
  background: rgba(6,6,8,.66); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: var(--font-head-wt); font-size: 23px; letter-spacing: var(--font-head-ls); color: var(--t1); justify-self: start; }
.mark { width: 20px; height: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mark i { border-radius: var(--ra); }
.mark i:nth-child(1) { background: var(--live); } .mark i:nth-child(2) { background: var(--r1); animation-delay: -2s; }
.mark i:nth-child(3) { background: var(--ink); animation-delay: -4s; } .mark i:nth-child(4) { background: var(--r2); animation-delay: -6s; }
@keyframes mark { 0%, 100% { filter: none; transform: none; } 25% { filter: hue-rotate(90deg); transform: scale(.8); } 50% { filter: hue-rotate(180deg); } }
nav { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: var(--rt); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
nav a { position: relative; z-index: 1; padding: 7px 18px; border-radius: var(--rt); color: var(--dim); font-weight: 500; font-size: 14px; transition: color .25s; white-space: nowrap; }
nav a:hover { color: var(--t1); }
nav a.on { color: var(--k0); }
.nav-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: var(--rt); background: var(--t1); box-shadow: 0 4px 20px rgba(255,255,255,.18); transition: left .45s var(--ease), width .45s var(--ease); }
.wallet { justify-self: end; display: flex; align-items: center; gap: 10px; }
a.inkpill { text-decoration: none; }
.inkpill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: var(--rt); background: rgba(255,210,63,.07); border: 1px solid rgba(255,210,63,.22); color: var(--ink); font: 600 13px var(--mono); font-variant-numeric: tabular-nums; }
:root { --gem: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%20-1%2026%2036%22%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2212.00%2C0.00%200.00%2C15.00%2010.50%2C17.50%22%20fill%3D%22%23fff3bf%22%2F%3E%3Cpolygon%20points%3D%2212.00%2C0.00%2010.50%2C17.50%2024.00%2C15.00%22%20fill%3D%22%23ffc42f%22%2F%3E%3Cpolygon%20points%3D%220.00%2C15.00%2012.00%2C34.00%2010.50%2C17.50%22%20fill%3D%22%23ee9807%22%2F%3E%3Cpolygon%20points%3D%2210.50%2C17.50%2012.00%2C34.00%2024.00%2C15.00%22%20fill%3D%22%23b16100%22%2F%3E%3Cpolyline%20points%3D%220.00%2C15.00%2012.00%2C0.00%2024.00%2C15.00%22%20fill%3D%22none%22%20stroke%3D%22%23fffbe6%22%20stroke-opacity%3D%22.8%22%20stroke-width%3D%22.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpolygon%20points%3D%225.00%2C13.00%2011.00%2C4.50%2011.00%2C7.50%206.00%2C14.50%22%20fill%3D%22%23fff%22%20opacity%3D%22.6%22%2F%3E%3Cpolygon%20points%3D%2212.00%2C0.00%2024.00%2C15.00%2012.00%2C34.00%200.00%2C15.00%22%20fill%3D%22none%22%20stroke%3D%22%233a1a00%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); --gem-ar: 0.722; }
/* ink's mark: a gold topaz octahedron (founder's picks: gold topaz, then the octahedron; options on #/gems) */
.inkpill::before, .ink::before, i.gem { content: ''; width: calc(16px * var(--gem-ar, .625)); height: 16px; flex: none; display: inline-block; background: var(--gem) center / contain no-repeat; filter: drop-shadow(0 0 5px rgba(255,180,30,.5)); }
@keyframes glint { 0%, 90%, 100% { filter: drop-shadow(0 0 5px rgba(255,180,30,.5)); transform: none; } 94% { filter: brightness(1.6) drop-shadow(0 0 8px rgba(255,255,255,.9)); transform: scale(1.18) rotate(-6deg); } }
i.gem { width: calc(22px * var(--gem-ar, .625)); height: 22px; }
.ink { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font: 600 1em var(--mono); font-variant-numeric: tabular-nums; }
.ink::before { width: calc(1em * var(--gem-ar, .625)); height: 1em; }
.ink { gap: .32em; }
/* an ink amount sits on the line's baseline wherever it is: the empty gem is centred on the number but kept out of the
   baseline (as the first flex item, it set the baseline at its own bottom edge, which lifted the number above the words
   around it; the founder, 2026-10-27, "make sure this is fixed everywhere on the site") */
.ink { align-items: baseline; }
.ink::before { align-self: center; }
.me { position: relative; display: block; }
.orb { display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 18px -4px rgba(255,255,255,.25); }
.me .badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--live); color: var(--t1); font: 600 12px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--bg); }

main { max-width: 1360px; margin: 0 auto; padding: 0 28px 40px; min-height: 80vh; }
.page { animation: page .32s var(--ease); }
@keyframes page { from { opacity: 0; transform: translateY(12px); } }
/* (a page's entrance: a short fade from most of the way there, nothing sliding; the same page drawn again, .still, has
   none: a member's report, 2026-10-18, the page jittered on every redraw) */
#view > .page { animation: pagein .16s ease-out; }
#view > .page.still { animation: none; }
@keyframes pagein { from { opacity: .55; } }
.devnote { position: relative; z-index: 19; padding: 7px 16px; font-size: 12.5px; line-height: 1.4; text-align: center; color: #f3d9a4; background: rgba(120, 84, 20, .28); border-bottom: 1px solid rgba(240, 180, 80, .22); }
.devnote b { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-right: 6px; padding: 2px 6px; border-radius: var(--rc); background: rgba(240, 180, 80, .2); color: #ffd98a; }
.pausenote { color: #ffd2c4; background: rgba(150, 50, 30, .32); border-bottom-color: rgba(255, 120, 80, .3); }
.pausenote b { background: rgba(255, 120, 80, .22); color: #ffb8a0; }
.devnote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.devwarn { color: #f3d9a4; }
.foot { color: var(--dim2); font-size: 12.5px; text-align: center; padding: 40px 20px 50px; border-top: 1px solid var(--line); margin-top: 40px; }

/* ---------- type, buttons, chips ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--t3); font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(255,46,85,0); } 100% { box-shadow: 0 0 0 0 rgba(255,46,85,0); } }
.grad-text { background: var(--grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes gradmove { to { background-position: 300% 0; } }
.page-head { padding: 54px 0 26px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }
.page-head h1 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 44px); line-height: 1.02; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); }
.page-head p { margin: 12px 0 0; color: var(--dim); max-width: 560px; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 64px 0 18px; }
.sec-head h2 { margin: 0; font: var(--font-head-wt) 19px/1.25 var(--display); letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; }
.sec-head a, .sec-head .aside { color: var(--dim); font-size: 14px; transition: color .2s; }
.sec-head a:hover { color: var(--t1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--rc); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--line2); color: var(--t1); transition: transform .18s var(--ease), background .2s, box-shadow .25s, opacity .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.1); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: var(--t1); color: var(--k0); border-color: var(--t1); box-shadow: none; }
.btn.glow { color: var(--k0); border-color: var(--t1); background: var(--t1); box-shadow: none; }
.btn.sm { height: 34px; padding: 0 13px; border-radius: var(--rc); font-size: 13px; }
.btn.danger { color: var(--down); }
.btn:disabled { opacity: .35; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border-radius: var(--rt); border: 1px solid var(--line); background: var(--panel); color: var(--dim); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { color: var(--t1); border-color: var(--line2); }
.chip.on { background: var(--t1); color: var(--k0); border-color: var(--t1); }
.chip .n { opacity: .55; font-family: var(--mono); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.toolbar .grow { flex: 1; }
.field, select.field { height: 38px; padding: 0 14px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); color: var(--text); outline: none; transition: border-color .2s, background .2s; }
.field:focus { border-color: rgba(255,255,255,.35); background: var(--panel2); }
select.field { padding-right: 30px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%), linear-gradient(135deg, var(--t3) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
select.field option { background: #111; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.seg button { height: 32px; padding: 0 14px; border-radius: var(--rc); border: 0; background: none; color: var(--dim); cursor: pointer; font-weight: 500; font-size: 13.5px; transition: all .2s; }
.seg button.on { background: rgba(255,255,255,.12); color: var(--t1); }
.pulsort { margin: 0 0 12px; }   /* the Pulped board's Count / Ink switch (pages.js pulped) */
.empty { padding: 60px 20px; text-align: center; color: var(--dim); border: 1px dashed var(--line2); border-radius: var(--rc); }
.empty b { display: block; color: var(--t1); font-size: 18px; margin-bottom: 6px; }

/* ---------- rarity heat ---------- */
.h0 { --hc: rgba(255,255,255,.4); --hg: rgba(255,255,255,.12); }
.h1 { --hc: var(--r1); --hg: rgba(76,201,240,.35); }
.h2 { --hc: var(--r2); --hg: rgba(179,136,255,.4); }
.h3 { --hc: var(--ink); --hg: rgba(255,210,63,.45); }
.h4 { --hc: var(--r4); --hg: rgba(255,106,213,.5); }
.odds { display: inline-flex; align-items: center; gap: 6px; color: var(--hc); font: 600 12px var(--mono); letter-spacing: .01em; white-space: nowrap; }
.odds::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 8px var(--hc); }
.h4 .odds, .odds.h4 { background: var(--grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.h4 .odds::before, .odds.h4::before { background: var(--r4); }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.card { position: relative; border-radius: var(--rc); padding: 9px; cursor: pointer; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--line);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform .5s var(--ease), border-color .25s, box-shadow .35s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.card:hover { --ty: -4px; border-color: var(--line2); box-shadow: 0 24px 60px -18px rgba(0,0,0,.8), 0 0 50px -16px var(--hg); transition: transform .12s linear, border-color .25s, box-shadow .35s; }
.card.h3, .card.h4 { border-color: color-mix(in srgb, var(--hc) 35%, transparent); }
.card.h4::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--a), var(--live), var(--r2), var(--r1), var(--up), var(--ink), var(--live));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes spin { to { --a: 360deg; } }
.card-art { position: relative; aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: #000; }
.card-art img, .card-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.card-art img { opacity: 0; transition: opacity .5s ease, transform .6s var(--ease); }
.card-art img.ready { opacity: 1; }
.card:hover .card-art img { transform: scale(1.03); }
.card-art .skel { position: absolute; inset: 0; background: var(--k1); }
@keyframes skel { to { background-position: -250% 0; } }
.px { image-rendering: pixelated; }
/* a piece waiting for the art's code with no thumbnail to show meanwhile (app.js liveLater): the cards' shimmer */
canvas.artwait { background: var(--k1); }
.glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 50%); }
.card:hover .glare { opacity: 1; }
.fbadges { position: absolute; z-index: 4; top: 8px; left: 8px; right: 40px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.fbadge { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center;
  font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t1); background: rgba(8,8,12,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); }
.fbadge.foil { background: linear-gradient(90deg, rgba(255,46,136,.6), rgba(0,187,249,.6)); }
.fbadge.blue { background: rgba(42,88,150,.8); }
.fbadge.mis { background: rgba(200,30,60,.75); }
/* First Press: a print from a launch lottery's pack (the founder, 2026-10-27: a mark the packs bought after don't give).
   On a card it's a seal in the art's bottom-right corner, apart from the special traits (the founder, 2026-10-29: "along
   the bottom right corner, dont take up so much space, make it look really nice"; then "make it a pixel art seal"): a
   17-pixel gold rosette, lit from the top left, round a black enamel centre with a gold "1", drawn at whole pixels (2 to
   one on a computer) like the prints it sits on, with a hard pixel shadow. When the card comes in (each a beat after the
   last) and on hover a pixel star twinkles once on its rim: never a loop, the site keeps its effects still unless
   touched. In a line of text (the print page, the launch card, a sealed pack for sale: .fbadge.fpress) the same seal,
   one to one, before the words. The like heart shares the corner (always shown on phones): on a First Press card it sits
   just left of the seal, centred on it */
:root { --fpseal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' shape-rendering='crispEdges'%3E%3Cpath fill='%237c4c0e' d='M8 0h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM9 1h1v1h-1zM11 1h1v1h-1zM12 1h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM10 2h1v1h-1zM12 2h1v1h-1zM3 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM1 5h1v1h-1zM2 6h1v1h-1zM1 7h1v1h-1zM0 8h1v1h-1zM1 9h1v1h-1zM2 10h1v1h-1zM1 11h1v1h-1zM1 12h1v1h-1zM2 12h1v1h-1z'/%3E%3Cpath fill='%23f6cf5c' d='M8 1h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM11 3h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM3 10h1v1h-1zM2 11h1v1h-1zM3 11h1v1h-1z'/%3E%3Cpath fill='%23fff4c4' d='M5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM3 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1z'/%3E%3Cpath fill='%23d99a2a' d='M12 3h1v1h-1zM11 4h1v1h-1zM12 4h1v1h-1zM13 4h1v1h-1zM12 5h1v1h-1zM13 5h1v1h-1zM14 5h1v1h-1zM13 6h1v1h-1zM4 11h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM6 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%231a1005' d='M13 3h1v1h-1zM14 4h1v1h-1zM15 4h1v1h-1zM15 5h1v1h-1zM14 6h1v1h-1zM15 7h1v1h-1zM16 8h1v1h-1zM15 9h1v1h-1zM14 10h1v1h-1zM15 11h1v1h-1zM14 12h1v1h-1zM15 12h1v1h-1zM3 13h1v1h-1zM13 13h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM7 15h1v1h-1zM9 15h1v1h-1zM11 15h1v1h-1zM12 15h1v1h-1zM8 16h1v1h-1z'/%3E%3Cpath fill='%233e2606' d='M6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM5 5h1v1h-1zM11 5h1v1h-1zM4 6h1v1h-1zM12 6h1v1h-1zM4 7h1v1h-1zM12 7h1v1h-1zM4 8h1v1h-1zM12 8h1v1h-1zM4 9h1v1h-1zM12 9h1v1h-1zM4 10h1v1h-1zM12 10h1v1h-1zM5 11h1v1h-1zM11 11h1v1h-1zM6 12h1v1h-1zM7 12h1v1h-1zM8 12h1v1h-1zM9 12h1v1h-1zM10 12h1v1h-1z'/%3E%3Cpath fill='%232e2a3a' d='M6 5h1v1h-1zM7 5h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23f8d562' d='M8 5h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM8 7h1v1h-1zM8 8h1v1h-1zM8 9h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1z'/%3E%3Cpath fill='%2316141c' d='M9 5h1v1h-1zM10 5h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM11 7h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM10 8h1v1h-1zM11 8h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM10 9h1v1h-1zM11 9h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM10 10h1v1h-1zM11 10h1v1h-1zM6 11h1v1h-1zM7 11h1v1h-1z'/%3E%3Cpath fill='%2307060a' d='M9 6h1v1h-1zM9 7h1v1h-1zM9 8h1v1h-1zM9 9h1v1h-1zM8 11h1v1h-1zM9 11h1v1h-1zM10 11h1v1h-1z'/%3E%3Cpath fill='%2393570f' d='M13 7h1v1h-1zM14 7h1v1h-1zM13 8h1v1h-1zM14 8h1v1h-1zM15 8h1v1h-1zM13 9h1v1h-1zM14 9h1v1h-1zM13 10h1v1h-1zM12 11h1v1h-1zM13 11h1v1h-1zM14 11h1v1h-1zM11 12h1v1h-1zM12 12h1v1h-1zM13 12h1v1h-1zM7 13h1v1h-1zM8 13h1v1h-1zM9 13h1v1h-1zM10 13h1v1h-1zM11 13h1v1h-1zM12 13h1v1h-1zM7 14h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM11 14h1v1h-1zM8 15h1v1h-1z'/%3E%3C/svg%3E"); }
@keyframes fptwinkle { 0% { opacity: 0; } 12% { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 26% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M1 3h1v1h-1zM3 1h1v1h-1zM2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM5 3h1v1h-1zM3 5h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 42% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M0 3h1v1h-1zM3 0h1v1h-1zM1 3h1v1h-1zM3 1h1v1h-1zM2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM5 3h1v1h-1zM3 5h1v1h-1zM6 3h1v1h-1zM3 6h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 62% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M1 3h1v1h-1zM3 1h1v1h-1zM2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM5 3h1v1h-1zM3 5h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 78% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 92%, 100% { opacity: 0; background-image: none; } }
@keyframes fptwinkle2 { 0% { opacity: 0; } 12% { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 26% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M1 3h1v1h-1zM3 1h1v1h-1zM2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM5 3h1v1h-1zM3 5h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 42% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M0 3h1v1h-1zM3 0h1v1h-1zM1 3h1v1h-1zM3 1h1v1h-1zM2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM5 3h1v1h-1zM3 5h1v1h-1zM6 3h1v1h-1zM3 6h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 62% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M1 3h1v1h-1zM3 1h1v1h-1zM2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1zM5 3h1v1h-1zM3 5h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 78% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff1b8' d='M2 3h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM3 4h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3C/svg%3E"); } 92%, 100% { opacity: 0; background-image: none; } }
/* (it moves: a button you drag to any corner, fp-tl/tr/bl/br, the art's other corner marks making room: app.js fpDrag) */
.card-art { --fpi: 8px; --fpw: 34px; }
.fpmark { position: absolute; z-index: 4; right: var(--fpi); bottom: var(--fpi); width: var(--fpw); height: var(--fpw); padding: 0; border: 0; border-radius: 50%;
  background: var(--fpseal) center / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.45));
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.fpmark::before { content: ''; position: absolute; inset: -7px; }
.fpmark.fp-tl { left: var(--fpi); top: var(--fpi); right: auto; bottom: auto; }
.fpmark.fp-tr { right: var(--fpi); top: var(--fpi); bottom: auto; }
.fpmark.fp-bl { left: var(--fpi); right: auto; }
.fpmark.drag { z-index: 6; cursor: grabbing; scale: 1.15; filter: drop-shadow(3px 5px 0 rgba(0,0,0,.4)); transition: scale .12s; }
.fpmark.snap { transition: transform .42s cubic-bezier(.2, 1.35, .4, 1), scale .2s; }
.fpmark:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }
.card-art:has(> .fpmark.fp-tl) .fbadges { left: calc(var(--fpi) * 2 + var(--fpw)); }
.fpmark.fp-tr ~ .count { right: calc(var(--fpi) * 2 + var(--fpw)); }
.fpmark.fp-bl ~ .favstar { left: calc(var(--fpi) * 2 + var(--fpw)); }
.fpmark::after { content: ''; position: absolute; left: -6%; top: -6%; width: 41.2%; height: 41.2%; background: none center / 100% 100% no-repeat; image-rendering: pixelated; opacity: 0;
  animation: fptwinkle .9s steps(1, end) calc(.35s + min(var(--i, 0), 12) * .12s) both; }
.card:hover .fpmark::after { animation: fptwinkle2 .9s steps(1, end); }
.fpmark.fp-br ~ .like { right: calc(var(--fpi) + var(--fpw) + 5px); bottom: calc(var(--fpi) + (var(--fpw) - 28px) / 2); }
.fbadge.fpress, .fbadge.fpress.inl { position: relative; height: auto; margin: 0 2px; padding: 0 0 0 21px; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; font: 600 12px/1.3 var(--sans); letter-spacing: .01em; text-transform: none; color: #f2c55a; white-space: nowrap; }
.fbadge.fpress::before { content: ''; position: absolute; left: 0; top: 50%; width: 17px; height: 17px; margin-top: -8.5px;
  background: var(--fpseal) center / 100% 100% no-repeat; image-rendering: pixelated; }
.fpline { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--t2); }
.fpline .fbadge { flex: none; }
/* a badge inside a sentence (the launch card's First Press line): smaller than on a card, a little room either side, on the text's baseline */
.fbadge.inl { height: 18px; padding: 0 7px; margin: 0 3px; font-size: 9px; vertical-align: baseline; }
/* ink amounts in a drop card's lines of text (a launch's line, its holds line, your request, the lottery's result and
   the premium note once the sale opens): inline with the words, so a wrapped line keeps its height and the number sits
   on the text's baseline (as inline-flex, the empty gem set the baseline and lifted the number) */
:is(.drop p, .lx-when, .lx-stats, .lx-mine, .lx-hold, .lx-q, .lx-rule, .lx-res, .lx-prem) .ink { display: inline; white-space: nowrap; }
:is(.drop p, .lx-when, .lx-stats, .lx-mine, .lx-hold, .lx-q, .lx-rule, .lx-res, .lx-prem) .ink::before { margin-right: .3em; vertical-align: -.14em; }
.count { position: absolute; z-index: 4; top: 8px; right: 8px; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; font: 700 11px var(--mono); background: rgba(8,8,12,.65); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); }
.card-body { padding: 11px 5px 4px; }
/* a favorite: a gold ★ on the art, and locked (dimmed) while selecting to sell or pulp */
.favstar { position: absolute; z-index: 4; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; line-height: 1; color: #ffd23f; background: rgba(8,8,12,.78); border: 1px solid rgba(255,210,63,.55); pointer-events: none; }
.card.favlock { opacity: .42; cursor: not-allowed; }
/* offers paid in prints: their prints as small thumbnails */
.othumbs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.othumbs .thumb { width: 34px; height: 34px; border-radius: var(--ra); overflow: hidden; display: block; cursor: pointer; }
.othumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offerbox .opay { margin-bottom: 8px; }
.offerbox .ogive { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; width: 100%; }
.offerbox .ogive.hidden, .offerbox .oqn.hidden, .offerbox .ohave.hidden { display: none; }
.offerbox .oqn:not(.ofl) { display: inline-flex; align-items: center; gap: 6px; }
.offerbox .oqn:not(.ofl) .field { width: 64px; }
.offerbox .oqn .dim { flex-basis: auto; }
.offerbox .ohave a { text-decoration: underline; }
.oedit .oqty { width: 56px; }
/* Sets: one offer over every collection you're missing */
/* Inventory › Sets: Unfinished only, its own line under the drop chips (forum pick, 2026-10-19) */
.chips.setfilt { margin: 10px 0 24px; }
.chips.cakinds { margin: 22px 0 12px; }
.mmiss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -10px 0 22px; }
/* the offer forms' boxes, each with its name over it, and what the offer holds in words (forum pick, 2026-10-19) */
.offerbox .ofl { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.offerbox .ofl-l { font: 500 12px/1.2 var(--sans); color: var(--t2); white-space: nowrap; }
.offerbox .ofl .field { width: 110px; flex: none; }
.offerbox .oqn.ofl .field { width: 80px; }
.offerbox .go { align-self: flex-end; }
.offerbox .osum { flex-basis: 100%; font-size: 13.5px; color: var(--t1); }
.offerbox .obr { display: none; }
@media (max-width: 640px) { .offerbox .obr { display: block; flex-basis: 100%; height: 0; } .offerbox .ofl { flex: 1 1 0; } .offerbox .ofl .field, .offerbox .oqn.ofl .field { width: 100%; flex: none; } }
.offerbox.mbox { margin: -10px 0 24px; justify-content: flex-start; max-width: 560px; }
.offerbox.mbox .dim { text-align: left; }
.poffers { margin-top: 14px; }
.seg.svseg { margin: 4px 0 6px; }
.pofrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.btn.favbtn.on { color: var(--ink); border-color: rgba(255,210,63,.55); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title { font-weight: 600; font-size: 15px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t1); }
/* a name that doesn't fit beside its odds keeps its line, and the odds go under it (narrow cards cut names to "Pu…") */
.card-body > .card-row:first-child { flex-wrap: wrap; row-gap: 3px; }
.card-sub { margin-top: 3px; color: var(--dim); font-size: 12.5px; }
.card-sub .ed { font-family: var(--mono); font-size: 12px; }
/* a card on its own collection's page leads with its number, its rarity on the line under it (the UX pass, 2026-10-24) */
.card.incol .card-title { flex: 1 1 100%; font: 600 16px var(--mono); letter-spacing: 0; }
.card-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-foot .who { color: var(--dim); font-size: 12px; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.card-foot .who .orb { width: 16px; height: 16px; flex: none; }
.price { font-weight: 600; font-size: 15px; }
/* reactions under a feed event */
.rxbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; position: relative; }
.rxbar:empty { display: none; }
.rxc { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: var(--rt); border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: 600 12px var(--mono); cursor: pointer; }
.rxc span { color: var(--dim); }
.rxc.on { border-color: var(--r2); background: rgba(155,93,229,.18); }
.rxc.on span { color: var(--t2); }
.rxc:disabled { cursor: default; }
.rxadd { opacity: .7; }
.rxpick { display: inline-flex; gap: 2px; padding: 2px 4px; border-radius: var(--rt); border: 1px solid var(--line); background: var(--k1); }
.rxp { width: 30px; height: 26px; border: 0; background: none; font-size: 16px; cursor: pointer; border-radius: var(--rc); }
.rxp:hover { background: rgba(255,255,255,.08); }
/* a print in a collector's auction: its price in purple, "auction" under it */
.price.aucp { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.price.aucp .ink { color: var(--r2); }
.price.aucp .ink::before { filter: hue-rotate(230deg) saturate(1.3) drop-shadow(0 0 5px rgba(155, 93, 229, .55)); }
.price.aucp small { color: var(--r2); opacity: .8; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.card.sel { border-color: var(--t1); box-shadow: 0 0 0 2px #fff, 0 20px 50px -20px rgba(255,255,255,.4); }
.card.sel::after { content: '✓'; position: absolute; z-index: 5; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--t1); color: var(--k0); display: grid; place-items: center; font-weight: 600; font-size: 14px; }

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding: 56px 0 10px; }
.hero h1 { margin: 18px 0 0; font-size: clamp(54px, 8vw, 116px); line-height: .9; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); }
.hero p.lead { margin: 26px 0 0; color: var(--t2); font-size: 19px; max-width: 470px; line-height: 1.5; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .cta .btn { height: 52px; padding: 0 26px; font-size: 15.5px; border-radius: var(--rc); }
.stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 48px; }
.stat b { display: block; font-size: 28px; letter-spacing: -.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { color: var(--dim); font-size: 13px; }
.showpiece { position: relative; }
.showpiece .glow { position: absolute; inset: 0; z-index: 0; filter: blur(60px) saturate(2); opacity: .95; transform: scale(1.12); }
.showpiece .glow canvas { width: 100%; height: 100%; display: block; }
.frame { position: relative; z-index: 1; border-radius: var(--ra); overflow: hidden; background: #000; box-shadow: 0 50px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.frame canvas { display: block; width: 100%; aspect-ratio: 1; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-.4deg); } }
.frame.swap canvas { animation: swap .9s var(--ease); }
@keyframes swap { from { opacity: 0; transform: scale(1.04); filter: blur(10px); } }
.showmeta { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--rc);
  background: rgba(8,8,12,.55); border: 1px solid rgba(255,255,255,.12); cursor: pointer; transition: background .2s; }
.showmeta:hover { background: rgba(8,8,12,.7); }
.showmeta b { display: block; font-size: 16px; letter-spacing: -.02em; }
.showmeta span { color: var(--t2); font-size: 12.5px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.panel { border-radius: var(--rc); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); padding: 8px; }
.live { display: flex; flex-direction: column; }
.live-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--rc); cursor: pointer; transition: background .2s; }
.live-row:hover { background: rgba(255,255,255,.05); }
.live-row.enter { animation: enter .9s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateX(-14px); background: rgba(255,255,255,.12); } }
.live-row .thumb { width: 46px; height: 46px; border-radius: var(--ra); overflow: hidden; background: #000; position: relative; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.live-row .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .4s; }
.live-row .thumb img.ready { opacity: 1; }
.live-row .txt { font-size: 13.5px; line-height: 1.4; color: var(--t2); min-width: 0; }
.live-row .txt b { color: var(--t1); font-weight: 600; }
.live-row .txt .odds { display: flex; margin-top: 2px; }
.live-row .t { color: var(--dim2); font: 11.5px var(--mono); white-space: nowrap; }
.live.big .live-row { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px 14px; }
.live.big .thumb { width: 56px; height: 56px; }
.row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px); gap: 18px; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--k3) transparent; }
.row-scroll > * { scroll-snap-align: start; }

/* ---------- drops ---------- */
.drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
.drop { position: relative; min-height: 440px; border-radius: var(--rc); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; isolation: isolate; }
.drop .mosaic { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; transform: scale(1.06) rotate(-2deg); transition: transform 1.2s var(--ease); }
.drop .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .6s; }
.drop .mosaic img.ready { opacity: 1; }
.drop:hover .mosaic { transform: scale(1.12) rotate(-1deg); }
.drop::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,6,8,.15) 0%, rgba(6,6,8,.6) 45%, rgba(6,6,8,.96) 78%); }
.drop .tag { position: absolute; top: 20px; left: 20px; display: flex; gap: 8px; }
.pilltag { height: 26px; padding: 0 11px; border-radius: var(--rt); display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(8,8,12,.55); border: 1px solid rgba(255,255,255,.18); }
.pilltag.new { background: var(--t1); color: var(--k0); border-color: var(--t1); }
/* a longer note in a collection's header ("Drop 01 sold out · buy from collectors below") wraps inside its pill */
.ccta .pilltag { height: auto; min-height: 26px; padding: 6px 12px; line-height: 1.45; border-radius: var(--rc); }
/* the next drop before its art is in: one tile per flavor */
.drop.soon .mosaic { grid-template-columns: repeat(3, 1fr); }
.drop.soon .mosaic img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; display: block; }
.drop.soon .fl { display: grid; place-items: center; font: 600 64px var(--mono); color: rgba(255,255,255,.85); }
.drop.soon .fl-a { background: linear-gradient(135deg, #ff5f6d, #ffc371); } .drop.soon .fl-b { background: linear-gradient(135deg, #36d1dc, #5b86e5); }
.drop.soon .fl-c { background: linear-gradient(135deg, #a8e063, #56ab2f); } .drop.soon .fl-d { background: linear-gradient(135deg, #c471f5, #fa71cd); }
.drop.soon .fl-e { background: linear-gradient(135deg, #f7971e, #ffd200); } .drop.soon .fl-f { background: linear-gradient(135deg, #43cea2, #185a9d); }
.drop.soon .fl-g { background: linear-gradient(135deg, #ff9a9e, #a18cd1); } .drop.soon .fl-h { background: linear-gradient(135deg, #f953c6, #3a1c71); }
.drop.soon p a { color: var(--t1); }
.drop.soon .soon-when { display: flex; flex-direction: column; gap: 10px; color: var(--t1); }
.drop.soon .soon-when b { display: block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.drop h3 { margin: 4px 0 6px; font-size: 40px; letter-spacing: var(--font-head-ls); line-height: 1; font-weight: var(--font-head-wt); }
.drop p { margin: 0 0 18px; color: var(--t2); font-size: 14px; }
.meter { height: 6px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--grad); background-size: 300% 100%; }
.meter-row { display: flex; justify-content: space-between; margin: 8px 0 18px; color: var(--dim); font: 12px var(--mono); }
.daily:not(.kpill) { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--rc); margin-bottom: 22px;
  background: linear-gradient(90deg, rgba(255,210,63,.09), rgba(255,46,136,.06) 60%, transparent); border: 1px solid rgba(255,210,63,.2); }
.daily b { font-size: 17px; letter-spacing: -.02em; }
.daily .grow { flex: 1; color: var(--dim); font-size: 14px; }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.how > div { padding: 18px 20px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.how b { display: block; color: var(--t1); font-size: 15.5px; margin-bottom: 6px; letter-spacing: -.01em; }
.how .odds { margin-right: 6px; }

/* ---------- overlay (print detail, trades) ---------- */
.ov { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: rgba(4,4,6,.82); opacity: 0; pointer-events: none; transition: opacity .3s; }
.ov.open { opacity: 1; pointer-events: auto; }
.ov-box { position: relative; max-width: 1240px; margin: 0 auto; padding: 44px 32px 60px; transform: translateY(16px) scale(.985); transition: transform .45s var(--ease); }
.ov.open .ov-box { transform: none; }
.x { position: fixed; top: 18px; right: 22px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255,255,255,.06); color: var(--t1); font-size: 18px; cursor: pointer; transition: transform .2s, background .2s; }
.x:hover { transform: rotate(90deg); background: rgba(255,255,255,.12); }
.pd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: 52px; align-items: start; }
/* the art starts at the top and stays in view while the details beside it scroll (it was centred against them, so a
   long column pushed it halfway down: the founder, 2026-10-15) */
@media (min-width: 1001px) { .pd .pd-art { position: sticky; top: 24px; } }
.pd-info .kicker { margin-bottom: 10px; }
.pd-info h2 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 12px; }
.fact { padding: 12px 14px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.fact > span:first-child { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.fact b { display: block; margin-top: 3px; font-size: 16px; letter-spacing: -.02em; }
.fact .odds { font-size: 14px; margin-top: 5px; }
.why { color: var(--dim); font-size: 13px; margin: 0 0 20px; }
.calc { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.calc summary { cursor: pointer; color: var(--dim); font-size: 13px; font-weight: 600; }
.calc[open] summary { margin-bottom: 10px; }
.calc-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.calc-eq span:not(.odds) { display: flex; flex-direction: column; align-items: center; }
.calc-eq b { font: 600 14px var(--mono); }
.calc-eq small { color: var(--dim2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.calc-eq i { font-style: normal; color: var(--dim); }
.calc-eq .odds { font-size: 14px; }
.calc p { color: var(--dim); font-size: 13px; margin: 10px 0 0; }
.recipe { color: var(--t2); font-size: 15px; margin: 16px 0 18px; }
.owner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; }
.owner .orb { width: 40px; height: 40px; }
.owner .who { flex: 1; min-width: 0; }
.owner .who span, .owner .ask span { display: block; color: var(--dim); font-size: 12px; }
.owner .who a { font-weight: 600; }
.owner .who a:hover { text-decoration: underline; }
.owner .ask { text-align: right; }
.owner .ask .ink { font-size: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions .field { width: 120px; height: 44px; font-family: var(--mono); }
.note { color: var(--dim); font-size: 13px; min-height: 20px; margin-top: 10px; }
.hash { font: 11.5px/1.5 var(--mono); color: var(--dim2); word-break: break-all; margin-top: 16px; }
.timeline { list-style: none; margin: 14px 0 0 6px; padding: 0 0 0 18px; border-left: 1px solid var(--line2); }
.timeline li { position: relative; padding: 0 0 14px 6px; font-size: 13.5px; color: var(--t2); }
.timeline li::before { content: ''; position: absolute; left: -25px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--hc, #fff); }
.timeline li span { color: var(--dim2); font: 11.5px var(--mono); margin-left: 8px; }
.timeline a { color: var(--t1); font-weight: 600; }
.subhead { margin: 28px 0 6px; font: 600 15px/1.3 var(--sans); color: var(--t1); letter-spacing: -.005em; }
.tradebar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; margin: 18px 0; border-radius: var(--rc); background: rgba(14,14,18,.9); border: 1px solid var(--line); }
.tradebar .grow { flex: 1; color: var(--dim); }

/* ---------- pack opening stage ---------- */
.stage { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 26px; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 45%, #1b1030 0%, #0a0812 45%, #040406 80%); }
.stage.open { display: flex; animation: page .4s ease both; }
.stage .rays { position: absolute; inset: -50%; z-index: 0; opacity: .3; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0 6deg, transparent 6deg 18deg); animation: rays 50s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 0, transparent 50%); mask: radial-gradient(circle, #000 0, transparent 50%); }
@keyframes rays { to { transform: rotate(360deg); } }
/* Darkroom (2026-10-18): no turning rays or drifting specks behind the pack; the light comes only with a rare print */
.stage .rays, .pk-stage .motes { display: none !important; }
.stage > * { position: relative; z-index: 1; }
.stage > .x { position: absolute; z-index: 3; }
.stage .title { text-align: center; }
.stage .title h2 { margin: 6px 0 0; font-size: 34px; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); }
.pack { position: relative; width: 250px; height: 360px; border-radius: var(--rc); cursor: pointer; overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.9), 0 0 90px -20px rgba(155,93,229,.7), inset 0 0 0 1px rgba(255,255,255,.25); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(1.5deg); } }
.pack .skin { position: absolute; inset: 0; background-size: cover; background-position: center; image-rendering: pixelated; }
.pack .skin::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.2), rgba(0,0,0,.65)); }
.pack .shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 45%, transparent 60%); background-size: 250% 100%; animation: shine 2.6s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.pack .crimp { position: absolute; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 4px, rgba(255,255,255,.08) 4px 8px); }
.pack .crimp.t { top: 0; } .pack .crimp.b { bottom: 0; }
.pack .label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--t1); text-shadow: 0 2px 24px rgba(0,0,0,.7); }
.pack .label b { display: block; font-size: 50px; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); }
.pack .label span { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pack.shake { animation: shake .55s cubic-bezier(.36,.07,.19,.97) both; }
/* a missing tick: the button shakes, the box lights (app.js nudge) */
.nudge, .btn.glow.nudge { animation: nudge .45s cubic-bezier(.36,.07,.19,.97) both; }   /* (over a phone's glow none) */
@keyframes nudge { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } }
label.check.nudge { color: var(--t1); outline: 2px solid var(--t1); outline-offset: 4px; border-radius: 6px; }
@keyframes shake { 10%, 90% { transform: translateX(-2px) rotate(-1deg); } 20%, 80% { transform: translateX(4px) rotate(2deg); } 30%, 50%, 70% { transform: translateX(-7px) rotate(-3deg); } 40%, 60% { transform: translateX(7px) rotate(3deg); } }
.pack.gone { animation: gone .55s var(--ease) forwards; }
@keyframes gone { 30% { transform: scale(1.08); filter: brightness(2); } to { transform: scale(.4); opacity: 0; filter: blur(8px) brightness(3); } }
.flash { position: absolute !important; inset: 0; z-index: 2 !important; background: #fff; pointer-events: none; animation: flash .6s ease-out forwards; }
@keyframes flash { from { opacity: .7; } to { opacity: 0; } }
.hint { color: var(--dim); font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@keyframes blink { 50% { opacity: .4; } }
.deal { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; perspective: 1400px; max-width: 1240px; padding: 0 20px; }
.flip { position: relative; width: 214px; height: 300px; cursor: pointer; animation: dealin .8s var(--ease) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes dealin { from { opacity: 0; transform: translateY(170px) rotate(calc(var(--r) * 1deg)) scale(.5); } }
.flip .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.flip.open .inner { transform: rotateY(180deg); }
.flip:not(.open):hover .inner { transform: translateY(-8px) rotateX(6deg); }
.flip .back, .flip .front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--rc); }
.flip .back { overflow: hidden; background: var(--k1) center/cover; image-rendering: pixelated; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 20px 50px -20px #000; }
.flip .back::after { content: none; }
.flip .front { transform: rotateY(180deg); }
.flip .front .card { height: 100%; animation: none; }
.flip.tease .back { box-shadow: inset 0 0 0 2px var(--hc), 0 0 46px 4px var(--hg); animation: tease 1.3s ease-in-out infinite; }
@keyframes tease { 50% { box-shadow: inset 0 0 0 2px var(--hc), 0 0 14px 0 var(--hg); } }
.burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.burst .ring { position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%; border: 3px solid var(--hc); box-shadow: 0 0 60px var(--hc), inset 0 0 60px var(--hc); animation: ring .9s ease-out forwards; }
@keyframes ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.burst i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--hc); box-shadow: 0 0 10px var(--hc); animation: spark 1.1s var(--ease) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(220deg) scale(.3); opacity: 0; } }
.stage .after { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; min-height: 52px; }

/* ---------- inventory, profile ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 28px; }
.kpi { padding: 16px 18px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.kpi > span:first-child { color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.kpi b { display: block; margin-top: 4px; font-size: 26px; letter-spacing: -.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .odds { font-size: 16px; margin-top: 9px; }
.fam { margin-bottom: 30px; scroll-margin-top: 90px; }
.fam.hit { animation: famhit 2.4s var(--ease); border-radius: var(--rc); }
@keyframes famhit { 0%, 40% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 10px rgba(255,210,63,.08); background: rgba(255,210,63,.04); } 100% { box-shadow: 0 0 0 2px transparent; background: transparent; } }
.fam-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; }
.fam-head b { font-size: 17px; letter-spacing: -.02em; }
.fam-head .meter { width: 160px; }
.fam-head .done { color: var(--ink); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.series-grid .card .card-body { padding: 9px 3px 2px; }
.series-grid .card-title { font-size: 13.5px; }
/* width: a gap next to taller owned cards stretches to the row's height; without it the aspect-ratio widened it over its neighbours */
.slot { width: 100%; border-radius: var(--rc); border: 1px dashed var(--line2); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; min-height: 100%; aspect-ratio: .82; color: var(--dim2); font-size: 12px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px); }
.slot b { color: var(--dim); font-weight: 600; font-size: 13.5px; }
.banner { position: relative; height: 230px; margin: 26px 0 0; border-radius: var(--rc); overflow: hidden; border: 1px solid var(--line); background: #111; }
.banner img { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(34px) saturate(2.2) brightness(1.1); opacity: .9; }
.banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(6,6,8,.85)); }
.prof { position: relative; display: flex; flex-wrap: wrap; align-items: end; gap: 22px; margin: -70px 0 10px; padding: 0 26px; z-index: 1; }
.prof .orb { width: 112px; height: 112px; box-shadow: 0 0 0 5px var(--bg), 0 20px 50px -10px rgba(0,0,0,.8); }
.prof h1 { margin: 0; font-size: 42px; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); line-height: 1.05; }
.prof .sub { color: var(--dim); font-size: 14px; }
.prof .grow { flex: 1; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badges span { height: 24px; padding: 0 10px; border-radius: var(--rt); display: inline-flex; align-items: center; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1px solid rgba(255,210,63,.35); background: rgba(255,210,63,.06); }
.offer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 14px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px; }
.offer .side { display: flex; flex-wrap: wrap; gap: 10px; }
.offer .oside { min-width: 0; max-width: 100%; }
/* the trade picker: the prints you chose, in a strip in the bar that stays at the top */
.tradebar .tpicked { flex: 1 1 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.tradebar .tpicked[hidden] { display: none; }
.tradebar .tp { flex: none; padding: 0; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: var(--ra); overflow: hidden; background: #000; }
.tradebar .tp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tradebar .tp img.px { image-rendering: pixelated; }
.offer .card { width: 130px; animation: none; }
.offer .card .card-body { padding: 8px 2px 2px; }
.offer .card .card-sub { display: none; }
.offer .arrow { font-size: 22px; color: var(--dim); }
.offer .grow { flex: 1; }
.offer .from { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.offer .from .orb { width: 26px; height: 26px; }

/* ---------- onboarding ---------- */
.onb { min-height: calc(100vh - 160px); display: grid; place-items: center; text-align: center; padding: 30px 0; }
.onb .orb { width: 140px; height: 140px; margin: 34px auto 18px; transition: background 1s; box-shadow: 0 30px 80px -20px rgba(155,93,229,.7), inset 0 0 0 1px rgba(255,255,255,.3); }
.onb h1 { margin: 16px 0 0; font-size: clamp(56px, 9vw, 120px); letter-spacing: var(--font-head-ls); line-height: .9; font-weight: var(--font-head-wt); }
.onb p { color: var(--t2); max-width: 520px; margin: 22px auto 0; font-size: 17px; }
.onb .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.onb .field { width: 240px; height: 50px; font-size: 16px; text-align: center; }
.onb .btn { height: 50px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--rs); font-size: 14px; max-width: min(520px, 92vw);
  background: rgba(20,20,26,.85); border: 1px solid var(--line2); box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); animation: tin .5s var(--ease); }
.toast.out { animation: tout .35s ease forwards; }
.toast .ti { width: 38px; height: 38px; flex: none; border-radius: var(--rc); overflow: hidden; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 17px; }
.toast .ti img { width: 100%; height: 100%; object-fit: cover; }
.toast a { font-weight: 600; color: var(--t1); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
@keyframes tin { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes tout { to { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1000px) {
  .hero, .pd, .split { grid-template-columns: 1fr; }
  .hero { gap: 30px; padding-top: 36px; }
  .top { grid-template-columns: auto 1fr auto; padding: 0 14px; gap: 10px; }
  nav { justify-self: center; overflow-x: auto; max-width: 100%; }
  nav a { padding: 7px 12px; }
}
@media (max-width: 640px) {
  main { padding: 0 14px 30px; }
  .inkpill { padding: 0 9px; font-size: 12px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .flip { width: 150px; height: 214px; }
  .card-title { font-size: 13.5px; }
  .drops { grid-template-columns: 1fr; }
  .ov-box { padding: 70px 14px 40px; }
  .stats { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* card back and pack wrapper */
.flip .back { background:
  radial-gradient(70% 50% at 50% 38%, rgba(155,93,229,.38), transparent 70%),
  radial-gradient(60% 40% at 50% 100%, rgba(0,187,249,.22), transparent 70%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px), var(--k1); }
.cb { position: absolute; inset: 10px; border-radius: var(--rc); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cb .mark { width: 30px; height: 30px; gap: 3px; }
.cb b { font-size: 26px; font-weight: var(--font-head-wt); letter-spacing: var(--font-head-ls); color: var(--t1); }
.pack .skin { background: linear-gradient(160deg, var(--live) 0%, var(--r2) 45%, var(--r1) 100%); }
.pack.d1 .skin { background: linear-gradient(160deg, #ff7a1a 0%, var(--live) 50%, #7a04eb 100%); }
.pack.d2 .skin { background: linear-gradient(160deg, var(--up) 0%, var(--r1) 50%, #3a0ca3 100%); }
.pack .skin::after { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.18), transparent 60%); }
.pack .grain { position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px); }
.pack .label { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pack .label .mark { width: 34px; height: 34px; gap: 3px; margin-bottom: 4px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.pack .label .mark i { background: var(--t1) !important; animation: none; opacity: .95; }
.pack .label .n { opacity: .75; font-size: 12px; }

/* phones: the nav becomes a bottom tab bar */
nav { scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .top { grid-template-columns: 1fr auto; height: 58px; background: rgba(6,6,8,.95); }
  .brand { font-size: 21px; gap: 8px; }
  nav { position: fixed; left: 10px; right: 10px; width: calc(100vw - 20px); justify-self: auto; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 30; max-width: none; overflow: visible;
    justify-content: space-between; padding: 5px; border-radius: var(--rc); background: rgba(16,16,22,.86); border-color: var(--line2); box-shadow: 0 16px 40px -10px rgba(0,0,0,.8); }
  nav a { flex: 1; text-align: center; padding: 11px 0; font-size: 13.5px; border-radius: var(--rc); }
  .nav-pill { border-radius: var(--rc); top: 5px; bottom: 5px; }
  body { padding-bottom: 76px; }
  .toasts { bottom: 86px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi b { font-size: 22px; }
  .daily:not(.kpill) { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-head { padding: 34px 0 20px; }
  .toolbar .field { flex: 1; min-width: 0; }
  .toolbar .grow { display: none; }
  .hero h1 { font-size: 64px; }
  .drop { min-height: 380px; padding: 20px; }
  .prof { padding: 0 6px; }
  .prof h1 { font-size: 32px; }
  .offer .card { width: 104px; }
}
.offer .card .card-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.offer .card .card-title { max-width: 100%; font-size: 13px; }

/* traits */
.s-scanline .card-art::after, .frame.s-scanline::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.38) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45)); }
.fbadge.blueprint { background: rgba(42,88,150,.85); }
.fbadge.misprint { background: rgba(200,30,60,.8); }
.fbadge.gold { background: linear-gradient(90deg, #8a6a00, #ffd23f); color: #1a1200; }
.fbadge.inverted { background: rgba(255,255,255,.9); color: #000; }
.fbadge.frozen { background: rgba(120,200,255,.8); color: #00131f; }
.fbadge.scanline { background: rgba(0,245,160,.25); }
.traits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.trait { padding: 10px 12px; border-radius: var(--rc); background: rgba(255,255,255,.025); border: 1px solid var(--line); min-width: 0; }
.trait span { display: block; color: var(--dim2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.trait b { display: block; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trait i { font-style: normal; font: 600 12px var(--mono); color: var(--dim); }
.trait.sp { border-color: color-mix(in srgb, var(--hc) 45%, transparent); background: color-mix(in srgb, var(--hc) 8%, transparent); }
.trait.sp i { color: var(--hc); }
@media (max-width: 640px) { .traits { grid-template-columns: 1fr 1fr; } }

/* ---------- likes ---------- */
.like { position: absolute; z-index: 5; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(8,8,12,.55); backdrop-filter: blur(10px); color: var(--t1); font: 650 12px var(--mono); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, background .2s; }
.card:hover .like, .like.on, .like:focus-visible { opacity: 1; transform: none; }
.like svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; transition: fill .2s, stroke .2s; }
.like.on svg { fill: #ff2e88; stroke: #ff2e88; }
.like.on { background: rgba(255,46,136,.18); border-color: rgba(255,46,136,.5); }
.like.pop svg { animation: heart .45s var(--ease); }
@keyframes heart { 30% { transform: scale(1.5); } 60% { transform: scale(.9); } }
.like.big { position: static; opacity: 1; transform: none; height: 38px; padding: 0 14px 0 12px; font-size: 13.5px; }
.like.big svg { width: 17px; height: 17px; }
@media (hover: none) { .like { opacity: 1; transform: none; } }
.pd-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pd-tools { display: flex; gap: 8px; align-items: center; }
.pd-info .kicker a:hover { color: var(--t1); text-decoration: underline; }

/* ---------- export ---------- */
.exp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; }
.expbar { flex: 1; min-width: 120px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.expbar i { display: block; height: 100%; width: 0; background: var(--grad); background-size: 300% 100%; transition: width .2s; }
.exptxt { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.expprev { width: 64px; height: 64px; border-radius: var(--ra); object-fit: cover; box-shadow: 0 0 0 1px var(--line2); image-rendering: pixelated; }

/* ---------- drops: daily card and infinite tiles ---------- */
.dailycard { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; padding: 16px; margin-bottom: 10px; border-radius: var(--rc); border: 1px solid rgba(255,106,213,.35);
  background: radial-gradient(80% 120% at 0% 50%, rgba(255,46,136,.16), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); transition: transform .3s var(--ease), box-shadow .3s; }
.dailycard:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -30px rgba(255,46,136,.6); }
.dc-art { aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: #000; position: relative; box-shadow: 0 20px 50px -20px #000; }
.dc-art img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s; }
.dc-art img.ready { opacity: 1; }
.dc-info h3 { margin: 8px 0 6px; font-size: 34px; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); line-height: 1.05; }
.dc-info p { margin: 0 0 18px; color: var(--t2); }
.dc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.dc-row span { display: block; color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.dc-row b { font-size: 24px; letter-spacing: -.02em; }
.dc-row .btn { margin-left: auto; }
.series-grid.inf { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.inftile { border-radius: var(--rc); padding: 8px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; }
.inftile:hover { border-color: var(--line2); transform: translateY(-2px); }
.inftile .ia { position: relative; display: block; aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: #000; }
.inftile .ia img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s, transform .6s var(--ease); }
.inftile .ia img.ready { opacity: 1; }
.inftile:hover .ia img { transform: scale(1.05); }
.inftile .ib { padding: 0 4px; min-width: 0; }
.inftile .ib b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inftile .ib span { font-size: 12px; }

/* ---------- market: collections table ---------- */
.ctable { display: flex; flex-direction: column; gap: 4px; }
.crow { display: grid; grid-template-columns: 40px minmax(220px, 2.4fr) repeat(6, minmax(70px, 1fr)); gap: 14px; align-items: center; padding: 10px 14px; border-radius: var(--rc); transition: background .2s; }
.crow:not(.head):hover { background: rgba(255,255,255,.05); }
.crow.head { color: var(--dim2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 0; animation: none; }
.crow .rk { color: var(--dim2); font: 600 13px var(--mono); }
.crow .num { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.cname { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cname .cn { min-width: 0; }
.cname b { display: block; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cname small { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }
.cthumb { width: 48px; height: 48px; flex: none; border-radius: var(--ra); overflow: hidden; background: #000; position: relative; box-shadow: 0 0 0 1px var(--line); display: block; }
.cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; }
.cthumb img.ready { opacity: 1; }
.cthumb.big { width: 120px; height: 120px; border-radius: var(--ra); box-shadow: 0 0 0 4px var(--bg), 0 20px 50px -10px rgba(0,0,0,.9); }
.kpill { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: var(--rc); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.08); color: var(--t2); }
.kpill.limited { background: rgba(76,201,240,.14); color: var(--r1); }
.kpill.infinite { background: rgba(0,245,160,.12); color: var(--up); }
.kpill.daily { background: rgba(255,106,213,.15); color: var(--r4); }
.btn.more { align-self: center; margin-top: 14px; }

/* ---------- collection page ---------- */
.chead { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; margin: -60px 0 0; padding: 0 22px; }
.chead h1 { margin: 6px 0 4px; font-size: clamp(34px, 4.5vw, 52px); letter-spacing: var(--font-head-ls); line-height: 1; font-weight: var(--font-head-wt); }
.chead .grow { flex: 1; min-width: 240px; }
.cdesc { margin: 6px 0 0; color: var(--t2); max-width: 680px; font-size: 14.5px; }
.cown { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 2px; padding: 4px 11px; border-radius: var(--rt); border: 1px solid var(--line); background: transparent; color: var(--t2); font: inherit; font-size: 13px; cursor: default; }
.cown.has { color: var(--up); border-color: rgba(0,245,160,.35); background: rgba(0,245,160,.08); cursor: pointer; }
.cown.has:hover { background: rgba(0,245,160,.14); }
.cown b { font-weight: 600; }
.ccta { padding-bottom: 6px; }
.cstats { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 26px 0 22px; padding: 18px 22px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.cstats span { display: block; color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.cstats b { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cstats b span { display: inline-flex; font-size: inherit; text-transform: none; letter-spacing: 0; }
.ctabs { margin-bottom: 20px; }
.cbody { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; }
.filters { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; }
/* (the traits column scrolls on its own when it's taller than the window: it stayed pinned and its lower filters were
   out of reach until the page's end; a member's report, #106, 2026-10-21) */
@media (min-width: 1001px) { .filters { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; } }
.fgroup h4 { margin: 0 0 8px; color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.fopt { display: grid; grid-template-columns: 1fr auto 46px; gap: 8px; align-items: center; width: 100%; padding: 7px 10px; border-radius: var(--rc); border: 1px solid transparent; background: none; color: var(--t2); font-size: 13.5px; cursor: pointer; text-align: left; transition: background .15s; }
.fopt:hover { background: rgba(255,255,255,.05); }
.fopt.on { background: rgba(255,255,255,.1); border-color: var(--line2); color: var(--t1); }
.fopt i { font-style: normal; font: 11px var(--mono); color: var(--dim2); text-align: right; }
.chartbox { padding: 16px 18px 6px; margin-bottom: 14px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 14px; }
.chart { width: 100%; height: 220px; display: block; }
.chart .grid { stroke: rgba(255,255,255,.07); stroke-dasharray: 3 5; }
.chart .dot { fill: var(--t1); stroke: var(--r2); stroke-width: 2; }
.chart .lbl { fill: var(--t3); font: 11px var(--mono); }
.acts { padding: 6px; }
.act { display: grid; grid-template-columns: 74px 40px minmax(0, 1.4fr) 90px minmax(0, 1.2fr) 44px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--rc); cursor: pointer; font-size: 13.5px; }
.act:hover { background: rgba(255,255,255,.05); }
.act .thumb { width: 40px; height: 40px; border-radius: var(--ra); overflow: hidden; background: #000; }
.act .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act .an { min-width: 0; display: flex; flex-direction: column; }
.act .an b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.act .num { text-align: right; }
.act .t { color: var(--dim2); font: 11.5px var(--mono); text-align: right; }
.evt { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--dim); }
.evt.bought { color: var(--up); } .evt.won { color: var(--r4); } .evt.listed { color: var(--ink); } .evt.minted, .evt.pulled { color: var(--r1); }

/* ---------- auction ---------- */
.bidbox { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.bidbox > div { padding: 14px 16px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.bidbox > div > span { display: block; color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.bidbox b { display: block; margin: 4px 0 2px; font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bidbox small { color: var(--dim); font-size: 12.5px; }
.auction .actions .field { width: 150px; }

@media (max-width: 1000px) {
  .cbody { grid-template-columns: 1fr; }
  .filters { position: static; flex-direction: row; flex-wrap: wrap; }
  .fgroup { min-width: 180px; flex: 1; }
  .dailycard { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .crow { grid-template-columns: 26px minmax(0, 2fr) repeat(3, minmax(56px, 1fr)); gap: 8px; padding: 9px 6px; }
  .hide-sm { display: none !important; }
  .act { grid-template-columns: 58px 36px minmax(0, 1fr) 70px 36px; }
  .cthumb { width: 40px; height: 40px; }
  nav a { font-size: 12.5px; padding: 11px 0; }
}
.bidbox small b { display: inline; font-size: inherit; margin: 0; letter-spacing: 0; color: var(--t1); }

/* ---------- header: create ---------- */
.top .right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.top .wallet { justify-self: auto; }
.createbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--rt); font-weight: 600; font-size: 13.5px; color: var(--t1);
  border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(255,46,136,.22), rgba(0,187,249,.18)); transition: transform .2s var(--ease), box-shadow .25s; }
.createbtn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(155,93,229,.8); }
.createbtn span { font-size: 17px; line-height: 1; }
iframe.runner { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; border: 0; opacity: 0; pointer-events: none; }

/* ---------- create ---------- */
.studio { display: flex; flex-direction: column; gap: 14px; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 22px 24px; border-radius: var(--rc); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); }
.sn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--mono); background: rgba(255,255,255,.08); border: 1px solid var(--line2); }
.sb h3 { margin: 4px 0 12px; font-size: 20px; letter-spacing: -.03em; }
.sb label { display: block; margin-bottom: 12px; color: var(--dim); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.sb label .field { display: block; width: 100%; margin-top: 6px; font-size: 14.5px; color: var(--text); }
.sb textarea.field { height: auto; padding: 10px 14px; resize: vertical; font: inherit; font-size: 14.5px; }
.sb .seg { margin-bottom: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.check { display: flex !important; align-items: center; gap: 10px; color: var(--t2) !important; font-size: 14.5px !important; font-weight: 500 !important; }
.check input { width: 18px; height: 18px; accent-color: var(--r2); }
.small { font-size: 12.5px; }
.codewrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.code { width: 100%; min-height: 380px; padding: 14px 16px; border-radius: var(--rc); border: 1px solid var(--line2); background: var(--k1); color: #d9e1ff; font: 12.5px/1.6 var(--mono); tab-size: 2; resize: vertical; outline: none; }
.code:focus { border-color: rgba(155,93,229,.6); }
.pv { border-radius: var(--ra); overflow: hidden; border: 1px solid var(--line2); background: #000; }
.pvc { display: block; width: 100%; aspect-ratio: 1; }
.pvbar { display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(255,255,255,.03); }
.err { color: var(--down); font: 12px var(--mono); }
.seeds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.seeds canvas, .seeds .im img { width: 100%; aspect-ratio: 1; border-radius: var(--ra); display: block; background: #000; box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.seeds .im { position: relative; }
.x2 { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: var(--t1); cursor: pointer; font-size: 12px; }
.drop-in { display: grid !important; place-items: center; height: 110px; border-radius: var(--rc); border: 1px dashed var(--line2); cursor: pointer; color: var(--t1) !important; font-size: 15px !important; transition: background .2s; }
.drop-in:hover { background: rgba(255,255,255,.04); }
.crow.mine { grid-template-columns: 40px minmax(220px, 2.4fr) repeat(3, minmax(90px, 1fr)); }
.crow small { font-size: 12px; }

/* ---------- daily: day arrows and artist auctions ---------- */
.dayrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dayrow h1 { margin: 0 !important; }
.btn.arrow { width: 40px; padding: 0; font-size: 17px; }
.btn.arrow.off { opacity: .25; pointer-events: none; }
.aucs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.auc { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.auc .aa { display: block; aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: #000; }
.auc .aa img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s; }
.auc .aa img.ready { opacity: 1; }
.auc h3 { margin: 4px 0 10px; font-size: 20px; letter-spacing: -.03em; }
.auc .bidbox b { font-size: 20px; }
.auc .actions .field { width: 110px; }

@media (max-width: 760px) {
  .createbtn { padding: 0 11px; }
  .createbtn { font-size: 0; gap: 0; }
  .createbtn span { font-size: 20px; }
  .codewrap { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr; }
  .seeds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .aucs { grid-template-columns: 1fr; }
  .auc { grid-template-columns: 100px minmax(0, 1fr); }
}
.auc .bidbox b { font-size: 18px; white-space: nowrap; } .auc .bidbox > div { padding: 10px 12px; } .aucs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }

/* ---------- logo ---------- */
canvas.logo { display: block; width: 22px; height: 22px; flex: none; image-rendering: pixelated; border-radius: var(--rc); background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 14px -3px rgba(155,93,229,.7); }
.brand canvas.logo { width: 24px; height: 24px; }
.pack .label canvas.logo { width: 44px; height: 44px; border-radius: var(--rc); margin-bottom: 6px; box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 10px 30px -6px rgba(0,0,0,.6); }
.cb canvas.logo { width: 38px; height: 38px; border-radius: var(--rc); }

/* ---------- review ---------- */
.createbtn.on { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.reviewlink { position: relative; }
.qn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--live); color: var(--t1); font: 600 12px var(--sans); margin-left: 6px; }
.status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--rt); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.status.review { background: rgba(255,210,63,.12); color: var(--ink); }
.status.rejected { background: rgba(255,46,85,.12); color: var(--down); }
.crow.pending { opacity: .9; }
.crow.pending .cthumb canvas, .crow.pending .cthumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; padding: 22px; border-radius: var(--rc); margin-bottom: 16px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,210,63,.25); }
.rv-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.rv-art canvas, .rv-art img { width: 100%; aspect-ratio: 1; border-radius: var(--ra); display: block; background: #000; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.rv-info h2 { margin: 8px 0 6px; font-size: 34px; letter-spacing: -.045em; }
.rv-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.rv-terms span { padding: 5px 11px; border-radius: var(--rt); background: var(--panel); border: 1px solid var(--line); font-size: 13px; color: var(--t2); }
.rv-code { margin: 0 0 14px; }
.rv-code summary { cursor: pointer; color: var(--dim); font-size: 13.5px; }
.rv-code pre { max-height: 300px; overflow: auto; padding: 14px; border-radius: var(--rc); background: var(--k1); border: 1px solid var(--line); font: 12px/1.55 var(--mono); color: #d9e1ff; white-space: pre; }
@media (max-width: 760px) { .rv { grid-template-columns: 1fr; } }
a.trait { display: block; color: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); } a.trait:hover { border-color: var(--line2); background: rgba(255,255,255,.07); transform: translateY(-1px); } a.trait:hover b::after { content: " →"; color: var(--dim); }
.pd.auction { align-items: start; } .pd.auction .pd-art { position: sticky; top: 84px; }

/* ---------- logo gallery ---------- */
.logogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lg { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); }
.lg.on { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 20px 50px -20px rgba(155,93,229,.7); }
.lg canvas.big { width: 100%; aspect-ratio: 1; image-rendering: pixelated; border-radius: 14px; background: #000; box-shadow: 0 0 0 1px var(--line); }
.lg-mock { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(6,6,8,.8); border: 1px solid var(--line); }
.lg-head { display: inline-flex; align-items: center; gap: 8px; }
.lg-head canvas { width: 24px; height: 24px; image-rendering: pixelated; border-radius: 5px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.lg-head b { font: 700 19px var(--display); letter-spacing: -.05em; }
.lg-fav { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px 8px 0 0; background: #2a2a33; font-size: 11px; color: #ccc; }
.lg-fav canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.lg-n b { display: block; font-size: 15px; letter-spacing: -.02em; }
.lg-n span { color: var(--dim); font-size: 12.5px; }
.lg .btn { align-self: flex-start; }
/* stamps and other cut-out logos sit straight on the page: no tile behind them */
canvas.logo, .lg-head canvas, .lg-fav canvas { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.brand canvas.logo { width: 26px; height: 26px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.pack .label canvas.logo { width: 52px; height: 52px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.lg canvas.big { background: #0b0b10; border-radius: 14px; padding: 14px; }

/* ---------- header icons, notifications, search ---------- */
.iconbtn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--t2); cursor: pointer; transition: background .2s, border-color .2s; }
.iconbtn:hover { background: rgba(255,255,255,.1); border-color: var(--line2); }
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .dot { position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--live); color: var(--t1); font: 600 12px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.toppanel { position: fixed; top: 70px; right: 18px; z-index: 45; width: min(420px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 100px)); display: flex; flex-direction: column; border-radius: var(--rs); overflow: hidden;
  background: rgba(14,14,20,.96); border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px #000; animation: tin .3s var(--ease); }
.tp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tp-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--k3) transparent; }
.note-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--rc); cursor: pointer; font-size: 13.5px; color: var(--t2); }
.note-row:hover { background: rgba(255,255,255,.05); }
.note-row.new { background: rgba(155,93,229,.1); }
.note-row .ti { width: 40px; height: 40px; border-radius: var(--rc); overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.06); font-size: 16px; }
.note-row .ti img { width: 100%; height: 100%; object-fit: cover; }
.note-row .t { color: var(--dim2); font: 11.5px var(--mono); }
.note-row a { color: var(--t1); text-decoration: underline; }
.search-ov { position: fixed; inset: 0; z-index: 70; background: rgba(4,4,6,.7); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: page .25s ease; }
.search-box { width: min(640px, calc(100vw - 24px)); border-radius: var(--rs); background: rgba(16,16,22,.97); border: 1px solid var(--line2); box-shadow: 0 40px 100px -20px #000; overflow: hidden; }
.search-box .sq { width: 100%; height: 60px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 18px; padding: 0 22px; }
.search-box .sq:focus { outline: none; background: transparent; }
.sr { max-height: 52vh; overflow-y: auto; padding: 6px; }
.sg { padding: 10px 12px 4px; color: var(--dim2); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.si { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--rc); cursor: pointer; }
.si.on { background: rgba(255,255,255,.08); }
.si .sa { width: 38px; height: 38px; border-radius: var(--rc); overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--dim); }
.si .sa img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.si .sa .orb { width: 30px; height: 30px; }
.si .st > b { display: block; font-size: 14.5px; }
.si .st span { color: var(--dim); font-size: 12.5px; }
.search-hint { padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; }

/* ---------- settings, help, collectors ---------- */
.prof-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.orb.big { width: 72px; height: 72px; flex: none; }
.prof-edit p { margin: 0 0 8px; }
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq details { padding: 16px 20px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.faq summary { cursor: pointer; font: 600 17px var(--display); letter-spacing: -.02em; }
.faq p { color: var(--t2); margin: 10px 0 2px; }
.crow.ctop { grid-template-columns: 40px minmax(220px, 2.4fr) repeat(5, minmax(70px, 1fr)); }
.crow.ctop .orb { width: 40px; height: 40px; flex: none; }
.crow.meRow { background: rgba(155,93,229,.08); }
.bio { margin: 6px 0 0; color: var(--t2); max-width: 560px; }
.profside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.foot .footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 12px; }
.foot .footlinks a { color: var(--dim); font-size: 13.5px; }
.foot .footlinks a:hover { color: var(--t1); }
.foot p { margin: 0; }
html.reduce *, html.reduce *::before, html.reduce *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html.reduce .card { transform: none !important; }
@media (max-width: 760px) {
  .crow.ctop { grid-template-columns: 26px minmax(0, 2fr) repeat(2, minmax(56px, 1fr)); }
  .searchbtn { display: none; }
  .toppanel { top: 64px; right: 8px; }
}

/* ---------- print extras ---------- */
.pnav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pnav .btn { width: 36px; padding: 0; }
.sendbox, .offerbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 12px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.offerbox { flex-direction: row; justify-content: flex-end; max-width: 420px; margin-left: auto; }
.offerbox .field { width: 110px; height: 40px; }
.offerbox .dim { flex-basis: 100%; text-align: right; }
.ccta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.btn.watch.on { color: var(--ink); border-color: rgba(255,210,63,.4); }
.more-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.crow.offrow { grid-template-columns: minmax(0, 3fr) 1fr auto; }
.crow.offrow .cn a { color: inherit; }
.crow.offrow .obtns, .crow.offrow .oedit { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.crow.offrow .oedit .field.sm { width: 84px; height: 32px; }
/* phones: the collection and its status on their own line (outbid, best, floor), the ink and buttons under it */
@media (max-width: 640px) {
  .crow.offrow { grid-template-columns: 1fr auto; row-gap: 8px; }
  .crow.offrow .cname { grid-column: 1 / -1; }
  .crow.offrow .cn b, .crow.offrow .cn small { white-space: normal; overflow: visible; text-overflow: clip; }
  .crow.offrow .opr { justify-self: start; align-self: center; }
}
.lvseg { margin-bottom: 10px; }
/* Market › Yours › Offers: Open and History; a history line wraps (its words, each side's prints), its ink on the right */
.oseg { margin: 0 0 14px; }
.crow.ohrow { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.crow.ohrow .cname { grid-column: auto; align-items: flex-start; }
.crow.ohrow .cn b, .crow.ohrow .cn small { white-space: normal; overflow: visible; text-overflow: clip; }
.crow.ohrow .cn small a { text-decoration: underline; }
.crow.ohrow .opr { justify-self: end; align-self: start; }
.crow.ohrow .ohp { font-weight: 600; }
.ohs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 12.5px; }
.ohs .othumbs { margin-top: 0; }
.ohmore { justify-content: center; margin-top: 14px; }
/* phones: segment controls scroll instead of wrapping, tables stay on one line, founder tools hide */
@media (max-width: 640px) {
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { white-space: nowrap; flex: none; }
  .cname small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dayrow h1 { font-size: 34px !important; }
  .dayrow { gap: 8px; }
  .page-head { gap: 14px; }
  .chead { margin-top: -50px; padding: 0 8px; }
  .cthumb.big { width: 92px; height: 92px; }
  .ccta { justify-content: flex-start; }
  .cstats { gap: 10px 22px; padding: 14px 16px; }
  .pd-tools { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .crow { grid-template-columns: 22px minmax(0, 2.6fr) repeat(2, minmax(60px, 1fr)); }
  .crow.ctop { grid-template-columns: 22px minmax(0, 2.6fr) repeat(2, minmax(60px, 1fr)); }
}
@media (max-width: 640px) {
  .dayrow { flex-wrap: nowrap; }
  .dayrow h1 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 30px !important; }
  .dayrow .btn.arrow { flex: none; }
}
/* the daily auction (the UX pass, 2026-10-24). The bid field wears the ink mark on a phone (a computer: as it was). On a
   phone: the amount, the quick amounts under it (they fill it), Place bid the full width, then the max bid, quieter; the
   kicker without "one a day, forever" (it cut off at 360), the day's arrows together on the right, whatever the title's width */
.bidf { display: contents; }
.bidf .ink { display: none; }
/* (a computer too: the quick amounts under the amount, then the max bid, quieter and apart; it sat against the field
   with the chips under it, a member's report, #127) */
.maxbid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; }
.maxbid .mx-set { background: transparent; border: 1px solid var(--rule2); color: var(--t2); }
@media (max-width: 640px) {
  .page-head .kicker .kx { display: none; }
  .dayrow h1 { order: -1; }
  .dayrow > .arrow:first-child { margin-left: auto; }
  /* (the daily auction's own bid box only: a collector's auction (.uauc) keeps its order; the review of the UX pass) */
  .bidwrap:not(.uauc) { display: flex; flex-direction: column; }
  .bidwrap:not(.uauc) > * { order: 6; }
  .bidwrap:not(.uauc) > .bidbox { order: 0; }
  .bidwrap:not(.uauc) > .actions, .pd .bidwrap:not(.uauc) > .actions { display: contents; }
  .bidwrap:not(.uauc) .bidf { order: 1; display: flex; align-items: center; height: 50px; border-radius: var(--rc); background: var(--k2); }
  .bidwrap:not(.uauc) .bidf .field { flex: 1; min-width: 0; height: 50px; width: auto; background: none; font: 500 18px var(--mono); }
  .bidwrap:not(.uauc) .bidf .ink { display: inline-flex; padding-right: 14px; font-size: 0; }
  .bidwrap:not(.uauc) .bidf .ink::before { width: 11px; height: 16px; }
  .bidwrap:not(.uauc) > .quick { order: 2; margin-top: 8px; }
  .bidwrap:not(.uauc) > .actions > .place { order: 3; width: 100%; margin-top: 10px; }
  .bidwrap:not(.uauc) > .note { order: 4; }
  .bidwrap:not(.uauc) > .maxbid { order: 5; margin-top: 12px; }
  .bidwrap:not(.uauc) > .maxbid .mx-set { background: transparent; border: 1px solid var(--rule2); color: var(--t2); }
}
@media (max-width: 640px) { .toolbar .field, .toolbar select.field { flex: 1 1 calc(50% - 5px); width: auto !important; } }
.ov { overflow-x: hidden; } .showpiece { contain: layout; }

/* ---------- getting started, ending soon, quick bids, bulk actions ---------- */
.quests { margin: 10px 0 0; padding: 18px 20px; border-radius: var(--rc); background: linear-gradient(120deg, rgba(155,93,229,.12), rgba(0,187,249,.06) 60%, transparent); border: 1px solid rgba(155,93,229,.3); }
.qh { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.qh b { font: 600 19px var(--display); letter-spacing: -.02em; }
.qh .meter { flex: 1; max-width: 320px; }
.qh .hideq { margin-left: auto; }
.ql { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
/* (a.q: a quest's row; the search fields are .field.q, and these took their fill and padding away) */
a.q { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--rc); background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 14px; color: var(--t2); transition: background .2s; }
a.q:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.q .qc { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.q.done { opacity: .55; }
.q.done .qc { background: var(--up); border-color: var(--up); color: var(--k0); }
.q.done span:nth-child(2) { text-decoration: line-through; }
.ending { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; padding: 14px 18px; border-radius: var(--rc); background: linear-gradient(90deg, rgba(255,46,85,.16), rgba(255,46,136,.06)); border: 1px solid rgba(255,46,85,.35); color: var(--t1); }
.ending:hover { text-decoration: none; filter: brightness(1.1); }
.ending span:not(.live-dot):not(.btn) { color: var(--t2); flex: 1; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick .chip { height: 28px; font-size: 12.5px; }
.selbtn.on { background: var(--t1); color: var(--k0); }
.bulkbar { position: sticky; bottom: 16px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: var(--rs); background: rgba(16,16,22,.94); border: 1px solid var(--line2); box-shadow: 0 20px 50px -14px #000; }
.bulkbar .grow { flex: 1; }
@media (max-width: 640px) { .bulkbar { bottom: 82px; } .qh { flex-wrap: wrap; } }
.qh .kicker { display: flex; margin-bottom: 2px; }

/* ---------- sweep, follow ---------- */
.sweep { margin: 0 0 16px; padding: 16px 18px; display: grid; gap: 12px; }
.sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sw-row .grow { flex: 1; }
.sweep input[type=range] { flex: 1; min-width: 160px; accent-color: var(--r2); }
.sw-n { font-size: 20px; min-width: 2ch; text-align: right; }
.sw-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-thumbs .thumb { width: 44px; height: 44px; border-radius: var(--ra); overflow: hidden; background: #111; }
.sw-thumbs .thumb img, .sw-thumbs .thumb canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.prof .follow.on { background: rgba(155,93,229,.22); border-color: rgba(155,93,229,.6); }

/* ---------- trending today ---------- */
.trend { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px 14px; }
.tr { display: grid; grid-template-columns: 18px 46px minmax(0, 1fr) 64px 64px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--rc); background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--t1); transition: background .2s; }
.tr:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); text-decoration: none; }
.tr .tn { font: 600 14px var(--mono); color: var(--dim); }
.tr .cthumb { width: 46px; height: 46px; border-radius: var(--ra); overflow: hidden; display: block; background: #111; }
.tr .cthumb img, .tr .cthumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr .ti { display: grid; gap: 4px; min-width: 0; }
.tr .ti b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .tv { display: grid; text-align: right; font-size: 14px; }
.tr .tv small { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 640px) {
  .q.done { display: none; }
  .quests { padding: 14px; }
  .trend { grid-template-columns: 1fr; }
  .tr { grid-template-columns: 14px 40px minmax(0, 1fr) 56px 56px; gap: 10px; padding: 8px 10px; }
  .tr .cthumb { width: 40px; height: 40px; }
  .tr .ti small { display: none; }
}

/* keyboard focus */
:focus-visible { outline: 2px solid var(--r2); outline-offset: 3px; }
.card:focus-visible, .live-row:focus-visible, .act:focus-visible { outline-offset: 2px; border-radius: var(--rc); }
.ask small { display: block; margin-top: 4px; font-size: 12px; }
/* art that hasn't drawn yet shows nothing, not its alt text */
main img:not(.ready), .ov img:not(.ready), .toppanel img:not(.ready), .search-ov img:not(.ready) { color: transparent; font-size: 0; }
.fol { color: var(--r2); font-size: 13px; }
.follows { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--rt); background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--t1); }
.fchip:hover { background: rgba(255,255,255,.09); text-decoration: none; }
.fchip .orb { width: 28px; height: 28px; }
.fchip small { color: var(--dim); }
/* one column: the auction art scrolls with the page instead of sitting over the bids */
@media (max-width: 1000px) { .pd.auction .pd-art { position: static; } }

/* ---------- passkeys ---------- */
.authov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(4,4,6,.66); animation: fadein .25s ease both; }
.authov.out { animation: fadeout .25s ease forwards; }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.authbox { width: min(420px, 100%); padding: 28px 26px 22px; border-radius: var(--rs); text-align: center; background: linear-gradient(180deg, var(--k1), var(--k1)); border: 1px solid var(--line2); box-shadow: 0 40px 100px -20px rgba(0,0,0,.9), 0 0 80px -30px rgba(155,93,229,.6); animation: fadein .2s ease both; }
.authbox h3 { margin: 14px 0 6px; font-size: 22px; letter-spacing: -.03em; }
.authbox p { margin: 0; color: var(--t2); font-size: 14.5px; }
.authbox .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.authbox .actions .btn { width: 100%; height: 50px; }
.ak { width: 64px; height: 64px; margin: 0 auto; border-radius: var(--rc); display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,46,136,.25), rgba(0,187,249,.22)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 40px -12px rgba(155,93,229,.8); }
.ak svg, .pkstate svg, .gate .kicker svg { width: 30px; height: 30px; fill: none; stroke: var(--t1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gate .kicker svg { width: 15px; height: 15px; stroke: currentColor; }
.gate .note { min-height: 22px; }
.linkbtn { background: none; border: 0; padding: 8px; color: var(--dim); font-size: 13.5px; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.2); text-underline-offset: 3px; }
.linkbtn:hover { color: var(--t1); }
.pkstate { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.pkstate svg { width: 26px; height: 26px; flex: none; stroke: var(--dim); }
.pkstate.on { border-color: rgba(0,245,160,.35); background: rgba(0,245,160,.06); }
.pkstate.on svg { stroke: var(--up); }
.pkstate b { display: block; }
.pkstate span { display: block; }
.pk .actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.locked nav, body.locked .createbtn, body.locked .foot { display: none; }

/* ---------- account menu, bid bar, filter sheet (all sizes) ---------- */
nav a svg { display: none; }
.toppanel.menu { width: min(300px, calc(100vw - 24px)); }
.mm-head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.mm-head .orb { width: 44px; height: 44px; flex: none; }
.mm-head b { display: block; font-size: 16px; letter-spacing: -.02em; }
.mm-head:hover b { text-decoration: underline; }
.mm-list { display: flex; flex-direction: column; padding: 6px; }
.mm-list a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--rc); color: var(--t2); font-size: 14.5px; font-weight: 500; }
.mm-list a:hover { background: rgba(255,255,255,.06); color: var(--t1); }
.mm-list svg, .mm-foot svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--dim); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-list .qn { margin-left: auto; }
.mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.mm-foot > span { display: inline-flex; align-items: center; gap: 8px; }
.mm-foot svg { width: 15px; height: 15px; }
.bidbar { display: none; }
.fbtn, .fs-head, .fback, .allbids { display: none; }
.fbtn.on { background: var(--t1); color: var(--k0); }

/* =====================================================================
   phones: an app shell (docked tab bar with icons, compact header,
   sheets), denser type, sideways rails, and touch-first controls
   ===================================================================== */
@media (max-width: 640px) {
  html { -webkit-tap-highlight-color: transparent; }
  body { font-size: 14.5px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  a, button, .chip, .card { touch-action: manipulation; }
  .field, select.field, textarea.field, .sb label .field { font-size: 16px; } /* no zoom on focus in iOS */
  main { padding: 0 16px 24px; min-height: 70vh; }

  /* header */
  .top { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px; grid-template-columns: 1fr auto; gap: 8px; background: rgba(6,6,8,.94); }
  /* (no backdrop-filter on the header: it would trap the fixed tab bar inside it) */
  .brand { font-size: 22px; gap: 8px; }
  .top .right { gap: 8px; }
  .createbtn { display: none; }
  .searchbtn { display: grid !important; }
  .top .wallet { gap: 7px; }
  .iconbtn { width: 36px; height: 36px; border-color: transparent; background: rgba(255,255,255,.06); }
  .iconbtn svg { width: 18px; height: 18px; }
  .inkpill { height: 32px; padding: 0 10px; font-size: 12.5px; }
  .top .orb { width: 32px; height: 32px; }
  .me .badge { top: -3px; right: -5px; }

  /* tab bar */
  nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: auto; overflow: visible; justify-self: auto;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: rgba(8,8,11,.9); box-shadow: 0 -10px 30px -10px rgba(0,0,0,.7); }
  nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; padding: 0; border-radius: var(--rc); font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--t3); transition: color .25s, transform .15s; }
  nav a svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
  nav a:active { transform: scale(.92); }
  nav a.on { color: var(--t1); }
  nav a.on svg { stroke-width: 2.1; transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(179,136,255,.65)); }
  .nav-pill { top: 0; bottom: auto; height: 2px; border-radius: 0 0 var(--ra) var(--ra); background: var(--grad); background-size: 300% 100%; box-shadow: 0 0 14px rgba(155,93,229,.9); clip-path: inset(0 28%); }

  /* toasts, panels, search: full width */
  .toasts { left: 10px; right: 10px; transform: none; bottom: calc(74px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; border-radius: var(--rs); }
  .toppanel { top: calc(60px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 150px); border-radius: var(--rs); }
  .toppanel.menu { left: auto; width: min(300px, calc(100vw - 16px)); }
  .search-ov { padding: calc(10px + env(safe-area-inset-top)) 8px 0; align-items: flex-start; }
  .search-box { width: 100%; }
  .search-box .sq { height: 56px; font-size: 16px; padding: 0 18px; }
  .sr { max-height: calc(100dvh - 160px); }
  .search-hint { display: none; }

  /* type and sections */
  .page-head { padding: 22px 0 16px; gap: 12px; }
  .page-head h1 { font-size: 32px; }
  .page-head p { font-size: 14px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .kicker { font-size: 12px; letter-spacing: .1em; max-width: 100%; }
  .page-head .kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .page-head .kicker .live-dot { display: inline-block; vertical-align: 1px; margin-right: 6px; }
  .page-head > div:first-child { min-width: 0; max-width: 100%; }
  .sec-head { margin: 34px 0 12px; align-items: center; }
  .sec-head h2 { font-size: 17px; }
  .sec-head .aside { display: none; }
  .sec-head a { font-size: 13px; white-space: nowrap; }
  .btn { height: 46px; }
  .btn.sm { height: 36px; }
  .btn:hover { transform: none; }
  .btn:active { transform: scale(.97); }
  .foot { padding: 28px 16px 24px; margin-top: 24px; }
  .foot .footlinks { display: none; }
  .foot p { font-size: 12px; line-height: 1.5; }

  /* chips and segments scroll sideways, edge to edge */
  .toolbar > .chips, .page > .chips, .chips.cakinds, .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: none; }
  .toolbar > .chips, .page > .chips, .chips.cakinds { margin-left: -16px; margin-right: -16px; padding: 0 16px; flex: 1 1 100%; }
  .toolbar > .chips::-webkit-scrollbar, .page > .chips::-webkit-scrollbar, .chips.cakinds::-webkit-scrollbar { display: none; }
  .chip { flex: none; height: 36px; }
  .page-head .seg { width: 100%; }
  .page-head .seg button { flex: 1 0 auto; }
  .toolbar { gap: 8px; margin-bottom: 16px; }

  /* cards: tighter, no tilt, quieter likes */
  .grid { gap: 10px; }
  .card { padding: 6px; border-radius: var(--rc); transform: none !important; }
  .card:hover { box-shadow: none; }
  .card-art { border-radius: var(--ra); }
  .card-body { padding: 8px 4px 3px; }
  .card-row { gap: 6px; }
  .card-title { font-size: 13.5px; }
  .card-sub { font-size: 12px; margin-top: 1px; }
  .card .odds { font-size: 12px; gap: 4px; }
  .card .odds::before { width: 5px; height: 5px; }
  .card-foot { margin-top: 7px; padding-top: 7px; }
  .price { font-size: 13.5px; }
  .like { height: 26px; right: 6px; bottom: 6px; padding: 0 8px 0 7px; font-size: 11px; }
  .fbadges { top: 6px; left: 6px; }
  .fbadge { height: 19px; padding: 0 7px; font-size: 9px; }
  .card-art { --fpi: 6px; --fpw: 30px; }
  .fpmark.fp-br ~ .like { right: calc(var(--fpi) + var(--fpw) + 4px); bottom: calc(var(--fpi) + (var(--fpw) - 26px) / 2); }
  .glare { display: none; }
  .card.sel::after { top: 12px; right: 12px; }

  /* rails: rows of prints slide sideways and snap (.grid.rail so the later phone .grid columns can't squash the first
     two cards to 0 px, as the daily's Past days did: the UX pass, 2026-10-24) */
  .grid.rail, .rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 8px; scroll-padding: 0 16px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
  .ov .rail { margin: 0 -14px; padding: 2px 14px 8px; scroll-padding: 0 14px; }

  /* home */
  .hero { padding-top: 26px; gap: 22px; }
  .hero h1 { font-size: 60px; margin-top: 14px; }
  .hero p.lead { font-size: 15.5px; margin-top: 16px; }
  .hero .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hero .cta .btn { height: 50px; padding: 0 12px; font-size: 15px; }
  .stats { gap: 0; margin-top: 24px; justify-content: space-between; padding: 14px 18px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
  .stat b { font-size: 22px; }
  .stat span { font-size: 12px; }
  .showpiece .frame { border-radius: var(--ra); }
  .showmeta { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: var(--rc); }
  .split { gap: 0; }
  .split > div, .pd-info, .cbody > div { min-width: 0; }
  .bidwrap .note:empty { min-height: 0; margin: 0; }
  .bidwrap .subhead { margin-top: 20px; }
  .live-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding: 8px; }
  .live-row .thumb { width: 42px; height: 42px; }
  .live-row .txt { font-size: 13px; }
  .live.big .live-row { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 9px 8px; }
  .live.big .thumb { width: 46px; height: 46px; }
  .panel { border-radius: var(--rc); padding: 6px; }
  .quests { margin-top: 18px; border-radius: var(--rc); }
  .ending { padding: 12px 14px; gap: 10px; }
  .ending span:not(.live-dot):not(.btn) { flex-basis: 100%; order: 3; font-size: 13px; }

  /* drops */
  .drop { min-height: 330px; padding: 18px; border-radius: var(--rc); }
  .drop h3 { font-size: 34px; }
  .drop .tag { top: 14px; left: 14px; }
  .dailycard { padding: 10px; gap: 14px; border-radius: var(--rc); }
  .dc-info { padding: 0 6px 6px; }
  .dc-info h3 { font-size: 28px; }
  .dc-row { gap: 18px; }
  .dc-row .btn { margin-left: 0; flex: 1 1 100%; }
  .daily:not(.kpill) { padding: 14px 16px; border-radius: var(--rc); }
  .series-grid.inf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* market tables */
  .crow { padding: 9px 4px; gap: 10px; }
  .crow.head { font-size: 12px; }
  .kpill { flex: none; white-space: nowrap; }
  .cname { gap: 10px; }
  .cname b { font-size: 14px; }
  .crow .num { font-size: 13px; }
  .tr { border-radius: var(--rc); }

  /* collection */
  .banner { height: 150px; margin-top: 14px; border-radius: var(--rc); }
  .chead { margin-top: -46px; padding: 0 4px; gap: 14px; }
  .cthumb.big { width: 84px; height: 84px; border-radius: var(--ra); }
  .chead .grow { min-width: 100%; }
  .chead h1 { font-size: 32px; }
  .cdesc { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ccta { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ccta > .btn:first-child, .ccta > a.btn:first-child { grid-column: 1 / -1; }
  .ccta > .dim, .ccta .offerbox { grid-column: 1 / -1; text-align: left !important; margin-top: 0 !important; }
  .ccta .btn { padding: 0 10px; }
  .offerbox { max-width: none; margin: 0; justify-content: flex-start; }
  .offerbox .field { flex: 1; }
  .offerbox .dim { text-align: left; }
  .cstats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; margin: 18px -16px 16px; padding: 14px 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .cstats::-webkit-scrollbar { display: none; }
  .cstats > div { flex: none; }
  .cstats b { font-size: 17px; white-space: nowrap; }
  .ctabs { margin-bottom: 14px; }
  .cbody { display: block; }
  .fbtn { display: inline-flex; }
  .fback { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .filters { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; top: auto; max-height: 78dvh; overflow-y: auto; overscroll-behavior: contain; flex-direction: column; flex-wrap: nowrap; gap: 16px;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom)); border-radius: var(--rc) var(--rc) 0 0; background: var(--k1); border-top: 1px solid var(--line2); box-shadow: 0 -30px 80px -20px #000;
    transform: translateY(105%); transition: transform .4s var(--ease); }
  .fopen .filters { transform: none; }
  .fopen .fback { opacity: 1; pointer-events: auto; }
  .fs-head { display: flex; position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between; margin: 0 -16px; padding: 20px 16px 12px; background: var(--k1); }
  .fs-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: var(--rc); background: rgba(255,255,255,.2); }
  .fs-head b { font-size: 19px; letter-spacing: -.02em; }
  .fgroup { min-width: 0; }
  .fopt { padding: 11px 10px; font-size: 14.5px; }
  body.sheet-open { overflow: hidden; }
  .cbody .toolbar .sort { flex: 1 1 100%; }
  .act { gap: 8px; padding: 8px 4px; font-size: 13px; }

  /* daily auction */
  .dayrow { gap: 8px; margin-top: 4px; }
  .dayrow .btn { height: 36px; }
  .pd.auction { gap: 18px; }
  .pd-info { display: flex; flex-direction: column; }
  .pd-info > * { order: 3; }
  .pd-info > .pnav, .pd-info > .kicker, .pd-info > .pd-title, .pd-info > .facts { order: 0; }
  .pd-info > .owner, .pd-info > .lockline, .pd-info > .uauc, .pd-info > .actions, .pd-info > .likethis, .pd-info > .sendbox, .pd-info > .note, .pd-info > .bb { order: 1; }
  .pd-info > .traits, .pd-info > .why { order: 2; }
  .traits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .trait { padding: 8px 9px; border-radius: var(--rc); }
  .trait span { font-size: 12px; letter-spacing: .07em; }
  .trait b { font-size: 13px; }
  .trait i { font-size: 12px; }
  .bidbox { gap: 8px; margin-top: 2px; }
  .bidbox > div { padding: 12px 14px; }
  .bidbox b { font-size: 24px; }
  .bidwrap .actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .auction .actions .field { width: 100%; height: 50px; font-size: 18px; }
  .bidwrap .actions .btn { height: 50px; padding: 0 22px; }
  .quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .quick .chip { height: 34px; justify-content: center; padding: 0; }
  .maxbid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
  .maxbid .field { flex: 1; min-width: 0; height: 40px; }
  .bids:not(.all) li:nth-child(n+6) { display: none; }
  .allbids { display: block; margin: -4px 0 4px; }
  .allbids.hidden { display: none; }
  .bidbar { position: fixed; z-index: 29; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 16px; border-radius: var(--rs); cursor: pointer; text-align: left;
    background: rgba(20,18,30,.9); border: 1px solid rgba(255,106,213,.35); box-shadow: 0 16px 40px -12px #000, 0 0 40px -16px rgba(255,46,136,.6); color: var(--t1);
    transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .4s var(--ease), opacity .3s; }
  .bidbar.show { transform: none; opacity: 1; pointer-events: auto; }
  .bidbar .bl { display: flex; flex-direction: column; min-width: 0; }
  .bidbar small { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
  .bidbar b { font-size: 16px; white-space: nowrap; }
  .bidbar em { font-style: normal; margin-left: 6px; font-size: 12px; color: var(--up); }
  .bidbar .btn { margin-left: auto; height: 40px; padding: 0 20px; }
  .auc { grid-template-columns: 96px minmax(0, 1fr); padding: 12px; gap: 12px; }

  /* print sheet */
  .ov { overscroll-behavior: contain; background: rgba(4,4,6,.94); }
  .ov-box { padding: calc(14px + env(safe-area-inset-top)) 14px calc(40px + env(safe-area-inset-bottom)); }
  .x { top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; background: rgba(20,20,26,.75); }
  .pd { gap: 18px; }
  .pd-art .frame { border-radius: var(--ra); }
  .pd-info h2 { font-size: 34px; }
  .pd-title { gap: 10px; }
  .pd-tools { gap: 6px; }
  .pd-tools .btn.sm { height: 36px; padding: 0 12px; }
  .like.big { height: 36px; }
  .pnav { margin: 0 0 8px; }
  .pnav .btn { width: 44px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 16px 0 10px; }
  .fact { padding: 9px 10px; border-radius: var(--rc); }
  .fact > span:first-child { font-size: 12px; }
  .fact b { font-size: 14px; }
  .fact .odds { font-size: 12px; }
  .fact small { display: block; font-size: 12px; }
  .owner { padding: 12px 14px; margin: 4px 0 10px; }
  .pd-info > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pd-info > .actions .btn { width: 100%; padding: 0 8px; }
  .pd-info > .actions .field { width: 100%; height: 46px; }
  .pd-info > .actions .btn:only-child { grid-column: 1 / -1; }
  .sendbox { display: grid; grid-template-columns: 1fr; }
  .exp { gap: 8px; }
  .timeline li { font-size: 13px; }
  .tradebar { margin: 12px -4px; padding: 12px; border-radius: var(--rc); }

  /* inventory */
  .kpis { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 0 -16px 18px; padding: 0 16px; }
  .kpis::-webkit-scrollbar { display: none; }
  .kpi { flex: none; min-width: 112px; padding: 10px 14px; border-radius: var(--rc); }
  .kpi > span:first-child { font-size: 12px; }
  .kpi b { font-size: 20px; margin-top: 2px; }
  .kpi .odds { font-size: 13px; margin-top: 6px; }
  .toolbar .field.q, .toolbar .field.mq { flex: 1 1 58% !important; order: 1; }
  .toolbar .selbtn { order: 2; height: 38px; }
  .toolbar select.field { order: 3; flex: 1 1 28% !important; min-width: 0; padding: 0 26px 0 10px; font-size: 13.5px; background-position: calc(100% - 13px) 16px, calc(100% - 8px) 16px; }
  .bulkbar { bottom: calc(74px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 10px; border-radius: var(--rs); }
  .bulkbar .bn { grid-column: 1 / 3; align-self: center; padding-left: 4px; }
  .bulkbar .grow { display: none; }
  .bulkbar .btn { padding: 0 6px; }
  .bulkbar .bdone { grid-column: 3; grid-row: 1; }
  .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fam-head .meter { width: 90px; }

  /* profile */
  .prof { margin-top: -48px; padding: 0 4px; gap: 12px; }
  .prof .orb { width: 88px; height: 88px; box-shadow: 0 0 0 4px var(--bg), 0 20px 50px -10px rgba(0,0,0,.8); }
  .prof .grow { flex-basis: 100%; }
  .prof h1 { font-size: 30px; }
  .prof .sub { font-size: 13px; }
  .profside { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .offer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; padding: 12px; }
  .offer .from { grid-column: 1 / -1; }
  .offer .side { justify-content: center; flex-wrap: wrap; }
  .offer .card { width: 100%; max-width: 130px; }
  .offer > .ink { grid-column: 1 / -1; grid-row: 4; justify-self: center; }
  .offer .arrow { align-self: center; }
  .offer .grow { display: none; }
  .offer .acc, .offer .dec { grid-row: 5; }
  .offer .acc { grid-column: 1 / 3; }
  .offer .dec { grid-column: 3; }

  /* settings, create, help */
  .step { padding: 16px; gap: 10px; border-radius: var(--rc); }
  .sn { display: none; }
  .sb h3 { margin-top: 0; font-size: 18px; }
  .pk .actions .btn { flex: 1 1 auto; }
  .faq details { padding: 14px 16px; }

  /* onboarding, sign-in */
  .onb { min-height: calc(100dvh - 180px); }
  .onb h1 { font-size: 54px; }
  .onb p { font-size: 15px; }
  .onb .orb { width: 112px; height: 112px; margin: 24px auto 12px; }
  .onb .row { flex-wrap: nowrap; padding: 0 4px; }
  .onb .field { flex: 1; min-width: 0; width: auto; }
  .onb .go { width: 100%; }
  body.locked { padding-bottom: 0; }
  .authov { align-items: end; padding: 0; }
  .authbox { width: 100%; border-radius: var(--rs) var(--rs) 0 0; padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); }

  /* pack opening */
  .stage { gap: 16px; justify-content: flex-start; padding: calc(60px + env(safe-area-inset-top)) 0 calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .stage .title h2 { font-size: 26px; }
  .pack { width: 210px; height: 302px; margin-top: 6vh; flex: none; }
  .deal { gap: 10px; padding: 0 12px; width: 100%; }
  .flip { width: calc(50% - 5px); max-width: 190px; height: auto; aspect-ratio: 214 / 300; }
  .stage .after { padding: 0 16px; }
}
@media (max-width: 640px) and (hover: none) { .card:hover .card-art img { transform: none; } }
@media (max-width: 370px) {
  .hero h1 { font-size: 50px; }
  .inkpill { padding: 0 8px; font-size: 12px; }
  .top .wallet { gap: 5px; }
  nav a { font-size: 12px; }
}

/* ---------- ink gem options ---------- */
.gemgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gm { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.gm.on { border-color: rgba(255,210,63,.6); box-shadow: 0 0 0 1px rgba(255,210,63,.3), 0 20px 50px -20px rgba(255,170,20,.5); }
.gm-art { position: relative; height: 170px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(60% 60% at 50% 50%, rgba(255,190,40,.16), transparent 70%), #0b0b10; box-shadow: inset 0 0 0 1px var(--line); }
.gm-big svg { display: block; height: 118px; width: auto; filter: drop-shadow(0 10px 24px rgba(255,160,0,.35)); animation: gemfloat 5s ease-in-out infinite; }
@keyframes gemfloat { 50% { transform: translateY(-5px) rotate(-2deg); } }
.gm-art .tw { position: absolute; left: 36%; top: 24%; width: 18px; height: 18px; background: radial-gradient(circle, #fff 0 12%, transparent 13%), linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat; border-radius: 50%; opacity: 0; animation: twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -370ms); filter: drop-shadow(0 0 4px #fff); }
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
.gm-mock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(6,6,8,.8); border: 1px solid var(--line); }
.gm-sizes { display: flex; align-items: end; gap: 14px; padding: 0 4px; }
.gm-sizes .s1 { height: 12px; width: calc(12px * var(--gem-ar)); }
.gm-sizes .s2 { height: 16px; width: calc(16px * var(--gem-ar)); }
.gm-sizes .s3 { height: 24px; width: calc(24px * var(--gem-ar)); }
.gm-sizes .s4 { height: 40px; width: calc(40px * var(--gem-ar)); }
.gm .btn { align-self: flex-start; }
@media (max-width: 640px) { .gemgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gm { padding: 10px; } .gm-art { height: 130px; } .gm-big svg { height: 92px; } .gm-mock { padding: 8px; gap: 6px 10px; } .gm-mock .small:last-child { display: none; } }

/* ---------- server: sign-in, invites, the public record, odds, verify ---------- */
.gate .join { max-width: 440px; margin: 34px auto 0; padding: 22px; display: grid; gap: 4px; text-align: center; }
.gate .join > b { font-size: 18px; }
.gate .join .orb { width: 64px; height: 64px; margin: 12px auto 4px; animation: none; }
.gate .join .row { margin-top: 8px; }
.gate .join .field.icode { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gate .join .check { justify-content: center; margin-top: 10px; }
.gate .join p { margin: 10px 0 0; font-size: 13px; }
.gate .row a.btn { height: 50px; }
.invlist { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.inv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.inv .ic { font-size: 14px; color: var(--t1); word-break: break-all; }
.inv.used { opacity: .7; }
.recstats { margin-bottom: 8px; }
.ckpt { white-space: pre-wrap; word-break: break-all; font: 12px/1.5 var(--mono); color: var(--dim); background: var(--k1); padding: 12px; border-radius: var(--rc); }
.act.rec { grid-template-columns: 74px 0 minmax(0, 1fr) 140px 0 44px; }
.okc { color: var(--up); font-weight: 600; } .bad { color: var(--down); }
.oddsgrid { display: grid; gap: 8px; }
.oddrow { display: grid; grid-template-columns: 210px 80px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.oddrow b { font: 600 18px var(--mono); }
.vbox { margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--rc); background: rgba(0,245,160,.04); border: 1px solid rgba(0,245,160,.25); }
.vsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vsteps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; font-size: 14px; }
.vsteps li small { grid-column: 2; color: var(--dim); font-size: 12.5px; }
.vsteps .vs { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: rgba(255,255,255,.08); }
.vsteps li.ok .vs { background: var(--up); color: var(--k0); } .vsteps li.bad .vs { background: var(--live); color: var(--t1); } .vsteps li.wait .vs { background: var(--ink); color: var(--k0); }
.pack.sealing { animation: bob 1.4s ease-in-out infinite; filter: saturate(.7) brightness(.9); }
.pack.sealing .label span { font-size: 12px; }
@media (max-width: 640px) {
  .oddrow { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; }
  .oddrow .dim { grid-column: 1 / -1; }
  .act.rec { grid-template-columns: 58px 0 minmax(0, 1fr) 80px 0 30px; }
  .gate .join { padding: 16px; }
}
@media (max-width: 640px) { .offer:not(:has(.acc)) .dec { grid-column: 1 / -1; } }

.page-head p.full { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* a head that ends with its paragraph keeps 16 px under it (on Help, What's new, House rules, Activity and Settings
   the paragraph sat 0-4 px over the rule or chips below; a head ending in tabs, or followed by a section with its own
   space above, as before, the margins taking the larger: the UX pass, 2026-10-24) */
.page-head:has(> div:last-child > p:last-child) { margin-bottom: 16px; }
.stage .hint { text-align: center; padding: 0 24px; }
@media (max-width: 640px) { .pd-info > .vbox { order: 0; } }
.act.rec .an b { white-space: normal; font-weight: 500; }

/* the founder's page */
.admlines { padding: 6px 16px; margin-bottom: 8px; }
.admlines > div { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.admlines > div:last-child { border-bottom: 0; }
.admlines span { color: var(--dim); min-width: 150px; }
.admlines b { font-weight: 500; }
.adm .invlist { margin-bottom: 8px; }
.adm .inv .bad { color: #ff7a7a; }

/* recovery codes */
.rcov { align-items: center; padding: 16px; z-index: 90; }
.rcbox { padding: 24px; display: grid; gap: 12px; max-width: 460px; }
.rcbox h2 { margin: 0; font-size: 24px; }
.rcbox p { margin: 0; }
.rccode { font-size: 20px; letter-spacing: .06em; text-align: center; padding: 16px 12px; border-radius: var(--rc); background: rgba(255,210,63,.07); border: 1px dashed rgba(255,210,63,.45); color: var(--t1); word-break: break-all; user-select: all; }
.gate .lost { max-width: 440px; margin: 10px auto 0; }
.gate .lost summary { cursor: pointer; list-style: none; }
.gate .lost summary::-webkit-details-marker { display: none; }
.gate .lost .row { margin-top: 10px; }
.gate .lost .rc { flex: 1; text-transform: uppercase; font-family: 'Space Mono', monospace; }
.rcwarn { padding: 12px 14px; border-radius: var(--rc); margin-bottom: 12px; background: rgba(255,210,63,.08); border: 1px solid rgba(255,210,63,.4); font-size: 14px; }
.pklist { display: grid; gap: 6px; margin: 10px 0 2px; }
.pkrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: var(--rc); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
/* a passkey reset through Discord, its hold and "This wasn't me"; the recovery code nudge (plans/pk-reset.md) */
.pkcard { position: relative; }
.pkcard b, .pkcard > span { display: block; }
.pkcard > span { margin-top: 4px; color: var(--t2); }
.pkcard .actions { margin-top: 10px; }
.pkcard.bad { background: rgba(255,77,109,.08); border-color: rgba(255,77,109,.5); }
.pkcard .pkx { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--dim); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.pkcard:has(.pkx) b { padding-right: 24px; }
.pklost { display: inline-block; padding: 8px 0 0; }
.authbox .note a { color: var(--t1); text-decoration: underline; }

/* house rules */
.rules { max-width: 720px; display: grid; gap: 14px; }
.rules-sec { padding: 18px 20px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); }
.rules-sec h2 { margin: 0 0 8px; font-size: 19px; }
.rules-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--t2); line-height: 1.5; }
.locked .rules-sec a, .rules-sec a { color: var(--t1); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
.gate .age a { color: var(--t1); text-decoration: underline; }

/* the server can't be reached */
.offbar { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 95; padding: 8px 16px; border-radius: var(--rt); background: rgba(30,30,38,.95); border: 1px solid var(--line2); color: var(--t2); font-size: 13.5px; box-shadow: 0 10px 30px -10px #000; animation: page .25s ease; }
.offbar::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ffb020; margin-right: 8px; vertical-align: 1px; }
@keyframes blink { from { opacity: .3; } to { opacity: 1; } }
.inv .grow { flex: 1; }
.adm .invlist { max-width: 980px; }
.sb label.btn { display: inline-flex; margin-bottom: 0; color: var(--t1); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.infbar { margin: -4px 0 14px; }
.infbar .iq { flex: 1; min-width: 160px; }
.infmore { justify-content: center; margin-top: 16px; }
.pubprint .pp-art { width: min(420px, 86vw); margin: 18px auto 10px; }
.pubprint .pp-title { font-size: clamp(34px, 9vw, 56px); margin: 6px 0; }
/* a shared print's traits, as on its own page (a list, read left to right) */
.pubprint .pp-traits { width: min(440px, 100%); margin: 30px auto 0; text-align: left; }
.pubprint .pp-traits .subhead { margin: 0 0 6px; }
.pubprint .pp-msg { margin-top: 12px; }
.pubprint .fpline { justify-content: center; }
.pubprint .pp-msg:empty { min-height: 0; }
/* a shared profile's or collection's page, signed out (publicPage; the growth plan's idea 2): a few of its prints */
.pubpage .pub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(420px, 100%); margin: 18px auto; }
.pubpage .pub-tile { aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: var(--k1); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.pubpage .pub-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pubpage .pub-tile img.px { image-rendering: pixelated; }
/* a gift link's page (app.js giftPage, giftMember; the growth plan's idea 1): the sealed pack, large, and who gives it */
.giftpage .gp-pack { display: flex; justify-content: center; margin: 22px auto 12px; }
.giftpage .gp-pack .mosaic.sface { width: min(220px, 56vw); height: min(220px, 56vw); border-radius: var(--rc); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 50px -18px rgba(155,93,229,.6); }
.giftpage .gp-from { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 14px; text-align: left; }
.giftpage .gp-from .orb { width: 34px; height: 34px; flex: none; }
.giftpage.gp-in { max-width: 560px; padding-top: 22px; }
.giftpage.gp-in .gp-pack { justify-content: flex-start; }
.dr-came.gift .dr-ci .mosaic.sface { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.giftbox { margin: 0 0 10px; padding: 12px 14px; }
.giftbox p { margin: 0 0 10px; max-width: 620px; }
.giftbox .note:empty { display: none; }
/* their buttons apart at 390 px, and the signed-in page's heading given room */
.giftbox .row, .giftpage .row { display: flex; flex-wrap: wrap; gap: 10px; }
.giftpage.gp-in .kicker { margin: 0 0 4px; }
.giftpage.gp-in .gp-pack { margin: 14px 0 18px; }
.giftpage.gp-in .pp-title { margin: 0 0 14px; line-height: 1.05; }
.giftpage.gp-in p { margin: 0 0 12px; }
.srow.glink .gifttag { color: var(--t1); border-color: var(--rule2); }
/* joining from a shared print: only the sign-up's steps (the name, then the passkey or Discord), no code step */
.gate.shared > div > :not(.join) { display: none; }
.gate.shared .join { margin-top: 0; }
.gate.shared .jdots i:first-child { display: none; }
.lnk { cursor: pointer; text-decoration: underline; color: var(--t1); }

/* add to Home Screen, on phones */
.installcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 14px 0; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); position: relative; }
.installcard img { width: 42px; height: 42px; border-radius: var(--ra); image-rendering: pixelated; flex: none; }
.installcard > div { flex: 1; min-width: 0; }
.installcard b { display: block; }
.installcard span { display: block; }
.installcard .ix { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--dim); cursor: pointer; flex: none; font-size: 14px; }
@media (max-width: 640px) {
  .tradebar { flex-wrap: wrap; }
  .tradebar .grow { flex: 1 1 100%; }
  .tradebar .field { flex: 1; width: auto !important; }
}

/* the sign-in screen's fan of prints */
.gate .fan { position: relative; height: 150px; width: 260px; margin: 0 auto 18px; }
.gate .fan .fc { position: absolute; top: 10px; left: 50%; width: 120px; height: 120px; margin-left: -60px; border-radius: var(--ra); overflow: hidden; background: #111; box-shadow: 0 24px 50px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12); animation: fanin .7s cubic-bezier(.2,.8,.2,1) both; }
.gate .fan .fc img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; }
.gate .fan .fc img.ready { opacity: 1; }
.gate .fan .fc img.px { image-rendering: pixelated; }
.gate .fan .f0 { --r: -14deg; --x: -78px; z-index: 1; }
.gate .fan .f1 { --r: 0deg; --x: 0px; top: 0; z-index: 2; }
.gate .fan .f2 { --r: 14deg; --x: 78px; z-index: 1; animation-delay: .08s; }
.gate .fan .fc { transform: translateX(var(--x)) rotate(var(--r)); }
@keyframes fanin { from { transform: translateX(0) rotate(0) translateY(20px); opacity: 0; } }
/* the record's rows: no empty columns */
.act.rec > span:nth-child(2), .act.rec > span:nth-child(5) { display: none; }
.act.rec { grid-template-columns: 74px minmax(0, 1fr) 140px 44px; }
@media (max-width: 640px) { .act.rec { grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 8px; } }
@media (max-width: 640px) { .fam .slot { aspect-ratio: auto; min-height: 66px; border-radius: var(--rc); } }
.pkbody > .actions { margin: 10px 0 6px; }

/* joining, in three steps */
.gate .join .jdots { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.gate .join .jdots i { width: 26px; height: 4px; border-radius: var(--ra); background: var(--line2); transition: background .3s; }
.gate .join .jdots i.on { background: linear-gradient(90deg, var(--r1), var(--r2)); }
.gate .join .js { display: grid; gap: 6px; animation: page .25s ease; }
.gate .join .js[hidden] { display: none; }
.gate .join .jt { font-size: 19px; }
.gate .join .js p { margin: 0 0 6px; }
.gate .join .fl { display: grid; gap: 6px; text-align: left; font-size: 12.5px; color: var(--dim); font-weight: 600; margin-top: 4px; }
.gate .join .fl > span:first-child { padding-left: 4px; }
.gate .join .fl .row { margin-top: 0; justify-content: flex-start; flex-wrap: nowrap; }
.gate .join .fl .field { width: 100%; text-align: left; padding: 0 16px; }
.gate .join .fl .nm { flex: 1; }
.gate .join .check { justify-content: flex-start; text-align: left; padding: 10px 12px; border-radius: var(--rc); background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; }
.gate .join .check input { flex: none; width: 22px; height: 22px; }
.btn.ghost { background: none; border-color: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--t1); }

/* the welcome tour */
.tourov { align-items: center; padding: 16px; z-index: 90; }
.tourbox { padding: 24px 22px 18px; max-width: 440px; display: grid; gap: 10px; text-align: center; }
.tourbox .tdots { display: flex; gap: 6px; justify-content: center; }
.tourbox .tdots i { width: 22px; height: 4px; border-radius: var(--ra); background: var(--line2); }
.tourbox .tdots i.on { background: linear-gradient(90deg, var(--r1), var(--r2)); }
.tourbox .ticon { font-size: 40px; line-height: 1; margin: 12px 0 2px; color: var(--t1); }
.tourbox .ticon .ink { font-size: 44px; }
.tourbox h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.02em; }
.tourbox p { margin: 0; color: var(--t2); line-height: 1.55; font-size: 15px; min-height: 96px; }
.tourbox .textra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; min-height: 10px; }
.tourbox .tactions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.tourbox .tactions .grow { flex: 1; }
.gate .join .fromwho { color: var(--t1); font-weight: 600; font-size: 14px; } .gate .join .fromwho:empty { display: none; }
/* phones: a card's name gets its own line, its odds go under it (names were cut to "Poly…") */
@media (max-width: 640px) {
  .card-body > .card-row:first-child { flex-direction: column; align-items: flex-start; gap: 3px; }
  .card-body > .card-row:first-child .card-title { max-width: 100%; }
}
.bad { color: var(--down); }
/* white text stays readable when the gradient passes through yellow and green */
.pubprint .pp-title { color: var(--t1); }
.dc-row span.btn { display: inline-flex; text-transform: none; letter-spacing: -.01em; font-size: 14.5px; font-weight: 600; color: var(--t1); }
.search-box { position: relative; }
.search-box .sx { display: none; position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--t2); font-size: 15px; cursor: pointer; z-index: 1; }
@media (max-width: 640px) { .search-box .sx { display: block; } .search-box .sq { padding-right: 60px !important; } }
.tourbox .sx, .rcbox .sx { display: none !important; }
/* phones: stat strips that scroll sideways fade at the edge, so it's clear there's more */
@media (max-width: 640px) { .cstats.more, .kpis.more, .seg.mseg.more { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); } }
/* offers: who gives what, labelled */
.offer .from { flex: 1 1 100%; font-weight: 500; }
.offer .oside { display: grid; gap: 6px; align-content: start; }
.offer .olabel { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--dim); }
.offer .oink { font-size: 14px; color: var(--t2); }
.offer .oacts { display: flex; flex-wrap: wrap; gap: 8px; }
/* the two sides start level, so "They give you" and "For your" sit on one line, each side's prints under its label (one
   with more under it, an ink line or a You have tag, pushed the other's label 27-37 px down: the UX pass, 2026-10-24) */
.offer { align-items: flex-start; }
.offer > .arrow, .offer > .oacts { align-self: center; }
@media (max-width: 640px) { .offer .side { justify-content: flex-start; } }
@media (max-width: 640px) { .offer .oacts { flex: 1 1 100%; } .offer .oacts .btn { flex: 1; } .offer .card { width: 112px; } .offer .side { flex-wrap: wrap; } }
.pd .hash .small { margin-right: 6px; }
.ctop .cname, .ctop .cn { min-width: 0; }
.ctop .cn b, .ctop .cn small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youpill { display: inline-block; padding: 1px 7px; margin-left: 4px; border-radius: var(--rt); font-size: 12px; font-weight: 600; background: rgba(155,93,229,.25); color: var(--t2); vertical-align: 1px; }
.mrow small, .crow .cn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .actions .pricef, .actions .pricef { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; height: 44px; min-width: 0; }
.actions .pricef .field { flex: 1; min-width: 0; height: 40px; }
.actions .pricef .small { white-space: nowrap; }
.crow .cname, .crow .cn { min-width: 0; } .crow .cn small { display: block; }
/* phones: bigger tap targets for small buttons and the display checkboxes */
@media (max-width: 640px) {
  .btn.sm, .pd-tools .btn.sm { height: 40px; }
  .sb .check { min-height: 44px; padding: 6px 0; }
  .sb .check input { width: 22px; height: 22px; flex: none; }
  .iconbtn { width: 40px; height: 40px; }
}
/* tall dialogs on short screens (landscape, large text) scroll instead of hiding their buttons */
.tourov, .rcov { overflow-y: auto; }
.tourov .tourbox, .rcov .rcbox { margin: auto; max-height: none; }
@media (max-height: 640px) { .tourov, .rcov { align-items: flex-start; } }
.gate .gatedc { margin: 14px auto 0; } .gate .gatedc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* the free pull and a pack, one tap each (Home) */
.collect { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.collect button { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--rc); text-align: left; color: var(--t1); font: inherit; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--line2); transition: transform .15s, border-color .15s, background .15s; }
.collect button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(255,255,255,.3); }
.collect button:disabled { cursor: default; opacity: .62; }
.collect .cb-ic { font-size: 26px; line-height: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--rc); background: rgba(255,255,255,.06); flex: none; }
.collect .cb-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.collect .cb-t b { font-size: 16px; letter-spacing: -.01em; }
.collect .cb-t small { color: var(--dim); font-size: 12.5px; }
.collect .cb-free.ready { background: linear-gradient(120deg, rgba(64,220,160,.22), rgba(90,140,255,.16)); border-color: rgba(90,230,170,.55); box-shadow: 0 0 0 1px rgba(90,230,170,.15), 0 12px 30px -14px rgba(60,220,160,.6); }
.collect .cb-pack:not(:disabled) { background: linear-gradient(120deg, rgba(255,90,170,.18), rgba(255,170,60,.12)); border-color: rgba(255,120,170,.45); }
@keyframes giftbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
@media (max-width: 640px) { .collect { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; } .collect button { padding: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .collect .cb-free.ready .cb-ic { animation: none; } }
/* a print opened from a pack's results sits above them */
.ov.over { z-index: 60; }
.after .taphint { width: 100%; text-align: center; margin: 0 0 4px; }
.home > .collect:first-child { margin-top: 18px; }

/* the large view: a piece that answers the pointer, and a sound button for one that makes sound */
.showpiece.plays .frame canvas { cursor: crosshair; }
.sndbtn { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 44px; height: 44px; touch-action: manipulation; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55); color: var(--t1); font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.sndbtn:hover { background: rgba(0,0,0,.75); }
.sndbtn.on { border-color: rgba(90,230,170,.7); box-shadow: 0 0 0 3px rgba(90,230,170,.18); }
/* a Turned print's: outside its tilt, in a box the frame's own size, upright and still over its lower corner (a
   member's report, 2026-10-19, #82); a little further in, where the crooked print still covers it */
.sndwrap { position: relative; }
.sndwrap > .sndbtn { right: 22px; bottom: 22px; }
.playhint { position: relative; z-index: 1; margin-top: 10px; text-align: center; color: var(--dim); font-size: 12.5px; }
.phmore { display: none; }

/* ---------- opening a pack (2026-10-13 redesign) ---------- */
@property --fx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --fy { syntax: '<percentage>'; inherits: true; initial-value: 25%; }
@property --cut { syntax: '<number>'; inherits: true; initial-value: 0; }
.pk-stage { --amb: 124,92,255; background: radial-gradient(70% 60% at 50% 42%, rgba(var(--amb), .26) 0%, rgba(var(--amb), 0) 62%), radial-gradient(120% 90% at 50% 40%, #0d0a18 0%, #040406 80%); transition: background .8s ease; perspective: 1600px; }
.pk-stage.amb-h0 { --amb: 160,160,190; } .pk-stage.amb-h1 { --amb: 76,201,240; } .pk-stage.amb-h2 { --amb: 179,136,255; }
.pk-stage.amb-h3 { --amb: 255,190,40; } .pk-stage.amb-h4 { --amb: 255,90,200; }
.pk-stage .rays { opacity: .5; background: repeating-conic-gradient(from 0deg, rgba(var(--amb), .16) 0 5deg, transparent 5deg 16deg); }
.pk-stage .motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(var(--amb), .9) 0 1px, transparent 2px);
  background-size: 140px 160px, 230px 210px; background-position: 0 0, 60px 90px; animation: motes 24s linear infinite; }
@keyframes motes { to { background-position: 0 -320px, 60px -330px; } }
.pk-stage .title { min-height: 92px; }
.pk-stage .title .sub { margin: 8px 0 0; font-size: 14px; min-height: 20px; }
.pk-stage .hintline { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pk-stage .odds-line { font: 600 13px var(--mono); color: var(--hc); }

/* the pack: a foil wrapper over a mosaic of the drop's art */
.pk2 { --w: 270px; --h: 392px; --flap: 15%; position: relative; width: var(--w); height: var(--h); cursor: grab; flex: none; outline: none; touch-action: none; user-select: none;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s var(--ease); animation: pkfloat 4s ease-in-out infinite; }
.pk2.lit { transition: transform .08s linear; animation-play-state: paused; }
@keyframes pkfloat { 50% { translate: 0 -10px; } }
.pk2 .pk2-body, .pk2 .pk2-flap { position: absolute; left: 0; right: 0; overflow: hidden; background: var(--k1); }
.pk2 .pk2-body { top: 0; bottom: 0; border-radius: var(--rc); box-shadow: 0 50px 110px -30px rgba(0,0,0,.95), 0 0 120px -30px rgba(var(--amb), .9), inset 0 0 0 1px rgba(255,255,255,.28); }
.pk2 .pk2-flap { top: 0; height: var(--flap); border-radius: var(--rc) var(--rc) 0 0; z-index: 3; transform-origin: 85% 100%; }
.pk2 .pk2-art { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); filter: saturate(1.2) contrast(1.05); }
.pk2 .pk2-flap .pk2-art { height: calc(var(--h) * 1.2); top: calc(var(--h) * -0.1); }
.pk2 .pk2-art img, .pk2 .pk2-art canvas { width: 100%; height: 100%; min-height: 0; object-fit: cover; image-rendering: pixelated; display: block; }
/* a cover still loading or drawing shows the wrapper's colour, not the browser's broken-picture mark (the founder's
   screenshot, 2026-10-27) */
.pk2 .pk2-art img:not(.ready) { visibility: hidden; }
.pk2 .pk2-holo { position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: .32; pointer-events: none;
  background-image: radial-gradient(circle at var(--fx) var(--fy), rgba(255,255,255,.6), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(118deg, #ff5f8f 0, #ffd36b 4%, #8dff7a 8%, #6ff3ff 12%, #7c8bff 16%, #e077ff 20%, #ff5f8f 24%);
  background-size: 100% 100%, 300% 300%; background-position: center, var(--fx) var(--fy); animation: foildrift 8s ease-in-out infinite alternate; }
.pk2 .pk2-flap .pk2-holo { height: calc(var(--h)); }
.pk2.lit .pk2-holo { animation: none; }
.pk2 .pk2-shade { position: absolute; inset: 0; background: radial-gradient(75% 45% at 50% 54%, rgba(8,5,16,.82) 0%, rgba(8,5,16,.35) 70%, rgba(8,5,16,.1) 100%); }
.pk2 .pk2-label { position: absolute; left: 0; right: 0; top: 52%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--t1); text-align: center; text-shadow: 0 3px 26px rgba(0,0,0,.85); }
.pk2 .pk2-label canvas.logo { width: 56px; height: 56px; border-radius: var(--rc); box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 14px 34px -8px rgba(0,0,0,.8); image-rendering: pixelated; }
.pk2 .pk2-label b { font-size: 56px; font-weight: var(--font-head-wt); letter-spacing: var(--font-head-ls); line-height: .9; }
.pk2 .pk2-label span { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pk2 .pk2-label em { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; opacity: .75; padding: 4px 10px; border-radius: var(--rt); background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2); }
.pk2 .pk2-crimp { position: absolute; left: 0; right: 0; height: 14px; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 3px, rgba(255,255,255,.1) 3px 6px); mix-blend-mode: overlay; }
.pk2 .pk2-crimp.t { top: 0; } .pk2 .pk2-crimp.b { bottom: 0; }
/* the line to tear along, and how far it's torn */
.pk2 .pk2-cut { position: absolute; left: 10px; right: 10px; top: var(--flap); height: 0; z-index: 4; border-top: 2px dashed rgba(255,255,255,.55); pointer-events: none; }
.pk2 .pk2-cut i { position: absolute; left: 0; top: -3px; height: 4px; width: calc(var(--cut) * 100%); border-radius: var(--ra); background: #fff; box-shadow: 0 0 14px 3px rgba(var(--amb), 1), 0 0 4px #fff; }
.pk2 .pk2-cut span { position: absolute; right: 0; top: -24px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; opacity: .85; text-shadow: 0 1px 8px #000; }
.pk2.dragging { cursor: grabbing; animation: none; }
.pk2.dragging .pk2-flap { transform: rotate(calc(var(--cut) * -4deg)) translateY(calc(var(--cut) * -3px)); }
.pk2 .pk2-light { position: absolute; left: 6%; right: 6%; top: var(--flap); height: 0; z-index: 2; pointer-events: none; opacity: 0;
  box-shadow: 0 0 60px 26px rgba(255,255,255,.85), 0 0 160px 60px rgba(var(--amb), .9); border-radius: 50%; }
/* torn: the flap flies off, light pours out, the pack sinks away */
.pk2.torn { animation: none; cursor: default; }
.pk2.torn .pk2-cut { opacity: 0; transition: opacity .2s; }
.pk2.torn .pk2-flap { animation: flapoff .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes flapoff { 0% { transform: rotate(-4deg); } 100% { transform: translate(160px, -260px) rotate(38deg); opacity: 0; } }
.pk2.torn .pk2-light { animation: pour .9s ease-out .15s forwards; }
@keyframes pour { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .9; transform: scaleY(1.4); } }
.pk2.torn .pk2-body { clip-path: inset(var(--flap) 0 0 0 round 0 0 16px 16px); }
.pk2.spent { animation: sink .5s var(--ease) forwards; }
@keyframes sink { to { transform: translateY(160px) scale(.85); opacity: 0; filter: brightness(1.8) blur(4px); } }
.pk2.sealing { cursor: progress; filter: saturate(.75) brightness(.85); }
.pk2.sealing .pk2-cut { display: none; }
.pk2.sealing .pk2-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%); background-size: 100% 40%; background-repeat: no-repeat; animation: scan 1.6s linear infinite; }
@keyframes scan { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
.flash.tint { background: radial-gradient(circle, var(--hc) 0%, transparent 70%); animation-duration: .9s; }

/* the stack of prints, turned over one at a time */
.deck { --cw: 300px; position: relative; width: var(--cw); height: calc(var(--cw) * 1.43); flex: none; outline: none; cursor: pointer; }
.dk { position: absolute; inset: 0; z-index: calc(20 - var(--i)); perspective: 1600px;
  transform: translateY(calc(var(--d) * -1px)) rotate(calc(var(--r) * 1deg * min(1, var(--i)))); animation: rise2 .6s var(--ease) both; animation-delay: calc(var(--d) * 70ms); }
@keyframes rise2 { from { transform: translateY(220px) scale(.7) rotate(calc(var(--r) * 3deg)); opacity: 0; } }
.dk .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.8,.2,1.15); }
.dk.open .inner { transform: rotateY(180deg); }
.dk .back, .dk .front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--rc); }
.dk .back { overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 30px 70px -24px #000;
  background: radial-gradient(70% 50% at 50% 38%, rgba(155,93,229,.42), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(0,187,249,.25), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px), var(--k1); }
.dk .back::after { content: none; }
.dk .back .cb canvas.logo { width: 44px; height: 44px; border-radius: var(--rc); image-rendering: pixelated; }
.dk .back .cb b { font-size: 34px; }
.dk .front { transform: rotateY(180deg); }
.dk .front .card { height: 100%; animation: none; padding: 12px; border-radius: var(--rc); background: linear-gradient(180deg, var(--k1), var(--k1)); }
.dk .front .card .card-title { font-size: 17px; }
.dk:not(.open):hover .inner { transform: translateY(-6px) rotateX(5deg); }
/* a rare one glows from the back, then shakes before it turns */
.dk.rare .back { box-shadow: inset 0 0 0 2px var(--hc), 0 0 60px 6px var(--hg), 0 30px 70px -24px #000; }
.dk.charge .inner { animation: charge .9s ease-in both; }
@keyframes charge { 0% { transform: none; } 20% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(4px) rotate(1.5deg) scale(1.02); } 60% { transform: translateX(-6px) rotate(-2deg) scale(1.04); } 80% { transform: translateX(7px) rotate(2.5deg) scale(1.06); } 100% { transform: scale(1.08); } }
.dk.charge .back { box-shadow: inset 0 0 0 3px var(--hc), 0 0 120px 30px var(--hg), 0 0 40px 6px var(--hc); }
.dk.open { animation: none; transform: none; }
.dk.open .front { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hc) 50%, transparent), 0 40px 90px -30px #000, 0 0 90px -20px var(--hg); }
.dk.away { animation: away .42s ease-in forwards; }
@keyframes away { to { transform: translateY(260px) scale(.3); opacity: 0; } }
.dk .stamp { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%) rotate(-3deg) scale(0); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 16px; border-radius: var(--rc); background: rgba(8,8,12,.92); border: 1px solid var(--hc); box-shadow: 0 0 30px -4px var(--hg); white-space: nowrap; }
.dk .stamp b { font: 600 16px var(--mono); color: var(--hc); letter-spacing: -.02em; }
.dk .stamp span { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t1); opacity: .85; }
.dk.open .stamp { animation: stamp .45s cubic-bezier(.2,1.6,.4,1) .55s forwards; }
@keyframes stamp { to { transform: translateX(-50%) rotate(-3deg) scale(1); } }
.dk .burst { top: 40%; }
/* the prints already turned, small, in a row */
.tray { display: flex; gap: 8px; min-height: 52px; justify-content: center; }
.tray .tr { width: 46px; height: 46px; border-radius: var(--ra); overflow: hidden; box-shadow: 0 0 0 1.5px var(--hc), 0 0 18px -4px var(--hg); animation: tpop .4s cubic-bezier(.2,1.5,.4,1) both; }
.tray .tr img, .tray .tr canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
@keyframes tpop { from { transform: translateY(-40px) scale(.4); opacity: 0; } }
.btn.ghost { background: transparent; border-color: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--t1); }
/* the whole pull */
.deal.summary { perspective: none; }
.deal.summary .card { width: 214px; }
.deal.summary .card.best { box-shadow: 0 0 0 1.5px var(--hc), 0 0 60px -10px var(--hg); }
.deal.summary .card.best::after { content: 'best'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 2px 10px; border-radius: 999px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--hc); color: var(--k0); }
@media (max-width: 640px) {
  .pk2 { --w: 230px; --h: 334px; margin-top: 2vh; }
  .pk2 .pk2-label b { font-size: 46px; }
  .deck { --cw: min(76vw, 300px); }
  .pk-stage .title { min-height: 80px; padding: 0 16px; }
  .deal.summary .card { width: calc(50% - 5px); max-width: 190px; }
}

/* ---------- Foil: a holographic sheet over the art ----------
   Rainbow bands slide as the light moves (the pointer, or a slow drift), a fine etch catches it, and a
   bright spot follows the light. Glitter twinkles where it's brightest. */
@keyframes foildrift { 0% { --fx: 12%; --fy: 8%; } 50% { --fx: 82%; --fy: 42%; } 100% { --fx: 30%; --fy: 92%; } }
.s-foil .card-art::after, .frame.s-foil::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: .8;
  background-image: repeating-linear-gradient(118deg, hsl(340 75% 36%) 0, hsl(40 80% 33%) 2.4%, hsl(110 65% 31%) 4.8%, hsl(185 80% 33%) 7.2%, hsl(235 75% 38%) 9.6%, hsl(290 70% 36%) 12%, hsl(340 75% 36%) 14.4%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0) 0 3px, rgba(255,255,255,.07) 3px 4px);
  background-size: 260% 260%, 100% 100%; background-position: var(--fx) var(--fy), center;
  -webkit-mask-image: radial-gradient(farthest-corner circle at var(--fx) var(--fy), #000 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,.22) 85%); mask-image: radial-gradient(farthest-corner circle at var(--fx) var(--fy), #000 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,.22) 85%);
  animation: foildrift 9s ease-in-out infinite alternate; transition: opacity .3s; }
.s-foil .card-art::before, .frame.s-foil::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: color-dodge; opacity: .8;
  background-image: radial-gradient(circle at var(--fx) var(--fy), rgba(255,255,255,.42), rgba(255,255,255,0) 34%),
    radial-gradient(circle, #fff 0 .7px, transparent 1.3px), radial-gradient(circle, #fff 0 .5px, transparent 1.1px), radial-gradient(circle, #ffe9a8 0 .6px, transparent 1.2px);
  background-size: 100% 100%, 19px 17px, 31px 27px, 43px 37px; background-position: center, 0 0, 9px 13px, 21px 5px;
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), #000 0%, rgba(0,0,0,.3) 30%, transparent 55%); mask-image: radial-gradient(circle at var(--fx) var(--fy), #000 0%, rgba(0,0,0,.3) 30%, transparent 55%);
  animation: foildrift 9s ease-in-out infinite alternate; }
.card.s-foil:hover .card-art::after, .card.s-foil.lit .card-art::after, .frame.s-foil.lit::after { opacity: 1; }
.card.s-foil.lit .card-art::after, .card.s-foil.lit .card-art::before, .frame.s-foil.lit::after, .frame.s-foil.lit::before { animation: none; }

/* rankings */
a.rankfact { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; }
a.rankfact:hover { border-color: var(--line2); background: rgba(255,255,255,.05); }
a.rankfact > span:first-child { display: flex; justify-content: space-between; }
a.rankfact i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--dim2); }
.rklist { display: grid; gap: 4px; max-width: 820px; }
.rkrow { display: grid; grid-template-columns: 56px 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--rc); color: inherit; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.rkrow:hover { background: rgba(255,255,255,.04); }
.rkrow .rk { font: 600 13px var(--mono); color: var(--dim); text-align: right; }
.rkrow .cthumb { width: 44px; height: 44px; border-radius: var(--ra); overflow: hidden; display: block; }
.rkrow .cthumb img, .rkrow .cthumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.rkrow .rkn { display: flex; flex-direction: column; min-width: 0; }
.rkrow .rkn b, .rkrow .rkn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkrow .rkn small { color: var(--dim); font-size: 12px; }
.rkrow .rkr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rkrow .rkp:empty { display: none; }
.rkrow.me { background: color-mix(in srgb, var(--hc) 12%, transparent); border-color: color-mix(in srgb, var(--hc) 55%, transparent); }
.rkrow.me .rk { color: var(--hc); }
.rklist .more { justify-self: center; margin: 6px 0; }
@media (max-width: 640px) { .rkrow { grid-template-columns: 40px 38px minmax(0, 1fr) auto; gap: 9px; padding: 7px 6px; } .rkrow .cthumb { width: 38px; height: 38px; } }
/* pulping from a pack's results */
.pulpfoot { margin-top: 8px; }
.pulpfoot .pulp { width: 100%; justify-content: center; }
.card.pulped { opacity: .35; filter: grayscale(1); pointer-events: none; transition: opacity .5s, filter .5s; }
.card.pulped .pulpfoot { pointer-events: none; }
.pk-stage .taphint { max-width: 560px; margin: 0 auto 4px; line-height: 1.5; }

/* phones and tablets: the same pack opening, lighter on the graphics chip. No drifting specks, turning rays,
   floating or tilting pack, and the prints turn over flat (a 3D flip with foil inside flickers on some
   Android phones). */
@keyframes flip2d { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes facein { 0%, 49% { visibility: hidden; } 50%, 100% { visibility: visible; } }
@keyframes faceout { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@media (hover: none), (pointer: coarse) {
  .pk-stage { transition: none; }
  .pk-stage .motes { display: none; }
  .pk-stage .rays { animation: none; }
  .pk2 { animation: none; transform: none !important; transform-style: flat; }
  .pk2 .pk2-holo { animation: none; }
  .pk2 .pk2-body { box-shadow: 0 30px 70px -30px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.28); }
  .pk2.spent { animation: sinklite .45s ease forwards; }
  .dk { perspective: none; }
  .dk .inner { transform-style: flat; transition: none; }
  .dk .back, .dk .front { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .dk .front { transform: none; visibility: hidden; }
  .dk.open .inner { transform: none; animation: flip2d .44s ease-in-out both; }
  .dk.open .front { animation: facein .44s linear both; }
  .dk.open .back { animation: faceout .44s linear both; }
  .dk:not(.open):hover .inner { transform: none; }
  .dk .back::after { animation: none; }
  .dk.rare .back { box-shadow: inset 0 0 0 2px var(--hc), 0 0 30px 2px var(--hg); }
}
@keyframes sinklite { to { transform: translateY(160px) scale(.85); opacity: 0; } }

/* ink drops waiting, on Home; and the note on the sign-in screen when a drop link brought someone here */
.dropbar { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; padding: 12px 16px; border-radius: var(--rc); color: inherit; text-decoration: none;
  background: linear-gradient(120deg, rgba(76,201,240,.16), rgba(155,93,229,.14)); border: 1px solid rgba(76,201,240,.45); }
.dropbar .cb-ic { font-size: 22px; }
.dropbar b { display: block; } .dropbar small { color: var(--dim); }
.claimnote { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--rc); background: rgba(76,201,240,.08); border: 1px solid rgba(76,201,240,.35); font-size: 13.5px; line-height: 1.5; max-width: 520px; }

/* the listing check */
.cfm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(4,4,8,.72); animation: page .2s ease both; }
.cfm-box { width: min(520px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--rs); background: var(--k1); border: 1px solid var(--line2); box-shadow: 0 40px 120px -20px #000; }
.cfm-box h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.cfm-warn { padding: 14px 16px; border-radius: var(--rc); background: rgba(255,60,90,.12); border: 1.5px solid rgba(255,80,110,.7); color: #ffd7de; font-size: 14.5px; line-height: 1.5; }
.cfm-warn b { display: block; font-size: 16px; color: var(--t1); margin-bottom: 2px; }
.cfm-note { color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.cfm-list { overflow: auto; display: grid; gap: 4px; min-height: 0; }
.cfm-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--rc); font-size: 14px; }
.cfm-row.low { background: rgba(255,60,90,.08); }
.cfm-row.low .ink { color: var(--down); }
.cfm-row .cthumb { width: 34px; height: 34px; border-radius: var(--ra); overflow: hidden; flex: none; }
.cfm-row .cthumb img, .cfm-row .cthumb canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.cfm-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.cfm-total b { font-size: 18px; }
.cfm .actions { justify-content: flex-end; }
.cfm-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* bulk selling: the hint while selecting, and the price editor */
.pickhint { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--rc); background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.45); font-size: 14px; line-height: 1.5; }
.pickhint > b:first-child { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--rt); background: var(--r2); color: var(--t1); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cfm-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cfm-same { display: inline-flex; gap: 6px; }
.cfm-same .field { width: 90px; }
.cfm-row .rp { width: 92px; flex: none; text-align: right; }
.cfm-list .cfm-more { justify-self: center; margin: 6px 0 2px; }
.cfm-row.low .rp { border-color: rgba(255,80,110,.8); color: var(--down); }

/* a gap in a set: a way to the collection's prints for sale */
a.slot.go { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
a.slot.go:hover { border-color: var(--line2); background: rgba(255,255,255,.04); transform: translateY(-2px); }
.slot .slot-buy { display: block; margin-top: 8px; font-size: 12px; color: var(--dim); }
.slot .slot-auc { color: var(--r2); white-space: nowrap; }
.slot .slot-auc .ink { color: var(--r2); }
.slot .slot-auc .ink::before { filter: hue-rotate(230deg) saturate(1.3) drop-shadow(0 0 5px rgba(155, 93, 229, .55)); }
.slot .slot-cta { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: var(--rt); font-size: 12px; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid var(--line2); }
.slot .slot-cta { align-self: flex-start; }

/* sold out: what to do instead */
.collect.soldout .cb-free.so { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--rc); background: rgba(255,210,63,.08); border: 1px solid rgba(255,210,63,.4); }
.collect.soldout .cb-free.so a { color: inherit; }
.collect.soldout a.cb-pack { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--rc); text-decoration: none; color: var(--t1); background: linear-gradient(120deg, rgba(76,201,240,.16), rgba(155,93,229,.14)); border: 1px solid rgba(76,201,240,.45); }

.verifybar { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; padding: 14px 16px; border-radius: var(--rc); color: inherit; text-decoration: none; background: rgba(88,101,242,.14); border: 1px solid rgba(88,101,242,.55); }
.verifybar .cb-ic { font-size: 22px; } .verifybar b { display: block; } .verifybar small { color: var(--dim); }
@media (max-width: 640px) { .verifybar { flex-wrap: wrap; } .verifybar .grow { display: none; } }   /* (the empty spacer wrapped and pushed the button 14 px in: the UX pass, 2026-10-24) */
.e3-note a { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.dclink { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.count[data-series] { cursor: pointer; color: #fff; font: 700 11px var(--mono); }
.count[data-series]:hover { background: rgba(255,255,255,.2); }
.onlybar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--rc); background: rgba(255,255,255,.05); border: 1px solid var(--line2); }
.onlybar span { flex: 1; }

/* inventory: a card's collection name filters to that collection */
.inv-page .card-title, .grid .card-title { cursor: pointer; }
.grid .card-title:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the market: trait offers, sell now, auctions, bundles, sealed packs, alerts, portfolio ---------- */
.mseg { flex-wrap: wrap; }
.tabnote { margin: 0 0 16px; font-size: 14px; max-width: 720px; }
.up { color: var(--up); }
.down { color: var(--down); }
.kpi.up b { color: var(--up); } .kpi.down b { color: var(--down); }
.kpi small { display: block; margin-top: 3px; font-size: 12px; }
.lockline { margin: 4px 0 12px; padding: 10px 14px; border-radius: var(--rc); background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
.lockline a { color: var(--t1); }
.likethis { margin: -2px 0 10px; }
.uauc { margin: 4px 0 12px; }
.uauc .bidrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.uauc .bidrow .field { width: 110px; height: 40px; }
.uauc .anote:empty { display: none; }
.alertbox .arow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex-basis: 100%; }
.alertbox .arow .field { width: 120px; }
.alertbox .arow select.field { width: 150px; }
.offerbox select.field { width: 140px; }
/* the offer ladder */
.ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lcol { padding: 14px 16px; }
.lhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.lrow { display: grid; grid-template-columns: 80px 1fr 34px; align-items: center; gap: 10px; padding: 5px 0; font-variant-numeric: tabular-nums; font-size: 14px; }
.lrow .num { text-align: right; color: var(--dim); }
.lbar { height: 10px; border-radius: var(--rc); background: rgba(255,255,255,.04); overflow: hidden; }
.lbar i { display: block; height: 100%; border-radius: var(--rc); }
.lrow.bid .lbar i { background: linear-gradient(90deg, var(--up), var(--r1)); }
.lrow.ask .lbar i { background: linear-gradient(90deg, var(--live), var(--r2)); }
.lempty { padding: 8px 0; }
.ladcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin: 12px 0 8px; }
.ladcta .offerbox { flex-basis: 100%; }
.crow.ltrait { grid-template-columns: minmax(0, 2fr) 1fr 1fr; }
.crow.alrow { grid-template-columns: minmax(0, 1fr) auto; }
/* price history: the floor */
.chart .floorline { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 6 5; opacity: .85; }
.flkey { color: var(--ink); font-family: var(--mono); font-size: 12px; }
/* bundles and sealed packs */
.bundles { display: flex; flex-direction: column; gap: 10px; }
/* Market › Legendaries (app.js marketLegends): a piece's types in a grid, a locked tile for one not pulled yet */
.lgxbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.lgxbar .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lgxbar .q { flex: 1 1 200px; max-width: 320px; }
.lgx-p { margin: 0 0 22px; }
.lgx-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.lgx-h a { color: inherit; text-decoration: none; }
.lgx-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lgx-t { display: grid; gap: 2px; align-content: start; padding: 8px; border-radius: var(--rc); background: var(--k1, rgba(255,255,255,.04)); cursor: pointer; font-size: 13px; min-width: 0; }
.lgx-t b { font-size: 14px; overflow-wrap: anywhere; }
.lgx-t .dim, .lgx-sale { overflow-wrap: anywhere; }
.lgx-a { aspect-ratio: 1; border-radius: calc(var(--rc) - 4px); overflow: hidden; margin: 0 0 6px; background: rgba(255,255,255,.03); display: grid; place-items: center; }
.lgx-a img, .lgx-a canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.lgx-no { cursor: default; }
.lgx-no .lgx-a { background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px); color: var(--dim); }
.lgx-no b { color: var(--dim); }
@media (max-width: 640px) { .lgx-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lgx-t { padding: 6px; font-size: 12px; } .lgx-t b { font-size: 13px; } }
.bundle { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 14px; }
.bthumbs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 420px; }
.bthumbs .thumb { width: 52px; height: 52px; border-radius: var(--ra); overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.bthumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bthumbs .bmore { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--panel2); color: var(--text); font-family: var(--mono); font-weight: 600; font-size: 14px; line-height: 1.1; cursor: default; }
.bthumbs .bmore small { font-weight: 400; font-size: 10px; opacity: .7; }
.binfo { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 3px; }
.binfo b { font-size: 16px; }
.binfo .ink { font-size: 18px; font-weight: 600; }
.mosaic.sface { display: grid; grid-template-columns: 1fr 1fr; width: 64px; height: 64px; border-radius: var(--ra); overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 6px 20px -6px rgba(155,93,229,.7); }
.mosaic.sface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sealedshelf { margin: 0 0 14px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--rc); }
.sealedshelf summary { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 14px; }
.sealedshelf summary::-webkit-details-marker { display: none; }
.sealedshelf summary .grow { flex: 1; }
.sealedshelf summary .sthumb .mosaic.sface { width: 26px; height: 26px; border-radius: var(--ra); box-shadow: 0 0 0 1px #fff; }
.sealedshelf .schev { color: var(--dim, var(--t3)); font-size: 18px; transition: transform .15s; }
.sealedshelf[open] .schev { transform: rotate(90deg); }
.sealedshelf[open] { padding-bottom: 6px; }
.srow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.srow .grow { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.srow .sthumb .mosaic.sface { width: 46px; height: 46px; border-radius: var(--ra); }
.srow .field.sm { width: 90px; height: 34px; }
/* a drop's plain packs in one row (the founder, 2026-10-28): how many */
.srow .scount { margin-left: 6px; font: 600 13px var(--mono); color: var(--t2); }
.drop .dbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.drop .dbtns .btn { margin-left: 0 !important; }
/* select: bundle */
.bunbox { flex-basis: 100%; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; margin: 0; }
.bunbox .field { width: 120px; height: 40px; }
/* counter-offers */
.offer .ostate { flex-basis: 100%; }
.ctrbox { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctrbox .field { width: 120px; height: 40px; }
/* portfolio */
.crow.prow { grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(70px, 1fr)); cursor: pointer; }
.crow.ptrade { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
.crow .odds { font-size: 12px; }
@media (max-width: 760px) {
  .ladder { grid-template-columns: 1fr; }
  .crow.prow { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(56px, 1fr)); }
  .crow.ltrait { grid-template-columns: minmax(0, 2fr) 1fr 1fr; }
  .alertbox .arow { justify-content: flex-start; }
  .alertbox .arow .field, .alertbox .arow select.field { flex: 1; min-width: 100px; }
  .uauc .bidrow .field { flex: 1; }
}
/* the portfolio on a phone (the UX pass, 2026-10-24: "Lamplig…", and the odds cut mid-number, "1 in 332,"): the
   numbers' columns as narrow as their numbers, "est." a small label, the name on up to two lines, the odds whole; under
   400 px Best offer goes (Cost already has) */
@media (max-width: 640px) {
  .crow.prow { grid-template-columns: minmax(0, 1fr) 62px 54px 50px; gap: 8px; }
  .crow.prow .cn b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; line-height: 1.25; }
  .crow.prow .cn small { overflow: visible; text-overflow: clip; }
  .crow.prow .num { white-space: nowrap; }
  .crow.prow .estl { font: 400 10.5px var(--sans); color: var(--t3); }
}
@media (max-width: 400px) {
  .crow.prow { grid-template-columns: minmax(0, 1fr) 64px 52px; }
  .crow.prow > .num:nth-child(3) { display: none; }
}
@media (max-width: 640px) { .offer > .oacts, .offer > .ostate, .offer > .ctrbox { grid-column: 1 / -1; } }
.crow.pulrow { grid-template-columns: 40px minmax(200px, 2.4fr) repeat(2, minmax(70px, 1fr)) minmax(120px, 2fr); }
@media (max-width: 760px) { .crow.pulrow { grid-template-columns: 26px minmax(0, 2fr) repeat(2, minmax(56px, 1fr)); } }
/* a collection's Holders tab: rank, collector, how many, their share, their rarest one here, and a trade for it (each
   row is its own grid, so every column has a set width: the header's empty last cell lines up with the buttons) */
.crow.holrow { grid-template-columns: 40px minmax(200px, 2.4fr) minmax(60px, .7fr) minmax(60px, .7fr) minmax(150px, 1.8fr) 140px; }
.crow.holrow .hrare { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crow.holrow .hrare .thumb { width: 36px; height: 36px; flex: none; border-radius: var(--ra); overflow: hidden; background: #000; }
.crow.holrow .hrare .thumb img, .crow.holrow .hrare .thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.crow.holrow .hact { display: flex; justify-content: flex-end; min-width: 0; }
.crow.holrow .hact .hs { display: none; }
/* a legendary holder's row on a phone: the Rarest column is hidden there, so its label goes by their name */
.crow.holrow .hleg { display: none; }
@media (max-width: 760px) {
  .crow.holrow { grid-template-columns: 26px minmax(0, 2fr) 40px 92px; }
  .crow.holrow .hact .hl { display: none; }
  .crow.holrow .hact .hs { display: inline; }
  .crow.holrow .hleg { display: inline; }
}
/* a print as a profile picture, in place of the orb */
.orb.pfp { overflow: hidden; background: #000; }
.orb.pfp img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; opacity: 0; transition: opacity .4s; }
.orb.pfp img.ready { opacity: 1; }
.orb.pfp img.px { image-rendering: pixelated; }
/* a trade in the feed: both sides */
.tsides { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.tside { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }
/* (button. only: the trade screen's "Ask for more" details is .tmore too, and this 30px height held it shut while its
   cards drew over the ones below; a member's report, 2026-10-20: "can't pick 2 prints ... it collides") */
button.tmore { height: 30px; min-width: 30px; padding: 0 7px; border: 0; border-radius: var(--ra); background: rgba(255,255,255,.08); color: var(--t1); font: 600 12px var(--mono); cursor: pointer; }
button.tmore:hover { background: rgba(255,255,255,.14); }
.tthumb { width: 30px; height: 30px; border-radius: var(--ra); overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line); cursor: pointer; flex: none; }
.tthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarrow { color: var(--dim); font-size: 13px; padding: 0 3px; }
.tink { font-size: 12px; padding: 0 4px; }
/* a piece's own traits (the newer drop format), under prints' finishes */
.ptraits { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.ptraits .pt-h { flex-basis: 100%; color: var(--dim2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ptraits .pt { padding: 5px 9px; border-radius: var(--rc); background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: 12.5px; }
.ptraits .pt i { font-style: normal; color: var(--dim); margin-right: 5px; }
/* a piece's own traits with their odds (Loot I on): the same grid as the four global traits, across the whole width */
.ptraits .traits { flex-basis: 100%; margin: 0; }
/* (a long value, a list of what's on the wheel, goes under its name and wraps, so the name keeps its width) */
.ptraits .trait.long { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ptraits .trait.long b { white-space: normal; }
.drop .noink { margin-top: 8px; color: var(--t2); }
/* phones: the decorations that never stop are still. They kept a page of cards repainting every frame (2026-10-14:
   the site got slow). Foil keeps its sheen, held still, and moves when touched (.lit). */
@media (hover: none), (pointer: coarse) {
  .s-foil .card-art { --fx: 32%; --fy: 24%; }
  .s-foil .card-art::after, .s-foil .card-art::before { animation: none; }
  .card.h4::before { animation: none; }
  .h4 .odds, .odds.h4, .grad-text, .btn.glow, .meter i, .nav-pill { animation: none; }
  .card-art .skel { animation: none; }
  .live-dot { animation: none; }
}
/* the account menu scrolls when it is taller than the screen (it clipped on phones once Pulped was added) */
.toppanel.menu .mm-head, .toppanel.menu .mm-foot { flex: none; }
.toppanel.menu .mm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tvseg { margin: 0 0 14px; }
.slot.youhave { box-shadow: inset 0 0 0 1px rgba(0,245,160,.5); }
.slot.youhave .slot-buy { color: var(--up); }
.drop .dbtns .setpick { flex-basis: 100%; height: 40px; }
/* a drop card keeps its title clear of the tags at the top, however much is below it (the set picker made it taller) */
.drop:not(.soon) { padding-top: 76px; }
.orb.pfp canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
/* the account menu: a fade at the bottom while there's more to scroll to */
.toppanel.menu .mm-list.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
/* (the UX pass, 2026-10-24) the pages about prints under a small heading at the end; and while there's more below, a
   "More below" tag over the faded bottom (the fade alone read as the end of the list on a 375x667 phone) */
.mm-sec { margin: 8px 12px 2px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mm-cue { display: none; }
.toppanel.menu .mm-list.more + .mm-cue { flex: none; align-self: center; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; margin: -30px 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--k3); color: var(--t2); font-size: 12px; pointer-events: none; }
.mm-cue .i { width: 13px; height: 13px; stroke: currentColor; }
/* phones: the sign-in buttons stack (side by side they ran off a 390 px screen), and the costly effects go: the
   background glow stays still, and blurs behind the bars, sheets and overlays become plain dark panels (a blur
   repaints whatever moves underneath it) */
@media (max-width: 480px) {
  .onb .row { flex-wrap: wrap; }
  .onb .row .btn { flex: 1 1 100%; }
  /* (not the new-colours button by the name: it took the whole row and left the name field 34 px wide) */
  .onb .fl .row .reroll { flex: none; }
}
@media (hover: none), (pointer: coarse) {
  .bg-aura { animation: none; }
  .like { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* a card's badges too: hundreds of blurs on one page are what a phone runs out of memory on */
  .fbadge, .count { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fbadge { background: rgba(8,8,12,.8); } .count { background: rgba(8,8,12,.82); }
  .top { background: rgba(6,6,8,.94); }
  .ov { background: rgba(4,4,6,.96); }
  nav { background: rgba(10,10,14,.97) !important; }
  .toast { background: rgba(20,20,26,.97); }
  .search-ov { background: rgba(4,4,6,.94); }
  .bidbar { background: rgba(20,18,30,.97) !important; }
  .showmeta { background: rgba(8,8,12,.82); }
  .like { background: rgba(8,8,12,.8); }
}
/* a page waiting for its data (slim: each page asks the server for what it shows, plans/stage3-api.md) */
.loadpage { display: flex; justify-content: center; gap: 9px; padding: 72px 0; }
.loadpage span { width: 9px; height: 9px; border-radius: 50%; background: var(--r2); opacity: .35; animation: ldot 1.1s ease-in-out infinite; }
.loadpage span:nth-child(2) { animation-delay: .15s; } .loadpage span:nth-child(3) { animation-delay: .3s; }
@keyframes ldot { 40% { opacity: 1; transform: translateY(-5px); } }

/* the founder's review queue */
.rv { padding: 12px 14px; margin: 0 0 12px; }
.rv.done { opacity: .75; }
.rvh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.rvf { margin: 8px 0; }
.rvu { padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.rvu:first-child { border-top: 0; }
.rvu .dim.small { font-size: 12.5px; }
.rvold { margin: 4px 0 14px; }
.rvold summary { cursor: pointer; padding: 6px 0; }

/* the founder's Standing page (the brand and the reputation system) */
.brp .brmode { margin: 6px 0 4px; }
.brc { padding: 12px 14px; margin: 0 0 12px; max-width: 760px; }
@media (max-width: 760px) { .brp .cstats.brstats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; overflow: visible; margin: 16px 0; border-radius: var(--rc); border: 1px solid var(--line); } .brp .cstats.brstats b { white-space: normal; } }
.brc.done { opacity: .75; }
.brlook { margin: 4px 0 6px; max-width: 760px; }
.brc .brwhy, .brac .brwhy { margin: 2px 0 8px; padding-left: 18px; font-size: 14px; color: var(--t2); }
.brc .brwhy li, .brac .brwhy li { margin: 2px 0; }
.brl { color: var(--t1); text-decoration: none; border-bottom: 1px dotted var(--dim); }
.brt { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; border: 1px solid var(--line); }
.brt-trusted { color: #7be3a3; border-color: rgba(123,227,163,.45); }
.brt-normal { color: var(--t2); }
.brt-watch { color: #ffd23f; border-color: rgba(255,210,63,.45); }
.brt-risky { color: #ff7a7a; border-color: rgba(255,122,122,.5); }
.brsc { font-variant-numeric: tabular-nums; margin-left: 4px; }
.brnote { margin: -4px 0 10px; max-width: 760px; }
.brdlg { max-width: 560px; }
.brmv { display: grid; gap: 6px; max-height: 46vh; overflow: auto; padding: 10px 12px; border-radius: var(--rc); background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 14px; }
@media (max-width: 760px) { .brc .actions { flex-wrap: wrap; } }

/* your own offers on a collection's page */
.youroffs { padding: 10px 14px; margin: 0 0 12px; }
.yorow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.youroffs .lhead + .yorow { border-top: 0; }

/* your ink history */
.inkhist { margin: 0 0 18px; }
.ihday { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim, #999); padding: 14px 0 6px; }
.ihrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ihwhy { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.ihwhy small { font-size: 12px; }
.ihd { font: 600 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ihd.up { color: var(--up); }
.ihd.down { color: var(--down); }

/* a pack's print from a collection you didn't have before */
.dk .newtag { position: absolute; top: 10px; right: 10px; z-index: 6; padding: 4px 9px; border-radius: var(--rt); font: 600 12px var(--mono); letter-spacing: .12em; color: var(--k0); background: linear-gradient(135deg, #7dffb0, var(--r1)); box-shadow: 0 0 18px rgba(80, 230, 200, .55); transform: scale(0); }
.dk.open .newtag { animation: newtag .45s cubic-bezier(.2,1.6,.4,1) .75s forwards; }
@keyframes newtag { to { transform: scale(1) rotate(4deg); } }

/* Packs: a drop's link to its collections */
.dbrowse { display: inline-block; margin: 6px 0 10px; text-decoration: underline; text-underline-offset: 3px; }

/* a picker's prints that can't be offered, and why */
.heldback { margin: 6px 0 14px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--rc); }
.heldback p { margin: 0 0 6px; }
.hbrow { padding: 3px 0; font-size: 14px; }
.hbrow a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- Earn ink: one spacing scale (4 / 8 / 12 / 16 / 24 / 32), one card style, gold only for amounts ---------------- */
.e3-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 24px; }
.e3-head h1 { margin: 4px 0 0; font-size: clamp(30px, 4.6vw, 40px); line-height: 1; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); }
.e3-bal { display: flex; align-items: center; gap: 12px; }
.e3-balnum { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; }
.e3-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.e3-left, .e3-right { display: grid; gap: 16px; min-width: 0; }
.e3-left { position: sticky; top: 84px; }
.e3-card { padding: 20px; border-radius: var(--rc); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.e3-th { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.e3-th h2, .e3-th h3, .e3-h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.e3-h3 { margin: 8px 0 12px; }
.e3-meta { font-size: 13px; color: var(--dim); }
p.e3-meta { margin: 8px 0 0; line-height: 1.45; }
.e3-amt { font: 600 13px var(--mono); color: var(--ink); white-space: nowrap; }
.e3-meta .ink, .e3-amt .ink { font: 600 13px var(--mono); }
.e3-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--rc); background: rgba(255,255,255,.06); }
.e3-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--t2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.e3-ic.big { width: 44px; height: 44px; border-radius: var(--rc); } .e3-ic.big svg { width: 22px; height: 22px; }

/* today */
.e3-cd { color: var(--text); font-variant-numeric: tabular-nums; }
.e3-count { display: flex; align-items: baseline; gap: 4px; margin: 12px 0 12px; }
.e3-count .e3-n { font: 600 30px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.e3-count > span:not(.e3-of) { font: 600 18px var(--sans); color: var(--dim); }
.e3-of { margin-left: auto; font-size: 13px; color: var(--dim); }
.e3-ti { font: 600 13px var(--mono); color: var(--ink); }
.e3-track { position: relative; height: 8px; margin: 0 8px 20px 0; border-radius: 2px; background: rgba(255,255,255,.08); }
.e3-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--t1); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.e3-cp { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--k1); border: 2px solid rgba(255,255,255,.18); }
.e3-cp.on { background: var(--t1); border-color: var(--t1); }
.e3-cp.pop { animation: e3pop .32s cubic-bezier(.2,.8,.2,1); }
@keyframes e3pop { 50% { transform: scale(1.25); } }
.e3-qs { list-style: none; margin: 0; padding: 0; }
.e3-q { display: grid; grid-template-columns: 36px 1fr auto 60px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.e3-q:first-child { border-top: 0; padding-top: 0; }
.e3-qt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.e3-qt b { font-size: 15px; font-weight: 600; }
.e3-qt small { font-size: 12.5px; color: var(--dim); }
.e3-pay { font: 600 14px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.e3-act { display: flex; justify-content: flex-end; }
.e3-chk { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); }
.e3-chk svg { width: 18px; height: 18px; fill: none; stroke: var(--t1); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 0; }
.e3-q.done .e3-qt b { color: var(--dim); }
.e3-q.done .e3-pay { color: var(--dim); }
.e3-q.done .e3-ic { opacity: .55; }
.e3-q.claim { animation: e3press .34s cubic-bezier(.2,.8,.2,1); }
@keyframes e3press { 35% { transform: scale(.985); } }
.e3-q.claim .e3-chk { animation: e3pop .32s cubic-bezier(.2,.8,.2,1); }
.e3-q.claim .e3-chk svg { animation: e3draw .3s ease-out both; }
@keyframes e3draw { from { stroke-dashoffset: 20; } }
.e3-q.claim .e3-pay { color: var(--ink); transition: color .4s ease-out .5s; }
.e3-note { margin: 16px 0 0; font-size: 13px; }

/* the streak */
.e3-sh { display: flex; align-items: center; gap: 12px; }
.e3-sh > div { display: flex; align-items: baseline; gap: 8px; }
.e3-sn { font: 600 44px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.e3-sl { font-size: 15px; color: var(--dim); }
.e3-flame { width: 30px; height: 30px; flex: none; fill: rgba(255,255,255,.14); }
.e3-streak.lit .e3-flame { fill: #ff8a2a; }
.e3-smsg { margin: 8px 0 16px; font-size: 13.5px; color: var(--dim); }
.e3-smsg.risk { color: #ffb366; }
.e3-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.e3-week li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.e3-wd { font: 600 12px var(--mono); color: var(--dim); letter-spacing: .06em; }
.e3-week li.today .e3-wd { color: var(--text); }
.e3-gem { width: 22px; height: 22px; transform: rotate(45deg); border-radius: var(--rc); border: 2px solid rgba(255,255,255,.14); }
.e3-gem.full { background: var(--ink); border-color: var(--ink); }
.e3-gem.part { background: rgba(255,210,63,.28); border-color: rgba(255,210,63,.7); }
.e3-week li.today .e3-gem { box-shadow: 0 0 0 3px var(--k1), 0 0 0 4.5px rgba(255,255,255,.55); }
.e3-week li.today .e3-gem.none { animation: e3once .9s ease-out 1 .4s; }
@keyframes e3once { 50% { box-shadow: 0 0 0 3px #0a0a0e, 0 0 0 7px rgba(255,255,255,.35); } }

/* up next */
.e3-up { display: grid; gap: 16px; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.055); }
.e3-k { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.e3-ur { display: flex; align-items: center; gap: 12px; }
.e3-ut { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.e3-ut b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.e3-ut small { font-size: 13px; color: var(--dim); }
.e3-up .e3-amt { font-size: 15px; }
.e3-cta { justify-self: stretch; text-align: center; justify-content: center; }

/* getting started, sets, invites */
.e3-dots { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; margin: 12px 0 8px; }
.e3-dots i { height: 6px; border-radius: 2px; background: rgba(255,255,255,.1); }
.e3-dots i.on { background: var(--t1); }
.e3-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.e3-rows a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; color: var(--text); border-top: 1px solid rgba(255,255,255,.06); }
.e3-rows li:first-child a { border-top: 0; }
.e3-rows a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.e3-more summary { cursor: pointer; padding: 8px 0 0; font-size: 13px; color: var(--dim); list-style: none; }
.e3-more summary::-webkit-details-marker { display: none; }
.e3-more summary::before { content: '+ '; } .e3-more[open] summary::before { content: '− '; }
.e3-setl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.e3-setl li { display: grid; grid-template-columns: 1fr auto auto; column-gap: 12px; row-gap: 8px; align-items: baseline; font-size: 14px; }
.e3-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.e3-bar i { display: block; height: 100%; background: var(--t1); transform-origin: 0 50%; }
.e3-link { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--text); }
.e3-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.e3-ir { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.e3-bi { display: inline-flex; margin-right: 6px; } .e3-bi svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -2px; }

/* more ways: a 2-up grid of small tiles */
.e3-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.e3-tile { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 16px; border-radius: var(--rc); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); color: var(--text); transition: background .15s, border-color .15s; }
.e3-tile:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); }
.e3-tile .e3-ic { grid-row: 1 / 3; align-self: start; }
.e3-tile b { font-size: 14.5px; font-weight: 600; }
.e3-tile small { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.e3-tile small .e3-amt { font-size: 12.5px; }
.e3-word { color: var(--text); }
.e3-tiles .e3-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Pyx online */
.e3-soon { margin-left: 8px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 3px 8px; border-radius: var(--rt); border: 1px solid rgba(255,255,255,.14); vertical-align: 2px; }
.e3-boss { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.e3-boss li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--rt); font-size: 12.5px; color: var(--dim); background: rgba(255,255,255,.04); }
.e3-boss svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.e3-boss li.won { color: var(--ink); background: rgba(255,210,63,.08); }
.pyxgo { max-width: 620px; padding: 22px; }
.pyxgo p { margin: 0 0 10px; }

/* the page fades in once */
.e3-head, .e3-cols { animation: e3in .28s ease-out both; } .e3-cols { animation-delay: .04s; }
@keyframes e3in { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 900px) {
  .e3-cols { grid-template-columns: 1fr; gap: 16px; }
  .e3-left { position: static; }
}
@media (max-width: 640px) {
  .e3-head { margin-bottom: 16px; }
  .e3-card { padding: 16px; }
  .e3-tiles { grid-template-columns: 1fr; }
  .e3-tiles .e3-tile:last-child:nth-child(odd) { grid-column: auto; }
  .e3-q { grid-template-columns: 36px 1fr auto 52px; }
}
/* Earn (the UX pass, 2026-10-24): Your sets and Getting started's "N more" look like the links they are; on a phone More
   ways to earn is a list of rows with a chevron (seven full cards were about 1,400 px with no sign they were links) */
.e3-link, .e3-more summary { color: var(--t1); text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
.e3-go { display: none; }
@media (max-width: 640px) {
  .e3-tiles { gap: 0; border-bottom: 1px solid var(--rule); }
  .e3-tile, .e3-tiles .e3-tile { grid-template-columns: 30px minmax(0, 1fr) 16px; column-gap: 12px; row-gap: 2px; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
  .e3-tile:hover { background: none; }
  .e3-tile > svg, .e3-tile .e3-ic { grid-row: 1 / 3; align-self: start; width: 22px; height: 22px; margin-top: 1px; }
  .e3-tile small { line-height: 1.4; }
  .e3-tile .e3-go { display: grid; grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .e3-go svg { width: 16px; height: 16px; fill: none; stroke: var(--t3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}
@media (prefers-reduced-motion: reduce) { .e3-head, .e3-cols, .e3-q.claim, .e3-q.claim .e3-chk, .e3-q.claim .e3-chk svg, .e3-cp.pop, .e3-week li.today .e3-gem.none { animation: none !important; } .e3-fill { transition: none; } }
html.reduce .e3-head, html.reduce .e3-cols, html.reduce .e3-q.claim, html.reduce .e3-q.claim .e3-chk, html.reduce .e3-q.claim .e3-chk svg, html.reduce .e3-cp.pop, html.reduce .e3-week li.today .e3-gem.none { animation: none !important; }
html.reduce .e3-fill { transition: none; }

/* the Packs and Earn tabs: a dot while something waits. Text pills: a small dot after the label; the phone tab bar: by
   the icon's top-right corner, clear of the label */
#nav a[data-v="drops"], #nav a[data-v="earn"] { position: relative; }
#nav a[data-v="earn"] { --dotc: var(--ink); } #nav a[data-v="drops"] { --dotc: #3fe0a0; }
#nav a.due span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: 2px; border-radius: 50%; background: var(--dotc); }
@media (max-width: 640px) {
  #nav a.due span::after { content: none; }
  #nav a.due::after { content: ''; position: absolute; top: 5px; right: calc(50% - 17px); width: 8px; height: 8px; border-radius: 50%; background: var(--dotc); box-shadow: 0 0 0 2px var(--k1); }
}

/* ---------------- Home, signed in: the feed first (2026-10-15) ---------------- */
.hf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 18px; }
.hf-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hf-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.hf .collect { margin: 0; }
.hf-strip { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hs-hi h1 { margin: 2px 0 0; font-size: 30px; letter-spacing: var(--font-head-ls); font-weight: var(--font-head-wt); line-height: 1.05; }
.hs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--rt); background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--t2); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
.hs-chip:hover { border-color: var(--line2); background: rgba(255,255,255,.08); }
.hs-chip small { font: 600 12px var(--mono); }
.hs-chip .qr { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--ink) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }
.hs-chip.q-c { border-color: rgba(255,210,63,.35); }
.hs-chip.q-c.done { color: var(--up); border-color: rgba(111,220,140,.35); }
.hf-needs { display: flex; flex-direction: column; gap: 8px; }
.hf-need { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--rc); background: rgba(255,255,255,.035); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.hf-need:hover { border-color: var(--line2); background: rgba(255,255,255,.06); }
.hf-need.hot { border-color: rgba(255,138,122,.45); background: rgba(255,90,70,.07); }
.hn-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--rc); overflow: hidden; background: rgba(255,255,255,.06); font-size: 17px; }
.hn-ic img { width: 100%; height: 100%; object-fit: cover; }
.hn-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hn-t b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-t small { color: var(--dim); font-size: 12.5px; }
.hn-go { color: var(--dim); font-size: 22px; line-height: 1; }
.hf-feed { min-width: 0; }
.hf-fh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 8px; }
.hf-fh h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.hf-scopes { margin: 0 0 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.hf-scopes::-webkit-scrollbar { display: none; }
.hf-scopes .chip { flex: none; }
.hf-list .panel.live { padding: 4px; }
.hf-list .live-row { grid-template-columns: 54px minmax(0, 1fr) auto; padding: 10px 10px; }
.hf-list .live-row .thumb { width: 54px; height: 54px; border-radius: var(--ra); }
.hf-list .live-row .txt { font-size: 14.5px; }
.hf-list .live-row + .live-row { border-top: 1px solid rgba(255,255,255,.045); border-radius: 0; }

@keyframes hfin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hf-more { display: block; margin: 12px auto 0; }
.hf-list .ticked .live-row:not(.enter) { animation: none; }
.hp-strip { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.hp-t { width: 30px; height: 30px; border-radius: var(--ra); overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.08); cursor: pointer; }
.hp-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-card { padding: 14px; border-radius: var(--rc); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.hc-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.hc-h h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.hc-h a { color: var(--dim); font-size: 12.5px; text-decoration: none; }
.hc-h a:hover { color: var(--t1); }
.ht-list { display: flex; flex-direction: column; gap: 2px; }
/* the site's week (#130): four numbers, two by two; on a phone one row of four above the feed */
.hw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hw a { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border-radius: var(--rc); background: rgba(255,255,255,.03); color: inherit; text-decoration: none; }
.hw a:hover { background: rgba(255,255,255,.06); }
.hw b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; font: 600 17px var(--mono); letter-spacing: -.02em; }
.hw small { color: var(--dim); font-size: 12px; line-height: 1.25; }
.hw .hwn { color: var(--dim); font-size: 12px; font-weight: 500; }
.ht { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 4px; border-radius: var(--rc); color: inherit; text-decoration: none; }
.ht:hover { background: rgba(255,255,255,.05); }
.ht .tn { color: var(--dim2); font: 600 12px var(--mono); text-align: center; }
.ht .cthumb { width: 40px; height: 40px; border-radius: var(--ra); overflow: hidden; background: #000; }
.ht .cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht .ti { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ht .ti b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht .ti small { color: var(--dim); font-size: 12px; }
.hf-drop { padding: 0; overflow: hidden; }
.hd-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: #000; }
.hd-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.hd-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.hd-body h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.hd-body .meter { margin: 2px 0 0; }
.hd-btns { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-it { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; min-width: 0; }
.hm-art { aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: #000; display: block; }
.hm-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-it b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-it small { font: 600 12px var(--mono); }
@media (max-width: 1000px) {
  .hf-grid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .hf-pfpw { display: none; }   /* PFP of the week: desktop only (the founder, 2026-10-17) */
  .hf-main, .hf-rail { display: contents; }
  .hf .o1 { order: 1; } .hf .o2 { order: 2; } .hf .o3 { order: 3; } .hf .o4 { order: 4; } .hf .o5 { order: 5; } .hf .o6 { order: 6; }
  .hf .o7 { order: 7; } .hf .o8 { order: 8; } .hf .o9 { order: 9; } .hf .o10 { order: 10; }
  /* trending as a strip you swipe, above the feed */
  .hf-trend { padding: 0; background: none; border: 0; }
  .hf-trend .hc-h { margin-bottom: 8px; }
  .hf-trend .hc-h h2 { font-size: 15px; }
  .hf-trend .hc-h { padding-right: 12px; }
  .ht-list { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-right: 12px; }
  .ht-list::-webkit-scrollbar { display: none; }
  .ht { grid-template-columns: 34px auto; gap: 8px; flex: none; max-width: 210px; padding: 5px 12px 5px 5px; border-radius: var(--rt); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
  .ht .cthumb { width: 34px; height: 34px; border-radius: 50%; }
  .ht .ti b { font-size: 13px; }
  .ht .ti small { font-size: 12px; }
  .ht .tn { display: none; }
  .hf-week { padding: 0; background: none; border: 0; }
  .hf-week .hc-h { margin-bottom: 8px; padding-right: 12px; }
  .hf-week .hc-h h2 { font-size: 15px; }
  .hw { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-right: 12px; }
  .hw a { padding: 7px 8px; }
  .hw b { font-size: 15px; }
  .hm-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .hs-hi h1 { font-size: 26px; }
  .hm-grid { grid-template-columns: 1fr 1fr; }
  .hf-list .live-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 9px 6px; }
  .hf-list .live-row .thumb { width: 48px; height: 48px; }
  .hf-list .live-row .txt { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-list .live-row, .hf-list .live-row.enter { animation: none; }
}
/* Home's Getting started: done items hidden, the next two shown, the rest behind "All N to do" */
.hf .quests { margin: 0; padding: 14px 16px; }
.hf .quests .ql { margin-top: 10px; }
.hf .quests.folded .q.done, .hf .quests .q.done { display: none; }
.hf .quests.folded .q:not(.done) ~ .q:not(.done) { display: none; }
.hf .quests .qh { gap: 10px; }
.hf .quests .qh b { font-size: 17px; }
.hf .quests .hideq { padding: 0 10px; height: 30px; }
.hf .quests.folded .ql { margin-top: 10px; }
.hf .quests .qmore { display: block; margin: 8px 0 0 auto; }
.hf .qslim { display: none; }
.hf .qmore { margin-top: 8px; }
@media (max-width: 640px) {
  .hf .collect { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hf .collect button { padding: 11px 12px; gap: 10px; border-radius: var(--rc); }
  .hf .collect .cb-ic { width: 34px; height: 34px; font-size: 20px; border-radius: var(--rc); }
  .hf .collect .cb-t b { font-size: 14px; }
  .hf .collect .cb-t small { font-size: 12px; }
  .hf .quests .qh .meter { display: none; }
}
/* phones: the strip and the two buttons compact, Getting started a slim line, so the feed starts on the first screen */
@media (max-width: 640px) {
  .hf-grid { margin-top: 10px; gap: 10px; }
  .hf-strip { flex-wrap: nowrap; align-items: center; }
  .hs-hi .kicker { display: none; }
  .hs-hi h1 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
  .hs-chips { flex-wrap: nowrap; gap: 6px; }
  .hs-chip { height: 32px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
  .hs-chip.q-c > span:not(.qr) { white-space: nowrap; }
  .hf .collect { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hf .collect button { padding: 8px 10px; gap: 8px; border-radius: var(--rc); min-width: 0; overflow: hidden; }
  .hf .collect .cb-ic { width: 28px; height: 28px; font-size: 16px; border-radius: var(--rc); }
  .hf .collect .cb-t { gap: 1px; }
  .hf .collect .cb-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hf .collect .cb-t small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hf .quests.slim { padding: 0; background: rgba(155,93,229,.08); border-radius: var(--rc); }
  .hf .quests.slim > :not(.qslim) { display: none; }
  .hf .quests.slim .qslim { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; color: var(--t2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
  .qslim .kicker { margin: 0; font-size: 12px; flex: none; }
  .qslim b { font-size: 13px; flex: none; }
  .qslim .qs-next { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
  .qslim .qs-go { color: var(--dim); font-size: 20px; line-height: 1; flex: none; }
}

/* market collections: a Yours column (how many you own) */
.crow.mkt { grid-template-columns: 40px minmax(220px, 2.4fr) repeat(8, minmax(64px, 1fr)) 72px; }
.crow .mine-n { font-weight: 600; color: var(--up); }
@media (max-width: 760px) { .crow.mkt { grid-template-columns: 22px minmax(0, 2.4fr) repeat(3, minmax(44px, 1fr)); } }
/* the top bid: its own column on wide screens; on a phone, a small line under the floor */
.crow.mkt .mbid { display: none; }
.crow.mkt .mine-n .ink { color: var(--up); }
@media (max-width: 760px) { .crow.mkt .mbid { display: block; margin: 2px 0 0 auto; padding: 4px 0; background: none; border: 0; font: 400 11px var(--mono); color: var(--t3); cursor: pointer; white-space: nowrap; }
  .crow.mkt .mbid u { color: var(--t1); text-decoration-color: var(--rule); text-underline-offset: 2px; } }
.crow.mkt .co-cell { text-align: right; }
/* outbid: a top bid over your own offer there, in red (as Your offers shows it) */
.crow.mkt .num.outb, .crow.mkt .num.outb .ink, .crow.mkt .mbid.outb { color: var(--down); }
.crow.mkt .num.outb small { display: block; font-size: 11px; opacity: .85; }
/* phones: the name gets the room (the UX pass, 2026-10-24: names were cut to one word, "Coin-…"). It wraps to two lines;
   the Yours column becomes a small ×N by the name, only when you own some (Most yours is still in the sort pull-down);
   the sub-line is just the kind, with Offer (Raise when you're outbid) beside it as a 32px button; a top bid is plain
   text under the floor */
.crow.mkt .ymark, .crow.mkt .mof, .crow.mkt .mbidv { display: none; }
@media (max-width: 640px) {
  .crow.mkt { grid-template-columns: 16px minmax(0, 1fr) 56px 56px; gap: 8px; }
  .crow.mkt > .num:nth-child(3) { display: none; }
  .crow.mkt .cname { gap: 9px; }
  .crow.mkt .cthumb { width: 36px; height: 36px; }
  .crow.mkt .cn b { display: flex; align-items: flex-start; gap: 6px; white-space: normal; overflow: visible; }
  .crow.mkt .mname { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; line-height: 1.25; }
  .crow.mkt .ymark { display: block; flex: none; margin-top: 1px; padding: 0 5px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--t2); font: 600 11.5px/17px var(--mono); white-space: nowrap; }
  .crow.mkt .cn small { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
  .crow.mkt .mkind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crow.mkt .mrest { display: none; }
  .crow.mkt .mof { display: inline-flex; align-items: center; flex: none; min-height: 32px; margin: -8px 0; padding: 0 4px; background: none; border: 0; color: var(--t1); font: 500 12.5px var(--sans); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
  .crow.mkt .mof.outb { color: var(--down); text-decoration-color: currentColor; }
  .crow.mkt .mbid { display: none; }
  .crow.mkt .mbidv { display: block; margin-top: 3px; color: var(--t3); font: 400 12px var(--mono); white-space: nowrap; }
  .crow.mkt .mbidv.outb { color: var(--down); }
  .crow.mkt .mbidv.mine-n { color: var(--t1); }
}
.card .pulled.setfl { margin-top: 2px; }
/* an offer from the Collections table */
.cosheet { max-width: 520px; margin: 0 auto; }
.cosheet .co-head { display: flex; gap: 14px; align-items: center; margin: 10px 0 14px; }
.cosheet .co-head .cthumb { width: 64px; height: 64px; flex: none; }
.cosheet .co-head h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; line-height: 1.1; }
.cosheet .co-head p { margin: 4px 0 0; }
.cosheet .co-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.cosheet .co-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; }
.cosheet .co-stats span { color: var(--dim); font-size: 12px; }
.cosheet .co-quick { display: flex; gap: 8px; margin: 10px 0 4px; }
.cosheet .co-quick:empty { display: none; }

/* ---------- the founder's analytics (/admin/analytics) ---------- */
.adm-tabs { margin: 0 0 16px; }
.adm-tabs a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 9px; color: var(--dim); font-weight: 580; font-size: 13.5px; text-decoration: none; }
.adm-tabs a.on { background: rgba(255,255,255,.12); color: #fff; }
.an-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.an-range .field { height: 34px; padding: 0 8px; width: auto; }
.an-fresh { margin: 0 0 10px; }
.an .cstats > div small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.an-chart { margin: 0 0 14px; padding: 10px 12px 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.an-chart svg { display: block; width: 100%; height: 150px; }
.an-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--dim); }
.an-keys { text-align: center; }
.an-keys i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: -1px; }
.an-t { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13.5px; }
.an-t td, .an-t th { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.an-t th { color: var(--dim); font-weight: 600; font-size: 12px; }
.an-t td:not(:first-child), .an-t th:not(:first-child) { text-align: right; }
.an-more { margin: 0 0 14px; }
.an-more summary { cursor: pointer; padding: 4px 0; }
.an-defs p { margin: 8px 0; font-size: 13.5px; color: #b0b0bd; line-height: 1.45; }
@media (max-width: 720px) { .an .cstats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; overflow: visible; } }

/* ---------- PFP of the week (Home) and reactions to a profile picture (a profile) ---------- */
.hf-pfpw .hc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pw-win { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin: 10px 0 4px; color: inherit; text-decoration: none; }
.pw-art { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--ink), 0 0 24px rgba(255,210,63,.35); }
.pw-art img, .pw-art canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pw-who { display: flex; flex-direction: column; gap: 3px; }
.pw-who b { font-size: 17px; }
.pw-none { margin: 8px 0 2px; }
.pw-lead { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.pw-row { display: grid; grid-template-columns: 18px 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px; border-radius: var(--rc); color: inherit; text-decoration: none; }
.pw-row:hover { background: rgba(255,255,255,.05); }
.pw-row .tn { color: var(--dim2); font: 600 12px var(--mono); text-align: center; }
.pw-row .cthumb { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.pfp-rx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 6px; }
.pfp-rb { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pfp-rx .rx { height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: inherit; font-size: 15px; cursor: pointer; }
.pfp-rx .rx b { font-size: 12.5px; font-weight: 600; margin-left: 2px; }
.pfp-rx .rx.on { border-color: var(--ink); background: rgba(255,210,63,.12); }
.pfp-rx .rx:disabled { cursor: default; opacity: .9; }
/* which collections are in a drop's sets (Packs, Drop 02) */
.setcols { margin: 8px 0 0; line-height: 1.5; }
.setcols a, .setsall a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 2px; }
.setsall { margin: 8px 0 0; }
.setsall summary { cursor: pointer; }
.setsall p { margin: 6px 0; line-height: 1.5; }

/* the bid side (2026-10-17): what another one costs, standing bids at pull time */
.pd-info > .replace { order: 1; margin: -4px 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.replace .rl { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: var(--rc); background: rgba(255,255,255,.06); color: var(--t2); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.pd-info > .bidany { order: 1; }
.pulpfoot .sellb { width: 100%; justify-content: center; margin-bottom: 6px; }
/* a rare pull's Share, first on its card, the brightest of its buttons */
.pulpfoot .shareb { width: 100%; justify-content: center; gap: 6px; margin-bottom: 6px; }
.deal.summary .pulpfoot .btn.shareb { background: var(--t1); color: var(--k0); border-color: var(--t1); }
.after .bidhint { width: 100%; text-align: center; margin: 0 0 6px; color: var(--t2); }
/* (the summary's row a width of its own on a computer: sized to its contents, its notes and Pulp all stayed on one line
   and ran off both sides of the screen in Safari; the founder's screenshot, 2026-10-28) */
.stage .after.pkend { width: min(1240px, 100%); box-sizing: border-box; padding: 0 20px; }
.cfm-guide { margin: 0 0 10px; color: var(--dim); line-height: 1.5; }
/* "1 of N" (2026-10-17): how many share the look */
.stamp .popn { display: block; font: 600 12px var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.75); font-style: normal; margin-top: 2px; }
.stamp .popn:empty { display: none; }
.fact .popf { display: block; margin-top: 3px; font-size: 12px; }
/* set tiers, milestones, wantlists, gift packs, streak freezes, welcome week (2026-10-17) */
.tierpill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px; border-radius: var(--rt); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; --t: #ffffff; color: var(--t); border: 1px solid color-mix(in srgb, var(--t) 45%, transparent); background: color-mix(in srgb, var(--t) 9%, transparent); }
.tierpill.t-starter { --t: var(--t2); }
.tierpill.t-core { --t: var(--r1); }
.tierpill.t-chase { --t: var(--ink); }
.tierpill.t-legend { --t: var(--r4); box-shadow: 0 0 12px rgba(255,106,213,.25); }
/* a set finished once and no longer held: greyed, tap for which pieces are gone (the founder, 2026-10-21) */
.tierpill.lapsed { --t: var(--t3, #8a8a96); box-shadow: none; opacity: .55; filter: grayscale(1); cursor: pointer; font-family: var(--mono); }
.tierpill.lapsed:hover, .tierpill.lapsed:focus-visible { opacity: .85; }
.tierpill.lapsed-n { --t: var(--t3, #8a8a96); opacity: .7; }
.tierpill .tink { font-weight: 600; opacity: .8; letter-spacing: .02em; }
.badges .tierpill { height: 24px; }
.msmark { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: var(--rt); font: 600 12px var(--sans); color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--line2); white-space: nowrap; }
.msmark.short { color: var(--up); border-color: rgba(0,245,160,.45); background: rgba(0,245,160,.08); }
.fam-head .wantall { margin-left: auto; }
.wantb { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; align-self: flex-start; padding: 3px 9px; border-radius: var(--rt); font: 600 12px var(--sans); color: var(--dim); background: transparent; border: 1px solid var(--line2); cursor: pointer; }
.wantb.on { color: var(--r4); border-color: rgba(255,106,213,.5); background: rgba(255,106,213,.08); }
.setline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 13.5px; color: var(--dim); }
.setline a { color: var(--text); font-weight: 600; text-decoration: none; }
.setline .demand { color: var(--up); }
/* (the Want button in the line keeps no top margin of its own, so it sits level with "N collectors want it": the
   founder, 2026-10-30, "misaligned vertically") */
.setline .wantb { margin-top: 0; }
/* (and it wraps with its count, never apart from it: review E of next/want-align) */
.setline .wantgrp { display: inline-flex; align-items: center; gap: 8px; }
.wantline { display: block; margin-top: 4px; font-size: 12px; color: var(--r4); }
.profsets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profsets span { font-size: 12px; color: var(--dim); padding: 3px 9px; border-radius: var(--rt); border: 1px solid var(--line); }
.profsets span b { color: var(--text); font-weight: 600; }
.profsets span.short { color: var(--up); border-color: rgba(0,245,160,.4); }
.srow .gifttag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--rt); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r4); border: 1px solid rgba(255,106,213,.45); vertical-align: 1px; }
.e3-gem.kept { background: rgba(255,210,63,.6); border-color: var(--ink); }
.e3-gem.frozen { background: rgba(76,201,240,.35); border-color: var(--r1); }
.e3-gem.freezing { border-color: var(--r1); border-style: dashed; }
.e3-snext { margin: 12px 0 0; font-size: 13px; color: var(--dim); line-height: 1.5; }
.e3-snext b { color: var(--text); font-weight: 600; }
.welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.welcome .wsteps { display: flex; gap: 8px; }
.welcome .wstep { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; padding: 7px 8px; border-radius: var(--rc); border: 1px solid var(--line2); font-size: 12px; color: var(--dim); }
.welcome .wstep b { font-size: 13px; color: var(--text); }
.welcome .wstep.got { border-color: rgba(0,245,160,.5); background: rgba(0,245,160,.07); color: var(--up); }
.welcome .wstep.due { border-color: rgba(255,210,63,.6); }
.hf-welcome { padding: 12px 14px; border-radius: var(--rc); border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.hf-welcome .wt { flex: 1; min-width: 160px; font-size: 13.5px; }
.hf-welcome .wt small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.wlrow .num small { display: block; font-size: 12px; color: var(--dim); }
.crow.wlrow { grid-template-columns: minmax(0, 2.4fr) repeat(2, minmax(64px, 1fr)) auto; cursor: pointer; }
.crow.wlrow .wantb { margin-top: 0; }
.badges .tierpill .tink { height: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: .02em; }

/* ---------- the stamp album (app.js album; core.js stamps): its pixel pieces everywhere, and the profile's postmarks ---------- */
/* stamps and the other pixel pieces: only whole-number scales, drawn crisp, never rotated */
.stp, img.px { display: block; image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
.stp.k1 { width: 32px; height: 40px; } .stp.k2 { width: 64px; height: 80px; } .stp.k3 { width: 96px; height: 120px; } .stp.k4 { width: 128px; height: 160px; } .stp.k5 { width: 160px; height: 200px; }
.stp.live { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* (the album's own pixel pictures, stamps and the ones drawn at a whole-number scale with their size given, keep that
   size in a toast or a notification; a pixel-art print's thumbnail, also img.px, fills its square like any other: a
   member's report, 2026-10-18, had one drawn full size over the notifications on a phone) */
.toast .ti:has(.stp), .note-row .ti:has(.stp), .toast .ti:has(img.px[width]), .note-row .ti:has(img.px[width]) { height: 40px; background: none; overflow: visible; }
.toast .ti img.stp, .note-row .ti img.stp, .toast .ti img.px[width], .note-row .ti img.px[width] { width: auto; height: auto; object-fit: none; }
.live-row .thumb.stthumb { display: grid; place-items: center; background: var(--k2); }
.live-row .thumb.stthumb img.stp { width: 32px; height: 40px; object-fit: none; opacity: 1; }
/* the profile: postmarks (on the stamps' paper), the frame, past albums */
.profalb .sec-head { margin-top: 34px; }
.profalb .albno { color: var(--st-gold); margin-right: 6px; }
.profalb .albhalf { color: var(--st-mint); margin-right: 6px; }
.pmarks { display: flex; flex-wrap: wrap; gap: 8px; }
.pmark { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 5px; border-radius: var(--ra); background: var(--st-paper); color: var(--st-ink); }
.pmark img.px { display: block; }
.pmark b { font: 500 13px var(--mono); white-space: nowrap; }
.pmark small { font-size: 11px; opacity: .7; }
.pmark.gilt { background: var(--st-gold); }
.frpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.frpick .frdot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.pastalb { margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pastalb summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pastalb .pastcv { display: block; margin-top: 12px; image-rendering: pixelated; background: var(--k1); border-radius: var(--ra); }
.profalb .albsum { margin: -8px 0 12px; color: var(--t2); font-size: 14px; }
.albcover { display: flex; align-items: center; gap: 14px; margin: -6px 0 12px; }
.albcover > div { display: flex; flex-direction: column; gap: 4px; }
.misb { display: inline-flex; align-self: flex-start; padding: 2px 8px; border-radius: var(--rt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-mint) 55%, transparent); color: var(--st-mint); font: 500 11px var(--mono); }
.misb.mint { background: color-mix(in srgb, var(--st-mint) 14%, transparent); }
/* a worn page frame: the page's perforated edge round your picture (gold once gilded) */
.orb.sfr { border: 0; outline: 3px dotted var(--f1); outline-offset: 2px; box-shadow: 0 0 0 2px var(--f2); }
.orb.sfr.noav { background: repeating-linear-gradient(45deg, var(--st-gum) 0 2px, color-mix(in srgb, var(--st-gum) 90%, var(--st-ink)) 2px 3px); box-shadow: 0 0 0 2px var(--f2), inset 0 2px 0 rgba(0,0,0,.18); }

/* a launch (core.js launches): announced with a countdown, its request window, its lottery; then the premium note */
.drop.launch { justify-content: flex-end; }
/* its words sit over more of the art than a drop's usual two lines: the shade comes up higher */
.drop.launch::before { background: linear-gradient(180deg, rgba(6,6,8,.15) 0%, rgba(6,6,8,.55) 16%, rgba(6,6,8,.9) 34%, rgba(6,6,8,.97) 55%); }
.drop.launch .lx { display: grid; gap: 10px; margin: 0 0 12px; }
.lx-cd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lx-cd span { color: var(--dim); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lx-cd b { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.drop.launch .lx-when { margin: 0; color: var(--t2); font-size: 14px; line-height: 1.5; }
.lx-form { display: grid; gap: 10px; padding: 12px; border-radius: var(--rc); background: rgba(8,8,12,.6); border: 1px solid var(--line2); }
.lx-step { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lx-step .btn { width: 40px; padding: 0; font-size: 18px; }
.lx-step .lx-n { width: 3.4em; height: 40px; padding: 0 4px; text-align: center; font-size: 22px; -moz-appearance: textfield; }
.lx-step .lx-n::-webkit-inner-spin-button, .lx-step .lx-n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lx-q { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-q .btn { min-width: 52px; }
.lx-q .btn.on { background: var(--t1); color: var(--k0, #0b0b0b); border-color: var(--t1); }
.lx-step .lx-hold { flex-basis: 100%; }
.lx-mine { padding: 9px 12px; border-radius: var(--rc); background: rgba(255,210,63,.07); border: 1px solid rgba(255,210,63,.25); font-size: 14px; }
.drop.launch .lx-rule { margin: 0; line-height: 1.45; }
.drop.launch .lx-note:empty { display: none; }
.lx-res { margin: 0 0 8px; padding: 9px 12px; border-radius: var(--rc); background: rgba(155,93,229,.14); border: 1px solid rgba(155,93,229,.45); font-size: 13.5px; line-height: 1.45; }
.lx-res a { color: var(--t1); }
.lx-prem { margin-top: 8px; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.lx-prem.on { color: #ffd9a8; }
.lx-prem b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.lxbar .grow { flex: 1; min-width: 0; }
/* the public drops open now, on Home (app.js dropsCheck) */
.dropbars .grow { flex: 1; min-width: 0; }
.dropbars b b { display: inline; }
.dropbars .dropbar + .dropbar { margin-top: 0; border-top: 0; }
@media (max-width: 560px) {
  .lx-cd b { font-size: 22px; }
  .drop.launch .dbtns .btn { flex: 1 1 auto; }
}

/* ---------- a profile's sets: counts by tier, the best few, the rest folded (2026-10-17) ---------- */
.psets { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.psum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.psum > b { margin-right: 4px; }
.psets .tierpill { height: 24px; }
.ptop { display: flex; flex-wrap: wrap; gap: 6px; }
.pshort { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--rt); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--up); border: 1px dashed rgba(0,245,160,.45); }
.pall summary { cursor: pointer; color: var(--dim); font-size: 13px; padding: 2px 0; }
.pall[open] summary { margin-bottom: 8px; }
.pgrp { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 0 10px; }
.pgrp > div { display: flex; flex-wrap: wrap; gap: 6px; }
.pgl { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding-top: 6px; }
.pgo { height: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--rt); font-size: 12.5px; color: var(--t2); border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.pgo i { font-style: normal; font: 600 12px var(--mono); color: var(--dim); }
.pgo.short { color: var(--up); border-color: rgba(0,245,160,.4); }
.pspecial { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--rt); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1px solid rgba(255,210,63,.45); background: rgba(255,210,63,.08); margin-right: 4px; }

/* ---------- the founder's analytics, redone (2026-10-17): cards, charts with axes, heatmap, bars ---------- */
.axp .page-head { margin-bottom: 10px; }
.ax-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.ax-seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.ax-seg button { white-space: nowrap; }
.ax-custom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ax-custom .field { height: 34px; width: auto; padding: 0 8px; }
.ax-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; color: #b0b0bd; }
.ax-pill { padding: 3px 9px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: #cfcfda; }
.ax-pill.warn { border-color: rgba(255,210,63,.35); color: #ffd23f; background: rgba(255,210,63,.06); cursor: help; }
.ax-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.ax-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; min-height: 96px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.ax-kl { font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ax-kv { font-size: 28px; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; }
.ax-ks { font-size: 12px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ax-spark { position: absolute; right: 12px; top: 14px; width: 34%; height: 26px; opacity: .9; }
.ax-d { font: 650 11.5px var(--mono); padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.06); color: #cfcfda; }
.ax-d.up { color: #00f5a0; background: rgba(0,245,160,.1); }
.ax-d.dn { color: #ff7a7a; background: rgba(255,122,122,.1); }
.ax-kpi.sk, .ax-card.sk { background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03)); background-size: 200% 100%; animation: axsk 1.2s linear infinite; }
.ax-card.sk.tall { height: 260px; }
@keyframes axsk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ax-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ax-card { padding: 16px 16px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.ax-card.wide { grid-column: 1 / -1; }
/* the Growth page's tables: numbers right, the day column held, scrolling sideways inside the card on a phone */
.gr-tw { overflow-x: auto; margin: 6px 0 10px; }
.gr-t { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.gr-t th { text-align: right; font-weight: 600; color: var(--dim); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.gr-t td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-t th:first-child, .gr-t td:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); }
.gr-t small { margin-left: 4px; }
.ax-ch { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.ax-ch h2 { font-size: 17px; margin: 0; letter-spacing: -.01em; }
.ax-cs { font-size: 12.5px; color: var(--dim); }
.ax-chart { position: relative; }
.ax-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ax-chart .ax-gl { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.ax-yl { fill: #8a8a98; font: 11px var(--mono); text-anchor: end; }
.ax-xl { fill: #8a8a98; font: 11px var(--mono); text-anchor: middle; }
.ax-hover { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.ax-hover.on { opacity: 1; }
.ax-tip { position: absolute; top: 4px; z-index: 2; min-width: 150px; padding: 8px 10px; border-radius: 10px; background: rgba(18,18,24,.96); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.4); font-size: 12.5px; pointer-events: none; }
.ax-tip b { display: block; margin-bottom: 4px; }
.ax-tip span { display: flex; align-items: center; gap: 6px; }
.ax-tip span em { margin-left: auto; font-style: normal; font: 650 12px var(--mono); }
.ax-tip i, .ax-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.ax-tip small { display: block; margin-top: 4px; color: #ffd23f; }
.ax-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: #b0b0bd; }
.ax-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ax-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 12px; }
.ax-mini .ax-kpi { min-height: 0; padding: 10px 12px; background: rgba(255,255,255,.025); }
.ax-mini .ax-kv { font-size: 21px; }
.ax-nm { color: var(--dim); font-size: 13.5px; margin: 4px 0; }
.ax-foot { color: var(--dim); font-size: 12px; margin: 8px 0 0; line-height: 1.45; }
.ax-pools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.ax-pool { padding: 10px 12px; border-radius: 12px; background: rgba(0,245,160,.06); border: 1px solid rgba(0,245,160,.18); display: flex; flex-direction: column; }
.ax-pool span { font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ax-pool b { font-size: 24px; font-weight: 760; }
.ax-pool small { color: var(--dim); font-size: 11.5px; }
.ax-heat { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.ax-heat th { color: var(--dim); font-weight: 600; font-size: 11.5px; text-align: center; padding: 2px; }
.ax-heat th:first-child, .ax-heat td:first-child { text-align: left; }
.ax-heat td { padding: 6px 8px; border-radius: 6px; text-align: center; font: 600 12px var(--mono); }
.ax-heat td:nth-child(2) { color: var(--dim); font-weight: 500; }
.ax-heat td.na { color: #55555f; background: rgba(255,255,255,.02); }
.ax-heat sup { color: #ffd23f; }
.ax-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.ax-rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-rl a { color: inherit; }
.ax-rb { height: 10px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; }
.ax-rb i { display: block; height: 100%; border-radius: 999px; }
.ax-rv { font: 650 12.5px var(--mono); text-align: right; white-space: nowrap; }
.ax-rv small { color: var(--dim); font-weight: 500; margin-left: 4px; }
.ax-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin-top: 12px; }
.ax-tile { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ax-tile span { font-size: 11.5px; color: var(--dim); }
.ax-tile b { font-size: 19px; font-weight: 720; }
.ax-tile small { font-size: 11.5px; color: var(--dim); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ax-more { margin-top: 10px; }
.ax-more summary { cursor: pointer; color: var(--dim); font-size: 13px; }
.ax-kvrow { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.ax-div { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ax-divh { display: grid; grid-template-columns: 1fr 130px 1fr; font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ax-divh span:first-child { text-align: right; padding-right: 8px; }
.ax-divh span:last-child { padding-left: 8px; }
.ax-divr { display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; font-size: 12.5px; }
.ax-divr .l { text-align: center; color: #cfcfda; padding: 0 6px; line-height: 1.2; }
.ax-divr .o, .ax-divr .i { position: relative; height: 18px; display: flex; align-items: center; }
.ax-divr .o { justify-content: flex-end; }
.ax-divr .o i { height: 12px; border-radius: 4px 0 0 4px; background: #ff7a7a; opacity: .75; }
.ax-divr .i i { height: 12px; border-radius: 0 4px 4px 0; background: #00f5a0; opacity: .75; }
.ax-divr em { font-style: normal; font: 600 11px var(--mono); color: #cfcfda; padding: 0 6px; white-space: nowrap; }
.ax-divr .o em { order: -1; }
.ax-defs { margin-top: 14px; }
.ax-defs summary { cursor: pointer; list-style: none; }
.ax-defs summary h2 { display: inline; font-size: 16px; }
.ax-defs p { margin: 8px 0; font-size: 13.5px; color: #b0b0bd; line-height: 1.5; }
@media (max-width: 860px) {
  .ax-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-grid { grid-template-columns: minmax(0, 1fr); }
  .ax-kv { font-size: 24px; }
  .ax-divh, .ax-divr { grid-template-columns: 1fr 96px 1fr; }
  .ax-row { grid-template-columns: minmax(0, 34%) minmax(0, 1fr) auto; }
}

/* the gate's way to a code: the Discord invite button (the founder, 2026-10-17) */
.gate .getinv { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.gate .getinv .dcget { align-self: stretch; text-align: center; }

/* the trade offer screen: your prints from collections the other collector doesn't own (2026-10-17) */
.card.newto .newtag { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 3px 8px; border-radius: var(--rt); font: 600 11px/1.3 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: #04130d; background: var(--up); box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; }
.tsort .tmiss { order: 4; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; font-size: 13px; cursor: pointer; }
.tsort .tmiss span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tsort .tmiss[hidden] { display: none; }
.tsort .textra { order: 5; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; font-size: 13px; cursor: pointer; }
.tsort .textra[hidden] { display: none; }

/* What's new (2026-10-17) */
.news { display: grid; gap: 14px; max-width: 760px; }
.news-day { padding: 16px 18px; }
.news-day h2 { margin: 0 0 8px; font-size: 18px; }
.news-day ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; line-height: 1.5; }

/* phone Home, tidied (2026-10-18): one ink count (the header's), the pack buttons readable, and the welcome week,
   what's waiting on you and Getting started as one card with a row each */
.hf-todo { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
  .hf-strip .ink-c { display: none; }
  .hs-hi h1 { max-width: 52vw; }
  .hf .collect button { display: block; padding: 10px 12px; }
  .hf .collect .cb-ic { display: none; }
  .hf .collect .cb-t { gap: 3px; }
  .hf .collect .cb-t b { font-size: 14px; }
  .hf .collect .cb-t small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
  .hf-todo { gap: 0; border-radius: var(--rc); border: 1px solid var(--line); background: rgba(255,255,255,.03); overflow: hidden; }
  .hf-todo > * + *, .hf-todo .hf-need + .hf-need { border-top: 1px solid rgba(255,255,255,.06); }
  .hf-todo .hf-needs { gap: 0; }
  .hf-todo .hf-need { padding: 10px 12px; gap: 10px; border: 0; border-radius: 0; background: none; }
  .hf-todo .hf-need.hot { background: rgba(255,90,70,.06); }
  .hf-todo .hn-ic { width: 32px; height: 32px; border-radius: var(--rc); font-size: 15px; }
  .hf-todo .hn-t b { font-size: 14px; }
  .hf-todo .hn-t small { font-size: 12px; }
  .hf-todo .hf-welcome { flex-wrap: nowrap; gap: 10px; padding: 10px 12px; border: 0; border-radius: 0; background: none; }
  .hf-todo .hf-welcome .wt { min-width: 0; font-size: 14px; }
  .hf-todo .hf-welcome .wt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hf-todo .wsteps { gap: 5px; flex: none; }
  .hf-todo .wstep { min-width: 0; width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; }
  .hf-todo .wstep .wsd, .hf-todo .wstep .wss { display: none; }
  .hf-todo .wstep b { font: 600 12px var(--mono); }
  .hf-todo .wstep.got b { color: var(--up); }
  .hf-todo .quests, .hf-todo .quests.slim { border: 0; border-radius: 0; background: none; }
  .hf-todo > * + .quests, .hf-todo > * + .quests.slim { border-top: 1px solid rgba(255,255,255,.06); }
  .hf-todo .quests.slim .qslim { padding: 12px; }
  .ht-list { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .hf-fh h2 { font-size: 19px; }
  .hf-scopes { gap: 6px; }
  .hf-scopes .chip { height: 30px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 640px) { .hf .collect .cb-more { display: none; } }
.ww-ph { display: none; }
@media (max-width: 640px) { .hf-todo .ww-ph { display: inline; } .hf-todo .ww-dt { display: none; } }

/* a Turned print swings into its tilt (app.js swingIn, 2026-10-18): the print itself turns, about its middle */
.card-art.turned { overflow: visible; background: none; z-index: 1; transform-origin: 50% 50%; }
.card-art.turned > img, .card-art.turned > canvas, .card-art.turned > .skel { border-radius: inherit; background: #000; }
.card-art.turned > img { outline: 1px solid transparent; }
.frame.turned { transform-origin: 50% 50%; will-change: transform, filter; overflow: visible; background: none; box-shadow: none; }
.frame.turned > canvas { border-radius: inherit; background: #000; }
.home .showpiece .frame.turned { animation: none; }
.card-art.turned { will-change: transform, filter; }
/* the glint across a Turned print while it turns (app.js twistPaint) */
.tglint { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.16) 53%, transparent 62%) 50% 0 / 320% 100% no-repeat; }

/* ==============================================================
   Darkroom: type (2026-10-18, plans/ui-revamp-2 phase 1). One scale: titles and names in the heading face
   (--font-head), headings 17/18 at 600 in the text face, body 15, small 13, numbers in mono, labels 11 mono caps
   at most once a block. Weights 400, 500, 600 only.
   ===================================================================== */
/* section heads and card heads: the heading face too (the founder, 2026-10-18), a size down and a touch less tight */
.hf-fh h2, .hc-h h2, .e3-th h2, .e3-th h3, .e3-h3, .ax-ch h2, .rules-sec h2, .news-day h2, .sb h3, .qh b, .fam-head b, .lhead b, .auc h3, .faq summary, .hd-body h3, .fs-head b, .rv-info h2, .subhead {
  font-family: var(--display); font-weight: var(--font-head-wt); letter-spacing: -.015em; }
.hf-fh h2 { font-size: 18px; }
.hc-h h2 { font-size: 15px; }
/* titles: dialogs, the pack stage, sign-in, a drop's name */
:is(.cfm-box h3, .authbox h3, .tourbox h2, .rcbox h2, .stage .title h2, .drop h3, .dc-info h3, .pp-title, .e3-head h1) { font-family: var(--display); font-weight: var(--font-head-wt); letter-spacing: var(--font-head-ls); }
/* numbers read as numbers: tabular, in mono, never a colour of their own unless they're ink */
.num, .t, .ed, .tn, .rk { font-variant-numeric: tabular-nums; }
/* small print is at least 12px, and readable: the faint grey is --t3, 5.6:1 */
.dim { color: var(--t3); }
.small { font-size: 13px; }

/* =====================================================================
   Darkroom: components (2026-10-18, plans/ui-revamp-2 phase 2). One icon set, flat buttons with one primary per
   area, text tabs and square tags, the rarity mark, the print tile, toasts, the selection bar, dialogs and sheets,
   the header and the tab bar. No blur, no glow, no gradient in the chrome. The card chrome on the art (trait
   badges, the count, the favorite star, the heart) stays as it was (the founder, 2026-10-18).
   ===================================================================== */
/* ---- icons: Lucide's shapes, 1.75 strokes, round ends ---- */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; overflow: visible; }
.i.s { width: 16px; height: 16px; } .i.l { width: 24px; height: 24px; }
.i.on { fill: currentColor; }
.btn .i { width: 18px; height: 18px; } .btn.sm .i { width: 16px; height: 16px; }
.thumbic { display: grid; place-items: center; width: 100%; height: 100%; color: var(--t3); background: var(--k2); }

/* ---- buttons: primary is paper, the rest are quiet; one primary per area ---- */
.btn { height: 44px; padding: 0 18px; border-radius: var(--rc); border: 1px solid transparent; background: var(--k2); color: var(--t1); font: 600 15px/1 var(--sans); letter-spacing: -.005em;
  box-shadow: none; transition: background .12s, color .12s, opacity .12s, border-color .12s; }
.btn:hover { transform: none; background: var(--k3); }
.btn:active { transform: none; opacity: .82; }
.btn.primary, .btn.glow, .btn.primary.glow { background: var(--t1); color: var(--k0); border-color: var(--t1); box-shadow: none; text-shadow: none; }
.btn.primary:hover, .btn.glow:hover { background: #fff; }
.btn.sm { height: 34px; padding: 0 12px; border-radius: var(--rc); font-size: 13.5px; }
.btn.danger { color: var(--down); }
.btn.primary.danger { background: var(--k2); border-color: transparent; color: var(--down); }
.btn.ghost, .btn.line { background: none; border-color: transparent; color: var(--t2); }
.btn.line { border-color: var(--rule2); color: var(--t1); }
.btn.ghost:hover, .btn.line:hover { background: var(--k2); color: var(--t1); }
.btn.more { background: none; border-color: var(--rule2); color: var(--t2); }
.btn:disabled { opacity: .4; }
.btn .ink { color: inherit; }
.linkbtn { color: var(--t2); text-decoration-color: var(--rule2); }

/* ---- fields ---- */
.field, select.field { height: 40px; padding: 0 12px; border-radius: var(--rc); background: var(--k2); border: 1px solid transparent; color: var(--t1); font-size: 15px; }
.field::placeholder { color: var(--t3); }
.field:focus { border-color: var(--rule2); background: var(--k2); }
select.field { padding-right: 30px; }
select.field option { background: var(--k2); }

/* ---- tags (filters): small squares; tabs (sections): text with a rule under the one you're on ---- */
.chip { height: 30px; padding: 0 10px; border-radius: var(--rt); border: 0; background: var(--k2); color: var(--t2); font: 500 13px var(--sans); gap: 6px; }
.chip:hover { color: var(--t1); border-color: transparent; }
.chip.on { background: var(--t1); color: var(--k0); border-color: transparent; }
.chip .n { opacity: .7; font: 500 11.5px var(--mono); }
.seg { display: flex; gap: 22px; padding: 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.seg::-webkit-scrollbar { display: none; }
.seg button { position: relative; flex: none; height: auto; padding: 10px 0 12px; border-radius: 0; background: none; color: var(--t3); font: 500 15px var(--sans); white-space: nowrap; }
.seg button:hover { color: var(--t2); }
.seg button.on { background: none; color: var(--t1); }
.seg button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--t1); }
.seg button .dim { font: 500 12px var(--mono); color: var(--t3); margin-left: 3px; }
.page-head .seg { flex: 1 1 100%; }

/* ---- the rarity mark: an ink swatch, the number neutral. Legend is cyan and magenta out of register ---- */
.h0 { --hc: var(--r0); --hg: transparent; }
.h1 { --hc: var(--r1); --hg: rgba(25,183,232,.28); }
.h2 { --hc: var(--r2); --hg: rgba(157,123,255,.3); }
.h3 { --hc: var(--r3); --hg: rgba(255,214,10,.3); }
.h4 { --hc: var(--r4); --hg: rgba(255,61,154,.32); }
.h5 { --hc: var(--r5); --hg: var(--r5-g); }
.odds, .h4 .odds, .odds.h4 { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font: 500 12.5px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.odds::before, .h4 .odds::before, .odds.h4::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 0; background: var(--hc, var(--r0)); box-shadow: none; }
.h4 .odds::before, .odds.h4::before { width: 9px; height: 9px; background: linear-gradient(var(--r1), var(--r1)) 0 0 / 6px 6px no-repeat, linear-gradient(var(--r4), var(--r4)) 3px 3px / 6px 6px no-repeat; }
.fact .odds, .kpi .odds { color: var(--t1); font-size: 15px; gap: 8px; }
.fact .odds::before, .kpi .odds::before { width: 10px; height: 10px; }
.h4 .fact .odds::before, .kpi.h4 .odds::before { width: 13px; height: 13px; background: linear-gradient(var(--r1), var(--r1)) 0 0 / 9px 9px no-repeat, linear-gradient(var(--r4), var(--r4)) 4px 4px / 9px 9px no-repeat; }

/* ---- ink: the gold gem stays the mark of an amount; no glow ---- */
.inkpill::before, .ink::before, i.gem { filter: none; }
.ink { font-weight: 500; }

/* ---- the print tile: art, then a label. No panel, border or tilt; the chrome on the art stays ---- */
.grid { gap: 28px 20px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.card { padding: 0; border: 0; border-radius: 0; background: none; transform: none !important; box-shadow: none; }
.card:hover { box-shadow: none; }
.card.h3, .card.h4 { border-color: transparent; }
.card.h4::before { content: none; }
.card-art { border-radius: var(--ra); }
.card:hover .card-art img { transform: none; }
.glare { display: none; }
.card-body { padding: 10px 0 0; }
.card-title { font: 500 14.5px/1.3 var(--sans); letter-spacing: -.005em; color: var(--t1); }
.card-sub { color: var(--t3); font-size: 12.5px; margin-top: 4px; }
.card-sub .ed { font: 400 12px var(--mono); color: var(--t3); }
.card-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.card-foot .who { color: var(--t3); font-size: 12.5px; }
.card-foot .lfl { overflow: hidden; text-overflow: ellipsis; }
.card-foot .lfl b { color: var(--t2); font-weight: 500; font-size: 12px; }
.price { font-weight: 500; font-size: 14px; }
.card.sel { box-shadow: none; border-color: transparent; }
.card.sel .card-art { outline: 2px solid var(--t1); outline-offset: 3px; }
.card.sel::after { content: ''; top: 8px; right: 8px; width: 24px; height: 24px; background: var(--t1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 14px no-repeat; }
.card.favlock { opacity: .4; }
.card-art .skel { background: var(--k1); }

/* ---- list rows: hairlines, not boxes ---- */
.panel { background: var(--k1); border: 1px solid var(--rule); border-radius: var(--rc); }
.panel.live { background: none; border: 0; border-radius: 0; padding: 0; }
.live-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-radius: 0; border-top: 1px solid var(--rule); }
.live-row:first-child { border-top: 0; }
.live-row:hover { background: none; }
.live-row:hover .txt > b { text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
.live-row .thumb { width: 52px; height: 52px; border-radius: var(--ra); box-shadow: none; }
.live-row .txt { color: var(--t2); font-size: 14.5px; line-height: 1.4; }
.live-row .txt b { color: var(--t1); font-weight: 500; }
.live-row .txt .odds { margin-top: 4px; }
.live-row .t { color: var(--t3); font: 400 12px var(--mono); }
.live.big .live-row, .hf-list .live-row { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px 0; }
.live.big .thumb, .hf-list .live-row .thumb { width: 56px; height: 56px; border-radius: var(--ra); }
.hf-list .live-row + .live-row { border-top: 1px solid var(--rule); border-radius: 0; }
.hp-t, .tthumb { border-radius: var(--ra); box-shadow: none; }
.rxc { height: 26px; border-radius: var(--rt); border: 0; background: var(--k2); color: var(--t1); font: 500 12px var(--mono); }
.rxc.on { background: var(--k3); box-shadow: inset 0 0 0 1px var(--rule2); }
.rxc.on span { color: var(--t1); }
.rxadd { color: var(--t3); opacity: 1; }
.rxpick { border-radius: var(--rc); background: var(--k2); border: 1px solid var(--rule2); box-shadow: var(--shadow); }
/* a feed row's React button at its right, by the time, not on a line of its own under the text; 40 px to tap (the UX
   pass, 2026-10-24) */
.live-row.rxr > .t, .live-row > .rxend { grid-column: 3; grid-row: 1; }
.live-row.rxr > .t { margin-right: 44px; }
.live-row > .rxend { justify-self: end; display: flex; }
.rxend .rxadd { position: relative; }
.rxend .rxadd::after { content: ''; position: absolute; inset: -7px -3px; }
.empty { border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; padding: 40px 16px; color: var(--t3); }
.empty b { color: var(--t1); font-weight: 600; font-size: 16px; }
.meter { height: 2px; border-radius: 0; background: var(--k3); }
.meter i { border-radius: 0; background: var(--t1); }

/* ---- toasts: solid, a hairline, the one shadow; the print or an icon, one sentence ---- */
.toast { padding: 8px 14px 8px 8px; border-radius: 10px; background: var(--k2); border: 1px solid var(--rule2); box-shadow: var(--shadow); color: var(--t1); font-size: 14px; }
.toast .ti { width: 36px; height: 36px; border-radius: var(--ra); background: var(--k3); color: var(--t1); font-size: 16px; }
.toast a { color: var(--t1); font-weight: 600; text-decoration-color: var(--rule2); }

/* ---- the selection bar, menus, panels and dialogs: k1, a hairline, 14px corners, the one shadow, no blur ---- */
.bulkbar { border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); }
.toppanel { border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); }
.tp-head { border-bottom: 1px solid var(--rule); }
.tp-head b { font-weight: 600; }
.note-row { border-radius: var(--rc); color: var(--t2); }
.note-row:hover { background: var(--k2); }
.note-row.new { background: none; box-shadow: inset 2px 0 0 var(--t1); }
.note-row .ti { border-radius: var(--ra); background: var(--k2); color: var(--t1); }
.note-row a { color: var(--t1); }
.note-row .t { color: var(--t3); font: 400 12px var(--mono); }
.mm-head { border-bottom: 1px solid var(--rule); }
.mm-list a { border-radius: var(--rc); color: var(--t2); font-weight: 500; }
.mm-list a:hover { background: var(--k2); color: var(--t1); }
.mm-list .i, .mm-foot .i { width: 18px; height: 18px; color: var(--t3); stroke: currentColor; }
.mm-foot { border-top: 1px solid var(--rule); }
.qn { background: var(--live); color: #fff; font-weight: 600; }
.search-ov, .authov, .cfm { background: rgba(0,0,0,.62); }
.search-box { border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); }
.search-box .sq { font-size: 17px; background: transparent; }
.sg { color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; }
.si { border-radius: var(--rc); }
.si.on { background: var(--k2); }
.si .sa { border-radius: var(--ra); background: var(--k2); color: var(--t3); }
.search-box .sx { background: var(--k2); color: var(--t2); place-items: center; }
.authbox, .cfm-box, .tourbox, .rcbox { border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); }
.authbox h3, .cfm-box h3 { font-size: 26px; line-height: 1.1; }
.ak { border-radius: var(--rc); background: var(--k2); border: 0; box-shadow: none; }
.ak svg, .pkstate svg { stroke-width: 1.75; }
.cfm-warn { padding: 2px 0 2px 12px; border-radius: 0; background: none; border: 0; border-left: 2px solid var(--down); color: var(--t2); font-size: 14px; }
.cfm-warn b { color: var(--t1); font-size: 15px; }
.cfm-row { border-radius: 0; padding: 8px 0; border-top: 1px solid var(--rule); }
.cfm-row.low { background: none; }
.cfm-row.low .ink { color: var(--down); }
.cfm-row.low .rp { border-color: var(--down); color: var(--down); }
.cfm-row .cthumb { border-radius: var(--ra); }
.cfm-total { border-top: 1px solid var(--rule2); }
.cfm-total b.ink { font-size: 20px; }
.tourbox .tdots i.on, .gate .join .jdots i.on { background: var(--t1); }
.tourbox .ticon { color: var(--t1); }
.tourbox .ticon .i { width: 40px; height: 40px; stroke-width: 1.5; }
.rccode { border-radius: var(--rc); background: var(--k2); border: 1px dashed var(--rule2); }
.x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--k2); color: var(--t1); display: grid; place-items: center; }
.x:hover { transform: none; background: var(--k3); }
/* phones: dialogs are sheets from the bottom, with a grab handle */
@media (max-width: 640px) {
  .cfm, .authov { place-items: end stretch; padding: 0; }
  .cfm-box, .authbox { width: 100%; max-height: 90dvh; border-radius: var(--rs) var(--rs) 0 0; border-bottom: 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); }
  .cfm-box::before, .authbox::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--k3); margin: -10px auto 4px; flex: none; }
  .toast { border-radius: 10px; }
}

/* ---- the header: the stamp and the wordmark; search, bell, ink, you ---- */
.top { background: var(--k0); border-bottom: 1px solid var(--rule); }
.brand { color: var(--t1); font-family: var(--display); }
canvas.logo { box-shadow: none !important; }
.brand canvas.logo { filter: none; }
.iconbtn { border: 0; background: none; color: var(--t2); width: 36px; height: 36px; border-radius: var(--rc); }
.iconbtn:hover { background: var(--k2); color: var(--t1); border-color: transparent; }
.iconbtn .i { width: 20px; height: 20px; }
/* the bell: one red dot (the number is in the panel) */
.iconbtn .dot { top: 6px; right: 6px; min-width: 0; width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; background: var(--live); box-shadow: 0 0 0 2px var(--k0); }
.me .badge { top: -1px; right: -1px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px var(--k0); }
/* ink: a plain amount, gold, with its gem */
.inkpill { height: 34px; padding: 0 6px; border: 0; background: none; border-radius: var(--rc); color: var(--ink); font: 500 15px var(--mono); }
.inkpill:hover { background: var(--k2); }
.top .orb { width: 32px; height: 32px; box-shadow: inset 0 0 0 1px var(--rule2); }
.searchbtn .sfield { display: none; }
@media (min-width: 641px) {
  .top { display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 32px; }
  .brand { flex: none; }
  nav { display: flex; gap: 24px; padding: 0; border: 0; border-radius: 0; background: none; align-self: stretch; overflow: visible; }
  nav a { display: flex; align-items: center; padding: 0; border-radius: 0; color: var(--t3); font: 500 15px var(--sans); }
  nav a:hover { color: var(--t1); }
  nav a.on { color: var(--t1); }
  nav a.on::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--t1); }
  .nav-pill { display: none; }
  .top .right { margin-left: auto; gap: 8px; }
  .top .wallet { gap: 8px; }
  /* a real search field, "/" to focus */
  .searchbtn { width: auto; min-width: 260px; justify-content: flex-start; gap: 8px; padding: 0 10px; display: inline-flex; align-items: center; height: 36px; background: var(--k2); color: var(--t3); }
  .searchbtn .sfield { display: flex; flex: 1; align-items: center; gap: 8px; font: 400 14px var(--sans); color: var(--t3); }
  .searchbtn .sfield kbd { margin-left: auto; font: 500 11px var(--mono); color: var(--t3); border: 1px solid var(--rule2); border-radius: 4px; padding: 1px 5px; }
  .searchbtn .i { width: 16px; height: 16px; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .top { gap: 20px; padding: 0 20px; }
  nav { gap: 18px; }
  .searchbtn { min-width: 0; } .searchbtn .sfield { display: none; }
}
/* the beta line: one quiet line */
.devnote { padding: 8px 16px; font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--t2); background: var(--k1); border-bottom: 1px solid var(--rule); }
.devnote b { margin-right: 8px; padding: 0; border-radius: 0; background: none; color: var(--t1); font: 500 11px var(--mono); letter-spacing: .06em; }
.devnote a { color: var(--t1); margin-left: 8px; }
.devnote .dn-s { display: none; }
.pausenote { color: var(--t1); background: var(--k1); }
.pausenote b { background: none; color: var(--down); }
.foot { color: var(--t3); }
@media (max-width: 640px) {
  .devnote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .devnote .dn-l { display: none; } .devnote .dn-s { display: inline; }
}

/* ---- the phone tab bar: five tabs, line icons; the one you're on is paper with a heavier line ---- */
@media (max-width: 640px) {
  .top { background: var(--k0); }
  .brand { font-size: 23px; }
  nav { background: var(--k0) !important; border-top: 1px solid var(--rule); box-shadow: none; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  nav a { height: 50px; font: 500 11px var(--sans); color: var(--t3); border-radius: 0; gap: 4px; }
  nav a svg, nav a .i { display: block; width: 24px; height: 24px; stroke-width: 1.75; filter: none; transform: none; }
  nav a.on { color: var(--t1); }
  nav a.on svg, nav a.on .i { stroke-width: 2.1; filter: none; transform: none; }
  .nav-pill { display: none; }
  .iconbtn { width: 38px; height: 38px; background: none; }
  .inkpill { padding: 0 4px; font-size: 14px; }
}
/* a tab with something waiting: a small paper dot */
#nav a.due span::after { background: var(--t1); }
@media (max-width: 640px) { #nav a.due::after { background: var(--t1); box-shadow: 0 0 0 2px var(--k0); width: 6px; height: 6px; top: 6px; } }
/* the listing check: the ways to set every price as a list, each with what it would list for */
.cfm-box { gap: 12px; padding: 22px 22px 18px; }
.cfm-opts { display: grid; }
.cfm-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; border-top: 1px solid var(--rule); cursor: pointer; font-size: 15px; color: var(--t1); }
.cfm-opt:first-child { border-top: 0; }
.cfm-opt .grow { flex: 1; min-width: 0; }
.cfm-opt .mono { font-size: 13px; }
.cfm-opt input[type=radio] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border-radius: 50%; border: 1.5px solid var(--rule2); cursor: pointer; }
.cfm-opt input[type=radio]:checked { border-color: var(--t1); background: radial-gradient(circle, var(--k0) 0 3.5px, var(--t1) 4.5px); }
.cfm-opt input[type=radio]:disabled { opacity: .4; }
.cfm-opt .field.same { width: 110px; height: 36px; text-align: right; font-family: var(--mono); }
.cfm-note { color: var(--t3); font-size: 13.5px; }
.cfm-guide { color: var(--t2); }
.cfm-total { align-items: baseline; }
.cfm-total > span:first-child { font-size: 15px; color: var(--t1); }
.cfm .actions { justify-content: flex-end; gap: 8px; margin-top: 4px; }
.cfm:focus { outline: none; }
.cfm .actions .raise { order: 3; }
.cfm .actions .go.danger { background: var(--k2); }
@media (max-width: 640px) {
  .cfm .actions { display: flex; flex-wrap: wrap; }
  .cfm .actions .btn { flex: 1 1 40%; height: 48px; padding: 0 10px; }
  .cfm .actions .cancel { order: 4; flex-basis: 100%; height: 40px; }
}
/* The list of prints and prices can always be read (a member's report, 2026-10-18: with the ways to price and a
   warning above it, it was squashed to half a row). The ways to price, the warning and the list scroll together as
   one part of the dialog, and the total and the buttons stay at its foot. */
.cfm-box > h3, .cfm-box > .cfm-foot { flex: none; }
.cfm-mid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; margin: 0 -22px; padding: 0 22px; }
.cfm-mid > * { flex: none; }
.cfm-mid > .cfm-list { overflow: visible; }
.cfm-foot { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) { .cfm-mid { margin: 0 -16px; padding: 0 16px; } }

/* =====================================================================
   Darkroom: a print's page (phase 3). The art on the black, its name and number, one line of rarity, the owner
   and price as a row, one bar of actions (More holds the rest, Pulp last), the traits as a list, the rest folded.
   On a phone it's a page with a back bar, the art edge to edge, and others' prints keep their bar at the bottom.
   ===================================================================== */
.ov { background: var(--k0); }
.ov-box { max-width: 1280px; padding: 40px 32px 64px; transform: none; transition: none; }
.ov.open .ov-box { transform: none; }
.pd { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: 56px; }
.showpiece .frame { border-radius: var(--ra); box-shadow: none; }
.showpiece .glow { display: none; }
.sndbtn { border-radius: 50%; border: 0; background: rgba(11,11,12,.72); color: var(--t1); }
.sndbtn.on { box-shadow: inset 0 0 0 1.5px var(--t1); }
.playhint { color: var(--t3); }
.pbar { display: none; }
.pd-info .kicker { margin-bottom: 12px; font: 400 14px var(--sans); text-transform: none; letter-spacing: 0; color: var(--t3); display: block; }
.pd-info .kicker a { color: var(--t1); }
.pd-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pd-title h2 { flex: 1 1 auto; min-width: 0; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; }
.pd-ed { color: var(--t3); font-size: 14px; white-space: nowrap; }
.pd-tools { margin-left: auto; gap: 2px; align-self: center; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 18px 0 22px; color: var(--t3); font-size: 14px; }
.pmeta .odds { font-size: 15px; color: var(--t1); gap: 8px; }
.pmeta .odds::before { width: 10px; height: 10px; }
.h4 .pmeta .odds::before { width: 13px; height: 13px; background: linear-gradient(var(--r1), var(--r1)) 0 0 / 9px 9px no-repeat, linear-gradient(var(--r4), var(--r4)) 4px 4px / 9px 9px no-repeat; }
.ptraits .pt-note { margin: 8px 0 0; color: var(--t3); font-size: 12px; line-height: 1.5; }
.ptraits .pt-note b { font-weight: 500; color: var(--hc); }
.ptraits .pt-h + .traits { margin-bottom: 10px; }
/* a haul's list: each thing a chip with its chance, coloured like a trait */
.ptraits .trait.multi { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ptraits .tparts { display: flex; flex-wrap: wrap; gap: 5px; }
.ptraits .tpart { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px; border-radius: var(--rt); background: var(--k2); font: 400 13px/1.35 var(--sans); color: var(--t1); text-transform: none; letter-spacing: 0; }
.ptraits .tpart i { min-width: 0; text-align: left; font: 400 11px var(--mono); color: var(--t3); font-style: normal; }
.ptraits .tpart.sp { color: var(--hc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 35%, transparent); }
.ptraits .tpart.sp i { color: var(--hc); }
/* the four global traits under their own heading, below the series */
.tg-h { display: block; margin: 4px 0 2px; color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pmeta .prank { color: var(--t2); text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
.pmeta .prank:hover { color: var(--t1); }
.owner { gap: 12px; padding: 16px 0; margin: 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.owner .orb { width: 44px; height: 44px; }
.owner .who span, .owner .ask span { color: var(--t3); font-size: 13px; }
.owner .who a { font-weight: 600; font-size: 16px; }
.owner .ask .ink { font-size: 22px; justify-content: flex-end; }
.pnums { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 14px 0 0; color: var(--t3); font-size: 13.5px; }
.pnums b { color: var(--t1); font-weight: 500; margin-left: 4px; font-size: 13.5px; }
.pd-info > .replace { margin: 10px 0 0; font-size: 13px; color: var(--t3); }
.replace .rl { padding: 0; margin-right: 8px; background: none; color: var(--t2); font: 500 11px var(--mono); letter-spacing: .06em; border-radius: 0; }
.wantline { color: var(--t2); margin-top: 10px; font-size: 13px; }
.wantline .i { color: var(--r4); }
.lockline { margin: 18px 0 0; padding: 0 0 0 12px; border: 0; border-left: 2px solid var(--ink); border-radius: 0; background: none; color: var(--t2); }
.lockline .i { color: var(--ink); }
.pd-info > .actions, .pd .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.pd-info > .actions > .btn { flex: 1 1 auto; }
.pd-info > .actions > .btn.sq, .btn.sq { flex: none; width: 44px; padding: 0; }
.pd-info > .actions .pricef { height: 44px; padding: 0 0 0 12px; background: var(--k2); border-radius: var(--rc); gap: 4px; flex: 0 1 150px; }
.pd-info > .actions .pricef .field { background: none; height: 44px; width: 100%; padding: 0 10px 0 4px; font-family: var(--mono); text-align: right; }
.pd-info > .actions .pricef .ink { order: 2; padding-right: 10px; font-size: 0; }
.pd-info > .actions .pricef .ink::before { width: 9px; height: 13px; }
.like.big { position: static; height: 44px; min-width: 44px; padding: 0 12px; gap: 6px; border-radius: var(--rc); border: 0; background: var(--k2); color: var(--t1); font: 500 13px var(--mono); opacity: 1; transform: none; justify-content: center; backdrop-filter: none; -webkit-backdrop-filter: none; }
.like.big svg { width: 18px; height: 18px; stroke: var(--t1); stroke-width: 1.75; }
.like.big.on { background: var(--k2); border: 0; }
.like.big.on svg { fill: var(--r4); stroke: var(--r4); }
.note:empty { min-height: 0; margin: 0; }
.pd-info > .note { margin-top: 10px; }
.likethis { margin: 12px 0 0; color: var(--t3); }
.sendbox, .offerbox { gap: 8px; margin-top: 12px; padding: 12px 0; border-radius: 0; background: none; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.offerbox { max-width: none; justify-content: flex-start; }
.offerbox .dim { text-align: left; }
/* More: a popover by its button, or a sheet on a phone */
.pmore { position: relative; display: inline-flex; }
.pmenu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 270px; padding: 6px; flex-direction: column; background: var(--k1); border: 1px solid var(--rule2); border-radius: var(--rs); box-shadow: var(--shadow); }
.pmore.open .pmenu { display: flex; }
.mi { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--rc); background: none; color: var(--t1); font: 500 15px var(--sans); text-align: left; cursor: pointer; white-space: nowrap; }
.mi:hover { background: var(--k2); }
.mi .i { color: var(--t2); width: 18px; height: 18px; }
.mi.favbtn.on .i { color: var(--ink); }
.mi.danger, .mi.danger .i { color: var(--down); }
.mi.pulpit { margin-top: 6px; position: relative; }
.mi.pulpit::before { content: ''; position: absolute; left: 6px; right: 6px; top: -4px; border-top: 1px solid var(--rule); }
.mi .mr { margin-left: auto; padding-left: 16px; color: var(--t3); font-size: 12.5px; }
/* Pulp's first-tap warning, under its line in the sheet (the UX pass, 2026-10-24) */
.pm-warn { max-width: 320px; margin: 2px 0 4px; padding: 4px 12px 8px; color: var(--t2); font-size: 13.5px; line-height: 1.45; white-space: normal; }
.pm-warn b { color: var(--t1); font-weight: 600; }
@media (max-width: 640px) { .pm-warn { max-width: none; font-size: 14px; } }
.mi:disabled { opacity: .4; }
/* the phone sheet's dimmed page (a tap on it closes the sheet) and its Cancel line; neither on a computer */
.pm-scrim, .mi.mcancel { display: none; }
/* traits: a list with their odds, the special ones in their ink */
.ptr-h { margin-top: 30px; }
.traits { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 12px; }
.trait, a.trait { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 11px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.trait:first-child { border-top: 0; }
.trait span { color: var(--t3); font: 400 14px var(--sans); text-transform: none; letter-spacing: 0; }
.trait b { font: 500 15px var(--sans); }
.trait i { min-width: 58px; text-align: right; font: 400 12.5px var(--mono); color: var(--t3); }
.trait.sp { background: none; border-color: var(--rule); }
.trait.sp b, .trait.sp i { color: var(--hc); }
a.trait:hover { transform: none; background: none; border-color: var(--rule); }
a.trait:hover b { text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
a.trait:hover b::after { content: none; }
.ptraits { margin: 0 0 14px; }
.ptraits .pt-h { color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; }
.ptraits .pt { padding: 5px 9px; border-radius: var(--rt); background: var(--k2); border: 0; font-size: 13px; }
.why, .recipe { color: var(--t2); font-size: 15px; margin: 14px 0; }
.why:empty { display: none; }
/* folded away: the rarity maths, history, downloads */
.calc, .disclose { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.calc summary, .disclose summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; color: var(--t1); font: 500 15px var(--sans); cursor: pointer; list-style: none; }
.calc summary::-webkit-details-marker, .disclose summary::-webkit-details-marker { display: none; }
.calc summary::after, .disclose summary::after { content: ''; width: 9px; height: 9px; margin-right: 4px; border-right: 1.75px solid var(--t3); border-bottom: 1.75px solid var(--t3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.calc[open] summary::after, .disclose[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.calc[open] summary { margin-bottom: 0; }
.calc[open], .disclose[open] { padding-bottom: 14px; }
.calc-eq small { color: var(--t3); }
.disclose + .hash, .calc + .hash { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 0; }
.timeline { border-left-color: var(--rule2); margin-top: 4px; }
.timeline li { color: var(--t2); }
.timeline li::before { background: var(--k0); border-color: var(--hc, var(--t2)); }
.timeline li span { color: var(--t3); font: 400 12px var(--mono); }
.timeline a { color: var(--t1); font-weight: 500; }
.hash { color: var(--t3); }
.pnav .btn { width: 36px; padding: 0; background: var(--k2); }
.vbox { border-radius: 0; background: none; border: 0; border-left: 2px solid var(--up); padding: 4px 0 4px 14px; }
.poffers .pofrow { border-top-color: var(--rule); }
.uauc .bidbox { gap: 0; }
.bidbox > div { padding: 12px 0; border-radius: 0; background: none; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bidbox > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.bidbox > div > span { color: var(--t3); font: 400 13px var(--sans); text-transform: none; letter-spacing: 0; }
.bidbox b { font: 500 22px var(--mono); }
@media (max-width: 1000px) { .pd { grid-template-columns: 1fr; gap: 28px; } }
.owner .ask .ink { color: var(--ink); font: 500 22px var(--mono); }
.pd-info > .actions > .btn { min-width: 0; }
@media (max-width: 640px) {
  .ov-box { padding: 0 0 calc(32px + env(safe-area-inset-bottom)); }
  /* (full bleed is for a print's page, with its bar; other windows, such as a trade offer, keep their margins: the
     offer window's words and cards touched the screen's edges, prints-announcer 2026-10-19) */
  .ov-box:not(:has(.pbar)) { padding: calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
  .ov-box:has(.pbar) > .x { display: none; }
  .ov-box > .x { top: calc(10px + env(safe-area-inset-top)); right: 10px; }
  .pbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 4px; height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 4px 0; background: var(--k0); border-bottom: 1px solid var(--rule); }
  .pbar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
  .pbar button { width: 44px; height: 44px; border: 0; background: none; color: var(--t1); display: grid; place-items: center; cursor: pointer; }
  /* (Share with its word: the founder, 2026-10-25, "don't hide the share button on mobile behind 3 dots") */
  .pbar .pb-share { width: auto; height: 40px; display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--t1); color: var(--k0); font: 600 14px var(--sans); }
  .pd { gap: 0; }
  .pd-art .frame { border-radius: 0; }
  .pd-art .showpiece:has(.frame.turned) { padding: 16px 16px 8px; }
  .pd-art .playhint { padding: 0 16px; }
  /* (two lines and a "more" on a phone, the UX pass, 2026-10-24) */
  .pd-art .playhint:not(.open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pd-art .phmore:not([hidden]) { display: block; margin: 0 auto -4px; min-height: 32px; padding: 0 14px; background: none; border: 0; color: var(--t2); font: 500 13px var(--sans); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
  .pd-info { padding: 18px 16px 0; }
  .pd .pd-info > * { order: 0; }
  .pd-info .kicker { font-size: 13px; }
  .pd-title h2 { font-size: 34px; }
  .pd-tools { display: none; }
  .pmeta { margin: 12px 0 16px; gap: 4px 14px; font-size: 13.5px; }
  .pd-info > .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .pd-info > .actions .btn { width: auto; flex: 1 1 0; height: 48px; padding: 0 12px; }
  .pd-info > .actions .btn.sq, .pd-info > .actions .like.big { flex: none; width: 48px; height: 48px; padding: 0; }
  .pd-info > .actions .pricef { flex: 1 1 100%; height: 48px; }
  .pd-info > .actions .pricef .field { height: 48px; }
  .pd-info > .actions .btn:only-child { grid-column: auto; }
  .pd-info > .actions.pin { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--k0); border-top: 1px solid var(--rule); }
  .pmenu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; min-width: 0; padding: 14px 8px calc(14px + env(safe-area-inset-bottom)); border-radius: var(--rs) var(--rs) 0 0; border-bottom: 0; }
  .pmenu::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--k3); margin: -4px auto 10px; flex: none; }
  .pmenu { transition: transform .2s ease; }
  .pmore.open .pm-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.55); cursor: pointer; }
  .mi.mcancel { display: flex; justify-content: center; margin-top: 6px; position: relative; color: var(--t2); }
  .mi.mcancel::before { content: ''; position: absolute; left: 6px; right: 6px; top: -4px; border-top: 1px solid var(--rule); }
  .mi { min-height: 50px; font-size: 16px; }
  .ov .more-grid, .ov .sec-head { margin-left: 16px; margin-right: 16px; }
  .ov .rail { margin: 0; padding: 2px 16px 8px; }
  .bidbox > div + div { padding-left: 12px; }
}

/* =====================================================================
   Darkroom: Home (phase 3). The newest drop's art first with the two ways in, today's things as plain rows,
   trending as art with its floor, then the feed. A computer: the drop and the feed on the left, Today and Trending
   on the right.
   ===================================================================== */
.hf-grid { margin-top: 28px; gap: 48px; grid-template-columns: minmax(0, 1fr) 360px; }
.hf-main { gap: 28px; }
.hf-rail { gap: 36px; top: 88px; }
.hf-card { padding: 0; border: 0; border-radius: 0; background: none; }
.hc-h { margin: 0 0 10px; align-items: baseline; }
.hc-h a { color: var(--t3); font-size: 13.5px; }
.hc-h a:hover { color: var(--t1); }
/* the drop */
.hd-hero { display: block; }
.hd-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; background: none; }
.hd-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 0; }
.hd-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 0 0; }
.hd-body .kicker { margin: 0; }
.hd-title { margin: 0; font-size: clamp(36px, 4.2vw, 56px); line-height: 1; }
.hd-line { margin: 2px 0 0; color: var(--t2); font-size: 15px; }
.hd-body .meter { margin-top: 10px; }
.hd-body .meter-row { margin: 2px 0 0; color: var(--t3); font: 400 12.5px var(--mono); }
.hf .collect { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.hf .collect button, .hf .collect a.cb-pack, .hf .collect .cb-free.so { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 16px; border: 0; border-radius: var(--rc); background: var(--k2); color: var(--t1); box-shadow: none; text-align: left; transition: background .12s; }
.hf .collect button:hover:not(:disabled) { transform: none; background: var(--k3); border-color: transparent; }
.hf .collect .cb-free.ready { background: var(--t1); color: var(--k0); box-shadow: none; border: 0; }
.hf .collect .cb-free.ready:hover:not(:disabled) { background: #fff; }
.hf .collect .cb-pack:not(:disabled) { background: var(--k2); border: 0; }
.hf .collect button:disabled { opacity: 1; color: var(--t2); }
.hf .collect .cb-ic { display: grid; width: auto; height: auto; border-radius: 0; background: none; font-size: inherit; }
.hf .collect .cb-ic .i { width: 20px; height: 20px; }
.hf .collect .cb-t { gap: 1px; min-width: 0; }
.hf .collect .cb-t b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf .collect .cb-t small { color: inherit; opacity: .72; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hf .collect .cb-t small .ink { color: inherit; }
.hf .collect .cb-free.ready .cb-t small .ink::before { filter: brightness(.5); }
.hf .collect .cb-more { display: none; }
.collect.soldout .cb-free.so { background: var(--k2); border: 0; }
.collect.soldout a.cb-pack { background: var(--k2); border: 0; }
/* Today: plain rows on hairlines */
.hf-todo { display: flex; flex-direction: column; gap: 0; border: 0; background: none; border-radius: 0; overflow: visible; }
.hf-needs { gap: 0; }
.hrow, .hf .hf-need, .hf .hf-welcome { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; color: var(--t1); text-decoration: none; }
.hf-todo > .hc-h + * { border-top: 0; }
.hrow:hover .hr-t b, .hf-need:hover .hn-t b { text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
.hr-th, .hr-ic, .hf .hn-ic { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: var(--rc); background: var(--k2); color: var(--t2); }
.hr-th { border-radius: var(--ra); background: #000; }
.hr-th img, .hf .hn-ic img { width: 100%; height: 100%; object-fit: cover; }
.hr-t, .hf .hn-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-t b, .hf .hn-t b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-t b .dim { font-weight: 400; color: var(--t2); overflow: hidden; text-overflow: ellipsis; }
.hr-t small, .hf .hn-t small { color: var(--t3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-t .live-dot { width: 7px; height: 7px; flex: none; }
.hr-go, .hf .hn-go { color: var(--t3); display: grid; }
.hr-amt { font-size: 14px; }
.hf .hf-need.hot { background: none; }
.hf .hf-need.hot .hn-ic { color: var(--live); }
.hf .hf-welcome .wt b { display: flex; gap: 6px; font-weight: 600; }
.hf .hf-welcome .wt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf .welcome .wsteps { gap: 4px; flex: none; }
.hf .welcome .wstep { width: 28px; height: 28px; min-width: 0; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid var(--rule2); }
.hf .welcome .wstep .wsd, .hf .welcome .wstep .wss { display: none; }
.hf .welcome .wstep b { font: 500 12px var(--mono); color: var(--t2); }
.hf .welcome .wstep.got { background: var(--t1); border-color: var(--t1); }
.hf .welcome .wstep.got b { color: var(--k0); }
.hf .welcome .wstep.due { border-color: var(--t1); }
.ww-ph { display: none; }
/* Getting started: one row (it opens to the list) */
.hf .quests, .hf .quests.slim { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.hf .quests.slim > :not(.qslim) { display: none; }
.hf .quests.slim .qslim { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 14px 0; background: none; border: 0; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.hf .qslim .kicker { margin: 0; font: 600 15px var(--sans); text-transform: none; letter-spacing: 0; color: var(--t1); }
.hf .qslim b { font: 400 13px var(--mono); color: var(--t3); }
.hf .qslim .qs-next { color: var(--t3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf .qslim .qs-go { color: var(--t3); display: grid; }
.hf .quests:not(.slim) { padding: 12px 0; }
.qh { gap: 10px; }
.qh b { font-size: 15px; }
.ql { gap: 0; }
a.q { padding: 10px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; color: var(--t2); }
a.q:hover { background: none; color: var(--t1); }
.q .qc { border: 1.5px solid var(--rule2); color: var(--k0); }
.q.done .qc { background: var(--t1); border-color: var(--t1); color: var(--k0); }
.q .qc .i { width: 12px; height: 12px; stroke-width: 3; }
.hf .quests .qmore { margin: 6px 0 0; }
/* trending: art with its floor */
.hf .ht-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.hf .ht { display: flex; flex-direction: column; gap: 6px; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; position: relative; }
.hf .ht:hover { background: none; }
.hf .ht .cthumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--ra); box-shadow: none; }
.hf .ht .ti { gap: 1px; }
.hf .ht .ti b { font-size: 13.5px; font-weight: 500; }
.hf .ht .ti small { font-size: 12.5px; color: var(--t3); }
.hf .ht .tn { display: none; }
/* the feed */
.hf-fh { margin: 0 0 4px; }
.hf-fh h2 { font-size: 22px; }
.hf-scopes { margin: 0 0 4px; }
.hf-more { margin: 16px 0 0; }
/* PFP of the week, fresh pulls, just listed */
.pw-art { box-shadow: 0 0 0 2px var(--ink); }
.pw-row { border-radius: var(--rc); }
.pw-row:hover { background: var(--k1); }
.hm-art { border-radius: var(--ra); }
.hm-it b { font-weight: 500; }
@media (max-width: 1000px) {
  .hf-grid { gap: 28px; margin-top: 0; }
  .hf .hf-trend { padding: 0; }
  .hf .ht-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; -webkit-mask-image: none; mask-image: none; }
  .hf .ht-list::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .hd-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -16px; }
  .hd-body { padding-top: 18px; }
  .hd-title { font-size: 40px; }
  .hf .collect { margin-top: 12px; }
  .hf .collect button, .hf .collect a.cb-pack { padding: 8px 12px; min-height: 54px; }
  .hf .collect .cb-ic { display: grid; }
  .hf-todo { border: 0; background: none; }
  .hf-todo > * + *, .hf-todo .hf-need + .hf-need { border-top: 1px solid var(--rule); }
  .hf-todo .hf-need, .hf-todo .hf-welcome { padding: 12px 0; }
  .ww-ph { display: inline; } .ww-dt { display: none; }
  /* (the welcome row's lines wrap at a word, not cut mid-word, "given: op…": the UX pass, 2026-10-24) */
  .hf .hf-todo .hf-welcome .wt b { flex-wrap: wrap; row-gap: 0; white-space: normal; }
  .hf .hf-todo .hf-welcome .wt b .dim, .hf .hf-todo .hf-welcome .wt small { white-space: normal; overflow: visible; }
  .hf .hf-mini { display: none; }
  .hf-fh h2 { font-size: 20px; }
}

/* =====================================================================
   Darkroom: page heads, Inventory (phase 3). A title with its one action beside it, text tabs, the numbers as a
   line, a search and one Filter button (a sheet on a phone), quick filters as tags, then the prints. Selecting
   shows a floating bar.
   ===================================================================== */
.page-head { padding: 36px 0 0; gap: 16px 24px; align-items: flex-end; }
.page-head p { color: var(--t2); }
.ph-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 100%; }
.ph-t h1 { margin: 0; }
.ph-act { display: flex; gap: 8px; }
.selbtn.on { background: var(--t1); color: var(--k0); }
.invline { margin: 14px 0 20px; color: var(--t2); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.invline .odds { font-size: 13px; }
.invbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.invbar .field.qf { flex: 1 1 240px; width: auto; display: flex; align-items: center; gap: 8px; color: var(--t3); }
.invbar .qf input.q { all: unset; flex: 1; min-width: 0; color: var(--t1); font-size: 15px; }
.invbar .qf input.q::placeholder { color: var(--t3); }
.fbtn2 { height: 40px; }
.fbtn2.on { box-shadow: inset 0 0 0 1px var(--rule2); }
.fbtn2 .n { font: 500 12px var(--mono); color: var(--t2); }
.invbar .fins { flex: 1 1 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.invbar .fins::-webkit-scrollbar { display: none; }
.fsheet { display: none; order: 2; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
.invbar.fon .fsheet { display: flex; }
.fsheet select.field { flex: 1 1 180px; width: auto; }
.fs-h, .fs-back, .fsl { display: none; }
.pickhint { margin: 0 0 18px; padding: 0 0 0 12px; border: 0; border-left: 2px solid var(--t1); border-radius: 0; background: none; color: var(--t2); font-size: 14px; }
.pickhint > b:first-child { display: inline; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--t1); font-size: inherit; letter-spacing: 0; text-transform: none; }
.onlybar { padding: 10px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; color: var(--t2); }
.sealedshelf { margin: 0 0 18px; padding: 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; }
.sealedshelf summary { padding: 10px 0; }
.sealedshelf .schev { display: grid; color: var(--t3); }
.mosaic.sface { box-shadow: none; border-radius: var(--ra); }
.sealedshelf summary .sthumb .mosaic.sface { box-shadow: none; border-radius: var(--ra); }
/* the selection bar: floats at the bottom while you pick */
.bulkbar { position: sticky; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; }
.bulkbar .bb1 { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.bulkbar .bn { font-weight: 600; margin-right: 6px; white-space: nowrap; }
.bulkbar .bb2 { display: flex; gap: 8px; flex-wrap: wrap; }
.bulkbar .bunbox { flex: 1 1 100%; padding: 10px 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
@media (max-width: 640px) {
  .page-head { padding: 24px 0 0; }
  .invbar .field.qf { flex: 1 1 0; }
  .invbar .fins { margin: 0 -16px; padding: 0 16px; }
  .invbar .fsheet { display: flex; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    background: var(--k1); border-top: 1px solid var(--rule2); border-radius: var(--rs) var(--rs) 0 0; box-shadow: var(--shadow); transform: translateY(105%); transition: transform .32s var(--ease); }
  .invbar.fon .fsheet { transform: none; }
  .invbar .fsheet select.field { flex: none !important; width: 100% !important; order: 0 !important; height: 48px; padding: 0 30px 0 12px; font-size: 16px; }
  .fs-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; }
  .fs-h b { font-size: 17px; font-family: var(--display); }
  /* each choice labelled, the sort under a rule of its own (four bare pull-downs, sort among the filters: the UX pass,
     2026-10-24) */
  .invbar .fsheet .fsl { display: block; margin: 4px 0 -4px; color: var(--t3); font: 500 12.5px var(--sans); }
  .invbar .fsheet .fsl-sort { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .fs-h::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--k3); }
  .invbar.fon .fs-back { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.55); }
  .bulkbar { display: block; bottom: calc(74px + env(safe-area-inset-bottom)); padding: 10px; }
  /* every action in view, two by two: a row that scrolled sideways hid Pulp off the right edge (a member's report,
     2026-10-22, "make scroll more defined on bulk select in inventory to know pulp is to the right") */
  .bulkbar .bb2 { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bulkbar .bb2 .btn { width: 100%; min-width: 0; padding: 0 10px; justify-content: center; }
  .bulkbar .bb1 .btn { padding: 0 8px; }
}
/* (fixes after looking at the print page and Home) */
/* The bar keeps every label whole (a member's report, 2026-10-18): Sell now, Price, List for sale, Auction, the heart
   and More were squeezed into one row on a computer, cutting List for sale off with Auction under it (its class, auc,
   also picked up the auction block's grid). Now the buttons and the price (.pb-main) grow from their own width and wrap
   onto another row when they don't fit, and the heart and More (.pb-end) stay at the end of the first row. On a phone
   they're one row of their own: the price with the heart and More beside it, then the buttons. */
.pd-info > .actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; }
.pd-info > .actions > .pb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-info > .actions > .pb-end { flex: none; display: flex; gap: 8px; }
.pd-info > .actions .pb-main > .btn { flex: 1 1 auto; min-width: auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-info > .actions .pb-main > .pricef { flex: 1 1 120px; min-width: 112px; }
.pd-info > .actions .pb-main > .btn:only-child { flex-basis: 100%; }
@media (max-width: 640px) {
  .pd-info > .actions { flex-wrap: wrap; }
  .pd-info > .actions > .pb-main { display: contents; }
  .pd-info > .actions .pb-main > .pricef { order: -2; flex: 1 1 calc(100% - 120px); min-width: 0; }
  .pd-info > .actions:has(.pricef) > .pb-end { order: -1; }
  .pd-info > .actions .pb-main > .btn, .pd-info > .actions .pb-main > .btn:only-child { flex: 1 1 auto; height: 48px; padding: 0 12px; }
}
.hf .ht .ti { text-align: left; }
@media (max-width: 640px) { .hf .collect .cb-t b { white-space: normal; font-size: 14.5px; line-height: 1.2; } }

/* =====================================================================
   Darkroom: Market and the ledgers (phase 3). One row of tabs (Yours has its own row), the collections as a
   ledger on hairlines: rank, art, name, the kind in words, tabular numbers. On a computer every column is neutral
   with the gem as the only gold; on a phone the floor is the one gold number.
   ===================================================================== */
.ph-p { flex: 1 1 100%; margin: 6px 0 0 !important; color: var(--t2); font-size: 15px; max-width: 640px; }
.mseg { margin-top: 4px; }
.yseg { margin: 14px 0 6px; gap: 20px; border-bottom: 0; }
.yseg button { padding: 4px 0 6px; font-size: 14px; }
.toolbar { gap: 8px; }
.mbar { margin: 20px 0 12px; }
.mbar .q { width: 240px; }
.ctable { gap: 0; }
.crow { gap: 14px; padding: 10px 0; border-radius: 0; border-top: 1px solid var(--rule); }
.crow:not(.head):hover { background: none; }
.crow:not(.head):hover .cname b { text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }
.crow.head { padding: 8px 0; color: var(--t3); font: 400 12.5px var(--sans); text-transform: none; letter-spacing: 0; border-top: 0; border-bottom: 1px solid var(--rule); }
.crow.head + .crow { border-top: 0; }
.crow .rk { color: var(--t3); font: 400 12.5px var(--mono); }
.crow .num { font: 400 13.5px var(--mono); color: var(--t1); }
.crow .num .ink { color: var(--t1); font: inherit; }
.crow .num small, .crow .num .dim { color: var(--t3); }
.crow .mine-n { color: var(--t1); font-weight: 600; }
.cthumb { border-radius: var(--ra); box-shadow: none; }
.cname { gap: 12px; }
.cname b { font-weight: 500; font-size: 15px; }
.cname small { color: var(--t3); font-size: 12.5px; }
/* your row: a faint band with a bar at its left, marked without moving it (a padding pushed its picture and columns
   ~10 px right and cut "rarest: …"; only the rank number moves, clear of the bar: the UX pass, 2026-10-24) */
.crow.meRow { background: rgba(255,255,255,.035); box-shadow: inset 2px 0 0 var(--t1); }
.crow.meRow > .rk { padding-left: 7px; }
.kpill { height: auto; padding: 0; border-radius: 0; background: none; color: var(--t3); font: 400 12.5px var(--sans); letter-spacing: 0; text-transform: none; }
.kpill.limited, .kpill.infinite, .kpill.daily { background: none; color: var(--t3); }
.act { border-radius: 0; padding: 10px 0; border-top: 1px solid var(--rule); }
.act:hover { background: none; }
.act .thumb { border-radius: var(--ra); }
.act .t { color: var(--t3); font: 400 12px var(--mono); }
.evt { font: 500 11px var(--mono); letter-spacing: .04em; }
.evt.bought { color: var(--up); } .evt.won { color: var(--r4); } .evt.listed { color: var(--ink); } .evt.minted, .evt.pulled { color: var(--r1); }
.chart .dot { fill: var(--t1); stroke: var(--k0); }
.chart .grid { stroke: var(--rule); }
.chart .lbl { fill: var(--t3); }
.chart .floorline { stroke: var(--ink); }
.rklist { gap: 0; }
.rkrow { border-radius: 0; border: 0; border-top: 1px solid var(--rule); padding: 10px 0; }
.rkrow:hover { background: none; }
.rkrow .rk { color: var(--t3); font: 400 12.5px var(--mono); }
.rkrow.me { background: none; border-color: var(--rule); box-shadow: inset 2px 0 0 var(--hc); padding-left: 10px; }
.rkrow .rkn small { color: var(--t3); }
.price.aucp .ink, .price.aucp small, .slot .slot-auc, .slot .slot-auc .ink { color: var(--r2); }
.price.aucp .ink::before, .slot .slot-auc .ink::before { filter: none; }
.tabnote { color: var(--t2); }
/* a tab's intro line and a page's filter chips clear the tab underline and the page's subtitle (they touched it, 0 px
   apart: the UX pass, 2026-10-24) */
.page-head + .tabnote, .seg + .tabnote, .page-head + .chips { margin-top: 16px; }
@media (max-width: 760px) {
  .crow.mkt > :nth-child(4) .ink { color: var(--ink); }
  .mbar .q { width: auto; flex: 1 1 100%; }
}

/* =====================================================================
   Darkroom: a profile, sets and offers (phase 3). No blurred banner: the picture, the name, one line of numbers,
   honours as words in their tier's colour; the showcase as a wall of art; offers on hairlines.
   ===================================================================== */
.banner { display: none; }
.prof { margin: 36px 0 8px; padding: 0; align-items: center; gap: 16px 22px; }
.prof .orb { width: 104px; height: 104px; box-shadow: inset 0 0 0 1px var(--rule2); }
.prof h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.02; }
.prof .sub { margin-top: 6px; color: var(--t2); font-size: 14px; }
.prof .sub a { color: var(--t1); }
/* the packs count opens its drops (t25): a link-like button in the line of numbers */
.prof .sub .pkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--t1); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.prof .pkby { margin: 4px 0 0; }
/* Pyx Online's Legend: a small card under a profile's head, drawn as Pyx's own Legend page draws its head and list
   (the founder: "Own row", then the whole Legend opening in it, then Pyx's font, "no huge text", the title in the blue,
   then "don't let the card fill the whole screen width", a Hide that turns it into a small icon, "a bit smaller"): Pyx
   Main and Small unsmoothed, at sizes that are whole screen pixels of their grids (Main 9, Small 5: --m below), its
   night palette and square double borders */
.pyxlg-box { margin: 6px 2px 20px; }
.pyxlg { --m: 18px; --ml: 23px; --s: 10px; --sl: 14px; box-sizing: border-box; position: relative; width: fit-content; max-width: min(540px, 86%); padding: 9px 28px 8px 10px; color: #e9e1cc; background: #1d1729; border: 2px solid #3a2f52; box-shadow: 0 0 0 2px #0a0710; transform-origin: 0 0;
  font: var(--m)/var(--ml) 'Pyx Main', ui-monospace, monospace; font-synthesis: none; font-kerning: none; font-variant-ligatures: none; -webkit-font-smoothing: none; }
@media (min-resolution: 2dppx), (max-width: 480px) { .pyxlg { --m: 13.5px; --ml: 19px; max-width: min(400px, 86%); } }
@media (min-resolution: 3dppx) { .pyxlg { --m: 15px; --ml: 20px; } }
.pyxlg-x { position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; padding: 0; border: 2px solid #0a0710; background: #3a2f52; color: #c9bfd9; font: var(--s)/1 'Pyx Small', ui-monospace, monospace; cursor: pointer; }
.pyxlg-x:hover, .pyxlg-x:focus-visible { color: #ffd23f; }
.pyxlg-chip { display: inline-grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 0 0; }
.pyxlg-chip .pyxlg-face { box-shadow: 0 0 0 2px #0a0710, 0 0 14px -2px rgba(255, 210, 63, .55); }
.pyxlg-chip:hover .pyxlg-face, .pyxlg-chip:focus-visible .pyxlg-face { border-color: #ffd23f; }
.pyxlg-chip:focus { outline: none; } .pyxlg-chip:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; }
.pyxlg-top { display: flex; align-items: center; gap: 9px; }
.pyxlg-face { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: #120e1a; border: 2px solid #3a2f52; overflow: hidden; }
.pyxlg-face img { display: block; image-rendering: pixelated; width: 24px; height: 24px; object-fit: contain; }
.pyxlg-blank { width: 12px; height: 12px; background: #ffd23f; opacity: .5; }
.pyxlg-ic { display: block; width: var(--w); height: var(--w); background-repeat: no-repeat; image-rendering: pixelated; flex: none; }
.pyxlg-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pyxlg-h { font: var(--m)/var(--ml) 'Pyx Main', ui-monospace, monospace; font-weight: normal; color: #ffd23f; text-transform: uppercase; overflow-wrap: break-word; }
.pyxlg-line { color: #c6bddb; overflow-wrap: break-word; }
.pyxlg-line em { font-style: normal; color: #4cc9f0; }
.pyxlg-strip { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin: 8px 0 0; overflow: hidden; }
.pyxlg-strip > [hidden] { display: none; }
.pyxlg-more { flex: none; }
.pyxlg-more { color: #c6bddb; margin-left: 2px; }
.pyxlg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 9px; }
.pyxlg-tog { appearance: none; margin: 0; padding: 2px 7px; border: 2px solid #0a0710; border-radius: 0; background: #3a2f52; color: #ffd23f; font: var(--m)/var(--ml) 'Pyx Main', ui-monospace, monospace; cursor: pointer; }
.pyxlg-tog:hover { background: #4a3c68; }
.pyxlg-tog span { display: inline-block; transition: transform .25s; }
.pyxlg.open .pyxlg-tog span { transform: rotate(180deg); }
.pyxlg-n { font: var(--s)/var(--sl) 'Pyx Small', ui-monospace, monospace; color: #a59cbc; text-transform: uppercase; }
.pyxlg-n a { color: #4cc9f0; text-decoration: none; }
.pyxlg-n a:hover, .pyxlg-n a:focus { color: #ffd23f; }
.pyxlg-all { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid #2a2140; }
.pyxlg-all[hidden] { display: none; }
.pyxlg-all li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 2px solid #2a2140; }
.pyxlg-all li:last-child { border-bottom: 0; }
.pyxlg-m { flex: 1 1 auto; min-width: 0; padding-top: 1px; overflow-wrap: break-word; }
.pyxlg-w { flex: none; padding-top: 1px; color: #c6bddb; white-space: nowrap; }
.pyxlg-dot { flex: none; width: 5px; height: 5px; margin: 4px; background: #ffd23f; opacity: .6; }
/* the story folded into one row, as Pyx's page has it: a gold triangle that turns, the marks under it indented */
.pyxlg-all li.pyxlg-s { display: block; padding: 0; }
.pyxlg-sum { appearance: none; display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 0; padding: 5px 0; border: 0; background: none; color: #ffd23f; font: inherit; text-align: left; cursor: pointer; }
.pyxlg-sum:hover .pyxlg-m, .pyxlg-sum:focus-visible .pyxlg-m { text-decoration: underline; }
.pyxlg-tri { display: inline-block; width: 0; height: 0; margin: 0 5px 1px 0; border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #ffd23f; }
.pyxlg-s.open .pyxlg-tri { border-width: 5px 4px 0 4px; border-color: #ffd23f transparent transparent transparent; margin: 0 4px 2px 0; }
.pyxlg-s > ol { list-style: none; margin: 0 0 6px 12px; padding: 0 0 0 8px; border-left: 2px solid #3a2f52; }
.pyxlg-s > ol[hidden] { display: none; }
@media (max-width: 480px) { .pyxlg-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; } .pyxlg-all li:not(.pyxlg-s) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; } .pyxlg-w { grid-column: 2; padding: 0; font: var(--s)/var(--sl) 'Pyx Small', ui-monospace, monospace; text-transform: uppercase; } }

.pyxlg-go { flex: none; }
/* a drop's line under its meter: what's pulled and opened, then what's left, wrapping apart on a narrow phone (t25) */
.drop .meter-row { flex-wrap: wrap; gap: 2px 12px; }
.drop .meter-row > span:last-child { white-space: nowrap; }
.bio { color: var(--t2); }
.profside { align-self: center; }
.prof .follow.on { background: var(--k2); color: var(--t1); border-color: transparent; }
.badges span { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; }
.psets { margin-top: 12px; gap: 8px; }
.psum { gap: 4px 14px; font-size: 14px; color: var(--t2); }
.tierpill, .badges .tierpill, .psets .tierpill { height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 13.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--t); }
.tierpill.t-starter { --t: var(--t2); } .tierpill.t-core { --t: var(--r1); } .tierpill.t-chase { --t: var(--r3); } .tierpill.t-legend { --t: var(--r4); box-shadow: none; }
.tierpill .tink { opacity: .8; font: 400 12px var(--mono); }
/* a pulp or a sale that takes your only one of a collection, said on its second tap (app.js lostCols) */
.arm-o { font-weight: 700; }
/* a tier's name inside a line of words (a set finished, in the bell and the toasts): on the line's own baseline and in its
   size, not a box of its own a little above it (the founder's screenshot, 2026-10-26: "misaligned text") */
.note-row .nt .tierpill, .toast .tierpill { display: inline; vertical-align: baseline; font: inherit; font-weight: 600; }
.ptop { gap: 4px 14px; }
.pshort { height: auto; padding: 0; border: 0; border-radius: 0; color: var(--up); font: 500 13.5px var(--sans); letter-spacing: 0; text-transform: none; }
.pspecial { height: auto; display: inline-flex; gap: 6px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: var(--t1); font: 500 13.5px var(--sans); letter-spacing: 0; text-transform: none; }
.pspecial .i { color: var(--ink); }
.pall summary { color: var(--t3); }
.pgl { color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; }
.pgo { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--t2); font-size: 13.5px; }
.pgo.short { color: var(--up); }
.msmark { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--t2); font: 500 13px var(--sans); }
.msmark.short { color: var(--up); background: none; }
.pfp-rx .rx { height: 32px; border-radius: var(--rt); border: 0; background: var(--k2); }
.pfp-rx .rx.on { background: var(--k3); box-shadow: inset 0 0 0 1px var(--ink); }
.grid.wall { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; }
.follows { gap: 4px 20px; }
.fchip { padding: 6px 0; border: 0; border-radius: 0; background: none; gap: 10px; }
.fchip:hover { background: none; }
.fchip:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fchip small { color: var(--t3); }
/* offers: who gives what, on hairlines */
.offer { gap: 14px; padding: 18px 0; margin: 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.offer .olabel { color: var(--t3); font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; }
.offer .arrow { color: var(--t3); }
.offer .card { width: 120px; }
.offer .oink { color: var(--t2); }
.ctrbox { padding-top: 6px; }
/* sets */
.fam { margin-bottom: 36px; }
.fam.hit { border-radius: 0; }
.fam-head { gap: 10px 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.fam-head b { font-size: 17px; }
.fam-head .meter { width: 120px; }
.fam-head .done { display: inline-flex; align-items: center; gap: 4px; color: var(--up); font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; }
.series-grid { gap: 20px 14px; }
.slot { border-radius: var(--ra); border: 1px dashed var(--rule2); background: none; color: var(--t3); }
.slot b { color: var(--t2); font-weight: 500; }
a.slot.go:hover { transform: none; background: var(--k1); border-color: var(--rule2); }
.slot .slot-cta { padding: 0; border: 0; border-radius: 0; background: none; color: var(--t1); font-weight: 600; font-size: 13px; }
.slot.youhave { box-shadow: none; border-color: var(--up); border-style: solid; }
.slot.youhave .slot-buy { color: var(--up); }
.wantb { padding: 3px 0; border: 0; border-radius: 0; background: none; color: var(--t3); font: 500 12.5px var(--sans); }
.wantb.on { color: var(--r4); background: none; border: 0; }
.setline .demand, .crow .mine-n { color: var(--t1); }
.wantline { color: var(--t2); }
@media (max-width: 640px) {
  .prof { margin-top: 24px; gap: 14px; }
  .prof .orb { width: 80px; height: 80px; }
  .prof h1 { font-size: 30px; }
  .grid.wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .offer { padding: 14px 0; }
  .offer .card { width: 104px; }
}

/* =====================================================================
   Darkroom: Packs and the pack opening (phase 3). A drop is its art and a label; the daily auction and the free
   pack are rows. The pack is a paper stamp, perforated, with a window of the drop's art; you tear along the
   perforation at the top. The card back is dark paper with the stamp; a pulled print turns over onto paper with
   its printed label. The only coloured light is a rare print's, faintly, on the stage.
   ===================================================================== */
.drops { gap: 40px 24px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.drop, .drop:not(.soon) { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; overflow: visible; isolation: auto; }
.drop::before, .drop.launch::before { display: none; }
.drop .mosaic { position: static; inset: auto; z-index: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 2px; transform: none; }
.drop:hover .mosaic { transform: none; }
.drop .mosaic img { aspect-ratio: 1; height: auto; }
.drop .mosaic > :nth-child(n+7) { display: none; }
.drop .tag { position: static; display: flex; gap: 10px; margin: 16px 0 4px; }
.pilltag, .pilltag.new { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; }
.pilltag.new { color: var(--t1); }
.ccta .pilltag { padding: 0; min-height: 0; color: var(--t2); font: 400 13.5px var(--sans); text-transform: none; letter-spacing: 0; }
.drop h3 { margin: 2px 0 4px; font-size: 32px; }
.drop p { color: var(--t2); margin: 0 0 14px; }
.drop .meter-row { color: var(--t3); font: 400 12.5px var(--mono); }
.drop .dbtns { margin-top: 12px; }
.dbrowse { color: var(--t2); text-decoration-color: var(--rule2); font-size: 13.5px; }
.drop.soon .mosaic { grid-template-columns: repeat(3, 1fr); }
.drop.soon .mosaic img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; display: block; }
.drop.soon .fl { aspect-ratio: 1; font: 600 40px var(--display); color: var(--t1); background: var(--k2) !important; }
/* Packs (the UX pass, 2026-10-24): the coming-soon drop says it in a line, not a disabled button; the set picker has a
   visible label; on a phone a drop's label and name come before its art (the art read as the end of the drop above), and
   its two buttons share the row equally */
.drop.soon .soon-line { margin: 4px 0 0; color: var(--t3); font-size: 13.5px; }
.drop .dbtns .setlab { flex-basis: 100%; display: flex; align-items: center; gap: 12px; }
.drop .dbtns .setlab > span { color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.drop .dbtns .setlab .setpick { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .drop, .drop:not(.soon) { display: flex; flex-direction: column; }
  .drop > .tag { order: -2; margin-top: 0; }
  .drop > h3 { order: -1; margin-bottom: 12px; }
  .drop > .mosaic { margin-bottom: 12px; }
  /* (Open a pack and Buy sealed share the row out, each at least as wide as its words: a picked set's longer "Open a
     Set A pack" widens it, or wraps Buy sealed under it; a sold-out drop's buttons and a launch's Request keep their
     own widths; the reviews of the UX pass) */
  .drop .dbtns > .opn, .drop .dbtns > .sealb { flex: 1 1 auto; padding: 0 10px; }
}
.lx-form, .lx-mine, .lx-res { border-radius: var(--rc); background: var(--k1); border: 1px solid var(--rule); }
.lx-prem.on { color: var(--ink); }
/* the daily auction and the free pack: rows, not tinted cards */
.dailycard { grid-template-columns: 200px 1fr; gap: 24px; padding: 0; margin-bottom: 0; border: 0; border-radius: 0; background: none; }
.dailycard:hover { transform: none; box-shadow: none; }
.dc-art { border-radius: var(--ra); box-shadow: none; }
.dc-info .kicker .live-dot { margin-right: 2px; }
.dc-info h3 { font-size: 32px; }
.dc-info p { color: var(--t2); }
.dc-row { gap: 24px; }
.dc-row span { color: var(--t3); font: 400 13px var(--sans); text-transform: none; letter-spacing: 0; }
.dc-row b { font: 500 22px var(--mono); }
/* the daily auction card's Bid now is paper with ink-black words (a member's report, 2026-10-18: the row's "span" rule
   above made its label white on its white) */
.dc-row span.btn.glow, .dc-row span.btn.primary { color: var(--k0); }
.daily:not(.kpill) { gap: 16px; padding: 16px 0; margin: 0 0 28px; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.daily b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.daily .grow { color: var(--t2); }
.inftile { padding: 0; gap: 8px; border: 0; border-radius: 0; background: none; }
.inftile:hover { transform: none; border-color: transparent; }
.inftile .ia { border-radius: var(--ra); }
.inftile:hover .ia img { transform: none; }
.how > div { padding: 14px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; color: var(--t2); }
.how b { color: var(--t1); }

/* ---- the pack opening ---- */
.pk-stage { --amb: 243,241,236; background: radial-gradient(60% 50% at 50% 44%, rgba(var(--amb), .07) 0%, rgba(var(--amb), 0) 70%), var(--k0); }
.pk-stage.amb-h0 { --amb: 243,241,236; } .pk-stage.amb-h1 { --amb: 25,183,232; } .pk-stage.amb-h2 { --amb: 157,123,255; }
.pk-stage.amb-h3 { --amb: 255,214,10; } .pk-stage.amb-h4 { --amb: 255,61,154; }
.stage .title h2 { font-size: 30px; }
.stage .title .kicker { color: var(--t3); }
.pk-stage .hintline { font: 400 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--t3); }
.pk-stage .title .sub { color: var(--t2); }
.stage .grad-text { color: var(--t1); }
/* the pack: a paper stamp with a window of the drop's art */
.pk2 { animation: none; }
.pk2 .pk2-body, .pk2 .pk2-flap { background: #1c1b19; }
/* (dark paper, not white: a white pack and white cards on the black flash-banged people, the founder 2026-10-19) */
.pk2 .pk2-body { box-shadow: inset 0 0 0 1px var(--rule2), 0 40px 90px -30px rgba(0,0,0,.9); }
.pk2 .pk2-body { border-radius: 3px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) 0 0 / 51% 14px repeat-y, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) 100% 0 / 51% 14px repeat-y;
          mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) 0 0 / 51% 14px repeat-y, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) 100% 0 / 51% 14px repeat-y; }
.pk2 .pk2-flap { border-radius: 3px 3px 0 0; }
.pk2 .pk2-body .pk2-art { left: 11%; top: calc(var(--flap) + 6%); width: 78%; height: 46%; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; filter: none; background: #1c1b19; }
.pk2 .pk2-body .pk2-art > :nth-child(n+7) { display: none; }
.pk2 .pk2-flap .pk2-art, .pk2 .pk2-holo, .pk2 .pk2-shade, .pk2 .pk2-crimp { display: none; }
.pk2 .pk2-label { top: auto; bottom: 7%; transform: none; gap: 4px; color: var(--t1); text-shadow: none; }
.pk2 .pk2-label canvas.logo { width: 36px; height: 36px; box-shadow: none; border-radius: 0; margin-bottom: 2px; }
.pk2 .pk2-label b { font-family: var(--display); font-size: 38px; font-weight: var(--font-head-wt); letter-spacing: var(--font-head-ls); line-height: 1; }
.pk2 .pk2-label span { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--t2); }
.pk2 .pk2-label em { padding: 0; border: 0; border-radius: 0; background: none; color: var(--t3); font: 400 12px var(--mono); letter-spacing: 0; text-transform: none; opacity: 1; }
.pk2 .pk2-cut { left: 14px; right: 14px; border-top: 2px dashed rgba(243,241,236,.3); }
.pk2 .pk2-cut i { background: var(--t1); box-shadow: none; height: 3px; top: -2.5px; border-radius: 0; }
.pk2 .pk2-cut span { display: inline-flex; align-items: center; gap: 4px; color: var(--t2); text-shadow: none; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: none; opacity: 1; top: -22px; }
.pk2 .pk2-cut span .i { width: 13px; height: 13px; }
.pk2 .pk2-light { box-shadow: 0 0 40px 14px rgba(255,255,255,.22), 0 0 100px 30px rgba(var(--amb), .35); }
.pk2.torn .pk2-body { clip-path: inset(var(--flap) 0 0 0); }
/* the card back: dark paper with the stamp */
.dk .back { background: #1c1b19; border-radius: var(--rc); box-shadow: inset 0 0 0 1px var(--rule2), 0 30px 70px -24px #000; }
.dk .back .cb { inset: 12px; border-radius: 3px; border: 1px solid rgba(243,241,236,.14); }
.dk .back .cb b { font-family: var(--display); font-size: 30px; font-weight: var(--font-head-wt); letter-spacing: var(--font-head-ls); color: var(--t1); }
.dk .back .cb canvas.logo { border-radius: 0; }
/* every back hints at its rarity in its colour, faintly (the founder, 2026-10-19: "Hint on every card"); a rare one glows */
.dk .back { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 60%, transparent), 0 0 30px -8px var(--hg), 0 30px 70px -24px #000; }
.dk .back .cb { border-color: color-mix(in srgb, var(--hc) 45%, transparent); }
.dk.rare .back { box-shadow: inset 0 0 0 2px var(--hc), 0 0 40px -6px var(--hg), 0 30px 70px -24px #000; }
.dk.charge .back { box-shadow: inset 0 0 0 2px var(--hc), 0 0 70px 6px var(--hg), 0 30px 70px -24px #000; }
/* a pulled print, on paper, with its printed label */
.dk .front .card, .deal.summary .card { background: #1c1b19; padding: 12px 12px 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule2); }
.dk .front { border-radius: 3px; }
.dk.open .front { box-shadow: 0 30px 80px -30px #000, 0 0 60px -24px var(--hg); }
.dk .front .card-title, .deal.summary .card .card-title { color: var(--t1); font-weight: 600; }
.dk .front .card-sub, .dk .front .card-sub .ed, .deal.summary .card-sub, .deal.summary .card-sub .ed { color: var(--t3); }
.dk .front .odds, .deal.summary .card .odds { color: var(--t2); }
.dk .front .card-foot, .deal.summary .card-foot { border-top-color: var(--rule2); }
.dk .stamp { border-radius: 3px; background: #0b0b0c; border: 1px solid var(--hc); box-shadow: none; }
.dk .stamp b { font: 500 15px var(--mono); color: var(--t1); }
.dk .stamp span { font: 500 10.5px var(--mono); letter-spacing: .06em; color: var(--t2); }
.dk .newtag { border-radius: 2px; background: #0b0b0c; color: var(--t1); box-shadow: none; font: 500 11px var(--mono); letter-spacing: .06em; }
.tray .tr { border-radius: var(--ra); box-shadow: 0 0 0 1.5px var(--hc); }
.deal.summary .card.best { box-shadow: 0 0 0 2px var(--hc), 0 0 50px -16px var(--hg); }
.deal.summary .card.best::after { border-radius: 2px; font: 500 10.5px var(--mono); letter-spacing: .06em; }
/* (on the dark cards: Pulp an outline, Sell the light one when it beats the value) */
.deal.summary .pulpfoot .btn { background: transparent; color: var(--t1); border: 1px solid var(--rule2); }
.deal.summary .pulpfoot .btn.danger { color: var(--down); }
.deal.summary .pulpfoot .btn.sellb { background: var(--k3); color: var(--t1); border-color: var(--k3); }
.deal.summary .pulpfoot .btn.sellb.primary, .deal.summary .pulpfoot .btn.sellb.glow { background: var(--t1); color: var(--k0); border-color: var(--t1); }
.stage .after .taphint, .after .bidhint { color: var(--t3); }
/* the pack summary's exits (the UX pass, 2026-10-24): on a computer the bar is no box, its buttons in the row as before;
   an armed Pulp or Sell says it short on a phone (the long words overflowed a card's button) */
.pkbar { display: contents; }
.arm-s { display: none; }
@media (max-width: 640px) {
  .arm-l { display: none; }
  .arm-s { display: inline; }
  .deal.summary .pulpfoot .btn.danger, .deal.summary .pulpfoot .btn.sellb { padding: 0 6px; }
  /* the row's parts become the stage's own, so the bar can stay at the bottom of the screen; Pulp all after it, quieter */
  .stage .after.pkend { display: contents; }
  .stage .after.pkend > * { flex: none; }
  .stage .after.pkend > p { padding: 0 16px; }
  .stage .pkbar { order: 1; position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); z-index: 4; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-self: stretch; flex: none;
    margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(4,4,6,0), rgba(4,4,6,.94) 14px); }
  .stage .pkbar .btn { padding: 0 10px; min-width: 0; }
  .stage .pkbar .btn.glow { order: -1; }
  .stage .pkbar:has(.glow) { grid-template-columns: 1.45fr 1fr; grid-auto-columns: auto; }
  .stage .after.pkend > .pulpall { order: 2; background: transparent; border: 1px solid var(--rule2); color: var(--t2); height: 40px; font-size: 13.5px; }
  .stage .after.pkend > .pulpall.danger { color: var(--down); }
}
@media (max-width: 640px) {
  .drops { grid-template-columns: 1fr; gap: 36px; }
  .dailycard { grid-template-columns: 1fr; gap: 14px; }
  .dc-info { padding: 0; }
  .pk2 .pk2-label b { font-size: 32px; }
}

/* (phase 3 fixes after a look on a phone) */
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .page-head .seg { width: auto; }
  .page-head .seg button { flex: none; }
  .crow .num { font-size: 12.5px; }
}
.seg.mseg { flex-wrap: nowrap; }
.crow.head .num { font: 400 12.5px var(--sans); color: var(--t3); }
.field[type=search], input[type=search].field { -webkit-appearance: none; appearance: none; }
.pk2 .pk2-body .pk2-art { height: 38%; }
.pk2 .pk2-label canvas.logo { width: 30px; height: 30px; }
.pk-stage .deal.summary { margin-top: 12px; }

/* opening a pack, the pack UX pass (the founder, 2026-10-26: "greatly improve the UI/UX of opening packs") */
/* sealing: tearable from the first moment, so not greyed out or "busy"; a slow shimmer says it's still being sealed */
.pk2.sealing { cursor: grab; filter: none; }
.pk2.sealing .pk2-cut { display: block; }
.pk2.sealing .pk2-body::after { opacity: .55; animation-duration: 2.2s; }
.pk2:is(.sealing, .drawing) .pk2-label em::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: pkdot 1s ease-in-out infinite alternate; }
@keyframes pkdot { from { opacity: .2; } }
/* torn before the draw is in: the light from the opening breathes until the prints land */
.pk2.drawing .pk2-light { box-shadow: 0 0 46px 16px rgba(255,255,255,.42), 0 0 130px 44px rgba(var(--amb), .55); animation: pour .9s ease-out .15s forwards, pkbreathe 1.1s ease-in-out 1s infinite alternate; }
@keyframes pkbreathe { from { opacity: .9; transform: scaleY(1.4); } to { opacity: .45; transform: scaleY(1.1); } }
/* ...and the tops of the prints wait in the opening, nudging up, behind the pack's front */
.pk2 .pk2-peek { position: absolute; left: 14%; right: 14%; top: calc(var(--flap) - 22px); height: 70px; pointer-events: none; }
.pk2 .pk2-peek i { position: absolute; inset: 0; border-radius: 3px; background: #1c1b19; box-shadow: inset 0 0 0 1.5px rgba(243,241,236,.5), 0 -6px 18px -6px rgba(var(--amb), .5); transform: translateY(8px); animation: pkpeek 1.6s ease-in-out infinite alternate; }
.pk2 .pk2-peek i:nth-child(2) { left: 6%; right: -6%; animation-delay: .35s; transform: translateY(12px) rotate(2deg); }
.pk2 .pk2-peek i:nth-child(3) { left: -5%; right: 5%; animation-delay: .7s; transform: translateY(15px) rotate(-2deg); }
@keyframes pkpeek { from { translate: 0 0; } to { translate: 0 -12px; } }
/* the tear's light: a bloom where the pack was, not the whole screen going white (.55 opacity on a dark stage) */
.pk-stage > .flash.bloom { background: radial-gradient(42% 30% at 50% 38%, rgba(255,255,255,.5), rgba(var(--amb), .18) 55%, transparent 75%); }
/* one tap sends the print showing to the tray as the next turns: it drops behind the deck, not over the one turning */
.dk.away { z-index: 0; }
/* the tray: a place for each print from the start, so the count left is there at a glance */
.tray .tr.slot { box-shadow: inset 0 0 0 1.5px var(--rule2); background: rgba(255,255,255,.03); animation: none; }
/* the set a print moves, and the one it finishes */
.pk-stage .pset { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--t2); }
.pk-stage .pset b { font: 500 13px var(--mono); color: var(--t1); }
.pk-stage .pset.done { padding: 2px 9px 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--r3) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r3) 55%, transparent); color: var(--t1); animation: pkpop .45s cubic-bezier(.2,1.6,.4,1) .55s both; }
@keyframes pkpop { from { transform: scale(.4); opacity: 0; } }
.pk-stage .pset.done .i { color: var(--r3); }
.pk-stage .pset.done b { font: inherit; font-weight: 600; color: var(--t1); }
/* short screens (an iPhone SE, 375 x 667): the heading kept its full height (as a flex item it was squeezed to its
   min-height, and the deck covered the line under the print's name), and the deck sized to what's left, so the tray and
   Show all stay on screen (they were below the fold) */
.pk-stage > .title { flex: none; }
/* (only where svh is known: in a custom property an unknown unit would leave the deck with no size at all, not the old one) */
@supports (height: 100svh) {
  .deck { --cw: min(300px, max(200px, calc((100svh - 350px) / 1.43))); }
  @media (max-width: 640px) { .deck { --cw: min(76vw, 300px, max(200px, calc((100svh - 350px) / 1.43))); } }
  /* (the shortest phones, 320 x 568: a tighter stage and a smaller floor, so Show all is on screen too) */
  @media (max-width: 640px) and (max-height: 600px) { .pk-stage:has(> .deck) { gap: 10px; padding-top: calc(52px + env(safe-area-inset-top)); } .deck { --cw: max(164px, calc((100svh - 330px) / 1.43)); } }
}
/* a legendary's light in its own gold (it was the pink of the rarest "1 in N") */
.flash.tint.lgf { background: radial-gradient(circle, var(--lg) 0%, rgba(229,185,78,.25) 40%, transparent 70%); }
/* the deck rises as solid cards: they faded in through each other, a stack of see-through backs and logos */
@keyframes rise2 { 0% { transform: translateY(220px) scale(.7) rotate(calc(var(--r) * 3deg)); opacity: 0; } 22% { opacity: 1; } }
/* short screens: the stamp a size smaller, so it covers less of the print's own lines on a smaller deck */
@media (max-height: 720px) { .dk .stamp { padding: 5px 11px; bottom: -14px; } .dk .stamp b { font-size: 13px; } .dk .stamp span, .dk .stamp em { font-size: 9.5px; } }
/* room for the line under a print's name to run to two (a set it finishes), so the deck below never jumps */
.pk-stage:has(> .deck) .title .sub { min-height: 40px; }
.pk-stage .newn { color: var(--up); }
.finline.setdone { text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r3) 45%, transparent); }
.finline.setdone .i { color: var(--r3); }
.finline.setdone .sgo { display: grid; color: var(--t3); }
@media (prefers-reduced-motion: reduce) { .pk-stage .pset.done, .pk2:is(.sealing, .drawing) .pk2-label em::after, .pk2 .pk2-peek i, .pk2.drawing .pk2-light { animation: none; } .pk2.drawing .pk2-light { opacity: .7; } }
html.reduce .pk-stage .pset.done, html.reduce .pk2:is(.sealing, .drawing) .pk2-label em::after, html.reduce .pk2 .pk2-peek i { animation: none; }


/* =====================================================================
   Darkroom: the long tail (phase 4). Collection pages, the daily auction, Earn, settings, help, the house rules,
   sign-in, the public record and the founder's pages: the same hairlines in place of boxes, the same buttons, tags
   and type.
   ===================================================================== */
/* a collection: no blurred banner; its art, its name, one row of numbers on hairlines */
.chead { margin: 32px 0 0; padding: 0; align-items: flex-end; gap: 18px 22px; }
.cthumb.big { width: 112px; height: 112px; border-radius: var(--ra); box-shadow: none; }
.chead h1 { font-size: clamp(32px, 4vw, 48px); }
.cdesc { color: var(--t2); }
.cown { padding: 0; border: 0; border-radius: 0; background: none; color: var(--t3); font-size: 13.5px; }
.cown.has { color: var(--up); background: none; border: 0; }
.cown.has:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.cstats { gap: 10px 36px; margin: 28px 0 24px; padding: 16px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.cstats span { color: var(--t3); font: 400 13px var(--sans); text-transform: none; letter-spacing: 0; }
.cstats b { font: 500 18px var(--mono); }
.cstats b .ink { font: inherit; }
.ctabs { margin-bottom: 22px; }
.fgroup h4 { color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; }
.fopt { border-radius: var(--rc); color: var(--t2); }
.fopt:hover { background: var(--k1); }
.fopt.on { background: var(--k2); border-color: transparent; color: var(--t1); }
.fopt i { color: var(--t3); }
/* a trait row's box, checked when it's on (the UX pass, 2026-10-24) */
.fopt { grid-template-columns: 18px minmax(0, 1fr) auto 46px; }
.fopt .fck { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--rule2); color: var(--k0); }
.fopt.on .fck { background: var(--t1); box-shadow: none; }
.fopt .fck .i { width: 12px; height: 12px; }
.lcol { padding: 0; border: 0; background: none; }
.lbar { border-radius: 0; background: var(--k2); height: 8px; }
.lbar i { border-radius: 0; }
.lrow.bid .lbar i { background: var(--up); }
.lrow.ask .lbar i { background: var(--down); }
.chartbox { padding: 14px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.youroffs { padding: 0; border: 0; background: none; }
.bundle { padding: 14px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.bthumbs .thumb { border-radius: var(--ra); box-shadow: none; }
.srow .field.sm { height: 34px; }
.sweep { padding: 14px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.sweep input[type=range] { accent-color: var(--t1); }
.sw-thumbs .thumb { border-radius: var(--ra); }
.check input { accent-color: var(--t1); }
/* the daily auction */
.dayrow .btn.arrow { width: 40px; display: grid; place-items: center; }
.auc { padding: 18px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.auc .aa { border-radius: var(--ra); }
.quick .chip { justify-content: center; }
.bidbar { border-radius: var(--rs); background: var(--k1) !important; border: 1px solid var(--rule2); box-shadow: var(--shadow); }
.bidbar small { color: var(--t3); font: 400 12px var(--sans); text-transform: none; letter-spacing: 0; }
.bidbar em { color: var(--up); }
.bids li { color: var(--t2); }
/* Earn: already one spacing scale; its cards become hairline sections */
.e3-card, .e3-tile { border-radius: var(--rc); background: var(--k1); border: 1px solid var(--rule); }
.e3-up { background: var(--k1); border-color: var(--rule2); }
.e3-ic { border-radius: var(--rc); background: var(--k2); }
.e3-ic svg { stroke: var(--t2); }
.e3-track { background: var(--k3); height: 4px; }
.e3-fill { background: var(--t1); }
.e3-cp { background: var(--k1); border-color: var(--rule2); }
.e3-cp.on { background: var(--t1); border-color: var(--t1); }
.e3-chk { background: var(--k2); }
.e3-dots i { background: var(--k3); border-radius: 0; }
.e3-dots i.on { background: var(--t1); }
.e3-bar { background: var(--k3); border-radius: 0; }
.e3-k, .e3-wd, .ihday { color: var(--t3); }
.e3-soon { border-radius: var(--rt); }
.e3-boss li { border-radius: var(--rt); background: var(--k2); }
.e3-head h1 { font-family: var(--display); }
/* settings, create, passkeys */
.step { padding: 22px 0; gap: 18px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.sn { background: var(--k2); border: 0; font: 500 13px var(--mono); }
.sb label { color: var(--t3); font-weight: 500; }
.pkstate { padding: 14px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.pkstate.on { background: none; border-color: var(--rule); }
.pkstate.on svg { stroke: var(--up); }
.pkrow { padding: 8px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.rcwarn { padding: 2px 0 2px 12px; border: 0; border-left: 2px solid var(--ink); border-radius: 0; background: none; }
.code { border-radius: var(--rc); background: var(--k1); border-color: var(--rule2); color: var(--t1); }
.pv { border-radius: var(--ra); }
/* help, house rules, what's new, the public record, odds, invites */
.faq { gap: 0; }
.faq details { padding: 16px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.faq summary { font-size: 17px; }
.faq p, .rules-sec ul { color: var(--t2); }
.rules { gap: 0; }
.rules-sec { padding: 18px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.news-day { padding: 18px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.oddrow { padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.oddrow b { font: 500 17px var(--mono); }
.vbox { background: none; }
.vsteps .vs { background: var(--k2); }
.vsteps .vs .i { width: 13px; height: 13px; stroke-width: 2.5; }
.vsteps li.ok .vs { background: var(--up); color: var(--k0); }
.vsteps li.bad .vs { background: var(--down); color: var(--k0); }
.vsteps li.wait .vs { background: var(--ink); color: var(--k0); }
.ckpt { border-radius: var(--rc); background: var(--k1); }
.inv { padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
.installcard { padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.installcard img { border-radius: var(--rc); }
.dropbar, .verifybar { padding: 12px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.dropbar .cb-ic, .verifybar .cb-ic { display: grid; color: var(--t2); }
/* the name bar (app.js nameBar): the line, then the box and Save, x at the end; on a phone the box takes the next row */
.namebar { flex-wrap: wrap; position: relative; padding-right: 36px; }
.namebar .nb-t { flex: 1 1 260px; min-width: 0; }
.namebar .nb-f { display: flex; gap: 8px; flex: 0 1 300px; min-width: 0; }
.namebar .nb-f .field { flex: 1; min-width: 0; margin: 0; }
.namebar .nb-x { position: absolute; top: 8px; right: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; }
.namebar .nb-note { flex-basis: 100%; color: var(--dim); font-size: 13px; }
.namebar .nb-note:empty { display: none; }
@media (max-width: 640px) { .namebar .nb-f { flex-basis: 100%; } }
.claimnote { padding: 2px 0 2px 12px; border: 0; border-left: 2px solid var(--r1); border-radius: 0; background: none; }
.heldback { padding: 10px 0; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; }
/* sign-in and joining */
.gate .join { padding: 22px 0; border: 0; background: none; }
.gate .join .check { border-radius: var(--rc); background: var(--k1); border-color: var(--rule); }
.gate .fan .fc { border-radius: var(--ra); box-shadow: 0 24px 50px -18px rgba(0,0,0,.9); }
.gate .getinv { border-top-color: var(--rule); }
.onb .orb { box-shadow: inset 0 0 0 1px var(--rule2); }
.offbar { border-radius: var(--rc); background: var(--k2); border-color: var(--rule2); color: var(--t1); box-shadow: var(--shadow); }
.loadpage span { background: var(--t3); border-radius: 0; }
/* the founder's pages: quieter, same tokens (their charts keep their colours) */
.ax-kpi, .ax-card { background: var(--k1); border-color: var(--rule); }
.ax-pill { border-radius: var(--rt); }
.adm-tabs a.on { background: var(--k2); }
.an-chart { background: var(--k1); }
/* a collection's head on a phone (the UX pass, 2026-10-24): Watch, Offer and Alert on one row under the main button
   (Alert sat alone on a second one), the description two lines with a "more", and under 400 px the sort on a row of
   its own (it read "Price: low to hig") */
.ccta .os, .cdmore { display: none; }
@media (max-width: 640px) {
  .ccta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ccta > :first-child { grid-column: 1 / -1; }
  .ccta .ol { display: none; }
  .ccta .os { display: inline; }
  .ccta .btn { padding: 0 6px; gap: 6px; }
  /* (with Share: four in the row under the first, not one left alone on a fourth row; the reviews of grow-24) */
  .ccta:has(> .csh) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ccta:has(> .csh) .btn { gap: 4px; }
  .chead .cdesc:not(.open) { -webkit-line-clamp: 2; }
  .chead .cdesc.open { display: block; overflow: visible; }
  .cdmore:not([hidden]) { display: inline-flex; align-items: center; min-height: 32px; margin: -2px 0 -6px; padding: 0; background: none; border: 0; color: var(--t2); font: 500 13px var(--sans); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
}
@media (max-width: 400px) { .cbody .toolbar .sort { flex: 1 1 100% !important; } }
@media (max-width: 640px) {
  .chead { margin-top: 24px; gap: 14px; }
  .cthumb.big { width: 80px; height: 80px; }
  .cstats { margin: 20px -16px 16px; padding: 14px 16px; border-left: 0; border-right: 0; }
  .filters { background: var(--k1); border-radius: var(--rs) var(--rs) 0 0; border-top-color: var(--rule2); }
  .fs-head { background: var(--k1); }
  .fs-head::before { background: var(--k3); }
  .step { padding: 18px 0; }
}
/* the font picker (?fonts): the heading face's two candidates side by side */
.fontbtn { border-radius: 50%; background: var(--k2); border: 1px solid var(--rule2); color: var(--t1); box-shadow: var(--shadow); backdrop-filter: none; }
.fontpanel { border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); backdrop-filter: none; }
.fontpanel h4 { color: var(--t3); font: 500 11px var(--mono); letter-spacing: .06em; }
.fopt2 { border-radius: var(--rc); color: var(--t1); }
.fopt2:hover { background: var(--k2); }
.fopt2.on { background: var(--k2); border-color: var(--rule2); }
.fopt2 .n { color: var(--t3); }
/* (phase 4 fixes after a look) */
.tradebar { background: var(--k1); border: 1px solid var(--rule2); border-radius: var(--rc); box-shadow: var(--shadow); }
.tradebar .tp { border-radius: var(--ra); }
/* the Make offer sheet (the UX pass, 2026-10-24): the ink to add is a labelled field with its gem, like a print's price
   field (it was a bare 0); Send waits for something to send; your prints have a heading, so they don't read as theirs
   under "Ask for more of their prints". On a phone the pinned bar is one line of summary over the field and Send on
   one row (it was 243 px tall at 360x740), and it pins below the close button instead of under it */
.tradebar .tink { display: flex; align-items: center; gap: 4px; flex: 0 1 190px; min-width: 0; height: 44px; padding: 0 0 0 12px; background: var(--k2); border-radius: var(--rc); cursor: text; }
.tradebar .tink .small { white-space: nowrap; }
.tradebar .tink .field { flex: 1; min-width: 0; width: 100%; height: 44px; padding: 0 6px 0 4px; background: none; font-family: var(--mono); text-align: right; }
.tradebar .tink .ink { order: 2; padding-right: 12px; font-size: 0; }
.tradebar .tink .ink::before { width: 9px; height: 13px; }
.tradebar .send:disabled { opacity: .45; cursor: default; }
.tradebar .wfor .ws { display: none; }
.tsheet .sec-head.tyours { margin: 22px 0 12px; }
@media (max-width: 640px) {
  .tsheet .tradebar { top: calc(56px + env(safe-area-inset-top)); gap: 10px; padding: 10px 12px; }
  /* (two lines, not one: with their prints asked for too, one line cut off what theirs are worth; the review of the UX pass) */
  .tsheet .tradebar .grow { flex: 1 1 100%; min-width: 0; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .tradebar .wfor .wl { display: none; }
  .tradebar .wfor .ws { display: inline; }
  .tsheet .tradebar .tink { flex: 1 1 0; }
  .tsheet .tradebar .send { flex: none; height: 44px; }
  .tsheet .tradebar .tp { width: 36px; height: 36px; }
  .tsheet .sec-head.tyours { margin: 18px 0 10px; }
  .tsheet .sec-head.tyours h2 { font-size: 17px; }
}
.card.newto .newtag { top: auto; right: auto; bottom: 8px; left: 8px; padding: 2px 6px; border-radius: 2px; background: rgba(11,11,12,.85); color: var(--up); box-shadow: none; font: 500 10.5px/1.3 var(--mono); letter-spacing: .04em; }
.chead .kicker { font: 400 13.5px var(--sans); text-transform: none; letter-spacing: 0; color: var(--t3); }
.note-row { border-radius: 0; }
.orb { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.onb .orb, .prof .orb { box-shadow: inset 0 0 0 1px var(--rule2); }

/* Column headers that sort (members' reports, 2026-10-18: Market's collections, the portfolio's prints): the label and
   a pair of small arrows, the way it's sorted lit; numbers stay right-aligned */
.crow.head.sortable > span { min-width: 0; }
.sorth { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 0; margin: -4px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.crow.head .num .sorth { flex-direction: row; justify-content: flex-end; }
.crow.head .num { display: flex; justify-content: flex-end; }
.sorth:hover, .sorth.on { color: var(--t1); }
.sorth:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 2px; }
.sorth .sarr { width: 7px; height: 12px; flex: none; fill: currentColor; }
.sorth .sarr path { opacity: .3; }
.sorth:hover .sarr path { opacity: .5; }
.sorth.on.desc .sarr .d, .sorth.on.asc .sarr .u { opacity: 1; }
.sorth.on.desc .sarr .u, .sorth.on.asc .sarr .d { opacity: .15; }
@media (max-width: 760px) { .crow.head.sortable .sorth { white-space: normal; gap: 3px; line-height: 1.2; text-align: right; } .crow.head.sortable > span:not(.num) .sorth { text-align: left; } }

/* Home: the pack is the call to action (a member's report, 2026-10-18: "Open a pack" looked no different from the
   free pack's row). Paper, wider, with a small perforated stamp of the drop's art (the stamp the pack opens as) and
   an arrow; the free pack beside it is a quiet row, its paper rule saying when one is ready. Nothing loops. */
.hf .collect { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.hf .collect .cb-pack:not(:disabled) { background: var(--t1); color: var(--k0); }
.hf .collect .cb-pack:not(:disabled):hover { background: #fff; }
.hf .collect .cb-pack { justify-content: flex-start; gap: 14px; min-height: 64px; padding: 10px 16px 10px 12px; }
.hf .collect .cb-pack .cb-t { flex: 1; }
.hf .collect .cb-pack .cb-t b { font-family: var(--font-head); font-weight: var(--font-head-wt); letter-spacing: -.02em; font-size: 18px; }
.hf .collect .cb-pack:not(:disabled) .cb-t small .ink::before { filter: brightness(.5); }
.cb-stamp { position: relative; flex: none; width: 40px; height: 46px; padding: 5px; background: #f3f1ec; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11,11,12,.14);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2px, #000 2.5px) 0 0 / 51% 6px repeat-y, radial-gradient(circle at 100% 50%, transparent 2px, #000 2.5px) 100% 0 / 51% 6px repeat-y;
          mask: radial-gradient(circle at 0 50%, transparent 2px, #000 2.5px) 0 0 / 51% 6px repeat-y, radial-gradient(circle at 100% 50%, transparent 2px, #000 2.5px) 100% 0 / 51% 6px repeat-y; }
.cb-win { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; width: 100%; height: 100%; overflow: hidden; background: #f3f1ec; }
.cb-win img, .cb-win canvas { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.cb-go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--k0); color: var(--t1); transition: transform .15s; }
.cb-go .i { width: 16px; height: 16px; }
.hf .collect .cb-pack:not(:disabled):hover .cb-go { transform: translateX(2px); }
.hf .collect .cb-pack:disabled .cb-go { background: var(--k3); color: var(--t3); }
.hf .collect .cb-pack:disabled .cb-stamp { opacity: .55; }
.hf .collect .cb-free.ready { background: var(--k2); color: var(--t1); box-shadow: inset 0 0 0 1px var(--t2); }
.hf .collect .cb-free.ready:hover:not(:disabled) { background: var(--k3); }
.hf .collect .cb-free.ready .cb-t small .ink::before { filter: none; }
@media (max-width: 640px) {
  .hf .collect { grid-template-columns: 1fr; gap: 8px; }
  .hf .collect .cb-pack { order: -1; min-height: 68px; }
  .hf .collect .cb-free, .hf .collect .cb-free.so { min-height: 48px; justify-content: flex-start; }
  .hf .collect .cb-t b { white-space: nowrap; }
}
/* =====================================================================
   The stamp album on Darkroom (2026-10-18). The chrome is Darkroom's: its blacks, hairlines and paper, the heading face
   for titles, Instrument Sans for words, Geist Mono for numbers, Lucide icons, its buttons, text tabs, rows and sheets,
   the pack stage's faint light. Inside the page and on the stages the album stays a physical thing: perforated pixel
   stamps on their own paper, glassine strips, the index tabs in each page's colour, envelopes, cancels, gold foil. Only
   the stamps' art colours (--st-*, the same as app.js STP) and each page's own colours (--c1/--c2, from the season)
   are the album's; everything else is a Darkroom token. Pixel numbers stay only on stamps and paper (a spare's x2, the
   index tabs, the envelope tags).
   ===================================================================== */
@property --lampa { syntax: '<number>'; inherits: true; initial-value: .07; }
:root {
  /* the stamps' own art: paper, its pressed edge, ink, the gum side, gold and its highlight, the misprint mint */
  --st-paper: #f3e9d2; --st-paper-edge: #c9b994; --st-ink: #2a1f26; --st-gum: #e9dcc0;
  --st-gold: #e5b94e; --st-gold-hi: #fff2c2; --st-mint: #3fe0a0;
  /* a stamp's hard shadow from above: on the page, lifted, in hand (filters, so they follow the perforations) */
  --st-e1: drop-shadow(0 2px 0 rgba(0,0,0,.35)); --st-e2: drop-shadow(0 6px 0 rgba(0,0,0,.22)) drop-shadow(0 14px 22px rgba(0,0,0,.35));
  --st-e3: drop-shadow(0 12px 0 rgba(0,0,0,.2)) drop-shadow(0 26px 40px rgba(0,0,0,.5));
  --hh: 64px;
}
@media (max-width: 640px) { :root { --hh: 56px; } }

/* ---- words and numbers ---- */
.albumpg, .stage > .scene, .albsheet, .stsheet { font-family: var(--sans); color: var(--t1); }
.t5 { font: 400 13px/18px var(--sans); color: var(--t3); }
.t3 { color: var(--t3); }
.tw.gold, .kicker.gold, .albrow .gold { color: var(--st-gold); }
.tw.rare { color: var(--r2); }
.tw.sec, .kicker.mis { color: var(--st-mint); }
.pfill { color: color-mix(in srgb, var(--c1) 62%, var(--t1)); }
img.px.pxt, img.px.sym { display: inline-block; vertical-align: -1px; }
.pxroll { display: inline-block; overflow: hidden; vertical-align: -1px; line-height: 0; }
.pxroll > span { display: flex; flex-direction: column; }
.nroll { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.nroll > span { display: flex; flex-direction: column; }
.nroll > span > span { height: 1.25em; line-height: 1.25em; }
.btn .bn { margin-left: 2px; font-weight: 500; opacity: .7; }

/* ---- the header's Album button: a Lucide album, Darkroom's red dot while envelopes wait ---- */
.albbtn { text-decoration: none; }
.albbtn.on { color: var(--t1); }
.top.tight .brand { font-size: 0; gap: 0; }
#flylayer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#flylayer .flying { z-index: 2; image-rendering: pixelated; }
#flylayer .dust { position: absolute; width: 3px; height: 3px; }
#flylayer .albproxy { z-index: 3; display: grid; place-items: center; border-radius: var(--rc); background: var(--k2); color: var(--t1); }
.toast.out.fast { animation-duration: .15s; }

/* ---- the arrival chip: a Darkroom toast that holds the stamp (or the envelope) where its icon goes ---- */
.toast.arrchip .ti { width: auto; min-width: 36px; height: 40px; padding: 0 2px; gap: 4px; display: flex; align-items: center; justify-content: center; background: none; overflow: visible; }
.toast.arrchip .ti img.stp { filter: var(--st-e1); }
.toast.arrchip .atx { min-width: 0; line-height: 1.4; }
.toast.arrchip .atx small { color: var(--t3); font-size: 13px; }
.toast.arrchip { cursor: pointer; }

/* ---- the Album: Darkroom's page head (kicker, the season's name, how many are in, the ⋯), its text tabs ---- */
.albumpg { overflow-x: clip; }
.albhead { padding-bottom: 0; }
.albhead .ph-t { align-items: flex-end; }
.albhead .ah-t { min-width: 0; }
.albhead .ah-t .kicker { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.albhead .ph-act { align-items: center; gap: 6px; padding-bottom: 2px; }
.albhead .acnt { font: 500 20px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--t1); white-space: nowrap; }
.albhead .acnt span { color: var(--t3); }
.albseg { flex: 1 1 100%; }
/* today's stamps: a quiet chip at the end of the tabs' row (the row keeps the tabs' rule), its sheet a tap away */
.albsegw { flex: 1 1 100%; display: flex; align-items: stretch; gap: 12px; min-width: 0; border-bottom: 1px solid var(--rule); }
.albsegw .albseg { flex: 1 1 auto; width: auto; min-width: 0; border-bottom: 0; }
.albsegw .albseg button { flex: none; }
.atoday { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--rule2); border-radius: var(--rc); background: none; color: var(--t2); font: 400 13px var(--sans); white-space: nowrap; cursor: pointer; }
.atoday b { font-weight: 500; color: var(--t1); }
.atoday .mono { font-variant-numeric: tabular-nums; }
.atoday.none { color: var(--t3); border-color: var(--rule); }
.atoday:hover { color: var(--t1); border-color: var(--t3); }
.atoday .live-dot { margin: 0; background: var(--t3); animation: none; }   /* (grey: information, not an alert; the founder, 2026-10-19) */
/* (under 390 px, not 359: at 360 and 375 the chip covered Ranks, down to its "R" at 360: the UX pass, 2026-10-24) */
@media (max-width: 389px) { .albsegw { gap: 8px; } .albsegw .albseg { gap: 16px; } .atoday { padding: 0 8px; } .atoday .live-dot { display: none; } }
.invseg .tcnt { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 4px; border-radius: 9px; background: var(--k3); color: var(--t1); font: 500 11px/1 var(--mono); vertical-align: 2px; }
.tdl { display: grid; margin: 18px -12px 0; }
.tdr { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border: 0; border-radius: var(--rc); background: none; color: var(--t1); text-align: left; cursor: pointer; position: relative; }
.tdr + .tdr::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--rule); }
.tdr:hover { background: var(--k2); }
.tdr .tdt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tdr .tdt b { font: 600 15px var(--sans); }
.tdr .tdt small { font-size: 13px; line-height: 1.4; color: var(--t3); }
.tdr .tds { flex: none; font-size: 13px; color: var(--t1); font-variant-numeric: tabular-nums; }
.tdr.done .tds, .tdr.done .tdt b { color: var(--t3); }
.tdr .tdg { flex: none; display: grid; color: var(--t3); }
.tdsheet > p.t5 { margin-top: 14px; font-size: 13px; }
.albseg .sdot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--live); vertical-align: 3px; }
/* (swaps ready: a count on the Trade tab and one line over the pages, with the finder's how-to under its heading; #105) */
.albseg .tcnt { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 4px; border-radius: 9px; background: var(--k3); color: var(--t1); font: 500 11px/1 var(--mono); vertical-align: 2px; }
.swhint { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--rs); background: var(--k1); font-size: 14px; color: var(--t2); }
.swhint span { flex: 1; min-width: 0; } .swhint b { color: var(--t1); margin-right: 4px; } .swhint .btn { flex: none; }
.swhow { margin: -4px 0 12px; }
.alnote { padding: 24px 0 8px; }
.alnote h2, .alnote h3 { margin: 0 0 6px; font-family: var(--display); font-weight: var(--font-head-wt); letter-spacing: -.015em; font-size: 22px; }
.alnote h3 { font-size: 17px; }
.alnote p { margin: 0 0 12px; font-size: 14px; color: var(--t2); }

/* the envelopes waiting: a row on hairlines, like Inventory's sealed packs (the pile, how many and why, one Open) */
.eline { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 0; margin: 0 0 18px; border-bottom: 1px solid var(--rule); color: var(--t1); text-decoration: none; }
.eline .estk { position: relative; flex: none; width: calc(80px + (var(--n) - 1) * 6px); height: calc(56px + (var(--n) - 1) * 4px); padding: 0; border: 0; background: none; cursor: pointer; }
.eline .estk span { position: absolute; left: calc(var(--k) * 6px); bottom: calc(var(--k) * 4px); filter: var(--st-e1); }
.eline .etx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eline .etx b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.eline .etx small { font-size: 13px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eline .e1 { flex: none; margin-left: auto; }
.eline.none { min-height: 52px; gap: 10px; }
.eline.none .etx { flex: 1 1 auto; font-size: 14px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.eline.none .mono { color: var(--t1); }
.eline .ego { flex: none; display: grid; color: var(--t3); }
.eline .ticks { display: inline-flex; gap: 4px; flex: none; }
.eline .ticks i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule2); }
.eline .ticks i.on { background: var(--t1); box-shadow: none; }
.eline .wk { flex: none; }
.eline:hover .etx b { text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 3px; }

/* the book: the index tabs on the page's top edge, the page (a Darkroom card: k1, a hairline, its corners), the edges
   of the pages under it on the right */
.book { position: relative; margin-top: 4px; }
.ptabs { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 4px; height: 28px; margin: 0 7px -1px 0; padding: 0 14px 0 17px; }
.ptab { position: relative; flex: 1 1 0; max-width: 40px; height: 23px; margin-bottom: 2px; padding: 0; border: 0; border-radius: var(--rt) var(--rt) 0 0; background: color-mix(in srgb, var(--c1) 42%, var(--k2)); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: height .12s var(--ease); }
.ptab:hover { background: color-mix(in srgb, var(--c1) 62%, var(--k2)); }
.ptab .pl { line-height: 0; } .ptab .pl.on, .ptab.on .pl.off { display: none; } .ptab.on .pl.on { display: block; }
.ptab.on { height: 28px; margin-bottom: 0; background: var(--c1); }
/* a page tab's tap area 36 px tall and its gap wide, above the tab where it's drawn 23 px (the UX pass, 2026-10-24) */
.ptab::before { content: ''; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 36px; }
.ptab.on::before { bottom: 0; }
.ptab .pring { position: absolute; top: 2px; right: 2px; }
.ptab.one::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 1.5px var(--k1); }
.spgwrap { position: relative; z-index: 1; overflow: hidden; padding-right: 7px; touch-action: pan-y; }
.spgwrap::before, .spgwrap::after { content: ''; position: absolute; top: 14px; bottom: 14px; width: 1px; background: var(--rule2); }
.spgwrap::before { right: 3px; } .spgwrap::after { right: 0; top: 18px; bottom: 18px; background: var(--rule); }
.spg { position: relative; z-index: 1; width: 100%; padding: 14px 12px 4px 15px; border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); }
.spg::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--c1); }
.spg.gilt { border-color: var(--st-gold); }
.spg.gilt::before { background: var(--st-gold); }
.spg.over { position: absolute; top: 0; left: 0; right: 7px; width: auto; z-index: 2; }
.spg .pshade { position: absolute; top: 0; bottom: 0; width: 24px; z-index: 7; pointer-events: none; }
.spg .pshade.r { right: -1px; border-radius: 0 var(--rs) var(--rs) 0; background: linear-gradient(to left, rgba(0,0,0,.45), transparent); }
.spg .pshade.l { left: -1px; border-radius: var(--rs) 0 0 var(--rs); background: linear-gradient(to right, rgba(0,0,0,.45), transparent); }
.spg-hd { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 48px; margin-bottom: 12px; }
.spg-ban { flex: none; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.spg-ban .pghead { width: 192px; height: 48px; }
.spg-cnt { flex: none; margin-top: 2px; font: 500 17px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--t1); }
.spg-cnt span { color: var(--t3); }
.spg-cnt b { font-weight: inherit; }
.spg-cnt b span { color: inherit; }
.spg-pm { flex: none; margin-left: auto; line-height: 0; }
.spg.done .spg-cnt { display: none; }
.spg-one { margin: -4px 0 12px; font-size: 14px; color: color-mix(in srgb, var(--c1) 62%, var(--t1)); }
.spg-rows { display: grid; gap: 4px; }
.spg-row { position: relative; padding-bottom: 20px; }
.spg-sl { display: flex; justify-content: space-between; }
.spg-row .glass { position: absolute; left: -15px; right: -12px; top: 84px; bottom: 0; z-index: 2; pointer-events: none; background: color-mix(in srgb, var(--t1) 4%, transparent); border-top: 1px solid color-mix(in srgb, var(--t1) 10%, transparent); }
.spg .sl { position: relative; width: 96px; height: 120px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms cubic-bezier(.2,.9,.3,1); }
.spg .sl > canvas, .spg .sl > img { display: block; }
.spg .sl.has > canvas { filter: var(--st-e1); transition: filter 120ms cubic-bezier(.2,.9,.3,1); }
.spg .sl.lift { transform: translateY(-4px); z-index: 4; }
.spg .sl.lift > canvas { filter: var(--st-e2); }
.spg .sl .snm { position: absolute; left: -8px; right: -8px; top: 124px; z-index: 3; text-align: center; font-size: 12px; line-height: 16px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a spare's count: a paper tag on the stamp, in the stamps' own type */
.xtag { position: absolute; right: -10px; bottom: -6px; z-index: 3; padding: 3px 4px; border-radius: var(--ra); background: var(--st-paper); line-height: 0; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
/* a stamp's name as it's handled: Darkroom's paper label */
.ntag { position: absolute; left: 50%; top: calc(100% + 6px); z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--rt); background: var(--t1); color: var(--k0); font: 500 12.5px/16px var(--sans); white-space: nowrap; box-shadow: var(--shadow); cursor: pointer; }
.ntag .mono { font-size: 12px; color: color-mix(in srgb, var(--k0) 60%, var(--t1)); }
/* a small page (2x: rising from its tab, the end of an envelope, a ceremony on a short screen) */
.spg.k2 { width: fit-content; padding: 10px 8px 0 11px; border-radius: var(--rc); }
.spg.k2::before { top: 10px; bottom: 10px; }
.spg.k2 .spg-hd { min-height: 48px; margin-bottom: 8px; }
.spg.k2 .spg-cnt { font-size: 14px; }
.spg.k2 .spg-sl { gap: 16px; }
.spg.k2 .sl { width: 64px; height: 80px; }
.spg.k2 .spg-row { padding-bottom: 12px; }
.spg.k2 .spg-row .glass { left: -11px; right: -8px; top: 56px; }
.spg.k2 .spg-one { margin: -4px 0 8px; font-size: 13px; }
.spg-wrap-k2 { display: inline-block; }
/* under the page: the spares on it and two ways to use them; then the back pocket, folded */
.pgfoot { display: flex; align-items: center; gap: 4px; margin: 8px 7px 0 0; }
.pgfoot .pgsp { margin-right: auto; font-size: 13px; color: var(--t3); }
.pocket { margin: 16px 7px 40px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pocket summary { display: flex; align-items: center; gap: 8px; min-height: 52px; list-style: none; cursor: pointer; font-size: 15px; color: var(--t1); }
.pocket summary .mono { font-size: 13px; color: var(--t2); }
.pocket summary .t3 { font-size: 14px; }
.pocket summary::-webkit-details-marker { display: none; }
.pocket .go { display: grid; margin-left: auto; color: var(--t3); transition: transform .15s; }
.pocket[open] .go { transform: rotate(180deg); }
.pocket .pk { display: grid; grid-template-columns: repeat(4, 64px); justify-content: space-between; gap: 12px 0; padding: 4px 0 16px; }
.pks { position: relative; width: 64px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--t3); }
.pks.empty { border-radius: var(--ra); box-shadow: inset 0 0 0 1px var(--rule2); }
.pks .mono { font-size: 12px; }
.pks canvas { filter: var(--st-e1); }

/* ---- the ⋯ sheet, a page's sheet, a stamp's sheet: Darkroom's dialog (a sheet from the bottom on a phone) ---- */
.ov:has(.albsheet), .ov:has(.stsheet) { background: rgba(0,0,0,.62); }
.ov:has(.albsheet) .ov-box, .ov:has(.stsheet) .ov-box { max-width: 560px; margin: 8vh auto; padding: 28px 24px 24px; background: var(--k1); border: 1px solid var(--rule2); border-radius: var(--rs); box-shadow: var(--shadow); }
.ov:has(.albsheet) .ov-box > .x, .ov:has(.stsheet) .ov-box > .x { position: absolute; top: 14px; right: 14px; }
@media (max-width: 640px) {
  .ov:has(.albsheet) .ov-box, .ov:has(.stsheet) .ov-box { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; max-height: 90dvh; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 22px 16px calc(24px + env(safe-area-inset-bottom)); border-bottom: 0; border-radius: var(--rs) var(--rs) 0 0; }
  .ov:has(.albsheet) .ov-box::before, .ov:has(.stsheet) .ov-box::before { content: ''; display: block; width: 36px; height: 4px; margin: -10px auto 14px; border-radius: 4px; background: var(--k3); }
  .ov:has(.albsheet) .ov-box > .x, .ov:has(.stsheet) .ov-box > .x { top: 12px; right: 12px; width: 36px; height: 36px; }
}
.albsheet h2, .stsheet h2 { margin: 0; padding-right: 44px; font-family: var(--display); font-weight: var(--font-head-wt); letter-spacing: var(--font-head-ls); font-size: 26px; line-height: 1.1; }
.albsheet > p { margin: 8px 0 0; font-size: 14px; color: var(--t2); }
.albsheet > p.t5 { color: var(--t3); }
.albsheet h3 { margin: 28px 0 8px; font-family: var(--display); font-weight: var(--font-head-wt); letter-spacing: -.015em; font-size: 18px; }
.amenu { display: grid; margin: 16px -12px 0; }
.amenu .mi { text-decoration: none; }
.amenu .mi .mr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otab { width: 100%; border-collapse: collapse; margin: 4px 0 16px; table-layout: fixed; }
.otab th:first-child { width: 31%; }
.otab th, .otab td { padding: 10px 2px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.otab td { font: 400 12.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--t1); }
.otab td .t5 { color: var(--t3); }
.otab thead th { font: 400 12px/16px var(--sans); color: var(--t3); vertical-align: bottom; }
.otab thead th img.sym { display: block; margin: 0 auto 6px; }
.otab thead th small { display: block; font-size: 11px; line-height: 14px; letter-spacing: -.01em; }
.otab tbody th { text-align: left; font: 500 14px/18px var(--sans); color: var(--t1); }
.otab tbody th small { display: block; font-size: 12px; font-weight: 400; color: var(--t3); }
.ohow { border-bottom: 1px solid var(--rule); }
.ohow summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--t1); cursor: pointer; list-style: none; }
.ohow summary::-webkit-details-marker { display: none; }
.ohow summary .i { color: var(--t3); transition: transform .15s; }
.ohow[open] summary .i { transform: rotate(180deg); }
.ohow .ahow { margin-bottom: 12px; }
.ohow .ahow p { margin: 0 0 4px; font-size: 14px; color: var(--t2); }
.albodds .ohow > div { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--t2); }
.albodds .ohow > div b { display: block; font-weight: 600; color: var(--t1); }
.teasebig { display: flex; justify-content: center; align-items: center; gap: 28px; margin: 24px 0; padding: 28px 0; border-radius: var(--rc); background: var(--k0); }
.teasebig .orb { width: 64px; height: 64px; }
.albsheet .actions, .stsheet .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.albsheet > p + p { margin-top: 12px; }
.stsheet { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.stsheet .big { display: grid; place-items: center; padding: 36px 0; border-radius: var(--rc); --amb: 243,241,236; background: radial-gradient(60% 60% at 50% 46%, rgba(var(--amb), .07), rgba(var(--amb), 0) 70%), var(--k0); }
.stsheet .big canvas, .stsheet .big img { filter: var(--st-e2); }
.stsheet .info > p { margin: 8px 0 0; font-size: 14px; color: var(--t2); }
.stsheet .info > p.t5 { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--t3); }
.stsheet .info > p.t5 .mono { color: var(--t2); }

/* ---- the stages: Darkroom's pack stage (its black, its faint light, its round close, its titles); the stamps,
   envelopes and pages are the objects in the light. A gold coming up warms it, as a rare print warms the pack's. ---- */
.stage.st-stage { background: var(--k0); }
.stage > .scene { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(64px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom)); --amb: 243,241,236;
  background: radial-gradient(60% 50% at 50% 46%, rgba(var(--amb), var(--lampa)) 0%, rgba(var(--amb), 0) 70%), var(--k0); transition: --lampa .3s; }
.stage > .scene.warm, .scene:has(> .rst .rhero.t3), .scene:has(> .ohero.t3) { --amb: 255,214,10; }
.scene > * { position: relative; z-index: 1; flex: none; }
.stage:has(> .scene) > :not(.scene):not(.x) { visibility: hidden; }
.stage.peek { clip-path: inset(calc(var(--hh) + env(safe-area-inset-top)) 0 0 0); }
.stage.peek > .scene { clip-path: inset(calc(var(--hh) + env(safe-area-inset-top)) 0 0 0); }
.scene > .stitle { width: 100%; max-width: 560px; padding: 0 20px; min-height: 108px; }
.scene .stitle .kicker { display: block; min-height: 15px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene .stitle h2 { min-height: 33px; margin: 6px 0 0; line-height: 1.1; color: var(--t1); }
.scene .stitle .sub { min-height: 20px; margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--t2); }
.scene .stitle .sub .mono { color: var(--t1); }
.scene .after { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 48px; padding: 0 16px; }
.rwhy { display: flex; align-items: flex-end; justify-content: center; height: 40px; margin: 0; padding: 0 16px; font-size: 13px; color: var(--t3); text-align: center; }
.rcap { min-height: 56px; padding: 8px 16px 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--t2); }
.rcap p { margin: 0; }
.rcap .cpx { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; }
.cpx .mono { font-size: 13px; color: var(--t2); }
.cpx .pgn { color: var(--t1); }
.rcap .endline { color: var(--t1); }
.stage > .scene.rit, .stage > .scene.oall, .stage > .scene.dkm { justify-content: safe center; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.rst { position: relative; width: min(100%, 390px); flex: none; height: 380px; touch-action: pan-y; }
.renv { position: absolute; left: 50%; width: 160px; height: 112px; margin-left: -80px; cursor: grab; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; filter: var(--st-e1); }
.renv:focus-visible { outline: 2px solid var(--t2); outline-offset: 8px; }
.renv > img { position: absolute; left: 0; top: 0; }
.renv .ev-back { z-index: 0; }
.renv .ev-flap { z-index: 4; transform-origin: 50% 12px; }
.renv.open .ev-flap { z-index: 1; }
.renv .rin { position: absolute; left: 0; right: 0; top: -420px; bottom: 0; overflow: hidden; z-index: 2; }
.renv:not(.open) .rin { visibility: hidden; }
.renv .ev-front { z-index: 3; }
.renv .ev-strip { z-index: 5; }
.renv .ev-strip.b { clip-path: inset(0 0 0 calc(var(--cut, 0) * 100%)); }
/* the torn part of the tear strip: the flap's top edge, paper and ink like the strip, its lower edge torn ragged (whole
   art pixels) and a shade darker (the flap's inside); a layer of its own so it can curl up, turn and fall */
.renv .ev-loose, .ost .ev-loose { position: absolute; left: 0; top: 0; z-index: 6; width: 160px; height: 22px; visibility: hidden; pointer-events: none;
  background: linear-gradient(var(--st-ink) 0 4px, var(--st-paper) 4px 12px, #e2d5b8 12px 16px, #d6c8a8 16px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 14px no-repeat, linear-gradient(90deg, #000 0 8px, transparent 8px 12px, #000 12px 28px, transparent 28px 32px, #000 32px 44px, transparent 44px 48px, #000 48px 56px) 0 14px / 56px 4px repeat-x, linear-gradient(90deg, #000 0 4px, transparent 4px 16px, #000 16px 24px, transparent 24px 36px, #000 36px 40px, transparent 40px 52px, #000 52px 56px) 0 18px / 56px 4px repeat-x;
          mask: linear-gradient(#000 0 0) 0 0 / 100% 14px no-repeat, linear-gradient(90deg, #000 0 8px, transparent 8px 12px, #000 12px 28px, transparent 28px 32px, #000 32px 44px, transparent 44px 48px, #000 48px 56px) 0 14px / 56px 4px repeat-x, linear-gradient(90deg, #000 0 4px, transparent 4px 16px, #000 16px 24px, transparent 24px 36px, #000 36px 40px, transparent 40px 52px, #000 52px 56px) 0 18px / 56px 4px repeat-x;
  clip-path: inset(-40px calc((1 - var(--cut, 0)) * 100%) -40px 0); }
/* (falling, it goes behind the envelope, so behind what comes out of it) */
.renv .ev-loose.behind { z-index: -1; }
.renv.cutting .ev-loose { visibility: visible; }
.ost .ev-loose.torn { z-index: 0; visibility: visible; clip-path: none; transform-origin: 160px 12px; }
/* the opening under it: the dark inside, its lower edge torn ragged (whole art pixels) */
.renv .ev-gap { position: absolute; left: 4px; top: 8px; z-index: 5; width: 152px; height: 8px; background: var(--st-ink); clip-path: inset(0 calc((1 - var(--cut, 0)) * 100%) 0 0);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 12px, #000 12px 20px, transparent 20px 24px) 0 4px / 100% 4px no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 12px, #000 12px 20px, transparent 20px 24px) 0 4px / 100% 4px no-repeat; }
.renv .ev-tab { position: absolute; left: -8px; top: 0; z-index: 7; width: 8px; height: 12px; background: var(--live); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.rdeck { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rdeck > * { pointer-events: auto; }
.scene .rc { position: absolute; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.scene .rc.k2 { width: 64px; height: 80px; } .scene .rc.k3 { width: 96px; height: 120px; } .scene .rc.k4 { width: 128px; height: 160px; }
.scene .rc .rf { position: relative; width: 100%; height: 100%; filter: var(--st-e1); }
.scene .rc .rf > img, .scene .rc .rf > canvas { display: block; position: absolute; left: 0; top: 0; }
.scene .rc .rf .pback { z-index: 1; }
.scene .rc .rf .pflap { position: absolute; left: -12px; top: -12px; z-index: 2; overflow: hidden; pointer-events: none; }
.airsh { position: absolute; left: 6px; right: 6px; top: 10px; bottom: 0; border-radius: 8px; background: rgba(0,0,0,.6); filter: blur(8px); pointer-events: none; opacity: 0; }
/* a card turning (scaleX only): the shade as it turns from the lamp, and the paper's edge at the middle of the turn */
.scene .rc .rf .tshade { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
.scene .rc .rf .tedge { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4; width: 4px; margin-left: -2px; background: var(--st-paper-edge); box-shadow: 1px 0 0 var(--st-ink); opacity: 0; pointer-events: none; }
.scene .rc:focus-visible .rf { outline: 2px solid var(--t2); outline-offset: 4px; }
.scene .rc.hi:not(.open) { touch-action: none; }
.rcp { position: absolute; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 14px; line-height: 20px; color: var(--t1); pointer-events: none; }
.rcp .cpx { display: flex; align-items: center; gap: 8px; }
.rhero { position: absolute; left: 0; right: 0; top: 20px; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
.hcap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hcap b.tw { font-size: 16px; font-weight: 600; }
.hcap span { font-size: 14px; color: var(--t2); }
.fwrap { position: relative; display: block; line-height: 0; }
.scene .rc .rf > .fwrap { position: absolute; left: 0; top: 0; }
.fwrap > canvas.foil, canvas.foil { position: absolute; z-index: 4; pointer-events: none; image-rendering: pixelated; mix-blend-mode: screen; }
.sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(110deg, transparent 38%, color-mix(in srgb, var(--st-gold-hi) 55%, transparent) 50%, transparent 62%); mix-blend-mode: screen; border-radius: inherit; overflow: hidden; }
/* the index strip: the eight pages as tabs in their colours, where an envelope's stamps go */
.pstrip { display: flex; gap: 4px; width: min(calc(100% - 24px), 366px); margin: 12px 0 16px; }
.pst { position: relative; flex: 1 1 0; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: var(--rt); background: color-mix(in srgb, var(--c1) calc(var(--f) * 100%), var(--k1)); line-height: 0; transition: background-color .2s; }
.pst.done { background: var(--c1); }
.pst.one::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--live); }
.pst.g::before { content: ''; position: absolute; bottom: 4px; right: 4px; width: 4px; height: 4px; background: var(--st-gold); }
.endpage { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
/* into the book: the stamps held in the hand over the page (copies on the stage's top layer, lifted), the page on the
   desk (a turning page stacked over the last), the glassine's glint as a stamp slips under it */
.scene > .mhand { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.mhand .hcp { position: fixed; display: block; image-rendering: pixelated; filter: var(--st-e2); }
.mbook { z-index: 3; display: grid; place-items: center; pointer-events: none; }
.mbook > .spg { grid-area: 1 / 1; }
.spg-row .glass { overflow: hidden; }
.spg-row .glass .glint { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--t1) 16%, transparent) 50%, transparent 62%); pointer-events: none; }
.pst { transition: background-color .2s, transform .2s cubic-bezier(.2,.9,.3,1); }
.pst.on { transform: translateY(-4px); }
/* the pack summary's quiet row for the stamp album: a stamp's back, face down, "+1 stamp", to the album */
.stline { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: calc(100% - 32px); margin: 14px auto 0; padding: 8px 12px 8px 10px; border-radius: var(--rc); background: var(--k2); color: var(--t2); font: 400 14px/20px var(--sans); text-align: left; text-decoration: none; transition: background .12s; }
.stline:hover { background: var(--k3); }
.stline img.sback { width: 32px; height: 40px; filter: var(--st-e1); }
.stline > span:not(.sgo) { display: flex; flex-direction: column; gap: 2px; }
.stline b { color: var(--t1); font-weight: 600; }
.stline small { font-size: 13px; color: var(--t3); }
.stline .sgo { display: grid; color: var(--t3); }
/* (and the paid-pack cap's one small line) */
.after .stcap { width: 100%; margin: 0 0 4px; color: var(--t3); text-align: center; }
/* Day kept: the week's cancels, the envelopes dropping into the light */
.dkwk { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 16px; }
.wk { display: inline-flex; gap: 4px; line-height: 0; }
.wk.k1 { gap: 2px; }
.wk img { display: block; }
.wk7 { font-size: 12px; color: var(--t3); }
.dkst { position: relative; width: 192px; height: 176px; margin: 24px 0 8px; }
.dke { position: absolute; left: 12px; top: 48px; transform: translate(calc(var(--n) * 8px), calc(var(--n) * -6px)); filter: var(--st-e1); }
.dke img { transform-origin: 50% 100%; }
.dkn { position: absolute; right: 0; top: 24px; padding: 3px 4px; border-radius: var(--ra); background: var(--st-paper); line-height: 0; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.scene.dkm .after { margin-top: 16px; }
/* several envelopes at once, the grid */
.ofan { position: relative; width: calc(160px + (var(--n) - 1) * 8px); height: calc(112px + (var(--n) - 1) * 6px); margin: 96px 0; cursor: pointer; outline: none; touch-action: none; }
.ofan .of { position: absolute; left: calc(var(--k) * 8px); top: calc((var(--n) - 1 - var(--k)) * 6px); filter: var(--st-e1); }
.ofan .ofx { position: absolute; right: -12px; top: -12px; padding: 3px 4px; border-radius: var(--ra); background: var(--st-paper); line-height: 0; }
.rst.ost { height: auto; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rst.ost > .ofan { margin: 0; }
.ogrid { display: grid; grid-template-columns: repeat(var(--cols), 64px); gap: 16px 12px; justify-content: center; padding: 16px 12px 8px; }
.scene .rc.og { position: relative; }
.og .xtag { right: -6px; bottom: -4px; }
.ohero { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; cursor: pointer; --amb: 243,241,236;
  background: radial-gradient(60% 50% at 50% 44%, rgba(var(--amb), .08), rgba(var(--amb), 0) 70%), color-mix(in srgb, var(--k0) 97%, transparent); }
.ohero.t3 { --amb: 255,214,10; }
.endrow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 360px; }
.endrow canvas { filter: var(--st-e1); }
.stage > .scene.end { justify-content: safe center; }
/* ceremonies: the real page in the light, its cancel in the margin, then one card on Darkroom's paper, perforated down
   both sides like the pack */
.scene.cer { justify-content: flex-start; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.cerpage { position: relative; z-index: 2; width: min(358px, calc(100vw - 32px)); }
.cerpage .spg.k2 { margin: 0 auto; }
.cerpage .spg-hd { overflow: visible; }
.cercard { position: relative; z-index: 1; width: min(340px, calc(100vw - 40px)); margin: -14px 0 0; padding: 30px 20px 16px; border-radius: 3px; background: var(--t1); color: var(--k0); text-align: center;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) 0 0 / 51% 14px repeat-y, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) 100% 0 / 51% 14px repeat-y;
          mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) 0 0 / 51% 14px repeat-y, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) 100% 0 / 51% 14px repeat-y; }
.cercard h2 { margin: 0; font-family: var(--display); font-weight: var(--font-head-wt); letter-spacing: var(--font-head-ls); font-size: 28px; line-height: 1.05; color: var(--k0); }
.cercard > p { margin: 6px 0 0; font-size: 14px; color: color-mix(in srgb, var(--k0) 62%, var(--t1)); }
.cercard.gilt { box-shadow: inset 0 3px 0 var(--st-gold), inset 0 -3px 0 var(--st-gold); }
.cercard .rwd small { color: color-mix(in srgb, var(--k0) 62%, var(--t1)); }
.cercard .btn.primary { background: var(--k0); border-color: var(--k0); color: var(--t1); }
.cercard .btn.primary:hover { background: var(--k2); }
.cercard .btn:not(.primary) { background: color-mix(in srgb, var(--k0) 8%, var(--t1)); color: var(--k0); }
.cercard .btn:not(.primary):hover { background: color-mix(in srgb, var(--k0) 14%, var(--t1)); }
.cercard .after { padding: 0; margin-top: 12px; flex-wrap: nowrap; }
.cercard .after .btn { padding: 0 16px; }
.rwds { display: flex; justify-content: space-around; align-items: flex-end; margin: 18px 0 8px; }
.rwd { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
button.rwd { cursor: pointer; }
.rwd .rwo { position: relative; height: 64px; display: grid; place-items: center; }
.rwd .orb { width: 44px; height: 44px; }
.rwd .rwo img.px { filter: var(--st-e1); }
.rwd small { font-size: 12.5px; color: var(--t3); }
.spg .gsweep { position: absolute; inset: -1px; z-index: 6; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from 210deg, var(--st-gold) var(--a), transparent var(--a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.acstack { position: relative; width: 288px; height: 360px; display: grid; place-items: center; margin-top: 8px; }
.actab { position: absolute; left: 50%; top: 50%; margin: -14px 0 0 -20px; width: 40px; height: 28px; border-radius: var(--rt) var(--rt) 0 0; background: var(--c1); display: grid; place-items: center; line-height: 0; }
.amcov img.px { filter: var(--st-e3); }
.scene.albcer > .stitle { margin-top: 28px; min-height: 0; }

/* ---- Home: the album as one of Today's rows ---- */
.albrow .hr-st { background: var(--k2); }
.albrow .hr-st img.px { width: auto; height: auto; filter: var(--st-e1); }
.albrow .hr-t b .mono { font-size: 13.5px; }
.albrow .btn { flex: none; }

/* ---- Trade: a line of limits, sections with Darkroom's heads, swaps and finder rows on hairlines ---- */
.vline { margin: 16px 0 4px; font-size: 14px; line-height: 1.5; color: var(--t2); }
.vline .mono { color: var(--t1); }
.vsec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 6px; font-family: var(--display); font-weight: var(--font-head-wt); letter-spacing: -.015em; font-size: 18px; }
.vsec small { font: 400 12.5px var(--sans); letter-spacing: 0; color: var(--t3); text-align: right; }
.swcard { padding: 16px 0; border-top: 1px solid var(--rule); overflow: hidden; }
.swcard .swho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.swcard .swho .orb { width: 24px; height: 24px; flex: none; }
.swcard .swho b { min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swcard .swho small { flex: none; margin-left: auto; font-size: 12.5px; color: var(--t3); }
.swpair { display: flex; align-items: flex-start; justify-content: center; gap: 16px; margin: 16px 0 10px; }
.swside { display: flex; gap: 8px; }
.swst { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.swst canvas, .swst img.stp { filter: var(--st-e1); }
.swst small { font-size: 13px; color: var(--t2); white-space: nowrap; }
.swpair .parr { display: grid; margin-top: 50px; color: var(--t3); }
.swlow { margin: 0 0 10px; text-align: center; font-size: 12.5px; color: var(--t3); }
.swcard .actions { display: flex; justify-content: flex-end; gap: 8px; }
.swcard.leaving small, .swcard.leaving .actions, .swcard.leaving .swlow { opacity: 0; transition: opacity .15s; }
.gfbody { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.gfst canvas { filter: var(--st-e1); }
.gfty { display: flex; flex-direction: column; gap: 8px; }
.gfty .tys { display: flex; gap: 8px; }
.tyb { padding: 0; border: 0; background: none; cursor: pointer; filter: var(--st-e1); }
.tyb:active { transform: translateY(2px); }
.flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 28px; }
.frow { position: relative; min-width: 0; border-top: 1px solid var(--rule); }
.fslip { position: relative; display: flex; align-items: center; gap: 8px; color: var(--t1); }
.frow.fin .fslip::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--c1); }
.frm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 0 12px 12px; cursor: pointer; }
.frw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--t3); }
.frw .fwho { display: flex; align-items: center; gap: 6px; min-width: 0; }
.frw .orb { width: 18px; height: 18px; flex: none; box-shadow: none; }
.frw .fwho > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frw b { font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frw b.ffin { color: color-mix(in srgb, var(--c1) 62%, var(--t1)); }
.frp { flex: none; display: flex; align-items: center; gap: 6px; }
.frp .farr { display: grid; color: var(--t3); }
.fgive, .fget { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fgive canvas, .fget canvas, .fgive img.stp, .fget img.stp { filter: var(--st-e1); }
.fcost { display: inline-flex; align-items: center; gap: 4px; }
.fstub { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: var(--rc); background: var(--k2); color: var(--t1); font: 600 13.5px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s; }
.fstub:hover { background: var(--k3); }
.fstub:disabled { opacity: .4; }
.frline:empty { display: none; }
.frline { margin: 0 0 12px 12px; font-size: 14px; color: var(--t2); }
.frmore { display: none; }
.frow.open .frmore { display: grid; gap: 10px; padding: 0 0 16px 12px; }
.fside2 .fs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fb { padding: 0; border: 0; background: none; cursor: pointer; opacity: .45; transition: transform 120ms cubic-bezier(.2,.9,.3,1), opacity 120ms; }
.fb.on { opacity: 1; transform: translateY(-4px); }
.fb canvas, .fb img.stp { filter: var(--st-e1); }
.frmore .btn { justify-self: start; }
.wantbar { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); scroll-margin-top: 84px; }
.wantbar .gs canvas { filter: var(--st-e1); }
.wantbar .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wantbar .grow b { font-size: 15px; font-weight: 600; }
.gpanel { margin: 16px 0 8px; padding: 12px 0 4px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gpanel .gstrip { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gpanel .gstrip .t5 .mono { color: var(--st-gold); }
.gpanel .gpr { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; padding: 6px 0; }
.gpanel .gps { display: flex; flex-wrap: wrap; gap: 8px; }
.gpanel .gst { position: relative; }
.gpanel .gst .xtag { right: -6px; bottom: -4px; padding: 2px 3px; }
.gpanel .gpm { font-size: 14px; }
.gpanel .gpm .mono { font-size: 13px; }
.gpanel > p.t5 { margin: 8px 0; }
.gpanel .flist { margin-top: 8px; }
.giftsec { scroll-margin-top: 84px; }
.gstrip2 { display: flex; gap: 12px; overflow-x: auto; padding: 8px 4px 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
.gstrip2::-webkit-scrollbar { display: none; }
.gsp { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; scroll-snap-align: start; transition: transform 120ms cubic-bezier(.2,.9,.3,1), opacity 120ms; }
.gsp.on { opacity: 1; transform: translateY(-4px); }
.gsp canvas, .gsp img.stp { display: block; filter: var(--st-e1); }
.gsp .xtag { right: -6px; bottom: -4px; }
.gsp .ask { position: absolute; left: -2px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.gpeople .t5 { margin: 0 0 4px; }
.gpp { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--rule); }
.gpp .orb { width: 28px; height: 28px; flex: none; }
.gpp > span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.gpp > span b { font-weight: 600; }
.gpp small { font-size: 12.5px; color: var(--t3); }
.gpp.armed .gsend { background: var(--t1); color: var(--k0); }
.genv { position: fixed; z-index: 3; display: block; filter: var(--st-e2); }
.genv .gseal { position: absolute; left: 30px; top: 18px; width: 20px; height: 20px; }
.genv .gseal .orb { width: 20px; height: 20px; display: block; box-shadow: 0 0 0 2px var(--live); }
.tgl { margin-top: 16px; }

/* ---- the Counter: a real stamp sheet on the stamps' paper, perforated between its cells; the stamp itself fills
   the cells it's worth; the count in mono beside it ---- */
.counter { margin-bottom: 8px; }
.cmeter { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding-top: 20px; }
.cslot { position: absolute; top: 4px; left: 50%; width: 176px; height: 6px; margin-left: -88px; border-radius: 3px; background: var(--k0); box-shadow: inset 0 0 0 1px var(--rule2); }
.csheets { display: flex; gap: 12px; max-width: calc(100% - 72px); overflow-x: auto; padding: 4px 4px 8px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.csheets::-webkit-scrollbar { display: none; }
.csheet { flex: none; display: grid; grid-template-columns: repeat(4, 32px); gap: 4px; padding: 6px; scroll-snap-align: center; filter: var(--st-e1);
  background: linear-gradient(var(--st-paper-edge) 50%, transparent 0) 39.5px 0 / 1px 4px repeat-y, linear-gradient(var(--st-paper-edge) 50%, transparent 0) 75.5px 0 / 1px 4px repeat-y, linear-gradient(var(--st-paper-edge) 50%, transparent 0) 111.5px 0 / 1px 4px repeat-y,
    linear-gradient(to right, var(--st-paper-edge) 50%, transparent 0) 0 47.5px / 4px 1px repeat-x, linear-gradient(to right, var(--st-paper-edge) 50%, transparent 0) 0 91.5px / 4px 1px repeat-x, var(--st-paper); }
.csheet .cc { display: block; width: 32px; height: 40px; padding: 0; border: 0; background: repeating-linear-gradient(45deg, var(--st-gum) 0 2px, color-mix(in srgb, var(--st-gum) 90%, var(--st-ink)) 2px 3px); }
.csheet .cc.on { background: none; cursor: pointer; }
.csheet .cc img.stp { width: 32px; height: 40px; }
.ccount { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 10px; }
.ccount .cn { font: 500 24px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--t1); }
.ccount .cn span { color: var(--t3); }
.ccount .cfull { font-size: 12px; color: var(--t3); }
.cwhy { min-height: 18px; margin: 14px 0 6px; text-align: center; }
.cbtns { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.cdrop { position: absolute; top: 4px; left: 50%; margin-left: -40px; z-index: 3; filter: var(--st-e1); }
.cgroups { margin-top: 28px; }
.cgp { position: relative; padding: 14px 0 6px 12px; border-top: 1px solid var(--rule); }
.cgp::before { content: ''; position: absolute; left: 0; top: 16px; width: 3px; height: 16px; border-radius: 2px; background: var(--c1); }
.cgh { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--t1); }
.cgrid { display: flex; flex-wrap: wrap; gap: 16px 12px; padding-bottom: 8px; }
.cs { position: relative; padding: 0 0 4px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cs > canvas, .cs > img.stp { display: block; filter: var(--st-e1); transition: transform 120ms cubic-bezier(.2,.9,.3,1), filter 120ms; }
.cs.on > canvas, .cs.on > img.stp { transform: translateY(-4px); filter: var(--st-e2); }
.cs.none > canvas, .cs.none > img.stp { opacity: .45; }
.cs .xtag { right: -6px; bottom: 0; }

/* ---- Earn: the day's envelope on the quest track (lit when the day is kept) ---- */
.e3-track { margin-bottom: 40px; }
.e3-env { position: absolute; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -14px); pointer-events: auto; }
.e3-env img { width: 40px; height: 28px; filter: grayscale(1) brightness(.6); transition: filter .3s; }
.e3-env small { font: 500 11px var(--mono); color: var(--t3); }
.e3-env.on img { filter: none; }
.e3-env.on small { color: var(--t1); }

/* a computer: the book on the left at its own size; the envelopes, the page's spares and the back pocket beside it */
@media (min-width: 900px) {
  .albpages { display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; margin-top: 24px; }
  .albpages > .book { grid-column: 1; grid-row: 1 / span 3; margin-top: 0; }
  .albpages > .eline, .albpages > .pgfoot, .albpages > .pocket { grid-column: 2; margin-right: 0; }
  .albpages > .eline { margin: 0; border-top: 1px solid var(--rule); }
  .albpages > .pgfoot { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .albpages > .pocket { margin: 0 0 40px; border-top: 0; }
  .albpages > .pocket .pk { max-width: 360px; }
}
@media (max-width: 370px) {
  .frm { gap: 10px; padding-left: 10px; }
  .frp { gap: 2px; }
  .fstub { padding: 0 12px; }
  .frw b { font-size: 13.5px; }
  .spg { padding: 14px 10px 4px 13px; }
  .spg-row .glass { left: -13px; right: -10px; }
  .ptabs { padding: 0 12px 0 15px; gap: 3px; }
  .spg-hd { gap: 6px; }
  .albhead .acnt { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .spg .sl, .spg .sl > canvas, .fb, .gsp, .cs > canvas, .ptab { transition: none; } }
html.reduce .spg .sl, html.reduce .spg .sl > canvas, html.reduce .fb, html.reduce .gsp, html.reduce .cs > canvas, html.reduce .ptab { transition: none; }
/* the count of offers you have out, in the account menu: quiet, not the red of something waiting on you (#67) */
.mm-list .qn.dim { background: var(--k3); color: var(--t2); }

/* Sweep the floor: every listing the slider reaches, its price under it, the ones it takes lit (a member's report,
   2026-10-18) */
.sw-it { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--t2); cursor: pointer; font: 500 11.5px var(--mono); }
.sw-it:not(.on) { opacity: .38; }
.sw-it:not(.on):hover { opacity: .7; }
.sw-it .sw-p { font-size: 11.5px; }

/* the Album under Inventory's head (a member's report, 2026-10-19): Inventory's title and tabs on top, as on Prints,
   then the season's own head and its Pages, Trade and Counter */
.albinv { padding-bottom: 0; }
.albinv + .albhead { padding-top: 22px; }
.albinv + .albhead h1 { font-size: clamp(28px, 3.2vw, 36px); }
@media (max-width: 640px) { .albinv + .albhead { padding-top: 16px; } .albinv + .albhead h1 { font-size: 28px; } }
/* the same height as Prints' head, whose title row also holds Select, so the tabs don't shift when you switch (a member, iOS) */
.ihead.albinv .ph-t { min-height: var(--ihead-row, 34px); }

/* the finish test: Finish it in the pack summary (a set the pack left one short) and on the set page */
.finline { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 32px); max-width: 520px; margin: 10px auto 0; padding: 10px 12px; border-radius: var(--rc); background: var(--k2); color: var(--t2); font: 400 14px/20px var(--sans); text-align: left; }
.finline > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.finline b { color: var(--t1); font-weight: 600; }
.finline small { font-size: 13px; color: var(--t3); }
.finline .finb { flex: none; }
.finline.done b { color: var(--t1); }
/* the invite ask on a newcomer's first day (the pack summary; the growth plan's idea 4) */
.finline.askline > span:first-child > span { display: flex; align-items: center; gap: 6px; }
.finline > .askb { flex-direction: row; gap: 6px; flex: none; }
.finline > .askb > .btn:not(.primary) { background: var(--k3); box-shadow: inset 0 0 0 1px var(--rule2); color: var(--t1); }
@media (max-width: 520px) { .finline.askline { flex-direction: column; align-items: stretch; } .finline > .askb > .btn { flex: 1 1 0; } }
.fam-head .finb { margin-left: auto; }

/* the album's guide (the ⋯ sheet): four steps, the dates, the odds folded (the founder, 2026-10-19: "way simpler") */
.asteps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: ast; display: grid; gap: 14px; }
.asteps li { counter-increment: ast; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
.asteps li::before { content: counter(ast); grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--k2); color: var(--t1); font: 500 13px var(--mono); }
.asteps b { font-weight: 600; font-size: 15px; line-height: 28px; color: var(--t1); }
.asteps span { font-size: 14px; line-height: 20px; color: var(--t2); }
.adates { margin: 0; display: grid; }
.adates div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 20px; }
.adates div:first-child { border-top: 1px solid var(--rule); }
.adates dt { color: var(--t3); font-variant-numeric: tabular-nums; }
.adates dd { margin: 0; color: var(--t2); }
.adates dd b { color: var(--t1); font-weight: 600; }
.albsheet > p.t5 { margin-top: 14px; }
.ofine { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 19px; color: var(--t2); }

/* iOS zooms in on a text field under 16px when it's focused, and the page stays zoomed from then on: every field on a
   touch screen is 16px (a member's report, 2026-10-19: with the new design the iPhone kept zooming slightly from page
   to page; the darkroom's search and sort fields are 13.5-15px, and later rules beat the old max-width 640px one) */
@media (pointer: coarse) {
  input:not([type=radio]):not([type=checkbox]):not([type=range]), select, textarea { font-size: 16px !important; }
  /* (room for the bigger words: Market's sort read "Total volum") */
  .toolbar .field.q, .toolbar .field.mq { flex: 1 1 48% !important; }
  .toolbar select.field { flex: 1 1 38% !important; }
}

/* ---- a legendary (a PFP piece's own top roll, core.js legendaryOf): above the top band, in gold, two golds out of
   register where the Legend mark has cyan and magenta. It replaces the "1 in N" (kept in the print's details) ---- */
:root { --lg: #e5b94e; --lg-hi: #fff2c2; --lg-g: rgba(229,185,78,.42); }
.leg { --hc: var(--lg); --hg: var(--lg-g); }
.odds.leg, .h4 .odds.leg, .pmeta .odds.leg, .dk .front .odds.leg, .deal.summary .card .odds.leg { color: var(--lg); font-weight: 600; }
.odds.leg::before, .h4 .odds.leg::before { width: 9px; height: 9px; background: linear-gradient(var(--lg), var(--lg)) 0 0 / 6px 6px no-repeat, linear-gradient(var(--lg-hi), var(--lg-hi)) 3px 3px / 6px 6px no-repeat; }
/* Unique (a 1 of 1): its own colour, like a legendary's */
.uniq, .h5 { --hc: var(--r5); --hg: var(--r5-g); }
.odds.uniq, .h5 .odds.uniq, .pmeta .odds.uniq, .dk .front .odds.uniq, .deal.summary .card .odds.uniq { color: var(--r5); font-weight: 600; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.odds.uniq::before { width: 9px; height: 9px; background: var(--r5); box-shadow: 0 0 6px var(--r5-g); }
.pmeta .odds.uniq::before { width: 13px; height: 13px; }
.card.h5 { border-color: color-mix(in srgb, var(--r5) 35%, transparent); }
.dr-odds .h5 { color: var(--r5); }
.pmeta .odds.leg::before, .h4 .pmeta .odds.leg::before { width: 13px; height: 13px; background: linear-gradient(var(--lg), var(--lg)) 0 0 / 9px 9px no-repeat, linear-gradient(var(--lg-hi), var(--lg-hi)) 4px 4px / 9px 9px no-repeat; }
/* (on a narrow card its type goes onto a second line rather than past the edge) */
.card .odds.leg { min-width: 0; white-space: normal; line-height: 1.25; }
.leg-text { color: var(--lg); font-weight: 600; }
.card.leg .card-art { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lg) 75%, transparent), 0 0 22px -6px var(--lg-g); }
.lgnote { margin: 8px 0 10px; }
.pw-who .odds.leg { font-size: 12px; }
/* the reveal: its back glows gold before it turns, its stamp is gold */
.dk.leg .back { box-shadow: inset 0 0 0 2px var(--lg), 0 0 70px 8px var(--lg-g), 0 30px 70px -24px #000; }
.dk.leg .back .cb { border-color: color-mix(in srgb, var(--lg) 70%, transparent); }
.dk.leg.charge .back { box-shadow: inset 0 0 0 3px var(--lg), 0 0 120px 26px var(--lg-g), 0 0 40px 6px var(--lg); }
.dk .stamp.leg { border-color: var(--lg); }
.dk .stamp.leg b { color: var(--lg); font-weight: 600; }

/* offers made to you: "You have N" or "New to you" on the prints they give (forum pick, 2026-10-19), in the
   "New to them" tag's look; the count is the quiet one, new is green */
.havetag { display: inline-block; margin-top: 6px; padding: 2px 6px; border-radius: 2px; background: var(--k2); color: var(--t2); font: 500 10.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.havetag.nw { color: var(--up); }
.havetag.lsttag { color: var(--ink); }
.havetag + .lsttag { margin-left: 4px; }
/* a listed print new to them: its New to them tag sits by its Listed tag, not over it */
/* under the card's lines, listed or not (on the picture it covered the set line of an unlisted card) */
.card.newto .card-body .newtag { position: static; display: block; width: fit-content; margin: 6px 0 0; padding: 0; background: none; vertical-align: top; }
/* Inventory › Sets: how many of each collection's run have been pulled so far, quietly */
.card .pulled { display: block; margin-top: 6px; font: 400 11.5px/1.3 var(--mono); color: var(--t3); }
.slot .pulled { font: 400 11.5px/1.3 var(--mono); color: var(--dim2); }
.havesum { display: block; margin-top: 4px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .02em; color: var(--t2); }
.havesum .nw { color: var(--up); }
.othumbs .thumb.tnew { box-shadow: 0 0 0 2px var(--up); }

/* a collection's grid: the listing's price is its Buy button, the second tap buys (forum pick, 2026-10-19). On a
   phone it looks like the price it was; on a computer, pointing at the card shows "Buy" */
.card-foot .gbuy { flex: none; display: inline-flex; align-items: center; gap: 0; margin: -4px -6px -4px 0; padding: 4px 6px; border: 0; border-radius: var(--rt); background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.card-foot .gbuy .gb-w { display: none; color: var(--t2); font: 500 12px var(--sans); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .gbuy { background: var(--k2); }
  .card:hover .gbuy .gb-w, .gbuy:focus-visible .gb-w { display: inline; }
  .card .gbuy:hover { background: var(--t1); }
  .card .gbuy:hover .gb-w, .card .gbuy:hover .ink { color: var(--k0); }
}
.card-foot .gbuy.armed { background: var(--t1); color: var(--k0); font: 600 12.5px var(--sans); padding: 5px 8px; }
.card-foot .gbuy.armed .ink { color: var(--k0); }
.card-foot.armed .who { display: none; }
.card-foot.armed { justify-content: flex-end; }
.card-foot .gbuy:disabled { opacity: .6; cursor: default; }
.card-foot .gb-got { color: var(--up); display: inline-flex; align-items: center; gap: 4px; }

/* ---------- the front door (app.js welcome, 2026-10-20): a first visit, signed out, step by step to an account ---------- */
.door { display: flex; flex-direction: column; min-height: calc(100svh - 150px); padding: 4px 0 26px; }
.door .dr-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; margin-bottom: 4px; }
.door .dr-top > :first-child { justify-self: start; }
.door .dr-top .dr-in { justify-self: end; }
.dr-back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule2); background: none; color: var(--t1); display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.dr-back:hover { background: rgba(255,255,255,.06); }
.dr-back svg { width: 18px; height: 18px; }
.dr-dots { display: flex; gap: 6px; }
.dr-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--rule2); transition: background .3s; }
.dr-dots i.on { background: var(--t1); }
.dr-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; animation: drin .45s var(--ease) both; }
.door.fwd .dr-body { animation-name: drfwd; }
.door.bwd .dr-body { animation-name: drbwd; }
@keyframes drin { from { opacity: 0; transform: translateY(10px); } }
@keyframes drfwd { from { opacity: 0; transform: translateX(32px); } }
@keyframes drbwd { from { opacity: 0; transform: translateX(-32px); } }
.dr-copy { width: 100%; max-width: 520px; }
.door h1 { margin: 0; font: var(--font-head-wt) clamp(52px, 14vw, 104px)/.9 var(--font-head); letter-spacing: var(--font-head-ls); }
.door h2 { margin: 0; font: var(--font-head-wt) clamp(34px, 9vw, 54px)/1 var(--font-head); letter-spacing: var(--font-head-ls); }
.dr-lede { color: var(--t2); font-size: 16.5px; line-height: 1.45; margin: 12px auto 0; max-width: 440px; }
.dr-acts { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; width: 100%; }
.dr-acts .btn { height: 52px; width: min(360px, 100%); font-size: 16px; }
.dr-acts .linkbtn { padding: 8px; }
.dr-fine { margin: 12px auto 0; max-width: 440px; }
.dr-from { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule2); color: var(--t2); font: 500 12px var(--mono); letter-spacing: .02em; margin-bottom: 14px; }
/* the art: a print on the black, crossfading when it changes */
.dr-art { position: relative; width: min(340px, 80vw); aspect-ratio: 1; flex: none; }
.dr-art > .showpiece { position: absolute; inset: 0; }
.dr-art > .showpiece.dr-swap { animation: drswap .7s var(--ease) both; }
.dr-art > .showpiece.dr-out { animation: drout .6s ease forwards; pointer-events: none; }
@keyframes drswap { from { opacity: 0; transform: scale(.96); } }
@keyframes drout { to { opacity: 0; transform: scale(1.02); } }
.dr-cap { display: flex; justify-content: space-between; gap: 12px; width: min(340px, 80vw); margin: 12px auto 0; font: 500 12px var(--mono); color: var(--t3); letter-spacing: .02em; }
.dr-cap b { color: var(--t2); font-weight: 500; }
.dr-hero { display: flex; flex-direction: column; align-items: center; }
/* what people have pulled lately, drifting by under the arrival */
.dr-strip { width: 100vw; margin: 6px calc(50% - 50vw) 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.dr-rail { display: flex; gap: 10px; width: max-content; animation: drrail 70s linear infinite; }
.dr-tile { width: 72px; height: 72px; flex: none; border-radius: var(--ra); overflow: hidden; background: var(--k1); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.dr-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-tile img.px { image-rendering: pixelated; }
@keyframes drrail { to { transform: translateX(-50%); } }
/* touch it */
.dr-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dr-play .playhint { margin-top: 12px; font-size: 13.5px; color: var(--t2); }
.dr-play .playhint svg { width: 15px; height: 15px; vertical-align: -3px; }
.door.s-play .dr-art { width: min(340px, 82vw); aspect-ratio: auto; }
.door.s-play .dr-art > .showpiece { position: relative; }
.dr-yes { min-height: 22px; margin: 0; color: var(--t1); font-size: 14.5px; }
.door .dr-under { display: flex; flex-direction: column; align-items: center; }
/* the seed: its number, its rarity, its four traits */
.dr-tag { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: min(340px, 80vw); }
.dr-num { font-weight: 600; font-size: 15px; }
.dr-odds b { font: 600 15px var(--mono); }
.dr-odds .h0 { color: var(--t2); } .dr-odds .h1 { color: var(--r1); } .dr-odds .h2 { color: var(--r2); } .dr-odds .h3 { color: var(--r3); } .dr-odds .h4 { color: var(--r4); }
.dr-seedline { width: min(340px, 80vw); text-align: left; font-size: 11.5px; color: var(--t3); margin-top: -6px; }
.dr-seedline .dr-hash { color: var(--t2); }
.dr-traits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 440px; }
.dr-t { display: flex; flex-direction: column; gap: 2px; padding: 9px 6px; border: 1px solid var(--rule); border-radius: var(--rc); min-width: 0; }
.dr-t span { font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t3); }
.dr-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t2); }
.dr-t i { font: 500 11.5px var(--mono); font-style: normal; color: var(--t3); }
.dr-t.sp { border-color: color-mix(in srgb, var(--r2) 60%, transparent); }
.dr-t.sp b { color: var(--t1); }
.dr-t.sp i { color: var(--r2); }
.dr-roll.dr-flash .frame { animation: drflash 1s ease-out; }
@keyframes drflash { from { box-shadow: 0 0 0 2px var(--r3), 0 0 70px -6px var(--r3); } }
/* packs: one to tear open, and what's in it */
.dr-stage .dr-pack .pk2 { --w: 200px; --h: 290px; margin: 0 auto; }
.dr-stage .dr-pack .pk2-label b { font-size: 42px; }
.dr-stage .dr-pack .pk2-label canvas.logo { width: 44px; height: 44px; }
.dr-pack.gone { display: none; }
.dr-fan { display: none; position: relative; width: min(360px, 92vw); height: 220px; }
.dr-fan.in { display: block; }
.dr-card { position: absolute; left: 50%; top: 30px; width: 116px; margin-left: -58px; transform: translateX(calc((var(--k) - 2) * 58px)) rotate(calc((var(--k) - 2) * 7deg)) translateY(calc(var(--d, 0) * 1px)); animation: drdeal .55s var(--ease) both; animation-delay: calc(var(--k) * 110ms); z-index: calc(var(--k) + 1); }
.dr-card:nth-child(1), .dr-card:nth-child(5) { --d: 14; }
.dr-card:nth-child(2), .dr-card:nth-child(4) { --d: 4; }
.dr-card .dr-ci { aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: var(--k1); box-shadow: 0 18px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12); }
.dr-card .dr-ci img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-card .dr-ci img.px { image-rendering: pixelated; }
.dr-card .dr-cl { display: none; }
.dr-card.lg { z-index: 9; }
.dr-card.lg .dr-ci { box-shadow: 0 0 0 2px var(--r4), 0 0 46px -4px var(--r4), 0 18px 40px -14px rgba(0,0,0,.9); }
@keyframes drdeal { from { opacity: 0; transform: translateX(0) rotate(0) translateY(40px) scale(.7); } }
.dr-hint { min-height: 20px; margin: 0; max-width: 340px; }
.dr-hint svg { width: 14px; height: 14px; vertical-align: -2px; }
.dr-loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 480px; }
.dr-loop > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border: 1px solid var(--rule); border-radius: var(--rc); }
.dr-loop svg { width: 20px; height: 20px; fill: none; stroke: var(--t1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.dr-loop i.gem { width: calc(20px * var(--gem-ar, .625)); height: 20px; margin-bottom: 4px; }   /* (ink is the gem here too, not the droplet: the UX pass, 2026-10-24) */
.dr-loop b { font-size: 14px; }
.dr-loop span { font-size: 12.5px; line-height: 1.35; color: var(--t3); }
/* you: the colours, the name */
.dr-orb { width: 150px; height: 150px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.dr-orb .orb { width: 150px; height: 150px; margin: 0; transition: background .6s; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.dr-orb .orb.pop { animation: drpop .45s var(--ease); }
@keyframes drpop { 40% { transform: scale(.92); } }
.dr-orbhint svg { width: 14px; height: 14px; vertical-align: -2px; }
.dr-name { display: grid; gap: 6px; width: min(320px, 100%); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--t3); }
.dr-name > span { padding-left: 4px; }
.door .field { height: 52px; font-size: 16px; width: 100%; }
.dr-name .field { text-align: center; font-weight: 600; }
.door .note { min-height: 22px; margin-top: 8px; color: var(--t1); font-size: 14px; }
/* the last step */
.dr-me.sm { flex-direction: column; gap: 6px; }
.dr-me.sm .orb { width: 72px; height: 72px; }
.dr-me.sm .dr-who { font-size: 20px; }
.dr-me.sm .dr-from { margin: 2px 0 0; }
.door .check.age { justify-content: center; margin-top: 16px; text-align: left; }
.door .check.age a { color: var(--t1); text-decoration: underline; }
.dr-full { width: 100%; max-width: 420px; padding: 18px; text-align: left; display: grid; gap: 10px; margin-top: 4px; }
.dr-full b { font-size: 16px; }
.dr-full p { margin: 0; }
.dr-full .fl { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--t3); }
.dr-full .icode { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.dr-full .dr-acts { margin-top: 4px; }
.dr-full .dr-acts .btn { width: 100%; }
.gate .gfree { margin: 8px 0 0; }
/* (pass 2) the hero is the piece to play with: it says so on hover; the play step's ring shows where to touch */
.door.s-hi .dr-art > .showpiece { cursor: pointer; }
.door.s-hi .dr-art > .showpiece:focus-visible { outline: 2px solid var(--t1); outline-offset: 4px; }
.door h1:focus, .door h2:focus { outline: none; }
.dr-ring { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; z-index: 3; animation: drring 1.8s ease-out infinite; }
@keyframes drring { 0% { transform: scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.dr-rollbtn svg { width: 16px; height: 16px; }
.dr-wait { position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px var(--mono); letter-spacing: .04em; color: var(--t3); pointer-events: none; z-index: 2; animation: drwait 1.6s ease-in-out infinite alternate; }
@keyframes drwait { from { opacity: .45; } }
.door.s-key .dr-me.sm .orb { width: 88px; height: 88px; }
@media (min-width: 960px) { .door.s-key .dr-me.sm .orb { width: 160px; height: 160px; } .door.s-key .dr-me.sm .dr-who { font-size: 26px; margin-top: 8px; } }
@media (max-width: 640px) {
  .door.s-seed .dr-art, .door.s-seed .dr-tag, .door.s-seed .dr-seedline { width: min(270px, 70vw); }
  .door.s-seed .dr-traits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .door.s-seed .dr-t { padding: 7px 3px; }
  .door.s-seed .dr-t span { font-size: 9px; letter-spacing: 0; }
  .door.s-seed .dr-t b { font-size: 13px; }
  .door.s-seed .dr-acts { margin-top: 12px; }
  .dr-loop > div { padding: 10px 4px; }
  .door.s-packs .dr-lede { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .dr-ring { animation: none; opacity: .9; } }
@media (max-width: 640px) {
  .door { min-height: calc(100svh - 130px); }
  .dr-body { gap: 18px; }
  .dr-lede { font-size: 16px; }
  .dr-stage .dr-pack .pk2 { --w: 180px; --h: 262px; }
  .dr-stage .dr-pack .pk2-label b { font-size: 38px; }
  .dr-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* and no taller than about a third of the screen, so "Get your free pack" is on the first screen: on a 390-wide iPhone
     with Safari's toolbars (~660 px) it sat at 648-700 px, a sliver with Sign in the only button in view (the founder's
     yes, 2026-10-24); 36svh brings it up about 57 px there, and a tall phone keeps the 300 px art */
  /* (the art only: its caption keeps its width, so a long name doesn't wrap and move the button as the art changes;
     the line before for a browser without svh; the review of v=336) */
  .door.s-hi .dr-cap { width: min(300px, 76vw); }
  .door.s-hi .dr-art { width: min(300px, 76vw); width: min(300px, 76vw, 36svh); }
}
/* a computer: the art on the left, the words on the right */
@media (min-width: 960px) {
  .door { min-height: calc(100vh - 170px); }
  .door .dr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'stage head' 'stage under'; align-content: center; align-items: center; column-gap: 72px; row-gap: 0; text-align: left; max-width: 1040px; width: 100%; margin: 0 auto; }
  .door .dr-body > .dr-copy:first-child { grid-area: head; align-self: end; }
  .door .dr-body > .dr-stage, .door .dr-body > .dr-hero { grid-area: stage; justify-self: center; }
  .door .dr-body > .dr-under { grid-area: under; align-self: start; align-items: flex-start; margin-top: 22px; }
  .door .dr-lede, .door .dr-fine { margin-left: 0; }
  .door .dr-acts { align-items: flex-start; }
  .dr-art, .door.s-play .dr-art { width: 420px; }
  .dr-cap, .dr-tag, .dr-seedline { width: 420px; }
  .door.s-hi .dr-body { grid-template-areas: 'stage head' 'strip strip'; }
  .door.s-hi .dr-body > .dr-copy { grid-area: head; align-self: center; }
  .door.s-hi .dr-strip { grid-area: strip; margin-top: 40px; }
  .door.s-hi h1 { font-size: 96px; }
  .door.s-key .check.age { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-rail { animation: none; }
  .dr-strip { overflow-x: auto; }
  .dr-body, .dr-card, .dr-art > .showpiece.dr-swap { animation: none !important; }
}
/* the front door from a shared print (welcome ?p=): the print they came for, small, above the step */
.dr-came { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; margin: 0 0 18px; border: 1px solid var(--rule2); border-radius: var(--rc); text-align: left; max-width: 100%; }
.dr-came .dr-ci { width: 52px; height: 52px; flex: none; border-radius: var(--ra); overflow: hidden; background: var(--k1); }
.dr-came .dr-ci img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-came .dr-ci img.px { image-rendering: pixelated; }
.dr-came .dr-ct { display: flex; flex-direction: column; min-width: 0; }
.dr-came b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-came small { font-size: 12.5px; color: var(--t3); }
.door .dr-copy > .dr-came + h2 { margin-top: 0; }
/* Sign in with Discord's new-account step (app.js dcOpen, v=357): make the account, or sign in with the passkey one has */
.s-dco .dco-new { display: flex; flex-direction: column; align-items: center; width: 100%; }
.s-dco .dco-or { display: flex; align-items: center; gap: 12px; width: min(360px, 100%); margin: 18px auto 14px; color: var(--t3); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.s-dco .dco-or::before, .s-dco .dco-or::after { content: ''; flex: 1; height: 1px; background: var(--rule2); }
.s-dco .dco-have { width: 100%; max-width: 420px; padding: 16px 18px; text-align: left; display: grid; gap: 8px; }
.s-dco .dco-have b { font-size: 15.5px; }
.s-dco .dco-have p { margin: 0; }
.s-dco .dco-have .dr-acts { margin-top: 4px; }
.s-dco .dco-have .dr-acts .btn { width: 100%; height: 48px; font-size: 15px; }
.s-dco .dco-have .btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.s-dco .dco-have .note { min-height: 0; margin: 0; }
.s-dco .dco-dn { color: var(--t1); font-weight: 600; overflow-wrap: anywhere; }
.s-dco .check.age { margin-top: 14px; }
.s-dco .dr-orb { width: auto; height: auto; }
.s-dco .dco-have > * { min-width: 0; }
.s-dco .dco-have .dr-acts .btn { white-space: normal; height: auto; min-height: 48px; padding: 10px 14px; line-height: 1.25; }
/* (a phone: the colours small and the name only in its field, so "Already collecting?" is on the first screen too) */
@media (max-width: 959px) {
  .door.s-dco .dr-me.sm .orb { width: 60px; height: 60px; }
  .s-dco .dr-me .dr-who, .s-dco .dr-orbhint { display: none; }
  .door.s-dco .dr-body { gap: 14px; }
  .s-dco .dco-or { margin: 12px auto 10px; }
}
@media (min-width: 960px) {
  .s-dco .dco-new { align-items: flex-start; }
  .s-dco .dco-or { margin-left: 0; }
}

/* =====================================================================
   The founder's polls (2026-10-21): a card at the top of Home while one is open, its page at /poll/<id> (signed out
   too), the founder's form at /admin/polls. Picks are rows you tap; the result is the same rows as bars.
   ===================================================================== */
.pollc { padding: 16px; border-radius: var(--rc); background: var(--k1); border: 1px solid var(--rule2); display: flex; flex-direction: column; gap: 10px; }
.pollc .pl-k .kicker { text-decoration: none; }
.pollc .pl-k a.kicker:hover { color: var(--t1); }
.pollc .pl-q { margin: 0; font: 650 19px/1.3 var(--display, var(--sans)); letter-spacing: -.015em; color: var(--t1); overflow-wrap: anywhere; }
.pollc .pl-n { margin: -2px 0 0; color: var(--t2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.pl-opts { display: flex; flex-direction: column; gap: 8px; }
.pl-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; border-radius: var(--rc); border: 1px solid var(--rule2); background: var(--k2); color: var(--t1); font: 550 15px/1.3 var(--sans); text-align: left; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.pl-opt .pl-t { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pl-opt .pl-r { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--t3); }
button.pl-opt:hover:not(:disabled) { border-color: var(--t3); }
.pl-opt.on { border-color: var(--t1); background: var(--k3); }
.pl-opt.on .pl-r { border-color: var(--t1); background: radial-gradient(circle, var(--t1) 0 4px, transparent 5px); }
button.pl-opt:disabled { cursor: default; }
button.pl-opt:disabled:not(.on) { opacity: .62; }
.pl-opt.busy { opacity: 1; animation: pollbusy 1s ease-in-out infinite; }
@keyframes pollbusy { 50% { border-color: var(--t3); } }
.pl-opt.res { cursor: default; }
.pl-opt.res::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(255,255,255,.07); }
.pl-opt.res.win::before { background: rgba(70,211,154,.16); }
.pl-opt.res.win { border-color: rgba(70,211,154,.55); }
.pl-opt .pl-c { position: relative; flex: none; display: flex; align-items: baseline; gap: 8px; font: 600 14px var(--mono); }
.pl-opt .pl-c small { color: var(--t3); font-size: 12px; font-weight: 500; }
.pollc .pl-st { margin: 0; color: var(--t3); font-size: 13px; line-height: 1.45; }
.pollc .pl-st b { color: var(--t1); font-weight: 600; }
.hpoll .pollc { border-color: var(--t3); }
.pollpg .pl-slot { max-width: 640px; }
.pollpg .pl-past { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.pubpoll .pubpoll-in { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.pubpoll .pl-who .row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.admpolls .pl-new { display: flex; flex-direction: column; gap: 14px; padding: 16px; max-width: 640px; }
.admpolls .fld { display: flex; flex-direction: column; gap: 6px; }
.admpolls .fld > span { font-size: 13px; color: var(--t2); font-weight: 600; }
.admpolls textarea.field { height: auto; padding: 10px 12px; resize: vertical; font: inherit; }
.admpolls .po-list { display: flex; flex-direction: column; gap: 6px; }
.admpolls .po-row { display: flex; gap: 6px; }
.admpolls .po-row .field { flex: 1; min-width: 0; }
.admpolls .po-add { align-self: flex-start; }
.admpolls .pl-apo, .admpolls .pl-past { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.admpolls .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 640px) { .pollc { padding: 14px; } .pollc .pl-q { font-size: 18px; } .admpolls .field { font-size: 16px; } }

/* the front door's funnel and sources (Founder > Analytics, 2026-10-21) */
.ax-sub { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t2); margin: 16px 0 6px; }
.ax-rv small { color: var(--t3, #8a8a96); margin-left: 4px; }
.cosheet .co-open { color: var(--t1); text-decoration: underline; text-underline-offset: 2px; }

/* Send to a collector: type a name, pick one (no default) */
.sendbox .q { flex: 1 1 100%; }
.sendbox .sendpick { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.sendbox .sendpick:empty { display: none; }
.sendbox .sendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 100%; }

/* the Pulped leaderboard's top 10, on their profiles: #1 Unique, #2-3 Legend, #4-10 Chase */
.pbadges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
/* a pill of its own (Darkroom made tier pills plain words, so the #1 glow lit a bare box round the text) */
.tierpill.pulpb { height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--t) 50%, transparent); background: color-mix(in srgb, var(--t) 11%, transparent); font: 600 13px var(--sans); text-decoration: none; }
.tierpill.pulpb.t-unique { --t: var(--r5); box-shadow: 0 0 14px var(--r5-g); }
.tierpill.pulpb svg { width: 13px; height: 13px; }
/* a whole drop finished (app.js dropBadges): Legend's colour, as Pulper #2-3 */
.tierpill.pulpb.dropb { white-space: nowrap; }
/* a Host (app.js hostBadge, the growth plan's idea 5): Core's, Chase's or Legend's colour by its level */
.tierpill.pulpb.hostb { white-space: nowrap; }
/* becoming a Host, under the codes on Invite friends (app/views/pages.js invites) */
.hostline { max-width: 640px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--rs); color: var(--t2); }
.hostline b { color: var(--t1); }
/* a print full screen: the art alone on black, as large as fits (the browser's full screen, or the page's on an iPhone) */
.artfs { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.artfs .showpiece { width: min(100vw, 100vh - 64px); width: min(100vw, 100dvh - 64px); }
.artfs .showpiece:has(.frame.turned) { width: min(86vw, 100dvh - 120px); }
.artfs .frame { border-radius: 0; }
.artfs .playhint { margin-top: 12px; }
.artfs .fsx { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 3; color: var(--t1); background: rgba(255,255,255,.08); }
body.fs-open { overflow: hidden; }
/* the stamp album's ranking */
.strk-me { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--rs); }
.crow.strow { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; color: inherit; text-decoration: none; }
.crow.strow .rk { text-align: left; font-family: var(--mono); color: var(--t2); }
.crow.strow .cname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crow.strow .sav { flex: none; display: grid; }
.crow.strow .cn { display: flex; flex-direction: column; min-width: 0; }
.crow.strow .pg b { font-size: 16px; }
.crow.strow.me { background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* a swap row's collector: here today, and swaps done */
.frw .fwact { display: block; font-size: 11.5px; line-height: 1.3; color: var(--t3, var(--dim)); }
.frw .fwact .fwon { color: var(--up); font-weight: 600; }
/* a print's origin: its drop and the day it was made (#120) */
.pd-info .porig { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -6px 0 16px; color: var(--t3); font-size: 13px; }
.pd-info .porig b { color: var(--t1); font-weight: 600; }
/* the Album's gift history (Trade tab): the stamp, who sent it, when */
.gifth { margin-top: 18px; }
.gifth .gfl { display: grid; gap: 2px; padding: 4px 0 8px; }
.gifth .gfr { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.gifth .gfs { font: 600 12px var(--mono); color: var(--t2); }
.gifth .gfn { display: grid; min-width: 0; }
.gifth .gfn b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gifth .gfn small { color: var(--t3); }
/* prints.wtf/pyx: Pyx Online's own site (the founder, 2026-10-23: "revamp the page, use amazing animated site, it should
   look like a game's site"; then "Build it"): the game's night-glass colours and its three pixel fonts (whole-pixel sizes:
   Title 15, Main 9, Small 5), every class pyxs-, so nothing of prints' own moves */
/* Draft of prints.wtf/pyx, the revamp (the founder, 2026-10-23: "use amazing animated site, it should look like a game's
   site"). The game's own night-glass colours and its three pixel fonts (sized in whole pixels: Title 15, Main 9, Small 5).
   Everything is scoped under .pyxs so it drops into prints' page as it stands. */
@font-face { font-family: 'Pyx Title'; src: url(/fonts/pyx/Pyx_Title.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Pyx Main'; src: url(/fonts/pyx/Pyx_Main.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Pyx Small'; src: url(/fonts/pyx/Pyx_Small.ttf) format('truetype'); font-display: swap; }
.pyxs {
  --ink: #0d0915; --ink1: #15101f; --ink2: #241b33; --ink3: #36294a; --plum: #2a1a54;
  --mute: #b592e8; --faint: #6341a6; --pale: #e8e0f0; --sand: #e4d3a8;
  --gold: #fbc741; --gold-hi: #fde98a; --gold-lo: #d4731f; --brass: #a34a1c; --blood: #e2434b; --glass: #4cc9f0;
  --title: 'Pyx Title', Georgia, serif; --main: 'Pyx Main', ui-monospace, monospace; --small: 'Pyx Small', ui-monospace, monospace;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--pale); font: 17px/1.6 var(--body); background: var(--ink); overflow: hidden; overflow: clip; position: relative;
  margin-bottom: -40px;
  -webkit-font-smoothing: none;
}
.pyxs * { box-sizing: border-box; }
.pyxs img, .pyxs canvas { display: block; max-width: 100%; image-rendering: pixelated; }
.pyxs p { margin: 0; }
.pyxs h1, .pyxs h2, .pyxs h3 { margin: 0; font-weight: normal; }
.pyxs .pyxs-w { max-width: 1180px; margin: 0 auto; padding: 0 22px; position: relative; }
/* a faint dither over everything, as the game's own cards have */
.pyxs::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50; opacity: .05;
  background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

/* type */
.pyxs-k { font: 18px/1 var(--main); color: var(--mute); letter-spacing: 2px; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; }
.pyxs-k::before { content: ''; width: 18px; height: 3px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.pyxs-h2 { font: 45px/1.05 var(--title); color: var(--gold-hi); text-shadow: 0 3px 0 var(--brass), 0 0 26px rgba(251,199,65,.25); }
.pyxs-lede { color: var(--sand); font-size: clamp(17px, 1.8vw, 20px); max-width: 32em; }
.pyxs-dim { color: var(--mute); }
.pyxs-gold { color: var(--gold); }

/* the button: an engraved brass plate, a shine passing over it */
.pyxs-plate { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 30px;
  font: 18px/1 var(--main); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo)); border: 3px solid var(--gold-hi);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold-lo), 0 8px 0 3px #07050b, 0 0 40px rgba(251,199,65,.35);
  transition: transform .12s, box-shadow .12s, filter .2s; }
.pyxs-plate::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shine 3.6s ease-in-out infinite; }
.pyxs-plate:hover { filter: brightness(1.08); }
.pyxs-plate:active { transform: translateY(5px); box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold-lo), 0 3px 0 3px #07050b, 0 0 40px rgba(251,199,65,.35); }
.pyxs-plate svg { width: 22px; height: 22px; }
@keyframes shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* ---------------------------------------------------------------- the title screen */
.pyxs-hero { position: relative; min-height: min(calc(100svh - 64px), 940px); display: grid; align-items: center; isolation: isolate; }
.pyxs-hero .pyxs-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #120d1c; }
.pyxs-hero .pyxs-bg .pyxs-art { position: absolute; right: 0; top: -4%; height: 108%; aspect-ratio: 620 / 544; background: url(/img/pyx/hero.webp) center / 100% 100% no-repeat;
  image-rendering: pixelated; transform: translate3d(calc(var(--ax, 0%) + var(--mx, 0) * -14px), calc(var(--my, 0) * -9px), 0); transition: transform .6s ease-out; }
.pyxs-hero .pyxs-bg .pyxs-fade { position: absolute; inset: 0; background:
  linear-gradient(90deg, #0d0915 0%, rgba(13,9,21,.92) 30%, rgba(13,9,21,.35) 58%, rgba(13,9,21,.05) 80%),
  linear-gradient(0deg, #0d0915 0%, transparent 28%); }
/* the window's light, and the two candles breathing */
.pyxs-hero .pyxs-beam { position: absolute; z-index: -1; right: 18%; top: -10%; width: 60%; height: 140%; transform: rotate(28deg); transform-origin: top right;
  background: linear-gradient(90deg, transparent, rgba(181,146,232,.10) 40%, rgba(253,233,138,.08) 60%, transparent); filter: blur(6px); animation: beam 9s ease-in-out infinite; pointer-events: none; }
@keyframes beam { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pyxs-hero .pyxs-candle { position: absolute; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(253,233,138,.38), rgba(251,199,65,.12) 35%, transparent 70%); animation: flick 1.7s steps(6) infinite; }
@keyframes flick { 0% { opacity: .75; transform: scale(1); } 20% { opacity: 1; } 40% { opacity: .82; transform: scale(1.05); } 60% { opacity: .95; } 80% { opacity: .7; transform: scale(.97); } 100% { opacity: .9; } }
.pyxs-hero > .pyxs-w { width: 100%; }
.pyxs-hero canvas.pyxs-motes { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.pyxs-hero .pyxs-copy { position: relative; z-index: 2; display: grid; gap: 26px; padding: 70px 0 90px; max-width: 620px; }
.pyxs-logo { display: grid; gap: 6px; }
.pyxs-logo .pyxs-pyx { font: 150px/.9 var(--title); letter-spacing: 6px; background: linear-gradient(180deg, #fff6c8 0%, var(--gold-hi) 25%, var(--gold) 55%, var(--gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 #5a2410) drop-shadow(0 0 30px rgba(251,199,65,.35)); }
.pyxs-logo .pyxs-online { display: flex; align-items: center; gap: 14px; font: 36px/1 var(--main); letter-spacing: 14px; color: var(--gold); }
.pyxs-logo .pyxs-online::after { content: ''; flex: 0 0 140px; height: 3px; background: var(--gold-lo); }
.pyxs-logo .pyxs-tale { font: 18px/1 var(--main); letter-spacing: 3px; color: var(--mute); text-transform: uppercase; }
.pyxs-logo > * { opacity: 0; transform: translateY(16px); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
.pyxs-logo .pyxs-online { animation-delay: .25s; } .pyxs-logo .pyxs-tale { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.pyxs-hero .pyxs-lede { opacity: 0; animation: rise .9s .65s forwards; }
.pyxs-hero .pyxs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; opacity: 0; animation: rise .9s .85s forwards; }
.pyxs-press { font: 18px/1 var(--main); color: var(--sand); letter-spacing: 1px; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pyxs-hud { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 34px; justify-content: start; padding-top: 6px; opacity: 0; animation: rise .9s 1.05s forwards; }
.pyxs-hud div { display: grid; gap: 6px; }
.pyxs-hud b { font: 30px/1 var(--title); color: var(--pale); }
.pyxs-hud span { font: 10px/1.2 var(--small); color: var(--mute); text-transform: uppercase; letter-spacing: 1px; }
.pyxs-scrollcue { position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 10px var(--small); color: var(--mute); letter-spacing: 2px; text-transform: uppercase; }
.pyxs-scrollcue svg { width: 26px; height: 26px; animation: ding 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ding { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(16deg); } 76% { transform: rotate(-12deg); } 84% { transform: rotate(7deg); } 92% { transform: rotate(-3deg); } }

/* the stair ticker under the hero */
.pyxs-ticker { border-block: 3px solid var(--ink3); background: linear-gradient(90deg, var(--ink1), var(--plum), var(--ink1)); overflow: hidden; }
.pyxs-ticker .pyxs-run { display: flex; gap: 56px; width: max-content; padding: 16px 0; animation: run 40s linear infinite; font: 18px/1 var(--main); color: var(--sand); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.pyxs-ticker .pyxs-run span { display: inline-flex; align-items: center; gap: 14px; }
.pyxs-ticker .pyxs-run i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--gold); }
.pyxs-ticker .pyxs-clock { color: var(--gold-hi); }
@keyframes run { to { transform: translateX(-50%); } }

/* sections */
.pyxs-sec { padding: 120px 0; position: relative; }
/* the season, once it's open (app.js pyxPage, server.js GET /api/pyx/season) */
.pyxs-season { background: radial-gradient(80% 60% at 50% 0%, rgba(251,199,65,.10), transparent 70%); }
.pyxs-spts { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pyxs-spts li { display: grid; gap: 4px; padding: 14px 16px; border: 2px solid var(--gold-lo); background: rgba(8,6,14,.6); }
.pyxs-spts b { font: 20px/1.1 var(--main); color: var(--gold-hi); }
.pyxs-spts span { color: var(--sand); font-size: 15px; }
.pyxs-sch { margin: 0 0 30px; }
.pyxs-sact { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pyxs-guide { display: inline-block; padding: 4px 0; font: 20px/1.1 var(--main); color: var(--gold-hi); text-decoration: underline; text-underline-offset: 4px; }
.pyxs-guide:hover, .pyxs-guide:focus-visible { color: #fff; }
/* the season's guide (app.js pyxGuideHtml, prints.wtf/pyx/guide): the page's sections, closer together, one column */
.pyxs-sec.pyxs-ghead { padding: 80px 0 20px; background: radial-gradient(80% 70% at 50% 0%, rgba(251,199,65,.12), transparent 70%); }
.pyxs-ghead .pyxs-h2 { font-size: 62px; }
.pyxs-gnav { display: flex; flex-wrap: wrap; gap: 10px; }
.pyxs .pyxs-gt > .pyxs-gnav { margin-top: 34px; }
.pyxs-gnav button { appearance: none; cursor: pointer; font: 16px/1 var(--main); letter-spacing: 1px; text-transform: uppercase; color: var(--gold-hi); background: rgba(8,6,14,.6); border: 2px solid var(--gold-lo); padding: 10px 14px; }
.pyxs-gnav button:hover, .pyxs-gnav button:focus-visible { background: var(--ink2); color: #fff; }
.pyxs-sec.pyxs-gsec { padding: 60px 0; }
.pyxs .pyxs-gt { max-width: 860px; }
.pyxs .pyxs-gt > * + * { margin-top: 24px; }
.pyxs-gt .pyxs-sh { margin-bottom: 30px; }
.pyxs-gt .pyxs-sh h2:focus { outline: none; }
.pyxs-nw { white-space: nowrap; }
.pyxs-ghead .pyxs-k { line-height: 1.35; }
.pyxs-gt p { color: var(--sand); }
.pyxs-gt p b { color: var(--pale); font-weight: 600; }
.pyxs-gt p b.pyxs-gold { color: var(--gold); }
.pyxs-gt a, .pyxs-gend a, .pyxs-glink { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.pyxs-glink { appearance: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.pyxs-gfig { margin: 0; display: grid; gap: 12px; }
.pyxs-gfig .pyxs-frame img { height: auto; }
.pyxs-gfig figcaption { color: var(--sand); font: 16px/1.35 var(--main); letter-spacing: 1px; }
.pyxs-key { display: inline-block; padding: 1px 7px 0; border: 2px solid var(--ink3); border-bottom-width: 4px; background: #07050b; color: var(--gold-hi); font: 16px/1.3 var(--main); white-space: nowrap; }
.pyxs-cmd { display: inline-block; padding: 1px 7px; border: 2px solid var(--ink3); background: #07050b; color: var(--gold-hi); font: 15px/1.4 ui-monospace, Consolas, 'Courier New', monospace; text-transform: none; white-space: nowrap; -webkit-font-smoothing: auto; }
.pyxs-spts.pyxs-gc4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.pyxs-gc4 li { align-content: start; }
.pyxs-gc4 span b { font: inherit; color: var(--pale); font-weight: 600; }
.pyxs-lectern.pyxs-gtip { padding: 20px 24px; }
.pyxs-tiers { display: flex; flex-wrap: wrap; gap: 10px; }
.pyxs-tiers span { --t: var(--pale); font: 18px/1 var(--main); color: var(--t); padding: 8px 12px; border: 2px solid var(--t); background: rgba(8,6,14,.6); box-shadow: 0 0 12px color-mix(in srgb, var(--t) 35%, transparent); }
.pyxs-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 14px; }
.pyxs-steps li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 12px; color: var(--sand); }
.pyxs-steps li::before { content: counter(st); font: 22px/1.2 var(--main); color: var(--gold); text-shadow: 0 0 10px rgba(251,199,65,.5); }
.pyxs-steps b { color: var(--pale); font-weight: 600; }
.pyxs-end.pyxs-gend { padding: 90px 0 110px; }
/* the story guide (app.js pyxStoryHtml, /pyx/story): zeldalike's page is built on /pyx/guide's own classes; its own
   rules here, kept to this page (from its style block, as written), and a part reached by a link lights a moment */
.pyxs-story-pg .pyxs-gnav a { appearance:none;cursor:pointer;font:16px/1 var(--main);letter-spacing:1px;text-transform:uppercase;color:var(--gold-hi);background:rgba(8,6,14,.6);border:2px solid var(--gold-lo);padding:10px 14px;text-decoration:none }
.pyxs-story-pg .pyxs-gnav a:hover, .pyxs-story-pg .pyxs-gnav a:focus-visible { background:var(--ink2);color:#fff }
.pyxs-story-pg .pyxs-gt p.pyxs-note { color:var(--mute);font-size:15px }
.pyxs-story-pg .pyxs-toc .pyxs-k { margin-bottom:4px }
.pyxs-story-pg .pyxs-toc details { border-top:2px solid var(--ink3);padding:12px 0 10px }
.pyxs-story-pg .pyxs-toc details:first-of-type { border-top:0 }
.pyxs-story-pg .pyxs-toc summary { cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;font:20px/1.2 var(--main);color:var(--gold-hi);letter-spacing:1px;text-transform:uppercase }
.pyxs-story-pg .pyxs-toc summary::-webkit-details-marker { display:none }
.pyxs-story-pg .pyxs-toc summary::before { content:'+';color:var(--gold);width:14px;flex:none }
.pyxs-story-pg .pyxs-toc details[open] summary::before { content:'-' }
.pyxs-story-pg .pyxs-toc summary small { font:16px var(--main);color:var(--mute) }
.pyxs-story-pg .pyxs-toc p { margin:10px 0 0 26px;font-size:15px }
.pyxs-story-pg .pyxs-toc ol { margin:8px 0 2px 26px;padding:0 0 0 1.2em;columns:2;column-gap:28px;color:var(--mute) }
.pyxs-story-pg .pyxs-toc li { break-inside:avoid;margin:.2em 0;font-size:16px }
.pyxs-story-pg .pyxs-toc a, .pyxs-story-pg .pyxs-top a { color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px }
.pyxs-story-pg .pyxs-gt > .pyxs-h3 { font:30px/1.12 var(--title);color:var(--gold);text-shadow:0 2px 0 var(--brass);margin-top:64px;padding-top:26px;border-top:2px solid var(--ink3) }
.pyxs-story-pg .pyxs-gt > .pyxs-h4 { font:20px/1.2 var(--main);color:var(--gold-hi);letter-spacing:1px;text-transform:uppercase;margin-top:30px }
.pyxs-story-pg .pyxs-h2, .pyxs-story-pg .pyxs-h3, .pyxs-story-pg .pyxs-h4, .pyxs-story-pg .pyxs-gsec { scroll-margin-top:14px }
.pyxs-story-pg .pyxs-gt > .pyxs-h3:target { color:var(--gold-hi);border-top-color:var(--gold) }
.pyxs-story-pg .pl { font:20px var(--main);color:var(--mute);text-decoration:none;text-shadow:none;margin-left:6px;opacity:0;transition:opacity .15s }
.pyxs-story-pg .pyxs-h2:hover .pl, .pyxs-story-pg .pyxs-h3:hover .pl, .pyxs-story-pg .pyxs-h4:hover .pl, .pyxs-story-pg .pl:focus { opacity:1 }
@media (hover:none) { .pyxs-story-pg .pl { opacity:.5 } }
.pyxs-story-pg .pl.ok::after { content:' copied';font-size:15px;color:var(--glass) }
.pyxs-story-pg .pyxs-gt i { color:var(--pale) }
.pyxs-story-pg .pyxs-gt li b { color:var(--pale);font-weight:600 }
.pyxs-story-pg .pyxs-gt li a { color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px }
.pyxs-story-pg .pyxs-ol { list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:n }
.pyxs-story-pg .pyxs-ol li { display:grid;grid-template-columns:30px 1fr;gap:10px;color:var(--sand);counter-increment:n }
.pyxs-story-pg .pyxs-ol li::before { content:counter(n);font:20px/1.45 var(--main);color:var(--gold);text-align:right }
.pyxs-story-pg .pyxs-gt > .pyxs-top { font-size:15px;margin-top:40px }
.pyxs-story-pg .pyxs-foot { text-align:center;color:var(--mute);font-size:15px;padding:30px 22px 60px }
.pyxs-story-pg .pyxs-foot a { color:var(--gold-hi) }
@media (max-width:900px) { .pyxs-story-pg .pyxs-gt > .pyxs-h3 { font-size:25px;margin-top:48px } }
@media (max-width:600px) { .pyxs-story-pg .pyxs-toc ol { columns:1 } .pyxs-story-pg .pyxs-w { padding:0 18px } }
.pyxs-story-pg .lit { animation: lith 1.8s ease-out; }
@keyframes lith { 0%, 30% { background: rgba(251,199,65,.16); } 100% { background: transparent; } }
.pyxs-gend .pyxs-ring { top: 90px; }
.pyxs-gend .pyxs-dim { font-size: 15px; }
@media (max-width: 900px) { .pyxs-sec.pyxs-ghead { padding-top: 50px; } .pyxs-ghead .pyxs-h2 { font-size: 36px; } .pyxs-sec.pyxs-gsec { padding: 44px 0; } }
@media (max-width: 560px) { .pyxs-spts.pyxs-gc4 { grid-template-columns: 1fr; } }
.pyxs-sch ol { margin: 10px 0 0; padding-left: 22px; color: var(--sand); font-size: 17px; display: grid; gap: 4px; }
.pyxs-sh { display: grid; gap: 18px; margin-bottom: 52px; max-width: 760px; }
[data-r] { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
[data-r].pyxs-in { opacity: 1; transform: none; }

/* a frame for the game's screens: dark inset, a brass edge, corner rivets */
.pyxs-frame { position: relative; padding: 6px; background: var(--ink2); border: 3px solid #07050b; box-shadow: 0 0 0 2px var(--brass), 0 10px 0 0 #07050b, 0 20px 50px rgba(0,0,0,.6); }
.pyxs-frame::before, .pyxs-frame::after { content: ''; position: absolute; width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 6px var(--gold); top: -6px; left: -6px; }
.pyxs-frame::after { left: auto; right: -6px; }
.pyxs-frame .pyxs-scr { overflow: hidden; position: relative; background: #000; }
.pyxs-frame img { width: 100%; height: 100%; object-fit: cover; }

/* the six lands: the map unrolls, each land a window that pans slowly */
.pyxs-lands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; counter-reset: land; }
.pyxs-land { display: grid; gap: 14px; align-content: start; }
.pyxs-land .pyxs-scr { aspect-ratio: 1248 / 576; }
.pyxs-land .pyxs-scr img { animation: pan 18s ease-in-out infinite alternate; animation-delay: var(--pd, 0s); transform-origin: var(--po, 50% 50%); }
.pyxs-land:hover .pyxs-scr img { animation-duration: 6s; }
@keyframes pan { from { transform: scale(1.06) translate(-1.5%, 0); } to { transform: scale(1.14) translate(1.5%, -1%); } }
.pyxs-land .pyxs-scr::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,9,21,.75), transparent 45%); }
.pyxs-land .pyxs-no { position: absolute; left: 12px; bottom: 8px; z-index: 2; font: 45px/1 var(--title); color: var(--gold); text-shadow: 0 3px 0 #5a2410; }
.pyxs-land h3 { font: 30px/1 var(--title); color: var(--pale); display: flex; align-items: center; gap: 10px; }
.pyxs-land h3 svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.pyxs-land p { color: var(--sand); font-size: 16px; }
.pyxs-lands .path { grid-column: 1 / -1; height: 3px; background: repeating-linear-gradient(90deg, var(--gold-lo) 0 9px, transparent 9px 18px); opacity: .5; }

/* the bosses: a boss card as the game opens a fight: the name on a plate, the bar filling */
.pyxs-bosses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pyxs-boss { display: grid; gap: 14px; cursor: crosshair; }
.pyxs-boss .pyxs-scr { aspect-ratio: 1248 / 576; }
.pyxs-boss .pyxs-flash { position: absolute; inset: 0; background: var(--blood); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.pyxs-boss.pyxs-hit .pyxs-frame { animation: shake .32s steps(4); }
.pyxs-boss.pyxs-hit .pyxs-flash { animation: flash .32s steps(2); }
@keyframes shake { 0% { transform: translate(0); } 25% { transform: translate(-6px, 2px); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-3px, 1px); } 100% { transform: none; } }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }
.pyxs-nameplate { display: grid; gap: 8px; }
.pyxs-nameplate b { font: 27px/1 var(--main); color: var(--pale); letter-spacing: 1px; }
.pyxs-hp { height: 14px; background: #07050b; border: 2px solid var(--ink3); position: relative; }
.pyxs-hp i { position: absolute; inset: 1px auto 1px 1px; width: 0; background: linear-gradient(180deg, #ff7b82, var(--blood) 50%, #8a1820); transition: width 1.6s steps(24); box-shadow: 0 0 10px rgba(226,67,75,.6); }
.pyxs-hp u { position: absolute; inset: 1px auto 1px 1px; width: 0; background: #fff; opacity: .7; transition: width .9s .25s; text-decoration: none; }
.pyxs-in .pyxs-hp i, .pyxs-in .pyxs-hp u { width: calc(var(--hp, 100%) - 2px); }
.pyxs-boss figcaption { color: var(--sand); font-size: 16px; }
.pyxs-boss .pyxs-tag { font: 10px var(--small); color: var(--blood); letter-spacing: 2px; text-transform: uppercase; }

/* the Deep Stair: you go down as you read */
.pyxs-stair { background: linear-gradient(180deg, var(--ink), #07050b 70%, var(--ink)); }
.pyxs-stair .pyxs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.pyxs-stair .pyxs-sticky { position: sticky; top: 96px; display: grid; gap: 18px; }
.pyxs-stair .pyxs-scr { aspect-ratio: 1248 / 576; }
.pyxs-stair .pyxs-scr img { position: absolute; inset: 0; transition: opacity .8s; }
.pyxs-depth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pyxs-depth span { font: 18px/1 var(--main); text-align: center; padding: 12px 0; border: 2px solid var(--ink3); color: var(--faint); background: var(--ink1); transition: all .4s; }
.pyxs-depth span.pyxs-on { color: var(--ink); background: var(--gold); border-color: var(--gold-hi); box-shadow: 0 0 22px rgba(251,199,65,.45); }
.pyxs-floors { display: grid; gap: 34vh; padding: 10vh 0 20vh; }
.pyxs-floor { display: grid; gap: 14px; }
.pyxs-floor .pyxs-fl { font: 18px var(--main); color: var(--gold); letter-spacing: 2px; text-transform: uppercase; }
.pyxs-floor h3 { font: 30px/1.1 var(--title); color: var(--pale); }
.pyxs-floor p { color: var(--sand); }
.pyxs-countdown { display: inline-flex; align-items: baseline; gap: 12px; padding: 14px 18px; border: 2px solid var(--ink3); background: var(--ink1); }
.pyxs-countdown b { font: 36px/1 var(--main); color: var(--gold-hi); letter-spacing: 2px; }
.pyxs-countdown span { font: 10px var(--small); color: var(--mute); text-transform: uppercase; letter-spacing: 2px; }

/* together: the square, with what people say in it */
.pyxs-together .pyxs-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.pyxs-together .pyxs-stage { position: relative; }
.pyxs-together .pyxs-scr { aspect-ratio: 1248 / 576; }
.pyxs-bub { position: absolute; z-index: 3; font: 18px/1.2 var(--main); color: #1b1324; background: var(--pale); padding: 10px 14px; border: 3px solid #07050b; box-shadow: 0 5px 0 #07050b;
  opacity: 0; transform: translateY(10px) scale(.9); animation: bub 9s infinite; white-space: nowrap; }
.pyxs-bub::after { content: ''; position: absolute; bottom: -12px; left: 18px; border: 6px solid transparent; border-top: 6px solid #07050b; border-left: 6px solid #07050b; }
.pyxs-bub.pyxs-r::after { left: auto; right: 18px; border-left-color: transparent; border-right: 6px solid #07050b; }
@keyframes bub { 0%, 4% { opacity: 0; transform: translateY(10px) scale(.9); } 8%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-8px); } }
.pyxs-hearts { position: absolute; inset: 0; pointer-events: none; }
.pyxs-hearts i { position: absolute; bottom: 20%; width: 12px; height: 12px; background: var(--blood); clip-path: polygon(50% 100%, 0 40%, 0 15%, 25% 0, 50% 18%, 75% 0, 100% 15%, 100% 40%); animation: heart 4s ease-out infinite; opacity: 0; }
@keyframes heart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-140px) scale(1.2); } }
.pyxs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pyxs-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--sand); }
.pyxs-list li::before { content: ''; width: 9px; height: 9px; margin-top: 9px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 8px var(--gold); }
.pyxs-list b { color: var(--pale); font-weight: 600; }

/* with prints: the sign-in, on a lectern */
.pyxs-withprints { background: radial-gradient(60% 70% at 70% 50%, rgba(42,26,84,.75), transparent 70%); }
.pyxs-withprints .pyxs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pyxs-lectern { background: linear-gradient(180deg, var(--ink2), var(--ink1)); border: 3px solid #07050b; box-shadow: 0 0 0 2px var(--brass), 0 12px 0 0 #07050b, 0 0 60px rgba(251,199,65,.12); padding: 30px; display: grid; gap: 20px; }
.pyxs-lectern .pyxs-pay { font-size: 18px; }
.pyxs-coin { display: inline-block; width: 14px; height: 14px; margin: 0 3px -1px 0; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--gold); animation: coin 2.4s ease-in-out infinite; }
@keyframes coin { 50% { transform: rotate(45deg) scale(1.25); box-shadow: 0 0 18px var(--gold-hi); } }
.pyxs-seals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pyxs-seals li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #0f0b17; border: 2px solid var(--ink3); font: 18px/1 var(--main); color: var(--sand); }
.pyxs-seals li::before { content: ''; width: 14px; height: 14px; flex: none; border: 2px solid var(--faint); transform: rotate(45deg); }
.pyxs-seals li em { margin-left: auto; font: 18px var(--main); font-style: normal; color: var(--gold); }

/* questions */
.pyxs-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.pyxs-faq details { border: 2px solid var(--ink3); background: var(--ink1); padding: 0 20px; }
.pyxs-faq summary { list-style: none; cursor: pointer; padding: 20px 0; font: 27px/1.1 var(--main); color: var(--pale); display: flex; justify-content: space-between; gap: 16px; }
.pyxs-faq summary::-webkit-details-marker { display: none; }
.pyxs-faq summary::after { content: '+'; color: var(--gold); }
.pyxs-faq details[open] summary::after { content: '-'; }
.pyxs-faq details p { padding: 0 0 20px; color: var(--sand); }

/* the end */
.pyxs-end { text-align: center; padding: 140px 0 160px; position: relative; overflow: hidden; }
.pyxs-end canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pyxs-end .pyxs-w { display: grid; gap: 30px; justify-items: center; }
.pyxs-end .pyxs-bell { width: 90px; height: 90px; color: var(--gold); filter: drop-shadow(0 0 24px rgba(251,199,65,.6)); animation: ding 3s ease-in-out infinite; transform-origin: 50% 10%; }
.pyxs-ring { position: absolute; left: 50%; top: 140px; width: 90px; height: 90px; margin-left: -45px; border: 3px solid var(--gold); border-radius: 50%; opacity: 0; animation: ring 3s ease-out infinite; }
.pyxs-ring.pyxs-b { animation-delay: .3s; }
@keyframes ring { 0%, 60% { opacity: 0; transform: scale(1); } 64% { opacity: .8; } 100% { opacity: 0; transform: scale(5); } }
.pyxs-end .pyxs-h2 { font-size: 75px; }


@media (max-width: 900px) {
  .pyxs-logo .pyxs-pyx { font-size: 105px; } .pyxs-logo .pyxs-online { font-size: 27px; letter-spacing: 10px; } .pyxs-logo .pyxs-online::after { flex-basis: 70px; }
  .pyxs-hero .pyxs-bg .pyxs-art { right: auto; left: 50%; top: 0; height: 58%; --ax: -50%; }
  .pyxs-hero .pyxs-bg .pyxs-fade { background: linear-gradient(0deg, #0d0915 0%, rgba(13,9,21,.86) 45%, rgba(13,9,21,.25) 100%); }
  .pyxs-hero .pyxs-copy { padding-top: 38vh; padding-bottom: 80px; }
  .pyxs-hud { grid-template-columns: repeat(2, auto); row-gap: 22px; }
  .pyxs-countdown { flex-wrap: wrap; }
  .pyxs-lands, .pyxs-bosses { grid-template-columns: 1fr 1fr; }
  .pyxs-stair .pyxs-grid, .pyxs-together .pyxs-grid, .pyxs-withprints .pyxs-grid { grid-template-columns: 1fr; gap: 36px; }
  .pyxs-stair .pyxs-sticky { position: relative; top: 0; }
  .pyxs-floors { gap: 60px; padding: 20px 0; }
  .pyxs-faq { grid-template-columns: 1fr; }
  .pyxs-sec { padding: 80px 0; }
  .pyxs-h2 { font-size: 30px; }
  .pyxs-end .pyxs-h2 { font-size: 45px; }
}
@media (max-width: 560px) {
  .pyxs-lands, .pyxs-bosses, .pyxs-seals { grid-template-columns: 1fr; }
  .pyxs-logo .pyxs-pyx { font-size: 90px; }
  .pyxs-plate { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pyxs *, .pyxs *::before, .pyxs *::after { animation: none !important; transition: none !important; }
  .pyxs-logo > *, .pyxs-hero .pyxs-lede, .pyxs-hero .pyxs-cta, .pyxs-hud, [data-r] { opacity: 1 !important; transform: none !important; }
}
.pyxs-won::before { background: var(--gold); border-color: var(--gold-hi) !important; box-shadow: 0 0 10px var(--gold); }
.pyxs-seals li.pyxs-won { color: var(--gold-hi); border-color: var(--gold-lo); }
/* the game's clips (zeldalike's, from the build before Season 1) */
.pyxs video.pyxs-v { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; background: #07050b; }
.pyxs-stair .pyxs-scr video { position: absolute; inset: 0; transition: opacity .8s; }
.pyxs-boss .pyxs-scr video, .pyxs-together .pyxs-scr video { aspect-ratio: 1248 / 576; }
.pyxs-feature { margin: 0 0 40px; display: grid; gap: 12px; }
.pyxs-feature .pyxs-scr { aspect-ratio: 1248 / 576; }
.pyxs-feature figcaption, .pyxs-phone figcaption { color: var(--sand); font: 18px/1.2 var(--main); letter-spacing: 1px; }
.pyxs-qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.pyxs-qa .pyxs-faq { grid-template-columns: 1fr; }
.pyxs-phone { margin: 0; display: grid; gap: 14px; justify-items: center; }
.pyxs-device { width: 100%; aspect-ratio: 956 / 440; padding: 14px 34px; border-radius: 34px; background: linear-gradient(180deg, #2a2236, #120d1c); border: 3px solid #07050b;
  box-shadow: 0 0 0 2px var(--ink3), 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.04); }
.pyxs-device video.pyxs-v { border-radius: 10px; }
@media (max-width: 900px) { .pyxs-qa { grid-template-columns: 1fr; } .pyxs-device { padding: 10px 22px; border-radius: 24px; } }
/* the Speed page (/admin/speed) */
.sp-t td { background: rgba(255,255,255,.035); }
.sp-t td:first-child { font-weight: 500; }
.sp-t .ax-d { font-size: 10.5px; margin-left: 4px; }
.sp-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-tw .sp-t { min-width: 560px; }
/* an address's #part, lit a moment (an offer opened from its notification). Its own name: "lit" is also what a card,
   the print page's frame, a pack and the streak card take while touched (their Foil sheen, the pack's tilt, the flame),
   and they all flashed this green ring with it (the founder, 2026-10-30, "this looks super bad") */
.hashlit { animation: hashlit 2.4s ease-out; border-radius: 14px; }
@keyframes hashlit { 0%, 30% { box-shadow: 0 0 0 2px var(--accent, #00f5a0), 0 0 24px rgba(0,245,160,.35); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* the profile's Low offers (core.js offerLow) */
.low-offers { margin: 10px 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.low-offers > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; }
.low-offers > summary::-webkit-details-marker { display: none; }
.low-offers > summary::before { content: "▸"; color: var(--dim); transition: transform .15s; }
.low-offers[open] > summary::before { transform: rotate(90deg); }
.low-offers .lo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px; }
.low-offers .offer { margin: 0 10px 10px; }
.lo-seg { margin-top: 8px; }

/* =====================================================================
   the nav on the leading edge for touch screens with room (iPhone Duo, iPads, phones on their side). Apple's
   guidance for iPhone Duo: a tab bar at the bottom in compact width; with regular width and height the tabs may
   lay out vertically or as a sidebar; a short, wide screen (the cover display set down like a tent, a phone in
   landscape) keeps its height for content; each safe-area inset on its own (system buttons can sit on one side).
   Keyed on the space and the pointer only, never the device or orientation:
   - a rail (icons over labels, 80 px): touch, 600 px wide or more (the inner display either way up, the cover
     display on its side, iPads), or short (under 520 px) and wider than tall (phones and the cover display in
     landscape: then 72 px, and a 48 px header)
   - a sidebar (icons beside labels): touch, 1100 px wide and 600 px tall or more (iPads in landscape)
   - narrower than that (phones and the cover display upright, Split View halves): the bottom tab bar, as before
   - a mouse or trackpad: the header's nav, as before
   ===================================================================== */
@media (pointer: coarse) and (min-width: 600px), (pointer: coarse) and (max-height: 519px) and (min-aspect-ratio: 1/1) {
  :root { --navw: 80px; --navx: calc(var(--navw) + env(safe-area-inset-left)); }
  body { padding-left: var(--navx); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
  body.locked { padding-left: env(safe-area-inset-left); }
  .top { height: calc(64px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  /* the rail: the full height of the screen, its tabs in the middle where a thumb holding the side reaches */
  nav { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; right: auto; width: var(--navx); height: auto; max-width: none; margin: 0; align-self: auto; justify-self: auto;
    display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; grid-auto-flow: unset;
    padding: calc(8px + env(safe-area-inset-top)) 6px calc(8px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    overflow-x: hidden; overflow-y: auto; border: 0; border-right: 1px solid var(--rule); border-radius: 0; background: var(--k0) !important; box-shadow: none; }
  nav a { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 60px; padding: 0; border-radius: var(--rc);
    font: 500 11px var(--sans); letter-spacing: .01em; color: var(--t3); text-align: center; white-space: nowrap; transition: color .25s, background .25s, transform .15s; }
  nav a svg, nav a .i { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; filter: none; transform: none; }
  nav a:hover { color: var(--t1); }
  nav a:active { transform: scale(.94); }
  nav a.on { color: var(--t1); background: var(--k2); }
  nav a.on svg, nav a.on .i { stroke-width: 2.1; filter: none; transform: none; }
  nav a.on::before { content: none; }
  .nav-pill { display: none; }
  #nav a.due span::after { content: none; }
  #nav a.due::after { content: ''; position: absolute; top: 9px; right: calc(50% - 17px); width: 7px; height: 7px; border-radius: 50%; background: var(--t1); box-shadow: 0 0 0 2px var(--k0); }
  /* what sat over the bottom tab bar comes down to the bottom edge, beside the rail */
  .toasts { left: calc(var(--navx) + 10px); right: calc(10px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; }
  .bidbar { left: calc(var(--navx) + 10px); right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bulkbar { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toppanel { right: calc(10px + env(safe-area-inset-right)); }
  .ov { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .x, .ov-box > .x { right: calc(12px + env(safe-area-inset-right)); }
  /* a full-bleed strip spans the content, not under the rail */
  .dr-strip { width: calc(100vw - var(--navx)); margin-left: calc(50% - 50vw + var(--navx) / 2); margin-right: calc(50% - 50vw + var(--navx) / 2); }
  /* a wide table scrolls in its place rather than widening the page */
  .ctable { overflow-x: auto; overscroll-behavior-x: contain; }
}
/* (a phone-width screen with the rail: its full-width panels start beside the rail) */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 640px), (pointer: coarse) and (max-width: 640px) and (max-height: 519px) and (min-aspect-ratio: 1/1) {
  .toppanel { left: calc(var(--navx) + 8px); }
  .toppanel.menu { left: auto; }
}
@media (pointer: coarse) and (max-height: 519px) and (min-aspect-ratio: 1/1) {
  :root { --navw: 72px; --hh: 48px; }
  .top { height: calc(48px + env(safe-area-inset-top)); }
  .brand { font-size: 20px; }
  nav { gap: 2px; }
  nav a { height: 52px; }
  .toppanel { top: calc(52px + env(safe-area-inset-top)); max-height: calc(100dvh - 64px); }
}
@media (pointer: coarse) and (min-width: 1100px) and (min-height: 600px) {
  :root { --navw: 220px; }
  nav { justify-content: flex-start; gap: 2px; padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  nav a { flex-direction: row; justify-content: flex-start; gap: 12px; height: 44px; padding: 0 12px; font: 500 15px var(--sans); letter-spacing: 0; }
  #nav a.due::after { content: none; }
  #nav a.due span::after { content: ''; }
}

/* =====================================================================
   Profile banners (app.js BN_SCENES, core.js BANNERS; the founder, 2026-10-25: "no uploads, they are all cosmetics that
   you can earn"): a band of pixel art across the top of a profile, the picture over its lower edge. Without one the
   head is as it was. In Settings, every banner in a grid, the ones not earned yet still and grey, with how
   ===================================================================== */
.pbanner { position: relative; margin: 24px 0 0; border-radius: var(--rc); overflow: hidden; background: var(--k0); -webkit-tap-highlight-color: transparent; }
.pbanner::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--rule2); pointer-events: none; }
.bnr { display: block; height: var(--bnh, 160px); overflow: hidden; }
.bnr canvas { display: block; image-rendering: pixelated; }
/* (a banner answers a finger: a sideways drag is the banner's, an up or down one still scrolls the page) */
.bnr:not([data-still]) { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pbanner .bn-tag { position: absolute; right: 10px; bottom: 9px; padding: 5px 6px; line-height: 0; border: 0; border-radius: 4px; background: rgba(11,11,12,.6); opacity: .8; cursor: pointer; }
.pbanner .bn-tag:hover, .pbanner .bn-tag:focus-visible { opacity: 1; background: rgba(11,11,12,.85); }
.prof.has-bn { margin-top: 0; align-items: flex-start; }
.prof.has-bn .orb { margin-top: -52px; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--k0), inset 0 0 0 1px var(--rule2); }
.prof.has-bn .grow { padding-top: 14px; }
.prof.has-bn .profside { align-self: flex-start; margin-top: 18px; }
@media (max-width: 640px) {
  .pbanner { margin-top: 14px; }
  .pbanner .bn-tag { right: 6px; bottom: 6px; }
  .prof.has-bn .orb { margin-top: -40px; box-shadow: 0 0 0 4px var(--k0), inset 0 0 0 1px var(--rule2); }
  .prof.has-bn .grow { padding-top: 0; }
  .prof.has-bn .profside { margin-top: 0; }
}
/* the picker: the one picked (or tapped) big and live at the top, then filters, then the grid */
.bn-prev { margin: 12px 0 16px; border-radius: var(--rs); overflow: hidden; background: var(--k1); box-shadow: inset 0 0 0 1px var(--rule); }
.bn-prev .bnr { background: var(--k0); }
.bn-pm { display: flex; gap: 12px; align-items: center; padding: 10px 12px 12px; }
.bn-pm b { font-size: 15px; font-weight: 600; }
.bn-pm small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--t3); margin-top: 2px; }
.bn-pm .bn-tip { color: var(--t2); }
.bn-filt { margin: 0 0 12px; }
.bn-tile.sel { box-shadow: inset 0 0 0 2px var(--t3); }
.bn-head { margin: 4px 0 10px; color: var(--t1); }
.bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bn-tile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0 0 10px; min-width: 0; border: 0; border-radius: var(--rs); background: var(--k1); color: var(--t1); font: inherit; text-align: left; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.bn-tile .bnr, .bn-tile .bn-blank { --bnh: 80px; margin-bottom: 8px; background: var(--k0); }
.bn-tile .bn-blank { height: 80px; }
.bn-tile .bn-blank { display: block; background: repeating-linear-gradient(135deg, var(--k0) 0 6px, var(--k1) 6px 7px); }
.bn-tile b { padding: 0 10px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.bn-tile small { padding: 0 10px; font-size: 12.5px; line-height: 1.35; color: var(--t3); }
.bn-tile .bn-n { color: var(--t2); font-variant-numeric: tabular-nums; }
.bn-tile:hover { box-shadow: inset 0 0 0 1px var(--rule2); }
.bn-tile.on { box-shadow: inset 0 0 0 2px var(--t1); }
.bn-tile.on b::after { content: 'On your profile'; margin-left: auto; font-size: 11px; font-weight: 500; color: var(--k0); background: var(--t1); border-radius: 99px; padding: 1px 7px; }
.bn-tile.locked { cursor: default; }
.bn-tile.locked .bnr { filter: grayscale(1) brightness(.45); }
.bn-tile.locked b { color: var(--t2); }
.bn-tile[disabled] { opacity: .7; }
@media (max-width: 640px) {
  .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bn-tile b { font-size: 13px; padding: 0 8px; }
  .bn-tile small { font-size: 12px; padding: 0 8px; }
  .bn-tile.on b::after { content: 'On'; }
  .bn-pm { flex-wrap: wrap; }
  .bn-filt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .bn-filt .chip { flex: none; }
  .bn-pm .btn { width: 100%; }
}

/* back to back (the founder, 2026-10-27): the line before the next pack, and the run's summary */
.stage .runline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; box-sizing: border-box; width: min(560px, calc(100% - 32px)); align-self: center; margin: 4px auto 10px; color: var(--t2); font-size: 14px; }
.stage .runsum { display: grid; gap: 4px; box-sizing: border-box; width: min(560px, calc(100% - 32px)); align-self: center; margin: 4px auto 12px; padding: 10px 14px; border-radius: var(--rc); background: rgba(255,210,63,.07); border: 1px solid rgba(255,210,63,.3); text-align: left; font-size: 14px; }
.stage .runsum small { color: var(--t2); line-height: 1.45; }
.stage .b2b { margin: 0 auto; }
/* 2× speed in a run (the founder, 2026-10-28): marked while on, and the stage's own motions at half too, with the beats */
.stage .fastb[aria-pressed="true"] { background: var(--t1); color: var(--k0, #0b0b0b); border-color: var(--t1); }
.pk-stage.fast .dk .inner { transition-duration: .38s; }
.pk-stage.fast .dk.open .inner, .pk-stage.fast .dk.open .front, .pk-stage.fast .dk.open .back { animation-duration: .22s; }
.pk-stage.fast .dk.charge .inner { animation-duration: .45s; }
.pk-stage.fast .dk.open .stamp { animation-duration: .23s; animation-delay: .28s; }
.pk-stage.fast .dk.away { animation-duration: .21s; }
.pk-stage.fast .pk2.torn .pk2-flap { animation-duration: .35s; }
.pk-stage.fast .pk2.torn .pk2-light { animation-duration: .45s; animation-delay: .08s; }
.pk-stage.fast .pk2.spent { animation-duration: .25s; }
.drop .lx-open { margin: 0 0 10px; }

/* a watch link's page (watchPage): the packs as they're opened, the newest on top, a new one's prints turning over in turn */
.watchpage .w-title { display: flex; align-items: center; gap: 12px; }
.watchpage .w-title .orb { flex: none; width: 40px; height: 40px; }
.pubprint.watchpage .w-title { justify-content: center; }
.watchpage .w-packs { display: grid; gap: 14px; margin: 16px 0 20px; }
.w-pack { padding: 12px; border-radius: var(--rc); background: var(--k1, rgba(255,255,255,.03)); border: 1px solid var(--line2, rgba(255,255,255,.08)); }
.w-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.w-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.w-tile { display: grid; gap: 6px; min-width: 0; }
.w-tile .w-art { aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: var(--k2, #111); }
.w-tile .w-art img, .w-tile .w-art canvas { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.w-tile small { display: grid; gap: 2px; font-size: 11.5px; line-height: 1.3; color: var(--t2); }
.w-tile small b { color: var(--t1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-pack.w-new .w-tile { animation: wturn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .9s + .2s); }
@keyframes wturn { from { opacity: 0; transform: perspective(600px) rotateY(80deg) scale(.92); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .w-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .w-pack.w-new .w-tile { animation: none; } }

/* ---------- prints chat (views/chat.js; Starter, 2026-10-28): a fixed box between the header and, on a phone, the
   tab bar (chatPage sets its top and bottom); rooms, the open room, who's here. Colour stays with the prints and their
   rarity: roles and mentions are paper and hairlines ---------- */
.cpg { min-height: 0; }
.cp { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 5; display: grid; grid-template-columns: 264px minmax(0, 1fr) 280px; background: var(--k0); }
.cp .orb.sm, .cp-sheet .orb.sm { width: 22px; height: 22px; } .cp .orb.xs, .cp-sheet .orb.xs { width: 18px; height: 18px; }
.cp-team { display: grid; place-items: center; background: var(--t1) !important; }
.cp-team .mark { width: 55%; height: 55%; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.cp-team .mark i { border-radius: 1px; } .cp-team .mark i:nth-child(1) { background: var(--live); } .cp-team .mark i:nth-child(2) { background: var(--r1); } .cp-team .mark i:nth-child(3) { background: var(--ink); } .cp-team .mark i:nth-child(4) { background: var(--r2); }
.cp svg.i, .cp-sheet svg.i { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* the three columns share one header height and one hairline */
.cp-sh, .cp-head, .cp-ih { height: 58px; flex: none; display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.cp-side { border-right: 1px solid var(--rule); background: var(--k1); display: flex; flex-direction: column; min-height: 0; }
.cp-sh { padding: 0 14px 0 18px; justify-content: space-between; }
.cp-sh h1 { margin: 0; font: var(--font-head-wt) 18px var(--font-head); letter-spacing: -.02em; }
.cp-rooms { flex: 1; overflow-y: auto; padding: 6px 10px 16px; }
.cp-group { margin: 16px 8px 6px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.cp-room { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: var(--rc); color: var(--t2); text-align: left; font-size: 14.5px; font-weight: 500; background: none; border: 0; cursor: pointer; }
.cp-room:hover { background: rgba(255,255,255,.04); color: var(--t1); }
.cp-room.on { background: var(--k3); color: var(--t1); }
.cp-room.unread { color: var(--t1); font-weight: 650; }
.cp-room .ri, .cp-head .ri { width: 20px; height: 20px; flex: none; color: var(--t3); display: grid; place-items: center; }
.cp-room.on .ri, .cp-room.unread .ri { color: var(--t2); }
.cp-room .ri svg, .cp-head .ri svg { width: 17px; height: 17px; }
.cp-room .rn { flex: 1; min-width: 0; display: grid; }
.cp-room .rt, .cp-room .rs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-room .rs { font-size: 12.5px; font-weight: 400; color: var(--t3); margin-top: 1px; }
.cp-room.unread .rs { color: var(--t2); }
/* live: a pulsing dot; unread: a count */
/* a drop being pulled from now: the word, never a red dot, which read as a notification that never went away (a member's
   report, 2026-10-29) */
.cp-room .cp-livetag { flex: none; font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--live); padding: 3px 5px; border: 1px solid color-mix(in srgb, var(--live) 40%, transparent); border-radius: var(--rt); }
@keyframes cp-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }
.cp-room .rl { width: 13px; height: 13px; }
.cp .pyxbell { width: 18px !important; height: 18px !important; display: block; }
.cp-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--t1); color: var(--k0); font: 700 11px/20px var(--mono); text-align: center; flex: none; }
.cp-n.at { background: var(--live); color: #fff; }
.cp-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.cp-head { gap: 12px; padding: 0 18px; }
.cp-head .t { flex: 1; min-width: 0; }
.cp-head h2 { margin: 0; font: var(--font-head-wt) 16px/1.2 var(--font-head); letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.cp-head p { margin: 1px 0 0; color: var(--t3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-st { display: inline-flex; gap: 6px; }
.cp-back { display: none; }
.cp-pill { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 6px; border-radius: var(--rt); font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.14); color: var(--t2); white-space: nowrap; }
.cp-pill.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.cp-pill.live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--live); animation: cp-pulse 2s ease-in-out infinite; }
.cp-pill.wait { color: var(--t3); }
.cp-pill.staff { color: var(--k0); background: var(--t1); border-color: var(--t1); }
.cp-pill.mod { color: var(--t1); border-color: rgba(255,255,255,.4); }
.cp-pill.found, .cp-pill.keep { color: var(--t3); }
.cp-feed { flex: 1; overflow-y: auto; padding: 8px 0 22px; overscroll-behavior: contain; }
.cp-more { display: block; margin: 6px auto 10px; }
.cp-empty { margin: 48px auto; max-width: 340px; padding: 26px 22px; border: 1px dashed var(--rule2); border-radius: var(--rc); text-align: center; color: var(--t3); font-size: 13.5px; display: grid; justify-items: center; gap: 6px; }
.cp-empty svg { width: 22px; height: 22px; color: var(--t3); }
.cp-empty b { color: var(--t1); font-weight: 600; font-size: 15px; }
.cp-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rule2); border-top-color: var(--t2); animation: cp-spin .8s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
.cp-pinned { display: flex; gap: 10px; align-items: center; margin: 10px 18px 4px; padding: 10px 14px; border: 1px solid var(--rule2); border-radius: var(--rc); background: var(--k1); font-size: 13.5px; color: var(--t2); }
.cp-pinned svg { width: 16px; height: 16px; flex: none; color: var(--t2); }
.cp-pinned b { color: var(--t1); font-weight: 600; }
.cp-pinned .go { margin-left: auto; font: 600 12px var(--sans); color: var(--t1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.cp-day, .cp-new { display: flex; align-items: center; gap: 12px; margin: 18px 18px 6px; color: var(--t3); font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cp-day::before, .cp-day::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.cp-new { margin: 10px 18px; color: var(--live); } .cp-new::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--live) 50%, transparent); }
.cp-msg { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; padding: 2px 18px; }
.cp-msg.first { padding-top: 12px; }
.cp-msg:hover, .cp-msg:focus-within { background: rgba(255,255,255,.025); }
.cp-msg.at { background: rgba(255,255,255,.035); box-shadow: inset 2px 0 0 var(--t1); }
.cp-msg.held { box-shadow: inset 2px 0 0 var(--ink); } .cp-msg.held .tx { opacity: .6; }
.cp-msg.cp-pend { opacity: .5; }
.cp-msg .gut { grid-row: span 2; }
.cp-msg:not(.first) .gut { font: 500 10px/22px var(--mono); color: transparent; text-align: right; }
.cp-msg:not(.first):hover .gut { color: var(--t3); }
.cp-msg .hd { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; line-height: 1.3; margin-bottom: 2px; }
.cp-msg .nm { font-weight: 600; font-size: 14.5px; color: var(--t1); }
.cp-msg .tm, .cp-pull .tm, .cp-news .tm, .cp-rep .tm { font: 500 11px var(--mono); color: var(--t3); }
.cp-msg .tx { color: var(--t1); font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; padding: 1px 0; }
.cp-plink { color: var(--t1); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.cp-plink:hover { text-decoration-color: var(--t1); }
.cp-off { color: var(--t3); text-decoration: line-through dotted; }
.cp-ment { color: var(--t1); font-weight: 650; } .cp-ment.mine { background: rgba(255,255,255,.1); padding: 0 3px; border-radius: var(--ra); }
.cp-gone { color: var(--t3); font-style: italic; font-size: 14px; }
.cp-heldbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font: 600 11.5px var(--mono); color: var(--ink); }
.cp-acts { position: absolute; top: -12px; right: 18px; display: flex; opacity: 0; pointer-events: none; padding: 3px; border-radius: var(--rc); background: var(--k2); border: 1px solid var(--rule2); box-shadow: var(--shadow); z-index: 3; transition: opacity .12s; }
.cp-msg:hover .cp-acts, .cp-msg:focus-within .cp-acts { opacity: 1; pointer-events: auto; }
.cp-acts button { width: 32px; height: 28px; display: grid; place-items: center; border-radius: var(--rt); color: var(--t2); background: none; border: 0; cursor: pointer; }
.cp-acts button:hover { background: var(--k3); color: var(--t1); }
.cp-acts svg { width: 16px; height: 16px; }
/* a print in chat: its rarity on the card's edge, as on prints */
.cp-card { margin-top: 8px; display: inline-grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 16px 8px 8px; min-width: 280px; max-width: 380px; border-radius: var(--rc); cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--rule); transition: border-color .2s, box-shadow .25s; }
.cp-card.h1, .cp-card.h2, .cp-card.h3, .cp-card.h4 { border-color: color-mix(in srgb, var(--hc) 40%, transparent); box-shadow: 0 10px 30px -18px var(--hg); }
.cp-card:hover { border-color: color-mix(in srgb, var(--hc, #fff) 60%, transparent); }
.cp-card:empty { display: none; }
.cp-card b { display: block; font: var(--font-head-wt) 15px/1.25 var(--font-head); letter-spacing: -.01em; color: var(--t1); }
.cp-card small { display: block; color: var(--t3); font-size: 12px; margin: 3px 0 6px; }
.cp-card .pa, .cp-pull .pa { position: relative; display: block; aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: #000; }
.cp-card .pa img, .cp-pull .pa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.cp-card .pa img.ready, .cp-pull .pa img.ready { opacity: 1; }
.cp-pull { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 60px; margin: 2px 18px; padding: 6px 12px 6px 6px; border: 1px solid transparent; border-radius: var(--rc); font-size: 14px; color: var(--t2); cursor: pointer; }
.cp-pull:hover { background: rgba(255,255,255,.025); }
.cp-pull b { color: var(--t1); font-weight: 600; }
.cp-pull .ln { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cp-pull.big { margin: 6px 18px; border-color: color-mix(in srgb, var(--hc) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 12%, transparent), transparent 70%); }
.cp-pull.h5.big { --hc: var(--r5); box-shadow: 0 0 42px -12px var(--r5-g); }
.cp-evi { background: none !important; display: grid !important; place-items: center; color: var(--t3); }
.cp-evi svg { width: 18px; height: 18px; }
.cp-uniq { color: var(--r5); font-weight: 700; text-shadow: 0 0 12px var(--r5-g); }
.cp-sub { font-size: 13px; color: var(--t2); margin-top: 2px; }
.cp-news { position: relative; margin: 12px 18px; padding: 14px 16px; border-radius: var(--rc); border: 1px solid var(--rule2); background: var(--k1); }
.cp-news .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-news .hd b { color: var(--t1); font-weight: 600; }
.cp-news .tx { font-size: 15px; line-height: 1.5; color: var(--t1); white-space: pre-wrap; }
.cp-down { position: absolute; right: 16px; bottom: 96px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--rule2); background: var(--k2); color: var(--t1); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.cp-down svg { width: 20px; height: 20px; }
.cp-main:has(.cp-jump) .cp-down { display: none; }
.cp-jump { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4; height: 32px; padding: 0 14px; border-radius: 16px; border: 0; background: var(--t1); color: var(--k0); font-weight: 600; font-size: 13px; box-shadow: var(--shadow); cursor: pointer; }
.cp-comp { flex: none; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.cp-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: var(--rc); background: var(--k1); border: 1px solid var(--rule2); transition: border-color .2s; }
.cp-row:focus-within { border-color: rgba(255,255,255,.3); }
.cp-ta { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: none; padding: 7px 8px; max-height: 140px; font: 15px/1.45 var(--sans); color: var(--t1); }
.cp-ta::placeholder { color: var(--t3); }
.cp-warn { color: var(--down); }
.cp-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font: 400 12px var(--sans); color: var(--t3); }
.cp-ro { display: flex; align-items: center; gap: 10px; padding: 12px 4px; color: var(--t3); font-size: 13.5px; }
.cp-ro svg { width: 15px; height: 15px; flex: none; }
/* a blocked message: the notice joined to the box it came from */
.cp-stop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border-radius: var(--rc) var(--rc) 0 0; border: 1px solid color-mix(in srgb, var(--down) 50%, transparent); border-bottom: 0; background: color-mix(in srgb, var(--down) 9%, var(--k1)); font-size: 13px; color: var(--t2); }
.cp-stop > svg { width: 16px; height: 16px; color: var(--down); flex: none; }
.cp-stop span { flex: 1; min-width: 180px; } .cp-stop b { color: var(--t1); }
.cp-comp.stopped .cp-row { border-color: color-mix(in srgb, var(--down) 50%, transparent); border-radius: 0 0 var(--rc) var(--rc); }
.cp-outline { background: none !important; border: 1px solid rgba(255,255,255,.3) !important; color: var(--t1) !important; }
.cp-x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--rt); background: none; border: 0; color: var(--t3); cursor: pointer; }
.cp-x:hover { background: rgba(255,255,255,.06); color: var(--t1); }
.cp-x svg { width: 16px; height: 16px; }
.cp-info { border-left: 1px solid var(--rule); background: var(--k1); overflow-y: auto; min-height: 0; }
.cp-ih { padding: 0 16px; font: var(--font-head-wt) 15px var(--font-head); color: var(--t1); letter-spacing: -.01em; }
.cp-info > .cp-sec, .cp-info > .cp-person, .cp-info > .cp-rules, .cp-info > p { margin-left: 16px; margin-right: 16px; }
.cp-sec { margin: 18px 0 8px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.cp-person { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--rc); font-size: 14px; color: var(--t2); }
.cp-person:hover { background: rgba(255,255,255,.04); }
.cp-person b { font-weight: 600; color: var(--t1); }
.cp-rules { padding-left: 18px; color: var(--t2); font-size: 13px; } .cp-rules li { margin-bottom: 6px; }
/* sheets: a close button, a darker room behind */
.cp-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.62); display: grid; place-items: center; padding: 20px; }
.cp-sheet { position: relative; width: min(460px, 100%); max-height: min(720px, 90vh); overflow-y: auto; border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); padding: 20px; }
.cp-sheet h3 { margin: 0 40px 6px 0; font: var(--font-head-wt) 17px var(--font-head); letter-spacing: -.015em; color: var(--t1); }
.cp-sheet .sub { color: var(--t3); font-size: 13px; margin: 0 0 14px; overflow-wrap: anywhere; }
.cp-sheet .row { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-sheet .field { width: 100%; }
.cp-sheet .cp-group { margin: 18px 0 8px; }
.cp-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); border: 0; color: var(--t2); cursor: pointer; }
.cp-close:hover { background: rgba(255,255,255,.12); color: var(--t1); }
.cp-close svg { width: 16px; height: 16px; }
.cp-opt { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: var(--rc); text-align: left; font-size: 14.5px; color: var(--t1); background: none; border: 0; cursor: pointer; }
.cp-opt:hover { background: var(--k3); }
.cp-opt small { display: block; color: var(--t3); font-size: 12.5px; }
.cp-opt.danger { color: var(--down); }
.cp-opt svg { width: 18px; height: 18px; flex: none; }
.cp-rep { padding: 12px; border-radius: var(--rc); border: 1px solid var(--rule); background: var(--k0); margin-bottom: 10px; }
.cp-rep .why { font: 600 11.5px var(--mono); color: var(--ink); margin-bottom: 6px; }
.cp-rep .why.blk { color: var(--down); }
.cp-rep .q { font-size: 14px; color: var(--t1); border-left: 2px solid var(--rule2); padding-left: 10px; margin: 6px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-rep.done { opacity: .5; }
.cp-none { color: var(--t3); font-size: 13px; margin: 4px 0 8px; }
.cp-danger { color: var(--down) !important; border-color: color-mix(in srgb, var(--down) 45%, transparent) !important; }
.chatbtn.on { background: var(--t1); color: var(--k0); border-color: var(--t1); }
/* one room as a panel (chatRoom: the Play page's side): it fills whatever holds it */
.cp.cp-panel { position: relative; inset: auto; z-index: auto; height: 100%; min-height: 0; display: flex; grid-template-columns: none; border-left: 1px solid var(--rule); }
.cp-panel .cp-main { flex: 1; }
/* (a panel's room shows on a phone too: the page's rule that hides a room behind the rooms list is the /chat page's) */
@media (max-width: 760px) { body:not(.cp-in) .cp-panel .cp-main { display: flex; } }
.cp-panel .cp-head { height: 48px; padding: 0 12px; }
.cp-panel .cp-head p, .cp-panel .cp-back { display: none !important; }
.cp-panel .cp-msg, .cp-panel .cp-pull { padding-left: 12px; padding-right: 12px; }
.cp-panel .cp-comp { padding: 8px 10px 10px; }
/* a collector's card from chat: banner, picture, name, badges, showcase */
.cp-sheet.cp-profile { padding: 0 0 20px; overflow: hidden auto; }
.cp-profile .cp-close { z-index: 2; background: rgba(0,0,0,.45); }
.cp-pbnr { display: block; height: 120px; width: 100%; background: var(--k2); overflow: hidden; }
.cp-pteam { background: linear-gradient(135deg, rgba(255,69,58,.25), rgba(25,183,232,.2), rgba(242,181,58,.2), rgba(157,123,255,.25)); }
.cp-pid { display: flex; align-items: flex-end; gap: 14px; margin: -34px 20px 0; position: relative; }
.cp-pid .orb.big, .cp-pid .orb { width: 72px; height: 72px; flex: none; box-shadow: 0 0 0 4px var(--k1); }
.cp-pid h3 { margin: 0 0 6px !important; }
.cp-num { font: 500 12px var(--mono); color: var(--t3); }
.cp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--rt); border: 1px solid rgba(255,255,255,.16); font: 600 11.5px var(--sans); color: var(--t2); }
.cp-profile .cp-bio { margin: 14px 20px 0; color: var(--t2); font-size: 14px; }
.cp-profile .cp-sec, .cp-profile .cp-none, .cp-profile .row { margin-left: 20px; margin-right: 20px; }
.cp-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 20px; }
.cp-wp { position: relative; aspect-ratio: 1; border-radius: var(--ra); overflow: hidden; background: #000; border: 1px solid var(--rule); padding: 0; cursor: pointer; }
.cp-wp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.cp-wp img.ready { opacity: 1; }
/* the feed's top edge fades instead of cutting a message in half */
.cp-feed { -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); }
/* no scroll bars in chat (the founder: "remove the ugly scroll bar"); everything still scrolls */
.cp-feed, .cp-rooms, .cp-info, .cp-sheet { scrollbar-width: none; }
.cp-feed::-webkit-scrollbar, .cp-rooms::-webkit-scrollbar, .cp-info::-webkit-scrollbar, .cp-sheet::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .cp { grid-template-columns: 264px minmax(0, 1fr); } .cp-info { display: none; } }
@media (min-width: 1101px) { .cp-infob { display: none; } }
@media (max-width: 760px) {
  .cp { grid-template-columns: 1fr; }
  .cp-side { border: 0; }
  body:not(.cp-in) .cp-main { display: none; }
  body.cp-in .cp-side { display: none; }
  body.cp-in #nav { display: none; }
  .cp-sh { padding: 0 16px; }
  .cp-rooms { padding: 6px 12px 16px; }
  .cp-head { padding: 0 8px; gap: 6px; } .cp-back { display: grid; }
  .cp-room { min-height: 52px; padding: 12px 12px; font-size: 15.5px; }
  .cp-msg { padding-left: 14px; padding-right: 14px; }
  .cp-pull { margin-left: 10px; margin-right: 10px; }
  /* in a room on a phone the beta line steps aside: the conversation gets the room */
  body.cp-in .devnote { display: none; }
  .cp-head p { display: none; }
  .cp-acts { display: none; }
  .cp-news, .cp-pull.big, .cp-pinned { margin-left: 14px; margin-right: 14px; }
  .cp-comp { padding-left: 10px; padding-right: 10px; }
  .cp-ta { font-size: 16px; }
  .cp-scrim { place-items: end center; padding: 0; }
  .cp-sheet { width: 100%; border-radius: var(--rs) var(--rs) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .cp-card { min-width: 0; max-width: 100%; grid-template-columns: 80px minmax(0, 1fr); }
}
/* a narrow phone: the header's six buttons fit (chat added one) */
@media (max-width: 420px) { .top .wallet { gap: 2px; } .top .wallet .iconbtn { width: 34px; height: 34px; } .top .wallet .me .orb { width: 30px; height: 30px; } }
/* ---------- chat on a phone (the founder, 2026-10-28: "make it really really good ... esp on mobile"): a room is the
   whole screen, like a messaging app, the composer rides above the keyboard, and the rooms list reads at a glance ---- */
.cp-room .rt { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-room .rtn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cp-room .rtm { margin-left: auto; flex: none; font: 500 11px var(--mono); color: var(--t3); }
.cp-room.unread .rtm { color: var(--t1); }
.cp-room .rs { display: flex; align-items: center; gap: 8px; }
.cp-room .rsl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-room .cp-n { margin-left: auto; }
.cp-hs { display: none; }
.cp-send svg { display: none; }
.cp-grab { display: none; }
/* (a short conversation sits at the bottom, by the composer, as in any messenger) */
.cp-feed { display: flex; flex-direction: column; }
.cp-fin { flex: none; margin-top: auto; }
.cp-room, .cp-opt, .cp-send, .cp-x, .cp-close, .cp-room .ri { -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) {
  /* in a room: the site's header, the beta line and the tab bar step aside; the room is the screen */
  body.cp-in header.top, body.cp-in .devnote, body.cp-in #nav { display: none !important; }
  body.cp-in { overflow: hidden; }
  .cp { background: var(--k0); }
  /* the rooms list: a large title, app rows with a tile, the name and when, the newest line and the count */
  .cp-side { background: var(--k0); }
  .cp-sh { height: 64px; padding: 0 18px; border-bottom: 0; }
  .cp-sh h1 { font-size: 28px; letter-spacing: -.03em; }
  .cp-rooms { padding: 0 8px calc(16px + env(safe-area-inset-bottom)); }
  .cp-group { margin: 14px 12px 4px; }
  .cp-room { min-height: 68px; padding: 10px 10px; gap: 12px; border-radius: 14px; align-items: center; }
  .cp-room:active { background: var(--k2); }
  .cp-room.on { background: none; }
  .cp-room .ri { width: 46px; height: 46px; border-radius: 14px; background: var(--k2); border: 1px solid var(--rule); color: var(--t2); }
  .cp-room .ri svg { width: 21px; height: 21px; }
  .cp-room.news .ri { background: var(--t1); color: var(--k0); border-color: var(--t1); }
  .cp .cp-room .pyxbell { width: 26px !important; height: 26px !important; }
  .cp-room .rt { font-size: 16px; font-weight: 600; color: var(--t1); }
  .cp-room .rs { font-size: 14px; margin-top: 3px; color: var(--t3); }
  .cp-room.unread .rs { color: var(--t2); }
  .cp-room .rl { width: 14px; height: 14px; color: var(--t3); }
  .cp-n { min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; font-size: 11.5px; }
  /* the room's head: back, the room's tile, its name and who's here */
  .cp-head { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0 4px; gap: 6px; background: rgba(11,11,12,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .cp-head .cp-back { width: 44px; height: 44px; border: 0; background: none; }
  .cp-head .cp-back svg { width: 24px; height: 24px; }
  .cp-head .ri { width: 34px; height: 34px; border-radius: 10px; background: var(--k2); border: 1px solid var(--rule); }
  .cp-head h2 { font-size: 16.5px; }
  .cp-head p { display: none; }
  .cp-head p.cp-hs { display: block; margin-top: 1px; font-size: 12px; color: var(--t3); }
  .cp-head .iconbtn:not(.cp-back) { width: 44px; height: 44px; border: 0; background: none; }
  .cp-head .iconbtn svg { width: 20px; height: 20px; }
  .cp-st { display: none; }
  /* the conversation: a little more air, bigger faces, text you read without squinting */
  .cp-feed { padding: 6px 0 14px; -webkit-mask-image: none; mask-image: none; }
  .cp-msg { grid-template-columns: 36px minmax(0, 1fr); gap: 0 10px; padding: 2px 14px; }
  .cp-msg.first { padding-top: 14px; }
  .cp-msg .orb { width: 36px; height: 36px; }
  .cp-msg .tx { font-size: 16px; line-height: 1.42; }
  .cp-msg .nm { font-size: 15px; }
  /* (one pill on a phone, the first: Mod or the team before Founding, Founding before Keeper) */
  .cp-msg .hd .cp-pill ~ .cp-pill { display: none; }
  .cp-msg .hd .cp-pill { height: 17px; padding: 0 5px; font-size: 9.5px; }
  .cp-msg .hd .tm { font-size: 10.5px; }
  .cp-msg:not(.first) .gut { color: transparent !important; }
  .cp-msg:active { background: rgba(255,255,255,.04); }
  .cp-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); width: 100%; max-width: 360px; padding: 8px 12px 8px 8px; }
  .cp-pull { grid-template-columns: 44px minmax(0, 1fr); min-height: 56px; margin: 2px 10px; }
  .cp-pull .ln { font-size: 14.5px; }
  .cp-news { margin: 10px 12px; padding: 14px; }
  .cp-day { margin: 16px 14px 4px; }
  .cp-pinned { margin: 10px 12px 2px; }
  /* the composer: a round box with the send arrow in it, above the home bar */
  .cp-comp { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: rgba(11,11,12,.96); }
  .cp.typing .cp-comp { padding-bottom: 8px; }
  .cp-row { align-items: flex-end; padding: 4px 4px 4px 14px; border-radius: 22px; background: var(--k2); border-color: var(--rule2); }
  .cp-ta { padding: 9px 0; font-size: 16px; line-height: 1.35; }
  .cp-send { width: 40px; height: 40px !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center; flex: none; }
  .cp-send span { display: none; }
  .cp-send svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .cp-send:disabled { background: var(--k3) !important; color: var(--t3) !important; border-color: var(--k3) !important; opacity: 1; }
  /* (the house line steps aside on a phone; slow mode, the count near the limit and a stopped message still show) */
  .cp-foot { margin: 6px 6px 0; }
  .cp-foot.plain:has(.cp-cc:empty) { display: none; }
  .cp-stop { position: relative; padding-right: 40px; border-radius: 16px 16px 0 0; }
  .cp-stop .cp-x { position: absolute; top: 4px; right: 4px; }
  .cp-comp.stopped .cp-row { border-radius: 0 0 22px 22px; }
  .cp-ro { padding: 12px 8px; }
  .cp-down { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .cp.typing .cp-down { bottom: 80px; }
  .cp-jump { bottom: calc(76px + env(safe-area-inset-bottom)); height: 36px; padding: 0 16px; border-radius: 18px; }
  /* sheets: from the bottom, a grabber, big rows, a swipe down closes */
  .cp-scrim { background: rgba(0,0,0,.55); }
  .cp-sheet { max-height: 86vh; padding-top: 26px; border-radius: 20px 20px 0 0; }
  .cp-grab { display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 5px; border-radius: 3px; background: var(--rule2); }
  .cp-sheet .cp-close { display: none; }
  .cp-sheet.cp-profile .cp-close { display: grid; }
  .cp-opt { min-height: 54px; font-size: 16px; }
  .cp-profile .cp-pbnr { height: 132px; }
}
/* the team's name, the founder's, in the Unique green */
.cp-msg .nm.cp-tname, .cp-news .hd b, .cp-prof h3.cp-tname { color: var(--r5); }
/* ---------- replies, reactions and the emoji picker (the founder, 2026-10-29) ---------- */
.cp-rq { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 0 3px; padding: 0; border: 0; background: none; color: var(--t3); font: 13px var(--sans); text-align: left; cursor: pointer; min-width: 0; }
.cp-rq svg { width: 13px; height: 13px; flex: none; transform: scaleX(-1); }
.cp-rq b { color: var(--t2); font-weight: 600; flex: none; }
.cp-rq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cp-rq:hover span { color: var(--t2); }
.cp-flash { animation: cp-flash 1.6s ease-out; }
@keyframes cp-flash { 0%, 30% { background: rgba(255,255,255,.08); } 100% { background: transparent; } }
.cp-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cp-r { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 13px; border: 1px solid var(--rule2); background: var(--k2); color: var(--t1); font: 14px var(--sans); cursor: pointer; touch-action: manipulation; }
.cp-r b { font: 600 12px var(--mono); color: var(--t2); }
.cp-r.mine { border-color: color-mix(in srgb, var(--r5) 60%, transparent); background: color-mix(in srgb, var(--r5) 12%, var(--k2)); }
.cp-r.mine b { color: var(--t1); }
.cp-r.add { color: var(--t3); padding: 0 6px; opacity: 0; transition: opacity .15s; }
.cp-r.add svg { width: 15px; height: 15px; }
.cp-msg:hover .cp-r.add { opacity: 1; }
.cp-quick { display: flex; gap: 6px; margin: 0 0 12px; }
.cp-quick button { flex: 1; height: 46px; border-radius: 14px; border: 1px solid var(--rule2); background: var(--k2); font-size: 22px; cursor: pointer; display: grid; place-items: center; color: var(--t2); }
.cp-quick button svg { width: 20px; height: 20px; }
.cp-replybar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; margin-bottom: 6px; border-radius: 12px; background: var(--k2); font-size: 13px; color: var(--t2); }
.cp-replybar > svg { width: 14px; height: 14px; flex: none; transform: scaleX(-1); color: var(--t3); }
.cp-replybar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-replybar b { color: var(--t1); }
.cp-emo { flex: none; width: 34px; height: 34px; align-self: flex-end; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--t3); cursor: pointer; }
.cp-emo:hover { color: var(--t1); }
.cp-emo svg { width: 20px; height: 20px; }
.cp-emoji { position: fixed; z-index: 75; width: 320px; max-height: min(360px, calc(100vh - 24px)); overflow-y: auto; padding: 8px 8px 12px; border-radius: 16px; background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); scrollbar-width: none; overscroll-behavior: contain; }
.cp-emoji::-webkit-scrollbar { display: none; }
.cp-eh { position: sticky; top: -8px; padding: 8px 4px 4px; background: var(--k1); font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.cp-eg { display: grid; grid-template-columns: repeat(8, 1fr); }
.cp-eg button { height: 36px; border: 0; border-radius: 8px; background: none; font-size: 22px; cursor: pointer; touch-action: manipulation; }
.cp-eg button:hover { background: var(--k3); }
@media (max-width: 760px) {
  .cp-emoji { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 46vh; border-radius: 20px 20px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cp-eg { grid-template-columns: repeat(8, 1fr); }
  .cp-eg button { height: 44px; font-size: 26px; }
  .cp-r.add { opacity: 1; }
  .cp-r { height: 32px; padding: 0 10px; border-radius: 16px; font-size: 15px; }
  .cp-emo { width: 40px; height: 40px; }
  .cp-row { padding-left: 4px; }
}
/* ---------- smoother on a phone (the founder: "make the UI less janky on iPhone ... and other mobile") ----------
   no blur behind the head and the box (costly on a phone's GPU while scrolling), no double-tap zoom wait, the page behind
   a room held still so iOS doesn't scroll it when the keyboard opens */
@media (max-width: 760px) {
  .cp-head, .cp-comp { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--k0) !important; }
  .cp button, .cp a, .cp-sheet button { touch-action: manipulation; }
  body.cp-in { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
  .cp-feed { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
}
/* a pack's line in a drop thread: the best print, then the rest as a strip (as prints' activity feed has it) */
.cp-strip { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.cp-strip .st { width: 34px; height: 34px; border-radius: 7px; overflow: hidden; background: var(--k2); cursor: pointer; border: 1px solid var(--rule); }
.cp-strip .st img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-strip .st.h2 { border-color: color-mix(in srgb, var(--r2) 60%, transparent); }
.cp-strip .st.h3 { border-color: color-mix(in srgb, var(--r3) 60%, transparent); }
.cp-strip .st.h4 { border-color: color-mix(in srgb, var(--r4) 70%, transparent); }
.cp-strip .st.h5 { border-color: var(--r5); }
/* a collector's Discord on their profile, when they chose to show it (Settings) */
.pdiscord { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--rule2); background: var(--k1); color: var(--t2); font-size: 13.5px; text-decoration: none; }
.pdiscord svg { width: 15px; height: 15px; color: var(--t3); }
.pdiscord b { color: var(--t1); font-weight: 600; }
.pdiscord:hover { border-color: rgba(255,255,255,.3); color: var(--t1); }
@media (max-width: 760px) {
  /* the composer's emoji picker on a phone: on top of the composer, which stays in sight (review B5 of rel-chat2) */
  .cp-comp { position: relative; }
  .cp-comp > .cp-emoji.box { position: absolute; top: auto; bottom: 100%; max-height: min(44vh, 340px); padding-bottom: 12px; border-bottom: 0; border-radius: 20px 20px 0 0; }
}
/* the dock (views/chat.js chatDock; the founder's pick, 2026-10-29): chat over any page, and its button (app.js chatFab) */
.chatfab { position: fixed; right: 24px; bottom: 24px; z-index: 35; width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--t1); color: var(--k0); box-shadow: 0 10px 30px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); cursor: pointer; transition: transform .15s; }
.chatfab:hover { transform: scale(1.05); }
.chatfab .i { width: 24px; height: 24px; }
.chatfab .i.cfx, .chatfab.on .i:not(.cfx) { display: none; }
.chatfab.on .i.cfx { display: block; }
.chatfab .n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--live); color: #fff; font: 700 11px/20px var(--mono); text-align: center; box-shadow: 0 0 0 3px var(--k0); }
.chatfab .n.dot { min-width: 0; width: 12px; height: 12px; padding: 0; top: 2px; right: 2px; }
.cdk { position: fixed; right: 24px; bottom: 92px; z-index: 35; width: 384px; height: min(600px, calc(100vh - 140px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--k1); border: 1px solid var(--rule2); box-shadow: 0 30px 70px -20px rgba(0,0,0,.9); overflow: hidden; animation: cdk-in .18s ease-out; }
@keyframes cdk-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.cdk-top { display: flex; align-items: center; gap: 4px; padding: 8px 8px 4px 16px; flex: none; }
.cdk-top b { flex: 1; display: flex; align-items: center; gap: 8px; font: var(--font-head-wt) 16px var(--font-head); }
.cdk-top b .i { width: 18px; height: 18px; }
.cdk-chips { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; scrollbar-width: none; flex: none; border-bottom: 1px solid var(--rule); }
.cdk-chips::-webkit-scrollbar { display: none; }
.cdk-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule2); background: none; color: var(--t2); font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer; flex: none; touch-action: manipulation; }
.cdk-chip:hover { color: var(--t1); border-color: rgba(255,255,255,.3); }
.cdk-chip.on { background: var(--t1); color: var(--k0); border-color: var(--t1); }
.cdk-chip .here { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.cdk-chip .new { width: 6px; height: 6px; border-radius: 50%; background: var(--t1); }
.cdk-chip b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--live); color: #fff; font: 700 10.5px/18px var(--mono); text-align: center; }
.cdk-room { flex: 1; min-height: 0; display: flex; }
.cdk-room > .cp-panel { flex: 1; border-left: 0; }
.cdk .cp-panel .cp-head { height: 44px; }
.cdk-grab, .cdk-dim { display: none; }
@media (max-width: 760px) {
  .chatfab { right: 14px; bottom: var(--fabb, 76px); width: 52px; height: 52px; }
  .chatfab.on { display: none; }
  .cdk { left: 0; right: 0; bottom: 0; width: auto; height: 68vh; height: 68dvh; border-radius: 22px 22px 0 0; border-bottom: 0; animation: cdk-up .22s ease-out; transition: height .2s, transform .2s; }
  .cdk.full, .cdk.typing { height: 100vh; height: 100dvh; border-radius: 0; }
  .cdk.typing .cdk-grab { display: none; }
  @keyframes cdk-up { from { transform: translateY(40%); opacity: .6; } }
  .cdk-grab { display: block; position: relative; width: 160px; height: 18px; margin: 0 auto -6px; flex: none; touch-action: none; }
  .cdk-grab::before { content: ''; position: absolute; left: 60px; right: 60px; top: 8px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); }
  .cdk-top { padding-top: 2px; touch-action: none; }
  .cdk-top .iconbtn { width: 44px; height: 44px; }
  .cdk.full .cdk-top, .cdk.typing .cdk-top { padding-top: calc(4px + env(safe-area-inset-top)); }
  .cdk-chip { height: 34px; padding: 0 14px; font-size: 14px; }
  .cdk-dim { display: block; position: fixed; inset: 0; z-index: 34; background: rgba(0,0,0,.45); animation: cdk-fade .2s; }
  @keyframes cdk-fade { from { opacity: 0; } }
  html.cdk-lock, html.cdk-lock body { overflow: hidden; }
  .cdk .cp-comp { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .cdk.typing .cp-comp { padding-bottom: 8px; }
}
/* a room drawn from its cache before its hello: who and when, a bar for the words (review F2 of rel-chat2) */
.cp-veil { display: block; height: 11px; margin: 6px 0 5px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05)); background-size: 200% 100%; animation: cp-veil 1.2s linear infinite; }
@keyframes cp-veil { to { background-position: -200% 0; } }
/* the emoji picker's eight columns fit its box (review E8 of rel-chat2) */
.cp-eg { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cp-eg button { min-width: 0; padding: 0; }
/* the team's menu on its own announcement (review G4 of rel-chat2) */
.cp-news .cp-nmore { margin-left: auto; width: 30px; height: 30px; }
.cp-news .hd .tm + .cp-nmore { margin-left: 4px; }

/* ---------- Play (views/play.js; the founder, 2026-10-28: "Framed Play page", from a game icon up top; the prototype and
   its plan: D:\code\prints-play-lab) ---------- */
.pl-g-pyx { --gc: #fbc741; } .pl-g-pyxlings { --gc: #ff9d5c; }
.pl-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--mono); color: var(--gc); white-space: nowrap; }
.pl-tag::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--gc); }
.pl-live { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--rt); font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--up); border: 1px solid color-mix(in srgb, var(--up) 45%, transparent); background: rgba(8,8,10,.75); white-space: nowrap; }
.pl-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.pl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pl-head h1 { margin: 0; }
.pl-head p { margin: 6px 0 0; color: var(--t2); max-width: 560px; }
.pl-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pl-card { border-radius: var(--rs); border: 1px solid var(--rule2); background: var(--k1); overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, box-shadow .3s; }
.pl-card:hover { border-color: color-mix(in srgb, var(--gc) 45%, var(--rule2)); box-shadow: 0 0 60px -24px var(--gc); }
.pl-card .pl-art { position: relative; aspect-ratio: 16 / 9; background: #0d0a14; cursor: pointer; display: block; }
.pl-card .pl-art img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pl-card .pl-art > .pl-live { position: absolute; left: 12px; top: 12px; }
.pl-card .pl-ov { display: none; }
.pl-card .pl-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pl-card h2 { margin: 0; font: var(--font-head-wt) 22px var(--font-head); letter-spacing: -.025em; }
.pl-card p { margin: 0; color: var(--t2); font-size: 14px; }
.pl-card .pl-mine { font: 500 12px var(--mono); color: var(--t3); }
.pl-card .pl-mine b { color: var(--up); font-weight: 600; }
.pl-card .pl-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.pl-card .pl-row .btn.primary { min-width: 120px; }
.pl-card .pl-row svg.i { width: 15px; height: 15px; }
.pl-homecard { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--rs); border: 1px solid color-mix(in srgb, var(--r5) 35%, var(--rule)); background: linear-gradient(135deg, rgba(26,254,73,.06), transparent 60%), var(--k1); }
.pl-homecard img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.pl-homecard > div { flex: 1; min-width: 0; line-height: 1.3; }
.pl-homecard b { display: block; font-weight: 600; font-size: 14.5px; }
.pl-homecard span { display: block; color: var(--t3); font-size: 12.5px; margin-top: 2px; }
.pl-homecard .pl-x { width: 30px; height: 30px; display: grid; place-items: center; color: var(--t3); border-radius: var(--rt); flex: none; background: none; border: 0; cursor: pointer; }
.pl-note { margin-top: 22px; color: var(--t3); font-size: 13px; }

/* a game's page */
body.pl-on { overflow: hidden; }
body.pl-on #view { padding: 0; }
.pl { position: fixed; left: 0; right: 0; bottom: 0; top: var(--pl-top, 64px); z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) var(--pl-panel, 360px); grid-template-rows: auto minmax(0, 1fr); background: #050506; overflow: hidden; }
.pl-bar { grid-column: 1 / -1; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px; border-bottom: 1px solid var(--rule); background: var(--k1); min-width: 0; -webkit-user-select: none; user-select: none; }
.pl-bar .pl-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.pl-bar .pl-tt { display: flex; align-items: center; gap: 10px; flex: none; }
.pl-bar h2 { margin: 0; font: var(--font-head-wt) 16px var(--font-head); letter-spacing: -.015em; white-space: nowrap; }
.pl-bar .pl-me { font-size: 12.5px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-bar .pl-me b { color: var(--t2); font-weight: 600; }
.pl-bar .pl-lbl { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: var(--rc); border: 1px solid var(--rule); background: rgba(255,255,255,.03); color: var(--t2); font: 600 13px var(--sans); white-space: nowrap; cursor: pointer; }
.pl-bar .pl-lbl:hover { color: var(--t1); border-color: var(--rule2); }
.pl-bar .pl-lbl svg.i { width: 16px; height: 16px; }
.pl-bar .iconbtn.on { background: var(--t1); color: var(--k0); }
.pl-stage { position: relative; min-width: 0; min-height: 0; background: #0d0a14; overflow: hidden; }
.pl-tip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 7; padding: 6px 12px; border-radius: 16px; background: rgba(8,8,10,.82); border: 1px solid var(--rule2); font: 600 11.5px var(--mono); color: var(--t2); white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.pl-panel { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--rule); background: var(--k0); position: relative; container-type: inline-size; }
.pl-panel .pl-ph { display: none; }
.pl-panel .cp.cp-panel { border-left: 0; flex: 1; min-height: 0; }
.pl-panel .pl-nochat { margin: auto; padding: 24px; text-align: center; color: var(--t3); font-size: 13.5px; }
.pl.nochat { grid-template-columns: minmax(0, 1fr) 0; } .pl.nochat .pl-panel { display: none; }
/* the game's box: laid over the stage on its page, a small window elsewhere (moving an iframe reloads it, so it never moves) */
.pl-box { position: fixed; z-index: 5; background: #0d0a14; overflow: hidden; }
.pl-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0d0a14; }
.pl-box .pl-shield, .pl-box .pl-minibar { display: none; }
.pl-curtain { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(8,8,10,.92); transition: opacity .5s var(--ease); text-align: center; padding: 20px; }
.pl-curtain.gone { opacity: 0; pointer-events: none; }
.pl-curtain b { display: block; font: var(--font-head-wt) 18px var(--font-head); letter-spacing: -.02em; margin: 12px 0 4px; }
.pl-curtain small { color: var(--t3); font-size: 13px; }
.pl-curtain .btn { margin-top: 14px; }
.pl-box.mini { left: auto; top: auto; right: 16px; bottom: 16px; width: min(340px, 44vw); aspect-ratio: 16 / 11; border-radius: 12px; border: 1px solid var(--rule2); box-shadow: var(--shadow); z-index: 35; }
.pl-box.mini iframe { top: 36px; height: calc(100% - 36px); }
.pl-box.mini .pl-curtain { display: none; }
.pl-box.mini .pl-minibar { display: flex; position: absolute; left: 0; right: 0; top: 0; height: 36px; align-items: center; gap: 8px; padding: 0 3px 0 10px; background: var(--k1); border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--t3); -webkit-user-select: none; user-select: none; }
.pl-box.mini .pl-minibar > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-box.mini .pl-minibar .iconbtn { width: 30px; height: 30px; }
.pl-box.mini .pl-shield { display: block; position: absolute; inset: 36px 0 0 0; width: 100%; border: 0; cursor: pointer; background: transparent; }
.pl-fab, .pl-fs { display: none; position: absolute; z-index: 6; top: 6px; height: 34px; border-radius: 17px; background: rgba(8,8,10,.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); align-items: center; gap: 8px; font: 600 12px var(--mono); color: var(--t1); cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.pl-fab { left: 50%; transform: translateX(-50%); padding: 0 12px; }
.pl-fs { right: calc(50% + 66px); height: 30px; top: 8px; padding: 0 10px; font-size: 11.5px; opacity: .75; }
.pl-fab svg.i, .pl-fs svg.i { width: 15px; height: 15px; }

/* the layouts. side: the game and a chat column. band: Pyx on an upright phone or tablet, like a handheld (the picture
   on top, its own controls below it, chat under that). over: the game alone, chat in a drawer that pushes it over. */
body.pl-band header.top, body.pl-over header.top, body.pl-band #nav, body.pl-over #nav { display: none !important; }
body.pl-band .pl, body.pl-over .pl { top: env(safe-area-inset-top); }
.pl.band { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--pl-sh, 240px) minmax(0, 1fr); }
.pl.band .pl-panel { border-left: 0; border-top: 1px solid var(--rule2); }
.pl.over { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); left: env(safe-area-inset-left); right: env(safe-area-inset-right); }
.pl.over .pl-bar { display: none; }
.pl.over .pl-fab { display: flex; }
.pl.over .pl-fs.want { display: flex; }
.pl.over .pl-panel { position: absolute; z-index: 8; right: 0; top: 0; bottom: 0; width: var(--pl-dw, min(380px, 48%)); border-left: 1px solid var(--rule2); background: rgba(11,11,12,.96);
  transform: translateX(105%); transition: transform .28s var(--ease); }
.pl.over.drawer .pl-panel { transform: none; box-shadow: var(--shadow); }
.pl.over.push.drawer { grid-template-columns: minmax(0, 1fr) var(--pl-dw); }
.pl.over.push.drawer .pl-panel { position: relative; grid-column: 2; grid-row: 1; width: auto; transform: none; box-shadow: none; background: var(--k0); }
.pl.over.push.drawer .pl-stage { grid-column: 1; grid-row: 1; }
.pl.over .pl-panel .pl-ph { display: flex; align-items: center; gap: 6px; padding: 8px 8px 0; }
.pl.over .pl-panel .pl-ph span { flex: 1; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.pl.over.drawer .pl-fab, .pl.over.drawer .pl-fs { opacity: 0; pointer-events: none; }

/* the home screen's sheet */
.pl-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; }
.pl-sheet { width: min(440px, 100%); max-height: min(720px, 92vh); overflow-y: auto; border-radius: var(--rs); background: var(--k1); border: 1px solid var(--rule2); box-shadow: var(--shadow); padding: 22px 20px 20px; }
.pl-sheet .pl-hico { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 14px; width: max-content; font: 600 12px var(--sans); color: var(--t2); }
.pl-sheet .pl-hico img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.pl-sheet h3 { margin: 0 0 4px; text-align: center; font: var(--font-head-wt) 21px var(--font-head); letter-spacing: -.02em; }
.pl-sheet .pl-sub { text-align: center; color: var(--t3); font-size: 13px; margin: 0 0 16px; }
.pl-ben { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pl-ben li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--t2); }
.pl-ben li b { color: var(--t1); font-weight: 600; }
.pl-ben li svg.i { width: 20px; height: 20px; flex: none; color: var(--r5); margin-top: 1px; }
.pl-steps { list-style: none; counter-reset: s; margin: 0; padding: 12px; border-radius: var(--rc); background: var(--k0); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.pl-steps li { counter-increment: s; display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; }
.pl-steps li::before { content: counter(s); font: 700 12px var(--mono); color: var(--t3); text-align: center; }
.pl-steps .pl-hi { width: 34px; height: 34px; border-radius: 9px; background: var(--k2); border: 1px solid var(--rule2); display: grid; place-items: center; color: #4da3ff; }
.pl-steps .pl-hi svg { width: 19px; height: 19px; }
.pl-steps .pl-hi img { width: 26px; height: 26px; border-radius: 6px; }
.pl-steps small { display: block; color: var(--t3); font-size: 12px; margin-top: 1px; }
.pl-sheet .pl-inapp { padding: 10px 12px; border-radius: var(--rc); border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); color: var(--t2); font-size: 13.5px; margin: 0; }
.pl-sheet .pl-acts { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

@media (max-width: 1100px) { .pl { --pl-panel: 320px; } }
@media (max-width: 1060px) { .pl-bar .pl-me .pl-full, .pl-bar .pl-lbl span { display: none; } }
@media (max-width: 760px) {
  .pl-games { grid-template-columns: 1fr; gap: 12px; }
  .pl-card .pl-art > .pl-live { display: none; }
  .pl-card .pl-ov { display: flex; position: absolute; inset: auto 0 0 0; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 40px 14px 12px; background: linear-gradient(180deg, transparent, rgba(8,8,10,.85) 55%); }
  .pl-card .pl-ov h2 { margin: 0 0 4px; font-size: 21px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
  .pl-card .pl-ov .btn { height: 38px; flex: none; }
  .pl-card .pl-body { padding: 12px 14px 14px; gap: 10px; }
  .pl-card .pl-body > h2, .pl-card .pl-row .btn.primary { display: none; }
  .pl-bar { height: 52px; }
  .pl-bar .pl-t { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
  .pl-bar h2 { font-size: 15px; line-height: 1.15; }
  .pl-bar .pl-me { font-size: 11.5px; line-height: 1.2; max-width: 100%; }
  .pl-bar .pl-live { display: none; }
  .pl-scrim { place-items: end center; padding: 0; }
  .pl-sheet { width: 100%; border-radius: var(--rs) var(--rs) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .pl-box.mini { width: 52vw; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); }
}
/* Play on a phone (the founder, 2026-10-29: "needs to work way way better on mobile web"): a slim bar; Pyx as the
   handheld on every phone held upright, the chat a strip under it that opens into a sheet over the game; the home
   bar's inset kept clear; no rubber-banding or double-tap zoom over the game; and the hub's two games nearer the top */
/* (a phone's only, upright or on its side: a computer's trackpad keeps its swipe back; review P3 of rel-386p) */
html:has(> body.pl-on > .pl.ph), body.pl-on:has(> .pl.ph) { overscroll-behavior: none; }
.pl.ph .pl-bar { touch-action: none; }
.pl.ph .pl-bar, .pl.ph .pl-ph, .pl.ph .pl-fab, .pl.ph .pl-fs, .pl.ph .pl-unfocus { -webkit-tap-highlight-color: transparent; }
.pl-shb { display: none; }
.pl.over.calm:not(.drawer) .pl-fab, .pl.over.calm:not(.drawer) .pl-fs.want { opacity: .42; transition: opacity .6s; }
/* (only a phone's own screen, under 600 px: .pl.ph from play.js handheld(); never an iPad mini or a narrow window on a
   computer: review P4 of rel-386) */
.pl.ph .pl-bar { height: 44px; gap: 4px; padding: 0 4px; }
.pl.ph .pl-bar .pl-t { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.pl.ph .pl-bar .pl-me { display: none; }
.pl.ph .pl-bar .pl-live { display: inline-flex; height: 20px; padding: 0 7px; font-size: 10px; }
.pl.ph .pl-bar .iconbtn, .pl.ph .pl-bar .pl-lbl { width: 38px; height: 38px; padding: 0; justify-content: center; border-color: transparent; background: none; }
.pl.ph .pl-bar .iconbtn.on { background: var(--t1); }
body.pl-band .pl.ph, body.pl-upright .pl.ph { bottom: env(safe-area-inset-bottom); }
.pl.band.ph .pl-panel .pl-ph { display: flex; flex: none; position: relative; align-items: center; gap: 6px; height: 36px; padding: 4px 4px 0 14px; cursor: pointer; border-bottom: 1px solid var(--rule); -webkit-user-select: none; user-select: none; }
.pl.band.ph .pl-ph::before { content: ''; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; border-radius: 2px; background: var(--rule2); transform: translateX(-50%); }
.pl.band.ph .pl-ph > a, .pl.band.ph .pl-ph .pl-x { display: none; }
.pl.band.ph .pl-ph span { flex: 1; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.pl.band.ph .pl-shb { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; }
.pl.band.ph:not(.sheet) .pl-shb svg { transform: rotate(180deg); }
.pl.band.ph:not(.sheet) .cp-panel .cp-head, .pl.band.ph:not(.sheet) .cp-panel .cp-foot.plain { display: none; }
.pl.band.ph .cp-panel .cp-feed { padding-bottom: 6px; }
/* (a phone without chat's strip: the handheld in the middle of the screen under the bar, not across its top with the
   lower half dark; the whole screen once the game says it plays taller than wide (play.js run.tall); prints, 2026-10-30) */
.pl.band.ph.nochat { grid-template-rows: auto minmax(0, 1fr); }
.pl.band.ph.nochat .pl-stage { align-self: center; height: var(--pl-sh); }
.pl.band.ph.sheet .pl-panel { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; z-index: 3; border-top: 0; box-shadow: 0 -14px 40px rgba(0,0,0,.6); }
/* (the handheld's tip over the picture, not over Pyx's buttons on the deck: review P4 of rel-386) */
.pl.band.ph .pl-tip { top: 10px; bottom: auto; }
.pl.sheet .pl-tip { display: none; }
.pl-head.ph { margin-bottom: 14px; }
.pl-head.ph p { font-size: 14px; }
.pl-games.ph .pl-card .pl-art { aspect-ratio: 2 / 1; min-height: 0; }
.pl-mark { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 30px; height: 30px; vertical-align: middle; }
.pl-mark i { border-radius: 2px; } .pl-mark i:nth-child(1) { background: var(--live); } .pl-mark i:nth-child(2) { background: var(--r1); } .pl-mark i:nth-child(3) { background: var(--ink); } .pl-mark i:nth-child(4) { background: var(--r2); }
.pl-fab .pl-mark { width: 14px; height: 14px; gap: 1.5px; }
.pl-curtain .pl-mark { animation: pl-pulse 1.2s var(--ease) infinite; }
@keyframes pl-pulse { 50% { transform: scale(.82); opacity: .7; } }

/* Play, after the play lab's adversarial reviews (2026-10-28) */
.pl-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.pl-stalenote { display: none; font: 600 11px var(--mono); color: var(--ink); white-space: nowrap; }
body.pl-stale .pl-stalenote { display: inline-flex; }
body.pl-upright header.top, body.pl-upright #nav { display: none !important; }
body.pl-upright .pl { top: env(safe-area-inset-top); }
.pl.upright { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 46%); }
.pl.upright .pl-panel { border-left: 0; border-top: 1px solid var(--rule2); }
.pl.upright.nochat, .pl.band.nochat { grid-template-rows: auto minmax(0, 1fr); }
.pl.band.nochat { grid-template-rows: auto var(--pl-sh, 240px) minmax(0, 1fr); }
.pl-unfocus { display: none; position: absolute; z-index: 6; left: 10px; top: 8px; height: 30px; padding: 0 10px; border-radius: 15px; background: rgba(8,8,10,.72); border: 1px solid rgba(255,255,255,.14); color: var(--t1); font: 600 11.5px var(--mono); align-items: center; gap: 6px; cursor: pointer; }
.pl-unfocus svg.i { width: 14px; height: 14px; }
.pl.over .pl-unfocus.want { display: flex; }
.pl-lost { position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--rc); background: rgba(8,8,10,.9); border: 1px solid var(--rule2); font-size: 13px; color: var(--t2); white-space: nowrap; }
.pl-lost .pl-x { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; color: var(--t3); cursor: pointer; }
.pl-box.mini .pl-lost { display: none; }
body.pl-band .devnote, body.pl-over .devnote, body.pl-upright .devnote { display: none !important; }
.pl-room { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pl-room > .cp.cp-panel { flex: 1; height: auto; }

/* review P1 of play-step1: Play's own layer sits above the game's box (z 5) and lets the stage show through, so the chat
   pill, Full screen, Leave focus, the tip and the drawer are never under the frame */
.pl { z-index: 6; background: transparent; pointer-events: none; }
.pl > * { pointer-events: auto; }
.pl > .pl-stage { pointer-events: none; background: transparent; }
body.pl-on { background: #050506; }
/* at 320 px the header's seven icons don't fit: the album button (Inventory has it too) steps aside while Play's shows */
@media (max-width: 340px) { .top .wallet:has(.playbtn:not(.hidden)) .albbtn { display: none !important; } }
/* review P2 of play-step1 (#3): after a sync reset the page waits for the game to stop before it reloads; the note says
   so wherever prints is in sight: the small window's bar, the game page's bar, and on a phone on its side the chat drawer */
.pl-mstale { display: none; color: var(--ink); font-weight: 600; }
body.pl-stale .pl-mnow { display: none; }
body.pl-stale .pl-mstale { display: inline; }
.pl-stalerow { display: none; }
body.pl-stale .pl.over .pl-stalerow { display: block; margin: 8px 10px 0; padding: 7px 10px; border-radius: var(--rc); border: 1px solid var(--rule2); font: 600 11px/1.4 var(--mono); color: var(--ink); }
/* review P3 of rel-play: from 1001 to 1060 px the header's search field, five tabs and its icons don't fit with Play's
   button: the album button (Inventory has it too) steps aside, as at 320 px */
@media (min-width: 1001px) and (max-width: 1060px) { .top .wallet:has(.playbtn:not(.hidden)) .albbtn { display: none !important; } }
/* and on the chat page the small window keeps clear of the composer: inside the room's info column where there is one,
   else above the composer at its tallest */
body.cp-in .pl-box.mini { bottom: 216px; }
@media (min-width: 1101px) { body.cp-in .pl-box.mini { bottom: 16px; width: 248px; } }
/* the dock docked beside the page (the founder's ask, 2026-10-29): full height down the right, the page making room */
.cdk-railb.on { background: var(--t1); color: var(--k0); }
.cdk.rail { top: 0; right: 0; bottom: 0; width: 360px; height: auto; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; animation: none; z-index: 21; }
.cdk.rail .cdk-top { padding-top: 14px; }
html.cdk-railed body { padding-right: 360px; }
html.cdk-railed .chatfab, .chatfab.railed { display: none; }
@media (max-width: 760px) { .cdk-railb { display: none; } }
/* the window placed by hand on a computer: moved by its top bar, sized by its corner (the founder, 2026-10-29) */
@media (min-width: 761px) {
  .cdk:not(.rail) { resize: both; min-width: 300px; min-height: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .cdk:not(.rail) .cdk-top { cursor: grab; user-select: none; }
  .cdk.moving { cursor: grabbing; transition: none; animation: none; box-shadow: 0 40px 90px -20px rgba(0,0,0,.95); }
  .cdk.moving .cdk-top { cursor: grabbing; }
  .cdk.moving .cdk-room { pointer-events: none; }
}
/* docked beside the page, the page's own fixed layers make room too: Play's frame (its game laid over its stage
   follows), and Play's small window sits left of the rail; the dock's button clear of that small window (review R2 of
   rel-381) */
/* (the header in the narrower page beside the rail: as on a narrow computer screen, its search an icon) */
html.cdk-railed .top { gap: 20px; padding: 0 20px; }
html.cdk-railed nav { gap: 18px; }
html.cdk-railed .searchbtn { min-width: 0; }
html.cdk-railed .searchbtn .sfield { display: none; }
@media (max-width: 1099px) { .cdk-railb { display: none; } }
html.cdk-railed .pl { right: 360px; }
html.cdk-railed .pl-box.mini { right: 376px; }
body:has(.pl-box.mini) .chatfab { bottom: calc(32px + min(340px, 44vw) * 11 / 16); }
@media (max-width: 760px) { body:has(.pl-box.mini) .chatfab { bottom: calc(86px + 52vw * 11 / 16 + env(safe-area-inset-bottom)); } }
/* the dock's entrance played once; the dock's button above a phone's bid bar too (review R1 of rel-381) */
.cdk.shown { animation: none; }
@media (max-width: 760px) { body:has(.bidbar.show) .chatfab { bottom: calc(140px + env(safe-area-inset-bottom)); } }
/* the composer's foot only when it has something to say (the founder, 2026-10-29) */
.cp-foot.plain:has(.cp-cc:empty) { display: none; }
/* the window's room picker (the founder, 2026-10-29): the room named in the top bar, the rooms listed under it */
.cdk-chips { display: none !important; }
.cdk .cp-panel .cp-head { display: none; }
.cdk-top { position: relative; }
.cdk-sp { flex: 1; }
.cdk-pick { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 70%; height: 36px; padding: 0 10px 0 8px; margin-left: -8px; border: 0; border-radius: 10px; background: none; color: var(--t1); font: var(--font-head-wt) 16px var(--font-head); cursor: pointer; }
.cdk-pick:hover, .cdk-pick[aria-expanded="true"] { background: var(--k2); }
.cdk-pick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
.cdk-pick .ri { width: 20px; height: 20px; display: grid; place-items: center; color: var(--t2); flex: none; }
.cdk-pick .ri .i, .cdk-pick .ri svg { width: 17px; height: 17px; }
.cdk-pick > .i:last-child { width: 15px; height: 15px; color: var(--t3); flex: none; }
.cdk-pick .n, .cdk-ri .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--live); color: #fff; font: 700 10.5px/18px var(--mono); text-align: center; font-style: normal; flex: none; }
.cdk-list { position: absolute; left: 8px; right: 8px; top: 52px; z-index: 3; max-height: min(420px, calc(100% - 70px)); overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--k2); border: 1px solid var(--rule2); box-shadow: 0 18px 40px -12px rgba(0,0,0,.8); }
.cdk-list[hidden] { display: none; }
.cdk-ri { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--t2); text-align: left; cursor: pointer; }
.cdk-ri:hover { background: rgba(255,255,255,.05); color: var(--t1); }
.cdk-ri.on { background: var(--k3); color: var(--t1); }
.cdk-ri .ri { width: 20px; height: 20px; display: grid; place-items: center; color: var(--t3); flex: none; }
.cdk-ri .ri svg { width: 17px; height: 17px; }
.cdk-ri .rn { flex: 1; min-width: 0; display: grid; }
.cdk-ri .rn b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdk-ri .rn small { font-size: 12px; color: var(--t3); }
.cdk-ri .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; }
.cdk-lf { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.cdk-lf:empty { display: none; }
.cdk-lf button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 9px; background: none; color: var(--t2); font-size: 13px; cursor: pointer; }
.cdk-lf button:hover { background: rgba(255,255,255,.05); color: var(--t1); }
.cdk-lf .i { width: 16px; height: 16px; }
@media (max-width: 760px) { .cdk-ri { min-height: 50px; } .cdk-pick { font-size: 17px; height: 44px; } }
/* ---------- the Floor on a touch screen with the menu down the left (a fold's inner screen, a tablet; the founder,
   2026-10-29): the page clear of the menu and of the camera's side, no hover toolbar, the box on the keyboard ---------- */
@media (pointer: coarse) and (min-width: 600px), (pointer: coarse) and (max-height: 519px) and (min-aspect-ratio: 1/1) {
  .cp { left: var(--navx); right: env(safe-area-inset-right); }
}
@media (pointer: coarse) and (min-width: 761px) {
  .chatfab { right: calc(24px + env(safe-area-inset-right)); }
  .cdk:not(.rail) { right: calc(24px + env(safe-area-inset-right)); }
}
@media (max-width: 760px) { body.cp-in .cp { left: 0; right: 0; } }
@media (hover: none) { .cp-acts { display: none; } }
.cp.typing .cp-comp { padding-bottom: 10px; }

/* a print's own traits as links to its collection's Buy now, filtered to that trait (the founder, 2026-10-29) */
.ptraits a.trait, .ptraits a.pt { color: inherit; text-decoration: none; cursor: pointer; }
.ptraits a.trait:hover, .ptraits a.pt:hover { border-color: rgba(255,255,255,.35); }
.ptraits a.trait:focus-visible, .ptraits a.pt:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }

/* a print's picture hidden until it has loaded: one not drawn yet (a 404, then drawn on the page) shows no broken picture
   (the founder, 2026-10-30) */
img.aimg:not(.ready) { visibility: hidden; }