:root {
  color-scheme: dark;
  --base: #151419;
  --surface: #1c1a21;
  --frame: #37323e;
  --ink: #f4f0f8;
  --muted: #c0b8cb;
  --accent: #dfd0ff;
  --code: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --side: clamp(16px, 4.8vw, 70px);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 0; }
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse 75% 340px at 50% -160px, #45374f, transparent), var(--base);
  color: var(--ink);
  font: 16px/1.5 system-ui, "Microsoft YaHei", sans-serif;
}
body:has(.viewer[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible, main:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.frame { width: min(1320px, calc(100% - var(--side) * 2)); margin-inline: auto; }
.skip {
  position: fixed; z-index: 3; top: 10px; left: 10px; transform: translateY(-160%);
  padding: 8px 14px; background: var(--accent); color: var(--base);
}
.skip:focus { transform: none; }
.site-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--frame);
}
.identity, .source-link { display: inline-flex; align-items: center; gap: 8px; }
.identity { gap: 11px; font: 700 15px/1 var(--code); letter-spacing: .15em; }
.identity > svg { width: 34px; height: 34px; color: var(--accent); }
.identity-underscore { color: var(--accent); }
.source-link { min-height: 44px; color: var(--muted); font: 13px/1.3 var(--code); }
.source-link svg { width: 15px; height: 15px; }
.source-link:hover { color: var(--accent); }
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: clamp(21px, 4.7vw, 61px) 0 clamp(14px, 2.8vw, 31px);
}
h1, h2, p, figure { margin: 0; }
h1 { font-size: clamp(27px, 5vw, 57px); letter-spacing: -.065em; line-height: 1.14; }
.catalog-count, .viewer-count, .serial {
  color: var(--muted); font: 12px/1.4 var(--code); font-variant-numeric: tabular-nums; letter-spacing: .07em;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(11px, 1.7vw, 23px);
}
.art-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--frame);
  border-radius: 13px;
  background: var(--surface);
  transition: border-color .18s ease;
}
.art-card:hover { border-color: #9988ac; }
.art-card:focus-within { border-color: var(--accent); }
.art-card.featured { grid-column: 1 / -1; }
.artwork-open {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  isolation: isolate;
  padding: clamp(8px, 1.3vw, 17px);
  border: 0;
  border-radius: 12px 12px 0 0;
  cursor: zoom-in;
  background:
    radial-gradient(circle at 50% 55%, #3b3443 0%, transparent 72%),
    radial-gradient(circle, #474051 1px, transparent 1.25px) 0 0 / 18px 18px,
    #242129;
}
.artwork-open:focus-visible { outline-offset: -4px; }
.featured .artwork-open { aspect-ratio: 2.48; }
.artwork-open img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px #0005);
}
.artwork-open .expand {
  position: absolute;
  inset: 9px 9px auto auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #a79db58c;
  border-radius: 6px;
  background: #17151bdf;
  color: #fff;
}
.expand svg { width: 17px; height: 17px; }
.artwork-open:hover .expand { border-color: var(--accent); color: var(--accent); }
.art-card figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 51px;
  padding: 9px clamp(10px, 1.6vw, 20px);
  border-top: 1px solid var(--frame);
}
.art-title { font-size: clamp(13px, 1.7vw, 16px); font-weight: 650; overflow-wrap: anywhere; }
.art-credit { display: block; color: var(--muted); font: 11px/1.4 var(--code); overflow-wrap: anywhere; }
.like-count { color: var(--muted); font: 12px/1.4 var(--code); white-space: nowrap; }
.empty { padding: 60px 10px; color: var(--muted); text-align: center; border: 1px dashed var(--frame); border-radius: 12px; }
.site-footer { display: grid; place-items: center; min-height: 73px; margin-top: 27px; border-top: 1px solid var(--frame); color: var(--accent); }
.viewer {
  width: min(1320px, calc(100% - 18px));
  max-width: none;
  max-height: calc(100% - 18px);
  padding: 0;
  border: 1px solid var(--frame);
  border-radius: 14px;
  background: #17151b;
  color: var(--ink);
  overflow: auto;
}
.viewer::backdrop { background: #100d16e8; backdrop-filter: blur(5px); }
.viewer-shell { padding: 5px 10px; }
.viewer-header, .viewer-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 50px;
  padding-inline: 4px;
}
.viewer-footer { flex-wrap: wrap; }
.viewer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.viewer-footer h2 { font-size: 16px; }
.viewer-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.viewer-art {
  grid-column: 2;
  display: grid;
  place-items: center;
  min-height: min(48svh, 380px);
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #242129;
}
.viewer-art img { display: block; max-width: 100%; max-height: calc(100svh - 140px); width: auto; height: auto; object-fit: contain; }
.icon-button {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--frame);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.icon-button svg { width: 21px; height: 21px; }
.viewer-prev { grid-column: 1; }
.viewer-next { grid-column: 3; }
.image-error { color: var(--muted); font-size: 14px; text-align: center; }
@media (max-width: 580px) {
  .site-header { min-height: 63px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .viewer-stage { grid-template-columns: minmax(0, 1fr) auto auto; }
  .viewer-art { grid-column: 1 / -1; grid-row: 1; }
  .viewer-prev { grid-column: 2; grid-row: 2; }
  .viewer-next { grid-column: 3; grid-row: 2; }
  .viewer-art img { max-height: calc(100svh - 190px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}