/* Dot Trading Post — the board's styles. */
:root {
  --paper:#F3EAD3; --card:#FFFCF4; --sunk:#EADFC4;
  --ink:#121212; --muted:#4B4740; --faint:#8C867A;
  --line:#121212; --line-soft:rgba(18,18,18,.14);
  --red:#E8392B; --yellow:#FFD23F; --cyan:#27B2E8; --blue:#2F56D6; --pink:#F2518F; --green:#1DB36A; --purple:#7B4FD6; --orange:#FF8A2B;
  --have:var(--blue); --want:var(--red); --dot:var(--green); --pop:var(--yellow); --plum:var(--purple); --rose:var(--pink); --teal:var(--cyan); --stop:var(--red);
  --have-soft:#E3EAFF; --want-soft:#FFE4E0; --dot-soft:#DDF5E8; --dot-off:#FFFCF4;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:8px; --bw:2.5px; --sh:4px 4px 0 var(--ink); --sh2:6px 6px 0 var(--ink);
  color-scheme:light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--paper); }
body { margin:0; background:var(--paper); color:var(--ink); font:15.5px/1.5 var(--body); -webkit-font-smoothing:antialiased; min-height:100vh; }
/* the paper: a cyan halftone top-left, a magenta one bottom-right, each fading out */
body::before, body::after { content:""; position:fixed; z-index:-1; pointer-events:none; width:70vw; height:70vh; }
body::before { top:-10vh; left:-10vw; background:radial-gradient(circle, var(--cyan) 1.6px, transparent 1.9px) 0 0/9px 9px; -webkit-mask-image:radial-gradient(circle at 20% 20%, #000, transparent 65%); mask-image:radial-gradient(circle at 20% 20%, #000, transparent 65%); opacity:.55; }
body::after { bottom:-20vh; right:-10vw; background:radial-gradient(circle, var(--pink) 1.6px, transparent 1.9px) 0 0/9px 9px; -webkit-mask-image:radial-gradient(circle at 80% 80%, #000, transparent 65%); mask-image:radial-gradient(circle at 80% 80%, #000, transparent 65%); opacity:.5; }
button, input, textarea, select { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
img { max-width:100%; }
::selection { background:var(--yellow); }
.disp { font-family:var(--display); font-weight:400; letter-spacing:.02em; }

/* header */
.top { position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:3px solid var(--ink); }
.top-in { max-width:1080px; margin:0 auto; padding-block:10px; padding-inline:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.brand { font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.08em; display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; color:inherit; text-transform:uppercase; }
.brand svg { width:38px; height:38px; display:block; }
.brand .t { line-height:1; }
.brand .t small { display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--muted); margin-top:2px; }
.tabs { display:flex; gap:0; background:var(--card); border:var(--bw) solid var(--ink); border-radius:999px; overflow:hidden; box-shadow:3px 3px 0 var(--ink); }
.tab { border:0; background:none; padding:9px 16px; cursor:pointer; font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); white-space:nowrap; border-right:var(--bw) solid var(--ink); }
.tab:last-child { border-right:0; }
.tab:hover { background:var(--sunk); }
.tab[aria-selected="true"] { background:var(--ink); color:var(--yellow); }
.tab .badge { display:inline-block; min-width:19px; padding:0 5px; margin-left:5px; border-radius:999px; background:var(--red); color:#fff; font-family:var(--mono); font-size:10.5px; line-height:19px; font-weight:600; vertical-align:2px; }
.me { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.wal { display:inline-flex; align-items:center; gap:8px; border:var(--bw) solid var(--ink); background:var(--card); color:var(--ink); padding:7px 13px 7px 10px; border-radius:999px; cursor:pointer; font-size:12.5px; font-weight:700; font-family:var(--mono); box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; }
.wal s { width:10px; height:10px; border-radius:50%; background:var(--card); border:2px solid var(--ink); display:block; }
.wal:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.wal.on { background:var(--dot-soft); }
.wal.on s { background:var(--green); }
.linkbtn { background:none; border:0; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-size:13px; padding:0; }
.linkbtn:hover { color:var(--ink); }
@media (max-width:640px) {
  .tabs { order:3; flex-basis:100%; }
  .tab { flex:1; text-align:center; padding-inline:8px; }
  .brand { font-size:15px; } .brand svg { width:32px; height:32px; }
}

main { max-width:1080px; margin:0 auto; padding-inline:18px; padding-block:22px 80px; }
.note { border:var(--bw) solid var(--ink); background:var(--card); border-radius:var(--r); padding:14px 16px; margin-bottom:18px; font-size:14px; color:var(--muted); box-shadow:var(--sh); }
.note b { color:var(--ink); font-weight:600; }
.note.warn { background:#FFF4D1; }
.note.bad { background:var(--want-soft); }
.nudge { display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--yellow); color:var(--ink); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:12px 16px; margin-bottom:16px; font-size:14px; font-weight:600; box-shadow:var(--sh); position:relative; overflow:hidden; }
.nudge::before { content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(18,18,18,.18) 1.3px, transparent 1.6px) 0 0/7px 7px; -webkit-mask-image:linear-gradient(90deg, transparent 55%, #000); mask-image:linear-gradient(90deg, transparent 55%, #000); pointer-events:none; }
.nudge .btn { background:var(--ink); border-color:var(--ink); color:var(--yellow); padding:7px 14px; font-size:13px; margin-left:auto; box-shadow:none; position:relative; }

/* board bar */
.bar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.search { flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:9px; background:var(--card); border:var(--bw) solid var(--ink); border-radius:999px; padding:0 16px; box-shadow:var(--sh); }
.search:focus-within { background:#fff; }
.search input { flex:1; min-width:0; border:0; background:none; padding:11px 0; outline:none; color:var(--ink); }
.search input::placeholder { color:var(--faint); }
.search svg { flex:none; color:var(--ink); }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { --c:var(--ink); border:2px solid var(--ink); background:var(--card); color:var(--ink); padding:7px 13px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:700; white-space:nowrap; box-shadow:2px 2px 0 var(--ink); transition:transform .08s, box-shadow .08s; position:relative; }
.chip::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--c); border:1.5px solid var(--ink); display:inline-block; margin-right:7px; vertical-align:-1px; }
.chip.all::before { background:var(--ink); }
.chip:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.chip[aria-pressed="true"] { background:var(--c); color:#fff; }
.chip[aria-pressed="true"]::before { background:#fff; }
.chip.all[aria-pressed="true"] { background:var(--ink); color:var(--yellow); }
.chip[aria-pressed="true"][style*="--pop"], .chip[aria-pressed="true"][style*="yellow"] { color:var(--ink); }
.catpick { background:var(--card); border:2px solid var(--ink); border-radius:999px; padding:7px 12px; font-size:13px; color:var(--ink); max-width:100%; box-shadow:2px 2px 0 var(--ink); }
.catrow { display:flex; gap:10px; align-items:center; margin-bottom:20px; }
.map { height:440px; border:var(--bw) solid var(--ink); border-radius:var(--r); box-shadow:var(--sh2); margin:6px 0 18px; overflow:hidden; background:var(--sunk); }
.leaflet-popup-content-wrapper { border:2px solid var(--ink); border-radius:6px; box-shadow:3px 3px 0 var(--ink); font:13.5px/1.4 var(--body); color:var(--ink); background:var(--card); }
.leaflet-popup-tip { background:var(--ink); }
.leaflet-popup-content b { font-family:var(--display); display:block; margin-bottom:2px; }
.leaflet-popup-content a { color:var(--blue); font-weight:700; }
.leaflet-container { font:inherit; }
#mapBtn[aria-pressed="true"] { background:var(--ink); color:var(--yellow); }
.dist { font-family:var(--mono); font-size:11px; color:var(--green); font-weight:600; }
@media (max-width:640px) {
  .catrow { overflow-x:auto; scrollbar-width:none; margin-inline:-18px; padding:4px 18px 6px; }
  .catrow::-webkit-scrollbar { display:none; }
  .chips { flex-wrap:nowrap; }
}

/* cards: comic panels */
.grid { display:grid; gap:20px; align-items:start; }
@media (min-width:780px){ .grid { grid-template-columns:1fr 1fr; } }
.item { --c:var(--faint); position:relative; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0; box-shadow:var(--sh2); transition:transform .1s, box-shadow .1s; overflow:hidden; }
.item::before { content:""; position:absolute; top:-30px; right:-30px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, var(--c) 1.8px, transparent 2.1px) 0 0/8px 8px; -webkit-mask-image:radial-gradient(circle at 70% 30%, #000 20%, transparent 70%); mask-image:radial-gradient(circle at 70% 30%, #000 20%, transparent 70%); opacity:.7; pointer-events:none; }
.item > * { position:relative; }
.item:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.item.gone { opacity:.6; }
.item.lit { outline:4px solid var(--yellow); outline-offset:2px; }
.item.gone:hover { transform:none; box-shadow:var(--sh2); }
.item h3 { font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em; line-height:1.15; margin:0; text-wrap:balance; }
.desc { margin:0; color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.pics { display:grid; grid-template-columns:1fr; gap:4px; border:2px solid var(--ink); border-radius:6px; overflow:hidden; background:var(--ink); }
.pics.many { grid-template-columns:1fr 1fr; }
.gallery { position:relative; border:2px solid var(--ink); border-radius:6px; overflow:hidden; background:var(--sunk); }
.gallery .track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; outline:none; }
.gallery .track::-webkit-scrollbar { display:none; }
.gallery .track:focus-visible { box-shadow:inset 0 0 0 3px var(--blue); }
.gallery img { flex:0 0 100%; width:100%; aspect-ratio:4/3; object-fit:cover; display:block; scroll-snap-align:center; scroll-snap-stop:always; background:var(--sunk); }
.gnav { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:2px solid var(--ink); background:var(--card); color:var(--ink); font-size:22px; line-height:26px; cursor:pointer; box-shadow:2px 2px 0 var(--ink); padding:0; }
.gnav.prev { left:8px; } .gnav.next { right:8px; }
.gnav:hover { background:var(--yellow); }
@media (hover:none) { .gnav { display:none; } }
.gdots { position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.gdots s { width:8px; height:8px; border-radius:50%; background:rgba(255,252,244,.75); border:1.5px solid var(--ink); display:block; }
.gdots s.on { background:var(--yellow); }
.pics img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--sunk); }
.sides { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch; }
.side { min-width:0; border-radius:6px; padding:9px 11px; border:2px solid var(--ink); background:var(--card); }
.side.h { background:var(--have-soft); } .side.w { background:var(--want-soft); }
.side .k { font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; display:block; margin-bottom:3px; }
.side.h .k { color:var(--blue); } .side.w .k { color:var(--red); }
.side .v { font-size:13.5px; overflow-wrap:anywhere; font-weight:500; }
/* two dots converging: the trade mark */
.arrow { align-self:center; width:34px; height:22px; position:relative; font-size:0; }
.arrow::before, .arrow::after { content:""; position:absolute; top:3px; width:16px; height:16px; border-radius:50%; border:2px solid var(--ink); }
.arrow::before { left:2px; background:var(--blue); } .arrow::after { right:2px; background:var(--red); mix-blend-mode:multiply; }
.foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:2px dashed var(--line-soft); padding-top:12px; margin-top:auto; }
.who { font-size:12.5px; color:var(--muted); margin-right:auto; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.who b { color:var(--ink); font-weight:700; }
.av { width:28px; height:28px; border-radius:50%; background:var(--c); border:2px solid var(--ink); color:#fff; font-family:var(--display); font-weight:700; font-size:12.5px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; border:2px solid var(--ink); color:var(--ink); background:var(--card); font-weight:600; }
.tag.ok { background:var(--green); color:#fff; }
.tag.mine { background:var(--blue); color:#fff; }
.tag.hold { background:var(--yellow); }
.tag.proof { background:var(--green); color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:6px; box-shadow:2px 2px 0 var(--ink); }
.tag.proof s { width:7px; height:7px; border-radius:50%; background:#fff; display:block; }
.tag.off { color:var(--faint); border-style:dashed; }

.dots { display:inline-flex; align-items:center; gap:3px; }
.dots s { width:9px; height:9px; border-radius:50%; background:var(--dot-off); border:1.5px solid var(--ink); display:block; }
.dots s.on { background:var(--green); }
.dots em { font-style:normal; font-family:var(--mono); font-size:11px; color:var(--muted); margin-left:3px; }

/* buttons */
.btn { border:var(--bw) solid var(--ink); background:var(--card); color:var(--ink); padding:9px 17px; border-radius:999px; cursor:pointer; font-size:14px; font-weight:700; box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn.ghost { background:transparent; box-shadow:none; }
.btn.ghost:hover { background:var(--card); box-shadow:2px 2px 0 var(--ink); }
.btn.ok { background:var(--yellow); }
.btn.press { background:var(--green); color:#fff; display:inline-flex; align-items:center; gap:9px; }
.btn.big { padding:13px 24px; font-family:var(--display); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13.5px; }
.btn.no { background:var(--card); color:var(--red); }
.btn.no:hover { background:var(--want-soft); }
.btn.press s { width:11px; height:11px; border-radius:50%; background:#fff; border:2px solid var(--ink); display:block; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.presshint { font-size:12.5px; color:var(--muted); }

/* forms */
.form { background:
    linear-gradient(var(--ink),var(--ink)) left 8px top 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) left 8px top 8px/2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 8px top 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) right 8px top 8px/2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left 8px bottom 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) left 8px bottom 8px/2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 8px bottom 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) right 8px bottom 8px/2px 14px no-repeat,
    var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:26px; display:grid; gap:16px; max-width:640px; box-shadow:var(--sh2); }
.f label, .f .lbl { display:block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.f .hint { font-family:var(--body); font-size:12px; color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none; }
.f input, .f textarea, .f select { width:100%; background:#fff; border:2px solid var(--ink); border-radius:6px; padding:10px 12px; outline:none; color:var(--ink); }
.f input::placeholder, .f textarea::placeholder { color:var(--faint); }
.f input:focus, .f textarea:focus, .f select:focus { box-shadow:3px 3px 0 var(--blue); }
.f textarea { min-height:80px; resize:vertical; }
.rowf { display:grid; gap:14px; }
@media (min-width:560px){ .rowf { grid-template-columns:1fr 1fr; } }
details.more { border:2px dashed var(--ink); border-radius:6px; padding:0 14px; }
details.more summary { cursor:pointer; padding:12px 0; font-weight:700; font-size:14px; color:var(--ink); list-style:none; display:flex; align-items:center; gap:9px; }
details.more summary::-webkit-details-marker { display:none; }
details.more summary::before { content:"+"; font-family:var(--mono); font-size:18px; line-height:1; }
details.more[open] summary::before { content:"\2013"; }
details.more > :not(summary) { margin-bottom:14px; }
.filebtn { position:relative; display:inline-flex; align-items:center; gap:9px; border:2px dashed var(--ink); color:var(--ink); background:var(--have-soft); padding:10px 16px; border-radius:999px; cursor:pointer; font-weight:700; font-size:14px; }
.filebtn input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.filebtn:has(input:disabled) { opacity:.45; cursor:not-allowed; }
.filebtn svg { flex:none; }
.thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.thumb { position:relative; width:74px; height:74px; border-radius:6px; overflow:hidden; border:2px solid var(--ink); background:var(--sunk); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumbx { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; border:2px solid var(--ink); background:var(--yellow); color:var(--ink); font-size:14px; line-height:16px; padding:0; cursor:pointer; font-weight:700; }
.assetbox { border:2px solid var(--ink); border-radius:6px; padding:14px; background:var(--paper); }
.tick { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; cursor:pointer; margin:0; }
.tick input { width:auto; accent-color:var(--ink); }
.assetline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nftname { font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.pics.nft img { aspect-ratio:1/1; object-fit:contain; background:var(--sunk); }
.artph { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; color:var(--faint); font-family:var(--mono); font-size:12px; background:var(--sunk); }
.artph.small { aspect-ratio:auto; padding:10px; background:none; }
.nftpreview { display:flex; gap:12px; align-items:center; margin-top:14px; padding:10px; border:2px solid var(--ink); border-radius:6px; background:var(--card); }
.nftpreview img { width:76px; height:76px; border-radius:4px; object-fit:cover; border:2px solid var(--ink); background:var(--sunk); flex:none; }
.nftpreview b { display:block; font-size:14px; }
.nftpreview span { font-family:var(--mono); font-size:11px; color:var(--muted); }
.assetmeta { font-family:var(--mono); font-size:11px; color:var(--faint); overflow-wrap:anywhere; min-width:0; }
.chain { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:3px 8px; border-radius:4px; border:2px solid var(--ink); color:#fff; background:var(--blue); text-decoration:none; font-weight:600; }
.held { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; border:2px solid var(--ink); color:var(--muted); }
.held.yes { color:#fff; background:var(--green); }
.held.no { color:#fff; background:var(--red); }

h2 { font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-.02em; line-height:1.05; margin:0 0 6px; }
.lede { color:var(--muted); font-size:14.5px; margin:0 0 18px; max-width:62ch; }
.sub { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:30px 0 12px; display:flex; align-items:center; gap:12px; }
.sub::before { content:"//"; color:var(--red); }
.sub::after { content:""; flex:1; height:2px; background:var(--ink); }
.sub:first-child { margin-top:0; }
.empty { border:var(--bw) dashed var(--ink); border-radius:var(--r); padding:34px 20px; text-align:center; color:var(--muted); font-size:14px; background:rgba(255,252,244,.6); }
.empty strong { display:block; font-family:var(--display); font-size:19px; color:var(--ink); font-weight:700; letter-spacing:-.01em; margin-bottom:5px; }
.empty .btn { margin-top:14px; }

.offer { background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:16px; display:grid; gap:11px; box-shadow:var(--sh); }
.offer .on { font-size:12.5px; color:var(--muted); }
.offer .on b { color:var(--ink); font-weight:700; }
.offer .msg { font-size:13.5px; color:var(--ink); border:2px solid var(--ink); border-radius:12px 12px 12px 2px; padding:8px 12px; background:#fff; display:inline-block; }
.acts { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* standing */
.standing { position:relative; overflow:hidden; background:
    linear-gradient(var(--ink),var(--ink)) left 8px top 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) left 8px top 8px/2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 8px top 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) right 8px top 8px/2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left 8px bottom 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) left 8px bottom 8px/2px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right 8px bottom 8px/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) right 8px bottom 8px/2px 14px no-repeat,
    var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:26px; display:grid; gap:14px; margin-bottom:22px; box-shadow:var(--sh2); }
.standing::before { content:""; position:absolute; top:-40px; right:-40px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, var(--yellow) 2.2px, transparent 2.5px) 0 0/9px 9px; -webkit-mask-image:radial-gradient(circle at 70% 30%, #000 25%, transparent 70%); mask-image:radial-gradient(circle at 70% 30%, #000 25%, transparent 70%); pointer-events:none; }
.score { display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:relative; }
.score .n { font-family:var(--display); font-weight:700; font-size:60px; line-height:1; letter-spacing:-.04em; color:var(--ink); padding-right:4px; }
.score .dots s { width:12px; height:12px; }
.score .lab { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--yellow); border:2px solid var(--ink); padding:3px 10px; border-radius:4px; }
.ledger { display:grid; gap:7px; position:relative; }
.ledger div { display:flex; gap:12px; font-size:13.5px; align-items:baseline; }
.ledger .amt { font-family:var(--mono); color:var(--green); font-weight:700; min-width:34px; }
.ledger .amt.zero { color:var(--faint); font-weight:400; }
.ledger .what { color:var(--muted); }
.signedas { font-size:12.5px; color:var(--faint); font-family:var(--mono); font-weight:400; }

/* sheets */
.veil { position:fixed; inset:0; background:rgba(18,18,18,.55); display:flex; align-items:flex-end; justify-content:center; z-index:40; padding:16px; }
@media (min-width:640px){ .veil { align-items:center; } }
.sheet { background:var(--card); border:var(--bw) solid var(--ink); border-radius:12px; padding:22px; width:100%; max-width:480px; max-height:86vh; overflow-y:auto; display:grid; gap:14px; box-shadow:8px 8px 0 var(--ink); }
.sheet h3 { font-family:var(--display); font-weight:700; font-size:21px; margin:0; letter-spacing:-.015em; line-height:1.1; }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:20px; background:var(--ink); color:var(--yellow); padding:12px 18px; border-radius:999px; font-size:13.5px; font-weight:600; z-index:60; border:2px solid var(--yellow); box-shadow:4px 4px 0 var(--yellow); max-width:calc(100% - 32px); text-align:center; }
.wlist { display:grid; gap:10px; }
.wlist a, .wlist button { display:flex; gap:12px; align-items:center; width:100%; text-align:left; padding:11px 14px; border:2px solid var(--ink); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; font-weight:700; font-size:14.5px; text-decoration:none; box-shadow:3px 3px 0 var(--ink); }
.wlist a:hover, .wlist button:hover { background:var(--yellow); }
.wlist img, .wlist .wi { width:32px; height:32px; border-radius:6px; border:2px solid var(--ink); flex:none; background:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:16px; }
.wlist small { display:block; font-weight:400; color:var(--muted); font-size:12.5px; }
.wrows { display:grid; gap:8px; margin:14px 0; }
.wrow { display:flex; gap:8px; align-items:center; padding:8px 10px; border:2px solid var(--ink); border-radius:8px; background:#fff; }
.wrow .waddr { flex:1; min-width:0; font-family:var(--mono); font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.wrow .btn.sm { padding:5px 10px; font-size:12.5px; box-shadow:none; }
.proofnote { margin:0; padding:0 0 0 20px; display:grid; gap:8px; font-size:14px; color:var(--muted); }
.proofnote b { color:var(--ink); font-weight:700; }
.code { font-family:var(--mono); font-weight:600; font-size:32px; letter-spacing:.34em; color:var(--ink); background:var(--yellow); border:var(--bw) solid var(--ink); border-radius:6px; padding:8px 8px 8px 20px; display:inline-block; box-shadow:var(--sh); line-height:1; }
.verdict { border-radius:6px; padding:11px 13px; font-size:13.5px; border:2px solid var(--ink); }
.verdict.ok { background:var(--dot-soft); }
.verdict.bad { background:var(--want-soft); }
.verdict ul { margin:6px 0 0; padding-left:18px; }

/* sign-in: the cover */
.gate { position:relative; max-width:760px; margin:18px auto 0; display:grid; gap:14px; }
.eyebrow { font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:10px; background:var(--card); border:2px solid var(--ink); padding:5px 12px; border-radius:4px; width:max-content; box-shadow:3px 3px 0 var(--ink); font-weight:600; }
.eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--red); border:1.5px solid var(--ink); }
.gate h2 { font-size:clamp(28px,4.6vw,46px); line-height:.98; letter-spacing:-.035em; text-transform:uppercase; margin:0; text-wrap:balance; }
.gate h2 em { font-style:normal; background:var(--yellow); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .14em; box-shadow:4px 4px 0 var(--ink); }
.steps { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){
  .steps { grid-template-columns:1fr; gap:10px; }
  .step { grid-template-columns:auto 1fr; column-gap:12px; row-gap:0; padding:22px 14px 12px; align-items:center; }
  .step i { grid-row:span 2; margin:0; }
}
.step { --c:var(--green); display:grid; gap:4px; padding:28px 16px 16px; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); font-size:13.5px; color:var(--muted); position:relative; overflow:hidden; box-shadow:var(--sh); }
.step::before { content:""; position:absolute; top:0; left:0; right:0; height:14px; background:radial-gradient(circle, var(--c) 1.7px, transparent 2px) 0 0/7px 7px; border-bottom:2px solid var(--ink); opacity:.9; }
.step i { width:32px; height:32px; border-radius:50%; background:var(--c); border:2px solid var(--ink); color:#fff; font-style:normal; font-family:var(--mono); font-weight:600; display:inline-flex; align-items:center; justify-content:center; font-size:13px; margin-bottom:4px; box-shadow:2px 2px 0 var(--ink); }
.step > * { position:relative; }
.step b { color:var(--ink); font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; }
.gateform { display:flex; gap:10px; flex-wrap:wrap; background:var(--card); border:var(--bw) solid var(--ink); border-radius:999px; padding:8px 8px 8px 10px; box-shadow:var(--sh2); }
.gateform input { flex:1 1 220px; min-width:0; background:transparent; border:0; padding:12px 14px; font-size:16px; outline:none; color:var(--ink); }
.gateform input::placeholder { color:var(--faint); }
.gateform .btn { flex:0 0 auto; }
@media (max-width:560px){ .gateform { border-radius:16px; } .gateform .btn { flex-basis:100%; } }
.gate .fine { margin:0; color:var(--muted); font-size:13px; }
#authMsg { margin:0; color:var(--ink); font-weight:600; background:var(--dot-soft); border:2px solid var(--ink); padding:10px 14px; border-radius:6px; }
#authMsg.bad { background:var(--want-soft); }
.gate { margin-bottom:22px; }
#wantedBox { margin:0 0 22px; }
#wantedBox .sub .hint { text-transform:none; letter-spacing:0; font-family:var(--body); font-weight:400; }
.wantrow { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px, 240px); gap:14px; overflow-x:auto; padding:4px 6px 12px 2px; }
.wcard { --c:var(--faint); display:flex; flex-direction:column; gap:4px; background:var(--card); border:var(--bw) dashed var(--ink); border-radius:var(--r); padding:14px; box-shadow:var(--sh); }
.wcard .wk { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--c); font-weight:600; }
.wcard .wt { font-family:var(--display); font-size:17px; line-height:1.2; overflow-wrap:anywhere; }
.wcard .wc, .wcard .wb { font-size:12.5px; color:var(--muted); }
.wcard .btn { margin-top:auto; align-self:flex-start; }
.lookpub { flex-basis:100%; margin-top:4px; }
.photonote { margin:8px 0 0; font-size:13px; color:var(--ink); font-weight:600; }
.howit summary { cursor:pointer; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; width:max-content; }
.howit[open] summary { margin-bottom:12px; }
.gate .ctas { display:flex; gap:12px; flex-wrap:wrap; }
.authmsg { margin:0; font-size:13.5px; font-weight:600; border:2px solid var(--ink); border-radius:6px; padding:9px 12px; background:var(--dot-soft); }
.authmsg.bad { background:var(--want-soft); }
.authlinks { display:flex; gap:6px 16px; flex-wrap:wrap; font-size:13px; }
.authlinks .linkbtn { color:var(--ink); }
.codein { font-family:var(--mono); font-size:22px !important; letter-spacing:.3em; text-align:center; }
.thread { border-top:2px dashed var(--line-soft); padding-top:10px; display:grid; gap:8px; }
.threadtog { justify-self:start; font-weight:700; color:var(--ink); text-decoration:none; font-size:13px; }
.threadtog:hover { text-decoration:underline; }
.newdot { display:inline-block; background:var(--red); color:#fff; border-radius:999px; padding:0 7px; font-size:11px; line-height:18px; margin-left:6px; font-family:var(--mono); }
.msgs { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; padding:2px; }
.bub { max-width:82%; align-self:flex-start; background:#fff; border:2px solid var(--ink); border-radius:12px 12px 12px 3px; padding:7px 11px; font-size:13.5px; overflow-wrap:anywhere; white-space:pre-wrap; }
.bub.me { align-self:flex-end; background:var(--yellow); border-radius:12px 12px 3px 12px; }
.bub small { display:block; font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:2px; }
.msgform { display:flex; gap:8px; }
.msgform input { flex:1; min-width:0; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:9px 14px; outline:none; }
.msgform input:focus { box-shadow:3px 3px 0 var(--blue); }
.threadhint { font-size:12.5px; color:var(--muted); margin:0; }
.protect { border:2px solid var(--ink); border-radius:6px; background:var(--paper); padding:12px; display:grid; gap:10px; }
.protect .ph { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.protect .ph .late { color:var(--red); }
.sideline { display:flex; gap:8px; align-items:baseline; font-size:13.5px; flex-wrap:wrap; }
.sideline b { min-width:46px; font-weight:700; }
.sideline .no { color:var(--muted); }
.sideline a { color:var(--blue); font-weight:600; overflow-wrap:anywhere; }
.phint { font-size:12.5px; color:var(--muted); margin:0; }
.phint.late { color:var(--ink); font-weight:600; }
.strike { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em; color:#fff; background:var(--red); border:1.5px solid var(--ink); border-radius:4px; padding:1px 6px; }
.payout { background:var(--yellow); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:14px 16px; margin-bottom:18px; box-shadow:var(--sh); display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-weight:600; }
.payout .btn { margin-left:auto; background:var(--ink); color:var(--yellow); }
.radios { display:grid; gap:8px; }
.radios label { display:flex; gap:10px; align-items:center; font-family:var(--body); font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; border:2px solid var(--ink); border-radius:6px; padding:9px 12px; background:#fff; cursor:pointer; margin:0; }
.radios input { width:auto; accent-color:var(--ink); }
.pickchips { flex-wrap:wrap !important; }
.tag.want { background:var(--yellow); color:var(--ink); }
.mrow { display:flex; gap:12px; overflow-x:auto; padding:4px 4px 10px; margin:0 -4px 14px; scrollbar-width:thin; }
.mcard { --c:var(--faint); flex:0 0 250px; display:grid; gap:6px; align-content:start; background:var(--card); border:var(--bw) solid var(--ink); border-top:6px solid var(--c); border-radius:var(--r); padding:12px; box-shadow:var(--sh); }
.mcard .mtitle { font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); text-decoration:none; line-height:1.2; }
.mcard .mtitle:hover { text-decoration:underline; }
.mcard .mby, .mcard .mfor { font-size:12.5px; color:var(--muted); }
.mcard .mfor b { color:var(--ink); }
.mcard .btn { justify-self:start; margin-top:4px; padding:7px 14px; font-size:13px; }
.mtag { justify-self:start; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; border:2px solid var(--ink); border-radius:4px; padding:2px 7px; background:var(--card); }
.mtag.mutual { background:var(--green); color:#fff; }
.mtag.wants { background:var(--yellow); }
.lookform { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.lookform input { flex:1 1 220px; min-width:0; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:9px 14px; outline:none; }
.lookform input:focus { box-shadow:3px 3px 0 var(--blue); }
.looklist { display:grid; gap:8px; margin-bottom:8px; }
.look { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--card); border:2px solid var(--ink); border-radius:8px; padding:10px 12px; }
.look > span { margin-right:auto; }
.look small { display:block; color:var(--muted); font-size:12px; }
.look .btn { padding:6px 12px; font-size:13px; }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) { .item, .btn, .chip, .wal { transition:none; } }

/* offering listings you have already posted */
.pickmine { display:flex; flex-wrap:wrap; gap:8px; max-height:220px; overflow-y:auto; padding:2px 4px 4px 2px; }
.pm { display:flex; align-items:center; gap:8px; max-width:100%; border:2px solid var(--ink); background:var(--card); border-radius:999px; padding:4px 12px 4px 4px; cursor:pointer; font-size:13.5px; font-weight:600; text-align:left; box-shadow:2px 2px 0 var(--ink); }
.pm span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:22ch; }
.pm img, .pm .pi, .gitems img, .gitems .pi { width:30px; height:30px; flex:0 0 30px; border-radius:50%; object-fit:cover; border:2px solid var(--ink); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:13px; }
.pm[aria-pressed="true"] { background:var(--yellow); box-shadow:inset 2px 2px 0 rgba(0,0,0,.18); transform:translate(1px,1px); }
.pm[aria-pressed="true"]::after { content:"\2713"; font-weight:700; margin-left:2px; }
.gitems { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gitems .k { width:100%; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--blue); }
.gitems a { color:var(--ink); display:inline-flex; align-items:center; gap:7px; text-decoration:none; border:2px solid var(--ink); border-radius:999px; padding:3px 11px 3px 3px; background:var(--have-soft); font-size:13px; font-weight:600; max-width:100%; }
.gitems a span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* what an offer gives, as pictures */
.opics { display:grid; grid-template-columns:minmax(0, 260px); gap:10px; }
.opics.many { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
.otile { display:block; border:2px solid var(--ink); border-radius:6px; overflow:hidden; background:var(--sunk); aspect-ratio:1/1; }
.otile img { width:100%; height:100%; object-fit:contain; display:block; }
.otile .artph { aspect-ratio:1/1; height:100%; }

/* activity: finished trades */
.actstats { margin:4px 0 6px; font-size:15px; color:var(--muted); }
.actstats b { color:var(--ink); font-family:var(--display); font-size:19px; }
.tlist { display:grid; gap:12px; margin-bottom:10px; }
.trow { --c:var(--faint); display:flex; align-items:center; gap:16px; background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:12px 14px; box-shadow:var(--sh); min-width:0; }
.tpair { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.tp { width:64px; height:64px; border:2px solid var(--ink); border-radius:6px; overflow:hidden; background:var(--sunk); display:block; }
.tp img { width:100%; height:100%; object-fit:cover; display:block; }
.tp .tl { width:100%; height:100%; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:26px; }
.tp .tart, .tp .tart .artph { display:block; width:100%; height:100%; padding:0; }
.tbody { min-width:0; flex:1; }
.tline { margin:0; font-size:15px; line-height:1.4; overflow-wrap:anywhere; }
.tline a { color:var(--ink); font-weight:600; }
.tmeta { margin:6px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
@media (max-width: 560px) {
  .trow { flex-direction:column; align-items:flex-start; gap:10px; }
  .tp { width:72px; height:72px; }
}

/* local pickup only */
.tag.local { background:var(--orange); color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.tag.local s { width:8px; height:8px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--ink); display:block; }
.localnote { margin:0; padding:9px 12px; border:2px solid var(--ink); border-radius:6px; background:#FFE7CF; font-size:13.5px; }

/* profile button in the header, and the profile page */
.profbtn { display:inline-flex; align-items:center; gap:8px; border:var(--bw) solid var(--ink); background:var(--card); color:var(--ink); padding:4px 13px 4px 4px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:700; box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; max-width:200px; }
.profbtn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.profbtn[aria-pressed="true"] { background:var(--yellow); }
.profbtn .av { --c:var(--pink); width:26px; height:26px; }
.profbtn .pn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profhead { display:flex; align-items:center; gap:16px; margin:8px 0 6px; }
.profhead h2 { font-family:var(--display); font-weight:700; font-size:clamp(24px,4vw,34px); letter-spacing:-.02em; margin:0; overflow-wrap:anywhere; }
.profhead .signedas { margin:2px 0 0; }
.av.big { --c:var(--pink); width:64px; height:64px; font-size:28px; border-width:var(--bw); box-shadow:var(--sh); }
.panel { background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:4px 18px 18px; box-shadow:var(--sh); margin:18px 0; }
.panel > .sub { margin:16px 0 14px; }
.kinds { display:grid; gap:10px; padding:12px 14px; border:2px dashed var(--line-soft); border-radius:6px; }
.kinds .tick input:disabled + span { opacity:.45; }
.tick.big { font-size:16px; }
@media (max-width: 640px) { .profbtn .pn { display:none; } .profbtn { padding:4px; } }

/* profile button in the header, and the profile page */
.profbtn { display:inline-flex; align-items:center; gap:8px; border:var(--bw) solid var(--ink); background:var(--card); color:var(--ink); padding:4px 13px 4px 4px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:700; box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; max-width:200px; }
.profbtn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.profbtn[aria-pressed="true"] { background:var(--yellow); }
.profbtn .av { --c:var(--pink); width:26px; height:26px; }
.profbtn .pn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profhead { display:flex; align-items:center; gap:16px; margin:8px 0 6px; }
.profhead h2 { font-family:var(--display); font-weight:700; font-size:clamp(24px,4vw,34px); letter-spacing:-.02em; margin:0; overflow-wrap:anywhere; }
.profhead .signedas { margin:2px 0 0; }
.av.big { --c:var(--pink); width:64px; height:64px; font-size:28px; border-width:var(--bw); box-shadow:var(--sh); }
.panel { background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r); padding:4px 18px 18px; box-shadow:var(--sh); margin:18px 0; }
.panel > .sub { margin:16px 0 14px; }
.kinds { display:grid; gap:10px; padding:12px 14px; border:2px dashed var(--line-soft); border-radius:6px; }
.kinds .tick input:disabled + span { opacity:.45; }
.tick.big { font-size:16px; }
@media (max-width: 640px) { .profbtn .pn { display:none; } .profbtn { padding:4px; } }
.f .kinds .tick, .f .tick.big { font-family:var(--body); text-transform:none; letter-spacing:0; font-size:14.5px; font-weight:600; }
.f .tick.big { font-size:16px; }

/* from the makers of cbuy */
.sitefoot { display:flex; justify-content:center; padding:34px 16px 46px; margin-top:30px; border-top:2px dashed var(--line-soft); }
.makers { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted); font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.makers img { height:32px; width:auto; display:block; transition:transform .15s; }
.makers:hover img { transform:rotate(-4deg) scale(1.06); }
.makers:hover span { color:var(--ink); }

.mtags { display:flex; flex-wrap:wrap; gap:6px; }
.mtag.near { background:var(--orange); color:var(--ink); }
.mtag.proof { background:var(--green); color:#fff; }
.mempty { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:14px 16px; border:var(--bw) dashed var(--ink); border-radius:var(--r); background:rgba(255,252,244,.7); font-size:14.5px; }
.mempty span { flex:1 1 280px; }
.who .rec { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); background:var(--sunk); border-radius:4px; padding:1px 6px; white-space:nowrap; }
.morewrap { display:flex; justify-content:center; margin:22px 0 6px; }
.morewrap .btn { min-width:200px; }
.sideline .ok { color:var(--green); font-weight:700; }
.sideline .ok a { color:inherit; }

/* The post form's first choice: a physical thing or an NFT. */
.kindpick { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kindpick label { display:block; cursor:pointer; margin:0; font-family:var(--body); text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink); }
.kindpick input { position:absolute; opacity:0; pointer-events:none; }
.kindpick span { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; height:100%; border:2px solid var(--ink); border-radius:8px; padding:11px 12px; background:var(--card); box-shadow:2px 2px 0 var(--ink); transition:transform .08s, box-shadow .08s, background .08s; }
.kindpick svg { grid-row:span 2; }
.kindpick b { font-family:var(--display); font-size:15.5px; letter-spacing:-.01em; line-height:1.15; }
.kindpick small { color:var(--muted); font-size:12.5px; line-height:1.3; }
.kindpick input:checked + span { background:var(--yellow); box-shadow:4px 4px 0 var(--ink); transform:translate(-1px,-1px); }
.kindpick input[value="nft"]:checked + span { background:#E9DEFF; }
.kindpick input:focus-visible + span { outline:3px solid var(--blue); outline-offset:2px; }
@media (max-width:420px){ .kindpick small { display:none; } }
.bridgenote { margin:0 0 12px; padding:9px 12px; border:2px solid var(--ink); border-radius:6px; background:#E9DEFF; font-size:13.5px; }

/* Language links at the foot of the board. */
.sitefoot { flex-direction:column; align-items:center; gap:14px; }
.sitefoot .langs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:14px; }
.sitefoot .termslink { font-size:14px; color:var(--muted); }
.sitefoot .langs a { color:var(--muted); text-decoration:none; font-weight:600; }
.sitefoot .langs a[aria-current] { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* The language menu in the header. */
.langmenu { position:relative; }
.langmenu summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; border:2px solid var(--ink); border-radius:999px; padding:6px 11px; background:var(--card); color:var(--ink); font-weight:700; font-size:13px; line-height:1; box-shadow:2px 2px 0 var(--ink); white-space:nowrap; }
.langmenu summary::-webkit-details-marker { display:none; }
.langmenu summary::after { content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); margin-left:2px; }
.langmenu[open] summary { background:var(--yellow); }
.langmenu .lm-list { position:absolute; right:0; top:calc(100% + 8px); z-index:60; display:grid; min-width:160px; padding:5px; background:var(--card); border:2px solid var(--ink); border-radius:8px; box-shadow:4px 4px 0 var(--ink); }
.langmenu .lm-list a { padding:9px 12px; border-radius:5px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px; }
.langmenu .lm-list a:hover { background:var(--sunk); }
.langmenu .lm-list a[aria-current] { background:var(--yellow); }
@media (max-width:420px){ .langmenu .lm-cur { display:none; } .langmenu summary { padding:7px 9px; } }
.top-in .langmenu { order:0; }

/* Visits and members, at the foot. */
.site-stats { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0; font-size:12.5px; color:var(--muted); }
.site-stats::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(29,179,106,.18); }
.site-stats span { white-space:nowrap; }
.site-stats b { color:var(--ink); font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }