/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * macrostructure: Narrative Workflow · H2 Split Diptych knobs: ratio=7/5, proof=official-still, divider=hairline
 * theme: custom · vibe: "sea-salt battle lab, coral ryokan, quiet gold" · paper: oklch(98% 0.008 95) · accent: oklch(68% 0.18 355)
 * display: Noto Serif SC · body: Noto Sans SC · axes: light / roman-serif / warm-coral
 * genre: editorial-commerce · enrichment: E8 approved official still · nav: N12 · footer: Ft6 · studied: no · context: explicit
 * slop-test: pass 58/58 · contrast: pass (40–41) · nav/footer/hero: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · v1.1.0
 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;700;900&display=swap");

:root {
  color-scheme: light;
  --color-paper: oklch(98% 0.008 95);
  --color-paper-2: oklch(95% 0.014 90);
  --color-paper-3: oklch(91% 0.018 88);
  --color-ink: oklch(18% 0.012 35);
  --color-ink-2: oklch(28% 0.014 35);
  --color-muted: oklch(43% 0.02 35);
  --color-neutral: oklch(52% 0.018 40);
  --color-rule: oklch(79% 0.018 82);
  --color-rule-2: oklch(87% 0.014 86);
  --color-night: oklch(18% 0.012 35);
  --color-night-2: oklch(24% 0.018 30);
  --color-night-ink: oklch(96% 0.012 88);
  --color-coral: oklch(68% 0.18 355);
  --color-coral-deep: oklch(55% 0.18 355);
  --color-coral-ink: oklch(18% 0.012 35);
  --color-pink: oklch(65% 0.17 355);
  --color-orange: oklch(72% 0.17 55);
  --color-sea: oklch(75% 0.14 232);
  --color-sea-deep: oklch(49% 0.12 236);
  --color-palm: oklch(55% 0.11 150);
  --color-palm-deep: oklch(38% 0.09 150);
  --color-gold: oklch(76% 0.14 85);
  --color-gold-deep: oklch(58% 0.12 82);
  --color-focus: oklch(57% 0.22 355);
  --color-focus-light: oklch(88% 0.10 355);
  --color-success: oklch(52% 0.13 150);
  --color-error: oklch(54% 0.20 25);
  --color-backdrop: oklch(10% 0.008 35 / 0.88);
  --color-scrim: oklch(12% 0.014 35 / 0.78);
  --color-scrim-soft: oklch(14% 0.014 35 / 0.26);
  --color-shadow: oklch(14% 0.01 35 / 0.16);

  --font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", sans-serif;
  --font-mono: "Noto Sans SC", "PingFang SC", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-display: clamp(2.7rem, 7vw, 5.25rem);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.9rem;
  --radius-round: 999rem;
  --rule: 1px;
  --rule-strong: 2px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  --page-gutter: clamp(1rem, 4vw, 3.25rem);
  --page-max: 78rem;
  --prose: 68ch;
  --banner-height: 2.4rem;
  --nav-height: 4.2rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--color-paper); }
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.7; text-rendering: optimizeLegibility; }
body.has-dialog { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:disabled { opacity: .5; cursor: not-allowed; }
button[data-state="loading"] { cursor: wait; }
button[data-state="error"] { border-color: var(--color-error); }
button[data-state="success"] { border-color: var(--color-success); }
h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-style: normal; line-height: 1.18; letter-spacing: -0.025em; }
h1 { font-size: var(--text-display); font-weight: 900; }
h2 { font-size: clamp(2rem, 4.5vw, var(--text-3xl)); font-weight: 900; }
h3 { font-size: var(--text-lg); font-weight: 700; }
table, .tnum, time, .metric { font-variant-numeric: tabular-nums; }
section[id], article[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-xl)); }
[hidden] { display: none !important; }

