:root {
  color-scheme: dark;
  --bg: #06111f;
  --bg-alt: #0b1728;
  --panel: rgba(10, 19, 33, 0.84);
  --panel-strong: rgba(9, 16, 29, 0.96);
  --panel-soft: rgba(15, 24, 40, 0.74);
  --ink: #edf4ff;
  --muted: #9fb1cf;
  --line: rgba(146, 163, 184, 0.18);
  --line-strong: rgba(148, 163, 184, 0.36);
  --accent: #56c6ff;
  --accent-2: #f97316;
  --accent-3: #8b5cf6;
  --green: #2adf8f;
  --red: #ff647c;
  --amber: #f6c667;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --topbar-h: 82px;
  --track-glow: linear-gradient(135deg, rgba(86, 198, 255, 0.22), rgba(139, 92, 246, 0.16), rgba(249, 115, 22, 0.18));
  --track-line: #dfe8ff;
  --track-surface: rgba(5, 10, 18, 0.72);
  --car-shadow: 0 14px 26px rgba(0, 0, 0, 0.45);
  --sun: radial-gradient(circle at 36% 36%, #fffceb 0 14%, #fff2a1 24%, #ffd15a 43%, #ff9f1a 72%, #ff7600 100%);
  --moon: radial-gradient(circle at 38% 38%, #fefefe 0 15%, #cbd5e1 37%, #7f8ea3 70%, #5a6678 100%);
  --star: #fffaf1;
  --soft-shadow: 0 14px 30px rgba(16, 24, 40, 0.24);
  font-family: "Bahnschrift", "Segoe UI", sans-serif;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #eef4fb;
  --bg-alt: #f8fbff;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.72);
  --ink: #10192d;
  --muted: #54627a;
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.16);
  --accent: #0ea5e9;
  --accent-2: #ea580c;
  --accent-3: #6d28d9;
  --green: #15803d;
  --red: #dc2626;
  --amber: #b45309;
  --shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  --track-line: #1f2c44;
  --track-surface: rgba(245, 248, 253, 0.92);
  --car-shadow: 0 14px 26px rgba(15, 23, 42, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(86, 198, 255, 0.13), transparent 25%),
    radial-gradient(circle at top right, rgba(249, 115, 22, 0.13), transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  color: var(--ink);
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-radius: 999px;
  min-height: 42px;
  padding: 0 18px;
  cursor: pointer;
}

button:hover,
a:hover {
  transform: translateY(-1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(86, 198, 255, 0.35);
  outline-offset: 3px;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-radius: 14px;
  min-height: 46px;
  padding: 0 14px;
}

select option {
  color: #10192d;
}

.bg-orb {
  position: fixed;
  inset: auto;
  border-radius: 999px;
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.bg-orb-a {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -160px;
  background: rgba(86, 198, 255, 0.16);
}

.bg-orb-b {
  width: 340px;
  height: 340px;
  right: -100px;
  top: 160px;
  background: rgba(249, 115, 22, 0.12);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--topbar-h);
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(5, 10, 18, 0.75), rgba(5, 10, 18, 0.48));
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

[data-theme="light"] .topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58));
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(140deg, rgba(86, 198, 255, 0.95), rgba(139, 92, 246, 0.95));
  box-shadow: var(--soft-shadow);
}

.topnav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.topnav a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 999px;
}

.topnav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ghost-button,
.primary-button,
.secondary-button {
  border-radius: 999px;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 800;
}

.ghost-button {
  background: rgba(255, 255, 255, 0.05);
}

.primary-button {
  background: linear-gradient(135deg, var(--accent), #3b82f6);
  color: white;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25);
}

.secondary-button {
  background: rgba(255, 255, 255, 0.08);
}

.count-pill,
.badge,
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
}

.count-pill {
  min-width: 28px;
  justify-content: center;
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 0.74rem;
}

.badge {
  padding: 7px 11px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--accent);
}

.live-badge {
  color: white;
  background: linear-gradient(135deg, rgba(42, 223, 143, 0.3), rgba(86, 198, 255, 0.28));
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1600px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 26px 0 40px;
}

.hero-grid,
.dashboard-grid,
.analysis-grid,
.docs-grid {
  display: grid;
  gap: 18px;
}

.hero-grid {
  grid-template-columns: 1.25fr 1fr;
  margin-bottom: 18px;
}

.dashboard-grid {
  grid-template-columns: 1.4fr 0.9fr;
  margin-bottom: 18px;
}

.analysis-grid {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
}

.docs-grid {
  grid-template-columns: 1fr 1fr;
}

.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 70%, rgba(255, 255, 255, 0.08));
  opacity: 0.55;
}

.hero-copy,
.setup-card,
.track-panel,
.scoreboard-card,
.command-card,
.events-card,
.chart-card,
.analysis-card,
.doc-card {
  padding: 22px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 800;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  max-width: 12ch;
}

.lede {
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.7;
  margin: 18px 0 0;
}

