/* Hallmark · genre: editorial-soft · tone: sakura reception · anchor: warm orange · macrostructure: Workbench · nav: N11 · footer: Ft6 · pre-emit: P5 H5 E5 S5 R5 V5 · contrast/slop/mobile: pass */
@import url("../../tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 7.5rem; }
body {
  margin: 0;
  min-width: 20rem;
  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.is-locked { overflow: clip; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: var(--rule-hairline); text-underline-offset: 0.22em; }
h1, h2, h3, p, ul, ol, dl, figure { margin-block: 0; }
h1, h2, h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.16;
}
h1 { font-size: var(--text-display-s); }
h2 { font-size: clamp(1.85rem, 4vw, var(--text-3xl)); }
h3 { font-size: var(--text-lg); }
p, li { max-width: 68ch; }
strong { font-weight: 700; }
small { font-size: var(--text-sm); }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md);
  transform: translateY(-180%);
  background: var(--color-nav);
  color: var(--color-ink-inverse);
  border-radius: var(--radius-sm);
}
.skip-link:focus { transform: none; }
:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: 3px;
}
.container { width: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--page-gutter); }
.narrow { width: min(100% - 2rem, 48rem); margin-inline: auto; }
.flow > * + * { margin-block-start: var(--space-md); }
.flow-lg > * + * { margin-block-start: var(--space-lg); }
.muted { color: var(--color-muted); }
.tabular { font-variant-numeric: tabular-nums; }
.surface-dark { background: var(--color-nav); color: var(--color-ink-inverse); }
.surface-dark a { color: inherit; }
.surface-dark .section-head p,
.surface-dark .timeline-item time { color: var(--color-sky-soft); }

.promo-bar {
  position: relative;
  z-index: calc(var(--z-sticky) + 1);
  padding: var(--space-xs) var(--page-gutter);
  background: var(--color-sakura);
  color: var(--color-ink);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
}
.promo-bar p { max-width: none; }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--color-nav);
  color: var(--color-ink-inverse);
  box-shadow: 0 1px 0 var(--color-nav-2);
}
.nav-shell {
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.025em;
}
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark {
  flex: 0 0 auto;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  margin-inline-end: var(--space-sm);
  background: var(--color-accent);
  border-radius: var(--radius-xs);
}
.desktop-nav { display: none; align-items: center; justify-content: center; gap: var(--space-xs); }
.nav-trigger, .nav-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nav-trigger::after { content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-inline-end: var(--rule-hairline) solid currentColor; border-block-end: var(--rule-hairline) solid currentColor; transform: rotate(45deg) translateY(-0.15rem); }
.nav-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translate(-0.1rem, -0.1rem); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.menu-toggle {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border: var(--rule-hairline) solid var(--color-nav-2);
  border-radius: var(--radius-sm);
  background: var(--color-nav-2);
  color: var(--color-ink-inverse);
  cursor: pointer;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; inline-size: 1.1rem; block-size: var(--rule-strong); background: currentColor; }

.mega-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: var(--z-dropdown);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  background: var(--color-paper);
  color: var(--color-ink);
  border-block-end: var(--rule-hairline) solid var(--color-rule);
  box-shadow: 0 1.75rem 3.5rem var(--color-shadow-deep);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s var(--dur-short);
}
.mega-panel.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mega-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); padding-block: var(--space-xl); }
.mega-group { display: grid; align-content: start; gap: var(--space-sm); }
.mega-group h2 { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.mega-item {
  display: grid;
  gap: var(--space-2xs);
  min-height: 4.5rem;
  padding: var(--space-sm);
  border: var(--rule-hairline) solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.mega-item strong { font-family: var(--font-display); }
.mega-item span { color: var(--color-muted); font-size: var(--text-sm); }
.nav-scrim { position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1); visibility: hidden; opacity: 0; background: var(--color-overlay); transition: opacity var(--dur-short) var(--ease-out), visibility 0s var(--dur-short); }
.nav-scrim.is-active { visibility: visible; opacity: 1; transition-delay: 0s; }

.mobile-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-modal);
  inline-size: min(88%, 24rem);
  padding: var(--space-lg);
  transform: translateX(100%);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: -1.5rem 0 3rem var(--color-shadow-deep);
  transition: transform var(--dur-long) var(--ease-out);
  overflow-y: auto;
}
.mobile-drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block-end: var(--space-md); border-block-end: var(--rule-hairline) solid var(--color-rule); }
.drawer-nav { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); }
.drawer-nav a { min-height: 3rem; display: flex; align-items: center; padding-inline: var(--space-sm); border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; }

