*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#000;color:#f3f5ff;font-family:Arial,Helvetica,sans-serif}#scene{display:block;width:100%;height:100%;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none}#title{position:absolute;left:8%;top:43%;font-weight:200;font-size:clamp(25px,4vw,60px);letter-spacing:.15em;opacity:0;text-shadow:0 2px 25px #000}#datePanel{position:absolute;right:5%;bottom:7%;text-align:right;opacity:0;text-shadow:0 2px 12px #000}#date{font-size:clamp(15px,1.5vw,23px);letter-spacing:.16em;margin:8px 0}#distance,#speed{margin-top:4px}.small{color:#9da9c1;letter-spacing:.27em;font-size:9px}#fade{position:absolute;inset:0;background:black;opacity:1}#error{position:absolute;inset:0;display:grid;place-items:center;padding:30px;background:#030308;color:#fff;text-align:center;white-space:pre-line;font-size:15px}

#error[hidden]{display:none!important}

#startAudio{position:absolute;inset:0;display:grid;place-items:center;background:#000;color:#eaf0ff;pointer-events:auto;text-align:center;z-index:4;font-size:16px}#startAudio[hidden]{display:none!important}#startAudio strong{font-size:34px;letter-spacing:.11em;font-weight:300}#startAudio p{font-size:14px;opacity:.75;letter-spacing:.04em;margin:20px 0}#startButton{border:1px solid #a1acbb;background:#111b2b;color:white;font-size:16px;padding:13px 32px;cursor:pointer;border-radius:6px}#startButton:hover{background:#27344a}


