/* MixBar — tokens are the ones documented in docs/BRAND.md. Dark mode moves the
   neutrals only; the gradient never changes, because it is the brand. */
:root {
  --brand-indigo: #6B5CF2;
  --brand-violet: #9E3DE3;
  --brand: linear-gradient(135deg, var(--brand-indigo), var(--brand-violet));

  --ink: #14101F;
  --muted: #6B6880;
  --surface: #FFFFFF;
  --surface-2: #F6F5FA;
  --border: #E6E3F0;

  --measure: 34rem;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #EDEAF5;
    --muted: #9B96AD;
    --surface: #0C0A14;
    --surface-2: #17141F;
    --border: #262133;
  }
}

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

/* Driven by motion.css; with no scroll timeline it stays at zero width. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 10;
  background: var(--brand);
  transform: scaleX(0);
}

body {
  margin: 0;
  padding: 0 24px;
  background: var(--surface);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-indigo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { a { color: #A79BF7; } }

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; }

/* --- hero --- */
.hero {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 88px 0 64px;
  text-align: center;
}
.hero__mark { display: block; margin: 0 auto 28px; }
.hero__name { margin: 0; font-size: clamp(3rem, 9vw, 4.25rem); font-weight: 700; }
.hero__tagline {
  margin: 10px 0 0;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 600;
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub { margin: 18px auto 0; color: var(--muted); max-width: 30rem; }
.hero__meta { margin-top: 26px; font-size: 0.875rem; color: var(--muted); }

/* --- buttons --- */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
}
.button {
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}
.button--primary {
  border-color: transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(107, 92, 242, 0.35);
}
.button:hover { transform: translateY(-1px); }
.button--primary:hover { box-shadow: 0 10px 28px rgba(107, 92, 242, 0.45); }
.button:focus-visible { outline: 2px solid var(--brand-indigo); outline-offset: 3px; }

/* Unused until a Homebrew tap exists; keep the style ready for `brew install`. */
.brew {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.875rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 11px 20px;
  white-space: nowrap;
}

/* --- hero panel --- */
/* A stand-in for the popover, so the sliders can sweep; the CSP forbids the
   style="" attributes these custom properties replace. */
.shot { max-width: 44rem; margin: 8px auto 96px; }
.shot__stage {
  display: flex;
  justify-content: center;
  padding: 52px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-indigo), var(--brand-violet), var(--brand-indigo));
  background-size: 220% 220%;
}

.panel {
  width: 340px;
  max-width: 100%;
  padding: 16px 18px 20px;
  border-radius: 14px;
  background: #242329;
  box-shadow: 0 30px 64px -22px rgba(9, 6, 18, 0.7);
  color: #F2EFF8;
  text-align: left;
}
.panel__head { padding-bottom: 12px; border-bottom: 1px solid #36343E; }
.panel__title { display: block; font-size: 1.0625rem; font-weight: 600; }
.panel__device {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  color: #9B96AD;
}

.mix { list-style: none; margin: 0; padding: 12px 0 0; }
.mix__row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  grid-template-areas: "icon name pct" "icon track track";
  align-items: center;
  column-gap: 11px;
  row-gap: 7px;
  padding: 7px 0;
  font-size: 0.875rem;
}
.mix__icon {
  grid-area: icon;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--a), var(--b));
}
.mix__name { grid-area: name; font-weight: 500; }
.mix__pct { grid-area: pct; font-variant-numeric: tabular-nums; color: #9B96AD; font-size: 0.8125rem; }
.mix__track {
  grid-area: track;
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: #4A4753;
}
.mix__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-indigo), var(--brand-violet));
}
/* The pale head is the live meter; nesting it in the fill is what stops it
   running past the knob. */
.mix__meter {
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  border-radius: 3px;
  background: #DCCFF6;
  opacity: 0.85;
}
.mix__knob {
  position: absolute;
  top: 50%;
  left: var(--level);
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.mix__row--arc     { --a: #E8C7D8; --b: #A9B6E8; --level: 100%; --in: 0.10s; }
.mix__row--discord { --a: #5865F2; --b: #3C46B8; --level: 34%;  --in: 0.18s; }
.mix__row--teams   { --a: #6264A7; --b: #4B4D82; --level: 0%;   --in: 0.26s; }
.mix__row--music   { --a: #FB5C74; --b: #E8112D; --level: 78%;  --in: 0.34s; }
.mix__row--spotify { --a: #1DB954; --b: #12833C; --level: 62%;  --in: 0.42s; }
.mix__row--vlc     { --a: #F58220; --b: #E85D04; --level: 88%;  --in: 0.50s; }

.mix__row--teams .mix__name,
.mix__row--teams .mix__icon { opacity: 0.45; }
.mix__row--teams .mix__meter { display: none; }
.mix__row--teams .mix__knob { background: #8C8896; }

/* --- screenshots --- */
/* Regenerated by tools/screenshot.sh, captured at 2x, so each image is declared
   at half its pixel size and the browser gets a Retina asset for free. */
.layouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
  align-items: end;
  margin-top: 30px;
}
.layouts figure {
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
/* Bounded by height, not width: the three layouts have very different aspect
   ratios, and equal columns would make the tallest one look like the point. */
.layouts img {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 38px -20px rgba(20, 16, 31, 0.5);
}
.layouts figcaption {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.layouts figcaption strong { color: var(--ink); font-weight: 600; }

/* --- prose sections --- */
.section { max-width: var(--measure); margin: 0 auto 88px; }
.section h2 { font-size: 1.625rem; margin: 0 0 16px; }
.section--wide { max-width: 52rem; }
.section p { margin: 0 0 16px; color: var(--muted); }
.section .lede { color: var(--ink); font-size: 1.0625rem; }
.section--flag {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 32px 16px;
  max-width: calc(var(--measure) + 64px);
}
.section--flag strong { color: var(--ink); }
.section--end { text-align: center; }
.section--end .cta { margin-top: 24px; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding-left: 46px; margin-bottom: 26px; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 1px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}
.steps h3 { margin: 0 0 4px; font-size: 1rem; }
.steps p { margin: 0; font-size: 0.9375rem; }

.status { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 20px; }
.status h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; }
.status ul { margin: 0; padding-left: 18px; font-size: 0.9375rem; }
.status li { margin-bottom: 5px; }
.note { font-size: 0.9375rem; }

/* --- footer --- */
.footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 36px 0 56px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}
.footer p { margin: 0 0 8px; }
.footer__made { font-weight: 500; color: var(--ink); }
.footer__fine { font-size: 0.8125rem; opacity: 0.8; }

@media (max-width: 30rem) {
  .hero { padding-top: 60px; }
  .status { grid-template-columns: 1fr; gap: 20px; }
  .section--flag { padding: 24px 22px 10px; }
}