/* KABOOMSU — collection browser, rarity screener, attribute finder, piece
   sheet and the 1,490-byte section. Built entirely on the shared house tokens
   (light default, dark via [data-theme] and prefers-color-scheme). No external
   assets, no webfonts, no images in CSS. */

body.locked{overflow:hidden}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:0 0 var(--r-sm) 0; font-weight:700;
}
.skip:focus{left:0; text-decoration:none}

.panel-h{font-size:15px; font-weight:800; letter-spacing:.02em; margin:0 0 6px}
.panel-sub{margin:0 0 16px; color:var(--dim); font-size:13.5px; max-width:62ch}
.mono{font-family:var(--mono)}

/* ---------- data provenance bar ---------- */
.databar{
  border-radius:var(--r-sm); padding:13px 16px; font-size:13.5px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
  margin-top:8px;
}
.databar.warn{
  border-color:color-mix(in srgb,var(--warn) 40%,var(--line));
  background:var(--warn-soft); color:var(--ink-2);
}
.databar.ok{background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 32%,var(--line))}
.databar code{background:transparent; border:0; padding:0}

/* ---------- tier badges: a sequential ramp, rare -> common ----------
   Tier is ordered data, so the ramp is single-hue and monotonic rather than
   five arbitrary colours. Light and dark need different ink over the mid
   tones (dark ink on a dark-mixed background is unreadable), so the ink is
   tokenised and flipped with the theme. */
:root{
  --tier1-bg:var(--doge);                                  --tier1-ink:#2a1c07;
  --tier2-bg:color-mix(in srgb,var(--doge) 58%,#ffffff);   --tier2-ink:#33230a;
  --tier3-bg:color-mix(in srgb,var(--doge) 27%,#ffffff);   --tier3-ink:#3d2c10;
}
:root[data-theme="dark"]{
  --tier2-bg:color-mix(in srgb,var(--doge) 28%,var(--surface)); --tier2-ink:var(--doge-2);
  --tier3-bg:color-mix(in srgb,var(--doge) 15%,var(--surface)); --tier3-ink:var(--doge-2);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --tier2-bg:color-mix(in srgb,var(--doge) 28%,var(--surface)); --tier2-ink:var(--doge-2);
  --tier3-bg:color-mix(in srgb,var(--doge) 15%,var(--surface)); --tier3-ink:var(--doge-2);
}}

.fo-t,.tp{
  display:inline-grid; place-items:center; flex:none;
  font-family:var(--mono); font-weight:700; font-size:11px; line-height:1;
  width:19px; height:19px; border-radius:6px; border:1px solid transparent;
}
.t1{background:var(--tier1-bg); color:var(--tier1-ink);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--doge) 24%,transparent)}
.t2{background:var(--tier2-bg); color:var(--tier2-ink)}
.t3{background:var(--tier3-bg); color:var(--tier3-ink)}
.t4{background:var(--inset); color:var(--ink-2); border-color:var(--line)}
.t5,.t0{background:transparent; color:var(--dim); border-color:var(--line-2)}

/* ---------- master lineage bands ---------- */
.lineage-wrap{padding-top:26px}
.lineage{display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),1fr))}
.lin{
  display:grid; gap:7px; text-align:left; cursor:pointer; font:inherit;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r); padding:16px 17px; box-shadow:var(--shadow);
  transition:border-color .15s ease, transform .15s ease;
}
.lin:hover{border-color:var(--line-2); transform:translateY(-2px)}
.lin.on{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.lin.lin-dim{opacity:.42}
.lin-head{display:flex; align-items:baseline; gap:7px}
.lin-n{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1}
.lin-of{font-size:12px; color:var(--dim)}
.lin-name{font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--ink-2)}
.lin-bar{display:block; height:7px; border-radius:99px; background:var(--inset); overflow:hidden}
.lin-bar>i{display:block; height:100%; border-radius:99px; background:var(--accent)}
.lin-sub{font-size:11.5px; color:var(--dim)}
.lin-scarce .lin-n{color:var(--doge)}
.lin-scarce .lin-bar>i{background:linear-gradient(90deg,var(--doge),var(--doge-2))}
.lin-scarce{border-left:3px solid var(--doge)}