#startAudio{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 78% 34%,rgba(60,90,170,.08),transparent 24%),linear-gradient(180deg,rgba(0,0,0,.44),rgba(0,0,0,.72));color:#eaf0ff;pointer-events:auto;z-index:4;padding:4vw}
#startAudio[hidden]{display:none!important}
.introPanel{width:min(1200px,92vw);display:grid;grid-template-columns:minmax(360px,1.1fr) minmax(280px,.9fr);gap:min(4vw,52px);align-items:center;padding:min(3vw,34px);border:1px solid rgba(170,190,255,.16);background:linear-gradient(180deg,rgba(6,10,20,.70),rgba(5,8,18,.52));box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03);backdrop-filter:blur(8px)}
.introCopy strong{display:block;font-size:clamp(34px,5vw,78px);letter-spacing:.12em;font-weight:300;margin:.1em 0 .2em;text-shadow:0 4px 35px rgba(0,0,0,.48)}
.eyebrow{font-size:11px;letter-spacing:.34em;color:#9dacd2;margin-bottom:14px}
.lead{font-size:clamp(15px,1.45vw,19px);line-height:1.62;color:#f4f7ff}
.introCopy p{font-size:clamp(13px,1.16vw,16px);line-height:1.68;color:#cdd6ea;margin:0 0 16px;max-width:68ch}
.factGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0 24px}
.fact{padding:12px 14px;border:1px solid rgba(142,160,212,.16);background:rgba(255,255,255,.025)}
.fact span{display:block;font-size:10px;letter-spacing:.25em;color:#8ea0c8;margin-bottom:6px}
.fact b{display:block;font-size:13px;letter-spacing:.08em;font-weight:600;color:#f4f7ff}
.introActions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hint{font-size:12px;letter-spacing:.09em;color:#9aa5c0}
#startButton{border:1px solid rgba(164,183,234,.65);background:linear-gradient(180deg,#16233d,#0e182d);color:white;font-size:16px;letter-spacing:.1em;text-transform:uppercase;padding:14px 28px;cursor:pointer;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.32)}
#startButton:hover{background:linear-gradient(180deg,#213154,#111d36)}
#introArt{position:relative;min-height:min(52vw,620px);display:grid;place-items:center;overflow:hidden;border:1px solid rgba(160,180,235,.10);background:radial-gradient(circle at 56% 40%,rgba(56,96,210,.14),transparent 16%),radial-gradient(circle at 70% 34%,rgba(255,255,255,.05),transparent 2px),radial-gradient(circle at 78% 47%,rgba(255,255,255,.04),transparent 1px),radial-gradient(circle at 20% 20%,rgba(255,255,255,.05),transparent 1px),radial-gradient(circle at 25% 65%,rgba(255,255,255,.045),transparent 2px),radial-gradient(circle at 10% 45%,rgba(255,255,255,.03),transparent 1px),linear-gradient(180deg,rgba(3,6,14,.1),rgba(3,6,14,.4))}
#introArt::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(147,176,255,.12) 0 1px,transparent 1.8px);background-size:90px 90px,140px 140px;background-position:18px 12px,46px 58px;opacity:.33}
.introLabel{position:absolute;left:26px;bottom:22px;font-size:12px;letter-spacing:.22em;color:#98a6c8;text-transform:uppercase}

@media (max-width: 640px){.factGrid{grid-template-columns:1fr}.eyebrow{letter-spacing:.24em}.introCopy strong{font-size:40px}#startAudio{padding:16px}}

#introArt{position:relative;min-height:min(52vw,620px);display:grid;place-items:center;overflow:hidden;border:1px solid rgba(160,180,235,.10);background:radial-gradient(circle at 56% 40%,rgba(56,96,210,.14),transparent 16%),radial-gradient(circle at 70% 34%,rgba(255,255,255,.05),transparent 2px),radial-gradient(circle at 78% 47%,rgba(255,255,255,.04),transparent 1px),radial-gradient(circle at 20% 20%,rgba(255,255,255,.05),transparent 1px),radial-gradient(circle at 25% 65%,rgba(255,255,255,.045),transparent 2px),radial-gradient(circle at 10% 45%,rgba(255,255,255,.03),transparent 1px),linear-gradient(180deg,rgba(3,6,14,.08),rgba(3,6,14,.38))}
#introArt::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(147,176,255,.12) 0 1px,transparent 1.8px);background-size:90px 90px,140px 140px;background-position:18px 12px,46px 58px;opacity:.33;pointer-events:none}
#introPreview{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent}
.introGlow{position:absolute;inset:auto 10% 12% auto;width:min(46%,320px);height:min(36%,220px);border-radius:50%;background:radial-gradient(circle,rgba(101,128,255,.12),rgba(70,99,220,.05) 40%,transparent 72%);filter:blur(22px);pointer-events:none}
.introLabel{position:absolute;left:26px;bottom:22px;font-size:12px;letter-spacing:.22em;color:#98a6c8;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.55)}
@media (max-width: 900px){.introPanel{grid-template-columns:1fr;gap:24px;padding:22px}.factGrid{grid-template-columns:1fr 1fr}#introArt{min-height:280px}.introLabel{left:18px;bottom:16px}}

/* Overrides. */
#startAudio{overflow:auto;place-items:start center;padding:min(4vw,40px) 4vw;}
.introPanel{margin:auto 0;max-width:min(1200px,92vw);min-height:min(680px,auto);}
#introArt{min-height:clamp(260px,42vw,620px);}
#introPreview{image-rendering:auto;}
@media (max-height: 900px){#startAudio{padding:20px 4vw}.introPanel{padding:22px}.introCopy p{line-height:1.56}}

/* Info blocks. */
.infoBlocks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.infoCard{padding:16px 16px 14px;border:1px solid rgba(142,160,212,.14);background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}
.infoCard h3{margin:0 0 12px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#f1f5ff}
.infoCard dl{margin:0;display:grid;grid-template-columns:minmax(120px,150px) 1fr;gap:8px 12px}
.infoCard dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#91a2c8;align-self:start}
.infoCard dd{margin:0;font-size:13px;line-height:1.52;color:#d4dcef}
@media (max-width: 900px){.infoBlocks{grid-template-columns:1fr}}
@media (max-width: 640px){.infoCard dl{grid-template-columns:1fr}.infoCard dt{margin-top:6px}}

/* Composer information within the existing credits card. */
.creditDetail{color:#aebbd5;font-size:12px}
.composerBio{margin-top:22px;padding-top:18px;border-top:1px solid rgba(142,160,212,.22);text-align:left}
.composerBio h4{margin:0 0 12px;color:#f1f5ff;font-weight:600;text-transform:uppercase;letter-spacing:.17em;font-size:12px}
.composerBio p{margin:0 0 12px;max-width:none;font-size:13px;line-height:1.65;color:#cdd6eb}
.composerBio a{display:inline-block;margin-top:4px;color:#a7c6ff;text-decoration:none;border-bottom:1px solid rgba(167,198,255,.55);padding-bottom:4px;font-size:13px;letter-spacing:.04em}
.composerBio a:hover,.composerBio a:focus-visible{color:white;border-color:white}


/* Single-page landing screen. */
#startAudio{overflow:hidden;place-items:center;padding:18px 3vw}
.introPanel{width:min(1320px,94vw);height:min(92vh,920px);grid-template-columns:minmax(420px,1.14fr) minmax(300px,.86fr);gap:min(2.4vw,30px);padding:min(2vw,22px);align-items:stretch}
.introCopy{display:flex;flex-direction:column;min-width:0}
.introCopy strong{font-size:clamp(32px,4.2vw,64px);margin:.03em 0 .12em}
.eyebrow{font-size:10px;letter-spacing:.28em;margin-bottom:10px}
.lead{font-size:clamp(14px,1.18vw,18px);line-height:1.46;margin-bottom:10px}
.introCopy p{font-size:clamp(12px,1vw,14px);line-height:1.48;margin:0 0 10px;max-width:none}
#introArt{min-height:auto;height:100%;min-width:0}
.compactFacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 14px}
.fact{padding:8px 10px}
.fact span{font-size:9px;letter-spacing:.18em;margin-bottom:4px}
.fact b{font-size:12px;letter-spacing:.05em}
.compactActions{flex-direction:row;align-items:center;gap:14px;margin-bottom:12px}
.compactActions .hint{font-size:11px;letter-spacing:.05em}
.compactInfo{grid-template-columns:1fr 1fr;gap:10px;margin-top:0}
.infoCard{padding:12px 12px 11px}
.infoCard h3{margin:0 0 8px;font-size:12px;letter-spacing:.14em}
.infoCard dl{grid-template-columns:86px 1fr;gap:6px 10px}
.infoCard dt{font-size:9px;letter-spacing:.12em}
.infoCard dd{font-size:12px;line-height:1.4}
.siteLink{display:inline-block;margin-top:10px;color:#a7c6ff;text-decoration:none;border-bottom:1px solid rgba(167,198,255,.55);padding-bottom:3px;font-size:12px;letter-spacing:.03em}
.techList{margin:0;padding-left:18px;color:#d4dcef}
.techList li{font-size:12px;line-height:1.38;margin:0 0 6px}
.creditDetail,.composerBio{display:none}
#startButton{padding:12px 24px;font-size:15px}
@media (max-width: 1180px){.introPanel{height:min(94vh,900px);grid-template-columns:minmax(390px,1.08fr) minmax(280px,.92fr)}.compactFacts{grid-template-columns:repeat(2,minmax(0,1fr))}.compactInfo{grid-template-columns:1fr}.introCopy strong{font-size:clamp(30px,4vw,56px)}}
@media (max-height: 900px){.introPanel{height:min(95vh,860px);padding:16px;gap:18px}.lead{line-height:1.38}.introCopy p{font-size:12px;line-height:1.4;margin-bottom:8px}.compactFacts{margin:10px 0 10px;gap:7px}.fact{padding:7px 9px}.infoCard{padding:10px}.techList li,.infoCard dd{font-size:11.5px;line-height:1.33}}
@media (max-height: 780px){.introPanel{height:96vh}.introCopy strong{font-size:clamp(28px,3.6vw,48px)}.lead{font-size:13px}.eyebrow{font-size:9px}.fact b{font-size:11px}.techList li,.infoCard dd{font-size:11px}.introLabel{font-size:10px;letter-spacing:.16em}}


/* Responsive landing page polish. The browser window is not obliged to be a particular
 * shape. */
#startAudio{padding:clamp(12px,2.2vw,26px);background:radial-gradient(circle at 77% 36%,rgba(62,96,185,.10),transparent 26%),linear-gradient(180deg,rgba(0,2,9,.66),rgba(0,0,0,.82));}
.introPanel{width:min(1380px,96vw);max-width:1380px;height:min(calc(100dvh - 24px),900px);max-height:900px;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:clamp(16px,2.2vw,30px);padding:clamp(14px,1.7vw,22px);align-items:stretch}
.introCopy,.infoCard{text-align:left}
.introCopy{display:grid;grid-template-rows:auto auto auto auto auto 1fr;align-content:start;gap:0}
.introCopy strong{font-size:clamp(34px,4.3vw,66px);letter-spacing:.10em;line-height:.95;margin:.02em 0 .18em}
.eyebrow{font-size:clamp(9px,.68vw,11px);letter-spacing:.30em;margin-bottom:10px}
.lead{font-size:clamp(14px,1.08vw,18px);line-height:1.42;margin-bottom:10px;max-width:44ch}
.introCopy p{font-size:clamp(12px,.92vw,14px);line-height:1.44;margin:0 0 10px;max-width:55ch;color:#d3dcef}
.compactFacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 12px}
.fact{padding:9px 10px;border-color:rgba(146,170,233,.18);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.018))}
.fact span{font-size:9px;letter-spacing:.17em}
.fact b{font-size:12px;line-height:1.2}
.compactActions{justify-content:flex-start;align-items:center;gap:14px;margin-bottom:12px}
.compactActions .hint{font-size:11px;letter-spacing:.04em;opacity:.92}
.infoBlocks.compactInfo{align-self:end;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:10px;margin-top:0}
.infoCard{padding:12px 12px 11px;background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.02));border-color:rgba(146,170,233,.15)}
.infoCard h3{text-align:center;font-size:12px;letter-spacing:.16em;margin:0 0 9px}
.infoCard dl{grid-template-columns:82px 1fr;gap:6px 10px;align-items:start}
.infoCard dd{font-size:12px;line-height:1.36}
.techList li{font-size:12px;line-height:1.33;margin-bottom:6px}
#startButton{padding:13px 26px;font-size:15px;white-space:nowrap}
#introArt{height:100%;min-height:0;aspect-ratio:auto;border-color:rgba(160,180,235,.12);background:radial-gradient(circle at 58% 41%,rgba(60,110,235,.18),transparent 15%),linear-gradient(180deg,rgba(3,6,14,.04),rgba(3,6,14,.34))}
#introArt::before{opacity:.42}
#introPreview{width:100%;height:100%;filter:contrast(1.03) saturate(1.04)}
.introGlow{width:min(44%,340px);height:min(34%,240px);filter:blur(30px);opacity:.95}
.introLabel{left:20px;right:20px;bottom:18px;text-align:center;font-size:11px;letter-spacing:.20em}
@media (max-width: 1120px){
  .introPanel{grid-template-columns:minmax(0,1fr) minmax(300px,.86fr);height:min(calc(100dvh - 18px),860px)}
  .compactFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .infoBlocks.compactInfo{grid-template-columns:1fr}
}
@media (max-width: 880px){
  #startAudio{overflow:hidden;padding:12px}
  .introPanel{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(240px,34vh);height:min(calc(100dvh - 12px),920px);gap:14px}
  .introCopy{order:1}
  #introArt{order:2;min-height:240px}
  .compactFacts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lead,.introCopy p{max-width:none}
}
@media (max-width: 620px){
  .introPanel{padding:12px;height:min(calc(100dvh - 10px),940px)}
  .introCopy strong{font-size:clamp(30px,8vw,44px)}
  .compactFacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .compactActions{flex-direction:column;align-items:flex-start;gap:8px}
  .infoCard dd,.techList li{font-size:11px}
  #startButton{width:100%;text-align:center}
  .introLabel{font-size:10px;letter-spacing:.14em}
}
@media (max-height: 830px){
  .introPanel{height:min(calc(100dvh - 10px),820px)}
  .introCopy strong{font-size:clamp(30px,3.8vw,54px)}
  .lead{font-size:13px;line-height:1.35}
  .introCopy p{font-size:11.5px;line-height:1.36;margin-bottom:8px}
  .fact{padding:7px 8px}
  .fact b{font-size:11px}
  .compactFacts{margin:10px 0}
  .infoCard{padding:10px}
  .infoCard h3{font-size:11px}
  .infoCard dd,.techList li{font-size:11px;line-height:1.28}
  .siteLink{font-size:11px}
}


/* Landing page refinement. */
#startAudio{padding:clamp(12px,1.8vw,22px);background:
 radial-gradient(circle at 76% 32%,rgba(74,108,210,.12),transparent 23%),
 radial-gradient(circle at 22% 18%,rgba(32,60,140,.10),transparent 24%),
 linear-gradient(180deg,rgba(0,3,10,.72),rgba(0,0,0,.86));}
.introPanel{position:relative;overflow:hidden;width:min(1440px,96vw);height:min(calc(100dvh - 20px),900px);grid-template-columns:minmax(0,1.02fr) minmax(360px,.90fr);gap:clamp(18px,2.2vw,32px);padding:clamp(16px,1.7vw,24px);border:1px solid rgba(120,152,232,.16);background:linear-gradient(180deg,rgba(6,10,22,.82),rgba(3,6,14,.74));box-shadow:0 28px 90px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.025)}
.introPanel::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(110,145,245,.05),transparent 18%,transparent 82%,rgba(110,145,245,.05));pointer-events:none}
.introCopy{position:relative;z-index:1;display:grid;grid-template-rows:auto auto auto auto 1fr;align-content:start;padding:4px 0}
.introCopy strong{font-size:clamp(40px,4.6vw,72px);letter-spacing:.07em;line-height:.94;margin:.02em 0 .16em;font-weight:300;text-shadow:0 8px 36px rgba(0,0,0,.45)}
.eyebrow{font-size:clamp(9px,.72vw,11px);letter-spacing:.34em;color:#a7b8de;margin-bottom:10px}
.lead{font-size:clamp(15px,1.08vw,19px);line-height:1.46;max-width:43ch;color:#f0f5ff;margin-bottom:12px}
.introCopy p{font-size:clamp(12px,.9vw,14px);line-height:1.48;max-width:56ch;color:#cfdaef;margin-bottom:12px}
.compactFacts{gap:9px;margin:10px 0 14px}
.fact{padding:10px 11px;border:1px solid rgba(140,165,230,.16);background:linear-gradient(180deg,rgba(255,255,255,.036),rgba(255,255,255,.018));backdrop-filter:blur(3px)}
.fact b{font-size:12px;letter-spacing:.045em}
.compactActions{gap:16px;margin-bottom:12px}
.compactActions .hint{font-size:11px;color:#a5b2cc}
.infoBlocks.compactInfo{align-self:end;gap:12px}
.infoCard{background:linear-gradient(180deg,rgba(255,255,255,.040),rgba(255,255,255,.020));border:1px solid rgba(140,165,230,.14);border-radius:2px}
.infoCard h3{font-size:12px;letter-spacing:.20em;color:#f3f6ff}
.infoCard dd,.techList li{color:#d9e2f4}
#startButton{padding:14px 28px;border-radius:8px;background:linear-gradient(180deg,#1d2f53,#12203b);border:1px solid rgba(169,193,245,.70);box-shadow:0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10)}
#startButton:hover{background:linear-gradient(180deg,#243963,#152645)}
#introArt{position:relative;isolation:isolate;border:1px solid rgba(150,176,240,.13);background:
 radial-gradient(circle at 55% 38%,rgba(65,106,230,.18),transparent 15%),
 linear-gradient(180deg,rgba(4,8,18,.12),rgba(3,6,14,.36));}
#introArt::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 58% 44%,rgba(82,110,230,.10),transparent 18%);pointer-events:none}
#introPreview{filter:contrast(1.04) saturate(1.07)}
.introGlow{right:9%;bottom:12%;width:min(45%,350px);height:min(34%,250px);background:radial-gradient(circle,rgba(88,118,255,.16),rgba(70,99,220,.07) 40%,transparent 72%);filter:blur(32px)}
.introLabel{font-size:11px;letter-spacing:.22em;color:#a9b7d6}
@media (max-width: 980px){
  .introPanel{grid-template-columns:1fr minmax(300px,.84fr);height:min(calc(100dvh - 16px),880px)}
}
@media (max-width: 860px){
  .introPanel{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(250px,34vh);height:min(calc(100dvh - 12px),930px)}
  #introArt{min-height:250px}
}
@media (max-height: 840px){
  .introPanel{height:min(calc(100dvh - 10px),820px)}
  .introCopy strong{font-size:clamp(34px,4.1vw,58px)}
  .lead{font-size:13px;line-height:1.38}
  .introCopy p{font-size:11.5px;line-height:1.36;margin-bottom:8px}
}


/* Intro layout refinement: smaller preview, bigger lower area, button dock on the right.
 * The page should fit the screen, not negotiate with it. */
#startAudio{padding:clamp(12px,1.5vw,20px);overflow:hidden}
.introPanel{
  width:min(1480px,96vw);
  height:min(calc(100dvh - 16px),920px);
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "summary art"
    "info actions";
  align-items:stretch;
  gap:clamp(14px,1.8vw,26px);
  padding:clamp(16px,1.6vw,24px);
}
.introSummary{grid-area:summary;display:flex;flex-direction:column;justify-content:flex-start;align-self:stretch;padding-right:2px}
.introSummary .compactFacts{margin-top:14px;margin-bottom:0}
#introArt{
  grid-area:art;
  align-self:stretch;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
}
.introInfoBlocks{grid-area:info;align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:0}
.introActionDock{
  grid-area:actions;
  align-self:stretch;
  justify-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
  gap:16px;
  padding:10px 2px 4px 2px;
}
.introActionDock .hint{
  order:1;
  font-size:12px;
  line-height:1.45;
  color:#a9b6d3;
  text-align:left;
  max-width:28ch;
}
.introActionDock #startButton{
  order:2;
  align-self:stretch;
  width:100%;
  min-height:64px;
  font-size:18px;
  letter-spacing:.12em;
}
.infoCard{height:100%}
#introPreview{image-rendering:auto}
#introArt .introLabel{text-align:center}

@media (min-width:1180px){
  .introSummary .lead{max-width:46ch}
  .introSummary p{max-width:58ch}
}
@media (max-width:1080px){
  .introPanel{
    grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
    grid-template-areas:
      "summary art"
      "info info"
      "actions actions";
    grid-template-rows:auto auto auto;
  }
  .introActionDock{flex-direction:row;justify-content:space-between;align-items:center;padding-top:0}
  .introActionDock .hint{max-width:none}
  .introActionDock #startButton{width:auto;min-width:280px;align-self:center}
}
@media (max-width:860px){
  #startAudio{overflow:auto;padding:12px}
  .introPanel{
    height:auto;
    min-height:calc(100dvh - 24px);
    grid-template-columns:1fr;
    grid-template-areas:
      "summary"
      "art"
      "info"
      "actions";
    grid-template-rows:auto minmax(220px,34vh) auto auto;
  }
  #introArt{min-height:220px}
  .introInfoBlocks{grid-template-columns:1fr}
  .introActionDock{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .introActionDock #startButton{width:100%;min-width:0}
}
@media (max-height:820px) and (min-width:861px){
  .introPanel{height:min(calc(100dvh - 12px),860px)}
  .introActionDock #startButton{min-height:56px;font-size:16px}
  .introActionDock .hint{font-size:11px}
}


/* Keep the start button reachable on shorter screens without scrolling. Space is large.
 * Blank screens are not the intended effect. */
@media (max-height: 900px) and (min-width: 861px){
  #startAudio{padding:10px;overflow:hidden}
  .introPanel{
    width:min(1480px,97vw);
    height:min(calc(100dvh - 8px),790px);
    grid-template-columns:minmax(0,1.12fr) minmax(300px,.82fr);
    grid-template-areas:
      "summary art"
      "info info"
      "actions actions";
    grid-template-rows:auto auto auto;
    gap:10px;
    padding:12px;
  }
  .introSummary .lead{font-size:13px;line-height:1.32;max-width:46ch}
  .introSummary p{font-size:11.4px;line-height:1.32;margin:0 0 8px;max-width:62ch}
  .introSummary .compactFacts{margin-top:10px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .introSummary .fact{padding:7px 8px}
  .introSummary .fact span{font-size:8px;margin-bottom:3px}
  .introSummary .fact b{font-size:10.5px}
  #introArt{min-height:220px;max-height:310px}
  .introInfoBlocks{grid-template-columns:1fr 1fr;gap:8px}
  .infoCard{padding:9px 10px}
  .infoCard h3{font-size:11px;letter-spacing:.16em;margin-bottom:7px}
  .infoCard dd,.techList li{font-size:10.8px;line-height:1.24}
  .siteLink{font-size:10.8px;margin-top:8px}
  .introActionDock{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:0 2px 2px 2px;
  }
  .introActionDock .hint{max-width:none;font-size:11px;line-height:1.35}
  .introActionDock #startButton{
    width:auto;
    min-width:260px;
    max-width:360px;
    min-height:54px;
    font-size:16px;
    flex:0 0 auto;
  }
}
@media (max-height: 760px) and (min-width: 861px){
  .introPanel{height:min(calc(100dvh - 6px),730px);padding:10px;gap:8px}
  .introCopy strong{font-size:clamp(28px,3.6vw,48px)}
  .eyebrow{font-size:8px;letter-spacing:.22em;margin-bottom:6px}
  .introSummary .lead{font-size:12px;line-height:1.25;margin-bottom:6px}
  .introSummary p{font-size:10.6px;line-height:1.24;margin-bottom:6px}
  .introSummary .compactFacts{gap:5px;margin-top:8px}
  .infoCard dd,.techList li{font-size:10.2px;line-height:1.18}
  .infoCard h3{font-size:10px}
  #introArt{max-height:260px}
  .introActionDock #startButton{min-width:230px;min-height:48px;font-size:15px}
}


/* Refined intro layout and stronger CTA. The page should fit the screen, not negotiate with
 * it. */
#startAudio{padding:clamp(10px,1.2vw,16px);overflow:hidden;background:
  radial-gradient(circle at 78% 28%,rgba(70,95,180,.10),transparent 28%),
  radial-gradient(circle at 18% 10%,rgba(115,140,225,.06),transparent 30%),
  linear-gradient(180deg,rgba(1,5,14,.92),rgba(2,6,18,.97));}
.introPanel{
  width:min(1520px,96vw);
  height:min(calc(100dvh - 18px),900px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,.86fr);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:
    "summary summary art"
    "info info actions";
  gap:clamp(12px,1.4vw,18px);
  padding:clamp(14px,1.45vw,20px);
  border:1px solid rgba(170,190,255,.14);
  background:linear-gradient(180deg,rgba(4,10,22,.80),rgba(3,8,19,.64));
  box-shadow:0 26px 70px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.022);
  backdrop-filter:blur(10px);
}
.introSummary{grid-area:summary;padding:2px 6px 0 0;justify-content:flex-start}
.introCopy strong{font-size:clamp(34px,4.2vw,64px);letter-spacing:.08em}
.eyebrow{font-size:10px;letter-spacing:.30em;color:#a5b3d6;margin-bottom:10px}
.introSummary .lead{font-size:clamp(14px,1.16vw,18px);line-height:1.48;color:#eff3ff;max-width:48ch;margin-bottom:10px}
.introSummary p{font-size:clamp(12px,.96vw,14px);line-height:1.50;color:#ccd5ea;max-width:62ch;margin:0 0 10px}
.introSummary .compactFacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.introSummary .fact{padding:9px 10px;border:1px solid rgba(142,160,212,.14);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.012))}
.introSummary .fact span{font-size:8.5px;letter-spacing:.20em;color:#8fa2ce;margin-bottom:4px}
.introSummary .fact b{font-size:11px;line-height:1.15;color:#f6f8ff}
#introArt{
  grid-area:art;
  min-height:0;
  height:auto;
  max-height:none;
  border:1px solid rgba(160,180,235,.10);
  background:
    radial-gradient(circle at 55% 42%,rgba(64,95,205,.16),transparent 18%),
    linear-gradient(180deg,rgba(3,6,14,.22),rgba(3,6,14,.48));
}
#introArt::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 75%,rgba(0,0,0,.18));}
.introInfoBlocks{grid-area:info;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-self:stretch}
.infoCard{padding:14px 14px 12px;border:1px solid rgba(142,160,212,.13);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.016));box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)}
.infoCard h3{font-size:12px;letter-spacing:.18em;text-align:center;color:#f2f5ff;margin:0 0 10px}
.infoCard dd,.techList li{font-size:12px;line-height:1.42;color:#d5ddf0}
.infoCard dt{font-size:9px;letter-spacing:.16em;color:#92a3c7}
.siteLink{font-size:12px;margin-top:8px}
.introActionDock{
  grid-area:actions;
  align-self:stretch;
  justify-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:14px;
  padding:16px;
  border:1px solid rgba(142,160,212,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.012));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012);
}
.introActionDock #startButton{
  order:1;
  width:100%;
  min-height:74px;
  border-radius:10px;
  font-size:clamp(17px,1.2vw,21px);
  letter-spacing:.14em;
  border:1px solid rgba(173,195,255,.72);
  background:linear-gradient(180deg,rgba(30,47,86,.96),rgba(16,29,57,.98));
  box-shadow:0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.introActionDock #startButton:hover{background:linear-gradient(180deg,rgba(42,63,112,.98),rgba(18,33,64,.98))}
.introActionDock .hint{order:2;max-width:none;font-size:12px;line-height:1.45;color:#aab6d1;text-align:left}
#introArt .introLabel{left:18px;bottom:16px;font-size:11px;letter-spacing:.20em}

@media (max-width:1160px){
  .introPanel{
    grid-template-columns:minmax(0,1fr) minmax(290px,.84fr);
    grid-template-areas:
      "summary art"
      "info info"
      "actions actions";
    grid-template-rows:auto auto auto;
    height:min(calc(100dvh - 14px),860px);
  }
  .introActionDock{flex-direction:row;align-items:center;justify-content:space-between;padding:14px}
  .introActionDock #startButton{width:auto;min-width:280px;max-width:360px;min-height:60px}
}
@media (max-width:860px){
  #startAudio{overflow:auto;padding:10px}
  .introPanel{
    height:auto;min-height:calc(100dvh - 20px);grid-template-columns:1fr;
    grid-template-areas:"summary" "art" "info" "actions";
    grid-template-rows:auto minmax(220px,36vh) auto auto;
  }
  .introSummary .compactFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .introInfoBlocks{grid-template-columns:1fr}
  .introActionDock{flex-direction:column;justify-content:flex-end;padding:12px}
  .introActionDock #startButton{width:100%;min-width:0;max-width:none}
}
@media (max-height:820px) and (min-width:861px){
  .introPanel{height:min(calc(100dvh - 10px),780px);gap:10px;padding:12px}
  .introSummary .lead{font-size:13px;line-height:1.34}
  .introSummary p{font-size:11.2px;line-height:1.33;margin-bottom:7px}
  .introSummary .compactFacts{gap:6px;margin-top:10px}
  .introSummary .fact{padding:7px 8px}
  .introSummary .fact span{font-size:8px}
  .introSummary .fact b{font-size:10.5px}
  #introArt{max-height:330px}
  .infoCard{padding:10px 11px}
  .infoCard h3{font-size:11px;margin-bottom:8px}
  .infoCard dd,.techList li{font-size:10.7px;line-height:1.25}
  .introActionDock{padding:12px}
  .introActionDock #startButton{min-height:56px;font-size:16px}
  .introActionDock .hint{font-size:11px;line-height:1.35}
}


/* Intro page redesign. First impressions should not require a second loading attempt. */
#startAudio{
  padding:clamp(10px,1.4vw,18px);
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(66,88,178,.11), transparent 24%),
    radial-gradient(circle at 18% 12%, rgba(124,144,255,.07), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(26,46,93,.10), transparent 34%),
    linear-gradient(180deg, rgba(1,4,12,.94), rgba(2,6,17,.98));
}
.introPanel{
  width:min(1520px,96vw);
  height:min(calc(100dvh - 16px),880px);
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(330px,.92fr);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:
    "summary art"
    "info actions";
  gap:clamp(12px,1.35vw,18px);
  padding:clamp(14px,1.4vw,20px);
  border-radius:24px;
  border:1px solid rgba(170,190,255,.14);
  background:linear-gradient(180deg, rgba(5,10,23,.78), rgba(3,7,18,.66));
  box-shadow:0 28px 80px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.018);
  backdrop-filter:blur(10px);
}
.introSummary{
  grid-area:summary;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:4px 2px 0 0;
}
.eyebrow{
  font-size:10px;
  letter-spacing:.28em;
  color:#9fb0d9;
  margin:0 0 10px;
}
.introCopy strong{
  display:block;
  font-size:clamp(38px,4.4vw,66px);
  letter-spacing:.06em;
  line-height:.96;
  color:#f7f9ff;
  margin-bottom:14px;
}
.introSummary .lead{
  font-size:clamp(15px,1.12vw,18px);
  line-height:1.5;
  color:#f0f4ff;
  margin:0 0 12px;
  max-width:44ch;
}
.introSummary p{
  font-size:clamp(12px,.95vw,14px);
  line-height:1.56;
  color:#ccd6ec;
  margin:0 0 10px;
  max-width:62ch;
}
.introSummary .compactFacts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
  max-width:920px;
}
.introSummary .fact{
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(148,165,223,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.014));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.010);
}
.introSummary .fact span{
  display:block;
  font-size:8.5px;
  letter-spacing:.20em;
  color:#90a3d0;
  margin-bottom:5px;
}
.introSummary .fact b{
  display:block;
  font-size:11px;
  line-height:1.18;
  color:#f6f8fe;
}
#introArt{
  grid-area:art;
  min-height:0;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(167,186,240,.11);
  background:
    radial-gradient(circle at 52% 44%, rgba(70,98,194,.15), transparent 18%),
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.03), transparent 20%),
    linear-gradient(180deg, rgba(4,8,19,.26), rgba(3,7,17,.54));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.014);
}
#introArt::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.028), transparent 16%, transparent 76%, rgba(0,0,0,.18));
}
#introArt .introGlow{opacity:.7}
#introArt .introLabel{
  left:18px;
  bottom:16px;
  font-size:11px;
  letter-spacing:.18em;
  color:#dce4fb;
  text-shadow:0 1px 10px rgba(0,0,0,.52);
}
.introInfoBlocks{
  grid-area:info;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  min-width:0;
}
.infoCard{
  padding:14px 15px 13px;
  border-radius:18px;
  border:1px solid rgba(145,163,220,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.016));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.010);
}
.infoCard h3{
  margin:0 0 10px;
  font-size:11.5px;
  letter-spacing:.18em;
  color:#f0f4ff;
  text-align:left;
}
.infoCard dt{
  font-size:9px;
  letter-spacing:.16em;
  color:#91a3cc;
}
.infoCard dd,.techList li{
  font-size:12px;
  line-height:1.42;
  color:#d7deef;
}
.infoCard dl{row-gap:6px}
.techList{gap:7px}
.siteLink{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#b6c5ee;margin-top:10px}
.siteLink:hover{color:#e1e9ff}
.introActionDock{
  grid-area:actions;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  min-width:0;
  border-radius:20px;
  border:1px solid rgba(145,163,220,.14);
  background:
    radial-gradient(circle at 80% 20%, rgba(98,122,235,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.014));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012);
}
.introActionDock .actionTitle{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f4f7ff;
}
.introActionDock .hint{
  max-width:none;
  font-size:12px;
  line-height:1.48;
  color:#b8c4de;
}
.introActionDock #startButton{
  width:100%;
  min-height:74px;
  margin-top:auto;
  align-self:stretch;
  border-radius:12px;
  border:1px solid rgba(176,198,255,.76);
  background:linear-gradient(180deg, rgba(35,55,101,.98), rgba(18,32,61,.98));
  box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  font-size:clamp(17px,1.2vw,21px);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.introActionDock #startButton:hover{
  background:linear-gradient(180deg, rgba(46,68,122,.99), rgba(21,37,70,.99));
  transform:translateY(-1px);
}

