/* Self-hosted Latin subsets (2026-11-01): Google Fonts sent 1.6 MB in 28 requests (Noto Sans SC in slices) and is
   often unreachable from mainland China, where its stylesheet held up the first render. Chinese, Japanese and Korean
   text use the reader's system fonts. Paths are relative to the stamped stylesheet in assets/. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(../fonts/inter-tight-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #F5F2ED; --bg2: #ECE7DF; --field: #F8F6F2; --card: #FFFFFF;
  --line: #DCD6CC; --line2: #E4DFD7;
  --ink: #18181B; --ink2: #3F3D39; --ink3: #55534E; --ink4: #6B6862;
  --accent: #E07A52; --shadow: #EDB79C; --new: #F2F08A; --new-ink: #18181B; --mark: #F2F08A;
  --tile: #ECE7DF; --tile-photo: #ECE7DF; --tile-photo-on: #E3DDD3;
  --btn: #18181B; --btn-ink: #FFFFFF;
  --glow: #F3E6DC;
  /* Latin from the two self-hosted fonts (web/fonts, OFL); CJK from the reader's system, per page language. */
  --cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC';
  --f: 'Inter Tight', var(--cjk), system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161513; --bg2: #24221F; --field: #1D1B19; --card: #1D1B19;
    --line: #3A3733; --line2: #2E2B28;
    --ink: #F2EFE9; --ink2: #D9D4CB; --ink3: #B7B1A7; --ink4: #9E988E;
    --shadow: #6E4331; --glow: #2A211C; --mark: #5C5318;
    --btn: #F2EFE9; --btn-ink: #161513;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161513; --bg2: #24221F; --field: #1D1B19; --card: #1D1B19;
  --line: #3A3733; --line2: #2E2B28;
  --ink: #F2EFE9; --ink2: #D9D4CB; --ink3: #B7B1A7; --ink4: #9E988E;
  --shadow: #6E4331; --glow: #2A211C; --mark: #5C5318;
  --btn: #F2EFE9; --btn-ink: #161513;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:lang(ja) { --cjk: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP'; }
html:lang(ko) { --cjk: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR'; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
img { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink4); }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: clamp(16px, 2vw, 28px); padding-right: clamp(16px, 2vw, 28px); }

/* buttons */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; text-decoration: none; font-weight: 600; cursor: pointer; white-space: nowrap; border: 1px solid transparent; }
.pill.dark { background: var(--btn); color: var(--btn-ink); }
.pill.light { background: var(--field); border-color: var(--line); color: var(--ink); }
.pill.small { height: 46px; padding: 0 20px; font-size: 16px; }
.pill.big { height: 60px; padding: 0 28px; font-size: 18px; }
.pill.tiny { height: 32px; padding: 0 12px; font-size: 12px; font-weight: 500; }
.pill.block { width: 100%; height: 56px; font-size: 16px; }
.pill:hover { filter: brightness(0.96); }
.pill[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }
.circle { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--field); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; font-weight: 600; }
.linklike { border: 0; background: none; padding: 0; min-height: 44px; cursor: pointer; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.28em; color: var(--ink4); }

