/* Fonts: the app's own (SIL Open Font License 1.1, see /fonts/LICENSES.txt),
   as Latin WOFF2 served from this site. Orbitron comes in its six static
   weights; the rest are variable, one file for every weight. While a font is
   being chosen, <html data-font="…"> picks one; a browser only downloads the
   font in use. */
@font-face { font-family: "Orbitron"; src: url("/fonts/orbitron-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Regular */
@font-face { font-family: "Orbitron"; src: url("/fonts/orbitron-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* Medium */
@font-face { font-family: "Orbitron"; src: url("/fonts/orbitron-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* SemiBold */
@font-face { font-family: "Orbitron"; src: url("/fonts/orbitron-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Bold */
@font-face { font-family: "Orbitron"; src: url("/fonts/orbitron-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* ExtraBold */
@font-face { font-family: "Orbitron"; src: url("/fonts/orbitron-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* Black */
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space_grotesk.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage_grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument_sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("/fonts/chivo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm_plex_sans.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains_mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* Designs: Dark (the default), Warm and White, picked by <html data-design="…">. */
:root {
  --radius: 14px;
  --max: 1080px;
  /* The default pair, after Framer's: Outfit for headings (geometric, like GT
     Walsheim), Instrument Sans for everything else (neutral, like Inter). */
  --display: "Instrument Sans", system-ui, sans-serif;
  --heading: "Outfit", "Instrument Sans", system-ui, sans-serif;
}
[data-font="orbitron"] { --display: "Orbitron", system-ui, sans-serif; --heading: "Orbitron", system-ui, sans-serif; }
[data-font="space-grotesk"] { --display: "Space Grotesk", system-ui, sans-serif; --heading: "Space Grotesk", system-ui, sans-serif; }
[data-font="sora"] { --display: "Sora", system-ui, sans-serif; --heading: "Sora", system-ui, sans-serif; }
[data-font="outfit"] { --display: "Outfit", system-ui, sans-serif; --heading: "Outfit", system-ui, sans-serif; }
[data-font="manrope"] { --display: "Manrope", system-ui, sans-serif; --heading: "Manrope", system-ui, sans-serif; }
[data-font="bricolage"] { --display: "Bricolage Grotesque", system-ui, sans-serif; --heading: "Bricolage Grotesque", system-ui, sans-serif; }
[data-font="instrument"] { --display: "Instrument Sans", system-ui, sans-serif; --heading: "Instrument Sans", system-ui, sans-serif; }
[data-font="chivo"] { --display: "Chivo", system-ui, sans-serif; --heading: "Chivo", system-ui, sans-serif; }
[data-font="plex"] { --display: "IBM Plex Sans", system-ui, sans-serif; --heading: "IBM Plex Sans", system-ui, sans-serif; }
[data-font="fraunces"] { --display: "Fraunces", Georgia, serif; --heading: "Fraunces", Georgia, serif; }
[data-font="jetbrains"] { --display: "JetBrains Mono", ui-monospace, monospace; --heading: "JetBrains Mono", ui-monospace, monospace; }
:root, [data-design="dark"] {
  --bg: #0a0a0a;
  --panel: #141414;
  --panel-2: #1b1b1b;
  --line: #2a2a2a;
  --text: #f2f2f2;
  --muted: #9a9a9a;
  --accent: #f2f2f2;
  --accent-2: #bdbdbd;
  --hot: #ffffff;
  --on-accent: #0a0a0a;
  --glow: 255, 255, 255;
  --ok: #9fe3b4;
  --header: rgba(10, 10, 10, 0.85);
}
[data-design="warm"] {
  --bg: #0d0a08;
  --panel: #17120e;
  --panel-2: #1f1813;
  --line: #33281f;
  --text: #f6eee8;
  --muted: #b3a497;
  --accent: #ff6a1a;
  --accent-2: #ffb347;
  --hot: #ffe08a;
  --on-accent: #160b03;
  --glow: 255, 106, 26;
  --ok: #9be37a;
  --header: rgba(13, 10, 8, 0.85);
}
[data-design="white"] {
  --bg: #ffffff;
  --panel: #f6f6f4;
  --panel-2: #eeeeea;
  --line: #e1e1dc;
  --text: #111111;
  --muted: #5c5c58;
  --accent: #111111;
  --accent-2: #55554f;
  --hot: #a8a8a0;
  --on-accent: #ffffff;
  --glow: 0, 0, 0;
  --ok: #2f9e44;
  --header: rgba(255, 255, 255, 0.85);
}
[data-design="white"] { color-scheme: light; }
/* Black glows read as smudges on white: keep them faint. */
[data-design="white"] .hero::before { opacity: 0.45; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.2px;
}

a { color: var(--accent-2); }
a:hover { color: var(--text); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: 0.2px; }
.brand span { color: var(--accent-2); }
.nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }

/* Hero */
.hero { padding: 72px 0 40px; }
.hero h1 { font-size: clamp(26px, 4.4vw, 46px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.5px; }
.hero p.lead { font-size: 19px; color: var(--muted); max-width: 640px; margin: 0 0 28px; }
.eyebrow { color: var(--accent-2); font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; margin: 0 0 12px; }

.buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  font-family: var(--display); letter-spacing: 0.4px;
  display: inline-block; padding: 12px 20px; border-radius: 999px;
  text-decoration: none; font-size: 14px;
  border: 1px solid var(--line); color: var(--text); background: var(--panel);
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn:hover { border-color: var(--accent-2); }
.btn:not(.primary):hover { color: var(--text); }

/* The weights: Regular body, Medium nav and notes, SemiBold card titles,
   Bold buttons and emphasis, ExtraBold section titles, Black headlines. */
.nav a, .plan .year, .plan .size, .shots figcaption, footer { font-weight: 500; }
h3, .eyebrow, .plan .name { font-weight: 600; }
strong, .btn { font-weight: 700; }
h2, .doc h1, .doc h2 { font-weight: 800; }
.brand, .hero h1, .plan .price, .steps li::before { font-weight: 900; }
.hero h1 { letter-spacing: 0; }
h2, .doc h1 { letter-spacing: 0.3px; }
h3 { font-size: 15px; letter-spacing: 0.3px; }
.doc p, .doc li { font-size: 14.5px; }

/* Sections */
section { padding: 40px 0; }
h2 { font-size: 28px; margin: 0 0 12px; letter-spacing: -0.2px; }
h3 { font-size: 18px; margin: 0 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card p { margin: 0; color: var(--muted); }

.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.shots figure { margin: 0; }
.shots img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.shots figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Pricing */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.plan.featured { border-color: var(--accent); }
.plan .name { font-size: 20px; }
.plan .size { color: var(--accent-2); margin: 4px 0 14px; }
.plan .price { font-size: 30px; }
.plan .price small { font-size: 15px; color: var(--muted); font-weight: 400; }
.plan .year { color: var(--muted); font-size: 14px; margin-top: 2px; }
.trial {
  margin-top: 16px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px dashed var(--accent);
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}

ul.ticks { padding-left: 20px; margin: 8px 0 0; }
ul.ticks li { margin: 4px 0; }

/* Legal pages */
.doc { max-width: 760px; padding: 48px 0; }
.doc h1 { font-size: 34px; margin: 0 0 6px; }
.doc h2 { font-size: 21px; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--text); opacity: 0.88; }
.doc .updated { color: var(--muted); margin: 0 0 24px; }

/* Footer */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 28px 0 40px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); }

@media (max-width: 560px) {
  .top .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; gap: 8px; }
  .nav { margin-left: 0; gap: 14px; }
  .hero { padding: 44px 0 24px; }
  .shots { grid-template-columns: 1fr 1fr; }
}

/* An embedded tool (the AutoEQ ranking): tall enough to use without
   scrolling inside it on a laptop, and never wider than the page. */
.embed {
  display: block; width: 100%; height: max(900px, calc(100vh - 120px));
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin-bottom: 10px;
}

/* ── Motion (js/site.js, with Motion from motion.dev) ─────────────────────
   Everything below is decoration: with "reduce motion" on, or without
   JavaScript, the page is the same page, standing still. The head's inline
   script adds .motion only when it is wanted, and takes it away again if
   site.js has not started within a few seconds. */

.motion .hero > :not(.spectrum),
.motion .grid > *, .motion .plans > *, .motion .shots > *, .motion .steps > li,
.motion section > h2, .motion section > p, .motion .trial, .motion .ticks,
.motion .period, .motion section > .card, .motion .doc > * { opacity: 0; }

/* The scroll progress bar along the top. */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--hot));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* The hero's spectrum: bars that move like a visualizer behind the words. */
.hero { position: relative; isolation: isolate; }
.hero > :not(.spectrum) { position: relative; z-index: 1; }
.spectrum {
  position: absolute; z-index: 0; right: 0; bottom: 12px; width: min(560px, 70%); height: 230px;
  display: flex; align-items: flex-end; gap: 4px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 85%, transparent);
  opacity: 0.55;
}
.spectrum .bar { flex: 1; height: 100%; display: flex; align-items: flex-end; transform-origin: 50% 100%; }
.spectrum .bar i {
  display: block; width: 100%; height: 100%; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(0deg, var(--accent) 0%, var(--accent-2) 70%, var(--hot) 100%);
  transform-origin: 50% 100%; transform: scaleY(0.2);
}
@media (max-width: 560px) { .spectrum { width: 100%; height: 150px; opacity: 0.32; } }

/* A soft light that follows the pointer over the hero and over cards. */
.hero::before {
  content: ""; position: absolute; inset: -40px -20px; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(var(--glow), 0.16), transparent 60%);
}
.card, .plan { position: relative; overflow: hidden; }
.card::after, .plan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--glow), 0.12), transparent 65%);
}
.card:hover::after, .plan:hover::after { opacity: 1; }

/* Headline words, each its own span so they can arrive one by one. */
.word { display: inline-block; white-space: pre; }

/* Screenshots tilt in 3D under the pointer. */
.shots figure { perspective: 900px; }
.shots img { transform-style: preserve-3d; will-change: transform; }

/* Monthly / yearly. Hidden without JavaScript, where both prices show. */
.period {
  position: relative; display: inline-flex; gap: 0; padding: 4px; margin: 4px 0 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.period button {
  position: relative; z-index: 1; font: inherit; font-weight: 700; font-size: 13px;
  color: var(--muted); background: none; border: 0; padding: 9px 16px; border-radius: 999px; cursor: pointer;
}
.period button[aria-pressed="true"] { color: var(--on-accent); }
.period .save { color: var(--ok); font-weight: 600; margin-left: 4px; }
.period button[aria-pressed="true"] .save { color: var(--on-accent); opacity: 0.8; }
.period-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--accent); }
.plan .amount { display: inline-block; font-variant-numeric: tabular-nums; }

.btn { will-change: transform; }
.motion .steps li::before { transform: scale(0); }
.motion .steps li.pop::before { animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
/* Jumping to #pricing lands below the sticky header, smoothly unless motion is reduced. */
section[id] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The featured plan breathes, in whichever design is on. */
.plan.featured.breathing { animation: breathe 2.4s ease-in-out 1s infinite alternate; }
@keyframes breathe { from { box-shadow: 0 0 0 rgba(var(--glow), 0); } to { box-shadow: 0 0 36px rgba(var(--glow), 0.35); } }

/* The design picker: a row of swatches, bottom right, on every page. */
.designs {
  position: fixed; z-index: 30; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px;
  background: var(--header); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.designs a { color: var(--muted); text-decoration: none; margin-right: 2px; }
.designs a:hover { color: var(--text); }
.designs button {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--line); background: var(--sw-bg);
  position: relative; overflow: hidden;
}
.designs button::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--sw-accent); }
.designs button[aria-pressed="true"] { border-color: var(--text); transform: scale(1.15); }
@media (max-width: 560px) { .designs { left: 16px; right: 16px; justify-content: center; } }
footer { padding-bottom: 90px; }