@media (max-width:1200px){
  .introPanel{
    grid-template-columns:minmax(0,1.14fr) minmax(300px,.86fr);
    height:min(calc(100dvh - 14px),850px);
  }
  .introSummary .compactFacts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  #startAudio{overflow:auto;padding:12px}
  .introPanel{
    height:auto;
    min-height:calc(100dvh - 24px);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(240px,34vh) auto auto;
    grid-template-areas:
      "summary"
      "art"
      "info"
      "actions";
  }
  .introSummary .compactFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .introInfoBlocks{grid-template-columns:1fr}
  .introActionDock{padding:16px}
  .introActionDock #startButton{width:100%}
}
@media (max-height:860px) and (min-width:981px){
  .introPanel{height:min(calc(100dvh - 10px),790px);gap:10px;padding:12px}
  .introCopy strong{font-size:clamp(30px,3.7vw,52px);margin-bottom:10px}
  .eyebrow{margin-bottom:8px;font-size:9px}
  .introSummary .lead{font-size:13px;line-height:1.36;margin-bottom:8px}
  .introSummary p{font-size:11px;line-height:1.32;margin-bottom:7px}
  .introSummary .compactFacts{gap:6px;margin-top:10px}
  .introSummary .fact{padding:7px 8px}
  .introSummary .fact span{font-size:8px;margin-bottom:3px}
  .introSummary .fact b{font-size:10px}
  .infoCard{padding:10px 11px 10px}
  .infoCard h3{font-size:10.5px;margin-bottom:7px}
  .infoCard dd,.techList li{font-size:10.5px;line-height:1.24}
  .siteLink{font-size:10.8px;margin-top:8px}
  .introActionDock{padding:12px;gap:8px}
  .introActionDock .actionTitle{font-size:11px}
  .introActionDock .hint{font-size:10.8px;line-height:1.32}
  .introActionDock #startButton{min-height:54px;font-size:15px}
}


