/* BeRoTracker website — one stylesheet, no external fonts, no frameworks. */

:root {
  color-scheme: dark;

  --bg: #0a0d11;
  --panel: #101520;
  --panel-2: #131a25;
  --line: #202834;
  --line-soft: #19202a;
  --text: #e4ebf3;
  --muted: #8f9caf;
  --dim: #6a7787;

  --cyan: #34dbef;
  --cyan-deep: #10a8c8;
  --green: #3ddc9a;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 14px;
  --page: 1200px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(1000px 560px at 82% -8%, rgba(52, 219, 239, .10), transparent 62%),
    radial-gradient(820px 520px at 4% 6%, rgba(61, 220, 154, .06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(1200px 700px at 50% 0%, #000 0%, transparent 75%);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

a:hover {
  color: #7ceaf8;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(52, 219, 239, .28);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  margin: 0;
}

.wrap {
  width: min(100% - 40px, var(--page));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}

.lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 64ch;
}

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(10, 13, 17, .78);
  border-bottom: 1px solid var(--line-soft);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -.01em;
  margin-right: auto;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.nav {
  display: flex;
  gap: 22px;
  font-size: 14.5px;
}

.nav a {
  color: var(--muted);
}

.nav a:hover {
  color: var(--text);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.btn-primary {
  background: linear-gradient(180deg, #43e0f2, #12aecd);
  color: #04191f;
  box-shadow: 0 8px 26px rgba(24, 178, 208, .22);
}

.btn-primary:hover {
  color: #04191f;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(24, 178, 208, .3);
}

.btn-ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, .02);
  color: var(--text);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: #33404f;
  background: rgba(255, 255, 255, .045);
}

.btn-small {
  padding: 8px 14px;
  font-size: 14px;
}

.btn .sz {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  opacity: .72;
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding: clamp(46px, 7vw, 84px) 0 clamp(40px, 6vw, 72px);
}

/* The picture keeps its own width where there is room for it, so its pixels stay whole. */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: clamp(32px, 4vw, 48px);
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
}

.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(61, 220, 154, .8);
}

.hero h1 {
  font-size: clamp(42px, 6.4vw, 66px);
  font-weight: 800;
  margin: 18px 0 16px;
}

.hero h1 span {
  background: linear-gradient(100deg, #eaf6fb 8%, var(--cyan) 52%, var(--green) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  font-size: 18px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 18px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dim);
}

.hero-meta span::before {
  content: "› ";
  color: var(--cyan-deep);
}

/* --------------------------------------------------- the screenshot  */

.shot {
  margin: 0;
}

.shot a {
  display: block;
  max-width: 639px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  transition: border-color .18s ease;
}

.shot a:hover {
  border-color: #33404f;
}

.shot img {
  display: block;
  width: 100%;
}

/* Where the picture stands at its own size, its pixels are best left alone. */
@media (min-width: 1240px) {
  .shot img {
    image-rendering: pixelated;
  }
}

/* On a narrow screen it would be shrunk into mush, so it keeps its size and is pushed sideways. */
@media (max-width: 720px) {
  .shot a {
    overflow-x: auto;
  }

  .shot img {
    width: 639px;
    max-width: none;
  }
}

.shot figcaption {
  margin-top: 13px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 58ch;
}

.shot figcaption em {
  font-style: normal;
  color: var(--muted);
}

/* -------------------------------------------------------------- sections */

section.band {
  padding: clamp(52px, 7vw, 92px) 0;
  border-top: 1px solid var(--line-soft);
}

.head {
  max-width: 720px;
  margin-bottom: 38px;
}

.head h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-bottom: 14px;
}

/* Three to a row where there is room: nine cards go up evenly, four to a row leave one alone. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0)) var(--panel);
  padding: 24px 22px;
  transition: border-color .18s ease, transform .18s ease;
}

.card:hover {
  border-color: #2c3d4c;
  transform: translateY(-2px);
}

.card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.card p {
  color: var(--muted);
  font-size: 14.8px;
  line-height: 1.62;
}

.ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(52, 219, 239, .22);
  background: rgba(52, 219, 239, .07);
  margin-bottom: 16px;
}

.ico svg {
  width: 19px;
  height: 19px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------- spec tables */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.spec {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 8px 22px;
}

.spec dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 0;
}

.spec dt,
.spec dd {
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  margin: 0;
}

.spec dl > dt:first-of-type,
.spec dl > dt:first-of-type + dd {
  border-top: 0;
}

.spec dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  padding-right: 18px;
  line-height: 1.9;
}

.spec dd {
  color: var(--muted);
  font-size: 14.8px;
}

.spec dd b {
  color: var(--text);
  font-weight: 600;
}

/* --------------------------------------------------------------- formats */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  border-radius: 7px;
  padding: 3px 9px;
}

.chip.own {
  border-color: rgba(61, 220, 154, .35);
  background: rgba(61, 220, 154, .09);
  color: #9df0cd;
}

.note {
  color: var(--dim);
  font-size: 14px;
  margin-top: 26px;
  max-width: 78ch;
}

/* A heading over one of several spec blocks inside the same section, where .head would be too
   loud for it. The note under it belongs to it and moves up against it. */
.subhead {
  font-size: 17px;
  margin: 40px 0 0;
}

.subhead + .note {
  margin-top: 8px;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------- palettes */

.palettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.pal {
  margin: 0;
}

.pal figcaption {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 7px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.pal figcaption em {
  font-style: normal;
  color: var(--green);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.swatches {
  display: flex;
  height: 26px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.swatches i {
  flex: 1;
}

/* -------------------------------------------------------------- download */

.dl {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(560px 220px at 88% 0%, rgba(52, 219, 239, .1), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)) var(--panel);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

.dl h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 12px;
}

.dl .file {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px;
  display: grid;
  gap: 4px;
}

.dl .file span {
  color: var(--dim);
  overflow-wrap: anywhere;
}

.dl .file b {
  color: var(--text);
  font-weight: 500;
}

code {
  font-family: var(--mono);
  font-size: .92em;
  color: #cfe6ee;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 5px;
}

pre {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
  background: #0c1119;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0;
}

pre .p {
  color: var(--cyan-deep);
  user-select: none;
}

pre .c {
  color: var(--dim);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.steps > div {
  display: flex;
  flex-direction: column;
}

.steps pre {
  flex: 1;
}

.steps h3 {
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 600;
}

/* ---------------------------------------------------------------- footer */

.site-foot {
  border-top: 1px solid var(--line-soft);
  padding: 34px 0 44px;
  color: var(--dim);
  font-size: 14px;
}

.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}

.site-foot .sep {
  margin-left: auto;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav {
    display: none;
  }

  .dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card:hover,
  .btn:hover {
    transform: none;
  }
}