.button {
  position: relative;
  isolation: isolate;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  overflow: hidden;
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.button--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.button--dark { border-color: var(--color-nav); background: var(--color-nav); color: var(--color-ink-inverse); }
.button--large { min-height: 3.75rem; padding-inline: clamp(1.5rem, 6vw, 3rem); font-size: var(--text-md); }
.button::after {
  content: "";
  position: absolute;
  inset-block: -40%;
  inset-inline-start: -35%;
  z-index: -1;
  inline-size: 20%;
  transform: skewX(-22deg);
  opacity: 0;
  background: var(--color-paper);
  transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.button.is-loading, .button[data-state="loading"] { cursor: wait; opacity: 0.72; }
.button.is-error, .button[data-state="error"] { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); }
.button.is-success, .button[data-state="success"] { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.button[aria-disabled="true"], .button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.button:active { transform: translateY(1px); }

.hero {
  position: relative;
  min-height: min(51rem, calc(100svh - 6.5rem));
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--color-nav);
  color: var(--color-ink-inverse);
}
.hero-media, .hero-media::after { position: absolute; inset: 0; }
.hero-media { z-index: -2; overflow: hidden; }
.hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 25%; }
.hero-media::after { content: ""; z-index: 1; background: var(--color-hero-overlay); }
.petals { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.petal { position: absolute; inline-size: 0.55rem; block-size: 0.85rem; border-radius: 70% 20% 70% 30%; background: var(--color-sakura); opacity: 0.65; animation: petal-drift 18s var(--ease-in-out) infinite; }
.petal:nth-child(1) { inset-inline-start: 18%; animation-delay: -4s; }
.petal:nth-child(2) { inset-inline-start: 64%; animation-delay: -10s; }
.petal:nth-child(3) { inset-inline-start: 87%; animation-delay: -15s; }
@keyframes petal-drift { 0% { transform: translate3d(0,-10%,0) rotate(0); opacity: 0; } 12% { opacity: 0.6; } 100% { transform: translate3d(4rem,105svh,0) rotate(220deg); opacity: 0; } }
.hero-inner { display: grid; gap: var(--space-lg); padding-block: var(--space-xl) var(--space-3xl); }
.hero-logo { inline-size: min(17rem, 72vw); filter: drop-shadow(0 0.6rem 1.2rem var(--color-shadow-deep)); }
.tag-row { 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-hairline) solid currentColor; border-radius: var(--radius-pill); font-size: var(--text-sm); line-height: 1; white-space: nowrap; }
.hero h1 { max-width: 12em; font-size: var(--text-display); text-shadow: 0 0.15rem 1.5rem var(--color-shadow-deep); }
.hero .english-name { display: block; margin-block-start: var(--space-xs); font-family: var(--font-body); font-size: clamp(1rem, 3vw, var(--text-md)); font-weight: 700; letter-spacing: 0; }
.hero-lede { max-width: 46rem; font-size: clamp(1.05rem, 2vw, var(--text-md)); line-height: 1.6; }
.metric-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule-hairline); max-width: 48rem; background: var(--color-rule); border: var(--rule-hairline) solid var(--color-rule); }
.metric { min-width: 0; padding: var(--space-sm) var(--space-md); background: var(--color-nav); }
.metric strong, .metric span { display: block; }
.metric strong { font-variant-numeric: tabular-nums; }
.metric span { font-size: var(--text-sm); color: var(--color-sky-soft); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.dialogue-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  max-width: 51rem;
  padding: var(--space-md);
  border: var(--rule-strong) solid var(--color-ink-inverse);
  background: var(--color-nav);
  color: var(--color-ink-inverse);
  box-shadow: 0.75rem 0.75rem 0 var(--color-sakura-strong);
}
.speaker { font-family: var(--font-display); font-weight: 900; color: var(--color-sakura); }
.dialogue-box p { max-width: none; }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--tint { background: var(--color-paper-2); color: var(--color-ink); }
.section--sky { background: var(--color-sky-soft); color: var(--color-ink); }
.section-head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-xl); }
.section-head p { color: var(--color-muted); }
.section-head--split { align-items: end; }
.section-head--split p { max-width: 36rem; }