.status-row,
.hero-actions,
.mini-metrics,
.setup-toolbar,
.command-actions,
.track-indicators {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.status-row {
  margin-top: 20px;
}

.status-chip {
  padding: 8px 12px;
  color: var(--muted);
  font-size: 0.86rem;
}

.status-chip strong {
  color: var(--ink);
}

.hero-actions {
  margin-top: 20px;
}

.mini-metrics {
  margin-top: 22px;
}

.mini-metrics > div {
  min-width: 145px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
}

.mini-metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.mini-metrics strong {
  display: block;
  margin-top: 8px;
  font-size: 1.25rem;
}

.setup-card,
.track-panel,
.chart-card,
.analysis-card,
.scoreboard-card,
.command-card,
.events-card,
.doc-card {
  min-width: 0;
}

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.card-heading h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.setup-toolbar {
  margin-bottom: 16px;
}

.setup-toolbar label,
.command-label,
.modal-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.team-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 12px;
}

.team-card.active {
  border-color: rgba(86, 198, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(86, 198, 255, 0.18), 0 18px 40px rgba(59, 130, 246, 0.14);
}

.team-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.team-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-title strong {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.team-title span {
  color: var(--muted);
  font-size: 0.8rem;
}

.team-badge {
  min-width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 900;
  color: white;
  box-shadow: var(--car-shadow);
}

.team-card .row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 700;
}

.chip.active {
  background: linear-gradient(135deg, rgba(86, 198, 255, 0.24), rgba(139, 92, 246, 0.18));
  border-color: rgba(86, 198, 255, 0.4);
  color: var(--ink);
}

.button-set {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.button-set button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.team-card .description {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.track-panel {
  min-height: 640px;
}

.track-stage {
  position: relative;
  min-height: 556px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--track-surface);
  overflow: hidden;
}

.track-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 80px);
  opacity: 0.45;
}

.track-svg {
  position: relative;
  width: 100%;
  height: 556px;
  display: block;
}

.race-path,
.race-path-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.race-path {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 76;
}

.race-path-glow {
  stroke: url(#trackGlow);
  stroke-width: 84;
  stroke-dasharray: 14 10;
  animation: drift 12s linear infinite;
  filter: drop-shadow(0 0 14px rgba(86, 198, 255, 0.16));
}

.track-markers circle {
  fill: rgba(255, 255, 255, 0.88);
  filter: url(#nodeGlow);
}

#carLayer g {
  transform-origin: center;
}

.car {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34));
}

.car-body {
  rx: 18;
  ry: 18;
}

.car-wing {
  fill: rgba(255, 255, 255, 0.88);
}

.car-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  fill: white;
}

.car-panel {
  fill: rgba(8, 15, 29, 0.8);
  stroke: rgba(255, 255, 255, 0.38);
}

.track-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  gap: 10px;
  width: min(230px, calc(100% - 32px));
}

.overlay-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(5, 11, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

[data-theme="light"] .overlay-card {
  background: rgba(255, 255, 255, 0.75);
}

.overlay-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.overlay-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
}

.side-panel {
  display: grid;
  gap: 18px;
}

.scoreboard {
  display: grid;
  gap: 10px;
}

.score-row {
  display: grid;
  grid-template-columns: 54px 1.2fr repeat(3, minmax(0, 0.6fr));
  gap: 10px;
  align-items: center;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.score-row.leader {
  border-color: rgba(42, 223, 143, 0.36);
  box-shadow: inset 0 0 0 1px rgba(42, 223, 143, 0.1);
}

.position-pill {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, rgba(86, 198, 255, 0.96), rgba(139, 92, 246, 0.96));
}

.driver-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.driver-stack strong {
  font-size: 0.98rem;
}

.driver-stack span {
  color: var(--muted);
  font-size: 0.8rem;
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.stat-block span {
  color: var(--muted);
  font-size: 0.76rem;
}

.stat-block strong {
  font-size: 0.92rem;
}

.command-label input {
  margin-top: 2px;
}

.command-hint,
.doc-copy,
.doc-list {
  color: var(--muted);
  line-height: 1.7;
}

.command-hint code {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

.event-feed,
.notification-list {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
  padding-right: 6px;
}

.event-item,
.notification-item {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.event-item strong,
.notification-item strong {
  display: block;
  margin-bottom: 4px;
}

.event-item span,
.notification-item span {
  color: var(--muted);
  font-size: 0.84rem;
}

.chart-board {
  display: grid;
  gap: 16px;
  grid-template-columns: 1.1fr 0.9fr;
}

.chart-box {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.chart-box h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.chart-box svg {
  width: 100%;
  height: 250px;
  display: block;
}

.analysis-grid-cells {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analysis-cell {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
}

.analysis-cell span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.analysis-cell strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.analysis-cell p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.92rem;
}

.doc-list {
  margin: 0;
  padding-left: 18px;
}

.modal {
  border: none;
  border-radius: 28px;
  padding: 0;
  background: transparent;
  color: inherit;
  width: min(840px, calc(100vw - 24px));
}

.modal::backdrop {
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(6px);
}

.modal-card {
  border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  box-shadow: var(--shadow);
  padding: 22px;
}

.modal-card-wide {
  min-height: 320px;
}

.modal-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  padding: 0;
}

.toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
}

.toast {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(86, 198, 255, 0.25);
  background: rgba(7, 13, 24, 0.95);
  box-shadow: var(--shadow);
}

[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.96);
}

.toast strong {
  display: block;
  margin-bottom: 4px;
}

.toast span {
  color: var(--muted);
  font-size: 0.86rem;
}

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(4, 11, 20, 0.88), rgba(16, 25, 40, 0.88));
  box-shadow: var(--soft-shadow);
}

