:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; color: #f5f3e9; background: #07162f; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100svh; display: grid; place-items: center; overflow: hidden; position: relative; isolation: isolate; background: linear-gradient(#07162f77, #07162faa), url('assets/night-sky-texture.png') center / cover; }
.brand { position: absolute; top: max(30px, env(safe-area-inset-top)); left: max(38px, env(safe-area-inset-left)); z-index: 2; font-size: 19px; font-weight: 600; letter-spacing: -.3px; text-shadow: 0 1px 10px #07162f; }
.brand > span:first-child { padding-right: 5px; }
.studio { font-weight: 400; }
.scene { position: relative; width: min(100vw, 177.777778svh); aspect-ratio: 16 / 9; }
.art { width: 100%; height: 100%; display: block; object-fit: contain; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 95%, transparent); mask-composite: intersect; }
.greeting { position: absolute; left: 34%; top: 33%; margin: 0; width: 24%; font-weight: 300; line-height: 1.15; text-shadow: 0 2px 16px #0b234e66; opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.greeting.is-visible { opacity: 1; visibility: visible; transform: none; }
.greeting span { display: block; }
.lead { font-size: clamp(18px, 1.75vw, 30px); margin-bottom: .2em; letter-spacing: .02em; }
.message { font-size: clamp(28px, 3vw, 54px); letter-spacing: -.035em; }
.host { position: absolute; left: 55%; top: 24%; width: 21%; height: 69%; padding: 0; border: 0; border-radius: 40% 40% 8% 8%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.host:focus-visible { outline: 1px solid #f9e1ad; outline-offset: 5px; }
.scene:has(.host:hover) .greeting, .scene:has(.host:focus-visible) .greeting { color: #fff4d9; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-aspect-ratio: 4/5) {
  main { min-height: max(100svh, 680px); }
  .brand { left: 24px; top: 26px; font-size: 17px; }
  .scene { position: absolute; width: 190vw; max-width: none; left: -73.5vw; top: 24%; }
  .art { mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-composite: add; }
  .greeting { left: 43%; top: -8%; width: 44%; text-align: center; }
  .lead { font-size: 22px; }
  .message { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { .greeting { transition: none; transform: none; } }