/* Hallmark · genre: editorial-playful · macrostructure: Narrative Workflow with photographic prologue · theme: custom · enrichment: approved official still · nav: N10 · footer: Ft1
 * audience: Chinese visual-novel players · use: verify and download · tone: restrained, warm, compact
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 */
:root {
  --color-paper: #fdfcf6;
  --color-paper-2: #f5f0e5;
  --color-paper-3: #efe6d5;
  --color-ink: #121212;
  --color-ink-2: #2b2926;
  --color-muted: #625d56;
  --color-rule: #d8cdbb;
  --color-rule-strong: #a08f77;
  --color-accent: #e65a88;
  --color-accent-dark: #9f3157;
  --color-accent-ink: #121212;
  --color-coral: #fb7185;
  --color-sea: #38bdf8;
  --color-sea-dark: #075985;
  --color-palm: #2f855a;
  --color-gold: #d4af37;
  --color-orange: #f97316;
  --color-success: #216e46;
  --color-error: #a92335;
  --color-focus: #075985;
  --color-white: #ffffff;
  --color-shadow: rgb(18 18 18 / 0.16);
  --color-shadow-strong: rgb(18 18 18 / 0.3);
  --color-overlay: rgb(18 18 18 / 0.54);
  --color-overlay-soft: rgb(18 18 18 / 0.35);
  --color-overlay-strong: rgb(18 18 18 / 0.76);
  --color-paper-translucent: rgb(253 252 246 / 0.96);
  --color-gold-soft: rgb(212 175 55 / 0.15);
  --color-sea-soft: rgb(56 189 248 / 0.14);
  --color-coral-soft: rgb(251 113 133 / 0.14);
  --hero-overlay: linear-gradient(90deg, rgb(18 18 18 / 0.82) 0%, rgb(18 18 18 / 0.52) 52%, rgb(18 18 18 / 0.34) 100%);
  --shine: linear-gradient(110deg, transparent 15%, rgb(255 255 255 / 0.64) 46%, transparent 72%);
  --velvet: radial-gradient(circle at 20% 10%, rgb(212 175 55 / 0.08), transparent 30%), repeating-linear-gradient(135deg, rgb(255 255 255 / 0.015) 0 1px, transparent 1px 7px);
  --font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.4rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --content: 75rem;
  --measure: 45rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;
}

