:root {
  color-scheme: light;
  --background: #f4f4f5;
  --ink: #101012;
  --muted: #65676c;
  --line: #cacacd;
  --edge: clamp(24px, 4vw, 64px);
  --font: "Golos Text", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: var(--background); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.cover { position: relative; min-height: 600px; height: 100svh; overflow: hidden; isolation: isolate; }
.copy { position: absolute; z-index: 2; left: var(--edge); top: 50%; transform: translateY(-50%); pointer-events: none; }
h1 { font-size: clamp(72px, 10.4vw, 168px); font-weight: 500; line-height: .94; letter-spacing: -.055em; margin: 0 0 30px; }
.lede { color: var(--muted); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; letter-spacing: -.02em; margin: 0; }
.character { position: absolute; width: 56%; height: 96%; right: 0; top: 0; }
#scene, .poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { object-fit: contain; }
#scene { opacity: 0; touch-action: pan-y; outline-offset: -12px; transition: opacity .4s ease; }
.is-ready #scene { opacity: 1; touch-action: none; cursor: grab; }
.is-ready #scene:active { cursor: grabbing; }
.is-ready .poster { visibility: hidden; }
.is-fallback #scene { display: none; }
.hint { position: absolute; z-index: 2; bottom: 30px; left: var(--edge); display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; opacity: 0; }
.cover:has(.is-ready) .hint { opacity: 1; }
.hint-line { width: 1px; height: 24px; background: var(--line); }
.mobile-hint { display: none; }
.motion-toggle { position: absolute; z-index: 3; bottom: 20px; right: var(--edge); min-height: 44px; padding: 10px 0 10px 16px; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.motion-toggle:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
[hidden] { display: none !important; }
@media (max-width: 860px) {
  .cover { min-height: 620px; }
  .character { top: 2%; width: 100%; height: 68%; }
  .copy { top: auto; bottom: 14%; transform: none; }
  h1 { font-size: clamp(64px, 15.6vw, 112px); margin-bottom: 19px; }
  .lede { font-size: clamp(17px, 2.5vw, 21px); }
  .hint { bottom: 26px; max-width: calc(100% - 210px); font-size: 13px; gap: 9px; }
  .desktop-hint { display: none; }
  .mobile-hint { display: inline; }
  .motion-toggle { bottom: 16px; font-size: 12px; }
}
@media (max-height: 600px) and (min-width: 600px) {
  .cover { min-height: 360px; }
  .copy { top: 45%; bottom: auto; transform: translateY(-50%); }
  h1 { font-size: 9vw; margin-bottom: 18px; }
  .lede { font-size: 17px; }
  .character { top: 0; right: 0; width: 52%; height: 90%; }
  .hint { max-width: none; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { #scene { transition: none; } }