/* Hallmark · macrostructure: Catalogue · H6 photographic fold knobs: crop=cinematic, caption=dialogue, density=compact
 * theme: custom · vibe: "海岛旅馆夜色，日系商店，克制金线" · paper: oklch(98.5% 0.012 95) · accent: oklch(67% 0.195 12)
 * display: Noto Serif SC · body: Noto Sans SC · axes: light / roman-serif / warm
 * enrichment: E8 real game photography · nav: N5 Floating pill · footer: Ft1 Mast-headed
 * studied: no · context: user-provided · v1.1.0 · contrast: pass (40–41)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (34, 49–57) · icons: pass (30)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 */
@import url("../../tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--banner-height) + var(--space-md)); }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; text-rendering: optimizeLegibility; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: var(--z-tooltip); background-image: repeating-linear-gradient(90deg, var(--color-ink) 0 1px, var(--color-transparent) 1px 4px); mix-blend-mode: multiply; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: var(--color-transparent); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: .22em; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; line-height: 1.18; letter-spacing: -.025em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); line-height: 1.02; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
ul, ol, dl { margin-block: 0; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--space-2xs); }
.hero :focus-visible, .page-hero :focus-visible, .section--night :focus-visible, .nav-pill :focus-visible, .sticky-cta :focus-visible { outline-color: var(--color-focus-light); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

.skip-link { position: fixed; inset: var(--space-sm) auto auto var(--space-sm); transform: translateY(-200%); z-index: var(--z-tooltip); background: var(--color-night); color: var(--color-night-ink); padding: var(--space-sm) var(--space-md); }
.skip-link:focus { transform: none; }
.container { width: min(100% - 2 * var(--page-gutter), var(--page-max)); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--night { background: var(--color-night); color: var(--color-night-ink); }
.section-head { display: grid; gap: var(--space-md); margin-block-end: var(--space-xl); }
.section-head > p { color: var(--color-muted); max-width: 62ch; }
.section--night .section-head > p { color: var(--color-rule); }
.section-head--split { align-items: end; }
.kicker { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; color: var(--color-sea-strong); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.nav-pill { position: fixed; inset: var(--space-md) auto auto 50%; transform: translateX(-50%); z-index: var(--z-sticky-nav); display: inline-flex; align-items: center; gap: var(--space-xs); width: max-content; max-width: calc(100% - 2 * var(--space-md)); min-height: 3rem; padding: var(--space-xs); border: var(--rule-hair) solid color-mix(in oklch, var(--color-night-ink) 26%, var(--color-transparent)); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-night) 82%, var(--color-transparent)); color: var(--color-night-ink); backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 var(--space-xs) var(--space-xl) color-mix(in oklch, var(--color-night) 22%, var(--color-transparent)); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.5rem; padding-inline: var(--space-sm); font-family: var(--font-display); font-weight: 700; text-decoration: none; white-space: nowrap; }
.wordmark img { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); }
.nav-links { display: none; align-items: center; gap: var(--space-2xs); list-style: none; padding: 0; }
.nav-links a { display: grid; place-items: center; min-height: 2.5rem; padding-inline: var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.nav-links a[aria-current="page"] { background: var(--color-night-2); color: var(--color-gold); }
.nav-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--radius-pill); background: var(--color-night-2); color: var(--color-night-ink); cursor: pointer; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; width: 1rem; height: var(--rule-strong); background: currentColor; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.nav-toggle { gap: var(--space-2xs); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(.375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-.375rem) rotate(-45deg); }
.nav-mobile { position: fixed; inset: calc(var(--banner-height) + var(--space-xs)) var(--space-md) auto; z-index: var(--z-dropdown); display: grid; gap: var(--space-2xs); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: 0 var(--space-md) var(--space-xl) color-mix(in oklch, var(--color-night) 18%, var(--color-transparent)); }
.nav-mobile a { min-height: 2.75rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); text-decoration: none; white-space: nowrap; }

