:root {
  color-scheme:dark;
  --ink:#f7f9f7;
  --muted:rgba(237,242,238,.65);
  --line:rgba(255,255,255,.13);
  --glass:rgba(8,11,13,.58);
  --glass-strong:rgba(8,11,13,.78);
  --ease:cubic-bezier(.2,.72,.18,1);
  --motion-ui:220ms;
  --motion-page:320ms;
  --motion-exit:180ms;
  --hit:46px;
  --edge:max(22px,env(safe-area-inset-left));
}
* {
  box-sizing:border-box
}
html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden
}
body {
  background:#101413;
  transition:background-color var(--motion-page) var(--ease);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}
button,a {
  color:inherit
}
button {
  font:inherit
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.srOnly {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
body.atHome {
  background:#f5f5f2;
  color:#232824;
  color-scheme:light
}
#homeGallery {
  --home-top:calc(48px + env(safe-area-inset-top));
  --home-bottom:calc(24px + env(safe-area-inset-bottom));
  position:fixed;
  inset:0;
  overflow:hidden
}
#homeGallery::before,#homeGallery::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  z-index:1;
  pointer-events:none;
  background:rgb(245 245 242 / .18);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px)
}
#homeGallery::before {
  top:0;
  height:var(--home-top);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),#000e calc(100% - 16px),#0008 calc(100% - 10px),#0002 calc(100% - 4px),transparent)
}
#homeGallery::after {
  bottom:0;
  height:var(--home-bottom)
}
#homeGallery::after,#homeScrollPosition {
  mask-image:linear-gradient(to top,#000 calc(100% - 20px),#000e calc(100% - 16px),#0008 calc(100% - 10px),#0002 calc(100% - 4px),transparent)
}
#worldGrid {
  --home-gap:clamp(16px,2vw,30px);
  --home-row-height:max(180px,calc((100dvh - var(--home-top) - var(--home-bottom) - 18px - (var(--home-rows,3) - 1)*var(--home-gap))/var(--home-rows,3)));
  --grid-limit:min(1440px,calc(var(--home-row-height)*16/9*3 + var(--home-gap)*2 + 16px));
  width:100%;
  height:100%;
  margin:0;
  padding:calc(var(--home-top) + 8px) calc(max(clamp(24px,5vw,80px),(100vw - var(--grid-limit))/2) + 8px) calc(var(--home-bottom) + 8px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:max-content;
  gap:var(--home-gap);
  align-content:safe center
}
#worldGrid::-webkit-scrollbar {
  display:none
}
#homeScrollPosition {
  position:fixed;
  z-index:2;
  inset:auto 0 0;
  width:100%;
  height:var(--home-bottom);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  appearance:none;
  background:linear-gradient(to right,#000 var(--scroll-progress,0%),transparent 0);
  cursor:ew-resize
}
#homeScrollPosition:focus-visible {
  outline:2px solid #42675d;
  outline-offset:-5px
}
#homeScrollPosition::-webkit-slider-runnable-track {
  height:100%;
  background:transparent
}
#homeScrollPosition::-webkit-slider-thumb {
  appearance:none;
  width:1px;
  height:100%;
  background:transparent
}
#homeScrollPosition::-moz-range-track {
  height:100%;
  background:transparent
}
#homeScrollPosition::-moz-range-thumb {
  width:1px;
  height:100%;
  border:0;
  border-radius:0;
  background:transparent
}
#homeScrollPosition::-moz-range-progress {
  background:transparent
}
#worldGrid.smallCollection {
  grid-template-columns:repeat(2,minmax(0,1fr));
  --grid-limit:1160px
}
.worldCard {
  display:block;
  border:0;
  border-radius:4px;
  overflow:hidden;
  background:#e2e5df;
  aspect-ratio:16/9;
  text-decoration:none;
  position:relative;
  isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.worldCard img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s var(--ease)
}
@media(hover:hover) {
  .worldCard:hover {
    box-shadow:0 10px 32px #101b151a
  }
  .worldCard:hover img {
    transform:scale(1.018)
  }
}
.worldCard:active {
  transform:scale(.985)
}
.worldCard:focus-visible {
  outline-color:#42675d
}
#stage,#worldSlot,#transitionVeil {
  position:fixed;
  inset:0
}
#stage {
  user-select:none;
  -webkit-user-select:none
}
#worldSlot {
  z-index:1
}
.worldFrame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  opacity:0;
  background:transparent;
  pointer-events:none;
  transition:opacity var(--motion-page) var(--ease)
}
.worldFrame.interactive {
  pointer-events:auto
}
.worldFrame.ready {
  opacity:1
}
#transitionVeil {
  z-index:8;
  pointer-events:none;
  background:rgba(5,7,8,.24);
  opacity:0;
  transition:opacity var(--motion-ui) var(--ease)
}
#transitionVeil.covering {
  opacity:1;
  pointer-events:auto
}
.chrome {
  position:fixed;
  z-index:20;
  display:flex;
  align-items:center;
  --chrome-shift:-6px;
  opacity:1;
  visibility:visible;
  translate:0 0;
  transition:opacity var(--motion-ui) var(--ease),translate var(--motion-ui) var(--ease),visibility 0s,display var(--motion-ui) allow-discrete
}
body.chromeHidden:not(.atHome) .chrome {
  opacity:0;
  visibility:hidden;
  translate:0 var(--chrome-shift);
  pointer-events:none;
  transition-delay:0s,0s,var(--motion-ui),0s
}
.iconButton,.sceneButton {
  width:var(--hit);
  height:var(--hit);
  display:grid;
  place-items:center;
  border:0;
  border-radius:10px;
  background:transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s,opacity .18s,transform .18s;
  flex-shrink:0
}
.iconButton:hover,.sceneButton:hover {
  background:#00000016
}
.iconButton:active,.sceneButton:active {
  background:#0003;
  transform:scale(.94)
}
.iconButton:disabled,.sceneButton:disabled {
  opacity:.25;
  cursor:default
}
.iconButton svg,.sceneButton svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 3px #0005)
}
#goHome {
  left:var(--edge);
  top:max(18px,env(safe-area-inset-top))
}
#worldSwitcher {
  left:50%;
  transform:translateX(-50%);
  top:max(18px,env(safe-area-inset-top))
}
body.atHome #goHome,body.atHome #worldSwitcher,body.atHome #playerControls {
  display:none;
  opacity:0;
  translate:0 var(--chrome-shift);
  pointer-events:none
}
#playerControls {
  --chrome-shift:6px;
  left:50%;
  bottom:max(22px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  padding:3px;
  gap:4px;
  border-radius:14px;
  background:#0b100f38;
  backdrop-filter:blur(12px)
}
#playerControls .iconButton,#playerControls .sceneButton {
  width:44px;
  height:44px
}
#playerControls button:hover {
  background:#ffffff15
}
.playIcon {
  display:none!important
}
#playPause.paused .playIcon {
  display:block!important
}
#playPause.paused .pauseIcon {
  display:none
}
#sceneMenu {
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  background:transparent;
  color:#fff
}
#sceneMenu::backdrop {
  background:rgba(5,7,8,.28)
}
#closeScenes {
  position:absolute;
  z-index:2;
  right:var(--edge);
  top:max(18px,env(safe-area-inset-top))
}
.sceneRail {
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:min(100dvh,calc((100vw - 96px)*2.109375));
  container-type:size
}
#sceneList {
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  --scene-gap:clamp(4px,.888889cqh,10px);
  gap:var(--scene-gap);
  padding:max(8px,var(--scene-gap)) 0;
  justify-content:safe center;
  overflow-y:auto;
  overflow-anchor:none;
  overscroll-behavior:contain;
  scrollbar-width:none;
  scroll-snap-type:y mandatory;
  scroll-padding-block:max(8px,var(--scene-gap));
  touch-action:pan-y pinch-zoom
}
#worldGrid,#sceneList {
  --fade-top:0px;
  --fade-bottom:0px;
  mask-image:linear-gradient(to bottom,
    transparent,
    #000b calc(var(--fade-top) * .4),
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    #000b calc(100% - var(--fade-bottom) * .4),
    transparent)
}
#sceneList::-webkit-scrollbar {
  display:none
}
#sceneList .worldCard {
  flex:0 0 26.666667cqh;
  height:26.666667cqh;
  width:47.407407cqh;
  scroll-snap-align:center;
  box-shadow:0 8px 32px #0002
}
#sceneList .worldCard:focus-visible {
  outline-color:#fff
}
#sceneList .worldCard:hover img {
  transform:none
}
#worldStatus {
  position:fixed;
  z-index:12;
  left:50%;
  bottom:max(92px,calc(env(safe-area-inset-bottom) + 74px));
  transform:translateX(-50%);
  font-size:13px;
  line-height:1.6;
  color:var(--ink);
  opacity:0;
  pointer-events:none;
  text-align:center;
  max-width:calc(100vw - 32px)
}
#worldStatus.visible {
  opacity:1
}
#worldStatus.instruction {
  width:max-content;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--glass-strong);
  font-size:14px;
  font-weight:500;
  backdrop-filter:blur(18px)
}
#loadingNotice {
  position:fixed;
  z-index:15;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:calc(100vw - 40px);
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--glass-strong);
  color:var(--ink);
  font-size:13px;
  line-height:1.5
}
#loadingText {
  word-break:keep-all
}
.loadingPulse {
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#d7e6df;
  animation:breathing 1.6s ease-in-out infinite
}
#loadingNotice.failed .loadingPulse {
  display:none
}
#retryWorld {
  flex-shrink:0;
  min-height:40px;
  border:1px solid var(--line);
  background:#ffffff1a;
  border-radius:8px;
  padding:0 10px;
  cursor:pointer
}
@keyframes breathing {
  50% {
    opacity:.35;
    transform:scale(.75)
  }
}
#aboutPanel {
  top: max(18px, calc(env(safe-area-inset-top) + 10px));
  right: max(18px, calc(env(safe-area-inset-right) + 10px));
  display: block;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
#aboutToggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .17);
  cursor: pointer;
  list-style: none;
}
#aboutToggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
}
.aboutCard {
  position:fixed; inset:0; margin:auto; padding:24px 32px 28px;
  width:min(480px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto; overscroll-behavior:contain; color-scheme:light;
  --about-base:247 249 247; --about-highlight:252 254 252;
  --about-ink:#202a28; --about-muted:#35413d;
  --about-control:44 62 53; --about-control-alpha:.065;
  --about-active:255 255 255; --about-active-ink:#202a28; --about-divider:36 56 47;
  color:var(--about-ink); border:0; outline:0; border-radius:20px;
  background:linear-gradient(135deg,rgb(var(--about-highlight) / .74),rgb(var(--about-base) / .60));
  box-shadow:0 20px 65px rgb(0 0 0 / .28);
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
}
.aboutCard::backdrop { background:rgb(5 10 12 / .50); }
.aboutHeader { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#closeAbout { flex:none; width:44px; height:44px; border-radius:10px; background:transparent; color:var(--about-ink); }
#closeAbout:hover { background:rgb(var(--about-control) / .12); }
#closeAbout svg { width:19px; height:19px; stroke-width:1.5; filter:none; }
.aboutCopy { padding:0; }
.languageSwitch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: rgb(var(--about-control) / var(--about-control-alpha));
}
.languageSwitch button {
  min-height: 32px;
  min-width:44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color:var(--about-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing:.04em;
  cursor: pointer;
}
.languageSwitch button:hover {
  color: var(--about-ink);
}
.languageSwitch button[aria-pressed="true"] {
  background:rgb(var(--about-active) / .68);
  color: var(--about-active-ink);
  box-shadow:0 1px 4px rgb(0 0 0 / .06);
}
.aboutCopy h1 {
  margin:26px 0 20px;
  font-size:27px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.055em;
}
.aboutCopy p {
  margin: 0 0 12px;
  color:var(--about-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap:anywhere;
}
#artworkCredit {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgb(var(--about-divider) / .13);
}
#artworkCredit a {
  color: var(--about-ink);
  text-underline-offset: 3px;
}
.sourceLink {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--about-ink);
  font-size: 13px;
  font-weight: 400;
  text-decoration-color:rgb(var(--about-divider) / .28);
  text-underline-offset: 4px;
}
.sourceLink:hover { text-decoration-color:currentColor; }
.aboutFooter { margin-top:30px; padding-top:20px; border-top:1px solid rgb(var(--about-divider) / .13); }
.aboutFooter p { margin:0 0 8px; color:var(--about-muted); font-size:13px; line-height:1.7; }
@supports not (backdrop-filter:blur(1px)) { .aboutCard { background:rgb(var(--about-base) / .96); } }
@media(max-width:450px) {
  .aboutCard { padding-left:22px; padding-right:22px; }
  .aboutCopy h1 { font-size:25px; }
  .aboutCopy > p { font-size:15px; }
}
@media(pointer:coarse) { .languageSwitch button { min-height:44px; } }
#aboutToggle {
  width:var(--hit);
  height:var(--hit);
  border:0;
  border-radius:10px;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none
}
#aboutToggle:hover {
  background:#00000016
}
#aboutToggle svg {
  width:21px;
  height:21px;
  filter:drop-shadow(0 1px 3px #0005)
}
body.atHome #aboutPanel {
  top:max(4px,calc(env(safe-area-inset-top) + 4px))
}
body.atHome #aboutToggle {
  color:#3e483e
}
body.atHome #aboutToggle svg {
  filter:none
}
@media(max-width:800px) {
  #worldGrid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start
  }
  #worldGrid.smallCollection {
    align-content:safe center
  }
}
@media(max-width:520px) {
  #worldGrid {
    grid-template-columns:1fr;
    gap:20px
  }
  #worldGrid.smallCollection {
    grid-template-columns:1fr
  }
  #aboutPanel {
    right:14px
  }
  :root {
    --edge:max(14px,env(safe-area-inset-left))
  }
  #playerControls {
    bottom:max(18px,env(safe-area-inset-bottom))
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after,*::backdrop {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important
  }
}
body:has(#sceneMenu[open],#aboutDialog[open]) .chrome {
  opacity:0;
  translate:0 var(--chrome-shift);
  pointer-events:none
}