[data-theme="light"] .theme-toggle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.96));
}

.theme-track {
  width: 92px;
  height: 44px;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(180deg, #07101f, #0f2037);
  overflow: hidden;
}

[data-theme="light"] .theme-track {
  background: linear-gradient(180deg, #fef3c7, #fbd38d);
}

.theme-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transform: translateX(0);
  background: var(--moon);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .theme-knob {
  transform: translateX(48px);
  background: var(--sun);
}

.theme-moon,
.theme-sun,
.theme-star {
  position: absolute;
  inset: 0;
}

.theme-moon::before,
.theme-sun::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.theme-moon::before {
  background:
    radial-gradient(circle at 34% 35%, rgba(255, 255, 255, 0.94) 0 3px, transparent 3px),
    radial-gradient(circle at 63% 68%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.76) 0 2px, transparent 2px);
  opacity: 1;
}

.theme-sun::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 4px, transparent 4px),
    conic-gradient(from 0deg, rgba(255, 255, 255, 0.95) 0 10deg, transparent 10deg 20deg, rgba(255, 255, 255, 0.95) 20deg 30deg, transparent 30deg 40deg, rgba(255, 255, 255, 0.95) 40deg 50deg, transparent 50deg 60deg, rgba(255, 255, 255, 0.95) 60deg 70deg, transparent 70deg 80deg, rgba(255, 255, 255, 0.95) 80deg 90deg, transparent 90deg 100deg, rgba(255, 255, 255, 0.95) 100deg 110deg, transparent 110deg 120deg, rgba(255, 255, 255, 0.95) 120deg 130deg, transparent 130deg 140deg, rgba(255, 255, 255, 0.95) 140deg 150deg, transparent 150deg 160deg, rgba(255, 255, 255, 0.95) 160deg 170deg, transparent 170deg 180deg, rgba(255, 255, 255, 0.95) 180deg 190deg, transparent 190deg 200deg, rgba(255, 255, 255, 0.95) 200deg 210deg, transparent 210deg 220deg, rgba(255, 255, 255, 0.95) 220deg 230deg, transparent 230deg 240deg, rgba(255, 255, 255, 0.95) 240deg 250deg, transparent 250deg 260deg, rgba(255, 255, 255, 0.95) 260deg 270deg, transparent 270deg 280deg, rgba(255, 255, 255, 0.95) 280deg 290deg, transparent 290deg 300deg, rgba(255, 255, 255, 0.95) 300deg 310deg, transparent 310deg 320deg, rgba(255, 255, 255, 0.95) 320deg 330deg, transparent 330deg 340deg, rgba(255, 255, 255, 0.95) 340deg 350deg, transparent 350deg 360deg);
  opacity: 0;
  transform: scale(0.78);
}

[data-theme="light"] .theme-moon {
  opacity: 0;
}

[data-theme="light"] .theme-sun {
  opacity: 1;
}

.theme-sun {
  opacity: 0;
}

.theme-star {
  opacity: 0;
}

.theme-star::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
  animation: blink 1.9s ease-in-out infinite;
}

.theme-star-a::before {
  width: 5px;
  height: 5px;
  left: 6px;
  top: 6px;
}

.theme-star-b::before {
  width: 4px;
  height: 4px;
  left: 18px;
  top: 10px;
  animation-delay: 0.5s;
}

.theme-star-c::before {
  width: 4px;
  height: 4px;
  left: 10px;
  top: 22px;
  animation-delay: 0.9s;
}

[data-theme="dark"] .theme-star {
  opacity: 1;
}

[data-theme="dark"] .theme-sun {
  opacity: 0;
}

[data-theme="light"] .theme-star {
  opacity: 0;
}

.theme-label {
  font-weight: 800;
  letter-spacing: 0.02em;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes drift {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -240;
  }
}

@media (max-width: 1300px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .topnav,
  .top-actions {
    justify-content: flex-start;
  }

  .hero-grid,
  .dashboard-grid,
  .analysis-grid,
  .docs-grid {
    grid-template-columns: 1fr;
  }

  .chart-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .shell {
    width: min(100vw - 18px, 100vw);
    padding-top: 16px;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .score-row {
    grid-template-columns: 48px 1fr;
  }

  .score-row .stat-block {
    align-items: flex-start;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .track-stage,
  .track-svg {
    min-height: 460px;
    height: 460px;
  }
}