/* Intro redesign inspired by NASA Eyes + immersive editorial split layout. The page should
 * fit the screen, not negotiate with it. */
#startAudio{
  padding:clamp(10px,1.2vw,18px);
  overflow:auto;
  background:
    radial-gradient(circle at 78% 22%, rgba(63,98,201,.11), transparent 24%),
    radial-gradient(circle at 18% 12%, rgba(154,180,255,.05), transparent 20%),
    linear-gradient(180deg, rgba(1,4,14,.96), rgba(1,3,10,.98));
}
#startAudio::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 26%, rgba(255,255,255,.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 74%, rgba(132,168,255,.08) 0 1px, transparent 1.5px);
  background-size:180px 180px, 220px 220px, 260px 260px;
  opacity:.45;
}
.introPanel{
  position:relative;
  width:min(1480px,96vw);
  min-height:min(calc(100dvh - 20px),910px);
  height:auto;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "summary art"
    "info art"
    "actions actions";
  gap:clamp(14px,1.35vw,18px);
  padding:clamp(14px,1.5vw,22px);
  border-radius:28px;
  border:1px solid rgba(134,165,245,.16);
  background:linear-gradient(180deg, rgba(7,12,26,.88), rgba(4,8,18,.76));
  box-shadow:0 28px 90px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(10px);
}
.introPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg, rgba(124,155,255,.06), transparent 24%, transparent 72%, rgba(124,155,255,.05));
}
.introSummary{
  grid-area:summary;
  padding:6px 6px 4px 0;
}
.eyebrow{
  margin:0 0 10px;
  font-size:10px;
  letter-spacing:.30em;
  color:#8fa6db;
}
.introCopy strong{
  display:block;
  font-size:clamp(42px,4.9vw,74px);
  line-height:.94;
  letter-spacing:.05em;
  color:#fbfcff;
  margin-bottom:12px;
}
.introSummary .lead{
  font-size:clamp(16px,1.18vw,20px);
  line-height:1.5;
  max-width:44ch;
  color:#f2f5ff;
  margin:0 0 12px;
}
.introSummary p{
  max-width:62ch;
  font-size:clamp(12.5px,.98vw,14.5px);
  line-height:1.58;
  color:#ced8ef;
  margin:0 0 10px;
}
.introSummary .compactFacts{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.introSummary .fact{
  padding:11px 10px 10px;
  border-radius:14px;
  border:1px solid rgba(146,167,223,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.014));
}
.introSummary .fact span{font-size:8px;letter-spacing:.22em;color:#8ea2cf;margin-bottom:5px}
.introSummary .fact b{font-size:11px;line-height:1.15;color:#f7f9ff}
#introArt{
  grid-area:art;
  min-height:0;
  border-radius:24px;
  border:1px solid rgba(153,178,243,.14);
  background:
    radial-gradient(circle at 54% 45%, rgba(78,114,222,.16), transparent 17%),
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.05), transparent 2px),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.05), transparent 1px),
    radial-gradient(circle at 28% 76%, rgba(255,255,255,.04), transparent 1px),
    linear-gradient(180deg, rgba(4,8,18,.16), rgba(3,7,16,.44));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);
}
#introArt::before{
  opacity:.26;
  background-image:radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(110,150,255,.10) 0 1px,transparent 1.8px);
  background-size:110px 110px,160px 160px;
  background-position:24px 18px,62px 70px;
}
#introArt .introLabel{
  left:18px;
  bottom:16px;
  font-size:11px;
  letter-spacing:.18em;
  color:#e4ebff;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.introInfoBlocks{
  grid-area:info;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.infoCard{
  height:100%;
  padding:16px 16px 14px;
  border-radius:18px;
  border:1px solid rgba(145,166,225,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.016));
}
.infoCard h3{
  margin:0 0 10px;
  font-size:11.5px;
  letter-spacing:.18em;
  color:#f2f6ff;
  text-align:left;
}
.infoCard dl{grid-template-columns:92px 1fr;gap:7px 12px}
.infoCard dt{font-size:9px;letter-spacing:.16em;color:#8ea2cc}
.infoCard dd,.techList li{font-size:12px;line-height:1.42;color:#d6e0f2}
.techList{gap:7px}
.siteLink{font-size:12px;color:#b5c7f0;margin-top:10px}
.introActionDock{
  grid-area:actions;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(145,166,225,.14);
  background:
    radial-gradient(circle at 86% 30%, rgba(74,105,214,.13), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.015));
}
.introActionDock .actionTitle{
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#f5f7ff;
  margin-bottom:6px;
}
.introActionDock .hint{
  font-size:12px;
  line-height:1.5;
  color:#b9c5de;
  max-width:70ch;
}
.introActionDock #startButton{
  width:min(360px,32vw);
  min-width:270px;
  min-height:72px;
  border-radius:14px;
  border:1px solid rgba(170,193,255,.75);
  background:linear-gradient(180deg, rgba(35,58,109,.98), rgba(18,32,61,.98));
  box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  font-size:clamp(17px,1.15vw,20px);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.introActionDock #startButton:hover{background:linear-gradient(180deg, rgba(46,71,126,.99), rgba(22,38,72,.99));transform:translateY(-1px)}
@media (max-width:1140px){
  .introPanel{grid-template-columns:minmax(0,1fr) minmax(320px,.88fr)}
  .introSummary .compactFacts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .introPanel{
    min-height:calc(100dvh - 24px);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(250px,34vh) auto auto;
    grid-template-areas:"summary" "art" "info" "actions";
  }
  .introSummary .compactFacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .introInfoBlocks{grid-template-columns:1fr}
  .introActionDock{grid-template-columns:1fr;align-items:stretch}
  .introActionDock #startButton{width:100%;min-width:0}
}
@media (max-height:860px) and (min-width:901px){
  .introPanel{min-height:min(calc(100dvh - 10px),790px);gap:10px;padding:12px}
  .introCopy strong{font-size:clamp(32px,3.8vw,58px);margin-bottom:10px}
  .eyebrow{font-size:9px;margin-bottom:8px}
  .introSummary .lead{font-size:13px;line-height:1.38;margin-bottom:8px}
  .introSummary p{font-size:11px;line-height:1.32;margin-bottom:7px}
  .introSummary .compactFacts{margin-top:10px;gap:6px}
  .introSummary .fact{padding:7px 8px}
  .introSummary .fact b{font-size:10px}
  .infoCard{padding:10px 11px 10px}
  .infoCard h3{font-size:10.5px;margin-bottom:7px}
  .infoCard dd,.techList li{font-size:10.5px;line-height:1.24}
  .siteLink{font-size:10.8px}
  .introActionDock{padding:12px 14px;gap:12px}
  .introActionDock .actionTitle{font-size:11px;margin-bottom:4px}
  .introActionDock .hint{font-size:10.8px;line-height:1.34}
  .introActionDock #startButton{min-height:54px;font-size:15px}
}

/* Keep SoundCloud loaded but not visible; display:none can prevent widget playback. The
 * soundtrack gets to play music, not direct the planets. */
#soundcloudPlayer{position:fixed!important;left:-10px!important;top:-10px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;border:0!important;overflow:hidden!important;}

/* Staged editorial arrival. Only the landing page is animated. */
@keyframes introSlideIn {from{opacity:0;transform:translate3d(0,24px,0);filter:blur(5px)} to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes introCanvasIn {from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
#startAudio.intro-arriving .introSummary,
#startAudio.intro-arriving .introInfoBlocks > .infoCard,
#startAudio.intro-arriving .introActionDock {
  animation:introSlideIn 1.65s cubic-bezier(.22,.72,.22,1) both;
  will-change:opacity,transform;
}
#startAudio.intro-arriving .introSummary{animation-delay:.18s}
#startAudio.intro-arriving #introArt {animation:introCanvasIn 1.85s cubic-bezier(.22,.72,.22,1) .35s both;will-change:opacity,transform}
#startAudio.intro-arriving .introInfoBlocks > .infoCard:nth-child(1){animation-delay:.82s}
#startAudio.intro-arriving .introInfoBlocks > .infoCard:nth-child(2){animation-delay:1.12s}
#startAudio.intro-arriving .introActionDock{animation-delay:1.42s}
@media(prefers-reduced-motion:reduce){
 #startAudio.intro-arriving .introSummary,#startAudio.intro-arriving .introInfoBlocks > .infoCard,
 #startAudio.intro-arriving .introActionDock,#startAudio.intro-arriving #introArt{animation:none!important;}
}

/* Grouped action copy and cinematic wide-screen model framing. */
.introActionDock{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(250px,360px)!important;align-items:center!important;justify-content:stretch!important;gap:clamp(18px,3vw,52px)!important;min-height:112px;}
.introActionDock .actionCopy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.introActionDock .actionTitle{margin:0!important;font-size:clamp(12px,1.05vw,16px);line-height:1.15}
.introActionDock .hint{margin:0!important;max-width:58ch;line-height:1.5;text-align:left}
.introActionDock #startButton{grid-column:2!important;grid-row:1!important;order:0!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;justify-self:stretch;align-self:center}
#introArt #introPreview{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:900px){.introActionDock{grid-template-columns:1fr!important;gap:12px!important}.introActionDock #startButton{grid-column:1!important;grid-row:2!important}}
@media(max-height:700px) and (min-width:901px){.introActionDock{min-height:80px;padding:10px 14px!important}.introActionDock #startButton{min-height:50px}}

/* Entrance animation is armed before first paint, no visible flash. */
#startAudio.intro-arriving .introSummary,#startAudio.intro-arriving #introArt,
#startAudio.intro-arriving .introInfoBlocks>.infoCard,#startAudio.intro-arriving .introActionDock{animation-fill-mode:both;}
#introArt #introPreview{position:absolute;inset:0;width:100%;height:100%;}

/* Normal browser chrome reduces available height. Fit the composition to the viewport. */
@media (min-width: 901px) {
  #startAudio { overflow: hidden; padding: clamp(8px, 1vw, 16px); }
  .introPanel {
    width: min(1480px, 97vw);
    height: calc(100dvh - clamp(16px, 2vw, 32px));
    min-height: 0;
    max-height: 920px;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-content: stretch;
    overflow: hidden;
  }
  #introArt { height: 100%; min-height: 0; max-height: none; }
  .introSummary { min-height:0; }
  .introInfoBlocks { align-self: end; }
  .introActionDock { min-height: 0; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .introPanel { gap: 9px; padding: 12px; }
  .introSummary .lead { font-size: 13px; line-height: 1.34; margin-bottom: 6px; }
  .introSummary p { font-size: 11px; line-height:1.34; margin-bottom:6px; }
  .introSummary .compactFacts { margin-top: 7px; gap: 6px; }
  .introSummary .fact { padding:6px 7px; }
  .introActionDock { padding:9px 12px; min-height:70px; }
  .introActionDock #startButton { min-height:48px; }
}


/* Discreet album links to the two published streaming destinations. */
.albumLinks{margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.albumLinksLabel{font-size:9px;letter-spacing:.18em;color:#95a8cf;font-weight:650}
.albumLinksRow{display:flex;flex-wrap:wrap;gap:8px}
.albumLink{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:6px 11px;border:1px solid rgba(154,174,224,.25);border-radius:999px;background:rgba(255,255,255,.045);color:#e8eefc;text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.015em;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.albumLink:hover,.albumLink:focus-visible{background:rgba(255,255,255,.11);border-color:rgba(180,200,255,.54);transform:translateY(-2px)}
.albumLinkMark{font-size:15px;line-height:1}
.albumSpotify .albumLinkMark{color:#56d98d}
.albumSoundcloud .albumLinkMark{color:#ffad72}
@media(min-width:901px) and (max-height:820px){.albumLinks{margin-top:7px;gap:4px}.albumLink{min-height:27px;padding:4px 9px;font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.albumLink{transition:none}.albumLink:hover{transform:none}}

/* Compact credits, no redundant section label or separate link row. */
.creditsCompact{display:flex;flex-direction:column;justify-content:center;padding:11px 14px!important;gap:0;min-height:0}
.creditsCompact h3{margin:0 0 7px!important}
.creditsCompact dl{display:grid;grid-template-columns:minmax(88px,108px) minmax(0,1fr);gap:4px 9px;margin:0}
.creditsCompact dt{font-size:9px;line-height:1.35}
.creditsCompact dd{font-size:11px;line-height:1.35}
.creditsLinks{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:8px}
.creditsLinks .albumLink{min-height:26px;padding:4px 9px;font-size:10px;gap:5px}
.creditsLinks .albumLinkMark{font-size:13px}
.creditsWebsite{font-size:10.5px;color:#b6c7ed;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;margin-left:auto}
.creditsWebsite:hover{color:white}
@media(max-width:480px){.creditsCompact dl{grid-template-columns:90px 1fr}.creditsWebsite{margin-left:0}}

/* Mobile-first landing navigation. The film remains an edge-to-edge canvas. Phones are
 * small. The content has been informed. */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  html, body { width:100%; height:100%; overflow:hidden; }
  #startAudio {
    position:fixed; inset:0; display:block; overflow-x:hidden; overflow-y:auto;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    touch-action:pan-y; place-items:initial;
    height:100dvh; min-height:0;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .introPanel {
    box-sizing:border-box; display:grid; margin:0 auto;
    width:100%; max-width:720px; min-width:0;
    height:auto; min-height:0; max-height:none; overflow:visible;
    padding:clamp(12px,3.5vw,20px); gap:14px;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"summary" "art" "actions" "info";
    align-items:start;
  }
  .introSummary { grid-area:summary; min-height:0; padding:0; }
  .introCopy strong {font-size:clamp(33px,8vw,56px);line-height:1.02;}
  .eyebrow {font-size:9px;letter-spacing:.15em;}
  .introSummary .lead {font-size:clamp(13px,3.3vw,16px);line-height:1.43;margin-bottom:10px;}
  .introSummary p {font-size:clamp(12px,3vw,14px);line-height:1.48;margin:0 0 9px;}
  .introSummary .compactFacts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0 0;}
  .introSummary .fact{padding:9px 10px;min-width:0;}
  .introSummary .fact b {font-size:11px;letter-spacing:.02em;overflow-wrap:anywhere;}
  .introSummary .fact span{font-size:8px;letter-spacing:.11em;}
  #introArt {grid-area:art;width:100%;height:clamp(220px,56vw,360px);min-height:220px;max-height:none;align-self:stretch;}
  #introPreview {touch-action:pan-y;pointer-events:none;}
  #introArt .introLabel{font-size:9px;letter-spacing:.10em;left:10px;right:10px;bottom:10px;text-align:center;}
  .introActionDock{grid-area:actions;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:13px!important;min-height:0!important;}
  .introActionDock .actionCopy{gap:5px;}
  .introActionDock .actionTitle{font-size:12px;}
  .introActionDock .hint{font-size:11px;line-height:1.4;}
  .introActionDock #startButton{grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:52px;font-size:15px;touch-action:manipulation;}
  .introInfoBlocks {grid-area:info;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;min-height:0;}
  .introInfoBlocks>.infoCard {min-width:0;padding:14px!important;}
  .infoCard dd,.techList li{font-size:12px;line-height:1.45;}
  .creditsLinks{gap:6px;}
  .creditsWebsite{margin-left:0;}
}
/* Landscape phones: keep the call to action visible earlier without cropping the page. */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 580px) {
  #startAudio{padding:6px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));}
  .introPanel{max-width:900px;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-rows:auto auto auto;grid-template-areas:"summary art" "actions actions" "info info";gap:10px;padding:12px;}
  .introCopy strong{font-size:clamp(28px,4vw,42px);margin-bottom:7px;}
  .introSummary .lead,.introSummary p{font-size:11px;line-height:1.30;margin-bottom:6px;}
  .introSummary .compactFacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:7px;}
  .introSummary .fact{padding:6px;}
  .introSummary .fact span{font-size:7px;}
  .introSummary .fact b{font-size:9px;}
  #introArt{height:100%;min-height:195px;max-height:310px;}
  .introActionDock{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;}
  .introActionDock .actionCopy{flex:1;min-width:0;}
  .introActionDock #startButton{width:clamp(210px,33%,300px)!important;flex:none;}
  .introInfoBlocks{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce) {
  #startAudio{scroll-behavior:auto;}
}


/* Clear film stop and return navigation. */
.film-navigation{position:fixed;z-index:150;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:none;align-items:center;gap:10px;pointer-events:auto}
body.film-running .film-navigation{display:flex}
.film-navigation button,.film-navigation a,.intro-home{font:700 12px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.035em;color:#f1f5ff;background:rgba(7,13,28,.82);border:1px solid rgba(180,202,248,.52);border-radius:8px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:13px 17px;box-shadow:0 8px 28px rgba(0,0,0,.38);cursor:pointer;text-decoration:none;white-space:nowrap}
.film-navigation button:hover,.film-navigation a:hover,.intro-home:hover{background:rgba(33,50,88,.94);border-color:#b5caff}
.film-navigation button:focus-visible,.film-navigation a:focus-visible,.intro-home:focus-visible{outline:3px solid #f7d4a2;outline-offset:2px}
.film-navigation button{background:rgba(55,26,32,.84);border-color:rgba(255,191,191,.65)}
.intro-home{display:inline-flex;align-items:center;justify-content:center;grid-column:1/-1;justify-self:end;font-size:11px;letter-spacing:.09em;padding:9px 13px;z-index:10}
@media(max-width:650px){.film-navigation{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));justify-content:space-between;gap:6px}.film-navigation button,.film-navigation a{padding:11px 12px;font-size:11px}.intro-home{padding:9px 11px}}
/* Keep the introduction layout intact: the home link must not occupy a grid cell. The page
 * should fit the screen, not negotiate with it. */
#startAudio .intro-home{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:200;pointer-events:auto}

/* Understated stop control; visible on focus/hover, reachable by touch. */
.film-navigation{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));left:auto!important;justify-content:flex-end!important}
.film-navigation #stopFilm{font:500 11px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.01em;background:rgba(7,13,28,.32);border:1px solid rgba(180,202,248,.18);border-radius:5px;padding:8px 10px;box-shadow:none;opacity:.54;transition:opacity .25s ease,background .25s ease,border-color .25s ease}
.film-navigation #stopFilm:hover,.film-navigation #stopFilm:focus-visible{opacity:1;background:rgba(7,13,28,.82);border-color:rgba(180,202,248,.56)}
@media (hover:none){.film-navigation #stopFilm{opacity:.74;padding:11px 13px}}

/* Wait for the actual first Babylon preview frame before animating. The start page is never
 * rendered fully visible before its staged reveal. The GPU has enough responsibilities
 * already. */
#startAudio.intro-pending .introSummary,
#startAudio.intro-pending #introArt,
#startAudio.intro-pending .introInfoBlocks > .infoCard,
#startAudio.intro-pending .introActionDock{
 opacity:0!important;
 transform:translate3d(0,28px,0)!important;
 animation:none!important;
}
#startAudio.intro-pending .introPanel::after{
 content:"PREPARING THE PASSAGE";
 position:absolute;
 inset:auto 0 45% 0;
 text-align:center;
 font:600 10px/1.4 system-ui,sans-serif;
 letter-spacing:.28em;
 color:#93a7cb;
 animation:preparePulse 1.5s ease-in-out infinite;
 pointer-events:none;
}
@keyframes preparePulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
 #startAudio.intro-pending .introPanel::after{animation:none}
}

/* Mobile landing page, keep return link in its own grid row. The normal cinematic canvas
 * and desktop layout are untouched. Phones are small. The content has been informed. */
@media (max-width: 900px) {
  #startAudio {
    padding: max(8px,env(safe-area-inset-top)) 10px
             max(16px,env(safe-area-inset-bottom)) 10px;
  }
  #startAudio .introPanel {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto;
    grid-template-areas:"home" "summary" "art" "actions" "info";
    gap:12px;
    padding:14px;
    border-radius:20px;
  }
  #startAudio .intro-home {
    position:static;
    grid-area:home;
    justify-self:start;
    align-self:start;
    z-index:auto;
    max-width:100%;
    font-size:10px;
    line-height:1.25;
    padding:9px 12px;
    letter-spacing:.045em;
    box-shadow:none;
  }
  #startAudio .introSummary {
    grid-area:summary;
    padding:0;
  }
  #startAudio .introSummary .eyebrow {
    margin:0 0 8px;
    font-size:9px;
    letter-spacing:.11em;
    line-height:1.4;
  }
  #startAudio .introCopy strong{
    font-size:clamp(35px,10vw,52px);
    letter-spacing:.018em;
    line-height:1.08;
    margin:0 0 14px;
    overflow-wrap:break-word;
  }
  #startAudio .introSummary .lead {
    font-size:clamp(14px,3.6vw,16px);
    line-height:1.42;
    margin:0 0 10px;
    max-width:unset;
  }
  #startAudio .introSummary p {
    font-size:clamp(13px,3.25vw,14px);
    line-height:1.44;
    margin:0 0 9px;
    max-width:unset;
  }
  #startAudio .introSummary .compactFacts{
    gap:6px;
    margin-top:12px;
  }
  #startAudio .introSummary .fact{
    padding:7px 9px;
    border-radius:11px;
  }
  #startAudio .introSummary .fact span {
    margin-bottom:2px;
    font-size:8px;
  }
  #startAudio .introSummary .fact b {
    font-size:10.5px;
    line-height:1.22;
  }
  #startAudio #introArt{
    grid-area:art;
    height:clamp(200px,54vw,310px);
    min-height:200px;
    margin:0;
  }
  #startAudio .introActionDock { grid-area:actions; }
  #startAudio .introInfoBlocks { grid-area:info; }
}
@media (max-width: 950px) and (orientation:landscape) and (max-height:580px){
  #startAudio .introPanel {
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"home home" "summary art" "actions actions" "info info";
    gap:10px;
  }
  #startAudio .intro-home {justify-self:end}
  #startAudio .introCopy strong {font-size:clamp(28px,5vw,43px)}
  #startAudio .introSummary p,
  #startAudio .introSummary .lead {font-size:11px;line-height:1.34;}
  #startAudio #introArt {height:100%;min-height:200px;}
}