* { box-sizing: border-box; }
html,
body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  min-width: 20rem;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.is-modal-open { overflow: hidden; }
img,
video { display: block; max-width: 100%; }
img { height: auto; }
button,
a { -webkit-tap-highlight-color: transparent; }
button,
input { font: inherit; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
p { margin-block: 0 1em; }
h1,
h2,
h3 {
  margin-block: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.14;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: clamp(2.45rem, 9vw, 6.8rem); letter-spacing: -0.055em; }
h2 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.035em; }
h3 { font-size: clamp(1.2rem, 3vw, 1.65rem); }
:focus-visible {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0.1875rem;
}
::selection { background: var(--color-coral); color: var(--color-ink); }
.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 100;
  translate: 0 -150%;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-3) var(--space-4);
}
.skip-link:focus { translate: 0; }
.shell { width: min(100% - 2rem, var(--content)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  color: var(--color-accent-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.section { padding-block: var(--space-16); }
.section--compact { padding-block: var(--space-12); }
.section--dark { background: var(--color-ink); color: var(--color-paper); }
.section--tint { background: var(--color-paper-2); color: var(--color-ink); }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--color-rule);
  margin-block-end: var(--space-8);
}
.section-heading p { max-width: 38rem; color: var(--color-muted); margin: 0; }
.section--dark .section-heading { border-color: var(--color-rule-strong); }
.section--dark .section-heading p { color: var(--color-paper-3); }
.rule-title { display: flex; align-items: baseline; gap: var(--space-3); }
.rule-title span { font-family: var(--font-mono); color: var(--color-accent-dark); font-size: 0.72rem; }

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  color: var(--color-paper);
  border-block-end: 1px solid transparent;
  transition: background-color 520ms var(--ease), color 520ms var(--ease), border-color 520ms var(--ease), box-shadow 520ms var(--ease);
}
.site-header[data-scrolled="true"],
.site-header.is-open {
  color: var(--color-ink);
}
.site-header.is-open { background: var(--color-paper); border-color: var(--color-rule); }
.site-header[data-scrolled="false"] { background: var(--color-overlay-soft); border-color: var(--color-rule-strong); }
.site-header[data-scrolled="true"] { background: transparent; border-color: transparent; }
.site-header[data-scrolled="true"] .nav-shell {
  min-height: 3.75rem;
  width: min(calc(100% - 2rem), 62rem);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  background: var(--color-paper-translucent);
  box-shadow: 0 0.5rem 2rem var(--color-shadow);
  transform: translateY(var(--space-3));
}
.nav-shell {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: min-height 520ms var(--ease), width 520ms var(--ease), padding 520ms var(--ease), border-radius 520ms var(--ease), background-color 520ms var(--ease), box-shadow 520ms var(--ease), transform 520ms var(--ease);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: 800;
}
.wordmark-text { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.nav-links {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  padding: var(--space-3) var(--space-4) var(--space-6);
  background: var(--color-paper);
  color: var(--color-ink);
  border-block-end: 1px solid var(--color-rule);
}
.site-header.is-open .nav-links { display: grid; }
.nav-links a {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding-inline: var(--space-2);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a[aria-current="page"] { color: var(--color-accent-dark); }
.nav-toggle,
.icon-button,
.filter-button,
.lightbox-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-toggle { display: inline-grid; place-items: center; }
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after { content: ""; display: block; width: 1.15rem; height: 0.125rem; background: currentColor; }
.nav-toggle span { margin-block: 0.2rem; }
.button.nav-cta { display: none; }

.button {
  position: relative;
  isolation: isolate;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: translate var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease);
  overflow: hidden;
}
.button--primary {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-accent-ink);
  box-shadow: 0.25rem 0.25rem 0 var(--color-ink);
}
.button--primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--shine);
  translate: -120% 0;
  animation: button-shine 3.6s var(--ease) infinite;
}
.button--dark { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.button--coral { background: var(--color-coral); color: var(--color-ink); border-color: var(--color-coral); }
.button--large { min-height: 3.5rem; padding-inline: 1.6rem; font-size: 1.05rem; }
.button--wide { width: 100%; }
.button:active,
.button.is-active { translate: 0 0.125rem; box-shadow: none; }
.button[aria-disabled="true"],
.button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.button.is-loading { color: transparent; pointer-events: none; }
.button.is-loading::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid var(--color-ink);
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.button.is-error { background: var(--color-error); color: var(--color-white); border-color: var(--color-error); }
.button.is-success { background: var(--color-success); color: var(--color-white); border-color: var(--color-success); }

.hero {
  position: relative;
  min-height: 44rem;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--color-ink);
  color: var(--color-paper);
  overflow: clip;
}
.hero__media { position: absolute; inset: 0; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; scale: 1.035; animation: hero-breathe 18s ease-in-out infinite alternate; }
.hero__content { position: relative; z-index: 2; padding-block: 8rem 6.5rem; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.hero__copy { max-width: 52rem; min-width: 0; }
.hero__logo { width: min(16rem, 58%); margin-block-end: var(--space-4); border: 1px solid var(--color-rule-strong); }
.hero__kicker { color: var(--color-gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.hero h1 span { display: block; margin-block-start: var(--space-3); font-family: var(--font-body); font-size: clamp(1.05rem, 2.5vw, 1.65rem); letter-spacing: 0.05em; }
.hero__lead { max-width: 42rem; margin-block: var(--space-5) var(--space-6); font-size: clamp(1rem, 2.5vw, 1.3rem); color: var(--color-paper-2); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5); }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: 0.72rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.hero .tag { background: var(--color-overlay-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__actions .button:not(.button--primary) { background: var(--color-overlay-soft); color: var(--color-paper); border-color: var(--color-paper); }
.hero__dialogue {
  align-self: end;
  padding: var(--space-5);
  border: 1px solid var(--color-gold);
  background: var(--color-overlay-strong);
  box-shadow: 0.5rem 0.5rem 0 var(--color-shadow-strong);
}
.hero__dialogue strong { display: block; color: var(--color-gold); margin-block-end: var(--space-2); }
.hero__dialogue p { margin: 0; font-family: var(--font-display); font-size: 1.1rem; }
.choice-list { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); }
.choice-list a { min-height: 2.75rem; display: flex; align-items: center; padding-inline: var(--space-3); border: 1px solid var(--color-rule-strong); text-decoration: none; font-size: 0.9rem; white-space: nowrap; }
.hero__scroll { position: absolute; inset-block-end: var(--space-5); inset-inline-start: 50%; translate: -50% 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

.info-register { position: relative; z-index: 3; margin-block-start: -3.5rem; }
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  box-shadow: 0.75rem 0.75rem 0 var(--color-shadow);
}
.info-item { min-width: 0; padding: var(--space-4); border-inline-end: 1px solid var(--color-rule); border-block-end: 1px solid var(--color-rule); }
.info-item:nth-child(2n) { border-inline-end: 0; }
.info-item dt { color: var(--color-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.info-item dd { margin: var(--space-1) 0 0; font-weight: 800; overflow-wrap: anywhere; }

.story-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.story-copy { max-width: 48rem; }
.story-copy > p:first-of-type::first-letter { float: inline-start; margin-inline-end: var(--space-2); color: var(--color-accent-dark); font-family: var(--font-display); font-size: 4.2rem; line-height: 0.8; }
.story-visual { position: relative; min-width: 0; }
.story-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-paper-3); }
.story-caption { position: absolute; inset-inline: var(--space-4); inset-block-end: var(--space-4); padding: var(--space-4); background: var(--color-overlay-strong); color: var(--color-paper); border-inline-start: 0.25rem solid var(--color-gold); }
.story-caption p { margin: 0; }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--color-rule); border: 1px solid var(--color-rule); }
.feature-card { min-width: 0; padding: var(--space-6); background: var(--color-paper); transition: translate var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.feature-index { display: block; margin-block-end: var(--space-8); color: var(--color-accent-dark); font-family: var(--font-mono); font-size: 0.75rem; }
.feature-card h3 { margin-block-end: var(--space-3); }
.feature-card p { margin: 0; color: var(--color-muted); }

.character-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.character-card { position: relative; min-width: 0; min-height: 19rem; display: flex; flex-direction: column; justify-content: end; padding: var(--space-6); background: var(--color-ink-2); color: var(--color-paper); border: 1px solid var(--color-gold); overflow: clip; }
.character-card::before { content: attr(data-floor); position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); color: var(--color-gold); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; }
.character-card h3 { color: var(--color-gold); }
.character-card p { margin-block: var(--space-2) 0; color: var(--color-paper-3); }
.character-card q { display: block; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-rule-strong); font-family: var(--font-display); }