.info-ledger { margin-block-start: calc(var(--space-xl) * -1); position: relative; z-index: var(--z-raised); }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule-hairline) solid var(--color-rule); background: var(--color-paper); box-shadow: 0 1rem 2rem var(--color-shadow); }
.info-item { min-width: 0; padding: var(--space-md); border-block-end: var(--rule-hairline) solid var(--color-rule-2); }
.info-item dt { color: var(--color-muted); font-size: var(--text-sm); }
.info-item dd { margin: var(--space-2xs) 0 0; font-weight: 700; overflow-wrap: anywhere; }

.story-layout { display: grid; gap: var(--space-xl); align-items: center; }
.story-copy { display: grid; gap: var(--space-lg); }
.story-copy p { font-size: 1.075rem; line-height: 1.8; }
.story-figure { position: relative; margin-inline: calc(var(--page-gutter) * -1); }
.story-figure img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.story-figure figcaption { padding: var(--space-sm) var(--page-gutter); background: var(--color-nav); color: var(--color-ink-inverse); font-size: var(--text-sm); }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.feature-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.feature-card strong { color: var(--color-danger); font-variant-numeric: tabular-nums; }
.feature-card p { color: var(--color-muted); }
.feature-card.is-error { border-color: var(--color-danger); }
.feature-card.is-success { border-color: var(--color-success); }
.feature-card[aria-disabled="true"] { opacity: 0.5; }

.media-workbench { display: grid; gap: var(--space-xl); }
.media-primary { border: var(--rule-hairline) solid var(--color-rule); background: var(--color-nav); }
.media-primary video { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.media-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); color: var(--color-ink-inverse); }
.media-caption p { max-width: 50rem; }
.workbench-shot { display: grid; gap: 0; border: var(--rule-hairline) solid var(--color-rule); background: var(--color-paper); }
.workbench-shot img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.workbench-shot figcaption { display: grid; gap: var(--space-xs); padding: var(--space-lg); }
.workbench-shot figcaption span { color: var(--color-muted); }

.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.gallery-card { min-width: 0; display: grid; align-content: start; gap: var(--space-sm); }
.gallery-button { position: relative; min-height: 0; padding: 0; overflow: hidden; border: var(--rule-hairline) solid var(--color-rule); background: var(--color-nav); cursor: zoom-in; }
.gallery-button img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.gallery-card figcaption { color: var(--color-muted); font-size: var(--text-sm); }
.gallery-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-xl); }
.gallery-tab { min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule-hairline) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); white-space: nowrap; cursor: pointer; }
.gallery-tab[aria-selected="true"] { border-color: var(--color-nav); background: var(--color-nav); color: var(--color-ink-inverse); }

.download-panel { display: grid; gap: var(--space-xl); padding: clamp(1.5rem, 5vw, 3rem); border: var(--rule-strong) solid var(--color-nav); background: var(--color-paper); color: var(--color-ink); box-shadow: 0.75rem 0.75rem 0 var(--color-sky); }
.download-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.download-fact { min-width: 0; padding-block: var(--space-sm); border-block-end: var(--rule-hairline) solid var(--color-rule); }
.download-fact span { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.download-fact strong { display: block; overflow-wrap: anywhere; }
.platform-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.platform-card { display: grid; gap: var(--space-md); padding: var(--space-xl); border: var(--rule-hairline) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.recommended { display: inline-flex; inline-size: fit-content; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-sakura); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }

.timeline { display: grid; gap: 0; border-inline-start: var(--rule-strong) solid var(--color-sky); padding-inline-start: var(--space-lg); }
.timeline-item { position: relative; display: grid; gap: var(--space-xs); padding-block: var(--space-sm) var(--space-xl); }
.timeline-item::before { content: ""; position: absolute; inset-inline-start: calc((var(--space-lg) + 0.43rem) * -1); inset-block-start: 1.15rem; inline-size: 0.75rem; block-size: 0.75rem; border: var(--rule-strong) solid var(--color-paper); border-radius: 50%; background: var(--color-sky); }
.timeline-item time { font-variant-numeric: tabular-nums; color: var(--color-muted); }

.review-summary { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); border-block: var(--rule-strong) solid var(--color-nav); }
.review-score { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 900; line-height: 1; color: var(--color-sakura-strong); font-variant-numeric: tabular-nums; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-block-start: var(--space-xl); }
.review-card { display: grid; gap: var(--space-sm); padding: var(--space-lg) 0; border-block-end: var(--rule-hairline) solid var(--color-rule); }
.review-card cite { color: var(--color-muted); font-style: normal; font-size: var(--text-sm); }
.review-card[data-reveal] { opacity: 0; transform: translateY(0.5rem); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.review-card[data-reveal].is-visible { opacity: 1; transform: none; }

.accordion { display: grid; border-block-start: var(--rule-hairline) solid var(--color-rule); }
.accordion details { border-block-end: var(--rule-hairline) solid var(--color-rule); }
.accordion summary { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); font-family: var(--font-display); font-weight: 900; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; flex: 0 0 auto; font-family: var(--font-body); font-size: var(--text-md); }
.accordion details[open] summary::after { content: "−"; }
.accordion-body { padding-block: 0 var(--space-lg); }
.accordion-body p, .accordion-body li { color: var(--color-muted); }

