:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080808;color:#eef4ff}
body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
#experience{position:fixed;inset:0;overflow:hidden;background:radial-gradient(ellipse 76% 70% at 50% 79%,#0f0f0f 0%,#090909 50%,#050505 100%)}
/* Fullscreen visual stack: every panorama renders to the ENTIRE viewport.
   Captions are composited ABOVE BOTH the pano and particle effects. */
#visual-stage{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;pointer-events:none;z-index:0}
#world-host{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;clip-path:circle(0 at 50% 50%);will-change:clip-path}
#canvas-host{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
#world-host canvas,#canvas-host canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#world-host .panorama-canvas{opacity:0;transition:opacity .35s linear}
body.panorama-ready #world-host .panorama-canvas{opacity:1}
/* On top of EVERYTHING: no reserved band and no reduced panorama viewport. */
#lyric-layer{position:fixed;z-index:100;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;padding:0 clamp(22px,5vw,92px) clamp(44px,8.5vh,108px)}
#lyric-layer::before{content:'';position:absolute;z-index:-1;bottom:0;left:0;right:0;height:35vh;pointer-events:none;background:linear-gradient(to top,rgba(8,8,8,.73),rgba(8,8,8,.18) 47%,transparent)}
#lyric-block{max-width:min(1350px,94vw);width:100%;text-align:center;font-size:clamp(28px,3.7vw,64px);line-height:1.13;font-weight:500;letter-spacing:-.03em;text-wrap:balance;color:#e7e4dc;text-shadow:0 2px 7px rgba(0,0,0,.95),0 8px 30px #000,0 0 65px #000;opacity:0;transform:translateY(8px);filter:blur(3px);transition:opacity .16s ease,transform .16s ease,filter .16s ease;white-space:pre-wrap}
#lyric-block.visible{opacity:1;transform:translateY(0);filter:blur(0)}
#boot-gate{position:fixed;inset:0;z-index:50;background:#080808;opacity:1;transition:opacity .65s ease;pointer-events:auto}
#boot-gate.dismissed{opacity:0;pointer-events:none}
@media(max-width:700px){#lyric-layer{padding:0 18px 7vh}#lyric-block{font-size:clamp(24px,6vw,41px)}}
@media(max-height:600px){#lyric-layer{padding-bottom:4.5vh}#lyric-block{font-size:clamp(22px,3.4vw,43px)}}
@media(prefers-reduced-motion:reduce){#lyric-block{filter:none;transition:opacity .12s}#boot-gate{transition:opacity .15s}}
/* Always-on cinematic vignette. Circular falloff; lyrics and logo are above it. */
#vignette{
 position:fixed;inset:0;z-index:120;pointer-events:none;
 background:radial-gradient(circle at 50% 49%,
  rgba(0,0,0,0) 0,
  rgba(0,0,0,.03) 20vmin,
  rgba(0,0,0,.22) 39vmin,
  rgba(0,0,0,.66) 67vmin,
  rgba(0,0,0,.96) 105vmin);
}
/* Lyrics are above every scene effect, while the brand is the absolute top layer. */
#lyric-layer{z-index:800}
#brand-logo{
 position:fixed;left:50%;top:clamp(6px,1.5vh,20px);transform:translateX(-50%);
 z-index:2000;width:min(37.5vw,487.5px);max-height:20.25vh;height:auto;
 object-fit:contain;object-position:top center;
 pointer-events:none;user-select:none;-webkit-user-drag:none;
 filter:drop-shadow(0 5px 16px rgba(0,0,0,.85)) drop-shadow(0 0 24px rgba(0,0,0,.55));
}
/* No visible controls; pointer cursor is the only indication that the open panorama can be dragged. */
#experience.drag-ready{cursor:grab;touch-action:pan-y}
#experience.dragging-world{cursor:grabbing;touch-action:none}
@media(max-width:700px){#brand-logo{width:min(63vw,375px);top:clamp(6px,1.2vh,14px);max-height:17.25vh}}

/* START and subscription are separate states. Logo remains the highest z-index. */
#brand-logo{z-index:2000}
#start-screen,#subscribe-screen{position:fixed;inset:0;z-index:1250;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(22px,5vw,72px);text-align:center;transition:opacity .38s ease,visibility .38s ease;visibility:hidden;opacity:0;pointer-events:none}
#start-screen.visible,#subscribe-screen.visible{visibility:visible;opacity:1;pointer-events:auto}
#start-screen{background:radial-gradient(ellipse 55% 58% at 50% 50%,rgba(8,8,8,.36),rgba(8,8,8,.67) 65%,rgba(8,8,8,.90) 100%)}
#subscribe-screen{background:radial-gradient(ellipse 65% 75% at 50% 50%,rgba(8,8,8,.64),rgba(8,8,8,.86) 80%,rgba(8,8,8,.93) 100%)}
.metallic-text{color:#e7dfd2;background:linear-gradient(105deg,#85898e 0%,#c4c6c9 20%,#f1eee8 43%,#e1bb74 68%,#b78032 88%,#eee0bf 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#start-button{font:600 clamp(32px,5vw,66px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:.28em;text-indent:.28em;padding:20px 36px;border:0;background:none;cursor:pointer;text-shadow:none;filter:drop-shadow(0 2px 11px rgba(0,0,0,.8));transition:filter .2s ease,transform .2s ease}
#start-button:hover{filter:drop-shadow(0 0 19px rgba(205,151,64,.45));transform:scale(1.035)}
#start-button:focus-visible{outline:2px solid #d6a45c;outline-offset:5px}
#start-button[disabled]{opacity:.65;cursor:progress}
#start-message{margin-top:13px;min-height:1.5em;color:#c4b8a8;font:12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.06em}
#lyric-block{color:#e7e4dd;background:linear-gradient(96deg,#a2a4a6 0%,#f1f1ee 30%,#f9f7f1 55%,#dda85b 83%,#e7c68a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 8px rgba(0,0,0,.95));}
#lyric-block.visible{filter:drop-shadow(0 3px 8px rgba(0,0,0,.95))}
#subscribe-title{font:600 clamp(27px,4.4vw,59px)/1.13 Arial,Helvetica,sans-serif;letter-spacing:-.018em;max-width:860px;margin:0 auto 15px}
#subscribe-copy{font:400 clamp(14px,1.55vw,20px)/1.55 Arial,Helvetica,sans-serif;color:#c5beb3;max-width:570px;margin:0 auto 22px}
#subscribe-form{display:flex;gap:10px;width:min(620px,100%);justify-content:center;align-items:stretch}
#subscribe-email{min-width:0;flex:1;color:#f5f0e7;border:1px solid #645342;border-radius:8px;padding:15px 16px;background:rgba(18,18,18,.88);font:16px Arial,Helvetica,sans-serif}
#subscribe-email:focus-visible{outline:2px solid #c89443;outline-offset:2px}
#subscribe-button{color:#161616;background:linear-gradient(120deg,#e2c08b,#c88e36);border:0;border-radius:8px;padding:14px 22px;cursor:pointer;font:700 12px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.12em}
#subscribe-button:disabled{opacity:.5;cursor:wait}
#subscribe-status{min-height:26px;font:13px/1.6 Arial,Helvetica,sans-serif;margin-top:15px;color:#dec79d;max-width:550px}
#subscribe-status.error{color:#e9a3a3}
#subscribe-status.success{color:#d0c9bb}
@media(max-width:640px){#subscribe-form{flex-direction:column}#subscribe-button{min-height:46px}#subscribe-screen{padding-top:120px}#subscribe-title{font-size:clamp(26px,8vw,42px)}}

/* ── PRE-START ONLY: independent diagnostics overlay and lower START position.
   The logo, lyrics, aperture, world switching and audio timing are untouched. ── */
#start-screen {
  justify-content:flex-end;
  padding-bottom:clamp(24px,5.2vh,64px);
  background:radial-gradient(ellipse 56% 58% at 50% 48%,
    rgba(8,8,8,.02) 0%,
    rgba(8,8,8,.11) 60%,
    rgba(8,8,8,.45) 100%);
}
#start-button {
  font-size:clamp(29px,3.7vw,55px);
  padding:12px 30px;
  /* Override the legacy background:none rule, which hid metallic START text. */
  background:linear-gradient(105deg,#8b8d91 0%,#d1d3d5 26%,#f3f0e9 44%,#e4bf7f 66%,#bd8535 86%,#f0dfba 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  z-index:1;
}
#start-button::after {
  content:"";
  position:absolute;
  left:30%;right:30%;height:1px;bottom:4px;
  background:linear-gradient(90deg,transparent,#b38849,transparent);
  transition:left .3s ease,right .3s ease;
}
#start-button:hover::after,#start-button:focus-visible::after{left:22%;right:22%}
#start-message:empty{display:none}
#start-message{margin-top:7px}

#prestart-telemetry {
  position:fixed;
  inset:0;
  z-index:1330; /* above the START screen tint, below the unmodified logo at 2000 */
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .52s ease,visibility .52s ease;
  font-family:Consolas,"SFMono-Regular","Liberation Mono",monospace;
  letter-spacing:.045em;
  color:#b5b6b6;
  isolation:isolate;
}
#prestart-telemetry.is-active {opacity:1;visibility:visible}
#prestart-telemetry .telemetry-leaders {
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  opacity:.78;pointer-events:none;
}
#prestart-telemetry .telemetry-path {stroke:#737575;stroke-width:.75;fill:none;opacity:.7;vector-effect:non-scaling-stroke}
#prestart-telemetry .telemetry-signal {fill:#c9964c;opacity:.9}
#prestart-telemetry .telemetry-readout {
  position:absolute;
  width:clamp(135px,12.5vw,205px);
  padding:5px 9px 7px 12px;
  border-left:1px solid rgba(190,194,197,.23);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .54s ease,transform .54s ease,left .9s ease,top .9s ease;
  text-align:left;
  text-shadow:0 1px 7px #070707,0 3px 13px #0b0b0b;
  background:linear-gradient(90deg,rgba(8,8,8,.36),transparent);
  will-change:opacity,transform;
}
#prestart-telemetry .telemetry-readout.is-shown {opacity:1;transform:translateY(0)}
#prestart-telemetry .telemetry-readout::before {
  content:"";position:absolute;left:-2px;top:7px;width:3px;height:13px;
  background:#b89456;box-shadow:0 0 9px rgba(207,153,69,.38);
  opacity:.65;animation:air-signal 3.4s ease-in-out infinite;
}
#prestart-telemetry .telemetry-key {
  color:#bcbfc2;font-size:clamp(9px,.67vw,11px);
  font-weight:600;white-space:nowrap;line-height:1.35;
}
#prestart-telemetry .telemetry-value {
  color:#b69a70;font-size:clamp(8px,.59vw,10px);
  line-height:1.6;white-space:nowrap;
}
#prestart-telemetry .telemetry-byte {
  display:block;color:#666b6d;font-size:clamp(7px,.47vw,9px);
  line-height:1.4;white-space:nowrap;
}
@keyframes air-signal{0%,100%{opacity:.35;box-shadow:0 0 3px rgba(207,153,69,.15)}46%{opacity:.95;box-shadow:0 0 13px rgba(207,153,69,.6)}}
@media(max-width:800px){
 #prestart-telemetry .telemetry-readout{width:min(37vw,158px);padding:4px 4px 6px 8px}
 #prestart-telemetry .telemetry-key{font-size:8px;letter-spacing:0}
 #prestart-telemetry .telemetry-value{font-size:7px;letter-spacing:0}
 #prestart-telemetry .telemetry-byte{display:none}
 #start-screen{padding-bottom:clamp(18px,4.7vh,52px)}
 #start-button{font-size:clamp(30px,7.6vw,46px)}
}
@media(prefers-reduced-motion:reduce){
 #prestart-telemetry .telemetry-readout::before{animation:none}
 #prestart-telemetry .telemetry-readout{transition:opacity .15s ease}
}