/* ---------- rarity distribution ---------- */
.dist-wrap{padding-top:30px}
.dist{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:5px;
  align-items:end; height:104px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px 10px; box-shadow:var(--shadow);
}
.db{display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:5px}
.db-all{
  width:100%; min-height:2px; border-radius:5px 5px 2px 2px;
  background:var(--inset); border:1px solid var(--line);
  display:flex; align-items:flex-end; overflow:hidden;
}
.db-vis{width:100%; background:linear-gradient(180deg,var(--doge-2),var(--doge)); min-height:0}
.db-n{font-family:var(--mono); font-size:10px; color:var(--dim); text-align:center}
.dist-axis{
  display:flex; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--dim); margin-top:7px; font-family:var(--mono);
}

/* ---------- toolbar ---------- */
.browse{padding-top:30px}
.toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.search{position:relative; flex:1 1 260px; min-width:0}
.search-ico{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--dim); font-size:16px; pointer-events:none;
}
#q{
  width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:11px 16px 11px 36px;
}
#q:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.sortwrap{display:flex; align-items:center; gap:8px}
.sortlab{font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim)}
#sort{
  font:inherit; font-size:14px; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:10px 14px;
}
.ghostbtn{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:10px 16px;
}
.ghostbtn:hover{background:var(--surface-2); color:var(--ink)}
.linkbtn{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  background:none; border:0; color:var(--accent); padding:2px 0;
}
.linkbtn:hover{text-decoration:underline}

/* ---------- active filter chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chips[hidden]{display:none}
.chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:var(--r-pill); padding:6px 12px;
}
.chip:hover{color:var(--ink); border-color:var(--accent)}
.chip span{font-size:14px; line-height:1; color:var(--dim)}
.chip-clear{background:transparent; border-style:dashed}

/* ---------- layout: facets + results ---------- */
.browse-in{display:grid; gap:26px; grid-template-columns:262px minmax(0,1fr); align-items:start}
.facets{
  position:sticky; top:76px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 16px 14px; box-shadow:var(--shadow);
  max-height:calc(100vh - 100px); overflow:auto;
}
.facets-head{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px}
.facets-head strong{font-size:13px; letter-spacing:.05em; text-transform:uppercase}
.fc{border:0; padding:0; margin:0 0 14px}
.fc legend{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); padding:0 0 6px;
}
.fo{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:5px 7px; border-radius:8px; font-size:13.5px; color:var(--ink-2);
  border:1px solid transparent;
}
.fo:hover{background:var(--surface-2); color:var(--ink)}
.fo input{accent-color:var(--accent); width:14px; height:14px; flex:none; margin:0}
.fo-l{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fo-n{font-family:var(--mono); font-size:11.5px; color:var(--dim); flex:none}
.fo.on{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 28%,transparent);
  color:var(--ink); font-weight:600}
.fo.zero{opacity:.4}
.fo.zero .fo-n{color:var(--warn)}
.facets-foot{margin:4px 0 0; font-size:11.5px; color:var(--dim); line-height:1.5}

.results-head{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; min-height:24px}
.count{font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dim)}
.empty{
  margin:0; padding:34px 20px; text-align:center; color:var(--dim); font-size:14.5px;
  background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--r);
}
.empty[hidden]{display:none}

/* ---------- the grid of fifty ---------- */
.pieces{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(166px,1fr))}
.pc{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pc.hide{display:none}
.pc:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.pc-scarce{border-color:color-mix(in srgb,var(--doge) 46%,var(--line))}
.pc-scarce:hover{border-color:var(--doge)}
.pc-hit{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--inset); cursor:pointer; line-height:0;
}
/* height:auto is load-bearing — the width/height attributes (kept so the card
   reserves space before the image loads) would otherwise override
   aspect-ratio and render every thumbnail 512px tall. */
.pc-img{display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; background:var(--inset)}
.pc-noart .pc-img{opacity:.34; filter:grayscale(.5)}
.pc-rank{
  position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:11px;
  font-weight:700; line-height:1; padding:5px 7px; border-radius:7px;
  background:color-mix(in srgb,#0b1219 74%,transparent); color:#f1f5f9;
  backdrop-filter:blur(3px);
}
.pc-flag{
  position:absolute; top:8px; right:8px; font-size:10.5px; font-weight:800;
  letter-spacing:.04em; line-height:1; padding:5px 8px; border-radius:99px;
  background:linear-gradient(145deg,var(--doge-2),var(--doge)); color:#2a1c07;
}
/* left, not right — the sheet's close button lives top-right */
.pc-flag.big{top:14px; left:14px; right:auto; font-size:12px; padding:7px 12px}
.pc-body{padding:10px 11px 11px; display:grid; gap:7px}
.pc-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.pc-ed{font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.02em}
.pc-lin{font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pc-bar{height:4px; border-radius:99px; background:var(--inset); overflow:hidden}
.pc-bar>i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--doge))}
.pc-meta{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.pc-score{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink-2)}
.pc-rare{font-size:10.5px; color:var(--dim); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.pc-strip{display:flex; gap:4px}

/* ---------- rarity section ---------- */
.rarity-sec{background:var(--surface-2); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin-top:60px; padding:56px 0}
.rarity-sec h2{font-size:clamp(23px,3.2vw,32px); font-weight:800;
  text-align:center; margin-bottom:12px}
.rarity-sec .section-lede{margin-bottom:26px; max-width:640px}
.formula{
  max-width:720px; margin:0 auto 30px; text-align:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow);
}
.formula code{
  display:block; background:transparent; border:0; padding:0;
  font-size:13px; color:var(--ink); line-height:1.7; word-break:break-word;
}
.formula-note{margin:12px 0 0; font-size:13.5px; color:var(--dim)}
.rarity-cols{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
/* grid items default to min-width:auto, which lets wide content push the
   column past the viewport. Pin it so the table scrolls inside its card. */
.card{background:var(--surface); border:1px solid var(--line); min-width:0;
  border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow)}