.skip-link { position: fixed; inset: var(--space-sm) auto auto var(--space-sm); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-night-ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.shell { width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max)); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--paper { background: var(--color-paper-2); color: var(--color-ink); }
.section--night { background: var(--color-night); color: var(--color-night-ink); }
.section--sea { background: var(--color-sea-deep); color: var(--color-night-ink); }
.page-hero { padding-block-start: calc(var(--banner-height) + var(--nav-height) + var(--space-3xl)); background: var(--color-paper-2); color: var(--color-ink); border-block-end: var(--rule-strong) solid var(--color-ink); }
.page-hero .section-head { max-width: 70rem; margin-block-end: 0; }
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); }
.section-head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-xl); }
.section-head p { max-width: 62ch; color: var(--color-muted); font-size: var(--text-md); }
.section--night .section-head p, .section--sea .section-head p { color: var(--color-paper-3); }
.micro-label { width: max-content; max-width: 100%; display: inline-flex; align-items: center; min-height: 1.9rem; padding-inline: var(--space-sm); border: var(--rule) solid currentColor; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.lead { max-width: 64ch; font-size: var(--text-md); line-height: 1.9; }
.prose { display: grid; gap: var(--space-lg); max-width: var(--prose); }
.prose p, .prose li { max-width: var(--prose); }
.prose ul, .prose ol { display: grid; gap: var(--space-sm); padding-inline-start: var(--space-lg); }

:focus-visible { outline: var(--rule-strong) solid var(--color-focus); outline-offset: var(--space-2xs); }
.section--night :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .sticky-download :focus-visible { outline-color: var(--color-focus-light); }

.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); transform: translateY(0); transition: transform var(--dur-long) var(--ease-out); }
.site-header.is-compact { transform: translateY(calc(var(--banner-height) * -1)); }
.site-header.is-dismissed { transform: none; }
.site-header.is-dismissed .notice-bar { display: none; }
.notice-bar { min-height: var(--banner-height); display: flex; align-items: center; background: var(--color-coral); color: var(--color-coral-ink); border-block-end: var(--rule-strong) solid var(--color-ink); }
.notice-bar__inner { width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max)); margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.notice-bar p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 700; }
.notice-bar a { border-block-end: var(--rule) solid currentColor; white-space: nowrap; }
.notice-bar button { flex: 0 0 2.3rem; min-width: 2.3rem; min-height: 2.3rem; border: 0; background: transparent; cursor: pointer; }
.nav-bar { min-height: var(--nav-height); display: flex; align-items: center; background: color-mix(in oklch, var(--color-paper) 94%, transparent); color: var(--color-ink); border-block-end: var(--rule) solid var(--color-rule); backdrop-filter: blur(.8rem) saturate(1.2); }
.nav-inner { width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; font-family: var(--font-display); font-size: var(--text-md); font-weight: 900; line-height: 1; white-space: nowrap; }
.brand img { width: 2rem; aspect-ratio: 1; border: var(--rule) solid var(--color-rule); }
.nav-inner > .brand span { display: none; }
.nav-links { justify-self: center; display: none; align-items: center; gap: var(--space-lg); }
.nav-links a { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 700; line-height: 1; white-space: nowrap; }
.nav-links a[aria-current="page"] { color: var(--color-coral-deep); border-block-end: var(--rule-strong) solid currentColor; }
.nav-actions { display: flex; align-items: center; gap: var(--space-xs); }
.menu-button { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); cursor: pointer; }
.menu-button span, .menu-button::before, .menu-button::after { content: ""; width: 1.15rem; height: var(--rule-strong); background: currentColor; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.menu-button { gap: var(--space-2xs); }
.menu-button[aria-expanded="true"] span { opacity: 0; }
.menu-button[aria-expanded="true"]::before { transform: translateY(.36rem) rotate(45deg); }
.menu-button[aria-expanded="true"]::after { transform: translateY(-.36rem) rotate(-45deg); }
.menu-sheet { position: fixed; inset: calc(var(--banner-height) + var(--nav-height)) 0 auto; z-index: var(--z-dropdown); display: grid; background: var(--color-paper); color: var(--color-ink); border-block-end: var(--rule-strong) solid var(--color-ink); opacity: 0; transform: translateY(-1rem); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.site-header.is-compact .menu-sheet, .site-header.is-dismissed .menu-sheet { inset-block-start: var(--nav-height); }
.menu-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; }
.menu-sheet a { min-height: 3.5rem; display: flex; align-items: center; padding-inline: var(--page-gutter); border-block-end: var(--rule) solid var(--color-rule); font-weight: 700; line-height: 1; white-space: nowrap; }

.button { position: relative; isolation: isolate; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding-inline: var(--space-lg); overflow: clip; border: var(--rule-strong) solid var(--color-ink); background: var(--color-coral); color: var(--color-coral-ink); font-weight: 900; line-height: 1; text-align: center; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.button--large { min-height: 3.5rem; padding-inline: var(--space-xl); font-size: var(--text-md); }
.button--outline { background: var(--color-paper); color: var(--color-ink); }
.button--dark { background: var(--color-night); color: var(--color-night-ink); border-color: var(--color-gold); }
.button--shine::before { content: ""; position: absolute; inset: -100% auto -100% -45%; z-index: -1; width: 22%; background: var(--color-paper); opacity: .68; transform: translateX(-220%) skewX(-18deg); transition: transform 650ms var(--ease-out); }
.button:active, .button.is-active { transform: translateY(1px); }
.button[disabled], .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.button[data-state="loading"] { cursor: wait; }
.button[data-state="loading"]::after { content: ""; width: 1rem; aspect-ratio: 1; border: var(--rule-strong) solid currentColor; border-inline-end-color: transparent; border-radius: var(--radius-round); animation: spin .8s linear infinite; }
.button[data-state="error"], .is-error { border-color: var(--color-error); }
.button[data-state="success"], .is-success { border-color: var(--color-success); }
@keyframes spin { to { transform: rotate(1turn); } }

.hero { position: relative; min-height: 92svh; display: grid; align-items: end; padding-block: calc(var(--banner-height) + var(--nav-height) + var(--space-lg)) calc(var(--space-3xl) + var(--space-2xl) + var(--space-md)); overflow: clip; background: var(--color-night); color: var(--color-night-ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; transform: scale(1.02); animation: hero-breathe 18s var(--ease-in-out) forwards; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-scrim), var(--color-scrim-soft)); }
.hero-grid { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: end; }
.hero-copy { min-width: 0; display: grid; gap: var(--space-md); max-width: 48rem; padding: var(--space-lg); background: color-mix(in oklch, var(--color-night) 90%, transparent); border-block-start: .35rem solid var(--color-coral); border-inline-end: var(--rule) solid var(--color-gold); backdrop-filter: blur(.35rem); }
.hero-copy h1 small { display: block; margin-block-start: var(--space-xs); color: var(--color-gold); font-family: var(--font-body); font-size: .31em; font-weight: 700; letter-spacing: 0; }
.hero-copy > p { max-width: 46ch; color: var(--color-paper-3); font-size: var(--text-md); }
.hero-tags, .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.hero-tags span { min-height: 2rem; display: inline-flex; align-items: center; padding-inline: var(--space-sm); border: var(--rule) solid var(--color-night-ink); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.hero-proof { min-width: 0; display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border-block-start: .35rem solid var(--color-gold); }
.hero-proof__price { display: flex; align-items: end; justify-content: space-between; gap: var(--space-sm); border-block-end: var(--rule) solid var(--color-rule); padding-block-end: var(--space-sm); }
.hero-proof__price strong { color: var(--color-coral-deep); font-family: var(--font-display); font-size: var(--text-2xl); }
.hero-proof dl { display: grid; gap: var(--space-xs); }
.hero-proof dl div { display: grid; grid-template-columns: minmax(6rem, .7fr) minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xs); border-block-end: var(--rule) solid var(--color-rule-2); }
.hero-proof dt { color: var(--color-muted); }
.hero-proof dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@keyframes hero-breathe { to { transform: scale(1.05); } }

.fact-ribbon { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: calc(var(--space-3xl) * -1); background: var(--color-paper); border-block: var(--rule-strong) solid var(--color-ink); }
.fact-ribbon div { min-width: 0; padding: var(--space-sm); border-inline-end: var(--rule) solid var(--color-rule); border-block-end: var(--rule) solid var(--color-rule); }
.fact-ribbon dt { color: var(--color-muted); font-size: var(--text-xs); }
.fact-ribbon dd { margin: 0; font-weight: 900; overflow-wrap: anywhere; }

.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.story-aside { align-self: start; padding: var(--space-lg); background: var(--color-night); color: var(--color-night-ink); border-block-start: .35rem solid var(--color-gold); }
.story-aside strong { display: block; color: var(--color-gold); font-family: var(--font-display); font-size: var(--text-xl); }
.story-aside p { margin-block-start: var(--space-xs); color: var(--color-paper-3); }

.workflow { list-style: none; border-block: var(--rule-strong) solid var(--color-ink); }
.workflow li { min-width: 0; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-sm) var(--space-lg); padding-block: var(--space-xl); border-block-end: var(--rule) solid var(--color-rule); }
.workflow li:last-child { border-block-end: 0; }
.workflow .stage { grid-row: 1 / span 2; display: grid; place-items: start center; color: var(--color-coral-deep); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; }
.workflow p { max-width: 64ch; color: var(--color-muted); }

.feature-ledger { display: grid; grid-template-columns: minmax(0, 1fr); border-block-end: var(--rule-strong) solid currentColor; }
.feature-card { min-width: 0; display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-block-start: var(--rule-strong) solid currentColor; transition: transform var(--dur-short) var(--ease-out); }
.feature-card__mark { width: 2.6rem; aspect-ratio: 1; display: grid; place-items: center; background: var(--color-sea-deep); color: var(--color-night-ink); font-weight: 900; }
.feature-card p { max-width: 52ch; color: var(--color-muted); }
.section--night .feature-card p { color: var(--color-paper-3); }

.character-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-block: var(--rule-strong) solid var(--color-ink); }
.character-card { min-width: 0; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg) var(--space-sm); border-block-end: var(--rule) solid var(--color-rule); }
.character-card strong { grid-row: 1 / span 2; width: 2.5rem; aspect-ratio: 1; display: grid; place-items: center; background: var(--color-coral); color: var(--color-coral-ink); font-weight: 900; }
.character-card p { color: var(--color-muted); }

.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.gallery-item { position: relative; min-width: 0; padding: 0; overflow: clip; border: var(--rule-strong) solid var(--color-ink); background: var(--color-night); color: var(--color-night-ink); text-align: start; cursor: zoom-in; }
.gallery-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.gallery-item span { position: absolute; inset: auto 0 0; padding: var(--space-xl) var(--space-sm) var(--space-sm); background: linear-gradient(transparent, var(--color-night)); font-size: var(--text-xs); }
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-lg); }
.filter-tabs button { min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.filter-tabs button[aria-pressed="true"] { background: var(--color-sea-deep); color: var(--color-night-ink); }
.filter-tabs button:disabled { opacity: .5; cursor: not-allowed; }
.filter-tabs button[data-state="loading"] { cursor: wait; }
.filter-tabs button[data-state="error"] { border-color: var(--color-error); }
.filter-tabs button[data-state="success"] { border-color: var(--color-success); }
.filter-tabs button:active, .menu-button:active, .back-top:active { transform: translateY(1px); }
.gallery-empty { padding: var(--space-lg); background: var(--color-paper-2); color: var(--color-muted); border: var(--rule) solid var(--color-rule); }
.gallery-grid + .hero-actions { margin-block-start: var(--space-lg); }

.download-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-xl); background: var(--color-sea-deep); color: var(--color-night-ink); border-block: var(--rule-strong) solid var(--color-ink); }
.download-band p { max-width: 58ch; color: var(--color-paper-3); }
.download-band .button { justify-self: start; }

