/* Critical startup tokens: available before the JavaScript application loads. */
:root {
  --startup-background: hsl(225 33% 6%);
  --startup-foreground: hsl(210 40% 98%);
  --startup-primary: hsl(180 100% 50%);
  --startup-groove: hsl(180 100% 50% / 0.12);
  --startup-orbit: hsl(320 100% 60% / 0.8);
  --startup-disc: hsl(224 15% 8%);
}
html, body { margin: 0; background: var(--startup-background); }
.sonetra-splash {
  min-height: 100dvh; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; padding: 24px; background: var(--startup-background);
  color: var(--startup-foreground); font-family: ui-sans-serif, system-ui, sans-serif;
}
.sonetra-splash-content {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  animation: sonetra-arrive 350ms ease-out both;
}
.sonetra-startup-label { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sonetra-startup-title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: 0; }
.sonetra-startup-title span { color: var(--startup-primary); }
.sonetra-startup-meter { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 24px; color: var(--startup-primary); }
.sonetra-loader { gap: 9%; vertical-align: middle; animation: none !important; }
.sonetra-loader > span {
  width: 12%; height: 80%; border-radius: 999px; background: currentColor;
  transform: scaleY(0.35); animation: sonetra-meter 1.1s ease-in-out infinite;
}
.sonetra-loader > span:nth-child(2) { animation-delay: -0.7s; }
.sonetra-loader > span:nth-child(3) { animation-delay: -0.4s; }
.sonetra-loader > span:nth-child(4) { animation-delay: -0.85s; }
.sonetra-loader > span:nth-child(5) { animation-delay: -0.2s; }
.sonetra-record {
  width: 208px; height: 208px; position: relative; display: grid; place-items: center;
  border-radius: 50%; background: var(--startup-disc); border: 1px solid var(--startup-groove);
}
.sonetra-record-groove {
  position: absolute; inset: 20px; border-radius: 50%; border: 1px solid var(--startup-groove);
  box-shadow: 0 0 0 9px var(--startup-disc), 0 0 0 10px var(--startup-groove), inset 0 0 0 9px var(--startup-disc), inset 0 0 0 10px var(--startup-groove);
}
.sonetra-record-orbit {
  position: absolute; inset: -1px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--startup-primary); border-bottom-color: var(--startup-orbit);
  animation: sonetra-turn 3s linear infinite;
}
.sonetra-record-logo { position: relative; width: 96px; height: 96px; border-radius: 50%; }
@keyframes sonetra-meter { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes sonetra-turn { to { transform: rotate(360deg); } }
@keyframes sonetra-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .sonetra-splash-content, .sonetra-record-orbit, .sonetra-loader > span { animation: none; }
  .sonetra-loader > span:nth-child(even) { transform: scaleY(0.7); }
  .sonetra-loader > span:nth-child(3) { transform: scaleY(1); }
}