/* nav */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 16px; background: var(--bg2); text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-size: 17px; color: var(--ink2); }
.nav-links a { text-decoration: none; }
.nav-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* hero */
.hero { padding: 80px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; background: radial-gradient(900px 420px at 50% 30%, var(--glow) 0, transparent 70%); }
.hero h1 { margin: 0; padding: 0 16px; max-width: 1200px; text-align: center; font-size: clamp(40px, 7.4vw, 104px); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; text-shadow: 3px 4px 0 var(--shadow); text-wrap: balance; word-break: keep-all; }
/* The title breaks only between its two phrases; English words may still wrap inside a phrase. */
.hero h1 .tp { white-space: nowrap; }
.hero h1:lang(en) .tp { white-space: normal; }
.hero h1 .mark { padding: 0 0.06em; background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%); }
/* Link to the making-of article: sits where the eyebrow was so the hero layout does not move. */
.hero-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 16px -6px; padding: 5px 14px 5px 5px; box-sizing: border-box; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; }
.hero-badge:hover { border-color: var(--ink4); }
.hb-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; }
.hb-go { color: var(--accent); font-weight: 700; flex: none; }
.hero-sub:lang(ko) { word-break: keep-all; }
.hero-sub { margin: 0; padding: 0 16px; max-width: 660px; text-align: center; font-size: 19px; line-height: 1.6; color: var(--ink3); }
.marquee { width: 100%; display: flex; flex-direction: column; gap: 22px; padding: 26px 0 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.mq-row { display: flex; gap: 22px; width: max-content; }
.mq-l { animation: mq-l 80s linear infinite; }
.mq-r { animation: mq-r 80s linear infinite; }
.marquee:hover .mq-row { animation-play-state: paused; }
@keyframes mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .mq-l, .mq-r { animation: none; } html { scroll-behavior: auto; } }
.mq-tile { width: 146px; height: 146px; flex: 0 0 auto; border-radius: 30px; overflow: hidden; cursor: pointer; box-shadow: 0 10px 24px -14px rgba(24,24,27,0.25); }
.mq-tile img, .tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* language menu: an explicit list, the current one checked */
.lang-menu { position: relative; }
.lang-btn { gap: 8px; padding: 0 16px; font-weight: 500; }
.lang-short { display: none; }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 200px; padding: 6px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 16px 40px -12px rgba(24,24,27,0.25); }
.lang-list[hidden] { display: none; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border-radius: 12px; text-decoration: none; font-size: 15px; color: var(--ink); }
.lang-list a:hover { background: var(--bg2); }
.lang-list a[aria-current] { background: var(--bg2); font-weight: 700; }
.lang-list a[aria-current]::after { content: ''; width: 14px; height: 8px; margin-top: -4px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.hero-series { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
.hero-series span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--bg2); font-size: 14px; color: var(--ink2); }
.hero-series i { width: 10px; height: 10px; border-radius: 3px; }
.hero-series b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.size-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--new); color: var(--new-ink); font: 500 13px var(--mono); }
.size-tag[hidden] { display: none; }
/* download panel */
.dl-lic { margin: 4px 0 0; font-size: 13px; color: var(--ink3); }
#dlBody h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink3); }
#dlBody h3.dl-sep { padding-top: 16px; border-top: 1px solid var(--line); }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; margin-bottom: 8px; padding: 10px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.dl-row:hover { border-color: var(--ink3); }
.dl-row.main { padding: 16px 20px; border-color: var(--btn); background: var(--btn); color: var(--btn-ink); }
.dl-row.main small { color: inherit; opacity: 0.75; }
.dl-row.orig { border-style: dashed; background: transparent; }
.dl-t { display: flex; align-items: center; gap: 12px; }
.dl-t > span { display: flex; flex-direction: column; gap: 2px; }
.dl-t b { font-size: 15px; }
.dl-row.main .dl-t b { font-size: 17px; }
.dl-t em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #18181B; font-size: 12px; font-style: normal; font-weight: 700; }
.dl-t i { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.dl-t small { font: 500 12px var(--mono); color: var(--ink3); }
.dl-s { display: flex; align-items: center; gap: 10px; font: 500 14px var(--mono); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 18px 16px 0; }
.works { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 30px; }
.chips-static { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
.chips-static span { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--ink2); }

/* sections */
.section { padding-top: 72px; }
#all { padding-bottom: 80px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px; }
.sec-head h2 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.count { font-family: var(--mono); font-size: 14px; color: var(--ink4); }

/* filters */
.filters { position: sticky; top: 0; z-index: 10; margin: 18px -8px 22px; padding: 12px 8px; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 12px; }
.cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); font-size: 16px; cursor: pointer; }
.chip[aria-selected="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.chip .dot { width: 12px; height: 12px; border-radius: 4px; }
.chip .n { font-family: var(--mono); font-size: 13px; opacity: 0.7; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.inline-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; flex: 1; }
.inline-filters .seg.view { margin-left: auto; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: var(--bg2); }
.seg button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font-size: 15px; font-weight: 500; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.cols-btn { display: none; }
.cols-btn[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }

/* grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px 28px; }
.grid.single { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px 16px; }
.card { display: flex; flex-direction: column; gap: 12px; }
.tile { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; background: var(--tile); transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.single .tile { border-radius: 22px; }
.photo-mode .tile { background: var(--tile-photo); }
@media (hover: hover) {
  .card:hover .missing { transform: translateY(-3px); }
  .card:hover .veil { transform: translateY(-3px); transition: transform .25s ease; }
  .card:hover .tile, .stile:hover .tile { background: var(--tint); box-shadow: 0 18px 32px -18px rgba(24,24,27,0.4); transform: translateY(-3px); }
  .photo-mode .card:hover .tile, .photo-mode .stile:hover .tile { background: var(--tile-photo-on); }
}
.card:focus-within .tile, .stile:focus-visible .tile { background: var(--tint); box-shadow: 0 18px 32px -18px rgba(24,24,27,0.4); }
.photo-mode .card:focus-within .tile { background: var(--tile-photo-on); }
.badge { position: absolute; height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; }
.badge.ph { top: 14px; right: 14px; background: rgba(255,255,255,0.85); color: #18181B; }
.vlabel { position: absolute; right: 14px; bottom: 12px; font-family: var(--mono); font-size: 12px; color: #18181B; }
/* Gap box: an icon, one short line and a way out instead of a dashed frame. It overlays the tile link from beside it
   (a button cannot sit inside an <a>), lets clicks through to the link and moves with the tile on hover.
   Tiles stay light in dark mode, so its colours are fixed like .vlabel's. */
.tile-box { position: relative; }
.missing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; color: #3F3D39; pointer-events: none; transition: transform .25s ease; }
.missing b { font-size: 16px; font-weight: 600; color: #18181B; }
.gap-ic { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,0.72); display: inline-flex; align-items: center; justify-content: center; color: #55534E; margin-bottom: 2px; }
.gap-sub { font-size: 13px; line-height: 1.6; color: #55534E; text-wrap: balance; }
.gap-short { display: none; }
.gap-go { pointer-events: auto; margin-top: 4px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #DCD6CC; background: #FFFFFF; color: #18181B; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.gap-go.dark { background: #18181B; border-color: #18181B; color: #FFFFFF; }
.gap-go:hover { filter: brightness(0.96); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-t h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.card-t span { font-size: 13px; color: var(--ink4); }
.dots { display: flex; gap: 2px; flex: 0 0 auto; }
.dots button { width: 22px; height: 44px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dots button:disabled { cursor: default; }
.dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .15s ease; }
.dots button[aria-pressed="true"] i { width: 16px; background: var(--ink); }
/* Hollow = no image for that angle yet, readable before anyone hovers it. */
.dots button:disabled i { background: transparent; border: 1.5px solid var(--ink4); opacity: 0.55; }
.dots button[aria-pressed="true"]:disabled i { border-color: var(--ink); opacity: 1; }
.stile { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.stile-t { display: flex; justify-content: space-between; font-size: 13px; }
.stile-t span:last-child { color: var(--ink4); }
.empty { padding: 80px 0; text-align: center; color: var(--ink3); font-size: 17px; }

/* footer */
.foot { border-top: 1px solid var(--line2); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 32px; padding-bottom: 40px; font-size: 15px; color: var(--ink3); }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.foot-brand strong { font-size: 18px; color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.foot-links a, .foot-links button { color: var(--ink2); }

/* dialogs */
dialog { border: 0; padding: 0; color: var(--ink); background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(38, 34, 30, 0.55); }
.lb { width: 100%; height: 100%; }
.lb-box { position: relative; margin: auto; width: min(1200px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px)); margin-top: max(24px, calc((100vh - 820px) / 2)); display: flex; border-radius: 34px; overflow: hidden; background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5); }
.lb-stage { flex: 1 1 auto; position: relative; margin: 18px; border-radius: 26px; background: var(--tint, var(--tile)); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.lb-stage img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Phone save hint: sits over the stage but lets a long-press reach the image underneath. */
.lb-tip { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--btn); color: var(--btn-ink); font-size: 14px; line-height: 1.45; text-align: center; pointer-events: none; }
.lb-missing { position: absolute; inset: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #3F3D39; padding: 20px; }
.lb-missing b { font-size: 20px; font-weight: 600; color: #18181B; }
.lb-missing .gap-ic { width: 64px; height: 64px; }
.lb-missing .gap-sub { font-size: 15px; }
.gap-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.lb-nav { position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #F5F2ED; color: #18181B; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-nav.l { left: 20px; } .lb-nav.r { right: 20px; }
.lb-nav:disabled { cursor: default; opacity: 0.35; }
.lb-counter { position: absolute; left: 20px; top: 18px; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--new); color: var(--new-ink); font-family: var(--mono); font-size: 13px; }
.lb-side { flex: 0 0 380px; padding: 36px 30px 28px 12px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.lb-head { display: flex; flex-direction: column; gap: 8px; }
.lb-head h2 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.lb-names { margin: 4px 0 0; display: grid; grid-template-columns: 32px 1fr; gap: 4px 8px; font-size: 14px; line-height: 1.55; color: var(--ink3); }
.lb-names dt { font-family: var(--mono); color: var(--ink4); }
.lb-names dd { margin: 0; }
.lb-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lb-chips button { padding: 0; border: 0; background: none; display: flex; flex-direction: column; gap: 4px; cursor: pointer; color: var(--ink4); font-size: 12px; }
.lb-chips button span { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--tint, var(--tile)); }
.lb-chips button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.lb-chips button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.lb-chips button[aria-pressed="true"] span { box-shadow: 0 0 0 2.5px var(--ink); }
.lb-chips button:disabled { cursor: default; opacity: 0.45; }
.lb-chips button:disabled span { display: flex; align-items: center; justify-content: center; color: #55534E; }
.lb-side .seg { align-self: flex-start; }
.lb-desc { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line2); }
.lb-desc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink4); }
.lb-desc p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink2); }
.lb-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.lb-row { display: flex; gap: 10px; }
.lb-row .pill { flex: 1; height: 48px; font-size: 14px; font-weight: 500; }
.keys { margin: 4px 0 0; font-size: 12px; color: var(--ink4); line-height: 1.8; }
.lb-close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); display: flex; align-items: center; justify-content: center; cursor: pointer; }

.info { width: min(520px, calc(100vw - 32px)); margin: auto; padding: 22px 24px 24px; border-radius: 24px; background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5); }
.info-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.info-h h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.info ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.85; color: var(--ink2); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* responsive */
@media (max-width: 1100px) {
  .nav-links { display: none; }
}
/* Phone lightbox: full screen, and one set fits it without scrolling: title, image, angle strip, then a bar with
   previous / next set, details and download. The side panel and its action block dissolve (display: contents) so
   their children can be ordered around the image; names, description and the secondary actions show under the
   bar only when details is open, and only then does the box scroll. */