/* Start panel background aligned with the starfield mood on tilleby.se. Space is large.
 * Blank screens are not the intended effect. */
#startAudio{
  background:
    radial-gradient(circle at 74% 18%, rgba(84,118,230,.12), transparent 20%),
    radial-gradient(circle at 18% 10%, rgba(180,200,255,.05), transparent 18%),
    radial-gradient(circle at 62% 82%, rgba(72,104,210,.07), transparent 22%),
    linear-gradient(180deg, rgba(2,5,16,.97), rgba(1,3,10,.985));
}
#startAudio::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 6% 10%, rgba(255,255,255,.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.18) 0 1px, transparent 1.9px),
    radial-gradient(circle at 31% 12%, rgba(180,206,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 20%, rgba(255,255,255,.16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 10%, rgba(255,255,255,.20) 0 1px, transparent 1.8px),
    radial-gradient(circle at 71% 16%, rgba(255,255,255,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 12%, rgba(175,198,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 26%, rgba(255,255,255,.15) 0 1px, transparent 1.8px),
    radial-gradient(circle at 12% 58%, rgba(255,255,255,.15) 0 1px, transparent 1.8px),
    radial-gradient(circle at 28% 66%, rgba(164,190,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 62%, rgba(255,255,255,.16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 70%, rgba(255,255,255,.14) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 61%, rgba(255,255,255,.16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 94% 74%, rgba(170,194,255,.15) 0 1px, transparent 2px);
  opacity:.78;
}
#startAudio::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 32%, rgba(255,255,255,.35) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 38% 46%, rgba(255,255,255,.28) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 61% 28%, rgba(178,204,255,.30) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 76% 42%, rgba(255,255,255,.25) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 54% 78%, rgba(255,255,255,.20) 0 .8px, transparent 1.5px);
  opacity:.46;
}
#startAudio .introPanel{position:relative;z-index:1;}


/* Release 158: the intro sky and rock now share one Babylon WebGL canvas.
   The old separate star canvas and its animation script have been removed. */
#startAudio{background:#090c13!important;isolation:isolate;}
#startAudio::before,#startAudio::after{display:none!important;}
#startAudio>#introPreview{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}
#startAudio>.introPanel{position:relative;z-index:1;}
#introArt{background:transparent!important;}
#introArt::before{display:none!important;}
#introArt canvas{display:none!important;}
/* Keep the page-wide WebGL canvas visible and exempt from old preview filters. */
#startAudio>#introPreview{filter:none!important;object-fit:fill!important;opacity:1!important;}

/* Release 160: opaque-looking glass backing with a genuine opening over the
   Babylon rock viewport. The starfield and object still use one WebGL canvas. */
#startAudio .introPanel{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  isolation:isolate;
}
#startAudio .introPanel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(7,12,26,.96),rgba(4,8,18,.94));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  clip-path:polygon(evenodd,
    0 0,100% 0,100% 100%,0 100%,0 0,
    var(--intro-hole-left,55%) var(--intro-hole-top,2%),
    var(--intro-hole-left,55%) var(--intro-hole-bottom,98%),
    var(--intro-hole-right,98%) var(--intro-hole-bottom,98%),
    var(--intro-hole-right,98%) var(--intro-hole-top,2%),
    var(--intro-hole-left,55%) var(--intro-hole-top,2%)
  );
}
#startAudio .introPanel > *{position:relative;z-index:1;}
#startAudio #introArt{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#startAudio #introArt::after{display:none!important;}
#startAudio #introArt .introGlow{opacity:.24;filter:blur(18px);}

/* Release 161: remove the foreground bloom-like DOM glow. Keep the actual
   preview transparent so the crisp Babylon mesh is not filtered by HTML. */
#startAudio #introArt .introGlow{display:none!important;}
#startAudio #introArt{filter:none!important;opacity:1!important;}
#startAudio .introPanel::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
/* Keep the return link in its original upper-right location, not below the panel. */
#startAudio .intro-home{position:absolute!important;top:14px!important;right:14px!important;left:auto!important;bottom:auto!important;margin:0!important;grid-area:auto!important;z-index:40!important;}