/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5 */
/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: Garden · enrichment: E8 verified game artwork · nav: N9 · footer: Ft1
 * audience: Chinese visual-novel players · use: download and guide discovery · tone: soft editorial
 * H2 knobs: split=7/5, image=unframed, divider=gutter · F3 knobs: columns=3, rules=every-row, numerals=tabular
 * C4 knobs: reveal=always, anchor=viewport-bottom, shadow=hairline · N9 knobs: wordmark=image, cta=filled, padding=spacious · Ft1 knobs: wordmark=display-2xl, tagline=roman, links=two-line
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 */
@import url("../../tokens.css");

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 0; overflow-x: clip; }
html { scroll-behavior: smooth; background: var(--color-paper); }
body { padding-bottom: var(--space-3xl); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.72; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: var(--color-clear); }
button:active, a:active, summary:active { opacity: 0.78; }
h1, h2, h3, p, li, th, td { min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-style: normal; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
p { max-width: 65ch; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.shell { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.topnav { position: fixed; z-index: var(--z-sticky); inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.6rem; padding: max(var(--space-sm), env(safe-area-inset-top)) var(--page-gutter) var(--space-sm); background: color-mix(in oklch, var(--color-paper) 94%, var(--color-clear)); border-bottom: var(--rule-thin) solid var(--color-rule); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; white-space: nowrap; }
.brand img { width: 2.8rem; height: 2.8rem; object-fit: cover; border-radius: 50%; border: var(--rule-thin) solid var(--color-rule); }
.brand span { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.brand:hover span { color: var(--color-accent-strong); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.menu-toggle, .nav-download { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-xs) var(--space-md); white-space: nowrap; border-radius: var(--radius-sm); }
.menu-toggle { min-width: 2.75rem; background: var(--color-clear); border: var(--rule-thin) solid var(--color-rule); cursor: pointer; }
.nav-download { background: var(--color-accent); color: var(--color-accent-ink); border: var(--rule-thin) solid var(--color-accent); font-weight: 700; }
.menu-toggle:hover, .dialog-close:hover, .dialog-prev:hover, .dialog-next:hover { background: var(--color-paper-2); }
.nav-download:hover { background: var(--color-accent-strong); }
.nav-panel { position: fixed; z-index: var(--z-dropdown); inset: 4.6rem var(--page-gutter) auto auto; display: grid; width: min(20rem, calc(100% - (var(--page-gutter) * 2))); padding: var(--space-sm); background: var(--color-paper); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); box-shadow: 0 var(--space-sm) var(--space-xl) color-mix(in oklch, var(--color-ink) 10%, var(--color-clear)); opacity: 0; transform: translateY(-0.5rem); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.topnav[data-open="true"] .nav-panel { opacity: 1; transform: none; pointer-events: auto; }
.nav-panel a { display: flex; align-items: center; min-height: 2.8rem; padding-inline: var(--space-md); white-space: nowrap; border-radius: var(--radius-sm); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--color-paper-2); }

.download-btn, .secondary-btn, .text-link { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: var(--space-sm) var(--space-lg); white-space: nowrap; overflow: clip; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.download-btn { background: var(--color-accent); color: var(--color-accent-ink); border: var(--rule-thin) solid var(--color-accent); }
.download-btn::before { content: ""; position: absolute; inset: 0 auto 0 -55%; width: 34%; background: linear-gradient(90deg, var(--color-clear), color-mix(in oklch, var(--color-paper) 55%, var(--color-clear)), var(--color-clear)); transform: skewX(-18deg); transition: transform var(--dur-long) var(--ease-out); }
.download-btn:hover::before { transform: translateX(460%) skewX(-18deg); }
.download-btn[aria-disabled="true"], .download-btn:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.download-btn[aria-busy="true"] { cursor: progress; }
.download-btn.is-error { background: var(--color-danger); border-color: var(--color-danger); }
.download-btn.is-success { background: var(--color-success); border-color: var(--color-success); }
.secondary-btn { background: var(--color-clear); color: var(--color-ink); border: var(--rule-thin) solid var(--color-ink-soft); }
.secondary-btn:hover { background: var(--color-paper-2); }
.text-link { justify-content: flex-start; padding-inline: 0; color: var(--color-accent-strong); border-bottom: var(--rule-thin) solid var(--color-accent); border-radius: 0; }
.text-link:hover { color: var(--color-ink); }

.hero-split { min-height: 42rem; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--space-xl), 6vw, var(--space-3xl)); align-items: center; padding: var(--space-3xl) var(--page-gutter) var(--space-4xl); background: linear-gradient(135deg, var(--color-wash), var(--color-paper)); }
.hero-copy { justify-self: end; width: min(100%, 44rem); }
.hero-copy h1 { max-width: 14ch; font-size: var(--text-display-s); line-height: 1.05; }
.hero-copy h1 span { display: block; margin-top: var(--space-xs); color: var(--color-accent-strong); font-family: var(--font-body); font-size: clamp(var(--text-md), 2vw, var(--text-xl)); letter-spacing: 0; }
.hero-lede { margin: var(--space-lg) 0 0; color: var(--color-muted); font-size: var(--text-md); }
.trust-line { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.trust-line li { padding: var(--space-2xs) var(--space-sm); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); color: var(--color-ink-soft); font-size: var(--text-sm); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-figure { position: relative; margin: 0; align-self: stretch; min-height: 34rem; overflow: clip; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-figure figcaption { position: absolute; inset: auto var(--space-md) var(--space-md); max-width: 26rem; padding: var(--space-sm) var(--space-md); background: var(--color-paper); border: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.reveal { opacity: 0; transform: translateY(0.5rem); animation: page-reveal var(--dur-short) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes page-reveal { to { opacity: 1; transform: none; } }

.fact-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--color-rule); gap: var(--rule-thin); border-block: var(--rule-thin) solid var(--color-rule); }
.fact-strip div { padding: var(--space-lg) var(--page-gutter); background: var(--color-paper-2); }
.fact-strip strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.fact-strip span { color: var(--color-muted); font-size: var(--text-sm); }
section { padding-block: var(--space-3xl); }
.head-hang { padding: var(--space-xl) 0 var(--space-lg); }
.head-hang h2 { max-width: 18ch; font-size: var(--text-3xl); }
.section-intro { margin: var(--space-md) 0 0; color: var(--color-muted); }
.studio-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(var(--space-xl), 7vw, var(--space-4xl)); align-items: center; }
.studio-row.reverse .studio-copy { order: 2; }
.studio-row.reverse .studio-image { order: 1; }
.studio-copy p { color: var(--color-muted); }
.studio-copy p + p { margin-top: var(--space-lg); }
.studio-image { margin: 0; }
.studio-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }
.studio-image figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }

.spec-sheet { width: 100%; margin-top: var(--space-2xl); border-collapse: collapse; }
.spec-sheet th, .spec-sheet td { padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: top; }
.spec-sheet th { width: 10rem; color: var(--color-ink-soft); }
.spec-sheet td:last-child { color: var(--color-muted); }
.feature-list { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); margin-top: var(--space-2xl); }
.feature-list ol { margin: 0; padding: 0; list-style: none; counter-reset: feature; }
.feature-list li { counter-increment: feature; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg) 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.feature-list li::before { content: counter(feature, decimal-leading-zero); color: var(--color-accent-strong); font-family: var(--font-display); font-size: var(--text-lg); }
.feature-list h3 { font-size: var(--text-lg); }
.feature-list p { margin: var(--space-xs) 0 0; color: var(--color-muted); }
.feature-note { align-self: start; padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); }
.feature-note p { margin: 0; color: var(--color-muted); }