/* The designs page: every design side by side, live. */
.gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gallery article { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery .preview { position: relative; aspect-ratio: 1280 / 820; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.gallery iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 820px; border: 0; transform-origin: 0 0; pointer-events: none; }
.gallery .info { padding: 16px 18px 18px; }
.gallery .info p { margin: 4px 0 12px; color: var(--muted); font-size: 14px; }
button.btn { cursor: pointer; }
.designs select {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; margin-left: 4px; max-width: 150px; cursor: pointer;
}

/* The designs page's font samples. */
.fonts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fonts article { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.fonts .sample-title { font-size: 26px; line-height: 1.15; font-weight: 800; margin: 0 0 8px; }
.fonts .sample-body { color: var(--muted); font-size: 15px; margin: 0 0 6px; }
.fonts .sample-weights { color: var(--text); font-size: 15px; margin: 0 0 14px; }
.fonts .sample-weights span { margin-right: 8px; }
.fonts .name { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent-2); margin: 0 0 10px; }

/* ── Liquid glass navigation, after the app's tab bar ─────────────────────
   Clear glass, not a frosted pane: a light blur, the page bent at the rim
   (an SVG lens, in Chromium, where backdrop-filter takes url(); elsewhere
   the same glass without the bend), a bright rim, a top reflection and a
   glint. A lens bubble slides to the current page and follows the pointer.
   On phones the menu becomes a floating tab bar at the bottom, as in the app. */
:root, [data-design="dark"], [data-design="warm"] {
  /* Lays a little of the page colour under the glass, as the app's lens does,
     so text behind it cannot read through and fight the labels. */
  --glass-tint: color-mix(in srgb, var(--bg) 45%, transparent);
  --glass-rim: rgba(255, 255, 255, 0.55);
  --glass-rim-low: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --glass-bubble: rgba(255, 255, 255, 0.12);
}
[data-design="white"] {
  --glass-tint: color-mix(in srgb, var(--bg) 72%, transparent);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-rim-low: rgba(0, 0, 0, 0.10);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  --glass-bubble: rgba(0, 0, 0, 0.06);
}

.top { background: none; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; top: 12px; pointer-events: none; }
.top .wrap { max-width: calc(var(--max) + 40px); }

.glass {
  position: relative; isolation: isolate; pointer-events: auto;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(9px) saturate(170%);
          backdrop-filter: blur(9px) saturate(170%);
  border-radius: 999px;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-low),
    inset 0 0 0 1px var(--glass-rim-low);
}
.lens .glass {
  -webkit-backdrop-filter: url(#tryptify-lens) blur(9px) saturate(170%);
          backdrop-filter: url(#tryptify-lens) blur(9px) saturate(170%);
}
/* The rim: bright along the top-left, fading round, like light on a lens. */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, var(--glass-rim), transparent 35%, transparent 65%, var(--glass-rim-low));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* The reflection across the top half, and a glint that follows the pointer. */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120px 40px at var(--gx, 18%) 0%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 55%);
  mix-blend-mode: screen;
}
[data-design="white"] .glass::after { mix-blend-mode: normal; opacity: 0.8; }