.btn { position: relative; isolation: isolate; display: inline-flex; justify-content: center; align-items: center; min-height: 3rem; padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-weight: 700; text-decoration: none; white-space: nowrap; overflow: clip; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn--primary { border-color: var(--color-accent-strong); background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary::after { content: ""; position: absolute; inset: -35% auto -35% -70%; width: 40%; z-index: -1; transform: skewX(-18deg); background: linear-gradient(90deg, var(--color-transparent), color-mix(in oklch, var(--color-paper) 64%, var(--color-transparent))); transition: transform var(--dur-long) var(--ease-out); }
.btn--secondary { border-color: var(--color-sea-strong); background: var(--color-paper); color: var(--color-sea-strong); }
.btn--dark { border-color: var(--color-gold); background: var(--color-night); color: var(--color-night-ink); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
button:disabled, [role="tab"][aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn[data-state="loading"]::before { content: ""; width: .9rem; height: .9rem; margin-inline-end: var(--space-xs); border: var(--rule-strong) solid currentColor; border-block-start-color: var(--color-transparent); border-radius: var(--radius-pill); animation: spin 900ms linear infinite; }
.btn[data-state="error"] { border-color: var(--color-error); }
.btn[data-state="success"] { border-color: var(--color-success); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero { position: relative; isolation: isolate; min-height: clamp(39rem, 82dvh, 55rem); display: grid; align-items: end; overflow: clip; background: var(--color-night); color: var(--color-night-ink); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; animation: hero-zoom 18s var(--ease-in-out) infinite alternate; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklch, var(--color-night) 82%, var(--color-transparent)), color-mix(in oklch, var(--color-night) 44%, var(--color-transparent))); }
.hero__inner { width: min(100% - 2 * var(--page-gutter), var(--page-max)); margin-inline: auto; padding-block: calc(var(--banner-height) + var(--space-md)) calc(var(--space-3xl) + var(--space-lg)); }
.hero__dialogue { display: grid; gap: var(--space-md); max-width: 45rem; padding: var(--space-lg); border-block-start: var(--rule-strong) solid var(--color-gold); background: color-mix(in oklch, var(--color-night) 88%, var(--color-transparent)); backdrop-filter: blur(8px); }
.hero__tags, .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { display: inline-flex; align-items: center; min-height: 2rem; padding-inline: var(--space-sm); border: var(--rule-hair) solid color-mix(in oklch, var(--color-night-ink) 26%, var(--color-transparent)); border-radius: var(--radius-pill); font-size: var(--text-sm); white-space: nowrap; }
.tag--sea { border-color: var(--color-sea); color: var(--color-sea); }
.tag--gold { border-color: var(--color-gold); color: var(--color-gold); }
.hero__title span { display: block; margin-block-start: var(--space-xs); font-family: var(--font-body); font-size: clamp(var(--text-base), 2.2vw, var(--text-md)); font-weight: 400; letter-spacing: .01em; color: var(--color-rule); }
.hero__lede { max-width: 61ch; font-size: var(--text-md); color: var(--color-night-ink); }
.hero__metrics { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); padding: 0; }
.hero__metrics div { display: grid; gap: var(--space-3xs); }
.hero__metrics dt { font-size: var(--text-xs); color: var(--color-rule); }
.hero__metrics dd { margin: 0; font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@keyframes hero-zoom { from { transform: scale(1.02); } to { transform: scale(1.05); } }

.fact-rack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.fact-rack > div { min-width: 0; padding: var(--space-lg); border-inline-end: var(--rule-hair) solid var(--color-rule); border-block-end: var(--rule-hair) solid var(--color-rule); }
.fact-rack dt { font-size: var(--text-sm); color: var(--color-muted); }
.fact-rack dd { margin: var(--space-xs) 0 0; font-weight: 700; overflow-wrap: anywhere; }

.story-grid { display: grid; gap: var(--space-xl); align-items: start; }
.story-copy { display: grid; gap: var(--space-lg); font-size: var(--text-md); }
.story-copy p { max-width: 62ch; }
.story-figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: clip; background: var(--color-paper-3); }
.story-figure img { width: 100%; height: 100%; object-fit: cover; }
.story-figure figcaption { position: absolute; inset: auto var(--space-sm) var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-night); color: var(--color-night-ink); font-size: var(--text-sm); }

.feature-catalog { display: grid; grid-template-columns: minmax(0, 1fr); border-block-start: var(--rule-hair) solid var(--color-rule); }
.feature-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-content: start; padding: var(--space-xl) 0; border-block-end: var(--rule-hair) solid var(--color-rule); }
.feature-card__mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--rule-hair) solid var(--color-gold); border-radius: var(--radius-sm); font-family: var(--font-display); color: var(--color-ink); }
.feature-card p { margin-block-start: var(--space-xs); color: var(--color-muted); max-width: 46ch; }