/* Grayscale inversion is clipped to the icon strokes, never a backdrop panel.
   A separate outer stroke keeps the middle-gray crossover readable. */
#openScenes,#aboutToggle { position:relative }
#goHome:hover,#openScenes:hover,#aboutToggle:hover { background:transparent }
@supports ((backdrop-filter:invert(1)) and (mask-image:linear-gradient(#fff,#fff))) {
 #goHome svg,#openScenes svg,#aboutToggle svg { visibility:hidden }
 #goHome::before,#openScenes::before,#aboutToggle::before,
 #goHome::after,#openScenes::after,#aboutToggle::after {
  content:'';position:absolute;left:50%;top:50%;width:var(--adaptive-size);height:var(--adaptive-size);transform:translate(-50%,-50%);pointer-events:none;mask-repeat:no-repeat;mask-size:100% 100%;
 }
 #goHome::before,#openScenes::before,#aboutToggle::before {
  mask-image:var(--adaptive-mask);backdrop-filter:grayscale(1) invert(1);-webkit-backdrop-filter:grayscale(1) invert(1);
 }
 #goHome::after,#openScenes::after,#aboutToggle::after {mask-image:var(--adaptive-outline);background:rgb(0 0 0 / .72)}
#goHome{--adaptive-size:23px;--adaptive-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%209-8%209%208M6%209v12h12V9M10%2021v-7h4v7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--adaptive-outline:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3Cmask%20id%3D%22cut%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%209-8%209%208M6%209v12h12V9M10%2021v-7h4v7%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23cut)%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%209-8%209%208M6%209v12h12V9M10%2021v-7h4v7%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
#openScenes{--adaptive-size:23px;--adaptive-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2210%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M6%203h12M6%2021h12%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--adaptive-outline:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3Cmask%20id%3D%22cut%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2210%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M6%203h12M6%2021h12%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23cut)%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2210%22%20rx%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M6%203h12M6%2021h12%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
#aboutToggle{--adaptive-size:21px;--adaptive-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--adaptive-outline:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3Cmask%20id%3D%22cut%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.5%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23cut)%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.15%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6M12%207.5v.5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
}