.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.gallery-item { grid-column: span 5; padding: 0; overflow: clip; background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); cursor: zoom-in; }
.gallery-item:nth-child(3n + 1) { grid-column: span 7; }
.gallery-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-short) var(--ease-out); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.02); }
.gallery-item span { display: block; padding: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); text-align: left; }
.gallery-item[hidden] { display: none; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
.tab { min-height: 2.75rem; padding: var(--space-xs) var(--space-md); background: var(--color-clear); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); white-space: nowrap; cursor: pointer; }
.tab:hover { background: var(--color-paper-2); }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

.download-band { background: var(--color-paper-3); }
.download-band .shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; }
.download-band h2 { font-size: var(--text-3xl); }
.download-band p { margin-bottom: 0; color: var(--color-muted); }
.timeline { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg) 0; border-top: var(--rule-thin) solid var(--color-rule); }
.timeline strong { color: var(--color-accent-strong); font-variant-numeric: tabular-nums; }
.timeline p { margin: 0; color: var(--color-muted); }
.fit-grid, .platform-grid, .requirement-grid, .guide-grid, .article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.fit-card, .platform-card, .requirement, .guide-card, .article-list a { padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); }
.fit-card:nth-child(2), .guide-card:nth-child(3n + 2) { background: var(--color-wash); }
.fit-card h3, .platform-card h2, .requirement h2, .guide-card h2, .article-list strong { font-size: var(--text-xl); }
.fit-card p, .platform-card p, .requirement p, .guide-card p, .article-list span { margin-bottom: 0; color: var(--color-muted); }
.platform-card.recommended { background: var(--color-wash); border-color: var(--color-accent); }
.card-label { display: block; margin-bottom: var(--space-sm); color: var(--color-accent-strong); font-weight: 700; }
.requirement ul { padding-left: var(--space-lg); color: var(--color-muted); }
.guide-card a, .article-list a { transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.guide-card a:hover { color: var(--color-accent-strong); }
.article-list a:hover { background: var(--color-wash); }
.article-list strong, .article-list span { display: block; }
.article-list span { margin-top: var(--space-xs); }

.faq { margin-top: var(--space-2xl); border-top: var(--rule-thin) solid var(--color-rule); }
.faq details { border-bottom: var(--rule-thin) solid var(--color-rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.25rem; cursor: pointer; list-style: none; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent-strong); }
.faq summary::after { content: "+"; flex: none; color: var(--color-accent-strong); font-family: var(--font-display); font-size: var(--text-xl); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 var(--space-lg); color: var(--color-muted); }
.final-cta { padding-block: var(--space-4xl); background: var(--color-wash); }
.final-cta h2 { max-width: 17ch; font-size: var(--text-3xl); }
.final-cta p { color: var(--color-muted); }

.page-hero { padding: var(--space-4xl) 0 var(--space-3xl); background: linear-gradient(135deg, var(--color-wash), var(--color-paper)); }
.page-hero h1 { max-width: 18ch; font-size: var(--text-display-s); }
.page-hero p { color: var(--color-muted); font-size: var(--text-md); }
.article { width: min(calc(100% - (var(--page-gutter) * 2)), 49rem); margin-inline: auto; padding: var(--space-4xl) 0 var(--space-3xl); }
.article h1 { font-size: var(--text-article-title); }
.article h2 { margin-top: var(--space-3xl); font-size: var(--text-2xl); }
.article h3 { margin-top: var(--space-xl); font-size: var(--text-xl); }
.article p, .article li { color: var(--color-muted); }
.article .answer { padding: var(--space-lg); background: var(--color-wash); border: var(--rule-thin) solid var(--color-rule); color: var(--color-ink-soft); font-size: var(--text-md); }
.article table { width: 100%; margin-top: var(--space-xl); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.article th, .article td { padding: var(--space-sm); border-bottom: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: top; }
.article nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xl); }
.source-note { margin-top: var(--space-xl); padding: var(--space-md); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); }

