:root { color-scheme: dark; font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; background: #000; color: #fff; }
* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; }
.scene { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; position: relative; }
.artboard { width: 100%; line-height: 0; }
.desktop-art { display: block; width: 100%; height: auto; max-height: 100vh; max-height: 100svh; object-fit: contain; }
.mobile-art { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 12px 18px; background: #a1f603; color: #050704; z-index: 20; }
.skip-link:focus { top: 16px; }
.controls { position: fixed; z-index: 10; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 16px); display: flex; align-items: center; gap: 20px; padding: 8px 12px; border: 1px solid #5d792b; border-radius: 10px; background: rgb(0 0 0 / 92%); box-shadow: 0 4px 28px #000; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; white-space: nowrap; }
body.controls-visible .controls, .controls:focus-within { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.scene-links { display: flex; gap: 4px; }
.home-compact { display: none; }
.controls a, .controls button { font: inherit; font-size: 13px; line-height: 1.5; color: #d8dfcf; text-decoration: none; background: transparent; border: 0; border-radius: 5px; padding: 8px 10px; cursor: pointer; }
.controls a:hover, .controls button:hover, .controls a[aria-current="page"] { color: #b3ff28; background: #142006; }
:focus-visible { outline: 2px solid #b3ff28; outline-offset: 3px; }
@media (max-width: 700px) and (orientation: portrait) {
  html { scroll-snap-type: none; }
  .scene { display: block; min-height: 0; padding: 22px 18px 34px; }
  .artboard { display: none; }
  .mobile-art { display: grid; width: 100%; gap: 20px; }
  .crop-grid { display: grid; gap: 16px; }
  .score-grid { width: min(100%, 360px); margin-inline: auto; }
  .timeline-grid { width: min(100%, 440px); margin-inline: auto; gap: 12px; }
  .enterprise-mobile { display: grid; gap: 12px; width: min(100%, 440px); margin-inline: auto; }
  .copy-lines { display: grid; gap: 4px; width: min(100%, calc(var(--line-width) * 1px)); margin-inline: auto; }
  .copy-lines .crop { width: calc(100% * var(--w) / var(--line-width)); }
  .crop { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--w) / var(--h); }
  .crop img { position: absolute; display: block; max-width: none; width: calc(100% * var(--iw) / var(--w)); height: auto; left: calc(-100% * var(--x) / var(--w)); top: calc(-100% * var(--y) / var(--h)); }
  .controls { gap: 4px; padding: 6px; max-width: calc(100vw - 12px); }
  .controls a, .controls button { padding: 7px 6px; font-size: 11px; }
  .home-full { display: none; }
  .home-compact { display: inline; }
  #presentation { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .controls { transition: none; } }
@media print { .scene { min-height: 0; break-after: page; } .desktop-art { max-height: none; } .controls { display: none; } }