.media-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.trailer-card { position: relative; min-width: 0; overflow: clip; background: var(--color-ink); color: var(--color-paper); }
.trailer-card img,
.trailer-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.84; }
.trailer-card figcaption { position: absolute; inset-inline: var(--space-4); inset-block-end: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-overlay-strong); border-inline-start: 0.2rem solid var(--color-gold); }
.gallery-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.gallery-item { min-width: 0; margin: 0; }
.gallery-button { width: 100%; padding: 0; border: 0; background: var(--color-ink); cursor: zoom-in; overflow: clip; }
.gallery-button img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: scale 350ms var(--ease), opacity var(--duration) var(--ease); }
.gallery-item figcaption { padding-block-start: var(--space-2); color: var(--color-muted); font-size: 0.78rem; }

.update-list { display: grid; gap: 0; border-block-start: 1px solid var(--color-rule); }
.update-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-5); border-block-end: 1px solid var(--color-rule); }
.update-item time { color: var(--color-accent-dark); font-family: var(--font-mono); font-size: 0.75rem; }
.update-item h3 { font-family: var(--font-body); font-size: 1rem; }
.update-item p { margin: 0; color: var(--color-muted); }

.review-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6); background: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-gold); }
.review-score { display: flex; align-items: baseline; gap: var(--space-3); }
.review-score strong { font-family: var(--font-display); font-size: clamp(3rem, 12vw, 6rem); color: var(--color-gold); line-height: 1; }
.review-summary p { margin: 0; color: var(--color-paper-3); }
.audience-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-block-start: var(--space-4); }
.audience-card { padding: var(--space-5); border: 1px solid var(--color-rule); background: var(--color-paper); }
.audience-card h3 { font-family: var(--font-body); font-size: 1rem; }
.audience-card p { margin: var(--space-2) 0 0; color: var(--color-muted); }