@media (max-width: 860px) {
  .lb-box { flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; overflow: hidden; }
  .lb.more .lb-box { overflow-y: auto; }
  .lb-side, .lb-head, .lb-actions { display: contents; }
  #lbMeta { order: 0; padding: 12px 64px 0 16px; font-size: 12px; }
  .lb-head h2 { order: 0; padding: 2px 64px 0 16px; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Only the image gives up height; everything else keeps its own (the title would otherwise shrink to nothing). */
  #lbMeta, .lb-head h2, .lb-names, .lb-chips, .lb-side .seg, .lb-desc, .lb-dls, .lb-row { flex-shrink: 0; }
  .lb-stage { order: 1; flex: 1 1 auto; min-height: 0; margin: 10px 12px 0; }
  .lb.more .lb-stage { flex: 0 0 auto; height: 52vh; }
  .lb-chips { order: 2; gap: 6px; padding: 10px 12px 0; }
  .lb-chips button { font-size: 11px; gap: 3px; }
  .lb-chips button span { aspect-ratio: 1 / 1; border-radius: 10px; }
  .lb-side .seg { order: 3; align-self: flex-start; margin: 10px 12px 0; }
  .lb.no-photo .lb-side .seg { display: none; }
  .lb-dls { order: 4; align-items: center; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .lb-dls .lb-pose { display: flex; gap: 8px; flex: 0 0 auto; }
  .lb-pose .circle { width: 48px; height: 48px; }
  .lb.more #lbMore { background: var(--bg2); }
  .lb-dls .pill { height: 48px; padding: 0 12px; font-size: 14px; }
  .lb-names, .lb-desc, .lb-row { display: none; }
  .lb.more .lb-names { order: 5; display: grid; margin: 4px 16px 0; }
  .lb.more .lb-desc { order: 6; display: flex; margin: 12px 12px 0; }
  .lb.more .lb-row { order: 7; display: flex; margin: 10px 12px 0; }
  .lb.more .lb-row:last-of-type { margin-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .lb-nav { width: 44px; height: 44px; margin-top: -22px; }
  .lb-nav.l { left: 8px; } .lb-nav.r { right: 8px; }
  .lb-counter { left: 12px; top: 12px; height: 28px; font-size: 12px; }
  .lb-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .keys { display: none; }
}
@media (max-width: 720px) {
  /* GitHub stays on the phone as an icon button; the language pill shows its short code so brand + three buttons
     fit 360 px. */
  .nav { gap: 8px; padding-top: 14px; padding-bottom: 14px; }
  .brand { gap: 8px; padding: 4px 12px 4px 4px; border-radius: 14px; font-size: 18px; }
  .brand .logo { width: 36px; height: 36px; }
  .nav-tools { gap: 8px; }
  .nav-tools .pill.small { height: 44px; }
  .nav-tools .circle { width: 44px; height: 44px; }
  .lang-btn { gap: 6px; padding: 0 12px; font-weight: 600; font-size: 15px; }
  .lang-full { display: none; }
  .lang-short { display: inline; }
  .nav-tools > .gh { width: 44px; padding: 0; }
  .nav-tools > .gh span { display: none; }
  /* The hero fits one phone screen with the nav: one marquee row, smaller type and chips. */
  .hero { padding: 16px 0 20px; gap: 12px; }
  .hero h1 { font-size: 38px; line-height: 1.12; text-shadow: 2px 3px 0 var(--shadow); }
  .hero-badge { min-height: 44px; max-width: calc(100% - 32px); gap: 8px; margin: 0 16px; padding: 4px 12px 4px 4px; font-size: 13px; }
  .hb-tag { font-size: 12px; padding: 0 9px; }
  .hero-sub { font-size: 15px; line-height: 1.55; }
  .mq-tile { width: 96px; height: 96px; border-radius: 20px; }
  .marquee { padding: 8px 0 4px; }
  .marquee, .mq-row { gap: 12px; }
  .mq-r { display: none; }
  .hero-series span { height: 30px; padding: 0 12px; font-size: 13px; }
  .pill.big { height: 50px; font-size: 16px; padding: 0 22px; }
  .cta { padding-top: 4px; gap: 10px; }
  .works { padding-top: 12px; gap: 8px; }
  .chips-static span { height: 30px; padding: 0 12px; font-size: 13px; }
  .section { padding-top: 32px; }
  .sec-head h2 { font-size: 26px; }
  /* One compact sticky bar instead of a filter sheet: the series row scrolls away under the top edge (its 48px row
     plus the 8px padding above it), categories and angle stay. Every row scrolls sideways instead of wrapping. */
  .filters { top: -56px; margin: 12px -16px 14px; padding: 8px 16px; gap: 8px; }
  .series-row { flex-wrap: nowrap; height: 48px; overflow-x: auto; scrollbar-width: none; }
  .series-row::-webkit-scrollbar, .inline-filters::-webkit-scrollbar { display: none; }
  .series.seg { flex-wrap: nowrap; flex: 0 0 auto; }
  .series.seg button, .series-row .chip { white-space: nowrap; }
  .filter-row { flex-wrap: nowrap; gap: 8px; }
  .inline-filters { flex-wrap: nowrap; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .inline-filters .seg { flex: 0 0 auto; flex-wrap: nowrap; }
  .inline-filters .seg.view { margin-left: 0; }
  .inline-filters .seg button { padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .cols-btn { display: inline-flex; width: 48px; height: 48px; }
  .chip { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  /* Three columns: ID and name only. The dots go; the angle row in the sticky bar switches every card at once. */
  .grid.c3:not(.single) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .c3 .card { gap: 6px; }
  .c3 .tile { border-radius: 16px; }
  .c3 .badge.ph, .c3 .dots { display: none; }
  .c3 .card-foot { align-items: stretch; }
  .c3 .card-t h3 { font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c3 .card-t span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c3 .missing { padding: 4px; gap: 4px; }
  .c3 .missing b, .c3 .gap-sub, .c3 .gap-go { display: none; }
  .c3 .gap-ic { width: auto; height: auto; background: none; margin: 0; }
  .c3 .gap-ic svg { width: 20px; height: 20px; }
  .c3 .gap-short { display: block; font-size: 11px; font-weight: 600; line-height: 1.3; }
  .grid.single { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { border-radius: 22px; }
  .badge { height: 24px; padding: 0 8px; font-size: 11px; }
  .badge.ph { top: 10px; right: 10px; }
  .vlabel { display: none; }
  .missing { padding: 12px; gap: 6px; }
  .missing b { font-size: 14px; }
  .gap-ic { width: 44px; height: 44px; }
  .gap-ic svg { width: 20px; height: 20px; }
  .gap-sub { font-size: 12px; line-height: 1.5; }
  .gap-go { padding: 0 14px; font-size: 13px; }
  .lb-missing { inset: 16px; }
  .card-foot { flex-direction: column; align-items: flex-start; gap: 0; }
  .card-t h3 { font-size: 15px; }
  .dots { margin-left: -6px; }
}
.seg button:disabled { opacity: 0.4; cursor: default; }
/* Photos are opaque renders: no multiply, or they darken against the tile. */
.photo-mode .tile img, .lb.photo .lb-stage img, .lb.photo .lb-chips img { mix-blend-mode: normal; }
/* Photos are 1:2 renders: show them as rounded prints centred on the 3:4 tile instead of letterboxing. */
.photo-mode .tile { display: flex; align-items: center; justify-content: center; padding: 14px; }
.photo-mode .tile img { width: auto; max-width: 100%; height: 100%; border-radius: 14px; box-shadow: 0 6px 16px -10px rgba(24,24,27,0.45); }
.lb.photo .lb-stage { padding: 24px; }
.lb.photo .lb-stage img { width: auto; max-width: 100%; height: 100%; border-radius: 18px; box-shadow: 0 10px 30px -16px rgba(24,24,27,0.5); }
.lb.photo .lb-chips button span { display: flex; justify-content: center; }
.lb.photo .lb-chips img { width: auto; height: 100%; }
/* Compare: line art (3:4) and photo (1:2) side by side at one height H, so 0.75H and 0.5H wide: 3fr 2fr columns in a
   5:4 box, as large as the stage allows. No overlay or slider: the two are framed differently and would not line up. */
.lb.compare .lb-stage { container-type: size; }
.lb-pair { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; width: min(calc(100cqw - 168px), calc((100cqh - 48px) * 1.25)); aspect-ratio: 5 / 4; }
@media (max-width: 860px) { .lb-pair { width: min(calc(100cqw - 24px), calc((100cqh - 24px) * 1.25)); gap: 8px; } }
.lb-cell { position: relative; margin: 0; min-width: 0; min-height: 0; border-radius: 18px; overflow: hidden; }
.lb-cell img { width: 100%; height: 100%; }
.lb-cell.line img { object-fit: contain; mix-blend-mode: multiply; }
.lb-cell.photo img { object-fit: cover; mix-blend-mode: normal; }
.lb-cell figcaption { position: absolute; left: 10px; bottom: 10px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(245,242,237,0.92); color: #3F3D39; font-family: var(--mono); font-size: 12px; }
.lb-cell.gap { background: rgba(255,255,255,0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; text-align: center; color: #18181B; font-size: 14px; }
.lb-cell.gap .gap-ic { width: 48px; height: 48px; }
.lb-chips span.photo { display: flex; justify-content: center; }
.lb-chips span.photo img { width: auto; height: 100%; mix-blend-mode: normal; }
.lb-chips span.both { position: relative; }
.lb-chips span.both::after { content: ''; position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.lb-dls { display: flex; gap: 10px; }
.lb-pose { display: none; }
.lb-dls .pill { flex: 1 1 0; min-width: 0; }

@media (max-width: 1100px) { .static .nav-links { display: flex; } }
/* ---- generated pages (tools/site_pages.py): pose pages, changelog, 404; share sheet ---- */
.page { padding-top: 24px; padding-bottom: 72px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; color: var(--ink4); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink3); }
.crumbs a:hover { color: var(--ink); }
.pp-head { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; max-width: 820px; }
.pp-meta { margin: 0; font-size: 14px; color: var(--ink4); }
.pp-head h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; }
.pp-head .lb-names { max-width: 560px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pp-desc { max-width: 820px; margin-top: 24px; }
.pp-sec { margin-top: 48px; }
.pp-sec h2 { margin: 0 0 18px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.pp-views { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pp-view { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-tile { display: block; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: var(--tint); position: relative; }
.pp-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pp-tile.missing { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 16px; background: var(--tile); color: #18181B; font-size: 14px; }
.pp-view figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-size: 14px; color: var(--ink3); }
.pp-view figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); font-size: 13px; }
.pp-lead { margin: -8px 0 18px; max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--ink3); }
.pp-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 24px; }
.pp-pair { margin: 0; display: flex; flex-direction: column; gap: 10px; }
/* One height for both: 3:4 and 1:2 side by side are 3fr and 2fr wide (same reasoning as the lightbox pair). */
.pp-pair-imgs { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; padding: 18px; border-radius: 24px; background: var(--tile); }
.pp-pair-imgs a { display: block; border-radius: 16px; overflow: hidden; }
.pp-pair-line { aspect-ratio: 3 / 4; }
.pp-pair-photo { aspect-ratio: 1 / 2; align-self: end; }
.pp-pair-imgs img { width: 100%; height: 100%; }
.pp-pair-line img { object-fit: contain; mix-blend-mode: multiply; }
.pp-pair-photo img { object-fit: cover; }
.pp-pair figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 14px; color: var(--ink3); }
.pp-pair-dl { display: flex; gap: 14px; }
.pp-pair-dl a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); font-size: 13px; }
.pp-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.pp-pn a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--field); text-decoration: none; min-width: 0; }
.pp-pn a span { font-size: 13px; color: var(--ink4); }
.pp-pn a b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pn-r { text-align: right; }
.pp-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pp-rel { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.pp-rel-t { display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; }
.pp-rel-t img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pp-rel-n { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pp-rel-n .mono { font-size: 12px; color: var(--ink4); }
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 18px; width: 100%; }
.foot-langs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink3); text-decoration: none; }
.foot-langs a[aria-current] { color: var(--ink); font-weight: 600; }

.cl-page { max-width: 880px; }
.cl-page h1 { margin: 10px 0 0; font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; }
.cl-lead { margin: 14px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink3); }
.cl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; font-size: 14px; }
.cl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cl-filter .chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.cl-list section { margin-top: 32px; }
.cl-list h2 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; letter-spacing: 0.14em; color: var(--ink4); font-weight: 500; }
.cl-item { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line2); }
.cl-item time { flex: 0 0 110px; padding-top: 3px; font-size: 13px; color: var(--ink4); }
.cl-body { min-width: 0; }
.cl-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg2); color: var(--ink2); }
.cl-tag.t-new { background: var(--new); color: var(--new-ink); }
.cl-tag.t-announce { background: #E6B7A1; color: #18181B; }
.cl-body h3 { margin: 10px 0 6px; font-size: 19px; line-height: 1.4; }
.cl-body h3 a { text-decoration: none; }
.cl-body p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink3); }
.cl-cta { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }

