/* The visual-language library page. Tokens are the site's own (index.html :root), copied, not imported: this page
   must not depend on the gallery's stylesheet, and the gallery must not see this one. */
:root {
  --ink:#1d1b16; --paper:#f6f2ea; --mute:#6e6758; --accent:#b13a24; --accent-deep:#93301e;
  --line:#e0d9cb; --card:#fdfbf5; --tint:#f2e5dc; --code:#efe8da;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0 0 auto 0; height:4px; z-index:50;
  background:linear-gradient(90deg, var(--accent), #c9573c 55%, var(--accent)); }
a { color:var(--accent-deep); }
code, .mono { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap { max-width:1180px; margin:0 auto; padding:0 26px; }
@media (max-width:640px) { .wrap { padding:0 16px; } }

/* ---------- header + hero ---------- */
.hero { position:relative; padding:54px 0 8px; overflow:hidden; }
.hero .bgGrid { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 30% 0%, #000 0%, transparent 68%);
          mask-image:radial-gradient(ellipse 90% 80% at 30% 0%, #000 0%, transparent 68%); }
.brand { position:relative; display:flex; align-items:center; gap:12px; margin-bottom:34px; flex-wrap:wrap; }
.brand .home { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand img { width:34px; height:34px; border-radius:7px; box-shadow:0 2px 8px rgba(154,52,16,.28); }
.brand .name { font-weight:800; font-size:17px; letter-spacing:.01em; }
.brand .crumb { color:var(--mute); font-size:14px; }
.brand .crumb::before { content:"/"; margin-right:10px; color:var(--line); }
.langpill { margin-left:auto; border:1px solid var(--line); background:var(--card); border-radius:99px; padding:7px 15px;
  font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; letter-spacing:.02em; }
.langpill:hover, .langpill:focus-visible { border-color:var(--accent); color:var(--accent); }
.btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:10px; cursor:pointer; font-family:inherit; }
.btn.ghost { border:1.5px solid var(--line); color:var(--ink); background:var(--card); }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color:var(--accent); color:var(--accent); }
@media (max-width:640px) { .brand .gh { display:none; } .brand .crumb { display:none; } }
h1 { position:relative; font-size:clamp(28px, 4.4vw, 44px); line-height:1.14; margin:0 0 16px; max-width:860px;
  font-weight:800; letter-spacing:-0.015em; }
h1 .hl { color:var(--accent); }
.lede { position:relative; color:#57524a; font-size:16.5px; line-height:1.65; max-width:720px; margin:0 0 24px; }
.stats { position:relative; display:flex; margin:6px 0 4px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); overflow:hidden; max-width:720px; }
.stat { flex:1; padding:14px 8px 12px; text-align:center; min-width:0; }
.stat + .stat { border-left:1px solid var(--line); }
.stat .n { font-size:22px; font-weight:800; letter-spacing:-0.01em; color:var(--accent); }
.stat .l { color:var(--mute); font-size:11.5px; margin-top:2px; letter-spacing:.02em; }

/* ---------- controls ---------- */
.bar { position:sticky; top:4px; z-index:20; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:30px 0 20px; padding:10px 0; background:rgba(246,242,234,.92); backdrop-filter:blur(6px); }
.search { position:relative; flex:1 1 260px; max-width:420px; }
.search svg { position:absolute; left:12px; top:50%; width:17px; height:17px; transform:translateY(-50%);
  fill:none; stroke:var(--mute); stroke-width:1.8; stroke-linecap:round; }
.search input { width:100%; font:inherit; font-size:14.5px; padding:10px 12px 10px 38px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink); }
.search input:focus { outline:none; border-color:var(--accent); }
.toggle { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card); }
.toggle button { border:0; background:transparent; color:var(--mute); padding:9px 16px; font-size:13.5px; cursor:pointer;
  font-weight:700; font-family:inherit; }
.toggle button[aria-pressed="true"] { background:var(--ink); color:#f9f5ec; }
.toggle button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.count { color:var(--mute); font-size:13px; margin-left:auto; }

/* ---------- grid + cards ---------- */
.grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; padding-bottom:20px; }
@media (max-width:1040px) { .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px) { .grid { grid-template-columns:minmax(0, 1fr); gap:18px; } }
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 3px 14px rgba(29,27,22,.05); display:flex; flex-direction:column; min-width:0;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(29,27,22,.12); border-color:#cfc6b4; }
.sheet { display:block; position:relative; padding:0; border:0; background:#e9e3d6; cursor:zoom-in; line-height:0; width:100%; }
.sheet img { width:100%; height:auto; aspect-ratio:7/4; object-fit:cover; display:block; }
.sheet:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.new { position:absolute; left:10px; top:10px; background:var(--accent); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.06em; padding:3px 9px; border-radius:99px; line-height:1.4; }
.crow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px 0; }
.grounds { display:flex; gap:6px; flex-wrap:wrap; }
.grounds button { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:transparent;
  border-radius:99px; padding:4px 11px 4px 6px; font:inherit; font-size:12.5px; color:var(--mute); cursor:pointer; }
.grounds button i { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:none; }
.grounds button[aria-pressed="true"] { border-color:var(--ink); color:var(--ink); font-weight:700; }
.grounds button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.cbody { padding:12px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cname { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cname h3 { margin:0; font-size:18px; letter-spacing:-0.01em; }
.cname h3 button { all:unset; cursor:pointer; }
.cname h3 button:hover { color:var(--accent); }
.cname h3 button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.cname code { font-size:12.5px; background:var(--code); padding:1px 7px; border-radius:6px; }
.kind { margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mute);
  border:1px solid var(--line); padding:2px 8px; border-radius:99px; white-space:nowrap; }
.kind.image-led { color:var(--accent-deep); border-color:#e4c5b8; background:var(--tint); }
.blurb { margin:0; color:#4d483f; font-size:14px; line-height:1.6; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tags button { border:0; background:var(--tint); color:var(--accent-deep); font:inherit; font-size:12px; font-weight:600;
  padding:3px 9px; border-radius:7px; cursor:pointer; }
.tags button:hover, .tags button:focus-visible { background:#ead2c6; outline:none; }
.swatches { display:flex; gap:5px; align-items:center; }
.swatches i { width:18px; height:18px; border-radius:5px; border:1px solid rgba(0,0,0,.14); }
.cfoot { display:flex; gap:8px; margin-top:auto; padding-top:4px; flex-wrap:wrap; }
.cfoot .btn { padding:7px 12px; font-size:13px; }
.cfoot .btn.primary { background:var(--ink); color:#f9f5ec; border:1.5px solid var(--ink); }
.cfoot .btn.primary:hover, .cfoot .btn.primary:focus-visible { background:var(--accent); border-color:var(--accent); }
.empty { text-align:center; color:var(--mute); padding:40px 0 60px; }
.status { color:var(--mute); padding:30px 0; }

/* ---------- detail dialog ---------- */
dialog { width:min(1120px, calc(100vw - 32px)); max-height:calc(100vh - 40px); padding:0; border:1px solid var(--line);
  border-radius:18px; background:var(--paper); color:var(--ink); box-shadow:0 30px 80px rgba(29,27,22,.35); }
dialog::backdrop { background:rgba(29,27,22,.55); }
@media (max-width:640px) { dialog { width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-radius:0; margin:0; } }
.dhead { position:sticky; top:0; z-index:2; display:flex; gap:16px; align-items:flex-start; padding:20px 24px 14px;
  background:rgba(246,242,234,.96); border-bottom:1px solid var(--line); }
.dhead h2 { margin:0; font-size:24px; letter-spacing:-0.01em; }
.dmeta { margin:4px 0 0; color:var(--mute); font-size:13.5px; }
.close { margin-left:auto; border:1px solid var(--line); background:var(--card); width:38px; height:38px; border-radius:50%;
  font-size:22px; line-height:1; cursor:pointer; color:var(--ink); flex:none; }
.close:hover, .close:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; }
.dbody { padding:18px 24px 28px; }
@media (max-width:640px) { .dhead { padding:16px; } .dbody { padding:14px 16px 24px; } }
.dbody h4 { margin:26px 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.dbody h4:first-child { margin-top:4px; }
.dbody .blurb { font-size:15px; max-width:760px; }
.note { color:var(--mute); font-size:12.5px; margin:8px 0 0; }
.pages { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:16px; }
.pages figure, .sheets figure { margin:0; }
.pages img, .sheets img { width:100%; height:auto; display:block; border-radius:8px; border:1px solid var(--line); background:#e9e3d6; }
.pages img { aspect-ratio:16/9; }
.sheets img { aspect-ratio:7/4; }
figcaption { font-size:12.5px; color:var(--mute); margin-top:6px; }
.sheets { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap:16px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:16px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; min-width:0; }
.panel h5 { margin:0 0 8px; font-size:14px; }
.pal { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.pal span { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; color:var(--mute); }
.pal i { width:34px; height:34px; border-radius:8px; border:1px solid rgba(0,0,0,.14); }
.kv { width:100%; border-collapse:collapse; font-size:13px; }
.kv th { text-align:left; font-weight:600; color:var(--mute); padding:4px 10px 4px 0; vertical-align:top; white-space:nowrap; }
.kv td { padding:4px 0; overflow-wrap:anywhere; }
.copyrow { display:flex; gap:10px; align-items:flex-start; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.copyrow code, .copyrow span { flex:1; min-width:0; font-size:13.5px; overflow-wrap:anywhere; line-height:1.5; }
.copyrow code { white-space:pre-wrap; }
.copyrow .btn { padding:5px 11px; font-size:12.5px; flex:none; }
.foot { color:var(--mute); font-size:12.5px; padding:26px 26px 40px; border-top:1px solid var(--line); margin-top:30px;
  display:flex; gap:16px; flex-wrap:wrap; }
.foot a { color:var(--mute); }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .card, .card:hover { transition:none; transform:none; }
}