@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;
  /* 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; }
.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); } }
.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); }
.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); }
.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 { display: inline-flex; align-items: center; gap: 6px; }
.offerbox .oqn .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 */
.mmiss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -10px 0 22px; }
.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; }
.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(4, 1fr); }
.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 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; }
@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; }
.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: 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; }
.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; }
/* 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; }
}
@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; }
.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; }
.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, .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: none; }
  .toolbar > .chips, .page > .chips { margin-left: -16px; margin-right: -16px; padding: 0 16px; flex: 1 1 100%; }
  .toolbar > .chips::-webkit-scrollbar, .page > .chips::-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; }
  .glare { display: none; }
  .card.sel::after { top: 12px; right: 12px; }

  /* rails: rows of prints slide sideways and snap */
  .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 { 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; }
.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); }

/* 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; }
.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 { -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; gap: 8px; }
@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: 42px; height: 42px; 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); }
.playhint { position: relative; z-index: 1; margin-top: 10px; text-align: center; color: var(--dim); font-size: 12.5px; }

/* ---------- 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; }
.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; } }

.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; }
.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; }
.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; }
.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; }
}
@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 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; }
.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; }
.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); }
/* 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%; }
}
@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; }

/* 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; }
}
@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; }
.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; }
  .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(7, minmax(64px, 1fr)); }
.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 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; }
.after .bidhint { margin: 0 0 6px; color: var(--t2); }
.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); }
.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); }
.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; }


/* 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 { min-width: 2ch; text-align: center; font-size: 24px; }
.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; }
@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; }
.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 { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; cursor: pointer; }
.tsort .tmiss[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); }
.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; }
.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); }
.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 .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; }
}

/* =====================================================================
   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; }
.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; }
.mi:disabled { opacity: .4; }
/* 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)); }
  .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; }
  .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; }
  .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; }
  .pmore.open::before { content: ''; position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.55); }
  .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; }
.q { padding: 10px 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; color: var(--t2); }
.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; }
  .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 { 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); }
  .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; }
  .bulkbar .bb2 { margin-top: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bulkbar .bb2 .btn { flex: 1 0 auto; padding: 0 12px; }
  .bulkbar .bb1 .btn { padding: 0 8px; }
}
/* (fixes after looking at the print page and Home) */
.pd-info > .actions > .btn:not(.sq) { flex: 1 1 0; }
.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; }
.crow.meRow { background: none; box-shadow: inset 2px 0 0 var(--t1); padding-left: 10px; }
.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); }
@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); }
.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); }
.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(4, 1fr); }
.drop.soon .fl { aspect-ratio: 1; font: 600 40px var(--display); color: var(--t1); background: var(--k2) !important; }
.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); }
.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: #f3f1ec; }
.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: #f3f1ec; }
.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: #0b0b0c; 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: #3a3935; }
.pk2 .pk2-label em { padding: 0; border: 0; border-radius: 0; background: none; color: #6b6964; 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(11,11,12,.38); }
.pk2 .pk2-cut i { background: #0b0b0c; box-shadow: none; height: 3px; top: -2.5px; border-radius: 0; }
.pk2 .pk2-cut span { display: inline-flex; align-items: center; gap: 4px; color: #3a3935; 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 50px 22px rgba(255,255,255,.75), 0 0 120px 40px rgba(var(--amb), .55); }
.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; }
.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: #f3f1ec; padding: 12px 12px 10px; border-radius: 3px; }
.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: #0b0b0c; font-weight: 600; }
.dk .front .card-sub, .dk .front .card-sub .ed, .deal.summary .card-sub, .deal.summary .card-sub .ed { color: #5d5b56; }
.dk .front .odds, .deal.summary .card .odds { color: #2a2926; }
.dk .front .card-foot, .deal.summary .card-foot { border-top-color: rgba(11,11,12,.14); }
.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; }
.deal.summary .pulpfoot .btn { background: #e6e3dc; color: #0b0b0c; }
.deal.summary .pulpfoot .btn.danger { color: #c4302b; }
.deal.summary .pulpfoot .btn.sellb.primary, .deal.summary .pulpfoot .btn.sellb.glow { background: #0b0b0c; color: var(--t1); }
.stage .after .taphint, .after .bidhint { color: var(--t3); }
@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; }


/* =====================================================================
   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); }
.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); }
.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); }
@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); }
.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); }