.footer { padding: var(--space-3xl) 0 var(--space-xl); border-top: var(--rule-thin) solid var(--color-rule); }
.footer-mast { display: grid; grid-template-columns: minmax(15rem, 4fr) minmax(0, 6fr); gap: var(--space-3xl); }
.footer-brand { display: flex; align-items: flex-start; gap: var(--space-md); }
.footer-brand img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 50%; }
.footer-brand strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); }
.footer-brand p { margin: var(--space-xs) 0 0; color: var(--color-muted); }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.footer-links h3 { font-family: var(--font-body); font-size: var(--text-base); letter-spacing: 0; }
.footer-links ul { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: var(--space-xs); }
.footer-links a { display: flex; align-items: center; min-height: 2.75rem; color: var(--color-muted); white-space: nowrap; }
.footer-links a:hover { color: var(--color-accent-strong); }
.footer-legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.footer-legal p { max-width: none; margin: var(--space-2xs) 0; }
.cta-sticky { position: fixed; z-index: var(--z-sticky); inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 4.5rem; padding: var(--space-sm) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-sm), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left)); background: color-mix(in oklch, var(--color-paper) 95%, var(--color-clear)); border-top: var(--rule-thin) solid var(--color-rule); }
.cta-sticky span { color: var(--color-muted); font-size: var(--text-sm); }
.cta-sticky .download-btn { min-height: 2.75rem; padding-block: var(--space-xs); }

