/* Scroll stories for / and /kskpix/. Everything here is scoped to .st-gl, the class a
   probe in each page's <head> adds when WebGL works and reduced motion is off, so
   without it the page is the plain version. Koffer has its own in assets/koffer.css. */
#st-canvas, .st-ch-extra { display: none; }
.st-gl .st-ch-extra { display: block; }
.st-gl #st-canvas {
  display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease;
}
.st-gl.st-ready #st-canvas { transition: none; }
.st-gl .mapbg, .st-gl .scrim { display: none; }
.st-gl .st-ch { display: block; min-height: 0; height: 250vh; height: 250svh; padding: 0; margin: 0; }
.st-gl .st-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; pointer-events: none; }
.st-gl .st-pin > .wrap { width: 100%; }
.st-gl .st-panel { max-width: 30rem; pointer-events: auto; will-change: opacity, transform; }
/* Keeps copy readable where it crosses the map or a screenshot. */
.st-gl .st-panel { position: relative; }
.st-gl .st-panel::before {
  content: ""; position: absolute; inset: -3rem -1rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 82%, transparent) 55%, transparent);
}
.st-gl .st-panel h1 { font-size: clamp(36px, min(4.4vw, 8vh), 68px); line-height: 1.04; margin-bottom: 18px; }
.st-gl .st-panel h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 16px; font-weight: 700; }
.st-gl .st-panel > p { margin: 0 0 24px; }
.st-gl .st-panel > p:last-child { margin-bottom: 0; }
.st-gl .st-hide-gl { display: none; }
@media (min-width: 761px) { .st-gl .st-ch-extra .st-panel { max-width: 23rem; } }
@media (max-width: 760px) {
  .st-gl .st-pin { align-items: flex-end; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
}

.st-devs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.st-devs li { font-size: 13px; line-height: 1; padding: 8px 12px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; }
.st-gl .st-panel .cta { margin: 0; gap: 12px; }
.st-gl .st-panel .badges { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.st-gl .st-panel .cta + .badges { margin-top: 16px; }
.st-gl .st-panel .badges + * { margin-top: 16px; }
@media (max-width: 760px) { .st-gl .st-panel .cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; } }
.st-gl .st-panel .badges img { height: 44px; width: auto; }
/* The same lineup as the last chapter of the 3D story, for browsers that do not get it. */
.dev-lineup { position: relative; max-width: 920px; aspect-ratio: 8.6 / 5.6; margin: 44px auto 0; }
.dev-lineup img { position: absolute; height: auto; }
.dev-lineup .tv { width: 76%; left: 6%; top: 0; }
.dev-lineup .tablet { width: 34%; left: 0; bottom: 3.8%; }
.dev-lineup .iphone { width: 17%; left: 62%; bottom: 3%; }
.dev-lineup .android { width: 17%; left: 81%; bottom: 3%; }
/* Stats and EPG, under the downloads. */
.more-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.more-link { display: block; padding: 24px; color: inherit; text-decoration: none; }
.more-link h3 { margin: 0 0 8px; }
.more-link p { margin: 0; color: var(--t-62); font-size: 15px; line-height: 1.5; }
.more-link .n { font-variant-numeric: tabular-nums; }
.more-link:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.more-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }