html, body { height: 100%; overflow: hidden; }
.deck { position: relative; width: 100%; height: 100%; }
.slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 48px 64px 88px; opacity: 0; transform: translateX(32px); pointer-events: none;
  transition: opacity var(--duration-macro) var(--ease-snap), transform var(--duration-macro) var(--ease-out);
}
.slide.active { opacity: 1; transform: none; pointer-events: auto; }
.slide.left { transform: translateX(-32px); }
.split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 64px; align-items: center; width: 100%; max-width: 1280px; height: 100%; }
.slide.wide .split { grid-template-columns: minmax(260px, 330px) 1fr; gap: 48px; }
.split-text { display: flex; flex-direction: column; gap: var(--space-md); }
.split-text h2 { font-size: clamp(2rem, 2.6vw + 0.6rem, 3rem); }
.split-visual { display: flex; justify-content: center; align-items: center; min-width: 0; max-height: 100%; }
.split-visual > * { flex: none; }
.split-visual > .browser, .split-visual > .sheet, .split-visual > .stack, .split-visual > .road, .split-visual > .asks, .split-visual > .problems { width: 100%; max-width: 900px; }
.split-visual > .gate-tool { width: 100%; max-width: 640px; background: var(--color-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sheet); }
.slide .problems { gap: var(--space-ml); }
.slide .problem b { font-size: 1.45rem; }
.slide .problem p { font-size: 1.05rem; }
.slide .asks li { font-size: 1.15rem; }
.slide .asks li span { font-size: 0.95rem; }
.slide .road-col { font-size: 0.95rem; }
.slide .road-col h4 { font-size: 1.25rem; }

.title .title-inner { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-ml); }
.title .title-art { width: 620px; max-width: 70%; margin-bottom: var(--space-sm); }
.title-h { font-size: clamp(2.6rem, 4vw, 4rem); }
.title .lede { font-size: 1.2rem; max-width: 40ch; }
.title-note { margin-top: var(--space-sm); }

.deck-nav { position: fixed; right: 32px; bottom: 28px; display: flex; align-items: center; gap: 10px; z-index: 5; font-size: var(--text-xs); color: var(--color-text-2); }
.deck-nav .alt { color: var(--color-action); font-weight: 700; margin-inline-end: 14px; text-underline-offset: 3px; }
#counter { min-width: 52px; text-align: end; margin-inline-end: 6px; }
.nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-raised); cursor: pointer; font-size: 22px; line-height: 1; color: var(--color-text); }
.nav-btn:hover { border-color: var(--color-action); color: var(--color-action); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-border); }
.progress i { display: block; height: 100%; background: var(--color-action); transition: width var(--duration-macro) var(--ease-out); }