@font-face{font-family:Satoshi;src:url('/fonts/satoshi-300.woff2');font-weight:300;font-display:swap}
/* Original cream and Satoshi, with the opening statement aligned left. */
.intro{inset:auto 3.4vw 80px;display:flex;justify-content:flex-start;align-items:flex-end;gap:36px;z-index:3;color:#ffffe4;transform:none;transition:opacity .45s,transform .45s}



.intro-entry{flex:0 1 auto;text-align:left;padding-bottom:2px}
.intro .intro-tagline{margin:0;font-size:clamp(36px,3.8vw,60px);font-weight:300;line-height:1.05;letter-spacing:-.015em}
.intro-tagline strong{font-weight:700}
.intro .start{display:inline-flex;align-items:center;gap:26px;margin-top:25px;border-radius:50px;padding:14px 22px;background:#ffffe4;color:#1d1d1b;font-weight:700;font-size:13px;transition:background .2s,transform .2s}
.intro .start span{margin:0;font-size:18px;font-weight:400}.intro .start:hover{background:#f7f7ef;transform:translateY(-2px)}
.intro-hint{margin:12px 0 0;font-size:10px;font-weight:400;opacity:.8}
body:not(.exploring) .vignette{background:linear-gradient(0deg,rgba(29,29,27,.9),rgba(29,29,27,.5) 18%,transparent 48%),linear-gradient(180deg,rgba(29,29,27,.25),transparent 25%)}
body:not(.exploring) .map,body:not(.exploring) .zoom-controls,body:not(.exploring) .bottom-bar,body:not(.exploring) .touch-controls,body:not(.exploring) #jump-button,body:not(.exploring) #world-labels,body:not(.exploring) #interact{visibility:hidden}
body:not(.exploring) .signature{visibility:hidden}
.topbar{z-index:4;pointer-events:none}
.topbar .signature,.topbar nav{pointer-events:auto}
.topbar nav{position:relative;border-radius:200px;overflow:hidden;isolation:auto;box-shadow:0 12px 40px #1d1d1b40;padding:5px 10px;gap:3px}
.topbar nav>button{position:relative;z-index:3;background:transparent;color:#f7f7ef;padding:11px 18px;font-size:13px;text-shadow:0 1px 4px #1d1d1b70}
.topbar nav>button:hover{background:#f7f7ef18}.topbar nav .speech-glass-warp{background:rgba(29,29,27,.12)}
body:not(.exploring) .topbar nav{position:absolute;left:50%;transform:translateX(-50%);top:0;white-space:nowrap}
body:not(.exploring) #home-button{color:#ffffe4;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
body:not(.exploring) #sound-toggle{right:3.4vw;bottom:20px;background:#1d1d1b60;border-color:#ffffe430;color:#ffffe4}
.exploring .intro{transform:translateY(18px);visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s .35s}
@media(max-width:900px){.intro{gap:20px}.intro .intro-tagline{font-size:38px}.intro .start{font-size:12px;padding:12px 18px}.intro-hint{font-size:9px}.topbar nav>button{padding:11px 14px}}
@media(max-width:600px){
  .intro{inset:auto 20px 76px;flex-direction:column;align-items:flex-start;gap:22px;text-align:left}
  
  .intro-entry{text-align:left}.intro .intro-tagline{font-size:clamp(28px,7.7vw,38px);line-height:1.1}.intro .start{margin-top:20px;padding:13px 21px}.intro-hint{font-size:10px}
  .topbar nav{padding:4px 6px;gap:0}.topbar nav>button{padding:10px 12px;font-size:12px}.topbar nav #work-button span{font-size:8px;margin-left:4px}
  .exploring .signature{display:none}.exploring .topbar{justify-content:center}
  body:not(.exploring) #sound-toggle{right:16px;bottom:15px}
}
@media(max-height:550px) and (min-width:601px){.intro{bottom:48px}.intro .start{margin-top:16px;padding:10px 18px}.intro-hint{display:none}}
@media(prefers-reduced-motion:reduce){.intro,.intro .start{transition:none}}