/* Shared stylesheet for all pages. */

/* Bundled Font Awesome icon glyphs (self-hosted, no CDN dependency). */
@font-face{font-family:"FA-Local";src:url("../fonts/FontAwesome.otf") format("opentype");font-style:normal;font-weight:400;font-display:block}
.fa-solid,.fa-brands{display:inline-block;font-family:"FA-Local"!important;font-style:normal;font-weight:400!important;font-variant:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased;flex-shrink:0}
.fa-solid::before,.fa-brands::before{display:inline-block}
.fa-arrow-left::before{content:"\f060"}
.fa-arrow-right::before{content:"\f061"}
.fa-bolt::before{content:"\f0e7"}
.fa-check::before{content:"\f00c"}
.fa-chrome::before{content:"\f268"}
.fa-circle-check::before{content:"\f058"}
.fa-circle-play::before{content:"\f144"}
.fa-circle-question::before{content:"\f059"}
.fa-computer-mouse::before{content:"\f245"}
.fa-expand::before{content:"\f065"}
.fa-film::before{content:"\f008"}
.fa-gamepad::before{content:"\f11b"}
.fa-list::before{content:"\f03a"}
.fa-lock::before{content:"\f023"}
.fa-microphone-lines::before{content:"\f130"}
.fa-moon::before{content:"\f186"}
.fa-music::before{content:"\f001"}
.fa-play::before{content:"\f04b"}
.fa-puzzle-piece::before{content:"\f12e"}
.fa-rotate-right::before{content:"\f01e"}
.fa-scale-balanced::before{content:"\f24e"}
.fa-sliders::before{content:"\f1de"}
.fa-table-cells-large::before{content:"\f00a"}
.fa-video::before{content:"\f03d"}
.fa-volume-high::before{content:"\f028"}
.fa-window-restore::before{content:"\f2d2"}
.fa-xmark::before{content:"\f00d"}
.fa-keyboard::before{content:"\f11c"}
.fa-circle-info::before{content:"\f05a"}
.fa-shield::before{content:"\f132"}
.fa-headphones::before{content:"\f025"}
.fa-volume-low::before{content:"\f027"}
.fa-triangle-exclamation::before{content:"\f071"}
.fa-laptop::before{content:"\f109"}
.fa-globe::before{content:"\f0ac"}
.fa-download::before{content:"\f019"}
.fa-headset::before{content:"\f1b9"}
.fa-arrows-left-right::before{content:"\f07e"}
.fa-gear::before{content:"\f013"}
.fa-shield-halved::before{content:"\f132"}
.fa-microphone::before{content:"\f130"}
.fa-rotate::before{content:"\f021"}
.fa-display::before{content:"\f108"}
.fa-volume-xmark::before{content:"\f026"}
.fa-circle-pause::before{content:"\f28b"}
.fa-lightbulb::before{content:"\f0eb"}
.fa-window-maximize::before{content:"\f2d0"}
/* Platform logos used by the interactive website demo. */
.fa-youtube::before{content:"\f167"}
.fa-spotify::before{content:"\f1bc"}
.fa-twitch::before{content:"\f1e8"}

.fa-soundcloud::before{content:"\f1be"}
.fa-vimeo::before{content:"\f27d"}

.fa-envelope::before{content:"\f0e0"}

.fa-ellipsis::before{content:"\f141"}

.fa-arrow-up::before{content:"\f062"}

/* Compare navigation icon */
.fa-exchange::before { content: "\f0ec"; }
.fa-right-left::before {
  content: "\f362";
}
/* Main website styles */
/* Consistent modern typography across the public site. */
:root {
  --bg:#04060f;
  --s1:#080d1c;
  --s2:#0d1430;
  --ln:rgba(255,255,255,.09);
  --ln2:rgba(120,150,255,.28);
  --tx:#f4f6ff;
  --mu:#97a3cc;
  --b:#3d7cff;
  --v:#7a5cff;
  --c:#38d4ff;
  --am:#ffc83d;
  --g:linear-gradient(110deg,#427dff 0%,#626cff 52%,#8060f5 100%);
  --f:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif
}
* {
  box-sizing:border-box;
  margin:0
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:84px
}
body {
  background:var(--bg);
  color:var(--tx);
  font:400 17px/1.65 var(--f);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
ul {
  list-style:none;
  padding:0
}
:focus-visible {
  outline:2px solid var(--c);
  outline-offset:3px;
  border-radius:8px
}
.w {
  width:min(1180px,100% - 40px);
  margin-inline:auto
}
i.fa-solid,i.fa-brands {
  flex:none;
  line-height:1
}
h1,h2,h3 {
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.06
}
h1 {
  font-size:clamp(2.7rem,6.4vw,5rem)
}
h2 {
  font-size:clamp(2rem,4vw,3.1rem)
}
h3 {
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.25
}
.gr {
  background:linear-gradient(100deg,#5b9bff,#8b6cff 60%,#b48cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.ey {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  font-weight:600;
  color:#a9b8ff;
  background:rgba(61,124,255,.1);
  border:1px solid var(--ln2);
  border-radius:99px;
  padding:6px 14px;
  margin-bottom:22px
}
.ey::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 10px var(--c)
}
.lead {
  color:var(--mu);
  font-size:1.2rem;
  max-width:30em
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:52px;
  padding:0 26px;
  border-radius:14px;
  font-weight:700;
  font-size:1rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s,box-shadow .2s,background .2s
}
.bp {
  background:var(--g);
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 24px -6px rgba(61,124,255,.7)
}
.bp:hover {
  transform:translateY(-1px);
  filter:brightness(1.055);
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 10px 26px -8px rgba(100,105,255,.55)
}
.bg {
  border-color:var(--ln2);
  background:rgba(255,255,255,.03);
  color:#dbe3ff
}
.bg:hover {
  background:rgba(255,255,255,.08)
}
.bs {
  height:42px;
  padding:0 18px;
  font-size:.92rem;
  border-radius:12px
}
.ch {
  font-size:22px
}
/* header */
header {
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(4,6,15,.8);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--ln)
}
.nv {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:70px;
  gap:24px
}
.br {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  font-size:1.12rem;
  letter-spacing:-.02em
}
.lgi {
  width:38px;
  height:38px;
  border-radius:10px;
  display:block;
  flex:none;
  box-shadow:0 6px 18px -4px rgba(61,124,255,.7)
}
.lg {
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--g);
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 6px 18px -4px rgba(61,124,255,.8)
}
.nv nav ul {
  display:flex;
  font-size:.94rem;
  font-weight:600;
  color:var(--mu)
}
.nv nav a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  transition:.15s
}
.nv nav a i {
  color:#6f8fff;
  font-size:.95em
}
.nv nav a:hover {
  color:#fff;
  background:rgba(255,255,255,.06)
}
.nv nav ul {
  gap:8px
}
/* hero */
.hero {
  position:relative;
  padding:76px 0 56px;
  overflow-x:clip
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(var(--ln) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--ln) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask:radial-gradient(70% 60% at 70% 30%,#000,transparent);
  mask:radial-gradient(70% 60% at 70% 30%,#000,transparent);
  opacity:.55;
  pointer-events:none
}
.hero::after {
  content:"";
  position:absolute;
  width:760px;
  height:760px;
  right:-120px;
  top:-180px;
  background:radial-gradient(closest-side,rgba(61,100,255,.35),transparent);
  pointer-events:none
}
.hg {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:60px;
  align-items:center
}
.hero h1 {
  margin-bottom:22px
}
.cta {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:34px 0 26px
}
.ck {
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  color:var(--mu);
  font-size:.95rem;
  font-weight:500
}
.ck li {
  display:flex;
  align-items:center;
  gap:8px
}
.ck i {
  color:var(--c);
  font-size:1.15rem
}
.st {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:42px;
  border:1px solid var(--ln);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  overflow:hidden
}
.st div {
  padding:16px 18px;
  border-right:1px solid var(--ln)
}
.st div:last-child {
  border:0
}
.st b {
  display:block;
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1
}
.st span {
  font-size:.8rem;
  color:var(--mu);
  font-weight:500
}
/* popup */
.sg {
  position:relative
}
.wv {
  position:absolute;
  left:-90px;
  top:-40px;
  width:calc(100% + 180px);
  height:calc(100% + 80px);
  margin:0;
  z-index:-1;
  opacity:.9
}
.vuw {
  width:394px;
  max-width:100%;
  margin-inline:auto;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(0,0,0,.65),0 40px 90px -20px rgba(0,10,60,.9),0 18px 50px -20px rgba(22,137,255,.4);
  background:#07162d
}
@media(max-width:460px) {
  .vuw {
    zoom:.86
  }
}
@media(max-width:400px) {
  .vuw {
    zoom:.78
  }
}
@media(max-width:350px) {
  .vuw {
    zoom:.68
  }
}
/* real extension popup, styles taken from the extension's popup.css */
@font-face {
  font-family:UiFont;
  src:url("../fonts/ClearSans-Regular.ttf") format("truetype");
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:UiFont;
  src:url("../fonts/ClearSans-Medium.ttf") format("truetype");
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:UiFont;
  src:url("../fonts/ClearSans-Bold.ttf") format("truetype");
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:FontAwesomeLocal;
  src:url("../fonts/FontAwesome.otf") format("opentype");
  font-weight:400;
  font-display:block
}
.vu {
  line-height:normal;
  text-align:left;
  margin:0;
  letter-spacing:normal;
  text-transform:none;
  -webkit-font-smoothing:auto
}
.vu h1,.vu h2,.vu p {
  text-wrap:wrap
}
.vf {
  display:grid
}
.vu {
  font-family:UiFont,"Segoe UI",Arial,sans-serif;
  font-weight:400;
  font-synthesis:none;
}
.vu * {
  box-sizing:border-box
}
.vu [hidden] {
  display:none!important
}
.vu .fa-icon {
  font-family:FontAwesomeLocal!important;
  font-style:normal;
  font-weight:400!important;
  line-height:1;
  display:inline-block;
  flex-shrink:0
}
.vu {
  width:392px;
  margin:0;
  font-size:13px;
  --bg:#07162d;
  --bg-accent:rgba(101,123,255,.12);
  --panel:#0f2241;
  --panel-2:#142b52;
  --panel-3:#102544;
  --border:#28456f;
  --border-strong:#3c5b8e;
  --text:#f3f7ff;
  --sub:#9cb0d1;
  --muted:#7890b4;
  --accent:#7d8fff;
  --accent-2:#5d74ff;
  --success:#52d0a9;
  --danger:#f07b8f;
  --footer:#112643;
  --shadow:0 10px 30px rgba(0,0,0,.28);
  color:var(--text);
  background:var(--bg);
  color-scheme:dark;
}
.vu[data-theme="light"] {
  --bg:#f4f7fc;
  --bg-accent:rgba(95,118,255,.08);
  --panel:#ffffff;
  --panel-2:#f4f7fd;
  --panel-3:#eef3fb;
  --border:#dbe3ef;
  --border-strong:#c4d0e3;
  --text:#132338;
  --sub:#60748f;
  --muted:#8091a7;
  --accent:#5469f6;
  --accent-2:#435af0;
  --success:#14916a;
  --danger:#d14a67;
  --footer:#f2f5fb;
  --shadow:0 10px 24px rgba(42,63,95,.10);
  color-scheme:light;
}
.vu .card {
  min-height:520px;
  padding:20px 18px 14px;
  background:radial-gradient(circle at 0 0,var(--bg-accent),transparent 34%),var(--bg);
}
.vu .header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.vu .brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}
.vu .logo {
  width:44px;
  height:44px;
  border-radius:12px;
  box-shadow:var(--shadow)
}
.vu .brand-copy {
  min-width:0
}
.vu .brand-copy h1 {
  margin:0;
  font-size:18px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
}
.vu .brand-copy p {
  margin:5px 0 0;
  font-size:11px;
  color:var(--sub);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:250px;
}
.vu button,.vu input {
  font:inherit
}
.vu button {
  cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .14s,filter .14s,box-shadow .16s;
}
.vu button:hover {
  filter:brightness(1.04)
}
.vu button:active {
  transform:none
}
.vu button:focus-visible,.vu a:focus-visible,.vu input:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}
.vu button:disabled {
  opacity:.55;
  cursor:wait
}
.vu .icon-button {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:var(--shadow);
  flex-shrink:0;
}
.vu .icon-button img {
  width:16px;
  height:16px;
  filter:invert(1)
}
.vu[data-theme="light"] .icon-button img,.vu[data-theme="light"] .back-button img {
  filter:none
}
.vu .view {
  padding-top:18px
}
.vu .surface,.vu .content-section,.vu .settings-card {
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel),var(--panel-3));
  border-radius:16px;
  box-shadow:var(--shadow);
}
.vu .surface-main {
  padding:16px 16px 14px
}
.vu .topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}
.vu .topline span {
  font-size:12px;
  font-weight:500;
  color:var(--sub);
  text-transform:none;
  letter-spacing:.06em
}
.vu .percent {
  font-size:30px;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--text)
}
.vu input[type="range"] {
  display:block;
  width:100%;
  height:6px;
  margin:0;
  border-radius:999px;
  appearance:none;
  -webkit-appearance:none;
  background:linear-gradient(90deg,var(--accent-2) var(--slider-fill,0%),var(--border) var(--slider-fill,0%));
  cursor:pointer;
}
.vu input[type="range"]::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.vu input[type="range"]::-moz-range-thumb {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--accent);
}
.vu .ticks {
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:11px;
  color:var(--muted)
}
.vu .content-section {
  margin-top:14px;
  padding:14px
}
.vu .section-heading {
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  color:var(--sub);
  text-transform:none;
  letter-spacing:.06em
}
.vu .presets {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px
}
.vu .preset {
  min-height:44px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
.vu .preset.selected {
  background:rgba(93,116,255,.16);
  border-color:var(--accent);
  color:#cfd7ff
}
.vu[data-theme="light"] .preset.selected {
  color:var(--accent)
}
.vu .audio-tabs {
  padding:14px
}
.vu .audio-tabs-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:var(--sub);
  text-transform:none;
  letter-spacing:.06em
}
.vu .audio-count {
  font-size:11px;
  font-weight:500;
  color:var(--muted)
}
.vu .audio-tab-list {
  max-height:160px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent
}
.vu .audio-tab {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.vu .audio-tab:hover {
  background:var(--panel-2)
}
.vu .audio-tab-title {
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:500
}
.vu .audio-indicator {
  font-size:12px;
  color:var(--accent)
}
.vu .audio-arrow {
  font-size:11px;
  color:var(--muted)
}
.vu .audio-current {
  font-size:11px;
  color:var(--accent);
  font-weight:700
}
.vu .audio-empty {
  margin:0;
  padding:8px 2px 4px;
  color:var(--sub);
  font-size:12px
}
.vu .action-stack {
  display:grid;
  gap:9px;
  margin-top:14px
}
.vu .primary,.vu .secondary {
  width:100%;
  height:46px;
  border-radius:14px;
  border:1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:13px;
  font-weight:700;
}
.vu .primary {
  background:linear-gradient(120deg,#6d63ee,#447bff);
  border-color:#7a89ff;
  color:#fff;
  box-shadow:var(--shadow)
}
.vu .primary.active {
  background:linear-gradient(120deg,#d45170,#e46f7c);
  border-color:#ea889c
}
.vu .secondary {
  background:var(--panel);
  border-color:var(--border);
  color:var(--text)
}
.vu .secondary .fa-icon {
  font-size:14px
}
.vu .vf {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:10px;
  border-top:1px solid var(--border);
  padding-top:14px;
  margin-top:14px
}
.vu .vf a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  border-radius:13px;
  border:1px solid var(--border);
  background:var(--footer);
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  box-shadow:var(--shadow);
}
.vu .vf a .fa-icon {
  font-size:14px
}
.vu .vf .coffee {
  background:#ffd54d;
  border-color:#f0c53d;
  color:#1d2330
}
.vu .version {
  margin-top:14px;
  text-align:center;
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--muted)
}
.vu .settings-page {
  display:grid;
  gap:14px
}
.vu .settings-header {
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:2px
}
.vu .back-button {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  font-weight:500;
  box-shadow:var(--shadow);
  flex-shrink:0;
}
.vu .back-button img {
  width:14px;
  height:14px;
  filter:invert(1)
}
.vu .settings-title-block h2 {
  margin:1px 0 4px;
  font-size:20px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.02em
}
.vu .settings-title-block p {
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--sub)
}
.vu .settings-card {
  padding:16px
}
.vu .settings-card-header {
  margin-bottom:14px
}
.vu .settings-card-title {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}
.vu .settings-card-title .fa-icon {
  font-size:14px;
  color:var(--accent)
}
.vu .settings-card-description {
  margin-top:5px;
  font-size:12px;
  line-height:1.45;
  color:var(--sub)
}
.vu .theme-choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.vu .theme-option {
  height:48px;
  border-radius:13px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
}
.vu .theme-option .fa-icon {
  font-size:14px
}
.vu .theme-option.selected {
  background:rgba(93,116,255,.16);
  border-color:var(--accent);
  color:#d4dcff
}
.vu[data-theme="light"] .theme-option.selected {
  color:var(--accent)
}
.vu .setting-switch {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel-2);
  cursor:pointer;
}
.vu .setting-text {
  display:grid;
  gap:4px;
  min-width:0
}
.vu .setting-name {
  font-size:13px;
  font-weight:700;
  color:var(--text);
  line-height:1.35
}
.vu .setting-description {
  font-size:11px;
  line-height:1.45;
  color:var(--sub)
}
.vu .switch {
  position:relative;
  flex-shrink:0;
  display:inline-flex
}
.vu .switch input {
  position:absolute;
  inset:0;
  width:48px;
  height:28px;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.vu .switch-ui {
  width:48px;
  height:28px;
  border-radius:999px;
  background:rgba(121,143,177,.28);
  border:1px solid var(--border-strong);
  position:relative;
  transition:background .18s,border-color .18s;
}
.vu .switch-ui::after {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform .18s;
}
.vu .switch input:checked + .switch-ui {
  background:var(--accent);
  border-color:var(--accent)
}
.vu .switch input:checked + .switch-ui::after {
  transform:translateX(20px)
}
.vu .switch input:focus-visible + .switch-ui {
  outline:2px solid var(--accent);
  outline-offset:3px
}
.vu .presets {
  gap:8px
}
.vu .preset {
  min-height:48px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--panel-2);
  color:var(--sub);
  font-size:13px;
  font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(151,171,208,.12);
  transition:background .16s,color .16s,box-shadow .16s,transform .14s
}
.vu .preset:hover {
  background:var(--panel-3);
  color:var(--text)
}
.vu .preset.selected {
  border-color:transparent;
  background:linear-gradient(135deg,#6575f6,#4667e9);
  color:#fff;
  box-shadow:0 4px 12px rgba(70,103,233,.3),inset 0 1px 0 rgba(255,255,255,.15)
}
.vu[data-theme="light"] .preset {
  background:#e9eef7;
  color:#50627b;
  box-shadow:none
}
.vu[data-theme="light"] .preset.selected {
  background:linear-gradient(135deg,#6575f6,#4667e9);
  color:#fff;
  box-shadow:0 4px 12px rgba(70,103,233,.18)
}
.vu .card {
  min-height:0;
  padding:14px 16px 10px
}
.vu .header {
  padding-bottom:11px
}
.vu .logo {
  width:38px;
  height:38px
}
.vu .brand-copy h1 {
  font-size:17px
}
.vu .icon-button {
  width:34px;
  height:34px
}
.vu .view {
  padding-top:12px
}
.vu .surface-main {
  padding:12px 14px 11px
}
.vu .topline {
  margin-bottom:10px
}
.vu .percent {
  font-size:26px
}
.vu .ticks {
  margin-top:8px
}
.vu .content-section {
  margin-top:10px;
  padding:11px 12px
}
.vu .section-heading {
  margin-bottom:8px
}
.vu .presets {
  gap:7px
}
.vu .preset {
  min-height:39px;
  font-size:12px
}
.vu .audio-tabs {
  padding:11px 12px
}
.vu .audio-tabs-heading {
  margin-bottom:4px
}
.vu .audio-tab-list {
  max-height:86px
}
.vu .audio-tab {
  min-height:33px;
  padding:5px 7px
}
.vu .action-stack {
  margin-top:10px;
  gap:7px
}
.vu .primary,.vu .secondary {
  height:40px
}
.vu .vf {
  margin-top:10px;
  padding-top:10px
}
.vu .vf a {
  height:38px
}
.vu .version {
  margin-top:8px
}
.vu .settings-page {
  gap:10px
}
.vu .settings-card {
  padding:12px
}
.vu .settings-card-header {
  margin-bottom:10px
}
.vu .setting-switch {
  padding:11px
}
.vu .theme-option {
  height:42px
}
.vu .surface-main .reset {
  margin-top:13px;
  height:36px;
  border-radius:10px;
  font-size:12px
}
@media (hover:hover) and (pointer:fine) {
  .vu button:not(:disabled):hover {
    filter:brightness(1.09)
  }
  .vu .preset:not(:disabled):hover {
    background:var(--panel-2);
    color:var(--text);
    box-shadow:inset 0 0 0 1px rgba(151,171,208,.28),0 3px 9px rgba(0,0,0,.12)
  }
  .vu .preset.selected:not(:disabled):hover {
    background:linear-gradient(135deg,#7181ff,#5474f3);
    color:#fff;
    box-shadow:0 5px 14px rgba(70,103,233,.32)
  }
  .vu[data-theme="light"] .preset:not(.selected):not(:disabled):hover {
    background:#dfe7f4;
    color:#273d59
  }
  .vu .theme-option:not(:disabled):hover,.vu .secondary:not(:disabled):hover,.vu .icon-button:not(:disabled):hover,.vu .back-button:not(:disabled):hover {
    background:var(--panel-2);
    border-color:var(--border-strong)
  }
  .vu .theme-option.selected:not(:disabled):hover {
    background:rgba(93,116,255,.22);
    border-color:var(--accent)
  }
  .vu .audio-tab:not(:disabled):hover {
    background:var(--panel-2)
  }
  .vu .vf a:hover {
    filter:brightness(1.06)
  }
}
.vu button:active {
  transform:none
}
@media (prefers-reduced-motion:reduce) {
  .vu button,.vu .vf a {
    transition:none!important
  }
}
.vu .sview {
  padding-top:10px
}
.vu .settings-page {
  gap:8px
}
.vu .settings-header {
  gap:10px;
  margin-bottom:0;
  align-items:center
}
.vu .back-button {
  padding:7px 9px;
  border-radius:9px;
  font-size:11px
}
.vu .settings-title-block h2 {
  font-size:16px;
  margin:0 0 2px
}
.vu .settings-title-block p {
  font-size:10.5px;
  line-height:1.25
}
.vu .settings-card {
  padding:11px 12px;
  border-radius:12px
}
.vu .settings-card-header {
  margin-bottom:8px
}
.vu .settings-card-title {
  font-size:13px;
  gap:7px
}
.vu .settings-card-title .fa-icon {
  font-size:12px
}
.vu .settings-card-description {
  font-size:10.5px;
  line-height:1.3;
  margin-top:3px
}
.vu .theme-choices {
  gap:8px
}
.vu .theme-option {
  height:36px;
  border-radius:9px;
  font-size:12px;
  gap:7px
}
.vu .theme-option .fa-icon {
  font-size:12px
}
.vu .setting-switch {
  padding:9px 10px;
  border-radius:10px;
  gap:10px;
  align-items:center
}
.vu .setting-text {
  gap:2px
}
.vu .setting-name {
  font-size:12px;
  line-height:1.25
}
.vu .setting-description {
  font-size:10.5px;
  line-height:1.3
}
.vu .switch input,.vu .switch-ui {
  width:40px;
  height:24px
}
.vu .switch-ui::after {
  width:16px;
  height:16px;
  top:3px;
  left:3px
}
.vu .switch input:checked + .switch-ui::after {
  transform:translateX(16px)
}
.vu .sview + .version {
  margin-top:8px
}
.vu .theme-option .fa-icon {
  font-size:13px;
  color:currentColor
}
.vu .theme-option.selected {
  background:#4058b9;
  border-color:#8195ff;
  color:#fff
}
.vu[data-theme="light"] .theme-option {
  background:#e9eef7;
  border-color:#c5d1e2;
  color:#24364d
}
.vu[data-theme="light"] .theme-option.selected {
  background:#304cb5;
  border-color:#304cb5;
  color:#fff
}
@media (hover:hover) {
  .vu .theme-option.selected:not(:disabled):hover {
    background:#4b64cb;
    border-color:#91a1ff;
    color:#fff
  }
  .vu[data-theme="light"] .theme-option:not(.selected):not(:disabled):hover {
    background:#dce5f3;
    border-color:#9eafc9;
    color:#1c2f49
  }
  .vu[data-theme="light"] .theme-option.selected:not(:disabled):hover {
    background:#3b58c4;
    border-color:#3b58c4;
    color:#fff
  }
}
.vu .topline span,.vu .section-heading,.vu .audio-tabs-heading {
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  color:var(--text);
  text-transform:none
}
.vu .topline span {
  line-height:1.3
}
.vu .section-heading,.vu .audio-tabs-heading {
  line-height:1.3
}
.vu .settings-card-title .fa-icon {
  color:currentColor
}
.vu .heading-icon {
  width:14px;
  height:14px;
  flex-shrink:0;
  color:currentColor
}
.vu .preset {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 6px
}
.vu .preset-icon {
  width:14px;
  height:14px;
  flex-shrink:0
}
.vu .theme-symbol {
  width:15px;
  height:15px;
  flex-shrink:0;
  color:currentColor
}
.vu {
  --accent:#1689ff;
  --accent-2:#0877f7;
  --bg-accent:rgba(14,126,255,.10)
}
.vu[data-theme="light"] {
  --accent:#0969db;
  --accent-2:#0877f7;
  --bg-accent:rgba(14,126,255,.06)
}
.vu .preset,.vu .theme-option,.vu .secondary,.vu .back-button,.vu .icon-button {
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);
  border-color:var(--border);
}
.vu .preset.selected,.vu .theme-option.selected,.vu[data-theme="light"] .preset.selected,.vu[data-theme="light"] .theme-option.selected {
  background:linear-gradient(135deg,#169aff 0%,#076be8 100%);
  border-color:#319fff;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(0,103,230,.18);
}
.vu .primary {
  background:linear-gradient(135deg,#159dff,#0669e8);
  border-color:#2997ff
}
.vu[data-theme="light"] .preset:not(.selected),.vu[data-theme="light"] .theme-option:not(.selected) {
  background:linear-gradient(180deg,#fff,#eaf1fb);
  color:#24364d;
  border-color:#cbd8e8
}
@media (hover:hover) and (pointer:fine) {
  .vu .preset.selected:not(:disabled):hover,.vu .theme-option.selected:not(:disabled):hover,.vu[data-theme="light"] .theme-option.selected:not(:disabled):hover {
    background:linear-gradient(135deg,#32aaff,#1179ee);
    border-color:#49b0ff;
    color:#fff;
  }
  .vu .preset:not(.selected):not(:disabled):hover,.vu .theme-option:not(.selected):not(:disabled):hover,.vu .secondary:not(:disabled):hover,.vu .back-button:not(:disabled):hover,.vu .icon-button:not(:disabled):hover {
    background:linear-gradient(180deg,var(--panel-2),var(--panel-3));
  }
  .vu[data-theme="light"] .preset:not(.selected):not(:disabled):hover,.vu[data-theme="light"] .theme-option:not(.selected):not(:disabled):hover {
    background:linear-gradient(180deg,#fff,#ddeafb);
    color:#193656;
  }
}
.vu .settings-card-title .fa-icon {
  font-size:14px;
  color:inherit
}
.vu .theme-option .fa-icon {
  font-size:14px;
  color:inherit
}
.vu {
  --border:#365680;
  --border-strong:#5c82b5
}
.vu[data-theme="light"] {
  --border:#b6c8e1;
  --border-strong:#8faad0
}
.vu .preset:not(.selected),.vu .theme-option:not(.selected),.vu .secondary,.vu .back-button,.vu .icon-button {
  background:linear-gradient(180deg,#213f6b 0%,#142e54 100%);
  border:1px solid #496c9d;
  color:#f4f8ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 5px rgba(0,0,0,.13);
}
.vu[data-theme="light"] .preset:not(.selected),.vu[data-theme="light"] .theme-option:not(.selected),.vu[data-theme="light"] .secondary,.vu[data-theme="light"] .back-button,.vu[data-theme="light"] .icon-button {
  background:linear-gradient(180deg,#fff 0%,#e4edfb 100%);
  border:1px solid #91aed2;
  color:#152c4c;
  box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(35,65,112,.12);
}
.vu .preset.selected,.vu .theme-option.selected,.vu[data-theme="light"] .preset.selected,.vu[data-theme="light"] .theme-option.selected {
  background:linear-gradient(135deg,#189dff 0%,#0064dc 100%);
  border:1px solid #52b5ff;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 9px rgba(0,85,190,.25);
}
.vu .vf a {
  background:linear-gradient(180deg,#294b78 0%,#19365c 100%);
  border:1px solid #5478a7;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.14);
}
.vu[data-theme="light"] .vf a {
  background:linear-gradient(180deg,#fff 0%,#e2ebf8 100%);
  border:1px solid #94afd0;
  color:#152b49;
  box-shadow:0 2px 6px rgba(35,65,112,.13);
}
.vu .vf .coffee,.vu[data-theme="light"] .vf .coffee {
  background:linear-gradient(180deg,#ffe77a 0%,#ffc933 100%);
  border:1px solid #dfa912;
  color:#1e293b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(92,67,8,.16);
}
@media (hover:hover) and (pointer:fine) {
  .vu .preset:not(.selected):not(:disabled):hover,.vu .theme-option:not(.selected):not(:disabled):hover,.vu .secondary:not(:disabled):hover,.vu .back-button:not(:disabled):hover,.vu .icon-button:not(:disabled):hover {
    background:linear-gradient(180deg,#2c5186 0%,#1a3965 100%);
    border-color:#79a4da;
    color:#fff;
  }
  .vu[data-theme="light"] .preset:not(.selected):not(:disabled):hover,.vu[data-theme="light"] .theme-option:not(.selected):not(:disabled):hover,.vu[data-theme="light"] .secondary:not(:disabled):hover,.vu[data-theme="light"] .back-button:not(:disabled):hover,.vu[data-theme="light"] .icon-button:not(:disabled):hover {
    background:linear-gradient(180deg,#fff,#d6e6fb);
    border-color:#6d98ca;
    color:#102b4c;
  }
  .vu .vf a:hover {
    filter:brightness(1.08)
  }
}
.vu .preset .fa-icon {
  font-size:14px
}
.vu .icon-button .fa-icon {
  font-size:17px
}
.vu .back-button .fa-icon {
  font-size:13px
}
.vu .version-link {
  display:block;
  width:max-content;
  max-width:100%;
  margin:12px auto 0;
  padding:4px 8px;
  border-radius:6px;
  text-decoration:none;
  color:var(--sub);
  font-weight:500;
  transition:color .15s,background .15s
}
.vu .version-link:hover {
  color:var(--text);
  background:var(--panel-2)
}
.vu .version-link:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}
.vu .version-website {
  color:var(--sub);
  text-decoration:none;
  font:inherit;
  transition:color .15s ease
}
.vu .version-website:hover {
  color:var(--text);
  text-decoration:none
}
.vu .version-website:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px
}
.vu .preset,.vu .theme-option,.vu .secondary,.vu .back-button,.vu .icon-button,.vu .vf a {
  border:1px solid transparent!important;
  background:linear-gradient(160deg,#254b7a 0%,#1a365e 100%)!important;
  color:#f7fbff!important;
  box-shadow:0 2px 8px rgba(0,0,0,.13)!important;
  transform:none!important;
  filter:none;
}
.vu .preset.selected,.vu .theme-option.selected {
  background:linear-gradient(135deg,#159cff 0%,#0875ee 100%)!important;
  color:#fff!important;
  box-shadow:0 3px 12px rgba(0,119,245,.25)!important;
}
.vu[data-theme="light"] .preset,.vu[data-theme="light"] .theme-option,.vu[data-theme="light"] .secondary,.vu[data-theme="light"] .back-button,.vu[data-theme="light"] .icon-button,.vu[data-theme="light"] .vf a:not(.coffee) {
  background:linear-gradient(155deg,#e8f1ff,#d7e5f7)!important;
  color:#18375c!important;
  box-shadow:0 2px 7px rgba(31,73,129,.12)!important;
}
.vu[data-theme="light"] .preset.selected,.vu[data-theme="light"] .theme-option.selected {
  background:linear-gradient(135deg,#159cff,#0875ee)!important;
  color:#fff!important;
  box-shadow:0 3px 12px rgba(0,119,245,.20)!important;
}
.vu .vf .coffee,.vu[data-theme="light"] .vf .coffee {
  background:linear-gradient(135deg,#ffe47a,#ffc735)!important;
  color:#263040!important;
  box-shadow:0 2px 9px rgba(151,108,0,.18)!important;
}
@media (hover:hover) and (pointer:fine) {
  .vu .preset:hover,.vu .theme-option:hover,.vu .secondary:hover,.vu .back-button:hover,.vu .icon-button:hover,.vu .vf a:hover {
    filter:brightness(1.10)!important;
    transform:none!important;
  }
  .vu .preset.selected:hover,.vu .theme-option.selected:hover {
    filter:brightness(1.07)!important
  }
}
.vu .preset:active,.vu .theme-option:active,.vu .secondary:active,.vu .back-button:active,.vu .icon-button:active,.vu .vf a:active {
  transform:none!important
}
.vu .preset,.vu .theme-option,.vu .secondary,.vu .back-button,.vu .icon-button,.vu .vf a {
  border:2px solid #6389bd!important;
  box-shadow:0 2px 8px rgba(0,0,0,.16)!important;
}
.vu .preset.selected,.vu .theme-option.selected {
  border:2px solid #78c7ff!important;
  box-shadow:0 3px 12px rgba(0,119,245,.26)!important;
}
.vu[data-theme="light"] .preset:not(.selected),.vu[data-theme="light"] .theme-option:not(.selected),.vu[data-theme="light"] .secondary,.vu[data-theme="light"] .back-button,.vu[data-theme="light"] .icon-button,.vu[data-theme="light"] .vf a:not(.coffee) {
  border:2px solid #7498c5!important;
  background:linear-gradient(155deg,#f5f9ff,#dce9fa)!important;
  color:#102b4b!important;
}
.vu[data-theme="light"] .preset.selected,.vu[data-theme="light"] .theme-option.selected {
  border:2px solid #0863ca!important;
}
.vu .vf .coffee,.vu[data-theme="light"] .vf .coffee {
  border:2px solid #bd8900!important;
}
@media (hover:hover) and (pointer:fine) {
  .vu .preset:not(.selected):hover,.vu .theme-option:not(.selected):hover,.vu .secondary:hover,.vu .back-button:hover,.vu .icon-button:hover,.vu .vf a:not(.coffee):hover {
    border-color:#9dc5f2!important
  }
  .vu[data-theme="light"] .preset:not(.selected):hover,.vu[data-theme="light"] .theme-option:not(.selected):hover,.vu[data-theme="light"] .secondary:hover,.vu[data-theme="light"] .back-button:hover,.vu[data-theme="light"] .icon-button:hover,.vu[data-theme="light"] .vf a:not(.coffee):hover {
    border-color:#3f77b9!important
  }
}
.vu .audio-indicator {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:7px;
  background:#147fe5;
  color:#fff!important;
  font-size:12px;
  text-shadow:none;
}
.vu .audio-current {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:4px 7px;
  border-radius:7px;
  background:#22518a;
  color:#fff!important;
  font-size:10px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
}
.vu[data-theme="light"] .audio-indicator {
  background:#0865c7;
  color:#fff!important;
}
.vu[data-theme="light"] .audio-current {
  background:#d4e7ff;
  color:#103f7a!important;
}
.vu .audio-indicator.fa-icon {
  display:inline-grid!important;
  place-items:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  padding:0;
  font-family:FontAwesomeLocal!important;
  font-size:12px;
  line-height:1!important;
  text-align:center;
  vertical-align:middle;
  font-weight:400!important;
}
.fl {
  position:absolute;
  display:flex;
  align-items:center;
  gap:9px;
  background:rgba(10,16,40,.92);
  border:1px solid var(--ln2);
  border-radius:13px;
  padding:9px 14px;
  font-size:.82rem;
  font-weight:700;
  box-shadow:0 14px 40px -10px #000;
  backdrop-filter:blur(8px)
}
.fl i {
  color:var(--c);
  font-size:1.15rem
}
.f1 {
  left:-34px;
  bottom:96px
}
.f2 {
  right:-20px;
  top:70px
}
/* sections */
section {
  padding:96px 0
}
.hd {
  max-width:680px;
  margin-bottom:52px
}
.hd p {
  color:var(--mu);
  margin-top:16px;
  font-size:1.1rem
}
.hd.c {
  margin-inline:auto;
  text-align:center
}
.on {
  border-block:1px solid var(--ln);
  background:rgba(255,255,255,.02);
  padding:26px 0
}
.on .w {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px 38px;
  color:var(--mu);
  font-weight:700;
  font-size:1.02rem
}
.on small {
  font-weight:600;
  font-size:.8rem;
  color:#6f7cab
}
.bt {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px
}
.cd {
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--ln);
  border-radius:20px;
  padding:28px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  transition:border-color .2s
}
.cd:hover {
  border-color:var(--ln2)
}
.cd p {
  color:var(--mu);
  font-size:.96rem;
  margin-top:8px
}
.cd h3 {
  margin-top:18px
}
.ic {
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:24px;
  color:#9fbcff;
  background:rgba(61,124,255,.12);
  border:1px solid var(--ln2)
}
.c4 {
  grid-column:span 4
}
.c2 {
  grid-column:span 2
}
.c3 {
  grid-column:span 3
}
.hu {
  background:linear-gradient(135deg,rgba(61,124,255,.24),rgba(122,92,255,.1) 60%,transparent)
}
.hu .n {
  font-size:clamp(4rem,9vw,7rem);
  font-weight:800;
  letter-spacing:-.06em;
  line-height:.95;
  margin-top:10px
}
.hu h3 {
  font-size:1.6rem
}
.bars {
  position:absolute;
  right:26px;
  bottom:24px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:120px;
  width:46%;
  max-width:300px
}
.bars span {
  flex:1;
  border-radius:3px;
  background:var(--g)
}
.mb {
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:44px;
  margin-top:16px
}
.mb i {
  flex:1;
  border-radius:3px;
  background:var(--g);
  min-height:4px
}
/* lab */
.lab {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:44px;
  align-items:center
}
.tb {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:30px
}
.tb button {
  text-align:left;
  font:inherit;
  color:var(--tx);
  background:rgba(255,255,255,.03);
  border:1px solid var(--ln);
  border-radius:16px;
  padding:16px 18px;
  cursor:pointer;
  display:flex;
  gap:14px;
  align-items:center;
  transition:.15s
}
.tb button:hover {
  border-color:var(--ln2)
}
.tb button[aria-pressed=true] {
  background:rgba(61,124,255,.14);
  border-color:var(--b);
  box-shadow:0 0 0 3px rgba(61,124,255,.15)
}
.tb b {
  display:block;
  font-weight:700
}
.tb span {
  font-size:.88rem;
  color:var(--mu);
  line-height:1.4;
  display:block
}
.tb .ic {
  width:42px;
  height:42px;
  font-size:20px
}
/* Keep preset icons perfectly centered; the generic .tb span rule must not override the icon grid. */
.tb button>.ic {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  padding:0;
  line-height:1;
  text-align:center
}
.tb button>.ic>i {
  display:block;
  width:1.25em;
  line-height:1;
  text-align:center;
  margin:0 auto
}
.tb button>div {
  flex:1;
  min-width:0
}
.eq {
  background:var(--s1);
  border:1px solid var(--ln);
  border-radius:24px;
  padding:26px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset
}
.eq canvas {
  width:100%;
  height:auto;
  aspect-ratio:600/250;
  margin:0
}
.eh {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-size:.88rem;
  color:var(--mu);
  font-weight:600
}
.eh b {
  color:var(--tx);
  font-size:1.05rem
}
/* browser */
.bw {
  border:1px solid var(--ln2);
  border-radius:18px;
  background:#0b1224;
  overflow:hidden;
  box-shadow:0 50px 100px -40px rgba(40,70,255,.55),0 0 0 1px rgba(0,0,0,.5)
}
.tbs {
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:10px 12px 0;
  background:#060a18
}
.dots {
  display:flex;
  gap:7px;
  padding:0 10px 14px 4px
}
.dots i {
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff5f57
}
.dots i:nth-child(2) {
  background:#febc2e
}
.dots i:nth-child(3) {
  background:#28c840
}
.tabs {
  display:flex;
  gap:2px;
  min-width:0;
  flex:1
}
.tab {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  max-width:250px;
  flex:1;
  padding:10px 14px;
  border:0;
  border-radius:11px 11px 0 0;
  background:transparent;
  color:#8d99c4;
  font:500 .82rem var(--f);
  cursor:pointer;
  text-align:left;
  transition:background .15s,color .15s
}
.tab:hover {
  background:rgba(255,255,255,.05);
  color:#d6defc
}
.tab[aria-selected=true] {
  background:#111a34;
  color:#fff
}
.tab>i:first-child {
  font-size:1rem;
  flex:none
}
.tab span {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.tab .pl2 {
  font-size:.78rem;
  color:#6f8fff;
  flex:none
}
.tool {
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 14px;
  background:#111a34;
  border-bottom:1px solid var(--ln)
}
.nb {
  display:flex;
  gap:16px;
  color:#8d99c4;
  font-size:.9rem
}
.omni {
  flex:1;
  min-width:0;
  height:34px;
  border-radius:99px;
  background:#060a18;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  color:#b8c3ea;
  font-size:.85rem;
  font-weight:500
}
.omni i {
  color:#7f8cb8;
  font-size:.78rem
}
.omni span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.ext {
  display:flex;
  align-items:center;
  gap:14px;
  color:#8d99c4
}
.ext img {
  border-radius:7px;
  box-shadow:0 0 0 3px rgba(22,137,255,.35)
}
.avatar {
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg,#7a5cff,#38d4ff)
}
.scn {
  position:relative;
  min-height:560px;
  background:var(--sc);
  transition:background .4s
}
.page {
  padding:26px;
  width:66%
}
.player {
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  background:radial-gradient(70% 90% at 30% 100%,rgba(255,255,255,.16),transparent),rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden
}
.pl {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:70px;
  height:70px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  display:grid;
  place-items:center;
  font-size:26px;
  padding-left:4px
}
.scb {
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:.78rem;
  color:#e0e7ff;
  font-weight:600
}
.scb s {
  flex:1;
  height:4px;
  border-radius:4px;
  background:rgba(255,255,255,.25);
  position:relative;
  text-decoration:none
}
.scb s::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:38%;
  border-radius:4px;
  background:#fff
}
.page h3 {
  font-size:1.35rem;
  margin:22px 0 6px;
  letter-spacing:-.02em
}
.page p {
  color:rgba(255,255,255,.65);
  font-size:.92rem
}
.sk {
  margin-top:20px;
  display:grid;
  gap:10px
}
.sk i {
  height:12px;
  border-radius:6px;
  background:rgba(255,255,255,.1)
}
.sk i:nth-child(1) {
  width:92%
}
.sk i:nth-child(2) {
  width:74%
}
.sk i:nth-child(3) {
  width:56%
}
.bwp {
  position:absolute;
  right:26px;
  top:14px;
  z-index:2
}
@media(max-width:980px) {
  .scn {
    min-height:0
  }
  .page {
    width:auto;
    padding:18px
  }
  .bwp {
    position:static;
    padding:0 0 24px
  }
  .tab {
    padding:10px
  }
  .nb,.avatar {
    display:none
  }
}
@media(max-width:560px) {
  .tab span {
    display:none
  }
  .tab {
    flex:none;
    max-width:none
  }
}
.sites {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:26px
}
.sites .site-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid var(--ln);
  border-radius:99px;
  font-weight:400;
  font-size:13px;
  color:#c3ccf0;
  background:rgba(255,255,255,.03);
  transition:border-color .2s ease,background .2s ease
}
.sites .site-pill:hover {
  color:#c3ccf0;
  border-color:rgba(164,178,224,.28);
  background:rgba(255,255,255,.055)
}
.sites .site-pill>i,.sites .site-pill>.netflix-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  font-size:1rem;
  color:inherit
}
.sites .site-pill>.netflix-mark {
  font-family:Arial,sans-serif;
  font-weight:900;
  font-size:1.05rem
}
/* steps */
.sp {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  position:relative
}
.sp::before {
  content:"";
  position:absolute;
  top:50px;
  left:16%;
  right:16%;
  border-top:2px dashed var(--ln2)
}
.sp .cd {
  padding:30px;
  text-align:center
}
.nm {
  position:relative;
  width:44px;
  height:44px;
  margin:0 auto 4px;
  border-radius:50%;
  background:var(--g);
  display:grid;
  place-items:center;
  font-weight:800;
  box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--ln2)
}
.sp .cd {
  padding-top:34px
}
/* use */
.us {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.us .cd {
  padding:26px
}
/* compare */
.cmp {
  border:1px solid var(--ln);
  border-radius:22px;
  overflow:hidden;
  background:var(--s1)
}
.cmp table {
  width:100%;
  border-collapse:collapse;
  font-size:.98rem
}
.cmp th,.cmp td {
  padding:17px 24px;
  text-align:left;
  border-bottom:1px solid var(--ln)
}
.cmp tr:last-child td {
  border:0
}
.cmp th {
  font-size:.85rem;
  color:var(--mu);
  font-weight:700;
  background:rgba(255,255,255,.03)
}
.cmp th:last-child {
  color:#fff;
  background:rgba(61,124,255,.16)
}
.cmp td:last-child {
  background:rgba(61,124,255,.07);
  font-weight:700
}
.cmp td:first-child {
  font-weight:600
}
.cmp i {
  vertical-align:-.15em;
  font-size:1.2em
}
.cmp .y {
  color:var(--c)
}
.cmp .n {
  color:#6a76a3
}
/* trust */
.tg {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.tg code {
  font:700 .8rem ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--c);
  background:rgba(56,212,255,.1);
  border:1px solid rgba(56,212,255,.25);
  padding:3px 9px;
  border-radius:7px;
  display:inline-block;
  margin-bottom:12px
}
.tg .cd {
  padding:24px
}
.tg .cd p {
  margin:0
}
.nt {
  margin-top:20px;
  display:flex;
  gap:14px;
  align-items:center;
  padding:20px 24px;
  border:1px solid var(--ln2);
  border-radius:18px;
  background:rgba(61,124,255,.08);
  color:#cdd8ff;
  font-weight:500
}
.nt i {
  font-size:26px;
  color:var(--c)
}
/* faq */
.fq summary>i.fa-solid {
  width:24px;
  min-width:24px;
  color:var(--c);
  text-align:center;
  font-size:1rem
}
.fq summary>span {
  flex:1
}
.fq details p {
  padding-left:44px
}
@media(max-width:560px) {
  .fq details {
    padding:0 16px
  }
  .fq details p {
    padding-left:0
  }
}
.fq {
  max-width:800px;
  margin-inline:auto
}
details {
  border:1px solid var(--ln);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  margin-bottom:10px;
  padding:0 24px;
  transition:.2s
}
details[open] {
  border-color:var(--ln2);
  background:rgba(61,124,255,.07)
}
summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px 0;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.01em
}
summary::-webkit-details-marker {
  display:none
}
summary::after {
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid var(--b);
  border-bottom:2px solid var(--b);
  transform:rotate(45deg);
  transition:transform .2s;
  margin-right:4px;
  flex:none
}
details[open] summary::after {
  transform:rotate(-135deg)
}
details p {
  color:var(--mu);
  padding-bottom:22px;
  max-width:44em
}
/* final */
.fn {
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:78px 32px;
  text-align:center;
  background:linear-gradient(135deg,#2a63ff,#6a4bff);
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 40px 100px -30px rgba(61,100,255,.8)
}
.fn::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(500px 260px at 50% -10%,rgba(255,255,255,.3),transparent),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px);
  -webkit-mask:linear-gradient(#000,transparent);
  mask:linear-gradient(#000,transparent)
}
.fn>* {
  position:relative
}
.fn p {
  margin:16px auto 32px;
  max-width:28em;
  color:#e3e9ff;
  font-size:1.12rem
}
.fn .btn {
  background:#fff;
  color:#16206b;
  box-shadow:0 14px 34px -10px rgba(0,0,40,.6)
}
.fn .btn:hover {
  transform:translateY(-2px)
}
footer {
  border-top:1px solid var(--ln);
  margin-top:90px;
  padding:56px 0 34px;
  color:var(--mu);
  font-size:.87rem
}
.fg {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:36px
}
.fg h4 {
  color:var(--tx);
  font-size:.9rem;
  margin-bottom:14px;
  font-weight:700
}
.fg li {
  margin-bottom:9px
}
.fg a:hover {
  color:#fff
}
.fg .br {
  color:var(--tx);
  margin-bottom:14px
}
.fg p {
  max-width:26em
}
.cp {
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--ln);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:.79rem
}
@media(prefers-reduced-motion:no-preference) {
  .pop {
    animation:up .9s cubic-bezier(.2,.8,.2,1) both
  }
  @keyframes up {
    from {
      opacity:0;
      transform:translateY(34px)
    }
  }
}
@media(max-width:980px) {
  .nv nav {
    display:none
  }
  .hg,.lab {
    grid-template-columns:1fr
  }
  .hero {
    padding-top:48px
  }
  .bt {
    grid-template-columns:1fr 1fr
  }
  .c4,.c3,.c2 {
    grid-column:auto
  }
  .hu {
    grid-column:1/-1
  }
  .sp,.tg {
    grid-template-columns:1fr
  }
  .sp::before {
    display:none
  }
  .us {
    grid-template-columns:1fr 1fr
  }
  .fg {
    grid-template-columns:1fr 1fr
  }
  .wv,.f1,.f2 {
    display:none
  }
  .mn {
    display:none
  }
}
@media(max-width:560px) {
  body {
    font-size:16px
  }
  section {
    padding:68px 0
  }
  .bt,.us {
    grid-template-columns:1fr
  }
  .cta .btn {
    width:100%
  }
  .st {
    grid-template-columns:1fr 1fr
  }
  .st div:nth-child(2) {
    border-right:0
  }
  .st div:nth-child(-n+2) {
    border-bottom:1px solid var(--ln)
  }
  .pop {
    transform:none
  }
  .cmp th,.cmp td {
    padding:13px 14px;
    font-size:.88rem
  }
  .fn {
    padding:54px 22px
  }
  .bars {
    display:none
  }
  .fg {
    grid-template-columns:1fr
  }
  .pl {
    width:54px;
    height:54px
  }
}
/* Platform brand accents and accessible hover/focus treatment. */
.on .w {
  gap:12px 22px
}
.on .platform {
  --brand:#8ea5ff;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--mu);
  border-radius:9px;
  padding:7px 9px;
  background:transparent;
  transition:color .22s ease,opacity .22s ease
}
.on .platform i {
  font-size:1.2em;
  color:inherit
}
.on .platform:hover {
  color:var(--brand)
}
.on .platform:hover i,.on .platform:hover .netflix-mark {
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--brand) 30%,transparent))
}
.on .platform i,.on .netflix-mark {
  transition:filter .22s ease
}
.on .platform-youtube {
  --brand:#ff0033
}
.on .platform-spotify {
  --brand:#1ed760
}
.on .platform-netflix {
  --brand:#e50914
}
.on .platform-twitch {
  --brand:#9146ff
}
.on .platform-soundcloud {
  --brand:#ff5500
}
.on .platform-vimeo {
  --brand:#1ab7ea
}
.on .platform-any {
  --brand:#7daaff
}
.on .netflix-mark {
  font-family:Arial,sans-serif;
  font-weight:900;
  font-size:1.25em;
  line-height:1;
  color:inherit;
  letter-spacing:-.12em;
  padding-right:.12em
}
@media(prefers-reduced-motion:reduce) {
  .on .platform,.on .platform i,.on .netflix-mark {
    transition:none
  }
}
/* Compact features: retain all existing typography sizes */
#features .bt {
  gap:12px
}
#features .cd {
  padding:20px 22px;
  border-radius:16px
}
#features .cd h3 {
  margin-top:12px
}
#features .cd p {
  margin-top:6px
}
#features .hu .n {
  margin-top:7px
}
#features .bars {
  right:18px;
  bottom:18px;
  height:94px
}
@media(max-width:560px) {
  #features .bt {
    gap:10px
  }
  #features .cd {
    padding:18px
  }
  #features .bars {
    height:75px
  }
}
/*
 * Decorative audio spectrum.
 * Irregular keyframes and staggered timing mimic changing audio energy.
 * Bars keep their original heights, gradient and bottom alignment.
 */
#features .bars > span {
  transform-origin: center bottom;
  animation: spectrum-a 2.7s linear infinite;
  will-change: transform;
}

#features .bars > span:nth-child(3n + 2) {
  animation-name: spectrum-b;
  animation-duration: 3.1s;
}

#features .bars > span:nth-child(3n) {
  animation-name: spectrum-c;
  animation-duration: 2.35s;
}

