/* Homepage typography and alignment: keep these rules after legacy component styles. */
:root {
  --home-width: 76rem;
  --home-gutter: clamp(1.5rem, 5vw, 5rem);
  --home-body: 1.375rem;
  --home-small: 1rem;
  --home-caption: 1rem;
  --home-heading: clamp(2rem, 3.4vw, 3rem);
  --home-hero: clamp(2.5rem, 5.2vw, 4.5rem);
}
body { font-size: var(--home-body); line-height: 1.7; }
html, body { overflow-x: hidden; overflow-x: clip; }
.screen {
  padding: 5rem max(var(--home-gutter), calc((100% - var(--home-width)) / 2));
  min-height: 100svh;
}
.screen > * { min-width: 0; }
.screen h2 { font-size: var(--home-heading); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.intro-screen h2 { font-size: var(--home-hero); line-height: 1.15; }
:root:lang(zh) .intro-screen h2 em { white-space: nowrap; }
.kicker { font-size: var(--home-small); line-height: 1.5; margin-bottom: 1rem; letter-spacing: .12em; }
.screen .lead, .deps, .feat p, .tech-screen .feat .fold p {
  font-size: var(--home-body); line-height: 1.75; font-weight: 400;
}
.tech-screen .feat .fold p { font-size: calc(var(--home-body) - .125rem); }
.screen .lead { max-width: 100%; margin-top: 1.25rem; text-wrap: pretty; }
.screen .lead + .lead { margin-top: .5rem; }
.feat h3, .tech-screen .feat .head h3, .res-item .t {
  font-size: var(--home-body); line-height: 1.45; font-weight: 650;
}
.perf-note, .vs-note, .ph, .res-item .d, .stat span, .resources-note {
  font-size: var(--home-small); line-height: 1.65; color: var(--dim);
}
.perf-note, .vs-note { margin-top: 1rem; }
.resources-note { max-width: 62em; margin-top: 1rem; }
.gcap { font-size: var(--home-caption); line-height: 1.65; gap: 1rem; align-items: flex-start; }
.gcap > span:first-child { min-width: 0; }
.gdots { flex-shrink: 0; padding-top: .6em; }
.stage-wrap { width: min(55rem, 100%); margin: 1.75rem 0 0; height: min(40svh, 25rem); }
.stage-wrap .shot { width: 100%; height: 100%; object-fit: contain; box-shadow: none; }
.stage-wrap { background: color-mix(in srgb, var(--surface) 45%, transparent); border-radius: 14px; }
.gcap, .gallery > .ph { width: min(55rem, 100%); margin-left: 0; margin-right: 0; }
.tech-screen .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.tech-screen .feat { min-height: 6rem; padding: .7rem .75rem; }
.tech-screen .feat { z-index: 0; }
.tech-screen .feat:hover, .tech-screen .feat:focus-within, .tech-screen .feat.open { z-index: 10; }
.tech-screen .feat .fold, .tech-screen .feat:nth-child(3n) .fold {
  left: 0; right: auto; width: 100%; transform: rotateX(-72deg); padding: 1.25rem;
}
.tech-screen .feat .head { gap: .35rem; }
.tech-screen .feat .head h3 {
  font-size: clamp(.85rem, 1.25vw, 1.125rem);
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: -.025em;
}
.tech-screen .feat:hover .fold, .tech-screen .feat.open .fold,
.tech-screen .feat:nth-child(3n):hover .fold, .tech-screen .feat:nth-child(3n).open .fold {
  transform: rotateX(0); opacity: 1;
}
.stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 2rem; }
.stat { display: flex; flex-direction: column; min-width: 0; }
.stat b { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.25; white-space: nowrap; }
.stat span { display: block; margin-top: .5rem; }
.vs-wrap { margin-top: 2rem; }
.vs th, .vs td { font-size: var(--home-small); line-height: 1.65; padding: .75rem 1rem; vertical-align: top; }
.vs td.fam, .vs td.gap, .vs td.ref { font-size: var(--home-small); line-height: 1.65; }
.vs th:first-child, .vs td:first-child { padding-left: 0; }
.vs th:last-child, .vs td:last-child { padding-right: 0; }
.res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; margin-top: 2rem; }
.res-item { align-items: flex-start; padding: 1.25rem; }
.res-item > div:last-child { min-width: 0; }
.res-item .d { margin-top: .35rem; }
.res-list { display: grid; gap: .75rem; margin-top: 2rem; }
.screen:has(> .res-list) { scroll-snap-align: start; }
.res-row { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: 1.75rem; align-items: center; }
.res-row .res-item { height: 100%; align-items: center; }
.res-row .res-item > span:last-child { min-width: 0; }
.res-row .res-item .t, .res-row .res-item .d { display: block; }
.res-row .res-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.res-row p { min-width: 0; font-size: var(--home-body); line-height: 1.65; color: var(--dim); text-wrap: pretty; }
@media (max-width: 600px) {
  .res-list { gap: 1.35rem; margin-top: 1.5rem; }
  .res-row { grid-template-columns: minmax(0, 1fr); gap: .65rem; align-items: start; }
  .res-row .res-item {
    height: auto;
    min-height: 4.25rem;
    padding: .8rem .9rem;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
  }
  .res-row p { font-size: 1rem; line-height: 1.65; padding: 0 .15rem; }
}
.res-item .d, .stat span { text-wrap: pretty; }
@media (min-width: 921px) {
  .screen h2 { text-wrap: initial; }
  .resources-note { max-width: 100%; }
}
.jump { font-size: var(--home-small); line-height: 1.5; }
@media (max-width: 1100px) {
  .tech-screen .feat-grid, .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  :root { --home-body: 1.25rem; --home-small: .9375rem; --home-caption: .9375rem; }
  html { scroll-snap-type: y proximity; }
  .screen { padding-top: 5rem; padding-bottom: 4rem; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-wrap { max-height: 60svh; }
  .vs { min-width: 48rem; }
  .stat-chart { height: 12rem; }
}
@media (max-width: 600px) {
  :root { --home-body: 1.125rem; }
  /* Mobile is a continuous reading surface: desktop keeps the full-screen
     page rhythm, while narrow screens do not pretend that long sections fit
     into a viewport. */
  html { scroll-snap-type: none; }
  .screen {
    min-height: auto;
    padding-top: max(5rem, calc(4rem + env(safe-area-inset-top)));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-bottom: max(3.5rem, calc(2.5rem + env(safe-area-inset-bottom)));
    padding-left: max(1.25rem, env(safe-area-inset-left));
  }
  /* Balance deliberately creates similarly short title lines.  On phones,
     natural wrapping is calmer and lets a line use all available width. */
  .screen h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.125rem);
    letter-spacing: -.035em;
    text-wrap: wrap;
  }
  html[lang="en"] .screen h2 { text-wrap: wrap; }
  .intro-screen h2 { font-size: clamp(1.75rem, 7.5vw, 2.125rem); }
  .intro-h .brand-line { display: inline; }
  .intro-h .colon { display: none; }
  html[lang="en"] .intro-h .colon { display: inline; }
  .tech-screen .lead, .gallery .lead {
    font-size: .95rem;
    line-height: 1.6;
  }
  .tech-screen .feat-grid { gap: .55rem; }
  .tech-screen .feat { min-height: 4.75rem; padding: .4rem .45rem; }
  .tech-screen .feat .head { gap: .25rem; }
  .tech-screen .feat .head h3 { font-size: clamp(.55rem, 2.4vw, .7rem); }
  html[lang="zh"] .tech-screen .feat .head h3 { font-size: .8rem; }
  .tech-screen .feat .fold p { font-size: .66rem; line-height: 1.45; }
  .tech-screen .feat .fold { padding: 1rem; }
  .stat-row { gap: 1.5rem 1rem; }
  .stat b { font-size: 2rem; }
  .stage-wrap { height: auto; aspect-ratio: 2 / 1; }
  .gnav { width: 2.5rem; height: 2.5rem; }
  .res-grid { grid-template-columns: minmax(0, 1fr); }
  .lang { right: var(--home-gutter); }
  .vs-wrap {
    margin-top: 1rem;
    max-height: 62svh;
    overflow: auto;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  }
  .vs thead th { position: static; background: transparent; }
  .vs th:first-child, .vs td:first-child {
    padding-left: .65rem;
    background: transparent;
  }
  .vs th, .vs td { background: transparent; }
  .vs {
    min-width: 32rem;
    table-layout: fixed;
  }
  .vs th, .vs td {
    font-size: .65rem;
    line-height: 1.35;
    padding: .32rem .28rem;
  }
  .vs th:first-child, .vs td:first-child {
    width: 30%;
    min-width: 0;
    padding-left: .32rem;
  }
  .vs th:not(:first-child), .vs td:not(:first-child) { width: 23.333%; }
  .vs td.fam, .vs td.gap, .vs td.ref { font-size: .6rem; line-height: 1.3; }
}
@media (max-height: 820px) and (min-width: 921px) {
  html { scroll-snap-type: y proximity; }
  .screen { padding-top: 4rem; padding-bottom: 3rem; }
  .stat-chart { height: 10rem; margin-top: 1.5rem; }
}