.top .wrap.glass { height: 58px; padding: 0 10px 0 22px; margin-top: 0; }
.nav { position: relative; gap: 2px; }
.nav a { position: relative; z-index: 1; padding: 8px 14px; border-radius: 999px; transition: color 0.2s; }
.nav-bubble {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; pointer-events: none;
  background: var(--glass-bubble);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-rim-low);
  opacity: 0;
}
main { padding-top: 12px; }

@media (max-width: 560px) {
  .top .wrap.glass { height: 52px; padding: 0 18px; flex-wrap: nowrap; margin: 0 12px; width: auto; }
  /* The menu leaves the header for a floating tab bar at the bottom. */
  .nav {
    position: fixed; z-index: 25; left: 12px; right: 12px; bottom: 14px; margin: 0;
    display: flex; justify-content: space-between; flex-wrap: nowrap; gap: 0; padding: 6px;
  }
  .nav a { flex: 1 1 0; min-width: 0; text-align: center; padding: 10px 2px; font-size: 11px; letter-spacing: 0; white-space: nowrap; }
  .designs { bottom: 92px; }
  .nav a { color: color-mix(in srgb, var(--text) 78%, transparent); }
  .nav a[aria-current="page"] { color: var(--text); }
  footer { padding-bottom: 170px; }
}