.timeline { list-style: none; border-inline-start: var(--rule-strong) solid var(--color-gold-deep); }
.timeline li { position: relative; padding: 0 0 var(--space-xl) var(--space-lg); }
.timeline li::before { content: ""; position: absolute; inset: .55rem auto auto -.44rem; width: .75rem; aspect-ratio: 1; border: var(--rule-strong) solid var(--color-paper); border-radius: var(--radius-round); background: var(--color-coral); }
.timeline time { color: var(--color-coral-deep); font-size: var(--text-sm); font-weight: 900; }
.timeline h3 { margin-block-start: var(--space-2xs); }
.timeline p { margin-block-start: var(--space-xs); color: var(--color-muted); }

.rating-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-xl); background: var(--color-night-2); color: var(--color-night-ink); border-block-start: .35rem solid var(--color-gold); }
.rating-score strong { display: block; color: var(--color-gold); font-family: var(--font-display); font-size: var(--text-3xl); }
.rating-score small, .rating-panel p { color: var(--color-paper-3); }
.audience-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-block-start: var(--space-lg); }
.audience-card { min-width: 0; padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border-block-start: .28rem solid var(--color-coral); }
.audience-card p { margin-block-start: var(--space-xs); color: var(--color-muted); }

.faq-list { border-block-end: var(--rule) solid var(--color-rule); }
.faq-list details { border-block-start: var(--rule) solid var(--color-rule); }
.faq-list summary { min-height: 3.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; list-style: none; font-size: clamp(var(--text-xs), 3.5vw, var(--text-base)); font-weight: 700; white-space: nowrap; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border: var(--rule) solid var(--color-rule); }
.faq-list summary:active { color: var(--color-coral-deep); }
.faq-list details[open] summary::after { content: "−"; background: var(--color-sea-deep); color: var(--color-night-ink); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { max-width: 70ch; padding-block: 0 var(--space-lg); color: var(--color-muted); }
.faq-list details[open] .faq-answer { grid-template-rows: 1fr; }

.platform-grid, .guide-card-grid, .spec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.platform-card, .guide-card, .spec-card { min-width: 0; display: grid; align-content: start; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border: var(--rule-strong) solid var(--color-ink); }
.platform-card--recommended { border-block-start: .4rem solid var(--color-coral); }
.platform-card p, .guide-card p, .spec-card p { color: var(--color-muted); }
.guide-card a { width: max-content; max-width: 100%; min-height: 2.75rem; display: inline-flex; align-items: center; border-block-end: var(--rule-strong) solid var(--color-coral-deep); font-weight: 900; white-space: nowrap; }
.install-steps { display: grid; grid-template-columns: minmax(0, 1fr); border-block: var(--rule-strong) solid var(--color-ink); }
.install-step { min-width: 0; padding: var(--space-lg); border-block-end: var(--rule) solid var(--color-rule); }
.install-step strong { display: block; margin-block-end: var(--space-xs); color: var(--color-coral-deep); font-family: var(--font-display); font-size: var(--text-xl); }
.spec-list { display: grid; }
.spec-row { display: grid; grid-template-columns: minmax(6.5rem, .75fr) minmax(0, 1.25fr); gap: var(--space-sm); padding-block: var(--space-sm); border-block-start: var(--rule) solid var(--color-rule); }
.spec-row dt { color: var(--color-muted); }
.spec-row dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.notice { padding: var(--space-lg); background: var(--color-paper-2); color: var(--color-ink); border-inline-start: .35rem solid var(--color-gold-deep); }
.notice p { margin-block-start: var(--space-xs); }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.toc { align-self: start; padding: var(--space-lg); background: var(--color-night); color: var(--color-night-ink); }
.toc h2 { font-size: var(--text-lg); }
.toc ol { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-sm); padding-inline-start: var(--space-lg); }
.toc a { min-height: 2.75rem; display: inline-flex; align-items: center; border-block-end: var(--rule) solid var(--color-gold); white-space: nowrap; }
.article-prose { min-width: 0; display: grid; gap: var(--space-xl); }
.article-prose section + section { padding-block-start: var(--space-xl); border-block-start: var(--rule-strong) solid var(--color-ink); }
.article-prose h2 + p, .article-prose h3 + p { margin-block-start: var(--space-sm); }
.article-prose p, .article-prose li { max-width: 72ch; }
.article-prose ul, .article-prose ol { display: grid; gap: var(--space-xs); padding-inline-start: var(--space-lg); }
.article-prose table { width: 100%; border-collapse: collapse; }
.article-prose th, .article-prose td { padding: var(--space-sm); border-block-start: var(--rule) solid var(--color-rule); text-align: start; vertical-align: top; }

