:root {
  --ink: #05070c;
  --ink-2: #090d15;
  --paper: #edf7ff;
  --muted: #7f90a4;
  --line: rgba(184, 218, 255, .14);
  --cyan: #67e8ff;
  --ice: #c9f7ff;
  --violet: #9272ff;
  --pink: #f47cff;
  --acid: #a8ffc9;
  --header-h: 84px;
  --player-h: 86px;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; color-scheme: dark; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--ink);
  font-family: "DM Sans", sans-serif;
  padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom, 0px));
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
body.playing .deck-meter i { animation-play-state: running; }
body.playing .signal-deck { box-shadow: 0 0 0 1px rgba(103,232,255,.12), 0 40px 140px rgba(103,232,255,.16), inset 0 0 70px rgba(103,232,255,.035); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

#cosmos { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; opacity: .72; }
.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .025;
  background:
    repeating-radial-gradient(circle at 17% 31%, #fff 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 73% 67%, #fff 0 1px, transparent 1px 5px);
  background-size: 11px 13px, 17px 19px;
}
.ambient { position: fixed; z-index: -2; width: 42vw; height: 42vw; filter: blur(80px); border-radius: 50%; opacity: .11; pointer-events: none; }
.ambient-one { top: -20vw; right: -8vw; background: var(--cyan); animation: drift 12s ease-in-out infinite alternate; }
.ambient-two { left: -26vw; top: 52vh; background: var(--violet); animation: drift 16s ease-in-out -4s infinite alternate-reverse; }
@keyframes drift { to { transform: translate3d(4vw, 5vh, 0) scale(1.16); } }

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(22px, 5vw, 76px);
  border-bottom: 1px solid transparent;
  transition: .35s ease;
}
.site-header.scrolled { height: 70px; border-color: var(--line); background: rgba(5,7,12,.76); backdrop-filter: blur(22px) saturate(1.35); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font: 800 14px/1 "Syne", sans-serif; letter-spacing: .08em; }
.brand img { width: 37px; height: 37px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 20px rgba(103,232,255,.18); }
.brand em { color: var(--cyan); font-style: normal; }
.site-header nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); }
.site-header nav a { position: relative; color: #a4afbd; font: 700 10px "Space Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--cyan); transition: right .25s; }
.site-header nav a:hover { color: var(--paper); }
.site-header nav a:hover::after { right: 0; }
.mobile-menu-toggle { display: none; }
.header-signal { justify-self: end; display: flex; align-items: center; gap: 9px; color: #a9b6c5; font: 700 9px "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.header-signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(168,255,201,.08), 0 0 16px var(--acid); animation: pulse 1.7s infinite; }
@keyframes pulse { 50% { opacity: .4; transform: scale(.8); } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + 65px) clamp(22px, 5vw, 76px) 76px; }
.hero-grid { width: min(1450px, 100%); min-width: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); align-items: center; gap: clamp(40px, 7vw, 120px); }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; color: #9aa9ba; font: 700 10px "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.kicker span { width: 30px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero h1 { margin: 0; font: 800 clamp(63px, 7.5vw, 132px)/.78 "Syne", sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.hero h1 > span { display: block; max-width: 100%; white-space: nowrap; }
.hero h1 > span:nth-child(2) { color: transparent; -webkit-text-stroke: 1px rgba(220,238,255,.46); }
.future-word { width: fit-content; position: relative; background: linear-gradient(100deg, #eefaff 5%, var(--cyan) 46%, #bb9cff 82%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 45px rgba(103,232,255,.18); }
.future-word i { position: absolute; width: 9px; height: 9px; right: -22px; top: 3px; background: var(--paper); transform: rotate(45deg); box-shadow: 0 0 25px 4px var(--cyan); animation: sparkle 2.4s infinite; }
@keyframes sparkle { 0%, 70%, 100% { opacity: .2; transform: rotate(45deg) scale(.45); } 82% { opacity: 1; transform: rotate(45deg) scale(1.4); } }
.hero-lead { width: min(580px, 92%); margin: 36px 0 28px; color: #9aa8b9; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.primary-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; min-width: 236px; padding: 17px 18px 17px 21px; color: #03070b; background: var(--cyan); font-size: 13px; font-weight: 800; box-shadow: 0 14px 45px rgba(103,232,255,.18); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); transition: .25s; }
.primary-cta b { font-size: 20px; }
.primary-cta:hover { transform: translateY(-3px); background: var(--ice); box-shadow: 0 18px 60px rgba(103,232,255,.3); }
.text-cta { display: inline-flex; align-items: center; gap: 11px; padding: 10px 0; border: 0; color: #c0cad6; background: none; cursor: pointer; font-size: 12px; }
.text-cta i { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(103,232,255,.3); border-radius: 50%; color: var(--cyan); font-style: normal; font-size: 9px; transition: .25s; }
.text-cta:hover i { background: var(--cyan); color: var(--ink); box-shadow: 0 0 25px rgba(103,232,255,.35); }
.hero-meta { width: min(610px, 100%); margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-meta > div { padding: 0 17px; border-right: 1px solid var(--line); }
.hero-meta > div:first-child { padding-left: 0; }
.hero-meta > div:last-child { border: 0; }
.hero-meta span, .hero-meta strong { display: block; font: 700 9px "Space Mono", monospace; letter-spacing: .1em; }
.hero-meta span { margin-bottom: 8px; color: #586678; }
.hero-meta strong { color: #b9c6d5; }
.hero-meta .online { color: var(--acid); }

.hero-visual { position: relative; width: min(570px, 100%); justify-self: center; perspective: 1100px; }
.signal-deck { position: relative; z-index: 2; padding: 18px; border: 1px solid rgba(160,207,255,.2); background: linear-gradient(145deg, rgba(18,27,41,.88), rgba(6,10,17,.96)); box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 45px 120px rgba(0,0,0,.7), inset 0 0 70px rgba(103,232,255,.025); clip-path: polygon(0 24px, 24px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 18px 100%, 0 calc(100% - 18px)); transform: rotateY(-5deg) rotateX(2deg); transition: box-shadow .4s; }
.deck-topline, .deck-footer { display: flex; align-items: center; justify-content: space-between; color: #66758a; font: 700 8px "Space Mono", monospace; letter-spacing: .16em; }
.deck-topline { padding: 2px 2px 13px; }
.deck-topline strong { color: var(--cyan); }
.deck-art-wrap { position: relative; overflow: hidden; aspect-ratio: 1/1; border: 1px solid rgba(180,220,255,.14); background: #03060a; }
.deck-art-wrap::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 48%, rgba(0,0,0,.66) 100%), linear-gradient(120deg, rgba(255,255,255,.08), transparent 28%); pointer-events: none; }
.deck-art-wrap img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.06); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.signal-deck:hover .deck-art-wrap img { transform: scale(1.035); }
.scan-line { position: absolute; z-index: 4; left: 0; right: 0; top: -5%; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 16px var(--cyan), 0 12px 38px rgba(103,232,255,.35); animation: scan 5.6s linear infinite; opacity: .8; }
@keyframes scan { to { top: 105%; } }
.corner { position: absolute; z-index: 5; width: 28px; height: 28px; border-color: rgba(103,232,255,.72); }
.corner-a { left: 10px; top: 10px; border-left: 1px solid; border-top: 1px solid; }
.corner-b { right: 10px; top: 10px; border-right: 1px solid; border-top: 1px solid; }
.corner-c { left: 10px; bottom: 10px; border-left: 1px solid; border-bottom: 1px solid; }
.corner-d { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.deck-info { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 3px 16px; }
.deck-info span { display: block; margin-bottom: 6px; color: var(--cyan); font: 700 8px "Space Mono", monospace; letter-spacing: .14em; }
.deck-info h2 { margin: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(18px, 2vw, 25px) "Syne", sans-serif; letter-spacing: -.02em; }
.round-play { flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid rgba(103,232,255,.45); border-radius: 50%; color: var(--cyan); background: rgba(103,232,255,.07); cursor: pointer; transition: .25s; }
.round-play:hover { color: var(--ink); background: var(--cyan); box-shadow: 0 0 30px rgba(103,232,255,.32); }
.deck-meter { display: flex; align-items: center; gap: 3px; height: 42px; padding: 6px 3px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.deck-meter i { flex: 1; height: calc(15% + (var(--n) % 9) * 8%); max-height: 100%; background: linear-gradient(to top, var(--violet), var(--cyan)); box-shadow: 0 0 6px rgba(103,232,255,.28); transform-origin: bottom; animation: meter calc(.46s + (var(--n) % 6) * .08s) ease-in-out infinite alternate; animation-play-state: paused; }
@keyframes meter { to { transform: scaleY(.24); opacity: .42; } }
.deck-footer { padding: 13px 3px 0; }
.deck-orbit { position: absolute; border: 1px solid rgba(103,232,255,.12); border-radius: 50%; pointer-events: none; }
.orbit-a { inset: -80px; animation: orbitSpin 24s linear infinite; }
.orbit-a::before, .orbit-b::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.orbit-a::before { left: 16%; top: 8%; }
.orbit-b { inset: -38px; border-style: dashed; animation: orbitSpin 16s linear reverse infinite; }
.orbit-b::after { right: 5%; bottom: 28%; background: var(--violet); box-shadow: 0 0 20px var(--violet); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.floating-tag { position: absolute; z-index: 5; padding: 9px 12px; border: 1px solid rgba(175,216,255,.17); color: #9eacbb; background: rgba(7,11,18,.82); backdrop-filter: blur(12px); font: 700 8px "Space Mono", monospace; letter-spacing: .12em; box-shadow: 0 15px 35px rgba(0,0,0,.35); }
.floating-tag span { color: var(--cyan); margin-right: 6px; }
.floating-tag i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 9px var(--acid); }
.tag-one { left: -60px; top: 20%; animation: hoverTag 4s ease-in-out infinite; }
.tag-two { right: -45px; bottom: 15%; animation: hoverTag 4.8s ease-in-out -.9s infinite; }
@keyframes hoverTag { 50% { transform: translateY(-8px); } }
.scroll-cue { position: absolute; left: clamp(22px, 5vw, 76px); bottom: 24px; display: flex; align-items: center; gap: 15px; color: #586678; font: 700 8px "Space Mono", monospace; letter-spacing: .16em; }
.scroll-cue i { position: relative; width: 62px; height: 1px; overflow: hidden; background: rgba(255,255,255,.12); }
.scroll-cue i::after { content: ""; position: absolute; width: 25px; height: 1px; background: var(--cyan); animation: scrollLine 2s linear infinite; }
@keyframes scrollLine { from { left: -25px; } to { left: 65px; } }

.transmission-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(103,232,255,.03); transform: rotate(-1.2deg) scale(1.03); }
.transmission-strip div { width: max-content; padding: 14px 0; color: #91a3b7; font: 700 11px "Space Mono", monospace; letter-spacing: .16em; animation: marquee 28s linear infinite; }
.transmission-strip i { margin: 0 26px; color: var(--cyan); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.music-section, .process-section, .manifesto { width: min(1450px, calc(100% - clamp(44px, 10vw, 152px))); margin: 0 auto; padding: clamp(105px, 12vw, 180px) 0; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 60px; align-items: end; margin-bottom: 58px; }
.section-index { margin: 0 0 18px; color: var(--cyan); font: 700 9px "Space Mono", monospace; letter-spacing: .18em; }
.section-heading h2, .process-head h2 { margin: 0; font: 700 clamp(50px, 6vw, 90px)/.88 "Syne", sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.section-heading h2 em, .process-head h2 em { color: transparent; -webkit-text-stroke: 1px rgba(207,231,255,.48); font-style: normal; }
.section-heading > p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 15px; }
.filter-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 30px; }
.filter-row button { min-width: 82px; padding: 9px 14px; border: 1px solid var(--line); color: #76879a; background: transparent; cursor: pointer; font: 700 9px "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; transition: .2s; }
.filter-row button:hover, .filter-row button.active { color: var(--ink); border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 20px rgba(103,232,255,.16); }
.track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.track-card { position: relative; min-width: 0; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(15,22,34,.78), rgba(7,11,18,.86)); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.track-card:hover, .track-card.active { transform: translateY(-8px); border-color: rgba(103,232,255,.38); box-shadow: 0 28px 70px rgba(0,0,0,.34), 0 0 35px rgba(103,232,255,.06); }
.track-card::before { content: attr(data-number); position: absolute; z-index: 4; right: 13px; top: 13px; padding: 5px 7px; color: var(--cyan); background: rgba(4,7,11,.72); border: 1px solid rgba(103,232,255,.18); font: 700 8px "Space Mono", monospace; }
.track-cover { position: relative; display: block; width: 100%; aspect-ratio: 1.13/1; overflow: hidden; padding: 0; border: 0; background: #080c13; cursor: pointer; }
.track-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,7,12,.8), transparent 48%), linear-gradient(120deg, rgba(103,232,255,.1), transparent 40%); opacity: .75; transition: .3s; }
.track-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1), filter .4s; }
.track-card:hover .track-cover img { transform: scale(1.055); filter: saturate(1.12); }
.card-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(229,249,255,.55); border-radius: 50%; color: var(--paper); background: rgba(5,10,17,.5); backdrop-filter: blur(8px); transform: translate(-50%, -45%) scale(.82); opacity: 0; transition: .3s; }
.track-card:hover .card-play, .track-card.active .card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card-body { padding: 22px; }
.card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; color: var(--cyan); font: 700 8px "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.card-kicker span:last-child { color: #59687a; }
.card-body h3 { margin: 0 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(20px, 2vw, 28px) "Syne", sans-serif; letter-spacing: -.025em; }
.card-body > p { min-height: 42px; margin: 0 0 18px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); font-size: 12px; line-height: 1.7; }
.mini-wave { display: flex; align-items: center; gap: 2px; height: 25px; }
.mini-wave i { flex: 1; height: var(--bar); background: linear-gradient(to top, rgba(146,114,255,.34), rgba(103,232,255,.72)); transform-origin: center; transition: .3s; }
.track-card.active .mini-wave i { animation: miniMeter .8s ease-in-out infinite alternate; animation-delay: calc(var(--delay) * -1ms); }
@keyframes miniMeter { to { transform: scaleY(.32); opacity: .5; } }
.loading-card { height: 485px; border: 1px solid var(--line); background: linear-gradient(110deg, rgba(255,255,255,.025) 30%, rgba(103,232,255,.07) 45%, rgba(255,255,255,.025) 60%); background-size: 300% 100%; animation: loading 1.8s infinite; }
@keyframes loading { to { background-position: -150% 0; } }
.empty-catalog { grid-column: 1/-1; padding: 85px 24px; border: 1px solid var(--line); text-align: center; color: var(--muted); }
.empty-catalog strong { display: block; margin-bottom: 9px; color: var(--paper); font: 700 26px "Syne", sans-serif; }

.process-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 9vw, 145px); border-top: 1px solid var(--line); }
.process-head { position: sticky; top: 120px; align-self: start; }
.process-grid { display: grid; }
.process-grid article { position: relative; min-height: 230px; display: grid; grid-template-columns: 50px 62px 1fr; grid-template-rows: auto 1fr; column-gap: 23px; padding: 35px 0; border-top: 1px solid var(--line); }
.process-grid article:last-child { border-bottom: 1px solid var(--line); }
.process-grid article > span { color: #566477; font: 700 9px "Space Mono", monospace; }
.process-icon { grid-row: span 2; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(103,232,255,.24); color: var(--cyan); background: rgba(103,232,255,.035); font-size: 27px; box-shadow: inset 0 0 28px rgba(103,232,255,.04); }
.process-grid h3 { margin: 0; font: 700 27px "Syne", sans-serif; letter-spacing: -.025em; }
.process-grid p { grid-column: 3; margin: 14px 0 0; color: var(--muted); line-height: 1.7; font-size: 14px; }

.manifesto { border-top: 1px solid var(--line); text-align: center; }
.manifesto .section-index { margin-bottom: 46px; }
.manifesto blockquote { margin: 0; font: 700 clamp(40px, 6.7vw, 104px)/.95 "Syne", sans-serif; letter-spacing: -.065em; }
.manifesto blockquote em { color: transparent; -webkit-text-stroke: 1px rgba(103,232,255,.68); font-style: normal; text-shadow: 0 0 50px rgba(103,232,255,.07); }
.manifesto-foot { width: min(640px, 100%); margin: 54px auto 0; display: flex; align-items: center; gap: 18px; color: #58687b; font: 700 8px "Space Mono", monospace; letter-spacing: .14em; }
.manifesto-foot i { flex: 1; height: 1px; background: var(--line); }

footer { min-height: 260px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 40px; padding: 50px clamp(22px, 5vw, 76px); border-top: 1px solid var(--line); background: #04060a; }
.footer-brand img { width: 54px; height: 54px; }
footer > p { color: #738397; font-size: 13px; line-height: 1.7; }
footer > div { justify-self: end; display: grid; justify-items: end; gap: 8px; color: #536173; font: 700 8px "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
footer > div a:hover { color: var(--cyan); }

.player { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; min-height: var(--player-h); display: grid; grid-template-columns: minmax(230px, .9fr) 160px minmax(320px, 1.6fr) 170px; align-items: center; gap: 22px; padding: 10px clamp(18px, 3vw, 48px) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(103,232,255,.2); background: rgba(6,9,15,.9); backdrop-filter: blur(25px) saturate(1.5); box-shadow: 0 -18px 50px rgba(0,0,0,.35); transform: translateY(0); }
.player-track { min-width: 0; display: flex; align-items: center; gap: 13px; }
.player-track img { flex: 0 0 auto; width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--line); }
.player-track > div { min-width: 0; }
.player-track strong, .player-track span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-track strong { margin-bottom: 5px; font: 700 13px "Syne", sans-serif; }
.player-track span { color: #68788c; font: 700 8px "Space Mono", monospace; letter-spacing: .1em; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 11px; }
.player-controls button { width: 32px; height: 32px; border: 0; color: #8d9bad; background: transparent; cursor: pointer; }
.player-controls button:hover { color: var(--cyan); }
.player-controls .main-play { width: 47px; height: 47px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--ink); background: var(--cyan); font-size: 12px; box-shadow: 0 0 25px rgba(103,232,255,.2); }
.player-timeline { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 10px; color: #5f6f83; font: 700 8px "Space Mono", monospace; }
.progress { position: relative; width: 100%; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.progress::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(255,255,255,.13); }
.progress i { position: absolute; left: 0; top: 7px; height: 4px; width: 0%; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 10px rgba(103,232,255,.55); }
.progress i::after { content: ""; position: absolute; right: -4px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--cyan); }
.player-volume { display: flex; align-items: center; gap: 10px; color: #596a7e; font: 700 8px "Space Mono", monospace; }
.player-volume input { width: 100%; accent-color: var(--cyan); }

@media (max-width: 1150px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .8fr); gap: 55px; }
  .hero h1 { font-size: clamp(58px, 7.7vw, 92px); }
  .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player { grid-template-columns: minmax(220px, 1fr) 150px minmax(260px, 1.3fr); }
  .player-volume { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 72px; --player-h: 78px; }
  .site-header { grid-template-columns: 1fr auto; padding: env(safe-area-inset-top, 0px) 18px 0; }
  .site-header.scrolled { height: calc(68px + env(safe-area-inset-top, 0px)); }
  .site-header nav {
    position: fixed;
    z-index: -1;
    top: calc(68px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 9px;
    border: 1px solid var(--line);
    background: rgba(6,9,15,.97);
    backdrop-filter: blur(25px) saturate(1.4);
    box-shadow: 0 24px 60px rgba(0,0,0,.48);
    transform: translateY(-18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .25s ease;
  }
  .site-header.menu-open nav { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .site-header nav a { min-height: 50px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--line); font-size: 11px; }
  .site-header nav a:last-child { border-bottom: 0; }
  .site-header nav a::after { display: none; }
  .mobile-menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; padding: 0; border: 1px solid var(--line); color: var(--paper); background: rgba(103,232,255,.035); cursor: pointer; }
  .mobile-menu-toggle i { display: block; width: 19px; height: 1px; background: var(--cyan); transition: transform .25s, opacity .2s; }
  .site-header.menu-open .mobile-menu-toggle i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.menu-open .mobile-menu-toggle i:nth-child(2) { opacity: 0; }
  .site-header.menu-open .mobile-menu-toggle i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .header-signal { display: none; }
  .hero { min-height: auto; overflow: clip; padding: 130px 22px 90px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 95px; }
  .hero h1 { font-size: clamp(54px, 11.3vw, 88px); }
  .hero-lead { width: min(600px, 100%); }
  .hero-visual { width: min(510px, 92%); min-width: 0; }
  .scroll-cue { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .process-section { grid-template-columns: 1fr; }
  .process-head { position: static; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > p { display: none; }
  .player { grid-template-columns: minmax(160px, 1fr) 142px minmax(200px, 1fr); padding-inline: 14px; gap: 10px; }
  .player-track img { width: 50px; height: 50px; }
}

@media (max-width: 620px) {
  :root { --player-h: 72px; }
  .header-signal span { display: none; }
  .hero { padding-inline: 17px; }
  .kicker { font-size: 8px; }
  .hero h1 { font-size: clamp(26px, 7.7vw, 48px); line-height: .93; }
  .hero h1 > span { letter-spacing: -.065em; }
  .hero-actions { align-items: stretch; gap: 13px; }
  .primary-cta { width: 100%; min-height: 54px; }
  .text-cta { width: 100%; min-height: 46px; }
  .hero-lead { margin-top: 28px; font-size: 16px; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta > div:nth-child(2) { border: 0; }
  .hero-meta > div:nth-child(3) { display: none; }
  .hero-visual { width: calc(100% - 20px); max-width: 100%; }
  .signal-deck { transform: none; padding: 12px; }
  .orbit-a { inset: -28px; }
  .orbit-b { inset: -14px; }
  .tag-one { left: -8px; }
  .tag-two { right: -8px; }
  .music-section, .process-section, .manifesto { width: calc(100% - 34px); padding-block: 100px; }
  .section-heading { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .section-heading > *, .process-head { min-width: 0; }
  .section-heading h2, .process-head h2 { font-size: clamp(36px, 10vw, 62px); overflow-wrap: anywhere; }
  .track-grid { grid-template-columns: 1fr; }
  .track-cover, .filter-row button, .round-play { min-height: 44px; }
  .loading-card { height: 440px; }
  .process-grid article { grid-template-columns: 35px 52px 1fr; column-gap: 12px; }
  .process-icon { width: 52px; height: 52px; }
  .process-grid p { grid-column: 2/4; padding-left: 64px; }
  .manifesto blockquote { font-size: clamp(34px, 11vw, 58px); }
  footer { grid-template-columns: 1fr; padding-bottom: 70px; }
  footer > div { justify-self: start; justify-items: start; }
  .player { grid-template-columns: minmax(0, 1fr) 120px; }
  .player-track img { width: 48px; height: 48px; }
  .player-timeline { display: none; }
  .player-controls { justify-content: flex-end; }
  .player-controls .main-play { width: 44px; height: 44px; }
}

@media (max-width: 370px) {
  .brand { font-size: 12px; }
  .brand img { width: 33px; height: 33px; }
  .hero { padding-inline: 14px; }
  .hero h1 { font-size: clamp(26px, 7.7vw, 30px); }
  .kicker { letter-spacing: .08em; }
  .hero-meta { margin-top: 42px; }
  .hero-meta > div { padding-inline: 10px; }
  .floating-tag { display: none; }
  .player { grid-template-columns: minmax(0, 1fr) 106px; padding-inline: 9px; }
  .player-track { gap: 8px; }
  .player-track img { width: 43px; height: 43px; }
  .player-controls { gap: 2px; }
  .player-controls button:first-child { display: none; }
}

@media (hover: none) and (pointer: coarse) {
  .track-card:hover { transform: none; }
  .card-play { opacity: 1; transform: translate(-50%, -50%) scale(.92); }
  .primary-cta:active, .round-play:active, .main-play:active { transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #cosmos { display: none; }
}