.download-counter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-8); background: var(--color-ink); background-image: var(--velvet); color: var(--color-paper); border: 1px solid var(--color-gold); }
.download-counter h2 { max-width: 16ch; }
.download-counter p { color: var(--color-paper-3); }
.download-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-rule-strong); border: 1px solid var(--color-rule-strong); }
.download-spec { padding: var(--space-4); background: var(--color-ink-2); }
.download-spec span { display: block; color: var(--color-gold); font-size: 0.72rem; }
.download-spec strong { display: block; margin-block-start: var(--space-1); font-size: 0.95rem; overflow-wrap: anywhere; }

.faq-list { border-block-start: 1px solid var(--color-rule-strong); }
.faq-item { border-block-end: 1px solid var(--color-rule-strong); }
.faq-item summary { position: relative; min-height: 4rem; display: flex; align-items: center; padding: var(--space-4) 3.5rem var(--space-4) 0; font-weight: 800; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; inset-inline-end: var(--space-2); font-size: 1.5rem; font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { max-width: 52rem; padding: 0 var(--space-8) var(--space-5) 0; color: var(--color-muted); }
.faq-answer p:last-child { margin-block-end: 0; }

.site-footer { padding-block: var(--space-12) 7rem; background: var(--color-ink); background-image: var(--velvet); color: var(--color-paper); border-block-start: 1px solid var(--color-gold); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.footer-brand h2 { max-width: 12ch; font-size: clamp(2rem, 6vw, 3.5rem); }
.footer-brand p { max-width: 34rem; color: var(--color-paper-3); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.footer-nav h3 { margin-block-end: var(--space-3); color: var(--color-gold); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav li + li { margin-block-start: var(--space-2); }
.footer-nav a { display: inline-block; min-height: 2.75rem; padding-block: 0.55rem; }
.footer-legal { margin-block-start: var(--space-8); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-rule-strong); color: var(--color-paper-3); font-size: 0.78rem; }

.mobile-cta {
  position: fixed;
  z-index: 45;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  background: var(--color-paper);
  color: var(--color-ink);
  border-block-start: 1px solid var(--color-rule-strong);
  box-shadow: 0 -0.4rem 1.5rem var(--color-shadow);
}
.mobile-cta__meta { min-width: 0; flex: 1; line-height: 1.2; }
.mobile-cta__meta strong,
.mobile-cta__meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-cta__meta small { color: var(--color-muted); }

.page-hero { padding-block: 8rem var(--space-12); background: var(--color-ink); background-image: var(--velvet); color: var(--color-paper); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: end; }
.page-hero h1 { font-size: clamp(2.7rem, 10vw, 6rem); }
.page-hero p { max-width: 42rem; color: var(--color-paper-3); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-5); font-size: 0.8rem; color: var(--color-paper-3); }
.breadcrumb a { min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-6); }
.filter-button { width: auto; padding-inline: var(--space-4); color: var(--color-ink); white-space: nowrap; }
.filter-button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.gallery-grid .gallery-item[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(calc(100% - 2rem), 78rem);
  height: fit-content;
  max-height: min(90dvh, 58rem);
  padding: var(--space-3);
  border: 1px solid var(--color-gold);
  background: var(--color-ink);
  color: var(--color-paper);
}
.lightbox::backdrop { background: var(--color-overlay-strong); }
.lightbox__figure { margin: 0; }
.lightbox__figure img { width: 100%; max-height: 75dvh; object-fit: contain; }
.lightbox__figure figcaption { padding: var(--space-3) 3.5rem 0; text-align: center; }
.lightbox-button { position: absolute; display: grid; place-items: center; color: var(--color-paper); background: var(--color-overlay-strong); }
.lightbox-close { inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
.lightbox-prev { inset-inline-start: var(--space-3); inset-block-start: 50%; translate: 0 -50%; }
.lightbox-next { inset-inline-end: var(--space-3); inset-block-start: 50%; translate: 0 -50%; }

.platform-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.platform-card { position: relative; padding: var(--space-6); border: 1px solid var(--color-rule-strong); background: var(--color-paper); box-shadow: 0.4rem 0.4rem 0 var(--color-shadow); }
.platform-card__flag { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: var(--space-2) var(--space-3); background: var(--color-orange); color: var(--color-ink); font-size: 0.7rem; font-weight: 900; }
.platform-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-5); }
.platform-card dt { color: var(--color-muted); font-size: 0.75rem; }
.platform-card dd { margin: 0; font-weight: 800; }
.steps { counter-reset: install; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.step { counter-increment: install; position: relative; min-width: 0; padding: var(--space-6); border: 1px solid var(--color-rule); }
.step::before { content: "0" counter(install); display: block; margin-block-end: var(--space-8); color: var(--color-accent-dark); font-family: var(--font-mono); }
.requirements-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.requirement-card { padding: var(--space-6); border-block-start: 0.25rem solid var(--color-sea-dark); background: var(--color-paper-2); }
.requirement-card h3 { margin-block-end: var(--space-5); }
.spec-list { margin: 0; padding: 0; list-style: none; }
.spec-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--color-rule); }
.spec-list span { color: var(--color-muted); }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.toc { align-self: start; padding: var(--space-5); background: var(--color-paper-2); border-block-start: 0.25rem solid var(--color-palm); }
.toc strong { display: block; margin-block-end: var(--space-3); }
.toc ol { margin: 0; padding-inline-start: 1.3rem; }
.toc a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.guide-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.guide-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-rule-strong); text-decoration: none; }
.guide-card span { display: block; margin-block-start: var(--space-5); color: var(--color-accent-dark); font-weight: 800; }
.guide-article { padding-block: var(--space-6); border-block-end: 1px solid var(--color-rule); }
.guide-article h2 { margin-block-end: var(--space-5); font-size: clamp(1.75rem, 5vw, 2.8rem); }
.guide-article h3 { margin-block: var(--space-6) var(--space-3); }
.guide-article ul,
.guide-article ol { padding-inline-start: 1.35rem; }
.tip { padding: var(--space-5); background: var(--color-sea-soft); border-inline-start: 0.25rem solid var(--color-sea-dark); }
.warning { padding: var(--space-5); background: var(--color-coral-soft); border-inline-start: 0.25rem solid var(--color-error); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--color-muted); font-size: 0.78rem; }
.article-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }

.back-to-top { position: fixed; z-index: 40; inset-inline-end: var(--space-4); inset-block-end: 5.5rem; display: none; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
.back-to-top.is-visible { display: grid; }
.reveal { opacity: 0; translate: 0 1rem; transition: opacity 520ms var(--ease), translate 520ms var(--ease); }
.reveal.is-visible { opacity: 1; translate: 0; }

@keyframes button-shine { 0%, 60% { translate: -120% 0; } 100% { translate: 120% 0; } }
@keyframes hero-breathe { from { scale: 1.02; } to { scale: 1.05; } }
@keyframes spin { to { rotate: 1turn; } }

@media (hover: hover) {
  .button:hover,
  .button.is-hover { translate: 0 -0.125rem; box-shadow: 0.25rem 0.25rem 0 var(--color-shadow-strong); }
  .nav-links a:hover { color: var(--color-accent-dark); }
  .feature-card:hover { position: relative; z-index: 1; translate: 0 -0.25rem; box-shadow: 0 0.75rem 1.5rem var(--color-shadow); }
  .gallery-button:hover img { scale: 1.035; opacity: 0.88; }
  .guide-card:hover { background: var(--color-paper-2); }
}

@media (min-width: 40rem) {
  .shell { width: min(100% - 3rem, var(--content)); }
  .section { padding-block: var(--space-20); }
  .section-heading { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); align-items: end; }
  .info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-item:nth-child(2n) { border-inline-end: 1px solid var(--color-rule); }
  .info-item:nth-child(4n) { border-inline-end: 0; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .update-item { grid-template-columns: 9rem minmax(0, 1fr); }
  .review-summary { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); }
  .download-counter { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .requirements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; position: static; padding: 0; background: transparent; color: inherit; border: 0; }
  .button.nav-cta { display: inline-flex; }
  .hero__grid { grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.7fr); }
  .hero__dialogue { translate: 0 2rem; }
  .story-layout { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: center; }
  .media-stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .gallery-preview .gallery-item:first-child { grid-column: span 2; }
  .gallery-preview .gallery-item:first-child img { aspect-ratio: 16 / 7; }
  .footer-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.4fr); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-layout { grid-template-columns: 16rem minmax(0, 1fr); }
  .toc { position: sticky; inset-block-start: 6rem; }
  .mobile-cta { display: none; }
  .site-footer { padding-block-end: var(--space-12); }
}

@media (min-width: 64rem) {
  .info-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .info-item,
  .info-item:nth-child(2n),
  .info-item:nth-child(4n) { border-inline-end: 1px solid var(--color-rule); border-block-end: 0; }
  .info-item:last-child { border-inline-end: 0; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .back-to-top { inset-block-end: var(--space-4); }
}

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