#features .bars > span:nth-child(5n + 1) {
  animation-duration: 3.45s;
}

#features .bars > span:nth-child(4n) {
  animation-duration: 2.9s;
}

/* Negative delays put each band at a different point in its sequence. */
#features .bars > span:nth-child(7n + 1) { animation-delay: -1.72s; }
#features .bars > span:nth-child(7n + 2) { animation-delay: -.43s; }
#features .bars > span:nth-child(7n + 3) { animation-delay: -2.14s; }
#features .bars > span:nth-child(7n + 4) { animation-delay: -1.08s; }
#features .bars > span:nth-child(7n + 5) { animation-delay: -2.66s; }
#features .bars > span:nth-child(7n + 6) { animation-delay: -.81s; }
#features .bars > span:nth-child(7n)     { animation-delay: -1.39s; }

@keyframes spectrum-a {
  0%   { transform: scaleY(.57); }
  9%   { transform: scaleY(.83); }
  19%  { transform: scaleY(.47); }
  27%  { transform: scaleY(.71); }
  38%  { transform: scaleY(.37); }
  46%  { transform: scaleY(.89); }
  56%  { transform: scaleY(.64); }
  67%  { transform: scaleY(.96); }
  77%  { transform: scaleY(.49); }
  88%  { transform: scaleY(.76); }
  100% { transform: scaleY(.57); }
}

