/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5 */
/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Midnight · enrichment: E8 verified reference artwork · nav: N9 · footer: Ft1
 * audience: first-time Chinese-speaking players · use: download-entry · tone: atmospheric
 * H1 knobs: image-area=full-bleed background, text=lower-left, scale=viewport · F3 knobs: rows=source-backed records, footnotes=inline · F4 knobs: numbering=two-digit, connector=none
 * C4 knobs: anchor=viewport-bottom, reassurance=platforms · responsive: pass (320/375/414/768) */
@import url("../../tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
html { scroll-behavior: smooth; }
body { padding-bottom: 4.25rem; line-height: 1.65; }
body::before, body::after { position: fixed; z-index: -1; width: 28rem; height: 28rem; border-radius: 50%; background: var(--color-glow); content: ""; filter: blur(6rem); pointer-events: none; }
body::before { inset: -12rem auto auto -12rem; } body::after { inset: auto -12rem 15rem auto; }
a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3, p { min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; line-height: 1.04; }
p { max-width: 65ch; }
.nav-edge { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: max(var(--space-sm), env(safe-area-inset-top)) clamp(var(--space-md), 4vw, var(--space-2xl)); border-bottom: var(--rule-thin) solid var(--color-clear); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.nav-edge.is-scrolled { background: var(--color-paper); border-color: var(--color-rule); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.brand img, .foot-title img { width: 2.25rem; height: 2.25rem; object-fit: cover; border-radius: var(--radius-sm); }
.nav-links { display: none; align-items: center; gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.nav-links a, .foot-links a, .related-links a, .article-links a { white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover, .foot-links a:hover, .related-links a:hover, .article-links a:hover { color: var(--color-accent); }
.nav-cta, .button-primary, .button-secondary, .filter-bar button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border-radius: var(--radius-sm); font-weight: 800; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-cta, .button-primary { padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 2rem var(--color-glow); }
.nav-cta:hover, .button-primary:hover { background: var(--color-accent-strong); transform: translateY(-2px); }
.button-secondary { padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-ink); color: var(--color-ink); }
.button-secondary:hover { transform: translateY(-2px); background: var(--color-paper-3); }
.nav-cta { display: none; }.menu-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 0; background: var(--color-clear); color: var(--color-ink); font-weight: 800; white-space: nowrap; }
.menu-sheet { position: fixed; z-index: 19; inset: 4.8rem var(--space-md) auto; display: none; padding: var(--space-sm); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); }
.menu-sheet[data-open="true"] { display: grid; } .menu-sheet a { min-height: 2.75rem; padding: var(--space-sm); font-weight: 700; }
.hero-marquee { position: relative; isolation: isolate; min-height: 46rem; min-height: 100dvh; display: grid; align-items: end; overflow: clip; }
.hero-marquee > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-marquee::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, var(--color-overlay), var(--color-clear) 70%), linear-gradient(0deg, var(--color-paper), var(--color-clear) 48%); }
.hero-overlay { width: min(100% - 2rem, 82rem); margin-inline: auto; padding: 8rem 0 var(--space-3xl); }
.micro { margin: 0 0 var(--space-sm); color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; }
.hero-overlay h1 { max-width: 9ch; margin: 0; font-size: var(--text-display); font-weight: 700; letter-spacing: -.07em; }
.hero-overlay h1 span { display: block; margin-top: var(--space-md); color: var(--color-muted); font-family: var(--font-body); font-size: clamp(1rem, 2vw, var(--text-md)); letter-spacing: .05em; }
.hero-overlay > p:not(.micro) { margin: var(--space-lg) 0; color: var(--color-ink); font-size: var(--text-md); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.signal-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-rule); gap: var(--rule-thin); }
.signal-strip div { min-height: 7rem; padding: var(--space-lg); background: var(--color-paper-2); }.signal-strip b { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); }.signal-strip span { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.content { width: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: var(--space-3xl); }.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-2xl); }.section-head h2, .download-band h2, .final-cta h2 { max-width: 19ch; margin: 0; font-size: clamp(var(--text-xl), 4vw, var(--text-3xl)); letter-spacing: -.045em; }.section-head .text-action { margin-top: var(--space-sm); }
.prose { max-width: 45rem; font-size: var(--text-md); }.prose p { margin: 0 0 var(--space-lg); }.text-action { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-accent); font-weight: 800; white-space: nowrap; }.text-action::after { content: "→"; margin-inline-start: var(--space-xs); }
.features { background: var(--color-paper-2); }.feature-grid, .fit-grid, .platform-grid, .requirements, .guide-cards { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-sm); }.feature, .fit-grid article, .platform-grid article, .requirements article, .guide-card { min-height: 12rem; padding: var(--space-xl); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }.feature { transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }.feature:hover { transform: translateY(-3px); border-color: var(--color-accent); }.feature span, .tag { color: var(--color-accent); font-family: var(--font-display); font-weight: 700; }.feature h3, .fit-grid h3, .guide-card h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-lg); }.feature p, .fit-grid p, .guide-card p, .platform-grid p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.gallery-preview { overflow: clip; }.gallery-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-sm); }.gallery-card { padding: 0; overflow: clip; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); color: var(--color-ink); cursor: zoom-in; text-align: start; }.gallery-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-medium) var(--ease-out); }.gallery-card:hover img { transform: scale(1.035); }.gallery-card span { display: block; padding: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.download-band, .final-cta { display: grid; gap: var(--space-xl); padding: var(--space-3xl) max(var(--space-md), calc((100% - 76rem) / 2)); background: var(--color-paper-3); }.download-band p, .final-cta > p:last-child { margin: var(--space-md) 0 0; color: var(--color-muted); }.download-band .button-primary { justify-self: start; }.timeline ol, .steps { display: grid; gap: var(--space-sm); padding: 0; margin: 0; list-style: none; }.timeline li, .steps li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-lg) 0; border-top: var(--rule-thin) solid var(--color-rule); }.timeline b, .steps span { font-family: var(--font-display); color: var(--color-accent); }.timeline span { color: var(--color-muted); }
.fit-grid article { min-height: auto; }.accordion { display: grid; gap: var(--space-sm); }.accordion article { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); }.accordion button { display: flex; width: 100%; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border: 0; background: var(--color-clear); color: var(--color-ink); font-weight: 800; text-align: left; }.accordion button b { color: var(--color-accent); font-size: var(--text-lg); }.accordion [data-panel] p { margin: 0; padding: 0 var(--space-md) var(--space-lg); color: var(--color-muted); }
.final-cta { text-align: center; place-items: center; }.final-cta h2 { max-width: 17ch; }.subpage { padding-top: 5rem; }.page-title { width: min(100% - 2rem, 76rem); margin-inline: auto; padding: var(--space-3xl) 0 var(--space-xl); }.page-title h1 { max-width: 13ch; margin: 0; font-size: clamp(var(--text-2xl), 7vw, 5.5rem); letter-spacing: -.055em; }.page-title p:not(.micro) { color: var(--color-muted); font-size: var(--text-md); }
.filter-bar, .toc, .article-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); }.filter-bar { margin-bottom: var(--space-xl); }.filter-bar button { padding: var(--space-xs) var(--space-md); border: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-muted); }.filter-bar button.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }.gallery-card[hidden] { display: none; }.full { grid-template-columns: repeat(1, minmax(0, 1fr)); }.platform-grid article { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }.platform-grid h2, .requirements h3 { margin: 0; font-size: var(--text-xl); }.platform-grid .button-primary { margin-top: auto; }.requirements dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); margin: var(--space-lg) 0 0; }.requirements dt { color: var(--color-muted); }.requirements dd { margin: 0; }.guide-cards { padding-top: var(--space-xl); }.guide-card { min-height: auto; }.guide-card h3 { margin-top: 0; }.guide-card a { margin-top: var(--space-lg); color: var(--color-accent); font-weight: 800; white-space: nowrap; }.toc { padding-top: 0; }.toc a { min-height: 2.75rem; padding: var(--space-sm); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); white-space: nowrap; }.guide-body { padding-top: var(--space-xl); }.guide-body section { max-width: 48rem; padding-block: var(--space-xl); }.guide-body h2, .article h2 { margin: 0 0 var(--space-lg); font-size: var(--text-xl); }.guide-body li, .article li { margin-bottom: var(--space-sm); }.guide-body table, .article table { width: 100%; border-collapse: collapse; }.guide-body th, .guide-body td, .article th, .article td { padding: var(--space-sm); border-bottom: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: top; }.article > article { width: min(100%, 50rem); }.article h1 { margin: 0; font-size: clamp(var(--text-2xl), 6vw, 4.5rem); letter-spacing: -.045em; }.article .direct-answer { padding: var(--space-lg); border-inline-start: .25rem solid var(--color-accent); background: var(--color-paper-2); font-size: var(--text-md); }.article ol { padding-inline-start: var(--space-xl); }.article-links { margin-top: var(--space-xl); }.article-links a { color: var(--color-accent); font-weight: 800; }
.foot-mast { display: grid; gap: var(--space-xl); padding: var(--space-3xl) max(var(--space-md), calc((100% - 76rem) / 2)); border-top: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-2); }.foot-title { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); }.foot-mast p { margin: var(--space-md) 0 0; color: var(--color-muted); }.foot-links, .related-links { display: flex; flex-wrap: wrap; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }.foot-mast small { color: var(--color-dim); line-height: 1.75; }.sticky-download { position: fixed; z-index: 21; inset: auto 0 0; display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) max(var(--space-md), env(safe-area-inset-left)); border-top: var(--rule-thin) solid var(--color-rule); background: var(--color-paper); }.sticky-download span { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }.sticky-download a { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-md); background: var(--color-accent); border-radius: var(--radius-sm); color: var(--color-accent-ink); font-weight: 800; white-space: nowrap; }.lightbox { width: min(100% - 2rem, 72rem); padding: var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-ink); }.lightbox::backdrop { background: var(--color-overlay); }.lightbox figure { margin: var(--space-md) 0; }.lightbox img { width: 100%; max-height: 75dvh; object-fit: contain; }.lightbox figcaption { margin-top: var(--space-sm); color: var(--color-muted); text-align: center; }.lightbox button { min-height: 2.75rem; padding: var(--space-xs) var(--space-sm); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-3); color: var(--color-ink); font-weight: 800; white-space: nowrap; }
@media (min-width: 40rem) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feature-grid, .fit-grid, .platform-grid, .requirements, .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.signal-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }.full { grid-template-columns: repeat(3, minmax(0, 1fr)); }.foot-mast { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }.related-links, .foot-mast small { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .nav-cta { display: flex; }.menu-button, .menu-sheet { display: none !important; }.hero-overlay { padding-bottom: 8rem; }.hero-overlay h1 { max-width: none; white-space: nowrap; }.hero-overlay > p:not(.micro) { font-size: var(--text-lg); }.content.story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3xl); }.content.story .section-head { margin-bottom: 0; }.gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.gallery-preview { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-2xl); align-items: end; }.gallery-preview .section-head { margin-bottom: 0; }.download-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }.foot-mast { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); }.related-links, .foot-mast small { grid-column: auto; } }
@media (max-width: 39.99rem) { .brand span { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }.hero-marquee { min-height: 42rem; }.hero-overlay h1 { font-size: clamp(3.5rem, 18vw, 5rem); }.lightbox { width: calc(100% - 1rem); }.lightbox button { font-size: var(--text-xs); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; } }