.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.gallery-card { position: relative; min-width: 0; padding: 0; border: 0; aspect-ratio: 16 / 10; overflow: clip; background: var(--color-paper-3); color: var(--color-night-ink); cursor: zoom-in; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.gallery-card span { position: absolute; inset: auto var(--space-sm) var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-night); font-size: var(--text-sm); }
.gallery-card[hidden] { display: none; }

.download-panel { display: grid; gap: var(--space-xl); align-items: center; padding: var(--space-xl); border: var(--rule-hair) solid var(--color-gold); background: var(--color-night-2); }
.download-panel__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.download-panel__meta div { padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--color-night-ink) 24%, var(--color-transparent)); }
.download-panel__meta span { display: block; color: var(--color-rule); font-size: var(--text-sm); }
.download-panel__meta strong { display: block; margin-block-start: var(--space-2xs); }
.download-panel .btn { width: 100%; min-height: 4rem; font-size: var(--text-md); }

.timeline { display: grid; gap: 0; }
.timeline article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.timeline time { font-variant-numeric: tabular-nums; color: var(--color-sea-strong); white-space: nowrap; }
.timeline p { margin-block-start: var(--space-xs); color: var(--color-muted); }

.review-snapshot { display: grid; gap: var(--space-xl); }
.review-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-md); padding-block-end: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
.review-score strong { font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1; color: var(--color-palm); }
.review-score p { color: var(--color-muted); }
.audience-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.audience-card { padding: var(--space-lg); background: var(--color-paper-2); }
.audience-card p { margin-block-start: var(--space-sm); color: var(--color-muted); }

.faq-list { display: grid; border-block-start: var(--rule-hair) solid var(--color-rule); }
.faq-item { border-block-end: var(--rule-hair) solid var(--color-rule); }
.faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; min-height: 4rem; padding-block: var(--space-sm); font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; display: grid; place-items: center; width: 2rem; height: 2rem; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-md); }
.faq-item[open] summary::after { content: "−"; }
.faq-item__answer { padding: 0 var(--space-xl) var(--space-lg) 0; color: var(--color-muted); max-width: 70ch; }

.final-cta { display: grid; gap: var(--space-lg); align-items: end; }
.final-cta p { max-width: 58ch; color: var(--color-rule); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.site-footer { padding-block: var(--space-2xl) calc(var(--space-3xl) + env(safe-area-inset-bottom)); border-block-start: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.foot-mast { display: grid; gap: var(--space-xl); }
.foot-brand { display: grid; gap: var(--space-sm); }
.foot-brand strong { font-family: var(--font-display); font-size: var(--text-xl); }
.foot-links { display: grid; gap: var(--space-lg); }
.foot-links section { min-width: 0; }
.foot-links h2 { margin-block-end: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: .06em; color: var(--color-muted); }
.foot-links ul { display: grid; gap: var(--space-xs); padding: 0; list-style: none; }
.foot-links a { display: inline-block; min-height: 2rem; }
.foot-legal { display: grid; gap: var(--space-xs); padding-block-start: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

.sticky-cta { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left)); border-block-start: var(--rule-hair) solid var(--color-gold); background: var(--color-night); color: var(--color-night-ink); }
.sticky-cta__copy { min-width: 0; font-size: var(--text-xs); overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.sticky-cta .btn { min-height: 2.75rem; padding: var(--space-xs) var(--space-md); }
.back-top { position: fixed; inset: auto var(--space-md) calc(4.75rem + env(safe-area-inset-bottom)); z-index: var(--z-raised); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); text-decoration: none; opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.back-top.is-visible { opacity: 1; pointer-events: auto; }

.lightbox { position: fixed; inset: 0; margin: auto; width: min(94%, 75rem); max-height: 88dvh; padding: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-night); color: var(--color-night-ink); }
.lightbox::backdrop { background: color-mix(in oklch, var(--color-night) 86%, var(--color-transparent)); }
.lightbox__figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: min(82dvh, 48rem); margin: 0; }
.lightbox__figure img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__figure figcaption { padding: var(--space-sm) var(--space-md); }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-night); color: var(--color-night-ink); cursor: pointer; }
.lightbox__close { inset: var(--space-sm) var(--space-sm) auto auto; }
.lightbox__prev { inset: 50% auto auto var(--space-sm); transform: translateY(-50%); }
.lightbox__next { inset: 50% var(--space-sm) auto auto; transform: translateY(-50%); }

