.playground-page {
  margin: 0;
  color: #edf0f7;
  background: #080b14;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color-scheme: dark;
  min-height: 100vh;
  isolation: isolate;
  position: relative;
}
.playground-page *, .playground-page *::before, .playground-page *::after { box-sizing: border-box; }
.playground-page a { color: inherit; text-decoration: none; }
.playground-page a:focus-visible, .playground-page button:focus-visible { outline: 2px solid #bfdbfa; outline-offset: 7px; }
.playground-page .starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
/* One diffuse, asymmetric cloud; no animated filters or extra canvas layers. */
.playground-page .nebula {
  position: fixed; z-index: -1; pointer-events: none;
  width: 135vw; height: 145vh; left: 8%; top: -25%; opacity: .62;
  background: radial-gradient(ellipse at 56% 43%, #080b1499, transparent 22%),
    radial-gradient(ellipse at 65% 29%, #6983bc38, transparent 32%),
    radial-gradient(ellipse at 46% 49%, #806aab4a, transparent 27%),
    radial-gradient(ellipse at 64% 65%, #41669b42, transparent 29%),
    radial-gradient(ellipse at 35% 68%, #74639e29, transparent 22%);
  transform: translate3d(0, var(--nebula-y, 0px), 0) rotate(-19deg);
}
.playground-page .page-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 5vw; }
.playground-page main { overflow: clip; }
.playground-page .intro { position: relative; min-height: 86vh; min-height: 86svh; padding: clamp(70px, 15vh, 160px) 6vw 180px; text-align: center; }
.playground-page .eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .23em; color: #abbad1; }
.playground-page h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 450; line-height: 1.12; letter-spacing: -.045em; margin: 18px 0; }
.playground-page .intro-copy { color: #9da8bb; font-size: 14px; max-width: 410px; margin: 22px auto; }
.playground-page .scroll-invitation { display: inline-flex; align-items: center; gap: 18px; font-size: 11px; letter-spacing: .1em; color: #bdc7d8; margin-top: 25px; min-height: 44px; }
.playground-page .scroll-invitation span { font-size: 18px; }
/* Document-sized clipping prevents the travelling star from extending page bounds.
   Its absolute transform follows total scroll progress; it is not a fixed UI layer. */
.playground-page .sun-track { position: absolute; inset: 0; overflow: clip; z-index: -1; pointer-events: none; }
.playground-page .hub-star { position: absolute; width: 23px; height: 23px; left: 23%; top: 22.5vh; border-radius: 50%; background: radial-gradient(circle, #fffdf1 12%, #ffe9bc 46%, #ebbc7d 70%, #d6944d80 88%, transparent); box-shadow: 0 0 18px #ffe2a866, 0 0 44px #eeb76b30; transform: translate3d(var(--sun-x, 0px), var(--sun-y, 0px), 0); }
.playground-page .hub-star::before { content: ""; position: absolute; inset: -110px; border-radius: 50%; background: radial-gradient(circle, #ffe5b326 3%, #f5c47e18 13%, #dea35a0c 30%, transparent 69%); pointer-events: none; }
.playground-page .hub-star::after { content: ""; position: absolute; inset: -32px; border-radius: 50%; background: radial-gradient(ellipse at 47% 46%, transparent 12%, #ffdb9717 23%, transparent 58%); pointer-events: none; }
.playground-page .journey { position: relative; margin-top: -9vh; }
.playground-page .world { position: relative; min-height: 940px; min-height: max(850px, 110svh); --planet-shift: 0px; --planet-scale: 1; --copy-shift: 0px; --copy-opacity: 1; --world-opacity: 1; scroll-margin-top: 5vh; }
.playground-page .destination { position: absolute; display: block; width: var(--size); aspect-ratio: 1; left: var(--planet-left); top: var(--planet-top); border-radius: 50%; transform: translate3d(0, var(--planet-shift), 0) scale(var(--planet-scale)); opacity: var(--world-opacity); -webkit-tap-highlight-color: transparent; }
.playground-page .planet { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset -35px -24px 55px #000a, inset 2px 2px 8px #ffffff38, 0 0 65px var(--glow, #a1bfff15); transition: transform .35s ease, filter .35s ease; }
.playground-page .world-copy { pointer-events: none; position: relative; width: min(35%, 420px); margin-left: var(--copy-left); padding-top: var(--copy-top); opacity: var(--copy-opacity); transform: translate3d(0, var(--copy-shift), 0); transition: color .3s; }
.playground-page .world h2 { font-size: clamp(40px, 5vw, 72px); font-weight: 450; line-height: 1.1; letter-spacing: -.045em; margin: 14px 0 22px; }
.playground-page .personal-line { font-size: clamp(16px, 1.6vw, 20px); color: #b9c3d4; max-width: 360px; }
.playground-page .interests { color: #98a7bf; font-size: 12px; line-height: 2; max-width: 320px; }
.playground-page .world-action { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; margin-top: 16px; border-bottom: 1px solid #b1c6e547; font-size: 13px; }
.playground-page .world-action span { color: #9fb3d3; }
.playground-page .world:focus-within { --copy-opacity: 1 !important; --world-opacity: 1 !important; }
.playground-page .world:focus-within .planet { transform: scale(1.035); filter: brightness(1.12); }
.playground-page .world:focus-within .personal-line { color: #edf0f7; }
@media (hover: hover) {
  .playground-page .world:has(a:hover) .planet { transform: scale(1.035); filter: brightness(1.12); }
  .playground-page .world:has(a:hover) .personal-line { color: #edf0f7; }
}
/* Keep the established palette, scale and placement of each encounter. */
.playground-page .theme-music { --size: clamp(350px, 47vw, 720px); --planet-left: 56%; --planet-top: 9%; --copy-left: 12%; --copy-top: 30vh; --glow: #d595a625; min-height: max(950px, 125svh); }
.playground-page .theme-football { --size: clamp(270px, 31vw, 460px); --planet-left: 9%; --planet-top: 18%; --copy-left: 58%; --copy-top: 39vh; --glow: #85c4ac25; }
.playground-page .theme-games { --size: clamp(280px, 33vw, 480px); --planet-left: 59%; --planet-top: 31%; --copy-left: 18%; --copy-top: 18vh; --glow: #7991ee25; }
.playground-page .theme-movies { --size: clamp(290px, 35vw, 490px); --planet-left: -1%; --planet-top: 13%; --copy-left: 49%; --copy-top: 38vh; --glow: #9a8bdc25; }
/* 32% larger diameter; subtract half the increase to retain the globe's centre. */
.playground-page .theme-board { --size: clamp(250.8px, 27.72vw, 396px); --planet-left: calc(64% - clamp(30.4px, 3.36vw, 48px)); --planet-top: calc(22% - clamp(30.4px, 3.36vw, 48px)); --copy-left: 24%; --copy-top: 29vh; --glow: #d1a87925; min-height: max(720px, 90svh); }
.playground-page .planet { isolation: isolate; }
/* Video Games-only WebGL viewport preserves the existing globe and copy positions. */
.playground-page .theme-games .destination { transform: none; opacity: 1; }
.playground-page .theme-games .planet { box-shadow: none; }
.playground-page .video-games-webgl-host { display: block; position: absolute; inset: -28%; pointer-events: none; }
.playground-page .video-games-webgl-canvas { display: block; width: 100%; height: 100%; background: transparent; border: 0; }
.playground-page .video-games-preview-status { position: absolute; inset: 35% 12% auto; text-align: center; font-size: 12px; color: #b1bfdc; }
.playground-page .video-games-preview-status[hidden] { display: none; }
/* Board Games-only WebGL viewport preserves the existing globe and copy positions. */
.playground-page .theme-board .destination { transform: none; opacity: 1; }
.playground-page .theme-board .planet { box-shadow: none; }
.playground-page .board-games-webgl-host { display: block; position: absolute; inset: -38.4%; pointer-events: none; }
.playground-page .board-games-webgl-canvas { display: block; width: 100%; height: 100%; background: transparent; border: 0; }
.playground-page .board-games-preview-status { position: absolute; inset: 35% 12% auto; text-align: center; font-size: 12px; color: #c8c3a6; }
.playground-page .board-games-preview-status[hidden] { display: none; }
/* Football-only WebGL viewport preserves the existing globe and copy positions. */
.playground-page .theme-football .destination { transform: none; opacity: 1; }
.playground-page .theme-football .planet { box-shadow: none; }
.playground-page .football-webgl-host { display: block; position: absolute; inset: -28%; pointer-events: none; }
.playground-page .football-webgl-canvas { display: block; width: 100%; height: 100%; background: transparent; border: 0; }
.playground-page .football-preview-status { position: absolute; inset: 35% 12% auto; text-align: center; font-size: 12px; color: #b1cabb; }
.playground-page .football-preview-status[hidden] { display: none; }
/* Music-only WebGL viewport retains its existing responsive globe footprint. */
.playground-page .theme-music .destination { transform: none; opacity: 1; }
.playground-page .theme-music .planet { box-shadow: none; }
.playground-page .music-webgl-host { display: block; position: absolute; inset: -43.6%; pointer-events: none; }
.playground-page .music-webgl-canvas { display: block; width: 100%; height: 100%; background: transparent; border: 0; }
.playground-page .music-preview-status { position: absolute; inset: 35% 12% auto; text-align: center; font-size: 12px; color: #cbb0bc; }
.playground-page .music-preview-status[hidden] { display: none; }
/* Movies-only WebGL viewport: same globe footprint, transparent canvas. */
.playground-page .theme-movies .destination { transform: none; opacity: 1; }
.playground-page .theme-movies .planet { box-shadow: none; }
.playground-page .movies-webgl-host { display: block; position: absolute; inset: -2%; }
.playground-page .movies-webgl-canvas { display: block; width: 100%; height: 100%; background: transparent; border: 0; }
.playground-page .movies-preview-status { position: absolute; inset: 35% 12% auto; text-align: center; font-size: 12px; color: #aeb9cb; }
.playground-page .movies-preview-status[hidden] { display: none; }
.playground-page .journey-end { text-align: center; padding: 60px 6vw 140px; color: #9da8bb; }
.playground-page .home-copy { max-width: 580px; margin: auto; opacity: var(--home-opacity, 1); transform: translate3d(0, var(--home-shift, 0px), 0); }
.playground-page .home-copy h2 { color: #edf0f7; font-size: clamp(28px, 3.4vw, 42px); font-weight: 450; line-height: 1.2; letter-spacing: -.035em; margin: 20px 0; }
.playground-page .home-note { max-width: 470px; margin: 0 auto 22px; font-size: 15px; line-height: 1.8; color: #aeb9cb; }
.playground-page .journey-end:focus-within .home-copy { opacity: 1; transform: none; }
.playground-page .journey-end a { display: inline-block; min-height: 44px; padding: 12px; font-size: 12px; }
.playground-page .motion-toggle { position: fixed; bottom: 20px; right: 24px; z-index: 5; font: inherit; font-size: 11px; color: #bac5d7; background: #0d1320ed; border: 1px solid #ffffff20; border-radius: 30px; padding: 12px 18px; min-height: 44px; cursor: pointer; }
.playground-page .motion-toggle[hidden] { display: none; }
.playground-page .motion-toggle:disabled { cursor: default; }
.playground-page .page-footer { border-top: 1px solid #ffffff0d; font-size: 11px; color: #8592a7; padding-bottom: 90px; }
.playground-page .skip-link { position: fixed; top: 10px; left: 20px; padding: 12px 20px; background: #202c43; z-index: 10; transform: translateY(-150%); }
.playground-page .skip-link:focus { transform: translateY(0); }
.playground-page .travel-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.playground-page .world, .playground-page .intro, .playground-page .journey-end { transition: opacity .6s ease; }
.playground-page.is-travelling .world:not(.is-selected), .playground-page.is-travelling .intro, .playground-page.is-travelling .journey-end { opacity: .12; }
.playground-page.is-travelling .is-selected .world-copy { opacity: .15; transition: opacity .6s ease; }
.playground-page.is-travelling .is-selected .planet { transform: scale(1.22); filter: brightness(1.12); transition: transform .6s cubic-bezier(.2,.65,.3,1), filter .6s; }
/* Narrow viewports get off-centre encounters, not a compressed desktop grid. */
@media (max-width: 700px) {
  .playground-page .intro { min-height: 88svh; padding-top: 14svh; padding-bottom: 160px; }
  .playground-page .intro-copy { max-width: 280px; }
  .playground-page .hub-star { left: 78%; top: 22.5vh; width: 17px; height: 17px; }
  .playground-page .hub-star::before { inset: -80px; }
  .playground-page .world { min-height: 820px; min-height: max(790px, 108svh); }
  .playground-page .world-copy { width: 78%; padding-top: var(--copy-top); margin-left: var(--copy-left); }
  .playground-page .world h2 { font-size: clamp(36px, 10vw, 48px); }
  .playground-page .theme-music { --size: 90vw; --planet-left: 33%; --planet-top: 4%; --copy-left: 8%; --copy-top: calc(90vw + 65px); min-height: max(870px, 115svh); }
  .playground-page .theme-football { --size: 73vw; --planet-left: -16%; --planet-top: 8%; --copy-left: 18%; --copy-top: calc(73vw + 110px); }
  .playground-page .theme-games { --size: 69vw; --planet-left: 47%; --planet-top: 35%; --copy-left: 8%; --copy-top: 8vh; }
  .playground-page .theme-movies { --size: 82vw; --planet-left: -21%; --planet-top: 7%; --copy-left: 18%; --copy-top: calc(82vw + 100px); }
  .playground-page .theme-board { --size: 49vw; --planet-left: 56%; --planet-top: 14%; --copy-left: 10%; --copy-top: calc(49vw + 175px); min-height: max(720px, 95svh); }
  .playground-page .personal-line { max-width: 300px; }
  .playground-page .motion-toggle { right: 16px; bottom: 16px; }
}
/* Also applied by the pause control. All content stays visible with no JavaScript. */
.playground-page.motion-paused .destination, .playground-page.motion-paused .world-copy { transform: none; opacity: 1; }
.playground-page.motion-paused .world { --wave-scale: 1 !important; --arc-angle: -14deg !important; --band-shift: 0% !important; --facet-angle: -4deg !important; }
.playground-page.motion-paused .planet { transition: none; }
.playground-page.motion-paused .home-copy { opacity: 1; transform: none; }
.playground-page.motion-paused .nebula { transform: rotate(-19deg); }
@media (prefers-reduced-motion: reduce) {
  .playground-page .home-copy { opacity: 1; transform: none; }
  .playground-page .destination, .playground-page .world-copy { transform: none; opacity: 1; }
  .playground-page .world { --wave-scale: 1 !important; --arc-angle: -14deg !important; --band-shift: 0% !important; --facet-angle: -4deg !important; }
  .playground-page .planet, .playground-page .world, .playground-page .intro, .playground-page .journey-end { transition: none; }
  .playground-page .nebula { transform: rotate(-19deg); }
  .playground-page .world:focus-within .planet, .playground-page .world:has(a:hover) .planet { transform: none; }
}

/* Home's Earth is clipped at the document bottom; copy and footer stay above it. */
.playground-page .journey-end { padding-bottom: max(140px, 20vw); }
.playground-page .home-webgl-host { position: absolute; left: 0; right: 0; bottom: 0; height: max(140px, 20vw); overflow: hidden; pointer-events: none; z-index: 0; }
.playground-page .home-webgl-canvas { display: block; width: 100%; height: 100%; }
.playground-page .home-preview-status { display: block; padding-top: 20px; text-align: center; font-size: 12px; color: #aebfd0; }
.playground-page .home-preview-status[hidden] { display: none; }
.playground-page .home-copy { position: relative; z-index: 1; }
.playground-page .page-footer { position: relative; z-index: 1; color: #d3deea; text-shadow: 0 1px 4px #080b14; }
@media (max-width: 700px) {
  .playground-page .journey-end { padding-bottom: max(140px, 32vw); }
  .playground-page .home-webgl-host { height: max(140px, 32vw); }
}

/* One quiet, persistent way out; Home provides the deliberate final return. */
.playground-page .portfolio-escape { position: fixed; z-index: 50; top: max(12px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; color: #bdc7d8; font-size: 12px; text-shadow: 0 1px 5px #080b14; }
.playground-page .portfolio-escape:hover, .playground-page .home-return:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.playground-page .portfolio-escape:focus-visible, .playground-page .home-return:focus-visible { outline: 2px solid #bdc7d8; outline-offset: 3px; }
.playground-page .home-return { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Transparent copy layout must not cover planet links. */
.playground-page .world-copy a { pointer-events: auto; }