.final-cta { position: relative; overflow: hidden; padding-block: var(--space-3xl); background: var(--color-nav); color: var(--color-ink-inverse); }
.final-cta::after { content: ""; position: absolute; inset-inline-end: -7rem; inset-block-end: -8rem; inline-size: 17rem; block-size: 17rem; border: 2rem solid var(--color-nav-2); border-radius: 50%; }
.final-cta-inner { position: relative; z-index: var(--z-base); display: grid; gap: var(--space-lg); }
.final-cta p { color: var(--color-sky-soft); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  inline-size: min(94%, 75rem);
  block-size: fit-content;
  max-block-size: 92svh;
  margin: auto;
  padding: var(--space-md);
  overflow: auto;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-nav);
  color: var(--color-ink-inverse);
}
.lightbox::backdrop { background: var(--color-overlay); }
.lightbox figure { display: grid; gap: var(--space-sm); }
.lightbox img { inline-size: 100%; max-block-size: 72svh; object-fit: contain; }
.lightbox-controls { display: flex; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-sm); }
.icon-button { min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: var(--space-sm); border: var(--rule-hairline) solid var(--color-nav-2); border-radius: var(--radius-sm); background: var(--color-nav-2); color: var(--color-ink-inverse); white-space: nowrap; cursor: pointer; }

.guide-hero, .page-hero { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-sky-soft); color: var(--color-ink); }
.page-hero .breadcrumbs, .guide-hero .breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.page-hero h1, .guide-hero h1 { max-width: 17ch; }
.page-hero p, .guide-hero p { margin-block-start: var(--space-md); font-size: var(--text-md); }
.guide-layout { display: grid; gap: var(--space-xl); }
.toc { align-self: start; padding: var(--space-lg); border: var(--rule-hairline) solid var(--color-rule); background: var(--color-paper); }
.toc h2 { font-size: var(--text-md); }
.toc nav { display: grid; gap: var(--space-xs); margin-block-start: var(--space-md); }
.toc a { min-height: 2.75rem; display: flex; align-items: center; text-decoration: none; }
.guide-content { display: grid; gap: var(--space-3xl); min-width: 0; }
.guide-section { display: grid; gap: var(--space-lg); scroll-margin-top: 8rem; }
.guide-section ul, .guide-section ol { display: grid; gap: var(--space-sm); padding-inline-start: 1.4rem; }
.guide-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-block-start: var(--space-xl); }
.guide-card { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-block-start: var(--rule-strong) solid var(--color-nav); background: var(--color-paper-2); }
.guide-card a { font-weight: 700; white-space: nowrap; }

.spec-table { inline-size: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: var(--space-sm); border-block-end: var(--rule-hairline) solid var(--color-rule); text-align: start; vertical-align: top; }
.spec-table th { inline-size: 35%; color: var(--color-muted); font-weight: 400; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); counter-reset: install; }
.step { position: relative; display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-hairline) solid var(--color-rule); counter-increment: install; }
.step::before { content: counter(install, decimal-leading-zero); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; color: var(--color-sakura-strong); }

.article-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.article-card { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-block-end: var(--rule-hairline) solid var(--color-rule); }
.article-card a { font-weight: 700; white-space: nowrap; }
.article-body { width: min(100% - 2rem, 52rem); margin-inline: auto; padding-block: var(--space-2xl) var(--space-3xl); }
.article-body > * + * { margin-block-start: var(--space-lg); }
.article-body h2 { margin-block-start: var(--space-2xl); }
.article-body h3 { margin-block-start: var(--space-xl); }
.article-body ul, .article-body ol { display: grid; gap: var(--space-sm); padding-inline-start: 1.4rem; }
.article-note { padding: var(--space-lg); background: var(--color-sky-soft); color: var(--color-ink); border: var(--rule-hairline) solid var(--color-sky); }

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-sm), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
  background: var(--color-nav);
  color: var(--color-ink-inverse);
  box-shadow: 0 -1px 0 var(--color-nav-2);
}
.sticky-cta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.sticky-cta .button { min-height: 2.75rem; flex: 0 0 auto; }

.site-footer { padding-block: var(--space-3xl) calc(var(--space-4xl) + env(safe-area-inset-bottom)); background: var(--color-paper-2); color: var(--color-ink); }
.footer-grid { display: grid; gap: var(--space-2xl); }
.footer-letter { display: grid; gap: var(--space-md); max-width: 50rem; }
.footer-signoff { font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; font-weight: 900; }
.footer-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.footer-group { min-width: 0; }
.footer-group h2 { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.footer-group nav { display: grid; gap: var(--space-xs); margin-block-start: var(--space-sm); }
.footer-group a { min-height: 2.25rem; display: flex; align-items: center; width: fit-content; }
.footer-legal { display: grid; gap: var(--space-xs); padding-block-start: var(--space-lg); border-block-start: var(--rule-hairline) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }

@media (hover: hover) and (pointer: fine) {
  .nav-trigger:hover, .nav-link:hover, .drawer-nav a:hover { background: var(--color-nav-2); color: var(--color-ink-inverse); }
  .mega-item:hover { border-color: var(--color-rule); background: var(--color-paper-2); }
  .button:hover { transform: translateY(-1px); }
  .button--primary:hover { background: var(--color-accent-hover); }
  .button--dark:hover { background: var(--color-nav-2); }
  .button:hover::after, .button:focus-visible::after { transform: translateX(700%) skewX(-22deg); opacity: 0.22; }
  .feature-card:hover { transform: translateY(-2px); box-shadow: 0 0.75rem 1.5rem var(--color-shadow); }
  .gallery-button:hover img { transform: scale(1.02); opacity: 0.9; }
  .gallery-tab:hover { background: var(--color-paper-2); }
  .gallery-tab[aria-selected="true"]:hover { background: var(--color-nav-2); color: var(--color-ink-inverse); }
}

.gallery-tab:active, .icon-button:active, .menu-toggle:active, .nav-trigger:active { transform: translateY(1px); }
.gallery-tab:disabled, .icon-button:disabled, .menu-toggle:disabled, .nav-trigger:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

@media (min-width: 40rem) {
  .metric-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card:first-child { grid-column: span 2; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: end; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-summary { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-card { border-block-end: 0; border-inline-end: var(--rule-hairline) solid var(--color-rule); padding: var(--space-lg); }
  .review-card:last-child { border-inline-end: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

@media (min-width: 60rem) {
  .nav-shell { grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr) auto; }
  .desktop-nav { display: flex; }
  .menu-toggle { display: none; }
  .hero-inner { padding-block-start: var(--space-md); padding-block-end: calc(var(--space-3xl) + var(--space-lg)); }
  .hero-main { gap: var(--space-md); }
  .hero-logo { inline-size: min(14rem, 72vw); }
  .hero h1 { font-size: clamp(3rem, 5.4vw, 4.25rem); line-height: 1.08; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr); align-items: end; }
  .hero-main { display: grid; gap: var(--space-lg); }
  .hero-side { display: grid; align-content: end; gap: var(--space-lg); }
  .story-layout { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .story-figure { margin-inline: 0 calc(var(--page-gutter) * -1); }
  .feature-grid { grid-template-columns: 1.18fr 0.82fr 1fr; }
  .feature-card:first-child { grid-column: span 2; }
  .feature-card:nth-child(4) { grid-column: span 2; }
  .media-workbench { grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr); align-items: start; }
  .media-primary { grid-row: span 2; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-card:first-child { grid-column: span 2; }
  .guide-layout { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
  .toc { position: sticky; inset-block-start: 7rem; }
  .footer-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

@media (min-width: 90rem) {
  .hero h1 { font-size: var(--text-display); }
}

@media (pointer: coarse) {
  .button, .gallery-tab, .icon-button, .nav-trigger, .nav-link, .drawer-nav a { min-height: 3rem; }
}

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

@media print {
  .promo-bar, .site-header, .sticky-cta, .button, .gallery-tabs, .lightbox { display: none !important; }
  body { background: var(--color-paper); color: var(--color-ink); }
  .section, .article-body { padding-block: var(--space-lg); }
  a { text-decoration: none; }
}