:root {
  color-scheme:dark;
  --bg:#080b10;
  --panel:#10151d;
  --line:#ffffff14;
  --text:#f1f4f8;
  --muted:#9ba6b6;
  --cyan:#38caff;
  --blue:#4382ff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px
}
::selection {
  background:#38caff45;
  color:white
}
button:disabled {
  cursor:wait
}
img {
  max-width:100%
}
[hidden] {
  display:none!important
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  left:16px;
  top:-80px;
  padding:12px 20px;
  background:var(--cyan);
  color:#080b10;
  z-index:99
}
.skip-link:focus {
  top:16px
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:104px;
  border-bottom:1px solid var(--line);
  gap:24px
}
.brand {
  display:inline-flex;
  flex-shrink:0
}
.brand img {
  width:106px;
  height:auto;
  display:block
}
.topbar nav,footer nav {
  display:flex;
  gap:32px;
  color:#b6bfcd;
  font-size:13px;
  font-weight:550
}
.topbar nav a:hover,footer a:hover {
  color:var(--cyan)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:15px 23px;
  border-radius:8px;
  font-size:13px;
  font-weight:650;
  min-height:48px;
  border:1px solid transparent;
  transition:background .18s,transform .18s
}
.button span {
  font-size:20px;
  line-height:1
}
.button:hover {
  transform:translateY(-2px)
}
.primary {
  background:var(--cyan);
  color:#061723;
  box-shadow:0 0 30px #38caff0a
}
.primary:hover {
  background:#78dcff
}
.secondary {
  background:#ffffff04;
  border-color:#ffffff26;
  color:var(--text)
}
.secondary:hover {
  background:#ffffff0c;
  border-color:#ffffff50
}
.small {
  padding:10px 17px;
  min-height:40px
}
.quiet-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:650;
  color:var(--text);
  background:none;
  border:0;
  padding:10px 0
}
.quiet-link:hover {
  color:var(--cyan)
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-weight:620
}
h1 {
  font-size:clamp(56px,6.7vw,96px);
  line-height:1.03;
  letter-spacing:-.066em;
  margin:22px 0 0
}
h1 span {
  color:var(--cyan)
}
h2 {
  font-size:clamp(36px,4.4vw,60px);
  line-height:1.07;
  letter-spacing:-.055em;
  margin:14px 0 0
}
h3 {
  letter-spacing:-.03em
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--cyan);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-weight:700;
  margin-bottom:16px
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  display:inline-block;
  box-shadow:0 0 12px #38caff55
}
.hero {
  padding-top:73px;
  position:relative
}
.hero-top {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:64px
}
.hero-intro>p:first-child {
  font-size:17px;
  line-height:1.8;
  color:var(--muted);
  max-width:435px;
  margin-bottom:24px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap
}
.hero-note {
  color:#8390a3;
  font-size:11px;
  margin:20px 0 5px
}
.experience {
  position:relative;
  isolation:isolate
}
.experience:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-60px 0 -20px;
  background:radial-gradient(ellipse at 50% 50%,#226b9133,transparent 68%);
  pointer-events:none
}
.preview-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 0 17px;
  gap:15px
}
.preview-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted)
}
.preview-tabs {
  display:flex;
  gap:3px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#10151d
}
.preview-tabs button {
  border:0;
  background:none;
  color:var(--muted);
  padding:9px 14px;
  border-radius:5px;
  font-size:11px;
  min-height:34px
}
.preview-tabs button[aria-selected=true] {
  background:#24333f;
  color:#e5f6ff
}
.preview-tabs button:hover {
  color:#fff
}
.app-window {
  border:1px solid #ffffff24;
  border-bottom:0;
  border-radius:13px 13px 0 0;
  background:linear-gradient(150deg,#15191f,#080a0e 70%);
  display:grid;
  grid-template-columns:170px 1fr;
  min-height:417px;
  overflow:hidden;
  box-shadow:0 30px 80px #0006
}
.app-sidebar {
  background:#07090dbf;
  padding:21px 14px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:10px;
  color:#929ca9
}
.app-sidebar img {
  width:69px;
  height:auto;
  margin:0 0 19px 10px
}
.side-item {
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:5px;
  white-space:nowrap
}
.side-item.selected {
  background:#ffffff0d;
  color:#e1f5ff
}
.side-item.selected:first-letter {
  color:var(--cyan)
}
.side-item b {
  font-weight:600
}
.app-sidebar small {
  font-size:8px;
  letter-spacing:.12em;
  padding:16px 12px 6px;
  color:#677485
}
.sidebar-bottom {
  margin-top:auto;
  padding:22px 8px 0;
  font-size:8px;
  color:#6d798c
}
.preview-panel {
  padding:23px 28px;
  min-width:0
}
.app-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:18px;
  font-weight:700;
  margin-bottom:31px
}
.mock-search {
  padding:9px 14px;
  border:1px solid #ffffff0d;
  border-radius:6px;
  color:#8491a4;
  background:#ffffff04;
  font-weight:400;
  font-size:10px;
  min-width:185px
}
.app-section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px
}
.app-section-heading h2 {
  font-size:19px;
  letter-spacing:-.03em;
  margin:0 0 5px
}
.app-section-heading p {
  color:#7c8898;
  font-size:10px;
  margin:0
}
.tiny-label {
  font-size:8px;
  letter-spacing:.12em;
  color:#718096
}
.album-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}
.album {
  min-width:0
}
.cover {
  aspect-ratio:1;
  border-radius:7px;
  position:relative;
  overflow:hidden;
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  isolation:isolate
}
.cover>span {
  position:relative;
  font-weight:850;
  font-size:clamp(19px,2.5vw,34px);
  letter-spacing:-.06em;
  line-height:.95;
  z-index:2
}
.cover small {
  font-size:5px;
  letter-spacing:.12em;
  z-index:2
}
.cover i {
  position:absolute;
  z-index:0
}
.cover-blue {
  background:linear-gradient(140deg,#0c3157,#237296 65%,#52c1d1);
  color:#d8edf2
}
.cover-blue i {
  width:150%;
  height:100%;
  background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 9px,#84c6dc44 10px 11px,transparent 12px 17px);
  bottom:-37%;
  left:-20%;
  transform:rotate(-28deg)
}
.cover-orange {
  background:#e97041;
  color:#2b1a15
}
.cover-orange i {
  width:82%;
  aspect-ratio:1;
  border:25px solid #602a2166;
  border-radius:50%;
  right:-15%;
  bottom:-8%;
  box-shadow:0 0 0 18px #301a131c
}
.cover-green {
  background:#b7c4a2;
  color:#1b392c
}
.cover-green i {
  width:100%;
  height:65%;
  left:15%;
  bottom:-12%;
  background:repeating-linear-gradient(110deg,#183a32 0 9px,transparent 9px 19px);
  transform:rotate(-25deg);
  border-radius:50%
}
.cover-violet {
  background:linear-gradient(135deg,#4a3160,#8b789a);
  color:#f0e3fa
}
.cover-violet i {
  width:90%;
  height:90%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%,#dec8bb,#8d5f8a 45%,#261635 70%);
  bottom:-28%;
  right:-17%;
  box-shadow:0 0 0 1px #f1daf355,0 0 0 14px #b5a2bc22,0 0 0 29px #d3bfd31a
}
.album strong {
  display:block;
  font-size:11px;
  margin:12px 0 4px;
  font-weight:600
}
.album>small {
  display:block;
  color:#7e8a9b;
  font-size:9px;
  line-height:1.5
}
.app-bottom-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ffffff08;
  margin-top:25px;
  padding-top:19px;
  gap:12px
}
.app-bottom-heading h3 {
  font-size:13px;
  margin:0
}
.app-bottom-heading>span {
  font-size:9px;
  color:#718095
}
.preview-player {
  border:1px solid #ffffff24;
  border-top-color:#ffffff0c;
  border-radius:0 0 13px 13px;
  background:#10151d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:15px 23px;
  min-height:76px
}
.player-track {
  display:flex;
  align-items:center;
  gap:11px;
  width:30%;
  min-width:0
}
.mini-cover {
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:4px;
  background:repeating-radial-gradient(ellipse at 100% 100%,#173d5b 0 5px,#388d9f 6px 8px)
}
.player-track strong,.player-track small {
  display:block;
  font-size:9px
}
.player-track small {
  color:#7d8897;
  margin-top:5px;
  font-size:8px
}
.player-heart {
  color:var(--cyan);
  margin-left:9px
}
.player-centre {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  font-size:10px;
  position:relative;
  padding-bottom:16px;
  width:37%;
  color:#acb5c3
}
.play-circle {
  border-radius:50%;
  background:var(--cyan);
  color:#102130;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  font-size:10px
}
.track-progress {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:7px;
  color:#7a879b
}
.track-progress i {
  height:3px;
  border-radius:4px;
  background:linear-gradient(to right,var(--cyan) 42%,#2c3542 42%);
  flex:1
}
.player-device {
  display:flex;
  align-items:center;
  justify-content:end;
  gap:26px;
  width:25%;
  font-size:9px;
  color:#8292a5
}
.preview-caption {
  font-size:10px;
  text-align:center;
  color:#6f7c8e;
  margin:14px 0 0
}
.platform-strip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:40px 0 8px;
  color:#7b889b;
  font-size:11px
}
.platform-strip>div {
  display:flex;
  gap:21px;
  align-items:center;
  color:#c0c7d1;
  font-size:12px
}
.platform-strip i {
  height:3px;
  width:3px;
  border-radius:50%;
  background:#394656
}
.section {
  padding-block:98px;
  border-bottom:1px solid var(--line)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:55px;
  margin-bottom:40px
}
.section-heading>p,.section-description {
  max-width:375px;
  font-size:15px;
  line-height:1.85;
  color:var(--muted);
  margin:0
}
.feature-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr 1.25fr;
  gap:16px
}
.feature {
  background:linear-gradient(140deg,#151b24,#0d1219);
  border:1px solid var(--line);
  border-radius:14px;
  padding:31px;
  min-width:0
}
.feature:first-child {
  grid-column:span 2;
  background:radial-gradient(ellipse at 90% 120%,#15527855,transparent 65%),#101720
}
.feature:last-child {
  grid-column:span 2
}
.feature-symbol {
  color:#68d8ff;
  font-size:28px;
  line-height:1;
  margin-bottom:32px
}
.feature .eyebrow {
  font-size:9px;
  color:#889aaf
}
.feature h3 {
  font-size:28px;
  line-height:1.17;
  margin-bottom:15px
}
.feature p:not(.eyebrow) {
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
  max-width:440px;
  margin-bottom:0
}
.tag-cloud {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:28px
}
.tag-cloud span {
  font-size:10px;
  padding:7px 11px;
  border-radius:5px;
  border:1px solid #ffffff14;
  color:#b4c4d5;
  background:#ffffff03
}
.feature-audio {
  display:flex;
  gap:30px;
  align-items:center;
  justify-content:space-between
}
.sound-bars {
  height:140px;
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 40%;
  justify-content:center
}
.sound-bars i {
  height:25%;
  width:7px;
  border-radius:8px;
  background:linear-gradient(#38caff,#4382ff);
  opacity:.7
}
.sound-bars i:nth-child(3n) {
  height:65%
}
.sound-bars i:nth-child(4n) {
  height:100%
}
.sound-bars i:nth-child(5n) {
  height:43%
}
.steps {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
  margin:0;
  padding:8px 0 0
}
.steps li {
  border-top:1px solid #3a4758;
  padding-top:21px
}
.steps li>span {
  font-size:11px;
  color:var(--cyan);
  font-family:monospace
}
.steps h3 {
  font-size:21px;
  margin:26px 0 12px
}
.steps p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:310px;
  margin-bottom:0
}
.download-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:39px 0 17px
}
.download-heading h3 {
  font-size:12px;
  margin:0;
  color:#c2ccd9;
  letter-spacing:0
}
.download-heading>span {
  font-size:11px;
  color:#768599
}
.server-downloads,.companion-downloads {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.download-card {
  border:1px solid var(--line);
  border-radius:12px;
  background:#10151d;
  padding:28px;
  display:flex;
  flex-direction:column;
  align-items:start
}
.download-card:first-child {
  border-color:#38caff4a;
  background:linear-gradient(150deg,#132330,#10151d 70%)
}
.platform-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  flex-shrink:0;
  border:1px solid #ffffff12;
  border-radius:14px;
  background:#ffffff06;
  margin-bottom:24px
}
.platform-icon img { display:block; width:36px; height:36px; object-fit:contain }
.linux-icon { background:#f3d17a0b; border-color:#f3d17a20 }
.windows-icon,.docker-icon { background:#62b5ff0b; border-color:#62b5ff20 }
.android-icon,.tv-icon { background:#76d9a00b; border-color:#76d9a020 }
.watch-icon { background:#bda7ff0b; border-color:#bda7ff20 }
.companion-identity { display:flex; align-items:flex-start; gap:14px; min-width:0 }
.companion-card .platform-icon { width:44px; height:44px; border-radius:12px; margin:0 }
.companion-card .platform-icon img { width:28px; height:28px }
.download-card h3 {
  font-size:26px;
  margin-bottom:6px
}
.download-card p,.companion-card p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:0
}
.download-description {
  margin:24px 0!important;
  min-height:41px
}
.release-version {
  font-size:10px;
  color:#7f91a7;
  display:block;
  line-height:1.6
}
.release-version a:hover {
  color:var(--cyan);
  text-decoration:underline
}
.download-card>.release-version {
  margin-top:auto;
  margin-bottom:17px
}
.download-card .button {
  width:100%;
  justify-content:space-between;
  font-size:12px
}
.download-link[aria-disabled=true] {
  opacity:.45;
  cursor:default;
  transform:none
}
.companion-card {
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:start;
  justify-content:space-between;
  background:#0c1017
}
.companion-card h3 {
  font-size:20px;
  margin-bottom:8px
}
.companion-card .release-version {
  margin-top:12px
}
.companion-card .button {
  padding:10px 16px;
  min-height:40px;
  font-size:11px
}
.footnote {
  color:#8290a2;
  font-size:11px;
  line-height:1.7;
  margin:20px 0 0
}
.footnote:empty {
  display:none
}
.docker-layout {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:80px;
  align-items:center
}
.docker-layout .section-description {
  margin:24px 0 18px
}
.terminal {
  background:#0d1219;
  border:1px solid #ffffff1c;
  border-radius:13px;
  overflow:hidden;
  min-width:0
}
.terminal-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 19px;
  border-bottom:1px solid var(--line);
  gap:12px;
  color:#8191a5;
  font-size:10px
}
.terminal-top>span:first-child {
  display:flex;
  gap:5px
}
.terminal-top i {
  height:6px;
  width:6px;
  border-radius:50%;
  background:#344253
}
.terminal-top i:first-child {
  background:#68909b
}
.terminal-top button {
  background:#ffffff07;
  color:#b7c5d6;
  border:1px solid #ffffff15;
  border-radius:5px;
  font-size:10px;
  padding:7px 11px;
  min-height:32px
}
.terminal pre {
  padding:26px 24px;
  margin:0;
  overflow:auto;
  font-size:11px;
  line-height:1.95;
  color:#aad8e9
}
.terminal>p {
  border-top:1px solid var(--line);
  padding:15px 24px;
  color:#75879d;
  font-size:10px;
  line-height:1.7;
  margin:0
}
code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
.plugin-panel {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:90px
}
.plugin-panel>div>p:not(.eyebrow) {
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  max-width:460px;
  margin:23px 0 18px
}
.plugin-example {
  border:1px solid #38caff26;
  border-radius:15px;
  background:radial-gradient(ellipse at 90% 10%,#24577644,transparent 60%),#111923;
  padding:40px
}
.plugin-badge {
  font-size:8px;
  letter-spacing:.13em;
  color:var(--cyan);
  border:1px solid #38caff40;
  padding:6px 9px;
  border-radius:4px
}
.plugin-example h3 {
  margin:30px 0 0;
  font-size:30px
}
.plugin-example>p {
  font-size:14px!important
}
.plugin-example>div {
  display:flex;
  gap:8px;
  margin:26px 0
}
.plugin-example>div>span {
  padding:8px 12px;
  border-radius:5px;
  background:#ffffff07;
  color:#c3d4e5;
  font-size:10px
}
.plugin-example>small {
  font-size:10px;
  color:#7e90a5;
  line-height:1.6;
  display:block
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:80px
}
.faq-list details {
  border-bottom:1px solid var(--line);
  padding:20px 0
}
.faq-list details:first-child {
  padding-top:0
}
.faq-list summary {
  font-size:14px;
  font-weight:550;
  cursor:pointer;
  padding:5px 28px 5px 0;
  position:relative;
  list-style:none
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary:after {
  content:"+";
  position:absolute;
  right:1px;
  color:var(--cyan);
  font-size:20px;
  top:0
}
.faq-list details[open] summary:after {
  content:"−"
}
.faq-list p {
  color:var(--muted);
  font-size:12px;
  line-height:1.85;
  margin:15px 0 0
}
.faq-list pre {
  padding:15px;
  background:#111923;
  border-radius:6px;
  color:#aedbe9;
  font-size:11px;
  line-height:1.7;
  overflow:auto
}
.closing {
  text-align:center;
  padding-block:94px;
  background:radial-gradient(ellipse at 50% 100%,#13426524,transparent 70%)
}
.closing .eyebrow {
  justify-content:center
}
.closing h2 {
  font-size:clamp(44px,5.5vw,76px)
}
.closing .button {
  margin-top:33px
}
footer {
  display:flex;
  align-items:center;
  gap:30px;
  border-top:1px solid var(--line);
  padding-block:24px 32px
}
footer .brand img {
  width:76px
}
footer>span {
  font-size:11px;
  color:#7e8ea2
}
footer nav {
  margin-left:auto;
  font-size:11px;
  gap:23px
}
footer>small {
  font-size:10px;
  color:#718097
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.connection-pill {
  font-size:9px;
  color:var(--cyan);
  font-weight:500;
  background:#38caff0b;
  border:1px solid #38caff22;
  border-radius:5px;
  padding:7px 10px
}
.connect-demo {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:30px;
  min-height:265px
}
.connect-copy h2 {
  font-size:38px;
  margin:12px 0 16px
}
.connect-copy>p:last-child {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  max-width:310px
}
.connect-copy .eyebrow {
  font-size:8px
}
.device-list {
  display:flex;
  flex-direction:column;
  gap:11px
}
.device {
  display:flex;
  gap:13px;
  align-items:center;
  border:1px solid #ffffff15;
  padding:17px;
  border-radius:9px;
  background:#111923;
  color:#7f90a7
}
.device.active {
  border-color:#38caff65;
  background:#38caff0c
}
.device-icon {
  font-size:24px;
  color:#9bb5ce
}
.device>div {
  flex:1
}
.device strong {
  font-size:11px;
  display:block;
  color:#dbe8f4;
  font-weight:500
}
.device small {
  font-size:9px;
  display:block;
  margin-top:6px
}
.device.active small,.device-check,.equaliser {
  color:var(--cyan)
}
.equaliser {
  letter-spacing:2px;
  margin-right:3px
}
.demo-note {
  font-size:9px;
  color:#6f8198;
  line-height:1.7;
  margin:6px 0 0
}
.rules-demo {
  border:1px solid #ffffff17;
  padding:24px;
  border-radius:10px;
  background:#121a25
}
.rules-demo h3 {
  font-size:17px;
  line-height:1.5;
  margin:17px 0
}
.rule {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  padding:12px 0;
  border-top:1px solid #ffffff0b
}
.rule>span {
  min-width:36px;
  color:#9fafc2
}
.rule>b {
  font-weight:400;
  color:#6b809b
}
.rule strong {
  margin-left:auto;
  color:#b5e9ff;
  font-weight:500;
  padding:5px 9px;
  background:#38caff12;
  border-radius:4px
}
.rules-demo .demo-note {
  margin-top:13px
}
@media(min-width:1700px) {
  .wrap {
    width:min(1440px,calc(100% - 160px))
  }
  .hero-top {
    gap:130px
  }
  h1 {
    font-size:110px
  }
  .app-window {
    grid-template-columns:200px 1fr
  }
  .preview-panel {
    padding:30px 38px
  }
  .cover>span {
    font-size:40px
  }
  .app-sidebar {
    font-size:12px
  }
  .side-item {
    padding:12px
  }
  .album strong {
    font-size:13px
  }
  .album>small {
    font-size:11px
  }
  .connect-demo {
    min-height:350px
  }
  .connect-copy h2 {
    font-size:48px
  }
}
@media(max-width:1050px) {
  .wrap {
    width:calc(100% - 56px)
  }
  .hero-top {
    gap:30px
  }
  .hero-intro>p:first-child {
    font-size:15px
  }
  .hero-actions {
    gap:16px
  }
  .hero-actions .button {
    padding-inline:16px
  }
  .app-window {
    grid-template-columns:140px 1fr
  }
  .app-sidebar {
    padding-inline:9px
  }
  .preview-panel {
    padding:22px
  }
  .cover {
    padding:11px
  }
  .album-grid {
    gap:11px
  }
  .tiny-label {
    display:none
  }
  .app-section-heading .tiny-label {
    display:none
  }
  .feature {
    padding:25px
  }
  .docker-layout,.faq-section {
    gap:40px
  }
  .plugin-panel {
    gap:45px
  }
  .download-card {
    padding:23px
  }
  .connect-demo {
    gap:22px
  }
  .connect-copy h2 {
    font-size:31px
  }
  .device {
    padding:13px
  }
  .platform-strip {
    flex-direction:column;
    gap:15px;
    align-items:start
  }
  footer>span {
    display:none
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 36px)
  }
  .topbar {
    height:83px;
    gap:14px
  }
  .brand img {
    width:85px
  }
  .topbar nav {
    gap:19px;
    font-size:11px
  }
  .topbar nav a[href="#setup"] {
    display:none
  }
  .topbar>.button {
    font-size:11px;
    padding:8px 12px;
    gap:12px
  }
  .hero {
    padding-top:51px
  }
  .hero-top {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:37px
  }
  h1 {
    font-size:clamp(55px,10vw,78px)
  }
  .hero-intro>p:first-child {
    max-width:490px;
    font-size:15px
  }
  .hero-note {
    margin-top:16px
  }
  .preview-toolbar {
    flex-direction:column;
    align-items:start;
    gap:14px
  }
  .preview-tabs {
    width:100%
  }
  .preview-tabs button {
    flex:1;
    padding:10px 9px
  }
  .app-window {
    grid-template-columns:1fr;
    min-height:0
  }
  .app-sidebar {
    display:none
  }
  .preview-panel {
    padding:20px
  }
  .app-heading {
    font-size:17px;
    margin-bottom:26px
  }
  .mock-search {
    min-width:0;
    font-size:9px
  }
  .album-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .cover>span {
    font-size:clamp(14px,3.4vw,25px)
  }
  .cover {
    padding:9px
  }
  .cover small {
    font-size:4px
  }
  .album strong {
    font-size:10px
  }
  .album>small {
    font-size:8px
  }
  .app-bottom-heading>span {
    display:none
  }
  .preview-player {
    padding:13px 17px;
    gap:12px
  }
  .player-track {
    width:50%
  }
  .player-centre {
    width:45%;
    gap:15px
  }
  .player-device {
    display:none
  }
  .player-heart {
    display:none
  }
  .preview-caption {
    font-size:9px;
    line-height:1.6;
    padding-inline:10px
  }
  .platform-strip {
    align-items:center;
    text-align:center;
    padding-top:29px
  }
  .platform-strip>div {
    gap:13px;
    font-size:10px;
    flex-wrap:wrap;
    justify-content:center
  }
  .section {
    padding-block:65px
  }
  .section-heading {
    display:block;
    margin-bottom:29px
  }
  .section-heading>p {
    margin-top:21px;
    max-width:470px;
    font-size:14px
  }
  .feature-grid {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .feature:first-child,.feature:last-child {
    grid-column:span 2
  }
  .feature h3 {
    font-size:25px
  }
  .feature p:not(.eyebrow) {
    font-size:12px
  }
  .feature-symbol {
    margin-bottom:25px
  }
  .steps {
    gap:25px
  }
  .steps h3 {
    font-size:18px
  }
  .steps p {
    font-size:12px
  }
  .server-downloads {
    grid-template-columns:1fr 1fr
  }
  .docker-card {
    grid-column:span 2;
    display:grid;
    grid-template-columns:auto 1fr auto;
    column-gap:20px;
    align-items:center
  }
  .docker-card .platform-icon {
    grid-row:span 2;
    margin:0
  }
  .docker-card .download-description {
    display:none
  }
  .docker-card .release-version {
    grid-column:2;
    margin:0
  }
  .docker-card .button {
    grid-column:3;
    grid-row:1 / 3
  }
  .companion-downloads {
    grid-template-columns:1fr
  }
  .companion-card {
    flex-direction:row;
    align-items:center;
    padding:22px
  }
  .companion-card .button {
    flex-shrink:0
  }
  .docker-layout,.plugin-panel,.faq-section {
    grid-template-columns:1fr;
    gap:30px
  }
  .plugin-example {
    padding:30px
  }
  .faq-section h2 br {
    display:none
  }
  .faq-list details:first-child {
    padding-top:14px
  }
  .closing {
    padding-block:67px
  }
  .connect-demo {
    grid-template-columns:1fr 1fr;
    min-height:270px;
    gap:20px
  }
  .connect-copy h2 {
    font-size:30px
  }
  .connect-copy>p:last-child {
    font-size:11px
  }
  .device {
    gap:8px;
    padding:12px
  }
  .device-icon {
    font-size:20px
  }
  .device strong {
    font-size:10px
  }
  .device small {
    font-size:8px
  }
  .rules-demo {
    padding:16px
  }
  .rules-demo h3 {
    font-size:14px
  }
  .rule {
    font-size:9px;
    gap:6px
  }
  footer {
    flex-wrap:wrap;
    gap:18px
  }
  footer nav {
    gap:17px
  }
  footer>small {
    width:100%;
    text-align:right
  }
}
@media(max-width:450px) {
  .topbar nav a[href="#features"] {
    display:none
  }
  .hero-actions {
    gap:22px
  }
  .hero-actions .button {
    padding-inline:18px;
    font-size:12px
  }
  .hero-actions .quiet-link {
    font-size:12px
  }
  .album-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px 13px
  }
  .album:nth-child(n+3) {
    display:none
  }
  .cover>span {
    font-size:29px
  }
  .cover {
    padding:15px
  }
  .cover small {
    font-size:5px
  }
  .album strong {
    font-size:11px
  }
  .album>small {
    font-size:9px
  }
  .app-heading {
    gap:10px
  }
  .mock-search {
    font-size:8px;
    padding:8px
  }
  .app-bottom-heading {
    margin-top:18px;
    padding-top:14px
  }
  .player-centre {
    gap:11px
  }
  .player-track strong {
    font-size:8px
  }
  .player-track small {
    font-size:7px
  }
  .mini-cover {
    width:30px;
    height:30px
  }
  .player-track {
    gap:8px
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .feature:first-child,.feature:last-child {
    grid-column:auto
  }
  .feature-audio {
    gap:12px
  }
  .sound-bars {
    flex-basis:32%;
    gap:4px
  }
  .sound-bars i {
    width:5px
  }
  .steps {
    grid-template-columns:1fr;
    gap:27px
  }
  .steps h3 {
    margin-top:15px
  }
  .steps p {
    max-width:none
  }
  .server-downloads {
    grid-template-columns:1fr
  }
  .docker-card {
    grid-column:auto;
    display:flex;
    align-items:start;
    gap:0
  }
  .docker-card .platform-icon {
    margin-bottom:27px
  }
  .docker-card .download-description {
    display:block
  }
  .docker-card .release-version {
    margin-bottom:17px
  }
  .download-heading>span {
    max-width:135px;
    text-align:right;
    line-height:1.6;
    font-size:10px
  }
  .terminal pre {
    padding:20px 16px;
    font-size:10px
  }
  .terminal>p {
    padding:15px 16px;
    font-size:9px
  }
  .connect-demo {
    grid-template-columns:1fr;
    gap:12px
  }
  .connect-copy h2 {
    font-size:28px
  }
  .connect-copy h2 br {
    display:none
  }
  .connect-copy>p:last-child {
    max-width:none
  }
  .connect-copy .eyebrow {
    display:none
  }
  .connect-copy h2 {
    margin-top:0
  }
  .device-list {
    gap:8px
  }
  .device {
    padding:10px
  }
  .device-list .demo-note {
    font-size:8px
  }
  .rules-demo {
    padding:13px
  }
  .rules-demo h3 {
    margin:0 0 12px
  }
  .connection-pill {
    font-size:8px;
    padding:6px
  }
  .app-heading {
    margin-bottom:20px
  }
  footer nav {
    font-size:10px;
    gap:14px
  }
  footer .brand img {
    width:64px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}
/* Compatibility for versioned release pages published by the application repos. */
.download-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.card {
  padding:25px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:12px
}
.card-bottom {
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:13px
}
.text-link {
  color:var(--cyan)
}
@media(max-width:600px) {
  .download-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:760px) {
  .experience:before {
    inset:-40px 0 -20px
  }
}

/* Keep navigation and setup usable at phone sizes and browser zoom. */
html { scroll-padding-top:124px }
.topbar { position:sticky; top:0; z-index:50; background:#080b10f5; backdrop-filter:blur(16px) }
.topbar nav a, footer nav a { display:inline-flex; align-items:center; min-height:44px }
.release-version { font-size:12px; color:#a5b3c5 }
.release-version a { display:inline-block; padding-block:6px; text-decoration:underline; text-underline-offset:3px }
.footnote, .faq-list p, .terminal>p { font-size:13px; color:#a5b3c5 }
.faq-list summary { min-height:44px; display:flex; align-items:center; font-size:15px }
.faq-list summary:after { top:10px }
.setup-links { display:flex; flex-wrap:wrap; gap:4px 24px }
.installation-link { color:var(--muted); font-size:13px; padding:14px 0 0; min-height:44px; text-decoration:underline; text-underline-offset:4px }
.installation-link:hover { color:var(--cyan) }
.plugin-steps { padding-left:22px; color:var(--muted); font-size:14px; line-height:1.8 }
.plugin-steps li { padding-left:6px; margin-block:12px }
.plugin-steps strong { color:var(--text) }
.companion-identity>div { min-width:0 }
.companion-card .button, .small, #copy-docker { min-height:44px }
#copy-status { display:block; padding:0 20px 16px; color:var(--cyan); font-size:13px }
#copy-status:empty { display:none }
@media(max-width:760px) {
  .topbar { height:auto; min-height:112px; flex-wrap:wrap; gap:0 14px; padding-top:8px }
  .topbar nav { order:3; width:100%; justify-content:space-between; gap:12px; font-size:13px }
  .topbar nav a[href="#setup"] { display:inline-flex }
  .terminal pre { font-size:12px }
  footer nav { font-size:12px }
}
@media(max-width:450px) {
  .companion-card { flex-direction:column; align-items:stretch; padding:22px; gap:16px }
  .companion-card .button { justify-content:space-between; font-size:13px }
  .download-heading { flex-wrap:wrap; gap:8px }
  .download-heading>span { max-width:none; text-align:left; font-size:12px }
}

.download-channel { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-bottom:32px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--panel) }
.download-channel label { font-size:14px; font-weight:600 }
.download-channel select { max-width:100%; min-height:44px; padding:10px 12px; border:1px solid #ffffff40; border-radius:8px; color:var(--text); background:var(--bg); font:inherit; font-size:14px }
.download-channel select:focus-visible { outline:2px solid var(--cyan); outline-offset:3px }
.download-channel p { flex-basis:100%; margin:0; font-size:13px; line-height:1.7; color:var(--muted) }

/* Keep short landscape screens usable while browsing and zooming. */
@media(max-height:500px) { .topbar { position:relative } html { scroll-padding-top:20px } }
.download-channel .installation-link { padding-top:0; display:inline-flex; align-items:center }
.footnote .installation-link { display:block; width:fit-content }
.faq-list details:target { border-color:var(--cyan) }

.download-type-tabs { display:flex; width:fit-content; max-width:100%; margin:0 auto 28px; padding:4px; border:1px solid #ffffff2b; border-radius:10px; background:var(--panel) }
.download-type-tabs button { min-width:140px; min-height:46px; padding:12px 24px; border:0; border-radius:7px; color:var(--muted); background:transparent; font:inherit; font-size:15px; font-weight:600 }
.download-type-tabs button[aria-selected="true"] { background:var(--cyan); color:#061723 }
.download-type-tabs button:hover:not([aria-selected="true"]) { background:#ffffff0c; color:var(--text) }
@media(max-width:400px) { .download-type-tabs button { min-width:120px } }
/* Fictional library preview, using the same compact hierarchy as the app. */
.demo-icon { width:18px; height:18px; flex-shrink:0; vertical-align:middle }
.demo-account { margin-top:auto; display:flex; align-items:center; gap:10px; padding:22px 10px 0; color:#e0e6ee }
.demo-account>span,.demo-avatar { display:grid; place-items:center; border-radius:50%; background:#255566; color:#c2f1f6; width:28px; height:28px; flex-shrink:0; font-size:11px }
.demo-account small { display:block; padding:4px 0 0; font-size:9px; letter-spacing:0; color:#8796a8 }
.demo-toolbar { display:flex; align-items:center; gap:15px }
.demo-toolbar .mock-search { display:flex; align-items:center; gap:8px }
.demo-connected { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:400; color:var(--cyan) }
.demo-art { position:relative; overflow:hidden; border-radius:7px; border:1px solid #ffffff12; aspect-ratio:1 }
.demo-art img { display:block; width:100%; height:100%; object-fit:cover }
.demo-art-play { display:none }
.app-section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:17px }
.app-section-heading>span { color:#8191a4; font-size:9px }
.demo-track-heading { margin-top:28px; margin-bottom:12px }
.demo-track-list { display:grid; gap:3px }
.demo-track { display:grid; grid-template-columns:18px 36px minmax(0,1fr) minmax(70px,.65fr) 32px 18px; align-items:center; gap:12px; width:100%; min-height:54px; padding:7px 10px; border:0; border-radius:5px; background:transparent; color:#8e9bad; text-align:left; font:inherit; font-size:10px; cursor:pointer }
.demo-track:hover { background:#ffffff09 }
.demo-track.is-current { background:#62dcf00c; color:var(--cyan) }
.demo-track img { border-radius:3px }
.demo-track-name { min-width:0 }
.demo-track-name strong,.demo-track-name small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.demo-track-name strong { color:#e2e9f1; font-weight:500; font-size:11px }
.demo-track.is-current .demo-track-name strong { color:var(--cyan) }
.demo-track-name small { margin-top:4px; color:#91a0b2; font-size:9px }
.demo-track-number,.demo-track-time { text-align:center; font-variant-numeric:tabular-nums }
.demo-track .demo-icon { width:14px; height:14px }
.player-track>img { border-radius:4px; flex-shrink:0 }
.player-track>div { min-width:0 }
.player-track strong,.player-track small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.demo-player-button,.preview-player .play-circle { border:0; display:grid; place-items:center; padding:0; cursor:pointer }
.demo-player-button { width:32px; height:32px; background:transparent; color:#b7c4d4 }
.demo-player-button:hover { color:var(--cyan) }
.preview-player .play-circle { width:34px; height:34px }
.track-progress i { background:#2c3542 }
.player-device { gap:9px }
.demo-volume { width:42px; height:3px; border-radius:2px; background:linear-gradient(to right,#aab7c7 65%,#2c3542 65%) }
@media(max-width:900px) {
 .demo-connected { display:none }
 .demo-toolbar .mock-search { min-width:0 }
 .player-device { font-size:8px }
 .demo-volume { display:none }
}
@media(max-width:600px) {
 .demo-toolbar .mock-search { display:none }
 .preview-panel { padding:20px 16px }
 .app-heading { margin-bottom:24px }
 .app-section-heading>span { display:none }
 .demo-track { grid-template-columns:14px 32px minmax(0,1fr) 32px; gap:8px; padding:7px 5px }
 .demo-track img { width:32px; height:32px }
 .demo-track-album,.demo-track>.demo-icon { display:none }
 .preview-player { gap:12px; padding:12px; min-height:82px }
 .player-track { width:52%; gap:8px }
 .player-track>img { width:36px; height:36px }
 .player-heart,.player-device { display:none }
 .player-centre { width:45%; gap:6px; flex-shrink:0 }
 .preview-caption { line-height:1.7; padding-inline:8px }
}