:root {
  color-scheme: dark;
  --canvas: #030d17;
  --rail: #0b1b30;
  --active: #008cff;
  --ink: #f5f8ff;
  --page-width: 480px;
  --nav-height: 60px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--canvas); scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cover { display: flex; justify-content: center; align-items: center; width: 100%; height: 100svh; min-height: 280px; background: var(--canvas); }
.cover-link { display: block; height: 100%; max-width: 100%; outline-offset: -4px; }
.cover-picture { display: block; height: 100%; }
.cover-image { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.cover-link:focus-visible { outline: 3px solid var(--active); }
.cover-layout { display: none; }
.cover-link { touch-action: pan-x pinch-zoom; }
/* Reflow the original title and brand artwork instead of shrinking the entire poster. */
@media (max-width: 600px) {
  .cover { position: relative; overflow: hidden; height: var(--cover-height, 100svh); min-height: 0; }
  .cover-link { position: relative; width: 100%; height: 100%; }
  .cover-picture { width: 100%; height: 100%; }
  .cover-image { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 80%; }
  .cover-layout { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }
  .cover-title, .cover-brands { position: relative; z-index: 1; display: none; width: 100%; flex: none; -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent); }
  .cover-title { height: min(83.3333vw, calc(var(--cover-height, 100svh) * .55)); margin-top: auto; }
  .cover-brands { height: min(41.6667vw, calc(var(--cover-height, 100svh) * .28)); margin-top: auto; }
  .cover-hint { position: absolute; top: var(--cue-top, 65%); left: 50%; transform: translateX(-50%); width: 180px; z-index: 1; height: 68px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #f3f7ff; font-size: 12px; line-height: 16px; letter-spacing: 2px; background: radial-gradient(ellipse at center, #030d17 35%, #030d17e8 53%, transparent 73%); }
  .cover-hint svg { width: 22px; height: 19px; animation: swipe-cue 1.5s ease-in-out infinite; }
  .cover--compact .cover-image { visibility: hidden; }
  .cover--compact .cover-layout { display: flex; flex-direction: column; align-items: center; padding: 8px 0 max(12px, env(safe-area-inset-bottom, 0px)); }
  .cover--compact .cover-title, .cover--compact .cover-brands { display: block; }
  .cover--compact .cover-hint { position: relative; top: auto; left: auto; transform: none; height: 44px; background: none; }
}
@keyframes swipe-cue { 0%,100% { transform: translateY(3px); opacity: .55; } 55% { transform: translateY(-4px); opacity: 1; } }
.entry-cover-overlay { position: fixed !important; inset: 0 !important; width: 100% !important; margin: 0 !important; z-index: 100; pointer-events: none; will-change: transform; }
.reader { width: min(100%, var(--page-width)); margin: 0 auto; }
.main-header { position: sticky; top: 0; z-index: 10; height: calc(var(--nav-height) + env(safe-area-inset-top, 0px)); padding: calc(6px + env(safe-area-inset-top, 0px)) 7px 6px; background: var(--canvas); }
.main-nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr 1fr; gap: 2px; height: 48px; padding: 4px; border-radius: 28px; background: var(--rail); }
.main-tab { display: flex; justify-content: center; align-items: center; border-radius: 24px; font-size: 15px; line-height: 1; font-weight: 600; text-decoration: none; white-space: nowrap; color: #e7eef8; transition: background-color 160ms, color 160ms; }
.main-tab[aria-current="page"] { background: var(--active); color: #fff; }
.main-tab:hover { color: #fff; }
.main-tab:focus-visible { outline: 2px solid white; outline-offset: -2px; }
.slate { position: relative; width: 100%; background: var(--canvas); }
.slate-picture { display: block; }
.slate-image { display: block; width: 100%; height: auto; }
.hotspot { display: block; position: absolute; border-radius: 999px; text-decoration: none; outline-offset: 2px; }
.hotspot:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 5px #008cff; }
@media (hover: hover) { .hotspot:hover { box-shadow: inset 0 0 0 2px #ffffff70; } }
.image-error { position: absolute; inset: 20px 12px auto; padding: 24px; background: var(--rail); text-align: center; border-radius: 12px; }
.image-error button { margin-top: 12px; padding: 10px 24px; border: 0; border-radius: 20px; background: var(--active); color: white; font: inherit; cursor: pointer; }
@media (max-width: 359px) { .main-tab { font-size: 13px; } .main-nav { gap: 0; } .main-header { padding-left: 4px; padding-right: 4px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .cover-hint svg { animation: none; } }