.lightbox { position: fixed; inset: 0; width: min(calc(100% - var(--space-md)), 78rem); height: fit-content; max-height: 92dvh; margin: auto; padding: 0; background: var(--color-paper); color: var(--color-ink); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); }
.lightbox::backdrop { background: color-mix(in oklch, var(--color-ink) 70%, var(--color-clear)); }
.lightbox-inner { position: relative; }
.lightbox img { width: 100%; max-height: 78dvh; object-fit: contain; background: var(--color-ink); }
.lightbox figcaption { padding: var(--space-md) var(--space-2xl) var(--space-md) var(--space-md); color: var(--color-muted); }
.dialog-close, .dialog-prev, .dialog-next { position: absolute; z-index: var(--z-raised); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--color-paper); border: var(--rule-thin) solid var(--color-rule); border-radius: 50%; cursor: pointer; }
.dialog-close { inset: var(--space-sm) var(--space-sm) auto auto; }
.dialog-prev { inset: 50% auto auto var(--space-sm); transform: translateY(-50%); }
.dialog-next { inset: 50% var(--space-sm) auto auto; transform: translateY(-50%); }

@media (max-width: 60rem) {
  .hero-split, .studio-row, .feature-list, .footer-mast { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { min-height: 28rem; }
  .studio-row.reverse .studio-copy, .studio-row.reverse .studio-image { order: initial; }
  .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item, .gallery-item:nth-child(3n + 1) { grid-column: span 6; }
}
@media (max-width: 40rem) {
  .brand span, .nav-download, .cta-sticky span { display: none; }
  .hero-split { min-height: 0; grid-template-columns: minmax(0, 1fr); padding-top: var(--space-3xl); }
  .hero-figure { min-height: 22rem; }
  .hero-actions .download-btn, .hero-actions .secondary-btn { width: 100%; }
  .fact-strip, .fit-grid, .platform-grid, .requirement-grid, .guide-grid, .article-list, .footer-links { grid-template-columns: minmax(0, 1fr); }
  .fact-strip div { padding: var(--space-md) var(--page-gutter); }
  section { padding-block: var(--space-2xl); }
  .head-hang h2, .download-band h2, .final-cta h2 { font-size: var(--text-2xl); }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-item, .gallery-item:nth-child(3n + 1) { grid-column: auto; }
  .download-band .shell { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .spec-sheet, .spec-sheet tbody, .spec-sheet tr, .spec-sheet th, .spec-sheet td { display: block; width: 100%; }
  .spec-sheet th { padding-bottom: 0; border-bottom: 0; }
  .spec-sheet td:last-child { padding-top: 0; }
  .page-hero { padding-top: var(--space-4xl); }
  .article { padding-top: var(--space-4xl); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .reveal { animation: none; opacity: 1; transform: none; }
  .nav-panel, .topnav[data-open="true"] .nav-panel { transform: none; }
  .download-btn::before, .download-btn:hover::before, .gallery-item:hover img, .gallery-item:focus-visible img { transform: none; transition: none; }
}