#goHome:focus-visible,#openScenes:focus-visible,#aboutToggle:focus-visible { outline:2px solid white;outline-offset:2px;box-shadow:0 0 0 5px #111 }

/* Compact mobile chrome; keep comfortable targets while reducing visual weight. */
@media (max-width:600px), (max-height:500px) and (pointer:coarse) {
  :root { --hit:42px; --edge:max(12px,env(safe-area-inset-left)); }
  #goHome,#worldSwitcher { top:max(10px,env(safe-area-inset-top)); }
  #aboutPanel { top:max(10px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); }
  #aboutToggle { width:42px; height:42px; }
  #goHome,#openScenes { --adaptive-size:19px; }
  #aboutToggle { --adaptive-size:18px; }
  .iconButton svg,.sceneButton svg { width:19px; height:19px; }
  #aboutToggle svg { width:18px; height:18px; }
  #playerControls { gap:2px; padding:2px; border-radius:12px; bottom:max(12px,env(safe-area-inset-bottom)); }
  #playerControls .iconButton,#playerControls .sceneButton { width:40px; height:40px; }
}

[data-copy="credit"] { white-space: pre-line; }

/* Native state changes remain immediate; only the visible presentation eases. */
#homeGallery,#stage {
  opacity:1;
  transition:opacity var(--motion-page) var(--ease),display var(--motion-page) allow-discrete;
}
#homeGallery { background:#f5f5f2; }
#homeGallery[hidden],#stage[hidden] { opacity:0; pointer-events:none; }