.final-cta { background: var(--color-palm-deep); color: var(--color-night-ink); border-block: var(--rule-strong) solid var(--color-ink); }
.final-cta .shell { display: grid; justify-items: start; gap: var(--space-md); }
.final-cta p { max-width: 58ch; color: var(--color-paper-3); }
.fine-print { color: var(--color-paper-3); font-size: var(--text-xs); }

.site-footer { padding-block: var(--space-2xl) 7rem; background: var(--color-night); color: var(--color-night-ink); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.footer-letter { display: grid; gap: var(--space-md); }
.footer-letter__close { max-width: 28ch; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.45; }
.footer-letter p { color: var(--color-paper-3); }
.footer-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.footer-nav h2 { font-size: var(--text-base); }
.footer-links { list-style: none; margin-block-start: var(--space-xs); }
.footer-links a { min-height: 2.75rem; display: flex; align-items: center; border-block-end: var(--rule) solid var(--color-rule); }
.footer-meta { display: grid; gap: var(--space-xs); margin-block-start: var(--space-xl); padding-block-start: var(--space-lg); border-block-start: var(--rule) solid var(--color-rule); color: var(--color-paper-3); font-size: var(--text-sm); }

.sticky-download { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); min-height: 4.6rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) max(var(--page-gutter), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--page-gutter), env(safe-area-inset-left)); background: var(--color-night); color: var(--color-night-ink); border-block-start: var(--rule-strong) solid var(--color-gold); }
.sticky-download span { display: none; white-space: nowrap; }
.sticky-download .button { margin-inline-start: auto; }
.back-top { position: fixed; inset: auto var(--space-sm) 5.5rem auto; z-index: var(--z-sticky); min-width: 2.75rem; min-height: 2.75rem; border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); line-height: 1; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity var(--dur-short) var(--ease-out); }
.back-top.is-visible { opacity: 1; pointer-events: auto; }