/* Cinematic SKIP: only visible after START, disappears at the subscription screen. */
#skip-button{
 position:fixed;right:clamp(16px,3.3vw,58px);bottom:clamp(15px,3.3vh,39px);
 z-index:1370;pointer-events:none;visibility:hidden;opacity:0;
 padding:11px 15px;border:1px solid rgba(199,172,117,.36);border-radius:3px;
 background:linear-gradient(115deg,rgba(20,20,20,.53),rgba(8,8,8,.75));
 color:#d4bf99;font:500 10px/1.2 Consolas,"SFMono-Regular",monospace;
 letter-spacing:.24em;cursor:pointer;transition:opacity .3s ease,border-color .2s ease,visibility .3s ease;
 backdrop-filter:blur(7px);
}
#skip-button span{font-size:17px;color:#dfb675;vertical-align:-1px;margin-left:6px}
#skip-button.visible{visibility:visible;opacity:.68;pointer-events:auto}
#skip-button.visible:hover,#skip-button.visible:focus-visible{opacity:1;border-color:rgba(229,190,124,.8)}
#skip-button:focus-visible{outline:2px solid #c9954d;outline-offset:3px}
@media(max-width:640px){#skip-button{right:12px;bottom:14px;padding:9px 12px;font-size:9px}}

/* Sphere-to-START interaction: the pre-start scene stays visually clean until engaged. */
#start-screen.visible:not(.sphere-activated) #start-button,
#start-screen.visible:not(.sphere-activated) #start-message {
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
#start-screen.visible.sphere-activated #start-button {
  opacity:1;visibility:visible;pointer-events:auto;
  animation:air-start-unlock .42s ease-out both;
}
@keyframes air-start-unlock{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
/* Entire visible SKIP footprint responds instantly, not just the chevron. */
#skip-button {
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-width:104px;min-height:45px;touch-action:manipulation;user-select:none;
}
#skip-button>*{pointer-events:none}
@media(max-width:640px){#skip-button{min-width:95px;min-height:45px}}