#aboutDialog,#sceneMenu {
  opacity:0;
  transition:opacity var(--motion-exit) var(--ease),translate var(--motion-exit) var(--ease),
    display var(--motion-exit) allow-discrete,overlay var(--motion-exit) allow-discrete;
}
#aboutDialog { translate:0 8px; }
#aboutDialog[open],#sceneMenu[open] {
  opacity:1; translate:0 0;
  transition-duration:var(--motion-ui);
}
#aboutDialog:not([open]),#sceneMenu:not([open]) { pointer-events:none; }
#aboutDialog::backdrop,#sceneMenu::backdrop {
  opacity:0;
  transition:opacity var(--motion-ui,220ms) var(--ease,ease),
    display var(--motion-ui,220ms) allow-discrete,overlay var(--motion-ui,220ms) allow-discrete;
}
#aboutDialog[open]::backdrop,#sceneMenu[open]::backdrop { opacity:1; }
#aboutDialog:not([open])::backdrop,#sceneMenu:not([open])::backdrop { pointer-events:none; }
.sceneRail { translate:0 10px; transition:translate var(--motion-ui) var(--ease); }
#sceneMenu[open] .sceneRail { translate:0 0; }

.musicPanel,.glyphPicker {
  opacity:1; translate:0 0;
  transition:opacity var(--motion-ui) var(--ease),translate var(--motion-ui) var(--ease),
    display var(--motion-ui) allow-discrete;
}
.musicPanel[hidden],.glyphPicker[hidden] { opacity:0; translate:0 6px; pointer-events:none; }

@starting-style {
  #homeGallery:not([hidden]),#stage:not([hidden]) { opacity:0; }
  .chrome { opacity:0; translate:0 var(--chrome-shift); }
  #aboutDialog[open] { opacity:0; translate:0 8px; }
  #sceneMenu[open] { opacity:0; }
  #sceneMenu[open] .sceneRail { translate:0 10px; }
  #aboutDialog[open]::backdrop,#sceneMenu[open]::backdrop { opacity:0; }
  .musicPanel:not([hidden]),.glyphPicker:not([hidden]) { opacity:0; translate:0 6px; }
}