.lightbox { position: fixed; inset: 0; width: min(94%, 90rem); height: fit-content; max-height: 92svh; margin: auto; padding: var(--space-sm); border: var(--rule-strong) solid var(--color-gold); background: var(--color-night); color: var(--color-night-ink); opacity: 0; transform: scale(.98); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.lightbox[open] { opacity: 1; transform: none; }
.lightbox::backdrop { background: var(--color-backdrop); }
.lightbox figure { display: grid; place-items: center; }
.lightbox img { width: auto; max-height: 76svh; object-fit: contain; }
.lightbox figcaption { padding-block-start: var(--space-xs); }
.lightbox button { min-width: 2.75rem; min-height: 2.75rem; border: var(--rule) solid var(--color-night-ink); background: var(--color-night); color: var(--color-night-ink); line-height: 1; cursor: pointer; }
.lightbox button:active { transform: translateY(1px); }
.lightbox button:disabled { opacity: .5; cursor: not-allowed; }
.lightbox button[data-state="loading"] { cursor: wait; }
.lightbox button[data-state="error"] { border-color: var(--color-error); }
.lightbox button[data-state="success"] { border-color: var(--color-success); }
.lightbox-close { position: absolute; inset: var(--space-sm) var(--space-sm) auto auto; }
.lightbox-prev, .lightbox-next { position: fixed; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox-prev { inset-inline-start: var(--space-sm); }
.lightbox-next { inset-inline-end: var(--space-sm); }

@media (hover: hover) and (pointer: fine) {
  .button:not(.button--shine):not(.button--dark):hover, .button:not(.button--shine):not(.button--dark).is-hover { background: var(--color-orange); }
  .button--dark:hover, .button--dark.is-hover { border-color: var(--color-coral); }
  .button--shine:hover::before, .button--shine.is-hover::before { transform: translateX(760%) skewX(-18deg); }
  .nav-links a:hover, .menu-sheet a:hover, .toc a:hover { color: var(--color-coral-deep); }
  .footer-links a:hover { color: var(--color-coral); }
  .feature-card:hover, .feature-card:focus-within { transform: translateY(-2px); }
  .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.025); }
  .filter-tabs button:hover, .menu-button:hover, .lightbox button:hover { background: var(--color-paper-2); color: var(--color-ink); }
  .faq-list summary:hover { background: var(--color-paper-2); }
}

@media (min-width: 40rem) {
  .nav-inner > .brand span { display: inline; }
  .fact-ribbon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-card:nth-child(odd) { border-inline-end: var(--rule) solid var(--color-rule); }
  .platform-grid, .guide-card-grid, .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .install-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .install-step { border-inline-end: var(--rule) solid var(--color-rule); border-block-end: 0; }
  .rating-panel { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); }
  .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-download span { display: inline; }
}

@media (min-width: 60rem) {
  .nav-links { display: flex; }
  .menu-button { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr); }
  .hero-copy { padding: var(--space-xl); }
  .story-grid { grid-template-columns: minmax(0, 7fr) minmax(16rem, 3fr); }
  .story-aside { position: sticky; inset-block-start: calc(var(--nav-height) + var(--space-xl)); }
  .workflow li { grid-template-columns: 5rem minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .workflow .stage { grid-row: auto; }
  .feature-ledger { grid-template-columns: 1.2fr .8fr 1.05fr .95fr; }
  .feature-card { padding-inline: var(--space-lg); border-inline-end: var(--rule) solid currentColor; }
  .feature-card:last-child { border-inline-end: 0; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-item:first-child { grid-column: span 2; }
  .gallery-item:first-child img { aspect-ratio: 2 / 1; }
  .download-band { grid-template-columns: minmax(0, 1fr) auto; }
  .download-band .button { justify-self: end; }
  .guide-layout { grid-template-columns: minmax(14rem, .35fr) minmax(0, 1fr); }
  .toc { position: sticky; inset-block-start: calc(var(--nav-height) + var(--space-xl)); }
  .footer-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

@media (min-width: 90rem) {
  .hero-copy { margin-inline-start: calc(var(--page-gutter) * -1); }
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
    .hero-media { animation: hero-depth linear both; animation-timeline: scroll(root block); animation-range: 0 50svh; }
    @keyframes hero-depth { to { transform: translateY(2.5%); } }
  }
}

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

@media print {
  .site-header, .sticky-download, .back-top, .button, .filter-tabs { display: none !important; }
  body { background: var(--color-paper); color: var(--color-ink); }
  .section, .site-footer { padding-block: var(--space-lg); }
}