.page-hero { padding-block: calc(var(--banner-height) + var(--space-2xl)) var(--space-2xl); background: var(--color-night); color: var(--color-night-ink); }
.page-hero__inner { display: grid; gap: var(--space-lg); }
.page-hero p { max-width: 62ch; color: var(--color-rule); font-size: var(--text-md); }
.tabs { display: flex; gap: var(--space-xs); overflow-x: auto; padding-block: var(--space-sm); scrollbar-width: thin; }
.tab { min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); white-space: nowrap; cursor: pointer; }
.tab[aria-selected="true"] { border-color: var(--color-accent-strong); background: var(--color-accent); color: var(--color-accent-ink); }

.platform-grid, .guide-grid, .requirements-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.platform-card, .guide-card, .requirement-card { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-lg); border-block-start: var(--rule-strong) solid var(--color-gold); background: var(--color-paper-2); }
.platform-card .btn { width: 100%; }
.recommend { justify-self: start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; }
.steps { counter-reset: steps; display: grid; gap: var(--space-lg); }
.steps li { counter-increment: steps; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; list-style: none; }
.steps li::before { content: counter(steps, decimal-leading-zero); display: grid; place-items: center; width: 3rem; height: 3rem; border: var(--rule-hair) solid var(--color-gold); border-radius: var(--radius-pill); font-family: var(--font-display); }
.requirement-card dl { display: grid; }
.requirement-card dl > div { display: grid; grid-template-columns: minmax(5rem, .7fr) minmax(0, 1.3fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); }
.requirement-card dt { color: var(--color-muted); }
.requirement-card dd { margin: 0; }

.guide-layout { display: grid; gap: var(--space-xl); align-items: start; }
.toc { padding: var(--space-md); border-block-start: var(--rule-strong) solid var(--color-gold); background: var(--color-paper-2); }
.toc strong { display: block; margin-block-end: var(--space-sm); }
.toc ul { display: grid; gap: var(--space-xs); padding-inline-start: var(--space-lg); }
.guide-content { display: grid; gap: var(--space-3xl); }
.guide-chapter { display: grid; gap: var(--space-lg); scroll-margin-top: calc(var(--banner-height) + var(--space-lg)); }
.guide-chapter p, .guide-chapter li { max-width: 72ch; }
.guide-chapter ul, .guide-chapter ol { display: grid; gap: var(--space-sm); }
.guide-table { width: 100%; border-collapse: collapse; }
.guide-table th, .guide-table td { padding: var(--space-sm); border-block: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: top; }

.article-body { display: grid; gap: var(--space-xl); max-width: 72ch; }
.article-body h2 { margin-block-start: var(--space-xl); }
.article-body h3 { margin-block-start: var(--space-lg); }
.article-body ul, .article-body ol { display: grid; gap: var(--space-sm); }

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover, .nav-mobile a:hover { background: var(--color-night-2); color: var(--color-gold); }
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover::after { transform: translateX(430%) skewX(-18deg); }
  .gallery-card:hover img { transform: scale(1.02); }
  .feature-card:hover, .audience-card:hover, .guide-card:hover, .platform-card:hover { transform: translateY(-2px); }
  .feature-card, .audience-card, .guide-card, .platform-card { transition: transform var(--dur-short) var(--ease-out); }
  .back-top:hover { transform: translateY(-1px); }
}
.btn:active, .tab:active, .nav-toggle:active { transform: translateY(1px); }

@media (min-width: 40rem) {
  .section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .fact-rack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feature-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card:nth-child(odd) { padding-inline-end: var(--space-xl); border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .feature-card:nth-child(even) { padding-inline-start: var(--space-xl); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid .gallery-card:first-child { grid-column: span 2; aspect-ratio: 16 / 8; }
  .download-panel { grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr); }
  .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-grid, .requirements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
  .hero__dialogue { padding: var(--space-xl); }
  .story-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .story-figure { margin-block-start: calc(-1 * var(--space-2xl)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid .gallery-card:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .review-snapshot { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; }
  .foot-mast { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .guide-layout { grid-template-columns: minmax(14rem, .3fr) minmax(0, 1fr); }
  .toc { position: sticky; top: calc(var(--banner-height) + var(--space-md)); }
  .sticky-cta__copy { font-size: var(--text-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .hero__media img { animation: none; transform: scale(1.02); }
}

@media (pointer: coarse) {
  .btn, .tab, .nav-mobile a, .gallery-card, .faq-item summary { min-height: 3rem; }
}