.share-sheet .share-url { display: flex; gap: 8px; margin-top: 12px; }
.share-sheet input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); font-size: 14px; }
.share-sheet .share-nets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.share-sheet .share-nets .pill { height: 48px; font-size: 15px; }

.nf-page { display: flex; flex-direction: column; gap: 28px; max-width: 720px; padding-top: 48px; }
.nf-page .brand { align-self: flex-start; }
.nf-block h1 { margin: 0 0 6px; font-size: 26px; }
.nf-block p { margin: 0 0 12px; color: var(--ink3); }

@media (max-width: 720px) {
  .static .nav-tools { width: auto; margin-left: auto; }
  .static .nav-links { display: flex; gap: 4px 18px; font-size: 15px; }
  .static .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .pp-views { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pp-tile { border-radius: 20px; }
  .pp-pn { grid-template-columns: 1fr; }
  .pp-pn-r { text-align: left; }
  .pp-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-item { flex-direction: column; gap: 6px; }
  .cl-item time { flex: none; }
}

/* series tabs + rating toggle (above the category chips) */
.series-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.seg.series .n { font-family: var(--mono); font-size: 12px; opacity: 0.7; }
.chip.adult { margin-left: auto; gap: 12px; padding-right: 8px; border-color: var(--accent); background: var(--glow); color: var(--ink); }
.chip.adult .track { width: 44px; height: 26px; border-radius: 999px; background: var(--line); display: flex; align-items: center; padding: 3px; box-sizing: border-box; transition: background-color .2s; }
.chip.adult .track i { width: 20px; height: 20px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform .2s; }
.chip.adult[aria-checked="true"] { background: var(--field); border-color: var(--line); }
.chip.adult[aria-checked="true"] .track { background: var(--btn); }
.chip.adult[aria-checked="true"] .track i { transform: translateX(18px); }
@media (max-width: 720px) {
  .series-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .seg.series { flex-wrap: nowrap; flex: 0 0 auto; }
  .seg.series button { white-space: nowrap; }
  /* First in the row so it is on screen without scrolling the tabs sideways. */
  .chip.adult { margin-left: 0; order: -1; white-space: nowrap; }
}

/* suggestive poses: blurred in place until revealed (D-06) */
.veiled .tile img { filter: blur(14px); transform: scale(1.12); }
.veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 28px; background: rgba(236,231,223,0.35); color: #18181B; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.stile .veil { border-radius: inherit; pointer-events: none; }
.veil-ic { width: 48px; height: 48px; border-radius: 999px; background: rgba(255,255,255,0.88); display: flex; align-items: center; justify-content: center; color: #18181B; }
.veil:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lb.veiled .lb-stage img, .lb.veiled .lb-pair img { filter: blur(28px); transform: scale(1.1); }
.lb.veiled .lb-chips img { filter: blur(8px); }
.lb.veiled .lb-nav, .lb.veiled .lb-counter { z-index: 3; }
.lb-veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(236,231,223,0.3); color: #18181B; font-size: 18px; text-align: center; padding: 20px; }
.lb-veil .veil-ic { width: 68px; height: 68px; }
.lb-veil .pill { height: 48px; padding: 0 24px; font-size: 16px; }
.lb-veil[hidden] { display: none; }
.nudge { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-size: 15px; box-shadow: 0 10px 30px -10px rgba(24,24,27,0.4); }
.nudge[hidden] { display: none; }
.nudge #nudgeAll { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--new); color: var(--new-ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.nudge-x { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 720px) {
  .veiled .tile img { filter: blur(10px); }
  .veil { border-radius: 22px; gap: 6px; font-size: 11px; }
  .c3 .veil { border-radius: 16px; }
  .veil-ic { width: 36px; height: 36px; }
  .c3 .veil-t { display: none; }
  .nudge { left: 16px; right: 16px; transform: none; font-size: 14px; border-radius: 18px; }
  .nudge span { flex: 1; }
}

/* Clay, depth and normal maps (lightbox and marquee). Their own backgrounds are part of the image, so no multiply;
   the line art wipes in over them at the slider, multiplied so its strokes land on the body (pixel-aligned,
   tools/map_align.py): reading the fit is the point, not a side-by-side. */
.mq-tile.map { position: relative; background: var(--tile); }
.mq-tile.map img { object-fit: cover; mix-blend-mode: normal; }
.mq-tile.map b { position: absolute; left: 10px; bottom: 9px; padding: 2px 8px; border-radius: 999px; background: rgba(24,24,27,0.72); color: #fff; font-size: 11px; font-weight: 600; }
.lb.map .lb-stage img, .lb.map .lb-chips img { mix-blend-mode: normal; }
.lb-wipe { display: contents; }
.lb-wipe[hidden] { display: none; }
.lb-stage .lb-wipe img { position: absolute; inset: 0; pointer-events: none; }
.lb.map .lb-wipe img { mix-blend-mode: multiply; }
.lb-wipebar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: min(360px, calc(100% - 120px)); padding: 6px 14px; border-radius: 999px; background: var(--card, #fff); color: var(--ink); font-size: 12px; box-shadow: 0 6px 18px -10px rgba(24,24,27,0.5); z-index: 2; }
.lb-wipebar span { white-space: nowrap; }
.lb-wipebar input { flex: 1 1 auto; min-width: 0; accent-color: var(--btn); }
.lb.has-maps .lb-side .seg button { padding: 0 11px; font-size: 14px; }
.lb-side .seg .gap-l { margin-left: 6px; }
.lb-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink2); }
@media (max-width: 860px) {
  .lb-note { order: 3; margin: 6px 12px 0; font-size: 12px; flex-shrink: 0; }
  .lb-side .seg button { min-height: 36px; padding: 0 12px; font-size: 14px; flex: 0 0 auto; }
  /* Six formats in English or Korean are wider than a phone: one row that scrolls, like the grid's filter rows. */
  .lb.has-maps .lb-side .seg { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100% - 24px); box-sizing: border-box; scrollbar-width: none; }
  .lb-wipebar { width: calc(100% - 100px); bottom: 10px; }
}