.card h3{font-size:16px; font-weight:800; margin-bottom:14px}

.toplist{list-style:none; margin:0; padding:0; display:grid; gap:4px; min-width:0}
.tl{
  display:grid; align-items:center; gap:10px; width:100%; cursor:pointer; font:inherit;
  grid-template-columns:44px 1fr auto auto;
  background:none; border:1px solid transparent; border-radius:8px;
  padding:8px 9px; color:var(--ink-2); text-align:left;
}
.tl:hover{background:var(--surface-2); border-color:var(--line); color:var(--ink)}
.tl-r{font-family:var(--mono); font-weight:800; font-size:13px; color:var(--doge)}
.tl-e{font-size:13.5px; font-weight:600}
.tl-m{font-size:11px; color:var(--dim); letter-spacing:.04em}
.tl-s{font-family:var(--mono); font-size:12.5px; color:var(--ink-2)}

.freqscroll{overflow-x:auto; max-width:100%; margin:0 -4px; -webkit-overflow-scrolling:touch}
.freq{width:100%; border-collapse:collapse; font-size:13px; min-width:390px}
.freq th{
  text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim);
  padding:0 8px 8px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.freq td{padding:6px 8px; border-bottom:1px solid var(--line); color:var(--ink-2)}
.freq tbody:not(:first-of-type) td{border-top:0}
.freq .cat{font-weight:800; color:var(--ink); vertical-align:top;
  border-right:1px solid var(--line); white-space:nowrap}
.freq .r{text-align:right; white-space:nowrap}
.freq tr.zero td{opacity:.45}

/* ---------- the 1,490-byte section ---------- */
.bytes{padding:64px 0; border-bottom:1px solid var(--line)}
.bytes-head{max-width:840px; margin:0 auto 34px; text-align:center}
.tag-alt{color:var(--accent); background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
.bytes h2{font-size:clamp(22px,3.1vw,34px); font-weight:800; margin-bottom:18px;
  letter-spacing:-.02em}
.bytes-lede{margin:0; color:var(--ink-2); font-size:clamp(15px,1.7vw,17px)}

.ledger{
  max-width:840px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;
}
.ledger-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px;
  align-items:center; padding:18px 22px; border-bottom:1px solid var(--line);
}
.ledger-row:last-child{border-bottom:0}
.lr-lab strong{display:block; font-size:15px; font-weight:700; margin-bottom:5px}
.lr-lab span{display:block; font-size:13.5px; color:var(--dim); line-height:1.55}
.lr-num{
  font-family:var(--mono); font-size:clamp(19px,2.6vw,26px); font-weight:700;
  white-space:nowrap; color:var(--ink);
}
.lr-num.minus{color:var(--dim)}
.ledger-row.total{
  background:linear-gradient(180deg,var(--doge-soft),var(--surface));
  border-top:2px solid var(--doge);
}
.ledger-row.total .lr-num{color:var(--doge); font-size:clamp(23px,3.4vw,34px)}
.ledger-row.total .lr-lab strong{font-size:16px}

.bytes-notes{
  max-width:840px; margin:26px auto 0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
}
.note{background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:17px 19px}
.note h4{font-size:14.5px; font-weight:800; margin-bottom:8px}
.note p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.6}
.note code{font-size:.86em}

/* ---------- piece sheet ---------- */
/* Top-aligned, never vertically centred with `margin:auto`: when the sheet is
   taller than the viewport, auto margins make the top of the dialog
   unreachable by scrolling. */