@keyframes spectrum-b {
  0%   { transform: scaleY(.74); }
  11%  { transform: scaleY(.41); }
  21%  { transform: scaleY(.93); }
  32%  { transform: scaleY(.62); }
  43%  { transform: scaleY(.78); }
  53%  { transform: scaleY(.34); }
  63%  { transform: scaleY(.59); }
  74%  { transform: scaleY(.97); }
  84%  { transform: scaleY(.52); }
  93%  { transform: scaleY(.85); }
  100% { transform: scaleY(.74); }
}

@keyframes spectrum-c {
  0%   { transform: scaleY(.48); }
  8%   { transform: scaleY(.73); }
  18%  { transform: scaleY(.91); }
  30%  { transform: scaleY(.53); }
  39%  { transform: scaleY(.79); }
  50%  { transform: scaleY(.42); }
  61%  { transform: scaleY(.87); }
  72%  { transform: scaleY(.56); }
  83%  { transform: scaleY(.94); }
  92%  { transform: scaleY(.66); }
  100% { transform: scaleY(.48); }
}

body.pause-equalizer #features .bars > span {
  animation-play-state: paused;
}

.brand-favicon {
  display:inline-block;
  width:18px;
  height:18px;
  min-width:18px;
  object-fit:contain;
  vertical-align:middle;
  flex-shrink:0
}
.on .platform:hover .brand-favicon {
  filter:none
}
.sites .site-pill>.brand-favicon {
  width:17px;
  height:17px;
  min-width:17px
}

