:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2f1ec;
  background: #030405;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 42%, #16212755, transparent 58%), #030405;
}
a { color: inherit; text-decoration: none; }
button {
  min-height: 44px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

main {
  position: relative;
  display: flex;
  min-height: calc(100svh - 65px);
  max-width: 880px;
  margin: auto;
  padding: 26px 22px 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.identity {
  opacity: 1;
  text-align: center;
}
h1 {
  position: relative;
  opacity: .75;
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
  font-size: clamp(68px, 12vw, 112px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: normal;
  text-shadow: 0 0 32px #dcecff24;
}
h1 .brand-name {
  position: relative;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
h1 .domain {
  margin-left: .08em;
  color: inherit;
  font-family: inherit;
  font-size: .25em;
  font-weight: inherit;
  letter-spacing: 0;
}
.trademark {
  position: absolute;
  top: .05em;
  left: 100%;
  color: #bac1c4;
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}
.identity p {
  margin: 14px 0 0;
  opacity: .8;
  color: #fff;
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 2.2px;
}

.sky {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 310px;
  margin-top: 12px;
}
.languages { position: relative; height: 100%; }
.available a {
  position: absolute;
  min-width: 120px;
  padding: 18px 14px;
  background: radial-gradient(ellipse, #15212c70, transparent 70%);
  font-size: 22px;
  text-align: center;
  text-shadow: 0 0 23px #d9ebff60;
  left: calc(var(--orbit-x, 50%) - 60px);
  top: var(--orbit-y, 45%);
}
.upcoming {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-content: center;
  gap: 22px 10px;
}
.upcoming a {
  min-height: 54px;
  padding: 18px 4px;
  color: #bdc6ce;
  font-size: 16px;
  text-align: center;
}
.status {
  margin: 0 0 4px;
  color: #949fa7;
  font-size: 11px;
  letter-spacing: 1px;
}
.switch { padding: 10px 18px; color: #dce3e7; font-size: 12px; }
.ui-icon {
  width: 17px;
  height: 17px;
  margin-left: 9px;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
  vertical-align: middle;
}
.orbit-icon ellipse, .intro-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}
.orbit-icon circle, .intro-icon path {
  fill: currentColor;
  stroke: none;
}

footer {
  position: relative;
  display: flex;
  min-height: 65px;
  max-width: 1200px;
  margin: auto;
  padding: 6px 26px 15px;
  align-items: center;
  justify-content: space-between;
  color: #849099;
  font-size: 8px;
  letter-spacing: 2px;
}
footer button { font-size: 11px; letter-spacing: 0; }
.footer-brand { display: flex; align-items: center; gap: 10px; letter-spacing: .5px; }
.footer-brand sup { margin-left: 2px; font-size: 7px; }
.logo-mark { position: relative; display: inline-flex; }
.logo-mark img { width: 26px; height: 44px; object-fit: contain; }
.logo-mark sup { position: absolute; top: 0; left: 100%; font-size: 7px; }
.classic-film {
  display: flex;
  min-height: 44px;
  padding: 0 6px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0;
}

@media (max-width: 600px) {
  .ui-icon { width: 16px; height: 16px; margin-left: 7px; }
}

a:hover, button:hover { color: #e1c49d; text-shadow: 0 0 20px #fff8; }
a:focus-visible, button:focus-visible {
  border-radius: 4px;
  outline: 2px solid #d4bc95;
  outline-offset: 3px;
}
[hidden] { display: none !important; }

.intro {
  position: fixed;
  z-index: 2;
  inset: 0;
  background: #000;
  pointer-events: none;
}
.intro canvas { display: block; width: 100%; height: 100%; }
body.playing main, body.playing footer { visibility: hidden; }
body.revealed .identity { animation: identity-fade 1.8s .65s ease-out both; }
body.revealed .sky { animation: selector-fade .8s ease-out both; }
body.more .sky { animation: none; }

.starlight {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.starlight i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1px;
  height: 1px;
  border-radius: 50%;
  opacity: var(--star-dim, .06);
  background: #dbeaff;
  box-shadow: 0 0 4px #dcefff70;
  animation: twinkle var(--star-speed, var(--duration)) ease-in-out var(--star-delay, var(--delay)) infinite alternate;
}
.starlight i:nth-child(13n) {
  width: 2px;
  height: 2px;
  box-shadow: 0 0 7px #deedff77;
}
.languages a { animation: float-language 24s linear infinite; }
.languages a:nth-child(2n) { animation-delay: -7s; animation-duration: 29s; }
.languages a:nth-child(3n) { animation-delay: -11s; animation-duration: 32s; }
.languages:hover a, .languages:focus-within a { animation-play-state: paused; }
.comet {
  position: absolute;
  width: 95px;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #e6f3ff);
  filter: drop-shadow(0 0 4px #b9daff);
  transform: rotate(30deg);
  transform-origin: right center;
}
.comet.shoot { animation: shooting-star 1.5s ease-out forwards; }

@keyframes identity-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes selector-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes twinkle {
  from { opacity: var(--star-dim, .04); transform: scale(.8); }
  to { opacity: var(--star-bright, .28); transform: scale(var(--star-scale, 1.15)); }
}
@keyframes float-language {
  0%, 100% { transform: translate(18px, 0); }
  12.5% { transform: translate(12.7px, 8.5px); }
  25% { transform: translate(0, 12px); }
  37.5% { transform: translate(-12.7px, 8.5px); }
  50% { transform: translate(-18px, 0); }
  62.5% { transform: translate(-12.7px, -8.5px); }
  75% { transform: translate(0, -12px); }
  87.5% { transform: translate(12.7px, -8.5px); }
}
@keyframes shooting-star {
  0% { opacity: 0; transform: translate(-80px, -46px) rotate(30deg); }
  15% { opacity: .65; }
  100% { opacity: 0; transform: translate(240px, 139px) rotate(30deg); }
}

@media (max-width: 600px) {
  main { padding-top: 20px; }
  .sky { height: 295px; max-width: 360px; }
  .available a { min-width: 104px; font-size: 19px; }
  .available a { left: calc(var(--orbit-x, 50%) - 52px); }
  .status { margin-top: 24px; }
  .upcoming { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; padding: 8px 4px; }
  .upcoming a { min-height: 48px; padding: 7px 2px; font-size: 14px; }
  footer { padding-inline: 22px; letter-spacing: 1px; }
  .identity p { font-size: 10px; letter-spacing: 2px; }
}

@media (max-width: 360px) {
  footer { gap: 5px; padding-inline: 14px; }
  .footer-brand { gap: 6px; font-size: 7px; }
  .classic-film { font-size: 9px; }
}

@media (max-height: 650px) {
  main { padding-top: 10px; }
  h1 { font-size: 64px; }
  .sky { height: 265px; }
  .status { margin-top: 16px; }
}

@media (max-height: 460px) and (min-width: 601px) {
  main { padding: 10px; }
  .identity h1 { font-size: 58px; }
  .identity p { margin-top: 4px; }
  .sky { height: 150px; margin: 0; }
  .available a { padding: 10px; font-size: 18px; }
  .status { margin: 12px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}