/* Download panel (2026-10-31): every row says what is inside it. Format chips use the formats' own colours. */
.fmt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.fmt-chip { padding: 2px 9px; border-radius: 999px; font: 500 12px var(--mono); border: 1px solid transparent; }
.fmt-chip.line { background: #FFFFFF; color: #18181B; border-color: #18181B; }
.fmt-chip.photo { background: #E3DDD3; color: #18181B; }
.fmt-chip.clay { background: #D4D4D4; color: #18181B; }
.fmt-chip.depth { background: #2A2A2A; color: #FFFFFF; border-color: #55534E; }
.fmt-chip.normal { background: #B7B7F2; color: #18181B; }
.dl-row.main .fmt-chip.photo { background: #3A3A3E; color: #E7E3DC; }
.dl-row.every { margin-top: 10px; border: 1.5px solid var(--ink); }
#dlBody h3 { margin-top: 20px; }
.dl-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dl-map { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: inherit; text-decoration: none; }
.dl-map:hover { border-color: var(--ink3); }
.dl-map-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.dl-map .mono { font: 500 12px var(--mono); color: var(--ink2); }
.dl-map small { font-size: 12px; line-height: 1.45; color: var(--ink3); }
.sw { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.sw.clay { background: #BDBDBD; } .sw.depth { background: #2A2A2A; } .sw.normal { background: #8C8CF0; }
.dl-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.dl-foot { margin: 0 0 14px; font-size: 12px; color: var(--ink3); }
.dl-row.orig small { font-family: inherit; line-height: 1.5; }
@media (max-width: 560px) {
  .dl-maps { grid-template-columns: minmax(0, 1fr); }
  .dl-series { grid-template-columns: minmax(0, 1fr); }
}
.dl-s { white-space: nowrap; flex: 0 0 auto; }

/* Marquee tiles open their pose (app.js); a slight lift says so, the row already pauses on hover. */
@media (hover: hover) { .mq-tile { transition: transform 0.15s ease; } .mq-tile:hover { transform: translateY(-4px); } }

/* Overview (2026-11-01, design B1): the lightbox opens on every format of the angle. --h is one grid tile's image
   height, sized so two rows (plus captions) fit the stage height and the grid plus the 1:2 photo column fit its width. */
.lb.compare .lb-pair { width: auto; aspect-ratio: auto; display: block; }
.lb-ov { --h: min(calc((100cqh - 100px) / 2), calc((100cqw - 220px) / 2.5)); display: flex; align-items: flex-start; gap: 16px; }
.lb:not(.ov-photo) .lb-ov { --h: min(calc((100cqh - 100px) / 2), calc((100cqw - 220px) / 1.5)); }
.lb.ov-one .lb-ov { --h: min(calc((100cqh - 100px) / 2), calc((100cqw - 220px) / 1.75)); }
.lb-ov-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 12px; }
.lb.ov-one .lb-ov-grid { grid-template-columns: auto; }
.lb-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--ink2); font: inherit; font-size: 13px; text-align: left; }
button.lb-tile { cursor: zoom-in; }
.lb-stage .lb-tile img, .lb-tile .lb-tile-gap { display: block; width: calc(var(--h) * 0.75); height: var(--h); object-fit: cover; border-radius: 14px; background: #FFFFFF; mix-blend-mode: normal; box-sizing: border-box; }
.lb.ov-one .lb-stage .lb-tile img, .lb.ov-one .lb-tile .lb-tile-gap { width: calc((var(--h) * 2 + 32px) * 0.75); height: calc(var(--h) * 2 + 32px); }
.lb-stage .lb-tile.photo img, .lb-tile.photo .lb-tile-gap { width: calc(var(--h) + 16px); height: calc(var(--h) * 2 + 32px); }
button.lb-tile:hover img, button.lb-tile:focus-visible img { outline: 2px solid var(--ink); outline-offset: 2px; }
.lb-tile .lb-tile-gap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; background: rgba(255,255,255,0.45); color: var(--ink3); font-size: 12px; }
/* A marquee tile opens the overview with its own format outlined (no label: the outline says it). */
.lb-stage .lb-tile.hl img { outline: 3px solid var(--ink); outline-offset: 3px; }
.lb-tile.hl > span { color: var(--ink); font-weight: 700; }
/* The old back buttons stay in the markup for the moment; the format row replaced them. */
.lb-back, .lb-back2, .lb-back[hidden], .lb-back2[hidden] { display: none; }

/* Format row (design X1): under an enlarged image, the overview ("All") and every format of the set, one tap each.
   The stage keeps --fh free at the bottom so the image (and the wipe overlay, which must match it) sits above it. */
.lb { --fh: 92px; }
.lb.has-fmts .lb-stage { padding-bottom: var(--fh); }
.lb.has-fmts .lb-stage .lb-wipe img { bottom: var(--fh); }
.lb.has-fmts .lb-missing { bottom: calc(var(--fh) + 10px); }
.lb.has-fmts .lb-wipebar { bottom: calc(var(--fh) + 4px); }
/* Maps also carry the line-art slider: it gets its own band between the image and the format row. */
.lb.map.has-fmts .lb-stage { padding-bottom: calc(var(--fh) + 54px); }
.lb.map.has-fmts .lb-stage .lb-wipe img { bottom: calc(var(--fh) + 54px); }
.lb-fmts { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; display: flex; gap: 4px; padding: 5px; border-radius: 18px; background: var(--card); box-shadow: 0 6px 18px -12px rgba(24,24,27,0.45); }
.lb-fmts[hidden] { display: none; }
.lb-fmts button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; padding: 4px 6px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--ink3); font: inherit; font-size: 12px; cursor: pointer; }
.lb-fmts button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.lb-fmts button:disabled { cursor: default; opacity: 0.45; }
.lb-stage .lb-fmts img, .lb-fmts .fmt-all, .lb-fmts .fmt-gap { display: block; width: 34px; height: 44px; object-fit: cover; border-radius: 5px; background: var(--bg); mix-blend-mode: normal; box-sizing: border-box; }
.lb-fmts .fmt-all { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 4px; background: transparent; }
.lb-fmts .fmt-all i { border-radius: 2px; }
.lb-fmts .fmt-all i:nth-child(1) { background: #FFFFFF; border: 1px solid #18181B; }
.lb-fmts .fmt-all i:nth-child(2) { background: #BDBDBD; } .lb-fmts .fmt-all i:nth-child(3) { background: #2A2A2A; } .lb-fmts .fmt-all i:nth-child(4) { background: #8C8CF0; }
.lb-fmts .fmt-gap { display: flex; align-items: center; justify-content: center; color: var(--ink4); }
.lb-fmts .fmt-gap svg { width: 18px; height: 18px; }
/* The format name shown for a moment after a vertical swipe on a phone. */
.lb-flash { position: absolute; left: 50%; top: 42%; z-index: 3; transform: translate(-50%, -50%); padding: 10px 20px; border-radius: 999px; background: rgba(24,24,27,0.82); color: #FFFFFF; font-size: 16px; font-weight: 700; opacity: 0; pointer-events: none; }
.lb-flash.on { animation: lb-flash 1.1s ease forwards; }
@keyframes lb-flash { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 860px) {
  .lb-dls .pill { min-width: 0; overflow: hidden; }
  .lb-dls .pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Room for the image while the browser's address bar is showing (the box is 100dvh, about 180 px shorter then):
     a one-line meta, a shorter angle row and no format note; the note and the rest are under Details. */
  .lb-mx { display: none; }
  .lb-chips button span { aspect-ratio: auto; height: 44px; }
  .lb:not(.more) #lbNote { display: none; }
  /* Overview on phones (design M1): three columns, line art and clay over depth and normal, the photo filling the
     third column's height. --cw is one column's width, capped so the two rows fit the stage height too. */
  .lb-ov { --cw: min(calc((100cqw - 40px) / 3), calc((100cqh - 64px) * 0.375)); display: grid; grid-template-columns: repeat(3, var(--cw)); gap: 10px 8px; justify-content: center; }
  .lb:not(.ov-photo) .lb-ov, .lb.ov-one .lb-ov { --cw: min(calc((100cqw - 32px) / 2), calc((100cqh - 64px) * 0.375)); grid-template-columns: repeat(2, var(--cw)); }
  .lb-ov-grid { display: contents; }
  .lb-tile { gap: 4px; font-size: 12px; }
  .lb-stage .lb-tile img, .lb-tile .lb-tile-gap { width: var(--cw); height: calc(var(--cw) * 4 / 3); border-radius: 10px; }
  .lb-tile.line { grid-column: 1; grid-row: 1; } .lb-tile.clay { grid-column: 2; grid-row: 1; }
  .lb-tile.depth { grid-column: 1; grid-row: 2; } .lb-tile.normal { grid-column: 2; grid-row: 2; }
  .lb-tile.photo { grid-column: 3; grid-row: 1 / span 2; }
  .lb.ov-one .lb-tile.photo { grid-column: 2; grid-row: 1; }
  .lb-stage .lb-tile.photo img, .lb-tile.photo .lb-tile-gap { width: var(--cw); height: calc(var(--cw) * 8 / 3 + 26px); }
  .lb.ov-one .lb-stage .lb-tile img, .lb.ov-one .lb-tile .lb-tile-gap { width: var(--cw); height: calc(var(--cw) * 2); }
  /* The arrows would sit on the tiles; swiping the stage changes the angle. */
  .lb.compare .lb-nav { display: none; }
  .lb { --fh: 70px; }
  .lb.map.has-fmts .lb-stage { padding-bottom: calc(var(--fh) + 46px); }
  .lb.map.has-fmts .lb-stage .lb-wipe img { bottom: calc(var(--fh) + 46px); }
  .lb-wipebar { padding-top: 4px; padding-bottom: 4px; }
  .lb-fmts { bottom: 8px; gap: 2px; padding: 3px; border-radius: 14px; max-width: calc(100% - 16px); }
  .lb-fmts button { min-width: 0; flex: 1 1 0; padding: 3px 4px; font-size: 11px; }
  .lb-stage .lb-fmts img, .lb-fmts .fmt-all, .lb-fmts .fmt-gap { width: 28px; height: 36px; }
}
@media (pointer: coarse) {
  /* The vertical swipe needs the stage's own vertical gestures (not while Details is open and the panel scrolls). */
  .lb:not(.more) .lb-stage { touch-action: none; }
}

/* Loading states (2026-11-01): a tile waits on a light placeholder; an image being swapped stays, dimmed, until the
   new one is decoded; a failed one offers a retry. */
.lb-stage .lb-tile img { background: var(--bg2); }
.lb-stage img.wait { opacity: 0.55; transition: opacity 0.15s; }
.lb-retry { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 3; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
/* The grid renders all poses; cards far off screen skip layout and paint until they come near. The margin keeps the
   hover shadow and focus ring inside the card's own box, which content-visibility clips to. */
.grid > .card { content-visibility: auto; contain-intrinsic-size: auto 380px; padding: 24px; margin: -24px; }
@media (max-width: 720px) { .grid > .card { padding: 0; margin: 0; contain-intrinsic-size: auto 260px; } }

/* ---- costumes (docs/DESIGN.md, 服装与搭配): the library page, its lightbox, the home band and the pairing tray.
   Costume images carry their own #D9D9D9 ground, so their tiles use the same grey in both themes. */
:root { --cos: #D9D9D9; }
.c-head { padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.c-crumb { margin: 0; display: flex; gap: 8px; font-size: 14px; color: var(--ink3); }
.c-crumb a { color: var(--ink3); }
.c-head h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; text-shadow: 3px 4px 0 var(--shadow); }
.c-sub { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--ink2); }
.c-sec { padding-top: 8px; padding-bottom: 80px; }
.c-filters .filter-row .count { margin-left: 4px; }
.c-filters .chip.adult { margin-left: auto; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 20px; }
.ccard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ctile-box { position: relative; }
.ctile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: var(--cos); transition: transform .25s ease, box-shadow .25s ease; }
.ctile img { width: 100%; height: 100%; object-fit: cover; }
.ccard.veiled .ctile img { filter: blur(14px); transform: scale(1.08); }
.ccard .veil { border-radius: 24px; }
.cvlabel { position: absolute; left: 10px; top: 10px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,0.85); color: #3F3D39; font-size: 11px; }
.cquick { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; min-height: 44px; border: 0; border-radius: 999px; background: #18181B; color: #FFFFFF; font-weight: 600; font-size: 14px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.ccard.veiled .cquick { display: none; }
@media (hover: hover) {
  .ccard:hover .ctile { transform: translateY(-3px); box-shadow: 0 18px 32px -18px rgba(24,24,27,0.4); }
  .ccard:hover .cquick, .cquick:focus-visible { opacity: 1; transform: none; }
}
@media (hover: none) { .cquick { display: none; } }
.ccard-t { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; min-width: 0; }
.ccard-t h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ccard-t span { font-size: 12px; color: var(--ink4); }

/* costume lightbox: the gallery lightbox's frame, a grey stage, four views */
.clb { width: 100%; height: 100%; }
.clb-box { position: relative; margin: auto; width: min(1100px, calc(100vw - 48px)); height: min(800px, calc(100vh - 48px)); margin-top: max(24px, calc((100vh - 800px) / 2)); display: flex; border-radius: 34px; overflow: hidden; background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5); }
.clb-stage { flex: 1 1 auto; position: relative; margin: 18px; border-radius: 26px; background: var(--cos); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.clb-stage > img { width: 100%; height: 100%; object-fit: contain; }
.clb.veiled .clb-stage > img, .clb.veiled .cchip img { filter: blur(28px); }
.clb-gap { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3F3D39; }
.clb-side { flex: 0 0 360px; padding: 36px 28px 28px 10px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.clb-head { display: flex; flex-direction: column; gap: 8px; padding-right: 48px; }
.clb-head h2 { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.clb-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clb-chips .cchip { background: var(--cos); }
.clb-chips .cchip img { object-fit: cover; mix-blend-mode: normal; }
.clb-acts { display: flex; flex-direction: column; gap: 10px; }
.clb-acts .pill.block { height: 52px; }
.pill:disabled { opacity: 0.4; cursor: default; }
.clb-row { display: flex; gap: 10px; }
.clb-row .pill { flex: 1; height: 48px; font-size: 14px; min-width: 0; }
.clb-row .circle { width: 48px; height: 48px; }

/* the band after the pose grid: one way in, below the poses */
.c-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 40px; padding-bottom: 72px; border-top: 1px solid var(--line2); }
.c-band-t { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.c-band-t h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.c-band-t p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink2); }

/* the pose lightbox's way into costumes */
.lb-pairbtn { height: 48px; font-size: 15px; gap: 8px; }

/* the pairing tray */
.tray { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: calc(100vw - 32px); }
body:has(dialog[open]) .tray { display: none; }
body.has-tray { padding-bottom: 96px; }
body.has-tray .toast, body.has-tray .nudge { bottom: 112px; }
.tray-bar { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 26px; background: #18181B; color: #F5F2ED; box-shadow: 0 16px 40px -8px rgba(24,24,27,0.45); }
.tray-l { padding: 0 6px 0 10px; font-size: 12px; color: #B8B3AA; white-space: nowrap; }
.tray-slot { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 12px 4px 4px; border-radius: 18px; background: #2A2A2E; color: #F5F2ED; text-decoration: none; min-width: 0; }
.tray-slot.cur { box-shadow: inset 0 0 0 2px var(--accent); }
.tray-th { display: block; width: 36px; height: 48px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: var(--cos); }
.tray-slot.pose .tray-th { background: var(--tint); }
.tray-th img { width: 100%; height: 100%; object-fit: cover; }
.tray-slot.pose .tray-th img { object-fit: contain; mix-blend-mode: multiply; }
.tray-st { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tray-st small { font-size: 11px; color: #B8B3AA; white-space: nowrap; }
.tray-slot.cur .tray-st small { color: var(--accent); }
.tray-st b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray-slot.empty { border: 1.5px dashed #6B6862; background: transparent; padding-left: 10px; }
.tray-plus { font-size: 20px; line-height: 1; color: #B8B3AA; }
.tray-chev { color: #6B6862; flex: 0 0 auto; }
.tray-soon { width: 36px; height: 52px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1.5px dashed #55534E; border-radius: 12px; color: #8A867E; font-size: 18px; }
.tray-done { min-height: 48px; padding: 0 18px; margin-left: 4px; border: 0; border-radius: 999px; background: var(--new); color: var(--new-ink); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.tray-x { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: #B8B3AA; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tray-x:hover { color: #FFFFFF; }
.tray-panel { width: 440px; max-width: 100%; max-height: calc(100vh - 140px); overflow-y: auto; box-sizing: border-box; padding: 18px; border-radius: 28px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 24px 60px -12px rgba(24,24,27,0.35); display: flex; flex-direction: column; gap: 12px; }
.tp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tp-h b { font-size: 17px; }
.tp-h span { font-size: 12px; color: var(--ink3); }
.tp-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tp-img { display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: var(--cos); }
.tp-img.pose { background: var(--tint); }
.tp-img img { width: 100%; height: 100%; object-fit: cover; }
.tp-img.pose img { object-fit: contain; mix-blend-mode: multiply; }
.tp-note { margin: 0; font-size: 12px; color: var(--ink4); }
.tp-prompt { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--bg2); }
.tp-ph { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink3); }
.tp-prompt p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink2); max-height: 7.2em; overflow-y: auto; overflow-wrap: anywhere; }
.tp-acts { display: flex; gap: 8px; }
.tp-acts .pill { flex: 1; height: 48px; font-size: 14px; }
.tp-tip { margin: 0; font-size: 13px; color: var(--ink3); text-align: center; }

@media (max-width: 860px) {
  .clb-box { flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; overflow-y: auto; }
  .clb-stage { flex: 0 0 auto; height: 56vh; height: 56dvh; margin: 60px 12px 0; border-radius: 20px; }
  .clb-side { flex: 0 0 auto; padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); gap: 14px; overflow: visible; }
  .clb-head { order: 2; padding-right: 0; }
  .clb-head h2 { font-size: 20px; }
  .clb-chips { order: 0; gap: 6px; }
  .clb-chips button span { border-radius: 10px; }
  .clb-acts { order: 1; }
  .clb-desc { order: 3; }
  .clb .keys { display: none; }
  .clb .lb-nav { width: 44px; height: 44px; margin-top: -22px; }
  .clb .lb-nav.l { left: 8px; } .clb .lb-nav.r { right: 8px; }
  .clb .lb-counter { left: 12px; top: 12px; height: 28px; font-size: 12px; }
  .clb .lb-close { top: 8px; right: 8px; width: 44px; height: 44px; }
  .lb-pairbtn { order: 4; flex-shrink: 0; height: 44px; margin: 8px 12px 0; font-size: 14px; }
}
@media (max-width: 720px) {
  .c-head { padding-top: 12px; gap: 8px; }
  .c-sub { font-size: 15px; }
  .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .ctile, .ccard .veil { border-radius: 16px; }
  .ccard { gap: 6px; }
  .ccard.veiled .ctile img { filter: blur(10px); }
  .ccard .veil-t { display: none; }
  .ccard .veil-ic { width: 40px; height: 40px; }
  .cvlabel { display: none; }
  .ccard-t h3 { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ccard-t span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-filters .filter-row { flex-wrap: nowrap; }
  .c-filters .chip.adult { margin-left: 0; order: -1; flex: 0 0 auto; }
  .c-filters .filter-row .count { display: none; }
  .c-band { padding-top: 28px; padding-bottom: 48px; }
  .c-band-t h2 { font-size: 24px; }
  /* The tray spans the phone's width; its label and the coming-soon slot give way first. */
  .tray { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; align-items: stretch; }
  .tray-bar { gap: 4px; padding: 6px; border-radius: 22px; }
  .tray-l { display: none; }
  .tray-slot { min-height: 52px; padding-right: 8px; gap: 6px; flex: 0 1 auto; }
  .tray-th { width: 33px; height: 44px; border-radius: 9px; }
  .tray-st small { font-size: 10px; }
  .tray-st b { font-size: 12px; }
  .tray-soon { width: 30px; height: 46px; }
  .tray-done { margin-left: auto; min-height: 44px; padding: 0 14px; }
  .tray-x { width: 40px; height: 44px; }
  .tray-panel { width: auto; max-height: calc(100dvh - 120px - env(safe-area-inset-bottom)); padding: 14px; border-radius: 24px; }
  .tp-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.has-tray { padding-bottom: 84px; }
  body.has-tray .toast, body.has-tray .nudge { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .tray-soon { display: none; } }
.c-band-t .eyebrow { letter-spacing: 0.08em; }
.clb-chips .cchip img { object-fit: contain; }
@media (max-width: 860px) {
  /* Phone lightbox: name on top as in the pose lightbox, then image, views, the pair button; details below. */
  .clb-side { display: contents; }
  .clb-head { order: -1; flex: 0 0 auto; padding: 10px 64px 0 14px; gap: 2px; }
  .clb-head .lb-names { display: none; }
  #clbMeta { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .clb-head h2 { font-size: 18px; line-height: 1.3; }
  .clb-stage { order: 0; height: 52vh; height: 52dvh; margin: 10px 12px 0; }
  .clb-chips { order: 1; margin: 10px 12px 0; }
  .clb-acts { order: 2; margin: 12px 12px 0; }
  .clb-desc { order: 3; margin: 14px 12px calc(20px + env(safe-area-inset-bottom)); flex: 0 0 auto; }
}
@media (max-width: 720px) {
  .c-filters { top: 0; }
  .tray-chev, .tray-soon, .tray-pk { display: none; }
  .tray-slot { flex: 1 1 0; }
}
@media (max-width: 860px) { .clb .clb-desc { display: flex; } }
@media (min-width: 721px) { .c-filters .cats { flex-wrap: wrap; overflow: visible; } }

/* ---- v2: six libraries (docs/DESIGN.md, 素材库与搭配) ---- */
/* Line-art libraries (animals) sit on the pose tile colour, multiplied like the poses. */
body[data-kind="line"] .ctile, body[data-kind="line"] .clb-stage, body[data-kind="line"] .clb-chips .cchip { background: var(--tile); }
body[data-kind="line"] .ctile img, body[data-kind="line"] .clb-stage > img, body[data-kind="line"] .cchip img { object-fit: contain; mix-blend-mode: multiply; }
@media (hover: hover) { body[data-kind="line"] .ccard:hover .ctile { background: #C7DCD6; } }

/* nav: the library dropdown */
.libnav { position: relative; display: inline-flex; }
.libnav-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.libnav-btn[aria-current="page"], .libnav-btn[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
.libnav-pop { position: absolute; top: calc(100% + 6px); left: -12px; z-index: 60; width: 440px; padding: 8px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 16px 40px -12px rgba(24,24,27,0.3); display: flex; flex-direction: column; gap: 2px; }
.libnav-pop[hidden] { display: none; }
.libnav-g { padding: 8px 12px 2px; font-size: 12px; color: var(--ink4); }
.libnav-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.lk { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 12px 6px 6px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.lk:hover, .lk[aria-current] { background: var(--bg2); }
.lk-img { display: block; width: 36px; height: 48px; flex: 0 0 auto; border-radius: 9px; overflow: hidden; background: var(--cos); }
.lk-img img { width: 100%; height: 100%; object-fit: cover; }
.line .lk-img { background: var(--tile); }
.line .lk-img img { object-fit: contain; mix-blend-mode: multiply; }
.lk-t { display: flex; flex-direction: column; gap: 1px; }
.lk-t b { font-size: 15px; font-weight: 600; }
.lk-t span { font-size: 12px; color: var(--ink3); }

/* the phone menu: the whole site on one screen */
.menu-btn { display: none; }
@media (max-width: 1100px) { .menu-btn { display: inline-flex; } }
@media (max-width: 720px) { .nav-tools > .gh { display: none; } .static .nav-links { display: none; } }
.site-menu { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
.site-menu[open] { display: flex; flex-direction: column; }
.site-menu::backdrop { background: var(--bg); }
.sm-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.sm-h .brand { font-size: 18px; }
.sm-h .circle { width: 44px; height: 44px; }
.sm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.sm-poses { display: flex; align-items: baseline; justify-content: space-between; text-decoration: none; color: var(--ink); }
.sm-poses span:first-child { font-size: 36px; font-weight: 800; letter-spacing: -0.04em; text-shadow: 2px 3px 0 var(--shadow); }
.sm-poses .mono { font-size: 13px; color: var(--ink3); }
.sm-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sm-series a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 14px; background: var(--bg2); color: var(--ink); text-decoration: none; font-size: 15px; }
.sm-series i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.sm-series span:nth-child(2) { flex: 1; }
.sm-series .mono { font-size: 12px; color: var(--ink3); }
.sm-label { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink3); }
.sm-libs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sm-lib { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 18px; background: var(--bg2); color: var(--ink); text-decoration: none; }
.sm-lib[aria-current] { box-shadow: inset 0 0 0 2px var(--ink); }
.sm-lib .lk-img { width: 100%; height: 92px; border-radius: 13px; }
.sm-lib .lk-t { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 0 4px 2px; }
.sm-links { display: flex; gap: 22px; padding-top: 6px; border-top: 1px solid var(--line); }
.sm-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 16px; }
.sm-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sm-langs { flex: 1; display: flex; gap: 4px; overflow-x: auto; }
.sm-langs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.sm-langs a[aria-current] { background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.sm-foot .circle { width: 44px; height: 44px; }

/* the home band: one card per library */
.c-band { display: block; }
.c-band-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.c-band-libs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.c-lib { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 26px; background: var(--bg2); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.c-lib-img { display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: var(--cos); }
.c-lib-img img { width: 100%; height: 100%; object-fit: cover; }
.c-lib.line .c-lib-img { background: #C7DCD6; }
.c-lib.line .c-lib-img img { object-fit: contain; mix-blend-mode: multiply; }
.c-lib-t { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 4px; }
.c-lib-t b { font-size: 18px; }
.c-lib-t span { font-size: 13px; color: var(--ink3); }
.c-lib-t .mono { margin-top: 4px; font-size: 12px; color: var(--ink4); }
@media (hover: hover) { .c-lib:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -18px rgba(24,24,27,0.35); } }
@media (max-width: 1000px) { .c-band-libs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .c-band-libs { gap: 8px; }
  .c-lib { padding: 6px; gap: 6px; border-radius: 18px; }
  .c-lib-img { border-radius: 13px; }
  .c-lib-t b { font-size: 15px; }
  .c-lib-t span:not(.mono) { display: none; }
}

/* the tray, many slots */
.tray-items { display: contents; }
.tray-stack, .tray-here { display: none; }
.tray-th.line { background: var(--tile); }
.tray-th.line img { object-fit: contain; mix-blend-mode: multiply; }
.tray-th:not(.line) { background: var(--cos); }
.tray-slot.pose .tray-th, .tray-th[style*="--tint"] { background: var(--tint); }
.tray-soon { cursor: pointer; background: transparent; color: #F5F2ED; }
.tray-soon[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.tray-add { width: 320px; max-width: 100%; box-sizing: border-box; padding: 8px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 20px 48px -12px rgba(24,24,27,0.35); display: flex; flex-direction: column; }
.tray-add-h { padding: 8px 12px 4px; font-size: 12px; color: var(--ink4); }
.tray-add a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 12px 4px 4px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.tray-add a:hover { background: var(--bg2); }
.tray-add .tray-th { width: 30px; height: 40px; border-radius: 8px; }
.tray-add-n { flex: 1; font-size: 15px; }
.tray-add .mono { font-size: 12px; color: var(--ink4); }
.tray-panel { width: 600px; }
.tp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tp-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-card .tp-img { aspect-ratio: 3 / 4; }
.tp-img:not(.pose) { background: var(--cos); }
.tp-img.line { background: var(--tint, var(--tile)); }
.tp-img.line img { object-fit: contain; mix-blend-mode: multiply; }
.tp-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-meta small { font-size: 11px; color: var(--ink4); }
.tp-meta b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-meta .mono { font-size: 11px; color: var(--ink3); }
.tp-acts { display: flex; align-items: center; gap: 2px; margin-left: -8px; }
.tp-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.tp-ic:hover { background: var(--bg2); }
.tp-change { text-decoration: underline; text-underline-offset: 3px; }
.tp-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-more span { font-size: 12px; color: var(--ink4); margin-right: 2px; }
.tp-more a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1.5px dashed var(--line); border-radius: 999px; color: var(--ink2); text-decoration: none; font-size: 13px; }
.tp-save { width: 100%; height: 48px; font-size: 15px; }
@media (max-width: 720px) {
  /* Phones: the pose slot, one slot of stacked thumbnails for everything else, Done, ×. */
  .tray-items, .tray-chev, .tray-soon { display: none; }
  .tray-stack, .tray-here { display: flex; }
  .tray-here:empty { display: none; }
  .tray-stack { align-items: center; gap: 6px; min-height: 52px; padding: 3px 10px 3px 3px; border: 0; border-radius: 16px; background: #2A2A2E; color: #F5F2ED; font: inherit; cursor: pointer; flex: 1 1 0; min-width: 0; text-align: left; }
  .tray-stack.cur { box-shadow: inset 0 0 0 2px var(--accent); }
  .tray-stack.cur small { color: var(--accent); }
  .tray-stack-th { display: flex; flex: 0 0 auto; }
  .tray-stack-th .tray-th { border: 2px solid #2A2A2E; box-sizing: content-box; }
  .tray-stack-th .tray-th + .tray-th { margin-left: -16px; }
  .tray-here .tray-slot { flex: 1 1 0; }
  .tray-add { width: auto; }
  .tray-panel { width: auto; }
  .tp-cards { grid-template-columns: 1fr; gap: 6px; }
  .tp-card { flex-direction: row; align-items: center; gap: 10px; padding: 4px; border-radius: 14px; background: var(--bg2); }
  .tp-card .tp-img { width: 48px; height: 64px; flex: 0 0 auto; aspect-ratio: auto; border-radius: 10px; }
  .tp-meta { flex: 1; }
  .tp-acts { margin-left: 0; }
}
@media (max-width: 720px) {
  /* Nothing picked yet: keep "+" on the phone bar, the only way back to the library list. */
  .tray-bar.solo .tray-soon { display: inline-flex; width: 48px; height: 52px; margin-left: auto; }
  .tray-bar.solo .tray-slot { flex: 0 1 auto; }
}
@media (min-width: 721px) {
  .tray-panel { width: 680px; }
  .tp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tray-st small { overflow: hidden; text-overflow: ellipsis; }