/* ── The AutoEQ ranking (js/autoeq.js) ─────────────────────────────────── */
.rank-controls { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin-bottom: 14px; }
.rank-group { display: flex; flex-direction: column; gap: 6px; }
.rank-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button, .rank-select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
}
.chips button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.rank-select { color: var(--text); padding-right: 30px; }
.rank-desc { margin: 4px 0 16px; }
.rank-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.rank-row {
  position: relative; display: grid; align-items: center; gap: 4px 16px;
  grid-template-columns: 40px 1fr auto; grid-template-areas: "n who value" "n side side" "bar bar bar";
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 12px;
}
.rank-row.ours { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rank-n { grid-area: n; font-family: var(--display); font-weight: 900; font-size: 24px; color: var(--muted); }
.rank-row.first .rank-n { color: var(--accent-2); }
.rank-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rank-who strong { font-weight: 700; }
.rank-who small { color: var(--muted); font-size: 12px; }
.rank-side { grid-area: side; color: var(--muted); font-size: 13px; }
.rank-value { grid-area: value; font-family: var(--display); font-weight: 800; font-size: 22px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank-bar { grid-area: bar; display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.rank-row:not(.ours) .rank-bar i { background: var(--muted); opacity: 0.6; }
@media (max-width: 560px) {
  .rank-row { grid-template-columns: 30px 1fr auto; padding: 12px 14px 10px; }
  .rank-value { font-size: 17px; }
  .rank-n { font-size: 20px; }
}
.mono { font-family: ui-monospace, "JetBrains Mono", monospace; word-break: break-all; letter-spacing: 0; }

/* ── Your Cloud (/account, js/account.js) ──────────────────────────────── */
.acct-auth { max-width: 460px; }
.acct-auth .btn { width: 100%; text-align: center; }
.acct-or { text-align: center; margin: 14px 0 6px; }
.acct-form { display: grid; gap: 12px; margin: 8px 0; }
.acct-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.acct-form input, #lib-search {
  font: inherit; font-size: 15px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%;
}
.acct-form input:focus, #lib-search:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.acct-msg { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); }
.bad, .acct-msg.bad { color: #ff6b6b; }
[data-design="white"] .bad, [data-design="white"] .acct-msg.bad { color: #c92a2a; }
.acct-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 8px; }
.acct-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.acct-head h2 { margin: 0; }
#lib-search { max-width: 340px; }
.meter { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin: 12px 0 6px; }
.meter.small { height: 5px; margin: 6px 0 0; }
.meter i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: transform 0.2s; }
#plan-card .buttons { margin-top: 12px; }
#plan-list .plan .buttons { margin-top: 12px; }
#plan-list .plan .btn { padding: 9px 14px; font-size: 13px; }
.drop {
  display: grid; place-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 36px 20px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--panel);
  transition: border-color 0.2s, background 0.2s;
}
.drop.over, .drop:hover { border-color: var(--accent-2); background: var(--panel-2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.queue, .songs, .devices { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.q-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.q-item .meter { grid-column: 1 / -1; }
.q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-item.failed .q-status { color: #ff6b6b; }
.q-item.done .q-status { color: var(--ok); }
.song { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 8px; }
.song .cover { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--panel-2); }
.song-text { display: grid; min-width: 0; }
.song-text strong, .song-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-facts { white-space: nowrap; }
.icon-btn, .copy {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}
.icon-btn:hover, .copy:hover { color: var(--text); border-color: var(--accent-2); }
.device { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
@media (max-width: 560px) {
  .song { grid-template-columns: 44px 1fr auto; }
  .song-facts { display: none; }
  .device { grid-template-columns: 1fr auto; }
  .device .muted { display: none; }
}
.plan-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 12px 0; }


/* ── Pro: the restrained, Framer-like layer ─────────────────────────────
   Medium weights, tight headline tracking, neutral body text, quiet cards,
   white pill buttons, one big glowing showcase. Orbitron stays in the
   wordmark only. Later rules here deliberately override the ones above. */
body { font-size: 16px; line-height: 1.6; letter-spacing: -0.006em; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .doc h1, .plan .name, .plan .price, .rank-value, .rank-n, .fonts .sample-title { font-family: var(--heading); }
.brand, .hero h1, .plan .price, .steps li::before { font-weight: 600; }
.hero h1 { font-weight: 500; font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.045em; max-width: 14ch; margin: 0 0 22px; }
h2, .doc h1 { font-weight: 500; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.035em; }
.doc h2 { font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
h3 { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.hero p.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 600px; color: var(--muted); }
.eyebrow { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.hero .eyebrow { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.hero { padding: 96px 0 40px; }
section { padding: 56px 0; }

/* The brand: the app's tile and an Orbitron wordmark. */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); text-decoration: none; }
.brand .mark { width: 28px; height: 28px; flex: none; }
.brand .mark-tile { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.2; }
[data-design="white"] .brand .mark-tile { stroke: none; }
.brand .wordmark { font-family: "Orbitron", var(--heading); font-weight: 600; letter-spacing: 0.04em; font-size: 15px; }

/* Menu: small, quiet text. */
.nav a { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }

/* Buttons: a solid pill and a soft one. */
.btn { font-family: var(--display); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; padding: 11px 20px; border: 1px solid transparent; background: color-mix(in srgb, var(--text) 9%, transparent); }
.btn:not(.primary):hover { background: color-mix(in srgb, var(--text) 14%, transparent); border-color: transparent; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { color: var(--bg); opacity: 0.92; }

/* Cards: near-black panels with a hairline edge. */
.card, .plan, .rank-row, .song, .device, .q-item, .gallery article, .fonts article {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  border-radius: 18px;
}
.card { padding: 26px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; line-height: 1.6; }
.grid { gap: 14px; }

/* The showcase: one big panel, lit from below by the spectrum, the app inside. */
.showcase-wrap { padding-top: 8px; }
.showcase {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(var(--glow), 0.30), transparent 70%),
    radial-gradient(500px circle at var(--mx, 50%) var(--my, 40%), rgba(var(--glow), 0.08), transparent 60%),
    color-mix(in srgb, var(--panel) 85%, var(--bg));
  padding: 64px 24px 0;
  min-height: 520px;
}
.showcase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.spectrum-slot { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; }
.spectrum-slot .spectrum {
  position: absolute; inset: 0; width: 100%; height: 100%; right: auto; bottom: auto; opacity: 0.5;
  display: flex; align-items: flex-end; gap: 3px; padding: 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.shots.fan { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: 0; grid-template-columns: none; }
.shots.fan figure { width: min(23%, 230px); flex: none; margin: 0 -1.2%; }
.shots.fan figure:nth-child(1), .shots.fan figure:nth-child(4) { margin-top: 56px; z-index: 1; }
.shots.fan figure:nth-child(2), .shots.fan figure:nth-child(3) { z-index: 2; }
.shots.fan img { border-radius: 26px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); }
.shots.fan figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 560px) {
  .hero { padding: 56px 0 24px; }
  .showcase { padding: 36px 8px 0; min-height: 0; border-radius: 22px; }
  .shots.fan figure { width: 30%; margin: 0 -3%; }
  .shots.fan figure:nth-child(1) { display: none; }
  .shots.fan figure:nth-child(4) { margin-top: 36px; }
  .shots.fan figure:nth-child(2) { margin-top: 36px; }
  .shots.fan img { border-radius: 16px; }
}

/* The footer: small and grey. */
footer { font-size: 13.5px; }
.grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── The measures, explained (js/measures.js) ──────────────────────────── */
.explain { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: 4px 0 18px; }
.explain-kicker { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.explain h3 { font-size: 20px; margin: 0 0 8px; }
.explain-text p { margin: 0 0 10px; font-size: 15px; }
.explain-good { color: var(--text); font-weight: 600; font-size: 14px !important; }
.explain-visual, .measure-viz { border-radius: 14px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); }
.mviz { display: block; width: 100%; height: auto; overflow: visible; }
.mviz .axis { stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1; }
.mviz .edge { stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-dasharray: 3 4; }
.mviz .ceiling { stroke: #ff6b6b; stroke-width: 1.4; stroke-dasharray: 5 4; }
.mviz .line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mviz .line.thick { stroke-width: 9; }
.mviz .main { stroke: var(--text); }
.mviz .target { stroke: color-mix(in srgb, var(--text) 38%, transparent); stroke-dasharray: 5 5; }
.mviz .alt { stroke: var(--accent-2); }
[data-design="dark"] .mviz .alt, :root:not([data-design]) .mviz .alt { stroke: #8fb6ff; }
.mviz .track { fill: none; stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 9; stroke-linecap: round; }
.mviz .gap { fill: color-mix(in srgb, var(--text) 16%, transparent); }
.mviz .zone { fill: color-mix(in srgb, var(--text) 6%, transparent); }
.mviz .arrow { stroke: #ffb347; stroke-width: 2.4; }
.mviz .dot { fill: var(--text); }
.mviz .needle .line { stroke-width: 3; }
.mviz text { font-family: var(--display); fill: var(--text); }
.mviz .lbl { font-size: 10.5px; font-weight: 600; }
.mviz .lbl.muted { fill: var(--muted); font-weight: 500; }
.mviz .lbl.pop { fill: #ffb347; }
.mviz .tick { font-size: 9px; fill: var(--muted); }
[data-design="white"] .mviz .arrow, [data-design="white"] .mviz .lbl.pop { stroke: #d9480f; fill: #d9480f; }
[data-design="white"] .mviz .lbl.pop { stroke: none; }
.measures { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.measure {
  display: grid; gap: 8px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 18px; padding: 14px 14px 18px;
  transition: border-color 0.2s, transform 0.2s;
}
.measure:hover { border-color: color-mix(in srgb, var(--text) 25%, transparent); transform: translateY(-2px); }
.measure[aria-pressed="true"] { border-color: var(--text); }
.measure strong { font-family: var(--heading); font-weight: 600; font-size: 16px; letter-spacing: -0.015em; margin-top: 4px; }
.measure span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.measure small { color: var(--text); font-size: 12px; font-weight: 600; opacity: 0.8; }
@media (max-width: 720px) { .explain { grid-template-columns: 1fr; } }

/* ── The AutoEQ graphs (js/graphs.js) ──────────────────────────────────── */
:root {
  --c-ts: #2fe0b3; --c-tp: #a6e22e; --c-ap: #ff4f8b; --c-as: #ffb02e; --c-sq: #5aa9ff;
}
[data-design="white"] { --c-ts: #0ca678; --c-tp: #5c940d; --c-ap: #d6336c; --c-as: #e67700; --c-sq: #1c7ed6; }
.g-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.g-key {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text); background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; padding: 6px 12px;
}
.g-key[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
.g-key i, .g-tip i { width: 14px; height: 3px; border-radius: 2px; background: currentColor; display: inline-block; }
.s-target { color: var(--text); } .s-raw { color: var(--muted); }
.s-ts { color: var(--c-ts); } .s-tp { color: var(--c-tp); } .s-ap { color: var(--c-ap); } .s-as { color: var(--c-as); } .s-sq { color: var(--c-sq); }
.g-key.s-target i { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.g-card { background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 18px; padding: 18px 18px 10px; margin-bottom: 14px; }
.g-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 8px; }
.g-head h3 { margin: 0; }
.g-box { position: relative; }
.graph { display: block; width: 100%; height: auto; touch-action: pan-y; }
.graph .g-h, .graph .g-v { stroke: color-mix(in srgb, var(--text) 7%, transparent); stroke-width: 1; }
.graph .g-v.major { stroke: color-mix(in srgb, var(--text) 13%, transparent); }
.graph .g-zero { stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 1.2; }
.graph .g-tick { font-family: var(--display); font-size: 13px; fill: var(--muted); }
.graph .g-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.graph .g-line.s-target { stroke-dasharray: 7 6; stroke-width: 2; opacity: 0.75; }
.graph .g-line.s-raw { stroke-width: 2; opacity: 0.7; }
.graph .g-cursor { stroke: var(--text); stroke-width: 1; opacity: 0.45; }
.g-tip {
  position: absolute; top: 10px; z-index: 2; pointer-events: none; display: grid; grid-template-columns: auto auto; gap: 3px 12px; align-items: center;
  font-size: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.g-tip strong { grid-column: 1 / -1; font-size: 12.5px; }
.g-tip span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.g-tip b { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .graph .g-tick { font-size: 20px; } .g-card { padding: 12px 8px 6px; } }

/* ── The AutoEQ try-out (js/tryout.js) ─────────────────────────────────── */
.try { display: grid; gap: 16px; }
.try-search { position: relative; display: grid; gap: 8px; }
#hp-search { font: inherit; font-size: 16px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; width: 100%; }
#hp-search:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.try-search .small { margin: 0; }
.link { color: var(--accent-2); text-decoration: underline; cursor: pointer; }
.hp-results {
  position: absolute; z-index: 5; left: 0; right: 0; top: 76px; max-height: 340px; overflow: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.hp-results li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.hp-results li:hover, .hp-results li.on { background: color-mix(in srgb, var(--text) 8%, transparent); }
.hp-results li span { white-space: nowrap; }
.try-controls { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.try-controls label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.try-controls select { font: inherit; font-size: 14px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; width: 100%; }
.try-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 8px; }
.try-stats div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.try-stats strong { font-family: var(--heading); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.try-legend { margin: 10px 0 4px; }
.try-legend .g-key { cursor: default; }
.try-bands { display: grid; gap: 12px; margin-top: 8px; }
#try-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#try-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
#try-table td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
.acct-auth #discord { margin-top: 8px; }
.explain-tryptify { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.explain-tryptify p { font-size: 14.5px !important; }
.explain-place { font-weight: 600; color: var(--text); }
.explain-place.wins { color: var(--c-ts); }