/* Radarx site: the look of the app (dark navy, electric cyan; "Mission control" and "Clean room"
 * themes of its tokens.css), plus the components used on this page. */
:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #e8eef7;
  --text: #0b1830;
  --text-dim: #3f5068;
  --border: rgba(11, 24, 48, 0.14);
  --border-strong: rgba(11, 24, 48, 0.42);
  --accent-text: #00607a;
  --accent-solid: #00607a;
  --accent-solid-hover: #004a5e;
  --on-accent: #ffffff;
  --link: #00607a;
  --link-hover: #003f52;
  --focus: #00607a;
  --glow: rgba(0, 150, 190, 0.1);
  --c-obs: #0a6b4a;
  --c-model: #2a4bb8;
  --c-ret: #5a3cc0;
  --c-sim: #8a4f00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #03060c;
    --surface: #0b1322;
    --surface-2: #121d33;
    --text: #e0ebf7;
    --text-dim: #a6b9cd;
    --border: rgba(94, 200, 235, 0.18);
    --border-strong: rgba(94, 200, 235, 0.42);
    --accent-text: #2bd9f5;
    --accent-solid: #2bd9f5;
    --accent-solid-hover: #86ecfd;
    --on-accent: #031720;
    --link: #4fd8f5;
    --link-hover: #86ecfd;
    --focus: #86ecfd;
    --glow: rgba(43, 217, 245, 0.12);
    --c-obs: #3ee3a4;
    --c-model: #8aa4ff;
    --c-ret: #b8a4ff;
    --c-sim: #ffb92e;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #03060c;
  --surface: #0b1322;
  --surface-2: #121d33;
  --text: #e0ebf7;
  --text-dim: #a6b9cd;
  --border: rgba(94, 200, 235, 0.18);
  --border-strong: rgba(94, 200, 235, 0.42);
  --accent-text: #2bd9f5;
  --accent-solid: #2bd9f5;
  --accent-solid-hover: #86ecfd;
  --on-accent: #031720;
  --link: #4fd8f5;
  --link-hover: #86ecfd;
  --focus: #86ecfd;
  --glow: rgba(43, 217, 245, 0.12);
  --c-obs: #3ee3a4;
  --c-model: #8aa4ff;
  --c-ret: #b8a4ff;
  --c-sim: #ffb92e;
}

.brand img {
  border-radius: 7px;
}
.hero {
  padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 64px);
  background: radial-gradient(ellipse 70% 60% at 75% 0%, var(--glow), transparent 70%);
}
.hero h1 {
  margin-bottom: 0.3em;
}
.hero .tagline {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  color: var(--text);
  max-width: 28ch;
  margin-bottom: 0.7em;
}
.hero .lead {
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 1.125rem;
}
.hero .btn-row {
  margin-block: 28px 18px;
}
.notice {
  font-size: 0.95rem;
  color: var(--text-dim);
  border-left: 3px solid var(--accent-text);
  padding: 2px 0 2px 14px;
  max-width: 70ch;
  margin: 0 0 1.2em;
}
.hero-shot {
  margin-top: clamp(24px, 4vw, 48px);
}
.hero-shot img {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.feature {
  display: grid;
  gap: 18px 40px;
  align-items: center;
  margin-top: clamp(32px, 5vw, 64px);
}
@media (min-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .feature:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .feature:nth-of-type(even) figure {
    order: 2;
  }
}
.feature img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.feature h3 {
  margin-bottom: 0.4em;
}
.feature p {
  color: var(--text-dim);
}
.also {
  margin-top: clamp(32px, 5vw, 56px);
}
.also ul {
  columns: 2 280px;
  column-gap: 40px;
  padding-left: 1.1em;
  color: var(--text-dim);
}
.also li {
  margin-bottom: 0.6em;
  break-inside: avoid;
}

/* Films */
.films {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}
@media (min-width: 900px) {
  .films {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}
.film h3 {
  font-size: 1.1rem;
  margin: 14px 0 0.4em;
}
.film p {
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-bottom: 0.6em;
}
.lite-yt {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.lite-yt img,
.lite-yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.lite-yt button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.lite-yt .play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(3, 6, 12, 0.82);
  border: 2px solid #86ecfd;
  border-radius: 999px;
  padding: 10px 20px 10px 16px;
  font-weight: 600;
  font-size: 1rem;
}
.lite-yt button:hover .play {
  background: rgba(3, 6, 12, 0.95);
}
.lite-yt .play svg {
  width: 20px;
  height: 20px;
  fill: #86ecfd;
}
.lite-yt button:focus-visible {
  outline: 3px solid #86ecfd;
  outline-offset: -5px;
}
.credit {
  font-size: 0.875rem;
  color: var(--text-dim);
  max-width: 90ch;
  margin-top: 28px;
}

/* Science */
.classes {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.classes .card {
  padding: 20px;
}
.classes .card p {
  margin: 0.6em 0 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.chip.obs {
  color: var(--c-obs);
  border-color: var(--c-obs);
}
.chip.model {
  color: var(--c-model);
  border-color: var(--c-model);
}
.chip.ret {
  color: var(--c-ret);
  border-color: var(--c-ret);
}
.chip.sim {
  color: var(--c-sim);
  border-color: var(--c-sim);
}
.two-col {
  display: grid;
  gap: 24px 48px;
  margin-top: 32px;
}
@media (min-width: 900px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}
.plain-list {
  padding-left: 1.2em;
  color: var(--text-dim);
}
.plain-list li {
  margin-bottom: 0.6em;
}

/* Downloads */
#downloads {
  margin-top: 24px;
}
.dl-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.dl-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  min-width: 0;
}
.dl-item.is-mine {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}
.dl-item .btn {
  width: 100%;
}
.dl-info,
.dl-sha,
.dl-meta {
  font-size: 0.875rem;
  color: var(--text-dim);
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}
.dl-meta {
  margin: 0 0 0.6em;
}
.dl-note {
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 80ch;
}
.dl-others {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 18px 0;
  background: var(--surface);
}
.dl-others summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
}
.dl-other {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
}
.dl-other h4 {
  margin: 0 0 0.2em;
  font-size: 1rem;
}
.dl-other-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.open-notes {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.open-notes h3 {
  font-size: 1.05rem;
}
.open-notes p,
.open-notes li {
  font-size: 0.95rem;
  color: var(--text-dim);
}
.open-notes ul {
  padding-left: 1.1em;
  margin: 0;
}
.pre {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 6px 0;
}
.req-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.975rem;
}
.req-table th,
.req-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.req-table th {
  width: 11rem;
  font-weight: 600;
}
.req-table td {
  color: var(--text-dim);
}
@media (max-width: 560px) {
  .req-table th,
  .req-table td {
    display: block;
    width: 100%;
    padding: 4px 0;
  }
  .req-table th {
    padding-top: 12px;
    border-bottom: 0;
  }
}

/* Legal pages */
.banner-draft {
  background: #ffe9a8;
  color: #3b2a00;
  border-bottom: 2px solid #b27600;
  padding: 12px 0;
  font-weight: 600;
  text-align: center;
}
.legal {
  max-width: 76ch;
  padding-block: 40px 72px;
}
.legal h2 {
  font-size: 1.35rem;
  margin-top: 1.8em;
}
.legal li {
  margin-bottom: 0.5em;
}

.dl-info .chip {
  display: table;
  margin-bottom: 6px;
}