/* Crisp, consistent favicons for the interactive audio tabs. */
.tab-site-icon,
.audio-site-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  min-width: 17px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}
.audio-site-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
}


/* Typography settings: edit these two variables to change fonts site-wide. */
:root {
  --heading-font: "Manrope", sans-serif;
  --body-font: "Manrope", sans-serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title {
  font-family: var(--heading-font);
}

/* Active section in the sticky navigation. */
.nv nav a.is-active {
  color: #fff;
  background: rgba(103, 112, 255, .17);
  box-shadow: inset 0 0 0 1px rgba(119, 133, 255, .26);
}
.nv nav a.is-active i {
  color: #a4b5ff;
}

/* Floating back-to-top control. */
.back-to-top {
  position: fixed;
  right: clamp(18px, 3vw, 36px);
  bottom: clamp(18px, 3vw, 36px);
  z-index: 100;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(146, 159, 255, .35);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #568fff, #7056f5);
  box-shadow: 0 10px 28px rgba(31, 45, 122, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  filter: brightness(1.13);
  transform: translateY(-3px);
}
.back-to-top:focus-visible {
  outline: 3px solid #a4b5ff;
  outline-offset: 3px;
}
.footer-version {
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid var(--ln);
  border-radius: 8px;
  color: var(--mu);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Dedicated legal page. */
.privacy-main {
  padding: 115px 0 40px;
}
.privacy-content {
  max-width: 780px;
  margin: 0 auto;
}
.privacy-content h1 {
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  margin: 0 0 12px;
}
.privacy-content h2 {
  margin: 38px 0 12px;
  font-size: 1.3rem;
}
.privacy-content p,
.privacy-content li {
  color: var(--mu);
  line-height: 1.85;
}
.privacy-content ul {
  padding-left: 24px;
  list-style: disc;
}
.privacy-content a {
  color: #94b1ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.privacy-updated {
  margin-bottom: 30px;
  font-size: .9rem;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* Platform pills: regular-weight labels, not bold. */
.sites .site-pill,
.sites .site-pill span:not(.netflix-mark) {
  font-weight: 400;
}

/* Top platform strip: compact, medium-weight labels. */
.on .w {
  font-size: .92rem;
  font-weight: 500;
}
.on .platform,
.on .platform span {
  font-weight: 500;
}

/* Analytics consent banner — visible only while preferences are requested. */
.cookie-consent[hidden] { display: none !important; }
.cookie-consent {
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 24px;
  color: #f6f7ff;
  background: #11172f;
  border: 1px solid #394371;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  font-family: var(--body-font, sans-serif);
}
.cookie-consent__text strong { font-size: 16px; }
.cookie-consent__text p {
  margin: 6px 0 0;
  color: #b9c8ee;
  font-size: 13px;
  line-height: 1.55;
}
.cookie-consent a { color: #a9b9ff; text-decoration: underline; }
.cookie-consent__actions { display: flex; flex-shrink: 0; gap: 8px; }
.cookie-consent__actions button,
.privacy-cookie-settings {
  border: 1px solid #5264a5;
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  background: #222b4f;
  font: 600 13px var(--body-font, sans-serif);
  cursor: pointer;
}
.cookie-consent__actions [data-consent="accept"] {
  border-color: transparent;
  background: linear-gradient(110deg, #4e8dff, #7156ff);
}
.cookie-consent button:hover,
.privacy-cookie-settings:hover { filter: brightness(1.16); }
@media (max-width: 640px) {
  .cookie-consent { flex-direction: column; align-items: stretch; }
  .cookie-consent__actions { justify-content: stretch; }
  .cookie-consent__actions button { flex: 1; }
}

/* Platform names font */
.on .platform,
.on .platform > span {
  font-family: "Manrope", sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
}



/* Responsive, keyboard-accessible navigation */
.mobile-menu-toggle { display: none; }
@media (max-width: 980px) {
  .nv { position: relative; gap: 10px; }
  .nv .br { min-width: 0; white-space: nowrap; }
  .mobile-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin-left: auto;
    color: #f4f6ff; background: rgba(255,255,255,.05);
    border: 1px solid rgba(120,150,255,.28); border-radius: 12px;
    cursor: pointer; flex-shrink: 0;
  }
  .mobile-menu-toggle .menu-bars,
  .mobile-menu-toggle .menu-bars::before,
  .mobile-menu-toggle .menu-bars::after {
    display:block; width:19px; height:2px; background:currentColor;
    border-radius:2px; position:relative; transition:transform .2s;
  }
  .mobile-menu-toggle .menu-bars::before,
  .mobile-menu-toggle .menu-bars::after { content:""; position:absolute; left:0; }
  .mobile-menu-toggle .menu-bars::before { top:-6px; }
  .mobile-menu-toggle .menu-bars::after { top:6px; }
  .mobile-menu-toggle[aria-expanded="true"] .menu-bars { background:transparent; }
  .mobile-menu-toggle[aria-expanded="true"] .menu-bars::before { top:0; transform:rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] .menu-bars::after { top:0; transform:rotate(-45deg); }
  .nv nav#primary-nav {
    display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
    padding:12px; border:1px solid rgba(120,150,255,.28);
    border-radius:16px; background:#0b1024;
    box-shadow:0 24px 48px rgba(0,0,0,.5); z-index:90;
  }
  .nv nav#primary-nav.is-open { display:block; }
  .nv nav#primary-nav ul { display:flex; flex-direction:column; gap:4px; }
  .nv nav#primary-nav a { display:flex; width:100%; padding:12px 14px; min-height:44px; }
  .nv > .btn { margin-left:0; }
}
@media (max-width: 540px) {
  .nv .br { font-size: .95rem; gap:7px; }
  .nv .lgi { width:32px; height:32px; }
  .nv > .btn { font-size:.78rem; padding:0 10px; height:42px; white-space:nowrap; }
  .nv > .btn i { font-size:1.1rem; }
  .mobile-menu-toggle { width:42px; height:42px; }
}
@media (max-width: 365px) {
  .nv .br { font-size:.85rem; }
  .nv > .btn { padding-inline:7px; font-size:.7rem; }
}
@media (prefers-reduced-motion:reduce) {
  .mobile-menu-toggle .menu-bars,
  .mobile-menu-toggle .menu-bars::before,
  .mobile-menu-toggle .menu-bars::after { transition:none; }
}



/* Former inline presentation declarations */
.inline-style-1 {max-width:22em}
.inline-style-2 {--eq-low:7%;--eq-high:24%;height:24%}
.inline-style-3 {--eq-low:9%;--eq-high:33%;height:33%}
.inline-style-4 {--eq-low:13%;--eq-high:45%;height:45%}
.inline-style-5 {--eq-low:17%;--eq-high:59%;height:59%}
.inline-style-6 {--eq-low:20%;--eq-high:71%;height:71%}
.inline-style-7 {--eq-low:23%;--eq-high:81%;height:81%}
.inline-style-8 {--eq-low:25%;--eq-high:91%;height:91%}
.inline-style-9 {--eq-low:28%;--eq-high:100%;height:100%}
.inline-style-10 {--eq-low:25%;--eq-high:90%;height:90%}
.inline-style-11 {--eq-low:22%;--eq-high:78%;height:78%}
.inline-style-12 {--eq-low:18%;--eq-high:64%;height:64%}
.inline-style-13 {--eq-low:14%;--eq-high:50%;height:50%}
.inline-style-14 {--eq-low:10%;--eq-high:36%;height:36%}
.inline-style-15 {--eq-low:7%;--eq-high:26%;height:26%}
.inline-style-16 {--eq-low:7%;--eq-high:17%;height:17%}
.inline-style-17 {padding-top:20px}
.inline-style-18 {margin-top:16px}
.inline-style-19 {margin-bottom:12px}

/* Professional website typography (the extension mockup retains its own UI font). */
:root { --heading-font: "Manrope", system-ui, sans-serif; --body-font: "Manrope", system-ui, sans-serif; --f: "Manrope", system-ui, sans-serif; }
.nv .br, .nv nav, .nv nav a, .nv > .btn, .theme-toggle { font-family: "Manrope", system-ui, sans-serif; }
.nv nav ul {font-size:.9rem;font-weight:650;letter-spacing:-.018em;}
.nv nav a {white-space:nowrap;}
.theme-toggle {flex:0 0 auto; width:42px; height:42px; border:1px solid var(--ln2); border-radius:12px; background:var(--s1);color:var(--tx);display:inline-grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;}
.theme-toggle:hover {background:var(--s2);border-color:var(--b);transform:translateY(-1px);}
.theme-toggle:focus-visible{outline:2px solid var(--c);outline-offset:3px;}
.theme-icon {font-size:21px;line-height:1;}
.theme-icon-moon {display:none;}
:root[data-theme="light"] .theme-icon-sun {display:none;}
:root[data-theme="light"] .theme-icon-moon {display:block;}
:root[data-theme="light"] {
 color-scheme:light;
 --bg:#f7f9ff; --s1:#ffffff; --s2:#edf2fc;
 --ln:rgba(28,43,84,.14);--ln2:rgba(61,100,190,.28);
 --tx:#17213c;--mu:#506082;--b:#285dd9;--v:#6745d5;--c:#126fbe;
 --g:linear-gradient(110deg,#2762db 0%,#4b60df 52%,#6846c7 100%);
}
:root[data-theme="light"] body {background:var(--bg);color:var(--tx);}
:root[data-theme="light"] header {background:rgba(247,249,255,.95);border-color:var(--ln);}
:root[data-theme="light"] .nv nav ul {color:var(--mu);}
:root[data-theme="light"] .nv nav a:hover,:root[data-theme="light"] .nv nav a.is-active {color:var(--b);background:rgba(49,94,205,.08);}
:root[data-theme="light"] .nv nav a.is-active i {color:var(--b);}
:root[data-theme="light"] .gr {background:linear-gradient(100deg,#1953cd,#6940d5);background-clip:text;-webkit-background-clip:text;}
:root[data-theme="light"] .theme-toggle {box-shadow:0 2px 8px rgba(24,43,83,.06);}
:root[data-theme="light"] .cookie-consent {background:#fff;color:#17213c;border-color:var(--ln);}
:root[data-theme="light"] .cookie-consent a {color:#205ac9;}
:root[data-theme="light"] .mobile-menu-toggle {color:var(--tx);}
@media (max-width:980px){.nv .theme-toggle{order:1}.nv .mobile-menu-toggle{order:2}.nv > .btn{order:3}.nv nav#primary-nav{z-index:30}}
@media (max-width:430px){.theme-toggle{height:38px;width:38px;border-radius:10px}.theme-icon{font-size:19px}}

/* Light-mode contrast fixes for public website components. */
.nm { color:#fff; }

:root[data-theme="light"] .hero::before {
  opacity:.75;
}
:root[data-theme="light"] .hero::after {
  background:radial-gradient(closest-side,rgba(39,98,219,.18),transparent);
}
:root[data-theme="light"] .ey {
  color:#2350b2;
  background:rgba(39,98,219,.08);
  border-color:rgba(39,98,219,.24);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
:root[data-theme="light"] .ey::before {
  background:#2762db;
  box-shadow:0 0 0 4px rgba(39,98,219,.12);
}
:root[data-theme="light"] .lead,
:root[data-theme="light"] .hd p,
:root[data-theme="light"] .cd p,
:root[data-theme="light"] details p,
:root[data-theme="light"] .page p,
:root[data-theme="light"] footer,
:root[data-theme="light"] .cp,
:root[data-theme="light"] .on .w,
:root[data-theme="light"] .on small {
  color:#4b5e7f;
}
:root[data-theme="light"] .bg {
  background:#fff;
  color:#1d335b;
  border-color:rgba(28,43,84,.18);
  box-shadow:0 8px 24px -20px rgba(20,37,73,.28);
}
:root[data-theme="light"] .bg i {
  color:var(--b);
}
:root[data-theme="light"] .bg:hover {
  background:#eef4ff;
  color:#162c52;
  border-color:rgba(40,93,217,.28);
}
:root[data-theme="light"] .st,
:root[data-theme="light"] .cmp,
:root[data-theme="light"] details,
:root[data-theme="light"] .cookie-consent,
:root[data-theme="light"] .privacy-content,
:root[data-theme="light"] .nt {
  box-shadow:0 12px 32px -28px rgba(18,34,66,.24);
}
:root[data-theme="light"] .st {
  background:rgba(255,255,255,.88);
}
:root[data-theme="light"] .on {
  background:rgba(255,255,255,.72);
}
:root[data-theme="light"] .cd {
  background:linear-gradient(180deg,#ffffff,#f5f8ff);
  border-color:rgba(28,43,84,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 18px 38px -30px rgba(18,34,66,.28);
}
:root[data-theme="light"] .cd:hover {
  border-color:rgba(40,93,217,.3);
}
:root[data-theme="light"] .ic,
:root[data-theme="light"] .tb button > .ic {
  color:#3164d7;
  background:#eaf1ff;
  border-color:#bfd0f1;
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset;
}
:root[data-theme="light"] .sp::before {
  border-top-color:rgba(49,95,215,.26);
}
:root[data-theme="light"] .nm {
  background:linear-gradient(135deg,#355ce0,#594fdc);
  box-shadow:0 0 0 6px #f7f9ff,0 0 0 7px rgba(49,95,215,.22),0 8px 20px -12px rgba(34,66,154,.4);
}
:root[data-theme="light"] .sites .site-pill {
  color:#314766;
  background:#fff;
  border-color:rgba(28,43,84,.14);
  box-shadow:0 8px 22px -22px rgba(18,34,66,.28);
}
:root[data-theme="light"] .sites .site-pill:hover {
  color:#1c335c;
  border-color:rgba(40,93,217,.22);
  background:#f4f8ff;
}
:root[data-theme="light"] .cmp {
  background:#fff;
}
:root[data-theme="light"] .cmp th {
  background:#f6f8fd;
  color:#526482;
}
:root[data-theme="light"] .cmp th:last-child {
  color:#18305a;
  background:rgba(40,93,217,.12);
}
:root[data-theme="light"] .cmp td:last-child {
  background:rgba(40,93,217,.06);
}
:root[data-theme="light"] .cmp .n {
  color:#6d7d97;
}
:root[data-theme="light"] details {
  background:#fff;
  border-color:rgba(28,43,84,.14);
}
:root[data-theme="light"] details[open] {
  border-color:rgba(40,93,217,.28);
  background:#f3f7ff;
}
:root[data-theme="light"] .nt {
  background:#edf4ff;
  border-color:#c5d7f6;
  color:#22385c;
}
:root[data-theme="light"] .nt i,
:root[data-theme="light"] .fq summary > i.fa-solid {
  color:#2f63d8;
}
:root[data-theme="light"] .tg code {
  color:#1f62a9;
  background:rgba(18,111,190,.08);
  border-color:rgba(18,111,190,.18);
}
:root[data-theme="light"] .privacy-content a,
:root[data-theme="light"] .cookie-consent a,
:root[data-theme="light"] footer a:hover,
:root[data-theme="light"] .fg a:hover {
  color:#2457ca;
}
:root[data-theme="light"] .page h3,
:root[data-theme="light"] .fg h4,
:root[data-theme="light"] .fg .br,
:root[data-theme="light"] .cmp td:first-child {
  color:#17213c;
}
:root[data-theme="light"] .sk i {
  background:rgba(28,43,84,.12);
}
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .mobile-menu-toggle {
  background:#fff;
  border-color:rgba(28,43,84,.16);
  color:#17213c;
  box-shadow:0 8px 20px -20px rgba(18,34,66,.3);
}
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .mobile-menu-toggle:hover {
  background:#eef4ff;
  border-color:rgba(40,93,217,.24);
}

@media (max-width:980px) {
  :root[data-theme="light"] .nv nav#primary-nav {
    background:#fff;
    border-color:rgba(28,43,84,.14);
    box-shadow:0 24px 48px rgba(18,34,66,.12);
  }
  :root[data-theme="light"] .nv nav#primary-nav a:hover,
  :root[data-theme="light"] .nv nav#primary-nav a.is-active {
    background:#eef4ff;
    color:#2457ca;
  }
}

/* Frequency graph and platform typography: consistent across both themes. */
.on small,
.on .platform,
.on .platform > span,
.sites .site-pill,
.sites .site-pill span:not(.netflix-mark) {
  font-family:var(--f);
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.5;
}
:root[data-theme="light"] .eq {
  background:#fff;
  border-color:#d5deed;
  box-shadow:0 16px 36px -32px rgba(18,34,66,.25);
}
:root[data-theme="light"] .eh {color:#465f84;}
:root[data-theme="light"] .eh b {color:#17213c;}

/* The EQ preview deliberately stays a dark, high-contrast visualization in both site themes. */
:root[data-theme="light"] .eq {
  background:#080d1c;
  border-color:rgba(142,164,230,.19);
  color:#f4f6ff;
  box-shadow:0 20px 44px -32px rgba(18,34,66,.38);
}
:root[data-theme="light"] .eq .eh,
:root[data-theme="light"] .eh { color:#aebde5; }
:root[data-theme="light"] .eq .eh b,
:root[data-theme="light"] .eh b { color:#fff; }

/* Footer creator credit — visible hover and keyboard focus in both themes. */
footer .footer-credit-link {
  display:inline-block;
  position:relative;
  color:#b4c5ff;
  font-weight:650;
  text-decoration:none;
  text-underline-offset:4px;
  transition:color .2s ease,transform .2s ease;
}
footer .footer-credit-link::after {
  content:"";
  position:absolute;
  height:1.5px;
  left:0;
  right:0;
  bottom:0;
  border-radius:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
footer .footer-credit-link:hover,
footer .footer-credit-link:focus-visible {
  color:#ffffff;
}
footer .footer-credit-link:hover::after,
footer .footer-credit-link:focus-visible::after {
  transform:scaleX(1);
}
:root[data-theme="light"] footer .footer-credit-link {color:#2857bd;}
:root[data-theme="light"] footer .footer-credit-link:hover,
:root[data-theme="light"] footer .footer-credit-link:focus-visible {color:#153980;}
@media (prefers-reduced-motion:reduce) {
  footer .footer-credit-link,
  footer .footer-credit-link::after {transition:none;}
}

/* Final nav polish: uniform spacing + crisp gradient icons in both themes. */
:root {
  --nav-link-text:#d6e1ff;
  --nav-link-hover-text:#ffffff;
  --nav-link-bg:rgba(255,255,255,.02);
  --nav-link-hover-bg:rgba(90,107,255,.12);
  --nav-link-active-bg:rgba(96,110,255,.16);
  --nav-link-active-border:rgba(125,144,255,.28);
  --nav-icon-gradient:linear-gradient(180deg,#67d2ff 0%,#5e96ff 44%,#7e62ff 100%);
  --nav-icon-shadow:drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 3px 10px rgba(81,112,255,.24));
}

.nv nav ul {
  align-items:center;
  gap:10px;
}

.nv nav li {
  display:flex;
}

.nv nav a {
  position:relative;
  min-height:42px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid transparent;
  white-space:nowrap;
  color:var(--nav-link-text);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1;
  background:var(--nav-link-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;
}

.nv nav a i {
  width:16px;
  min-width:16px;
  text-align:center;
  font-size:1rem;
  line-height:1;
  background:var(--nav-icon-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:var(--nav-icon-shadow);
  transform:translateZ(0);
}

.nv nav a:hover,
.nv nav a:focus-visible {
  color:var(--nav-link-hover-text);
  background:var(--nav-link-hover-bg);
  border-color:rgba(112,131,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px -20px rgba(86,107,255,.28);
}

.nv nav a.is-active {
  color:#fff;
  background:var(--nav-link-active-bg);
  border-color:var(--nav-link-active-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 26px -22px rgba(91,111,255,.34);
}

.nv nav a:hover i,
.nv nav a:focus-visible i,
.nv nav a.is-active i {
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.32)) drop-shadow(0 4px 12px rgba(97,125,255,.34));
}

:root[data-theme="light"] {
  --nav-link-text:#354969;
  --nav-link-hover-text:#193764;
  --nav-link-bg:rgba(255,255,255,.55);
  --nav-link-hover-bg:#eef4ff;
  --nav-link-active-bg:#e8f0ff;
  --nav-link-active-border:rgba(56,98,214,.22);
  --nav-icon-gradient:linear-gradient(180deg,#2fc8ff 0%,#3674f4 46%,#6b4ef0 100%);
  --nav-icon-shadow:drop-shadow(0 1px 0 rgba(255,255,255,.42)) drop-shadow(0 3px 8px rgba(66,102,220,.18));
}

:root[data-theme="light"] .nv nav a {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

:root[data-theme="light"] .nv nav a:hover,
:root[data-theme="light"] .nv nav a:focus-visible {
  color:var(--nav-link-hover-text);
  background:var(--nav-link-hover-bg);
  border-color:rgba(56,98,214,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 22px -20px rgba(38,72,154,.22);
}

:root[data-theme="light"] .nv nav a.is-active {
  color:#17355f;
  background:var(--nav-link-active-bg);
  border-color:var(--nav-link-active-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 24px -20px rgba(48,82,172,.24);
}

@media (max-width:980px) {
  .nv nav#primary-nav ul {
    gap:6px;
  }

  .nv nav#primary-nav a {
    min-height:46px;
    width:100%;
    justify-content:flex-start;
    padding:12px 14px;
  }
}

/* iOS-inspired theme switch: plain outline icons and a physical sliding thumb. */
.nv .theme-toggle,
:root[data-theme="light"] .nv .theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:68px;
  height:38px;
  min-width:68px;
  padding:3px;
  margin:0;
  border:1px solid rgba(133,155,203,.34);
  border-radius:999px;
  background:#101c36;
  color:#b9c9e9;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.2),0 2px 9px rgba(0,0,0,.08);
  cursor:pointer;
  line-height:1;
  transform:none;
  transition:background .23s ease,border-color .23s ease,box-shadow .23s ease;
}
.nv .theme-toggle:hover {
  background:#192948;
  border-color:#678cf1;
  transform:none;
}
:root[data-theme="light"] .nv .theme-toggle {
  background:#e8eef9;
  border-color:#bacbe7;
  color:#657a9b;
  box-shadow:inset 0 2px 4px rgba(49,79,126,.08),0 2px 9px rgba(49,79,126,.06);
}
:root[data-theme="light"] .nv .theme-toggle:hover {
  background:#dfe9fa;
  border-color:#88a8e3;
  transform:none;
}
.nv .theme-toggle:focus-visible {
  outline:3px solid #5495ff;
  outline-offset:3px;
}
.theme-track {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:100%;
  border-radius:999px;
}
.theme-symbol {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  z-index:1;
  color:#a7b9dc;
  transition:color .2s ease;
}
.theme-symbol svg {
  display:block;
  width:16px;
  height:16px;
}
.theme-thumb {
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#e9f0ff);
  box-shadow:0 2px 6px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateX(0);
  transition:transform .25s cubic-bezier(.2,.85,.25,1),background .25s ease,box-shadow .25s ease;
}
/* Dark: moon at left selected; light: sun at right selected. */
:root:not([data-theme="light"]) .theme-symbol-moon { color:#273e70; }
:root:not([data-theme="light"]) .theme-symbol-sun { color:#a7b9dc; }
:root[data-theme="light"] .theme-thumb {
  transform:translateX(30px);
  background:linear-gradient(145deg,#fff,#fafdff);
  box-shadow:0 2px 6px rgba(43,70,113,.24),inset 0 1px 0 #fff;
}
:root[data-theme="light"] .theme-symbol-sun { color:#c88920; }
:root[data-theme="light"] .theme-symbol-moon { color:#5a6f90; }
/* Icons sit above the thumb. No fonts, emoji or glyph fallback needed. */
@media (max-width:430px) {
  .nv .theme-toggle,:root[data-theme="light"] .nv .theme-toggle {
    width:62px;
    min-width:62px;
    height:36px;
    padding:3px;
  }
  .theme-symbol {width:26px;height:28px;}
  .theme-thumb {width:28px;height:28px;}
  :root[data-theme="light"] .theme-thumb {transform:translateX(26px);}
}
@media (prefers-reduced-motion:reduce) {
  .theme-thumb,.theme-symbol,.nv .theme-toggle {transition:none!important;}
}

/* Light theme frequency response: soft slate surface, not a dark-mode panel. */
:root[data-theme="light"] .eq {
  background:linear-gradient(155deg,#e9eef6 0%,#e1e8f2 100%);
  border-color:#cbd5e4;
  color:#243650;
  box-shadow:0 18px 44px -30px rgba(42,58,88,.30),inset 0 1px 0 rgba(255,255,255,.82);
}
:root[data-theme="light"] .eq .eh,
:root[data-theme="light"] .eh { color:#485c78; }
:root[data-theme="light"] .eq .eh b,
:root[data-theme="light"] .eh b { color:#1e2d45; }

/* Refined theme motion: longer, softly eased thumb travel and gentle page fade. */
.nv .theme-toggle,
:root[data-theme="light"] .nv .theme-toggle {
  transition:background-color .58s cubic-bezier(.22,1,.36,1),border-color .58s ease,box-shadow .58s ease;
}
.theme-thumb,
:root[data-theme="light"] .theme-thumb {
  transition:transform .64s cubic-bezier(.22,1,.36,1),background .55s ease,box-shadow .55s ease;
  will-change:transform;
}
.theme-symbol,
:root[data-theme="light"] .theme-symbol {
  transition:color .5s ease;
}
body,header,.cd,.bg,.st,.cmp,details,.sites .site-pill,.ic,.eq,.theme-toggle {
  transition-property:background-color,color,border-color,box-shadow;
  transition-duration:.46s;
  transition-timing-function:ease;
}
/* Preserve existing hover behavior for interactive elements. */
.bg,.cd,.sites .site-pill {
  transition-property:background-color,color,border-color,box-shadow,transform;
}
@media (prefers-reduced-motion:reduce) {
  .nv .theme-toggle,:root[data-theme="light"] .nv .theme-toggle,
  .theme-thumb,:root[data-theme="light"] .theme-thumb,
  .theme-symbol,body,header,.cd,.bg,.st,.cmp,details,.sites .site-pill,.ic,.eq {
    transition:none!important;
    animation:none!important;
  }
}

/* Keep the three-step dashed connector visible over opaque light-mode cards. */
@media (min-width:981px) {
  :root[data-theme="light"] .sp::before {
    z-index:2;
    pointer-events:none;
    border-top:2px dashed rgba(53,91,198,.55);
  }
  :root[data-theme="light"] .sp .nm {
    z-index:3;
  }
}

/* Refined features layout — the highlighted 600% card keeps its own design intact. */
@media (min-width: 981px) {
  #features .bt {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr)) auto;
    gap:14px;
    align-items:stretch;
  }
  #features .bt > .cd {
    min-width:0;
    grid-column:auto;
  }
  #features .bt > .cd:nth-child(1) {
    grid-column:1 / span 8;
    grid-row:1 / span 2;
  }
  #features .bt > .cd:nth-child(2) {
    grid-column:9 / -1;
    grid-row:1;
  }
  #features .bt > .cd:nth-child(3) {
    grid-column:9 / -1;
    grid-row:2;
  }
  #features .bt > .cd:nth-child(4) {
    grid-column:1 / span 3;
    grid-row:3;
  }
  #features .bt > .cd:nth-child(5) {
    grid-column:4 / span 3;
    grid-row:3;
  }
  #features .bt > .cd:nth-child(6) {
    grid-column:7 / span 3;
    grid-row:3;
  }
  #features .bt > .cd:nth-child(7) {
    grid-column:10 / span 3;
    grid-row:3;
  }
  #features .bt > .cd:not(:first-child) {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:0;
  }
  #features .bt > .cd:not(:first-child) h3 {
    margin-top:12px;
    line-height:1.3;
  }
  #features .bt > .cd:not(:first-child) p {
    line-height:1.55;
  }
}
@media (min-width: 561px) and (max-width: 980px) {
  #features .bt {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  #features .bt > .cd {
    grid-column:auto;
  }
  #features .bt > .cd:first-child {
    grid-column:1 / -1;
  }
}
@media (max-width: 560px) {
  #features .bt {
    grid-template-columns:minmax(0,1fr);
  }
  #features .bt > .cd {
    grid-column:1 / -1;
  }
}