: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: 30px;
  height: 30px;
  pointer-events: none;
  border: 1px solid #e8bcfccc;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe1ac 0 5%, transparent 8%);
  box-shadow: 0 0 14px #b880dd80, inset 0 0 7px #e5b3f25c;
  transform: translate(-50%, -50%) scale(.35);
  animation: sky-ripple .78s cubic-bezier(.2,.65,.25,1) both;
}
@keyframes sky-ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(2.7); } }
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 - 280px) * 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);
  --satellite-brightness: .91;
  --satellite-saturation: .86;
  --journey-x: .9;
}
.satellite--greenhouse {
  display: none;
  --satellite-brightness: .87;
  --satellite-saturation: .82;
}
.satellite--invention {
  --satellite-x: 89%;
  --satellite-y: 82%;
  --satellite-size: clamp(50px, 10%, 108px);
  --satellite-brightness: .82;
  --satellite-saturation: .77;
  --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;
  -webkit-tap-highlight-color: transparent;
}
.satellite-object img {
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: saturate(var(--satellite-saturation)) brightness(var(--satellite-brightness)) contrast(.96);
}
.satellite-light, .satellite-bubble, .satellite-crystal {
  position: absolute;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
}
.satellite-light {
  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;
}
.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--greenhouse .satellite-light {
  --light-x: 47%;
  --light-y: 44%;
  --light-width: 68%;
  --light-height: 58%;
  --light-fill:
    radial-gradient(ellipse at 43% 41%, #fff5c9f0, #ffc26f80 17%, transparent 38%),
    radial-gradient(ellipse at 52% 52%, #ffd58c8c, #ff9d4873 37%, transparent 70%);
}
.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; }

@media (min-width: 1280px) {
  .satellite--invention {
    --satellite-x: 13%;
    --satellite-y: 27%;
    --satellite-size: clamp(70px, 8%, 102px);
    --journey-x: 1;
    --journey-y: 1;
  }
  .satellite--greenhouse {
    display: block;
    --satellite-x: 92%;
    --satellite-y: 24%;
    --satellite-size: clamp(60px, 6.3%, 86px);
  }
  .satellite--observatory {
    --satellite-x: 90%;
    --satellite-y: 76%;
    --satellite-size: clamp(109px, 11%, 147px);
    --journey-x: .64;
  }
}
@media (min-width: 1280px) and (max-width: 1599px) {
  .satellite--observatory { --journey-y: .88; }
}
@media (min-width: 1280px) and (max-height: 850px) {
  .satellite--observatory { --journey-y: .71; }
}
@media (min-width: 1280px) and (max-height: 690px) {
  .satellite--greenhouse { --satellite-y: 32%; }
  .satellite--observatory { --journey-y: .28; }
}
@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%), #ffdca86e, #ff9d682a 12%, transparent 29%); 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; }
.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 #ffd8a77a); }
.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 { opacity: .39; transition: opacity .3s; }
.room[data-ready] .door-clouds { animation: cloud-drift 5.4s ease-in-out infinite alternate; }
@keyframes cloud-drift { from { transform: translate(-13px, 10px); } to { transform: translate(23px, -12px); } }
.room:has(.spot--door:is(:hover,:focus-visible)) .door-atmosphere { opacity: .82; }
.telescope-light, .radio-waves { 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, .room[data-radio-tuned] .radio-waves, .room:has(.spot--radio:is(:hover,:focus-visible)) .radio-waves { opacity: 1; }
.telescope-colour { stop-color: var(--telescope-colour, #dfc6ff); transition: stop-color .42s ease-in-out; }
.radio-lamp { opacity: .62; }
.room[data-ready] .radio-lamp { animation: radio-signal 2.8s ease-in-out infinite alternate; }
.room[data-ready]:has(.spot--radio:is(:hover,:focus-visible)) .radio-waves path { animation: radio-signal 1s ease-in-out 2 alternate; }
.room[data-ready][data-radio-tuned] .radio-waves path { animation: radio-signal .45s ease-in-out 2 alternate; }
.radio-waves path:nth-child(2) { animation-delay: .09s !important; }
.radio-waves path:nth-child(3) { animation-delay: .18s !important; }
@keyframes radio-signal { from { opacity: .28; } to { opacity: 1; } }
.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:is(.spot--door, .spot--radio)::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #fff1d2aa; background: radial-gradient(circle, #fff1d2 0 1.5px, #1710256e 2.5px 100%); box-shadow: 0 0 0 3px #22183b53, 0 0 15px #f9be7d4a; transition: transform .25s, box-shadow .25s; }
.spot:is(.spot--door, .spot--radio):is(:hover,:focus-visible)::before { transform: scale(1.22); box-shadow: 0 0 0 5px #522e6e72, 0 0 21px #f9be7d84; }
.spot:active { background: radial-gradient(ellipse, #ffe1a731, transparent 65%); }
.spot:active::before { transform: scale(.88); }
.spot:is(.spot--door, .spot--radio):is(:hover,:focus-visible)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; translate: -50% -50%; border: 1px solid var(--brass); border-radius: 50%; pointer-events: none; animation: marker-ring .74s ease-out; opacity: 0; }
@keyframes marker-ring { from { scale: .76; opacity: .85; } to { scale: 1.75; opacity: 0; } }
.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--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: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--rule); }
.room-note { display: flex; align-items: baseline; gap: 10px; margin-right: auto; color: var(--dim); font-size: 13px; line-height: 1.5; }
.room-note:not(:empty)::before { content: ""; align-self: center; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 13px #ffbb8c98; }
.motion-control { min-height: 44px; flex-shrink: 0; padding: 0 3px; border: 0; background: transparent; color: var(--dim); font-size: 12px; cursor: pointer; }
.motion-control:hover { color: var(--brass); }

.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; scroll-margin-block-start: -12px; 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 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; }
.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) {
  .mast {
    min-height: calc(54px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .landing {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: calc(100dvh - 54px - env(safe-area-inset-top, 0px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  .opening { padding-top: 22px; }
  .intro { margin-top: 10px; }
  .room {
    width: calc(100% + max(36px, 8vw));
    max-width: calc((100dvh - 260px) * .8);
    min-width: min(100%, 280px);
    aspect-ratio: 1122 / 1402;
    margin: 8px 0 0;
    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(34px, 8.7vw, 57px));
    --satellite-y: 87%;
    --satellite-size: clamp(46px, 12.7%, 62px);
    --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 { position: relative; width: 100%; gap: 10px; align-self: end; }
  .room-note { position: absolute; bottom: 100%; left: 0; max-width: 100%; margin: 0 0 3px; font-size: 12px; pointer-events: none; }
  .scroll-cue { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--violet); font-size: 13px; text-underline-offset: 4px; }
  .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: 700px) {
  .opening { padding-top: 15px; }
  .intro { margin-top: 8px; }
  .room { margin-block: 3px; }
}
@media (max-width: 340px) {
  .opening h1 { font-size: 38px; }
  .studio h2 { font-size: 35px; }
}
@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 { --satellite-x: 89%; --satellite-y: 81%; }
  .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: 1050px; margin-top: -10px; }
}
@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; }