@font-face {
  font-family: "Bitcount Prop Single";
  src: url("assets/bitcount-prop-single-latin-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --sky: #100b20;
  --ink: #faf1e8;
  --dim: #c7bdd3;
  --violet: #cfb9ef;
  --brass: #ffd1a5;
  --rule: #d9c0ff37;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", monospace;
  --sans: system-ui, -apple-system, sans-serif;
  font-family: var(--sans);
  background: var(--sky);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 25px;
}
*, *::after, *::before { box-sizing: border-box; }
body { margin: 0; isolation: isolate; }
.skyfield {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at var(--glow-x, 48%) var(--glow-y, 39%), #36225256, transparent 55%),
    radial-gradient(ellipse at 92% 67%, #3c23562e, transparent 49%);
}
.telescope-beam {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.telescope-beam.is-lit { opacity: 1; }
.beam-edge { opacity: .65; filter: blur(6px); }
.beam-core { opacity: .39; filter: blur(3px); }
.tap-wake {
  position: fixed;
  z-index: 5;
  width: 58px;
  height: 44px;
  pointer-events: none;
}
.tap-wake::before, .tap-wake::after {
  content: "";
  position: absolute;
}
.tap-wake::after {
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  background: #ffe0bd;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tap-wake--orbit {
  animation: tap-orbit .66s cubic-bezier(.2,.65,.25,1) both;
}
.tap-wake--orbit::before {
  inset: 10px 3px;
  border: 1px solid transparent;
  border-top-color: #d9b9f4;
  border-bottom-color: #e7b99182;
  border-radius: 50%;
}
.tap-wake--orbit::after {
  box-shadow: -12px 13px #ddbbff, 14px -15px #ffe1ae, 10px 18px #cba8f3, -21px -5px #f5c4af, 21px -2px #ded0f7;
}
.tap-wake--comet {
  animation: tap-comet .58s ease-out both;
}
.tap-wake--comet::before {
  top: 50%;
  left: 50%;
  width: 27px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dbc2f2 72%, #ffe0bd);
  transform: translate(-100%, -50%);
}
.tap-wake--comet::after { box-shadow: -7px 10px #d8b7f5a8, -15px 16px #efc49c82; }
.tap-wake--constellation {
  animation: tap-constellation .72s ease-out both;
}
.tap-wake--constellation::before {
  top: 50%;
  left: 50%;
  width: 28px;
  height: 15px;
  background: #d4b7eead;
  clip-path: polygon(0 73%, 36% 16%, 100% 53%, 100% 61%, 36% 24%, 0 81%);
  transform: translate(-50%, -50%);
}
.tap-wake--constellation::after {
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  border-radius: 50%;
  box-shadow: -10px 8px #dcb9f8, 18px 6px #edd0ff;
  transform: translate(-50%, -50%);
}
@keyframes tap-orbit {
  from { opacity: .95; transform: translate(-50%, -50%) rotate(-37deg) scale(.55); }
  to { opacity: 0; transform: translate(-50%, -50%) rotate(-15deg) scale(1.6); }
}
@keyframes tap-comet {
  from { opacity: .95; transform: translate(-50%, -50%) rotate(-33deg) scale(.65); }
  to { opacity: 0; transform: translate(calc(-50% + 17px), calc(-50% - 12px)) rotate(-33deg) scale(1.35); }
}
@keyframes tap-constellation {
  0% { opacity: .85; transform: translate(-50%, -50%) scale(.75); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 8px)) scale(1.3); }
}
h1, h2, h3, h4, p { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.shell { width: min(100% - clamp(36px, 8vw, 142px), 1330px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px; background: var(--brass); color: var(--sky); }
.kicker { font: 600 10px/1.4 var(--mono); letter-spacing: .15em; color: var(--violet); text-transform: uppercase; }

.mast { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--rule); }
.brand { display: grid; align-items: center; width: clamp(122px, 16.2vw, 192px); min-height: 44px; }
.brand img { height: auto; }
.mast nav { display: flex; gap: clamp(13px, 3vw, 42px); }
.mast nav a, .back { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); font-size: 13px; font-weight: 620; text-decoration: none; }
a:hover { color: var(--brass); }

.opening { position: relative; z-index: 1; padding-top: clamp(31px, 4.2vw, 57px); text-align: center; }
.opening h1 { font: 500 clamp(43px, 6.25vw, 94px)/.98 var(--serif); letter-spacing: -.057em; text-wrap: balance; }
.opening h1 span, .opening h1 em { display: inline-block; }
.opening em { color: var(--violet); font-weight: 400; }
.intro { max-width: 44ch; margin: 13px auto 0; color: var(--dim); line-height: 1.57; font-size: clamp(14px, 1.25vw, 17px); text-wrap: balance; }

.room {
  position: relative;
  width: min(100%, clamp(720px, calc((100svh - 300px) * 1.776), 1190px));
  aspect-ratio: 1672 / 941;
  margin-block: clamp(-34px, -3vw, -9px) clamp(-9px, -1vw, -3px);
  margin-inline: auto;
  isolation: isolate;
}
.falling-star-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.falling-star { visibility: hidden; }
.room[data-falling-star] .falling-star { visibility: visible; }
.wandering-sky {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(100vw, calc(100% + 240px));
  translate: -50% 0;
  overflow: hidden;
  pointer-events: none;
}
.satellite {
  position: absolute;
  left: var(--satellite-x);
  top: var(--satellite-y);
  width: var(--satellite-size);
  translate: -50% -50%;
}
.satellite--observatory {
  --satellite-x: 12%;
  --satellite-y: 34%;
  --satellite-size: clamp(50px, 9%, 99px);
  --island-art: url("assets/crystal-observatory.webp");
  --satellite-saturation: .94;
  --material-light: radial-gradient(ellipse at 45% 17%, #f4bd7b68, transparent 32%),
    radial-gradient(ellipse at 33% 58%, #c6a0f142, transparent 33%);
  --journey-x: .9;
}
.satellite--invention {
  --satellite-x: 89%;
  --satellite-y: 82%;
  --satellite-size: clamp(50px, 10%, 108px);
  --island-art: url("assets/strange-invention.webp");
  --satellite-saturation: .91;
  --material-light: radial-gradient(ellipse at 43% 35%, #ffd18b66, transparent 33%),
    radial-gradient(ellipse at 57% 63%, #c69cf64a, transparent 35%);
  --journey-x: -.62;
  --journey-y: .66;
}
.satellite-object {
  position: relative;
  display: block;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 35%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.satellite-object img {
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: saturate(var(--satellite-saturation));
}
/* Paint small highlights onto the silhouette. The undersides stay in shadow. */
.satellite-object::before {
  content: "";
  position: absolute;
  inset: 0;
  mask: var(--island-art) center / 100% 100% no-repeat;
  background: var(--material-light);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .68;
  transition: opacity .25s ease-out;
}
.satellite-object:is(:active,:focus-visible)::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .satellite-object:hover::before { opacity: 1; }
}
.satellite-glint {
  position: absolute;
  top: var(--accent-y);
  left: var(--accent-x);
  width: var(--accent-size, 13%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--accent-colour, #ffe4b3aa), transparent 67%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  translate: -50% -50%;
}
.satellite--observatory .satellite-glint { --accent-x: 28%; --accent-y: 19%; }
.satellite--invention .satellite-glint { --accent-x: 31%; --accent-y: 27%; }
[data-satellite="observatory"][data-observatory-glow="shimmer"] .satellite-glint {
  animation: satellite-brass-glint 1.25s .27s ease-out both;
}
.room[data-ready] [data-satellite="invention"] .satellite-glint {
  animation: satellite-brass-glint 13s -3s ease-in-out infinite;
}
@keyframes satellite-brass-glint {
  0%, 79%, 100% { opacity: 0; transform: scale(.65); }
  86% { opacity: .92; transform: scale(1.1); }
  94% { opacity: .18; }
}
.satellite-light, .satellite-bubble, .satellite-crystal {
  position: absolute;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
}
.satellite-light {
  --ambient-light: .18;
  left: var(--light-x);
  top: var(--light-y);
  width: var(--light-width);
  height: var(--light-height);
  border-radius: 50%;
  background: var(--light-fill);
  mix-blend-mode: screen;
  opacity: var(--ambient-light);
}
.satellite--observatory .satellite-light {
  --light-x: 50%;
  --light-y: 27%;
  --light-width: 54%;
  --light-height: 50%;
  --light-fill: radial-gradient(ellipse, var(--crystal-core, #f8dbffcb), var(--crystal-glow, #bf72f967) 30%, transparent 73%);
}
.satellite--invention .satellite-light {
  --light-x: 44%;
  --light-y: 48%;
  --light-width: 43%;
  --light-height: 39%;
  --light-fill: radial-gradient(ellipse, #f0d6ffbf, #bb7dff6b 26%, transparent 69%);
}
.satellite-crystal {
  inset: 0;
  translate: none;
  background: url("assets/crystal-observatory.webp") center / 100% 100% no-repeat;
  clip-path: polygon(50.1% 15.4%, 55.9% 23.1%, 54.5% 26.9%, 50.2% 31.3%, 45.9% 26.7%, 44.5% 23%);
  filter: hue-rotate(var(--crystal-hue, 0deg)) saturate(1.35) brightness(1.16);
}
.satellite-bubbles {
  position: absolute;
  left: 38%;
  top: 19%;
  pointer-events: none;
}
.satellite-bubble {
  width: var(--bubble-size);
  aspect-ratio: 1;
  border: .7px solid #f3deffc4;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 27% 25%, #fffaf0e8 0 6%, transparent 16%),
    radial-gradient(ellipse at 62% 77%, #d0fff1aa, transparent 33%),
    radial-gradient(circle at 44% 45%, #ead6f70c 39%, #eeb0db4c 65%, #adc7fc72 89%);
  box-shadow: inset -1px -1px 2px #eec7f7a6, 0 0 5px #d4b9fa4a;
}
.satellite-object.is-still :is(.satellite-light, .satellite-crystal) { opacity: .8 !important; }

@media (min-width: 1280px) {
  .satellite--observatory {
    --satellite-x: 13%;
    --satellite-y: 33%;
    --satellite-size: clamp(72px, 8%, 102px);
    --journey-y: .8;
  }
  .satellite--invention {
    --satellite-x: 90%;
    --satellite-y: 76%;
    --satellite-size: clamp(88px, 10%, 126px);
  }
}
@media (min-width: 1280px) and (max-height: 850px) {
  .satellite--observatory { --journey-y: .55; }
}
@media (min-width: 601px) and (max-width: 1279px) and (orientation: landscape) {
  .satellite--observatory {
    --satellite-y: 25%;
    --journey-x: 1.18;
    --journey-y: .29;
  }
}
.stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0); transition: transform .38s cubic-bezier(.2,.7,.3,1); }
.room[data-ready] .stage { animation: island-bob 7.2s ease-in-out infinite alternate; }
@keyframes island-bob { from { translate: 0 2px; } to { translate: 0 -6px; } }
.distant-stars { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.stars-near { opacity: .58; transform: translate(var(--stars-x, 0px), var(--stars-y, 0px)); transition: transform .48s ease-out; }
.stars-far { opacity: .34; }
.room[data-ready] .stars-far { animation: starlight 5.8s ease-in-out infinite alternate; }
@keyframes starlight { to { opacity: .72; } }
.map, .map-telescope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.map {
  mask: url("assets/workshop-matte.svg") center / 100% 100% no-repeat;
}
.map-telescope {
  background: url("assets/night-workshop-side-tiles.webp") center / contain no-repeat;
  mask: url("assets/telescope-matte.svg") center / 100% 100% no-repeat;
  transform: scale(.57);
  transform-origin: 46.5% 34.6%;
  pointer-events: none;
}
.effects, .lighting { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lighting { background: radial-gradient(ellipse at var(--light-x, 50.5%) var(--light-y, 53%), #f7edff57, #bd9bea29 10%, transparent 23%); mix-blend-mode: screen; opacity: .47; }
.room[data-ready] .lighting { animation: orrery-glow 3.3s ease-in-out infinite alternate; }
@keyframes orrery-glow { to { opacity: .97; } }
.emblem-assembly { transition: transform .42s cubic-bezier(.2,.72,.28,1), filter .3s; }
:is(.emblem-click-motion, .emblem-idle-motion) { transform-box: fill-box; transform-origin: center; }
.room[data-emblem-welcome] .emblem-idle-motion { animation: emblem-welcome 610ms cubic-bezier(.24,.72,.36,1) both; }
.room[data-emblem-welcome] .emblem-shimmer { animation: emblem-shimmer 510ms 100ms ease-in-out both; }
@keyframes emblem-welcome {
  0%, 100% { transform: none; }
  42% { transform: translateY(-6%) rotate(-3deg); }
  72% { transform: translateY(-1.5%) rotate(.8deg); }
}
.room[data-ready] .emblem-float { animation: emblem-drift 3.8s ease-in-out infinite alternate; }
@keyframes emblem-drift { to { transform: translateY(-4px); } }
.room:has(.spot--emblem:is(:hover,:focus-visible)) .emblem-assembly { transform: translateY(-4px); filter: drop-shadow(0 0 7px #dfc7ff68); }
.emblem-pulse, .emblem-shimmer, .emblem-orbit-trace, .emblem-scatter, .sky-constellation { opacity: 0; }
.emblem-pulse { transform-box: fill-box; transform-origin: center; }
.emblem-orbit-mote { opacity: .34; stroke-dasharray: .9 99.1; }
.room[data-ready] .emblem-orbit-mote { animation: emblem-orbit-drift 8s linear infinite; }
.room[data-emblem-reaction="pulse"] .emblem-pulse { animation: emblem-pulse .88s ease-out both; }
.room[data-emblem-reaction="scatter"] .emblem-scatter { opacity: 1; }
.room[data-emblem-reaction="scatter"] .emblem-scatter :is(path, circle) { animation: emblem-scatter .98s ease-out both; }
.room[data-emblem-reaction="shimmer"] .emblem-shimmer { animation: emblem-shimmer .96s ease-in-out both; }
.room[data-emblem-reaction="reverse"] .emblem-orbit-trace { animation: emblem-trace 1.16s ease-in-out both; }
.room[data-emblem-reaction="reverse"] .emblem-orbit-mote { opacity: 1; stroke-width: 4; }
.sky-constellation {
  position: absolute;
  z-index: 0;
  top: clamp(36px, 9%, 66px);
  left: 71%;
  width: clamp(112px, 19%, 224px);
  height: auto;
  translate: -50% 0;
  pointer-events: none;
}
.constellation-thread {
  fill: none;
  stroke: #d8baf1;
  stroke-opacity: .67;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 100;
  vector-effect: non-scaling-stroke;
}
.room[data-emblem-reaction="constellation"] .sky-constellation { animation: constellation-fade 2.15s ease-in-out both; }
.room[data-emblem-reaction="constellation"] .constellation-thread { animation: constellation-draw .88s .14s ease-out both; }
.room[data-emblem-reaction="still"] .emblem-orbit-trace { opacity: .38; }
@keyframes emblem-pulse {
  0% { opacity: 0; transform: scale(.78); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes emblem-scatter {
  0% { opacity: 0; transform: translate(0, 0); }
  22% { opacity: .96; }
  100% { opacity: 0; transform: translate(var(--scatter-x), var(--scatter-y)); }
}
@keyframes emblem-shimmer {
  0% { opacity: 0; transform: translateX(-66px); }
  32%, 68% { opacity: .83; }
  100% { opacity: 0; transform: translateX(58px); }
}
@keyframes emblem-orbit-drift { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes emblem-trace { 0%, 100% { opacity: 0; } 32%, 65% { opacity: .48; } }
@keyframes constellation-fade { 0%, 100% { opacity: 0; } 23%, 70% { opacity: .86; } }
@keyframes constellation-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.orrery-motes { opacity: .48; }
.room[data-ready] .orrery-motes circle { animation: warm-dust 4s ease-in-out infinite; }
.orrery-motes circle:nth-child(2) { animation-delay: -1.4s !important; }
.orrery-motes circle:nth-child(3) { animation-delay: -2.6s !important; }
.orrery-motes circle:nth-child(4) { animation-delay: -3.2s !important; }
@keyframes warm-dust { 0% { transform: translate(0, 8px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(7px, -25px); opacity: 0; } }
.inlay-glow { mix-blend-mode: screen; }
.inlay-glow ellipse { opacity: 0; transition: opacity .2s; }
.inlay-glow ellipse:nth-child(2) { transition-delay: .06s; }
.inlay-glow ellipse:nth-child(3) { transition-delay: .12s; }
.room:has(.spot--symboloom:is(:hover,:focus-visible,:active)) .inlay-glow ellipse { opacity: .86; }
.door-atmosphere { visibility: hidden; }
.room[data-ready] .door-atmosphere { visibility: visible; }
.room[data-ready] .portal-cloud--far { animation: portal-high-cloud 24s linear -4s infinite; }
.room[data-ready] .portal-cloud--middle { animation: portal-middle-cloud 17s linear -2.2s infinite; }
.room[data-ready] .portal-cloud--mist { animation: portal-mist-drift 12s linear -5s infinite; }
@keyframes portal-high-cloud {
  from { transform: translate(0, 0); }
  50% { transform: translate(-78px, -2px); }
  to { transform: translate(-156px, 0); }
}
@keyframes portal-middle-cloud {
  from { transform: translate(0, 0); }
  50% { transform: translate(-75px, 2px); }
  to { transform: translate(-150px, 0); }
}
@keyframes portal-mist-drift {
  0%, 100% { opacity: .61; }
  0% { transform: translate(0, 0); }
  50% { transform: translate(-56px, -1px); opacity: .79; }
  100% { transform: translate(-112px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .room[data-ready] .door-atmosphere { visibility: hidden; }
}
:root[data-motion-paused] .room[data-ready] .door-atmosphere { visibility: hidden; }

.telescope-light { opacity: 0; transition: opacity .3s; }
.room:not([data-telescope-lit]):has(.spot--scope:focus-visible) .telescope-light { opacity: .55; }
@media (hover: hover) {
  .room:not([data-telescope-lit]):has(.spot--scope:hover) .telescope-light { opacity: .55; }
}
.room[data-telescope-lit] .telescope-light { opacity: 1; }
.telescope-colour { stop-color: var(--telescope-colour, #dfc6ff); transition: stop-color .42s ease-in-out; }
.telescope-idle-optics { opacity: 1; }
.room[data-telescope-lit] .telescope-idle-optics { opacity: 0; }
.scope-idle-breath { opacity: .24; }
.room[data-ready] .scope-idle-breath { animation: scope-idle-breathe 5.2s ease-in-out -1.7s infinite alternate; }
@keyframes scope-idle-breathe { to { opacity: .54; } }
.scope-idle-reflection, .scope-idle-brass, .scope-idle-star { opacity: 0; }
.room[data-scope-idle="glass"] .scope-idle-reflection { animation: scope-glass-glint 1.95s ease-in-out both; }
.room[data-scope-idle="brass"] .scope-idle-brass { animation: scope-brass-glint 2.05s ease-in-out both; }
.room[data-scope-idle="star"] .scope-idle-star { animation: workshop-star-glint 1.9s ease-in-out both; }
@keyframes scope-glass-glint {
  0% { transform: translateX(-9px); opacity: 0; }
  39% { opacity: .94; }
  73% { opacity: .37; }
  100% { transform: translateX(9px); opacity: 0; }
}
@keyframes scope-brass-glint {
  0% { stroke-dasharray: .31 1; stroke-dashoffset: .3; opacity: 0; }
  39% { opacity: .88; }
  78% { opacity: .32; }
  100% { stroke-dasharray: .31 1; stroke-dashoffset: -1; opacity: 0; }
}
@keyframes workshop-star-glint {
  0%, 100% { opacity: 0; }
  41% { opacity: .75; }
  64% { opacity: .52; }
}

.room[data-emblem-idle="tilt"] .emblem-idle-motion { animation: emblem-idle-tilt 2.15s ease-in-out; }
.room[data-emblem-idle="lift"] .emblem-idle-motion { animation: emblem-idle-lift 2.25s ease-in-out; }
.room[data-emblem-idle="shimmer"] .emblem-idle-motion { animation: emblem-idle-turn 2.2s ease-in-out; }
.room[data-emblem-idle="shimmer"] .emblem-shimmer { animation: emblem-idle-moonlight 1.95s ease-in-out both; }
@keyframes emblem-idle-tilt {
  0%, 100% { transform: none; }
  46% { transform: translateY(-3.2%) rotate(-5deg); }
  78% { transform: rotate(.8deg); }
}
@keyframes emblem-idle-lift {
  0%, 100% { transform: none; }
  44% { transform: translateY(-8%) scale(1.025); }
  75% { transform: translateY(-2%); }
}
@keyframes emblem-idle-turn {
  0%, 100% { transform: none; }
  52% { transform: translateY(-4%) rotate(3.7deg); }
}
@keyframes emblem-idle-moonlight {
  0% { transform: translateX(-38px); opacity: 0; }
  45% { opacity: .67; }
  100% { transform: translateX(44px); opacity: 0; }
}

.radio-waves { --radio-peak: .93; }
/* The portrait tablet has clean artwork. Dim the painted arcs under the
   separately animated strokes in the phone and wide compositions. */
.radio-wave-shadow {
  stroke: #49335b;
  stroke-width: 5px;
  opacity: 0;
  mix-blend-mode: multiply;
}
.room[data-ready]:not([data-composition="tablet"], [data-suspended]) .radio-wave-shadow { opacity: .72; }
.radio-waves path { opacity: .14; --radio-wave: 0; }
.radio-waves path:nth-of-type(2) { --radio-wave: 1; }
.radio-waves path:nth-of-type(3) { --radio-wave: 2; }
.room[data-ready] .radio-waves path {
  animation: radio-broadcast 3.65s calc(.55s * var(--radio-wave)) ease-in-out infinite;
}
.room:has(.spot--radio:focus-visible) .radio-waves { --radio-peak: 1; }
@media (hover: hover) {
  .room:has(.spot--radio:hover) .radio-waves { --radio-peak: 1; }
}
.room[data-ready][data-radio-tuned] .radio-waves path {
  animation: radio-signal .45s calc(.24s * var(--radio-wave)) ease-in-out 2 alternate;
}
@keyframes radio-broadcast {
  0%, 42%, 100% { opacity: .14; }
  14% { opacity: var(--radio-peak); }
  25% { opacity: .55; }
}
.radio-lamp { opacity: .62; }
.room[data-ready] .radio-lamp { animation: radio-signal 2.8s ease-in-out infinite alternate; }
@keyframes radio-signal { from { opacity: .28; } to { opacity: 1; } }
.room[data-workshop-busy] :is(.portal-cloud, .radio-waves path, .scope-idle-breath, .emblem-float, .lighting, .satellite-glint) {
  animation-play-state: paused !important;
}
/* The workshop bitmap supplies the ring itself. Clip only its live effects. */
.room[data-composition="desktop"] .rail-effects { clip-path: url(#desktop-rail-visibility); }
.room[data-composition="tablet"] .rail-effects { clip-path: url(#tablet-rail-visibility); }
.courier { visibility: hidden; }
.room[data-ready] .courier { visibility: visible; }
.rail-signal { stroke: #ffd2a1; stroke-width: 2; stroke-dasharray: 3 10; opacity: 0; transition: opacity .22s; }
.room[data-rail-lit] .rail-signal { opacity: .65; animation: rail-current .42s linear infinite; }
@keyframes rail-current { to { stroke-dashoffset: -13; } }
.rail-touch { stroke: transparent; stroke-width: 27; pointer-events: none; }
.room[data-ready] .rail-touch { pointer-events: stroke; cursor: pointer; }
.room[data-suspended] *, .room[data-suspended] *::before { animation-play-state: paused !important; }

.spot { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(44px, 5vw, 63px); height: clamp(44px, 5vw, 63px); min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--ink); cursor: pointer; pointer-events: auto; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.spot:active { background: radial-gradient(ellipse, #ffe1a731, transparent 65%); }
.studio-nameplate {
  position: absolute;
  z-index: 2;
  left: 13.5%;
  top: 91%;
  width: 41.5%;
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%) skewY(13deg);
}
.spot-wordmark { position: absolute; z-index: 2; height: auto; max-width: none; filter: drop-shadow(0 2px 4px #0e091dc9); }
.spot--door .spot-wordmark { top: 50%; right: calc(50% + clamp(16px, 4.8vw, 35px)); width: clamp(61px, 11.8vw, 98px); transform: translateY(-50%); }
.spot-wordmark img { display: block; width: 100%; height: auto; pointer-events: none; }
.room[data-ready] .spot--door .spot-wordmark img { animation: doorway-wordmark-drift 6.2s ease-in-out infinite; }
.room[data-ready] .spot--symboloom .spot-wordmark img { animation: symboloom-wordmark-drift 7.5s 1s ease-in-out infinite; }
@keyframes doorway-wordmark-drift { 50% { translate: 0 -4px; rotate: -.65deg; } }
@keyframes symboloom-wordmark-drift { 46% { translate: 1.6px -3px; } 76% { translate: -1px -1px; } }
.spot--scope { --x: 40.2%; --y: 22.6%; width: 14%; height: 16%; }
.spot--door { z-index: 3; --x: 26.7%; --y: 47.8%; width: 13%; height: 29%; }
.spot--radio { --x: 74.1%; --y: 50.8%; width: 15%; height: 18%; }
.spot--emblem { --x: 50.5%; --y: 50%; width: 19%; height: 29%; }
.spot--symboloom { --x: 31%; --y: 79%; width: 8.5%; height: 7%; border-radius: 10px; }
.spot--symboloom .spot-wordmark { top: calc(50% + clamp(10px, 1.7vw, 24px)); left: 50%; width: clamp(116px, 11.5vw, 145px); transform: translateX(-50%); filter: brightness(0) invert(1) drop-shadow(0 2px 4px #0e091dc9); }
.spot--rail { --x: 12%; --y: 82.5%; }

.scroll-cue { display: none; }
.bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(44px, auto);
  gap: 7px 12px;
  padding-block-start: 12px;
  border-bottom: 1px solid var(--rule);
}
.room-note {
  display: grid;
  grid-area: 1 / 1 / 2 / -1;
  justify-self: start;
  align-content: end;
  max-inline-size: 100%;
  block-size: 1lh;
  margin: 0;
  color: #cdbddc;
  font: 500 14px/1.35 "Bitcount Prop Single", var(--mono);
}
.room-note > span {
  display: flex;
  gap: 7px;
  text-wrap: balance;
}
.room-note > span::before {
  content: "";
  align-self: start;
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin-block-start: calc((1lh - 4px) / 2);
  background: #dcb18d;
}
.motion-control { grid-area: 2 / 2; min-height: 44px; padding: 0 3px; border: 0; background: transparent; color: var(--dim); font-size: 12px; cursor: pointer; }
.motion-control:hover { color: var(--brass); }

@media (max-width: 1180px) {
  .room-note { font-size: 13px; }
}

.worlds { padding-block: clamp(46px, 8vw, 105px) clamp(44px, 6vw, 80px); }
.worlds h2, .studio h2, .dock h2 { margin-block: 8px 21px; font: 500 clamp(37px, 5vw, 72px)/1 var(--serif); letter-spacing: -.057em; }
.record { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(22px, 5vw, 76px); align-items: start; }
.record-copy { align-self: center; }
.roadmap-art { margin: 0; border-radius: 8px; }
.project-art { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #1c142b; box-shadow: 0 16px 44px #09061378; }
.project-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 37%, #e2c4ff35 49%, transparent 62%); opacity: 0; }
.record[data-arrived] .project-art::after { animation: transmission .9s ease-out both; }
@keyframes transmission { 0% { translate: -70% 0; opacity: 0; } 25% { opacity: 1; } 100% { translate: 70% 0; opacity: 0; } }
.project-art > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 29%; }
.project-wordmark { position: absolute; z-index: 1; inset: 7% auto auto 6.5%; width: 29%; height: auto; filter: drop-shadow(0 2px 7px #2816559e); pointer-events: none; }
.record-copy .game-intro { max-width: 35ch; font-size: clamp(17px, 2vw, 24px); line-height: 1.4; }
.record-copy .game-detail { max-width: 48ch; margin-block: 13px 14px; }
.game-detail, .roadmap p, .app-detail, .studio p:not(.kicker), .contact-invitation > p:not(.kicker), .company p { color: var(--dim); font-size: 15px; line-height: 1.6; }
.record-copy a, .dock a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration-color: #dabaf27e; text-underline-offset: 4px; font-size: 13px; font-weight: 650; }
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 20px; }
.project-links .project-link { padding: 8px 14px; border-radius: 7px; background: var(--brass); color: var(--sky); font-size: 15px; font-weight: 720; text-decoration: none; }
.project-links .project-link:hover { background: var(--ink); }
.roadmap-link { color: var(--violet); }
.roadmap { margin-top: clamp(34px, 6vw, 78px); }
.roadmap h3, .planned-app h3 { font: 500 clamp(26px, 3vw, 40px)/1.15 var(--serif); letter-spacing: -.038em; }
.roadmap h3 { width: fit-content; }
.roadmap ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; padding: 0; list-style: none; }
.roadmap li { position: relative; padding: 20px clamp(16px, 4vw, 56px) 0 0; border-top: 1px solid var(--rule); }
.roadmap li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border: 1px solid #bb9bd5; border-radius: 50%; background: var(--sky); }
.roadmap li[aria-current]::before { background: var(--brass); border-color: var(--brass); box-shadow: 0 0 12px #ffbb8c80; }
.roadmap h4 { margin-bottom: 5px; font-size: 15px; font-weight: 650; }
.planned-app { margin-top: clamp(34px, 6vw, 67px); padding-block: clamp(27px, 4vw, 52px); border-block: 1px solid var(--rule); }
.app-heading { display: flex; align-items: center; gap: clamp(18px, 4vw, 40px); }
.planned-app h3 { margin-top: 4px; }
.app-intro { margin-top: 9px; font-size: 18px; }
.app-detail { max-width: 44ch; margin-top: 7px; }
.symbol-samples { display: flex; align-items: center; flex-shrink: 0; gap: clamp(4px, 1vw, 9px); min-height: 44px; padding: 0 3px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background-color .18s ease; }
.symbol-samples:disabled { cursor: default; }
.symbol-samples:not(:disabled):is(:hover, :focus-visible) { background-color: #d9b9ff12; }
.symbol-samples img { width: clamp(28px, 4vw, 39px); height: auto; aspect-ratio: 1; object-fit: contain; }
.studio { display: grid; grid-template-columns: minmax(80px,170px) minmax(0,1fr); column-gap: clamp(18px, 5vw, 67px); align-items: center; padding-block: 26px 60px; }
.studio > img { grid-row: span 2; width: 82%; height: auto; margin-inline: auto; filter: drop-shadow(0 4px 27px #ab85da78); }
.studio p:not(.kicker) { max-width: 52ch; }
.studio p.studio-intro { margin-bottom: 6px; color: var(--ink); font-size: 18px; }
.studio h2 { margin-bottom: 11px; }
.dock { padding-block: 28px 26px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: 14px 24px; }
.dock h2 { margin-bottom: 8px; }
.contact-invitation p { max-width: 39ch; }
.contact-invitation a { color: var(--violet); font-size: clamp(17px, 2vw, 20px); overflow-wrap: anywhere; }
.studio-socials { margin-top: 14px; }
.studio-socials p { margin: 0; color: var(--dim); font-size: 13px; font-weight: 600; }
.studio-socials ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.studio-socials a { font-size: 14px; }
.studio-socials a:hover { color: var(--ink); }
.studio-socials svg { width: 15px; height: 15px; flex: none; }
.dock .back { color: var(--violet); font-size: 12px; }
.company { align-self: end; justify-self: end; }
.company strong { font-size: 14px; }
.company p { color: #beb2cb; font-size: 13px; }
.company p + p { margin-top: 7px; }

@media (max-width: 760px) {
  .room { width: calc(100% + 29px); margin-inline: -14.5px; margin-block-start: 14px; }
  .stage { transform: translate3d(clamp(-3px, var(--pan-x, 0px), 3px), var(--pan-y, 0px), 0); }
  .spot--symboloom .spot-wordmark { width: clamp(84px, 23vw, 106px); }
  .record { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 480px) {
  .mast nav a { font-size: 12px; }
  .opening h1 { font-size: clamp(40px, 10.9vw, 53px); }
  .roadmap { margin-top: 30px; }
  .roadmap ol { grid-template-columns: 1fr; margin: 16px 0 0 5px; }
  .roadmap li { padding: 0 0 14px 16px; border-top: 0; border-left: 1px solid var(--rule); }
  .roadmap li:last-child { padding-bottom: 0; }
  .roadmap li::before { top: 4px; left: -5px; }
}

@media (max-width: 600px) {
  :root {
    /* Size the scene for the toolbar-open viewport so scrolling never rescales it. */
    --hero-height: 100svh;
    --hero-top-inset: env(safe-area-max-inset-top, env(safe-area-inset-top, 0px));
    --hero-bottom-space: max(10px, env(safe-area-max-inset-bottom, 0px));
    --hero-extra-space: clamp(0px, calc(var(--hero-height) - 680px), 30px);
  }
  .mast {
    min-height: calc(54px + var(--hero-top-inset));
    padding-top: var(--hero-top-inset);
  }
  .landing {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: calc(var(--hero-height) - 54px - var(--hero-top-inset));
    padding-bottom: var(--hero-bottom-space);
  }
  .opening { padding-top: calc(15px + var(--hero-extra-space) * 7 / 30); }
  .intro { margin-top: calc(8px + var(--hero-extra-space) / 15); }
  .room {
    --room-budget: calc(286px + var(--hero-extra-space) / 5);
    width: calc(100% + max(36px, 8vw));
    max-width: calc((var(--hero-height) - var(--room-budget) - var(--hero-top-inset) - var(--hero-bottom-space)) * .8);
    min-width: min(100%, calc(220px + var(--hero-extra-space) * 2));
    aspect-ratio: 1122 / 1402;
    margin: calc(3px + var(--hero-extra-space) / 6) 0 calc(3px - var(--hero-extra-space) / 10);
    justify-self: center;
    align-self: center;
  }
  .sky-constellation { top: 3%; left: 79%; width: clamp(82px, 27vw, 126px); }
  .satellite { --journey-x: .61; --journey-y: .65; }
  .satellite--observatory {
    --satellite-x: 11%;
    --satellite-y: 27%;
    --satellite-size: clamp(44px, 12%, 60px);
    --journey-x: .95;
    --journey-y: 1.10;
  }
  .satellite--invention {
    --satellite-x: calc(100% - clamp(40px, 12.7vw, 58px));
    --satellite-y: calc(82% + clamp(0px, calc((var(--hero-height) - 620px) / 8), 15px));
    --satellite-size: clamp(63px, 20%, 86px);
    --journey-x: -.44;
  }
  .stage { inset: 0; transform: none; }
  .map { mask: none; }
  .map-telescope, .emblem-socket, .radio-lamp, .distant-stars { display: none; }
  .room[data-ready] .stage { animation-duration: 9s; }
  .room { --light-x: 51%; --light-y: 52%; }
  .spot--scope { --x: 44%; --y: 18%; width: 40%; height: 25%; }
  .spot--door { --x: 27.5%; --y: 52%; width: 21%; height: 22%; }
  .spot--door .spot-wordmark { top: calc(110% - clamp(15px, 4.6vw, 22px)); left: 52%; right: auto; width: clamp(65px, 20vw, 89px); transform: translateX(-50%); }
  .spot--radio { --x: 76%; --y: 55%; width: 22%; height: 15%; }
  .studio-nameplate {
    left: 7%;
    top: 84%;
    width: max(42px, 59%);
    transform: translate(-50%, -50%) skewY(8deg);
  }
  .spot--emblem { --x: 51%; --y: 46%; width: 23%; height: 17%; }
  .spot--symboloom { --x: 43%; --y: 74.5%; width: 20%; height: 8%; }
  .spot--symboloom .spot-wordmark { top: 107%; left: 50%; width: clamp(85px, 22vw, 101px); }
  .rail-effects { clip-path: url(#phone-rail-visibility); }
  .rail-signal { stroke-width: 3.2; stroke-dasharray: 4 9; }
  .spot--rail { --x: 25%; --y: 77%; }
  .bench { align-self: end; padding-block-start: 5px; }
  .room-note { font-size: clamp(11px, 3.1vw, 12px); }
  /* Leave room for the first swipe that retracts the browser chrome. */
  .worlds { padding-block-start: max(46px, calc(100lvh - var(--hero-height) + max(38px, var(--hero-bottom-space)))); }
  .studio { grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; padding-bottom: 36px; }
  .studio > img { grid-row: auto; width: 100%; }
  .studio h2 { margin-block: 0; }
  .studio-copy { grid-column: 1 / -1; padding-top: 13px; }
  .dock { grid-template-columns: 1fr; gap: 10px; padding-bottom: 20px; }
  .company { justify-self: stretch; padding-top: 14px; border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) and (max-height: 620px) {
  .satellite--observatory { --journey-y: .90; }
}
@media (max-width: 340px) {
  .opening h1 { font-size: 38px; }
  .studio h2 { font-size: 35px; }
}
@media (min-width: 601px) and (max-width: 1180px) {
  .satellite--invention { --satellite-size: clamp(58px, 11.6%, 118px); }
}
@media (min-width: 601px) and (max-width: 1180px) and (orientation: portrait) {
  .sky-constellation { top: 5%; left: 74%; width: clamp(120px, 21%, 190px); }
  .satellite--observatory { --satellite-x: 12%; --satellite-y: 34%; }
  .satellite--invention {
    /* Clear the painted lower-right stone edge throughout the idle drift. */
    --satellite-x: min(93%, calc(100% - var(--satellite-size) / 2 - 12px));
    --satellite-y: 87%;
  }
  .room { width: min(100%, 900px); aspect-ratio: 1374 / 1145; margin: 14px auto 0; --light-x: 49%; --light-y: 55%; }
  .map { mask: none; }
  .map-telescope, .emblem-socket, .radio-lamp, .distant-stars { display: none; }
  .spot--scope { --x: 34%; --y: 23%; width: 32%; height: 25%; }
  .spot--door { --x: 24%; --y: 56%; width: 19%; height: 29%; }
  .spot--door .spot-wordmark { top: 96%; left: 50%; right: auto; width: clamp(80px, 12vw, 110px); transform: translateX(-50%); }
  .spot--radio { --x: 76%; --y: 55%; width: 18%; height: 17%; }
  .studio-nameplate {
    left: 17%;
    top: 73%;
    width: 60%;
    transform: translate(-50%, -50%) skewY(11deg);
  }
  .spot--emblem { --x: 49%; --y: 47%; width: 22%; height: 21%; }
  .spot--symboloom { --x: 40%; --y: 77%; width: 14%; height: 8%; }
  .spot--symboloom .spot-wordmark { top: 106%; width: 114px; }
  .spot--rail { --x: 27%; --y: 83%; }
}
@media (min-width: 601px) and (max-width: 1180px) and (orientation: landscape) {
  .room { width: 100%; max-width: clamp(680px, calc((100svh - 300px) * 1.776), 1050px); margin-top: -10px; }
}
/* Let the portrait artwork and its controls fill a stable first screen. */
@media (min-width: 601px) and (max-width: 1180px) and (orientation: portrait) and (any-pointer: coarse) {
  .landing {
    /* Distribute extra room on tall screens while keeping the shorter layouts compact. */
    --portrait-space: clamp(0px, calc(100svh - 122vw), 220px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-block-size: calc(100svh - 68px);
    padding-block-end: calc(clamp(14px, 2svh, 24px) + var(--portrait-space) * .24);
  }
  .opening { padding-block-start: calc(clamp(34px, 5svh, 64px) + var(--portrait-space) * .14); }
  .opening h1 { font-size: clamp(46px, min(7.5vw, 6svh), 78px); }
  .opening h1 span, .opening h1 em { display: block; }
  .room {
    width: min(calc(100% + 20px), 960px);
    margin-block: calc(clamp(-32px, -3.7vw, -22px) - var(--portrait-space) * .12)
                  calc(clamp(-51px, -5.8vw, -34px) + var(--portrait-space) * .12);
    margin-inline: 0;
    place-self: center;
  }
  .bench { padding-block-start: 6px; }
  .satellite--observatory { --satellite-x: 14%; --satellite-y: 35%; }
  .worlds {
    padding-block-start: max(clamp(36px, 4.8vw, 54px), calc(100lvh - 100svh + 22px));
  }
}
@media (max-width: 600px), (min-width: 601px) and (max-width: 1180px) and (orientation: portrait) and (any-pointer: coarse) {
  .scroll-cue { grid-area: 2 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--violet); font-size: 13px; text-underline-offset: 4px; }
}
/* The wide artwork already has the right proportions for tablet landscape. */
@media (min-width: 1280px) and (max-width: 1366px) and (min-height: 620px) and (orientation: landscape) and (any-pointer: coarse) {
  .worlds { padding-block-start: 68px; }
}
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 620px) and (orientation: landscape) and (any-pointer: coarse) {
  .room {
    width: min(100%, clamp(680px, calc((100svh - 300px) * 1.776), 1050px));
    margin-block: clamp(-34px, calc(44px - 6vw), -16px) -19px;
  }
  .bench { padding-block-start: 6px; }
  .worlds { padding-block-start: clamp(40px, 4.2vw, 56px); }
}
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 620px) and (max-height: 780px) and (orientation: landscape) and (any-pointer: coarse) {
  .worlds { padding-block-start: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
:root[data-motion-paused] { scroll-behavior: auto; }
:root[data-motion-paused] *, :root[data-motion-paused] *::before, :root[data-motion-paused] *::after { animation: none !important; transition: none !important; }

.island-flight-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.room[data-island-invitation="travel"] .rail-signal { stroke: #ffdfa1; }
.island-arrival-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
/* Contours in percentages of the original 360×436 and 400×537 artwork. */
[data-satellite="observatory"] {
  --arrival-mask: polygon(50.3% 15.6%, 55.8% 22.7%, 54.4% 27.3%, 50.3% 31.3%, 46.1% 26.6%, 44.7% 22.7%);
  --arrival-fill:
    radial-gradient(ellipse 4.7% 7.5% at var(--arrival-x) var(--arrival-y), #fff0adef, #ffb947bf 48%, #d78c3859 87%, transparent),
    var(--island-art) center / 100% 100% no-repeat;
}
[data-satellite="invention"] {
  --arrival-mask: polygon(42.7% 42.5%, 46.6% 42.7%, 50% 45.3%, 51.3% 49%,
    50.2% 52.5%, 46.4% 54.6%, 42% 54.3%, 38.6% 51.9%, 37.2% 48.4%, 38.7% 44.9%);
  --arrival-fill: radial-gradient(ellipse 8.5% 7% at var(--arrival-x) var(--arrival-y),
    #fff4b3, #ffd673f2 38%, #d99930ea 71%, #aa62279c 91%, transparent);
}
.island-arrival-light::before, .island-arrival-crystal, .island-arrival-sweep {
  position: absolute;
  inset: 0;
  clip-path: var(--arrival-mask);
}
[data-satellite="invention"] .island-arrival-light::before {
  content: "";
  background: var(--arrival-fill);
}
.island-arrival-crystal {
  transform-origin: var(--arrival-x) var(--arrival-y);
  background: var(--arrival-fill);
  background-blend-mode: screen;
}
.island-arrival-sweep {
  opacity: 0;
  background: linear-gradient(112deg, transparent 45%, #fff8d2aa 50%, #ffe3a429 56%, transparent 59%) 130% 0 / 178% 100%;
  mix-blend-mode: screen;
}
[data-satellite="invention"] .island-arrival-light::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(46.6% 40.9%, 49.6% 42.2%, 52.1% 45%, 53.2% 49.7%, 52.5% 51.6%,
    51.4% 49.7%, 50.4% 45.7%, 48.4% 43.8%, 46.1% 42.8%);
  background: radial-gradient(ellipse 4.3% 5.8% at 49.1% 44.4%, #fff0aaa6, #ffcc6c4d 69%, transparent);
}

.island-arrival-target {
  position: absolute;
  left: var(--arrival-x);
  top: var(--arrival-y);
  translate: -50% -50%;
  width: 1px;
  height: 1px;
}
@media (hover: hover) and (pointer: fine) {
  [data-island-lit]:hover .island-arrival-light::before { filter: brightness(1.2); }
}
[data-island-lit]:focus-visible .island-arrival-light::before { filter: brightness(1.15); }
[data-island-lit="still"] .island-arrival-light { opacity: .68; }
.island-arrival-accent { position: absolute; inset: 0; opacity: 0; }
[data-island-lit="halo"] .island-arrival-accent {
  inset: auto;
  left: var(--arrival-x);
  top: var(--arrival-y);
  width: 14%;
  height: 17%;
  translate: -50% -50%;
  border-radius: 50%;
  border: .7px solid #ffdda378;
}
:is([data-island-lit="crystal"], [data-island-lit="tilt"], [data-island-lit="pressure"],
    [data-island-lit="shimmer"], [data-island-lit="wobble"]) .island-arrival-accent {
  clip-path: var(--arrival-mask);
  background: linear-gradient(107deg, transparent 44%, #fff2c9ac 50%, #ffd59053 52%, transparent 56%);
  background-size: 185% 100%;
  mix-blend-mode: screen;
}
[data-island-lit="crystal"] .island-arrival-accent {
  background-image: radial-gradient(ellipse 6% 8% at 51% 24%, #fff1bcb0, #ffd58c56 54%, transparent);
}
[data-island-lit="pressure"] .island-arrival-accent {
  background-image: repeating-linear-gradient(14deg, transparent 0 3px, #ffe6ae7c 4px, transparent 6px);
}
[data-island-lit="stars"] .island-arrival-accent { opacity: 1; }
.island-arrival-stars {
  position: absolute;
  bottom: 76%;
  left: var(--arrival-x);
  translate: -50% 0;
  width: clamp(13px, 23%, 29px);
  overflow: visible;
  opacity: 0;
}
.island-arrival-bubble {
  position: absolute;
  left: 38%;
  top: 19%;
  width: clamp(21px, 5.6vw, 27px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: .7px solid #f1d2ffd9;
  border-radius: 49% 51% 50% 50% / 52% 50% 50% 48%;
  background:
    radial-gradient(ellipse at 26% 26%, #fff8e8e8 0 5%, #ffdaac52 12%, transparent 22%),
    radial-gradient(ellipse at 76% 78%, #aff1ded9 0 5%, #a1c3f474 13%, transparent 26%),
    radial-gradient(circle, #dcbdff10 42%, #eab9f56e 73%, #9c83e4bb);
  box-shadow: inset 0 0 4px #f3cae267;
  pointer-events: none;
  opacity: 0;
}