.sheet{position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start;
  justify-content:center; padding:26px 18px; overflow:auto;
  overscroll-behavior:contain}
.sheet[hidden]{display:none}
.sheet-scrim{position:fixed; inset:0; background:rgba(8,12,18,.72); backdrop-filter:blur(4px)}
.sheet-box{
  position:relative; width:100%; max-width:940px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden;
}
.sheet-x{
  position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px;
  border-radius:50%; cursor:pointer; font-size:22px; line-height:1;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2);
}
.sheet-x:hover{background:var(--surface-2); color:var(--ink)}
.sheet-in{display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%)}
.sh-art{position:relative; background:var(--inset); line-height:0}
.sh-art img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:1/1}
.sh-noart{aspect-ratio:1/1; display:grid; place-items:center; color:var(--dim);
  font-size:13px; line-height:1.5}
.sh-meta{padding:24px 26px 22px; min-width:0}
.sh-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.sh-meta h3{font-size:26px; font-weight:800; margin-bottom:16px}
.sh-h{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin:22px 0 10px}
.sh-h .dim{text-transform:none; letter-spacing:0; font-weight:600}

.sh-rank{display:flex; gap:12px; flex-wrap:wrap}
.rk{
  flex:1 1 130px; display:flex; align-items:center; gap:11px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 14px;
}
.rk-n{font-family:var(--mono); font-size:23px; font-weight:800; color:var(--doge)}
.rk-l{font-size:10.5px; color:var(--dim); line-height:1.35; letter-spacing:.04em}

.sh-line{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.mcs{display:flex; gap:8px; flex:none}
.mc{width:56px; text-align:center}
.mc img{width:56px; height:56px; object-fit:cover; border-radius:9px;
  border:1px solid var(--line); display:block; background:var(--inset)}
.mc span{display:block; font-family:var(--mono); font-size:10px;
  color:var(--dim); margin-top:5px}
.sh-line p{margin:0; flex:1 1 190px; font-size:13.5px; color:var(--ink-2); line-height:1.6}

.ats{display:grid; gap:5px}
.at{
  display:grid; align-items:center; gap:10px; width:100%; cursor:pointer; font:inherit;
  grid-template-columns:78px minmax(0,1fr) auto auto; text-align:left;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px; color:var(--ink-2);
}
.at:hover:not([disabled]){border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.at[disabled]{cursor:default; opacity:.55}
.at-cat{font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--dim)}
.at-val{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.at-n{font-size:11.5px; color:var(--ink-2); white-space:nowrap}
.at-w{font-size:11.5px; color:var(--dim); white-space:nowrap}

.sh-status{margin-bottom:12px}
.st{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  padding:6px 13px; border-radius:var(--r-pill); border:1px solid transparent}
.st::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.st-wait{background:var(--warn-soft); color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.st-mid{background:var(--doge-soft); color:var(--doge);
  border-color:color-mix(in srgb,var(--doge) 34%,transparent)}
.st-ok{background:var(--ok-soft); color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 30%,transparent)}

.facts{display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 14px;
  margin:0; font-size:12.5px}
.facts dt{color:var(--dim); white-space:nowrap}
.facts dd{margin:0; color:var(--ink-2); overflow-wrap:anywhere}
.sh-note{font-size:13px; line-height:1.6; margin:0}

.sheet-nav{display:flex; justify-content:space-between; gap:12px;
  padding:14px 26px 18px; border-top:1px solid var(--line); background:var(--surface-2)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .browse-in{grid-template-columns:1fr}
  .facets{position:static; max-height:none; display:none}
  body.facets-open .facets{display:block}
}
@media (min-width:1001px){
  #facets-toggle{display:none}
}
@media (max-width:760px){
  .sheet-in{grid-template-columns:1fr}
  .sh-meta{padding:20px 20px 18px}
  .at{grid-template-columns:1fr auto; gap:4px 10px}
  .at-cat{grid-column:1/-1}
  .at-w{display:none}
  .ledger-row{grid-template-columns:1fr; gap:8px}
  .lr-num{text-align:left}
  .nav{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav>a{white-space:nowrap; padding:8px 9px; font-size:13px}
}
@media (max-width:560px){
  .dist-axis{flex-wrap:wrap}
  #dist-note{order:3; flex:1 0 100%; text-align:center; margin-top:5px}
}
@media (max-width:520px){
  .pieces{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
  .dist{height:82px}
  .db-n{display:none}
  .sortlab{display:none}
  .lin-n{font-size:25px}
}
@media (prefers-reduced-motion:reduce){ .pc,.lin{transition:none} }