:root {
  --bg-a: #f6ead0;
  --bg-b: #f0dba6;
  --bg-c: #ebc987;
  --ink: #40260f;
  --muted: #765b40;
  --accent: #b5502f;
  --accent-soft: rgba(181, 80, 47, .16);
  --card: rgba(255, 250, 238, .58);
  --card-solid: #f8edda;
  --card-line: rgba(181, 80, 47, .25);
  --shadow: rgba(72, 39, 12, .14);
  --surface-blur: 18px;
  --ease-glide: cubic-bezier(.22, .61, .36, 1);
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="dark"] {
  --bg-a: #1c1510;
  --bg-b: #140e0a;
  --bg-c: #0e0a07;
  --ink: #ece0c8;
  --muted: #b39c80;
  --accent: #e0a656;
  --accent-soft: rgba(224, 166, 86, .13);
  --card: rgba(40, 30, 22, .54);
  --card-solid: #241a12;
  --card-line: rgba(224, 166, 86, .26);
  --shadow: rgba(0, 0, 0, .48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(80vw 80vw at 12% 8%, rgba(168, 72, 58, .11), transparent 64%),
    radial-gradient(75vw 75vw at 86% 28%, rgba(109, 117, 81, .11), transparent 67%),
    linear-gradient(155deg, var(--bg-a), var(--bg-b) 55%, var(--bg-c));
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  font-weight: 340;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a { color: var(--accent); text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wrap { width: min(1080px, calc(100% - 48px)); margin-inline: auto; }
.narrow { max-width: 720px; }
.display, h1, h2, h3 { font-family: "Anton", sans-serif; text-transform: uppercase; font-weight: 400; }
.mono, .eyebrow, .sec-eyebrow { font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .15em; }
.muted { color: var(--muted); }

#ambient {
  position: fixed;
  inset: -10vh -10vw;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
.ambient-orb {
  position: absolute;
  width: min(52vw, 650px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .19;
  mix-blend-mode: multiply;
  animation: breathe 11s ease-in-out infinite;
}
:root[data-theme="dark"] .ambient-orb { mix-blend-mode: screen; opacity: .15; }
.ambient-orb.one { left: -8%; top: 3%; background: #a8483a; }
.ambient-orb.two { right: -7%; top: 42%; background: #6d7551; animation-delay: -4s; }
.ambient-orb.three { left: 30%; bottom: -18%; background: #d19a4e; animation-delay: -7s; }
@keyframes breathe { 50% { transform: scale(1.13); opacity: .27; } }

.nav-fade {
  position: fixed;
  inset: 0 0 auto;
  height: 118px;
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg-a) 0 62px, color-mix(in srgb, var(--bg-a) 95%, transparent) 78px, color-mix(in srgb, var(--bg-a) 72%, transparent) 102px, transparent 126px);
}
#nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  pointer-events: none;
}
#nav > * { pointer-events: auto; }
.brand {
  color: var(--ink);
  font-family: "Anton", sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  letter-spacing: .05em;
  line-height: 1;
}
.brand span { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-link { color: var(--muted); font-family: "Space Mono", monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.nav-link:hover { color: var(--accent); }
.theme-toggle, .icon-button {
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: var(--card);
  backdrop-filter: blur(var(--surface-blur));
  cursor: pointer;
}
.theme-toggle { padding: 8px 13px; font-family: "Space Mono", monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }

#sticky-cta {
  position: fixed;
  top: 11px;
  left: clamp(180px, 22vw, 290px);
  z-index: 65;
  max-width: min(46vw, 560px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-72px);
  transition: opacity .45s ease, transform .6s var(--ease-settle);
}
#sticky-cta.is-docked { opacity: 1; pointer-events: auto; transform: none; }
#sticky-cta a, .hero-next a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card-solid) 76%, transparent);
  box-shadow: 0 12px 34px var(--shadow);
  backdrop-filter: blur(var(--surface-blur));
  font-family: "Space Mono", monospace;
  font-size: .62rem;
  line-height: 1.25;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#sticky-cta span, .hero-next span { color: var(--muted); }
#sticky-cta b, .hero-next b { color: var(--accent); font-weight: 700; }

.hero { position: relative; min-height: 138svh; }
.hero-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 88px 24px 60px;
}
.hero-field { position: absolute; inset: 0; pointer-events: none; perspective: 800px; }
.hero-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 780px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 120px var(--accent-soft), inset 0 0 90px var(--accent-soft);
}
.hero-ring::before, .hero-ring::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: inherit;
  border-radius: inherit;
}
.hero-ring::after { inset: 29%; }
.hero-content { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.eyebrow { color: var(--accent); font-size: .66rem; }
.hero h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px 0;
  font-size: clamp(4.3rem, 13vw, 9.4rem);
  line-height: .79;
  letter-spacing: -.015em;
}
#hero-come, #hero-letgo { display: block; will-change: transform, opacity; }
#hero-letgo { color: var(--accent); }
.hero-sub {
  max-width: 37ch;
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 2vw, 1.36rem);
  font-style: italic;
  will-change: transform, opacity;
}
.hero-next { margin-top: 31px; will-change: opacity, transform; }
.scroll-hint { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: var(--muted); font: .57rem "Space Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }

main { position: relative; z-index: 1; }
section { position: relative; isolation: isolate; padding: clamp(76px, 9vw, 116px) 0; border-top: 1px solid var(--card-line); }
section > .wrap { position: relative; z-index: 1; }
section[data-parallax]::before,
section[data-parallax]::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  will-change: transform;
}
section[data-parallax]::before {
  width: clamp(170px, 24vw, 360px);
  aspect-ratio: 1;
  top: 10%;
  right: clamp(-130px, -8vw, -45px);
  border-radius: 50%;
  box-shadow: inset 0 0 70px var(--accent-soft), 0 0 90px color-mix(in srgb, var(--accent-soft) 65%, transparent);
  transform: translate3d(0, var(--section-shift, 0px), 0) rotate(var(--section-turn, 0deg));
}
section[data-parallax]::after {
  width: clamp(90px, 13vw, 180px);
  height: clamp(180px, 28vw, 390px);
  left: clamp(-78px, -4vw, -24px);
  bottom: 9%;
  border-radius: 999px;
  opacity: .5;
  transform: translate3d(0, calc(var(--section-shift, 0px) * -.58), 0) rotate(calc(var(--section-turn, 0deg) * -.45));
}
.section-compact { padding-block: clamp(58px, 7vw, 88px); }
.sec-eyebrow { margin-bottom: 14px; color: var(--accent); font-size: .63rem; }
h2 { max-width: 19ch; margin: 0 0 20px; font-size: clamp(2.7rem, 6vw, 5.3rem); line-height: .92; letter-spacing: -.01em; }
h3 { margin: 0; line-height: .98; }
.lede { max-width: 56ch; margin: 0 0 22px; font-size: clamp(1.1rem, 1.8vw, 1.34rem); line-height: 1.56; }
.section-intro { display: grid; grid-template-columns: minmax(240px, .78fr) minmax(300px, 1.22fr); gap: clamp(34px, 7vw, 90px); align-items: start; }
.section-intro-copy p { margin: 0 0 20px; }
.aside-copy { padding-left: 20px; border-left: 2px solid var(--accent); color: var(--muted); }

.word-light .word { display: inline; color: color-mix(in srgb, var(--muted) 72%, var(--accent)); opacity: .34; transition: color .28s ease, opacity .28s ease, text-shadow .28s ease; }
.word-light .word.is-lit { color: var(--ink); opacity: 1; }
.word-light .word.is-active { color: var(--accent); opacity: 1; text-shadow: 0 0 22px var(--accent-soft); }
.message-shift { will-change: transform, opacity; transform: translate3d(0, var(--message-shift, 0px), 0); opacity: var(--message-opacity, 1); }
.question-title { font-size: clamp(3rem, 7vw, 6.1rem); max-width: 10ch; }
.just-listen { margin-top: clamp(42px, 7vw, 82px); font-size: clamp(4rem, 10vw, 8.4rem); color: var(--accent); }

.beat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: 52px; align-items: start; }
.beat-card, .instr, .baseline-panel, .book {
  border: 1px solid var(--card-line);
  background: var(--card);
  box-shadow: 0 20px 55px color-mix(in srgb, var(--shadow) 55%, transparent);
  backdrop-filter: blur(var(--surface-blur));
}
.beat-card { min-height: 300px; padding: 31px 28px; border-radius: 24px; transform: translateY(var(--float-y, 0)) perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transition: border-color .4s, box-shadow .4s, transform .65s var(--ease-settle), opacity .7s ease; }
.beat-card:nth-child(2) { --float-y: 26px; }
.beat-card:nth-child(3) { --float-y: -12px; }
.beat-card:hover { border-color: color-mix(in srgb, var(--accent) 68%, var(--card-line)); box-shadow: 0 27px 70px var(--shadow); }
.beat-num { color: var(--accent); font: .64rem "Space Mono", monospace; letter-spacing: .15em; }
.beat-card h3 { margin: 18px 0 12px; font-size: 1.78rem; }
.beat-card p, .instr p { margin: 0; color: var(--muted); font-size: .95rem; }
.reveal { opacity: 0; transform: translateY(calc(var(--float-y, 0px) + 34px)); }
.reveal.in { opacity: 1; transform: translateY(var(--float-y, 0)); }
.beat-card.reveal.in { transform: translateY(var(--float-y, 0)) perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); }

.promise { max-width: 920px; margin: clamp(84px, 11vw, 130px) auto 50px; text-align: center; }
.promise p { margin: 0; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.02; }
.promise strong { display: block; font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; }
.promise strong:last-child { color: var(--accent); }
.feel { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; max-width: 760px; margin: 0 auto; }
.feel span { padding: 8px 14px; border: 1px solid var(--card-line); border-radius: 999px; background: color-mix(in srgb, var(--card) 72%, transparent); color: var(--muted); font: .61rem "Space Mono", monospace; letter-spacing: .09em; text-transform: uppercase; transform: translateY(var(--chip-y, 0)); }
.palette-head { max-width: 780px; margin: clamp(96px, 13vw, 164px) 0 0 auto; }
.palette-head h2 { max-width: 11ch; }

.sonic-lab { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(26px, 5vw, 72px); align-items: end; margin-top: clamp(45px, 7vw, 86px); padding: clamp(27px, 4vw, 46px); border: 1px solid var(--card-line); border-radius: 26px; background: color-mix(in srgb, var(--card) 82%, transparent); box-shadow: 0 24px 65px var(--shadow); backdrop-filter: blur(var(--surface-blur)); }
.sonic-lab h3 { max-width: 13ch; font-size: clamp(2rem, 4.3vw, 3.8rem); line-height: .96; }
.sonic-lab p { max-width: 55ch; margin: 18px 0 0; color: var(--muted); }
.sonic-lab-action { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-a);
  cursor: pointer;
  font: 700 .67rem "Space Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .25s var(--ease-settle), filter .25s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-ghost { color: var(--ink); background: transparent; border-color: var(--card-line); }
.headphones { display: block; margin-top: 12px; color: var(--muted); font: .58rem "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }

.instruments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px; margin-top: 38px; }
.instr { position: relative; min-height: 330px; padding: 28px; border-radius: 20px; overflow: hidden; transition: transform .5s var(--ease-settle), border-color .35s; }
.instr:hover { transform: translateY(-6px); border-color: var(--accent); }
.instr .k { color: var(--accent); font: .58rem "Space Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }
.instr h3 { position: relative; z-index: 1; max-width: 12ch; margin: 94px 0 10px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.instr p, .instr .k { position: relative; z-index: 1; }
.instrument-illustration { position: absolute; right: -11px; top: -24px; width: 210px; height: 180px; color: var(--accent); opacity: .68; pointer-events: none; transform: translate3d(var(--art-x, 0), var(--art-y, 0), 0); }
.instrument-illustration::before, .instrument-illustration::after, .instrument-illustration i { content: ""; position: absolute; display: block; border: 1px solid currentColor; }
.instrument-illustration.bowl::before { inset: 28px 29px 18px; border-radius: 48% 48% 42% 42%; box-shadow: inset 0 -18px 0 var(--accent-soft), 0 0 42px var(--accent-soft); }
.instrument-illustration.bowl::after { width: 118px; height: 16px; left: 45px; top: 39px; border-radius: 50%; }
.instrument-illustration.bowl i:nth-child(1) { width: 156px; height: 156px; top: -8px; left: 25px; border-radius: 50%; opacity: .45; }
.instrument-illustration.bowl i:nth-child(2) { width: 188px; height: 188px; top: -24px; left: 9px; border-radius: 50%; opacity: .22; }
.instrument-illustration.bowl i:nth-child(3) { width: 5px; height: 38px; left: 101px; top: 73px; border-radius: 999px; background: currentColor; }
.instrument-illustration.strings::before { width: 126px; height: 154px; right: 32px; top: 14px; border-radius: 70px 70px 12px 12px; transform: rotate(7deg); }
.instrument-illustration.strings::after { width: 168px; height: 168px; right: -4px; top: -5px; border-radius: 50%; opacity: .3; }
.instrument-illustration.strings i { width: 1px; height: 155px; top: 13px; background: currentColor; border: 0; transform: rotate(7deg); transform-origin: center; }
.instrument-illustration.strings i:nth-child(1) { right: 68px; }.instrument-illustration.strings i:nth-child(2) { right: 86px; }.instrument-illustration.strings i:nth-child(3) { right: 104px; }.instrument-illustration.strings i:nth-child(4) { right: 122px; }.instrument-illustration.strings i:nth-child(5) { right: 140px; }
.instrument-illustration.gong::before { width: 152px; height: 152px; right: 16px; top: 5px; border-radius: 50%; box-shadow: inset 0 0 32px var(--accent-soft); }
.instrument-illustration.gong::after { width: 94px; height: 94px; right: 45px; top: 34px; border-radius: 50%; }
.instrument-illustration.gong i { width: 192px; height: 192px; right: -4px; top: -15px; border-radius: 50%; opacity: .22; }.instrument-illustration.gong i:nth-child(2) { width: 50px; height: 50px; right: 67px; top: 56px; border-radius: 50%; opacity: .5; }.instrument-illustration.gong i:nth-child(3) { width: 2px; height: 68px; right: 92px; top: 94px; background: currentColor; border: 0; transform: rotate(28deg); }
.instrument-illustration.synth::before { width: 150px; height: 104px; right: 22px; top: 34px; border-radius: 13px; box-shadow: inset 0 0 34px var(--accent-soft); }
.instrument-illustration.synth::after { width: 112px; height: 1px; right: 41px; top: 88px; border: 0; background: currentColor; box-shadow: 0 18px 0 currentColor, 0 36px 0 currentColor; opacity: .7; }
.instrument-illustration.synth i { width: 19px; height: 19px; top: 49px; border-radius: 50%; box-shadow: 0 0 19px var(--accent-soft); }.instrument-illustration.synth i:nth-child(1) { right: 153px; }.instrument-illustration.synth i:nth-child(2) { right: 125px; }.instrument-illustration.synth i:nth-child(3) { right: 97px; }.instrument-illustration.synth i:nth-child(4) { right: 69px; }
.instr.in .instrument-illustration { animation: instrument-drift 8s ease-in-out infinite; }
.instr.in:nth-child(even) .instrument-illustration { animation-delay: -3.5s; animation-direction: reverse; }
.instr:hover .instrument-illustration { opacity: .96; }
@keyframes instrument-drift { 50% { transform: translate3d(-7px, 11px, 0) rotate(4deg); } }

.equalize { min-height: 115svh; }
.equalize-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(42px, 8vw, 110px); align-items: start; }
.equalize-title { position: sticky; top: 126px; color: var(--accent); font-size: clamp(4.2rem, 10vw, 9rem); }
.equalize-copy { max-width: 29ch; margin: 15vh 0 12vh; font-size: clamp(1.65rem, 3.2vw, 3rem); line-height: 1.23; }

.faq { margin-top: 30px; border-top: 1px solid var(--card-line); }
.faq details { border-bottom: 1px solid var(--card-line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; list-style: none; cursor: pointer; font: 1.16rem "Anton", sans-serif; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { color: var(--accent); transition: transform .25s; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq .a { max-width: 60ch; padding: 0 0 24px; color: var(--muted); }
.bring-note { margin-top: 30px; padding: 25px 27px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 1.08rem; }

.baseline-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; padding: clamp(30px, 5vw, 52px); border-radius: 28px; }
.baseline-panel h2 { color: var(--accent); }
.baseline-note { margin: -6px 0 0; color: var(--muted); font-style: italic; }
.baseline-mark { position: relative; display: grid; place-items: center; min-height: 250px; }
.baseline-mark::before, .baseline-mark::after { content: ""; position: absolute; width: 170px; aspect-ratio: 1; border: 1px solid var(--accent); border-radius: 50%; opacity: .55; }
.baseline-mark::after { width: 90px; box-shadow: 0 0 70px var(--accent-soft); }
.baseline-mark span { position: relative; z-index: 1; color: var(--accent); font: .62rem "Space Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }

.schedule-wrap { margin-top: 34px; padding: 8px 27px; border: 1px solid var(--card-line); border-radius: 22px; background: var(--card); backdrop-filter: blur(var(--surface-blur)); }
.srow { display: grid; grid-template-columns: minmax(120px, .36fr) minmax(280px, 1fr) auto; gap: 22px; align-items: center; padding: 24px 0; border-top: 1px solid var(--card-line); }
.srow:first-child { border-top: 0; }
.srow .date { font: 1.4rem "Anton", sans-serif; text-transform: uppercase; }
.srow .time, .srow .loc { color: var(--muted); font-size: .85rem; }
.event-copy { display: grid; gap: 4px; }
.event-copy strong { font-size: 1.02rem; }
.event-copy .loc { display: block; }
.event-copy p { max-width: 62ch; margin: 4px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }

.sets, .bring { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 35px; }
.set, .bring > div { padding: 29px; border-top: 1px solid var(--card-line); }
.set h3 { margin: 10px 0 5px; font-size: 2rem; }
.set .tag { color: var(--muted); font-style: italic; }
.set ul { margin: 20px 0 0; padding: 0; list-style: none; }
.set li { padding: 8px 0; border-top: 1px solid var(--card-line); color: var(--muted); font-size: .9rem; }
.set li b { color: var(--ink); }
.bring { grid-template-columns: repeat(3, 1fr); }
.bring .n { color: var(--accent); font: .6rem "Space Mono", monospace; letter-spacing: .13em; }
.bring p { margin: 9px 0 0; color: var(--muted); font-size: .94rem; }
.book { position: relative; padding: clamp(30px, 5vw, 50px); border-radius: 25px; overflow: hidden; }
.book::after { content: ""; position: absolute; right: -130px; bottom: -180px; width: 420px; aspect-ratio: 1; border: 1px solid var(--card-line); border-radius: 50%; box-shadow: inset 0 0 90px var(--accent-soft); }
.book > * { position: relative; z-index: 1; }
footer { padding: 62px 0 78px; border-top: 1px solid var(--card-line); text-align: center; }
.foot-fine { margin-top: 20px; color: var(--muted); font: .58rem "Space Mono", monospace; letter-spacing: .09em; }

.sonic-player {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: min(720px, calc(100vw - 44px));
  height: min(430px, calc(100svh - 120px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--card-line));
  border-radius: 30px;
  background: color-mix(in srgb, var(--card-solid) 83%, transparent);
  box-shadow: 0 34px 100px var(--shadow);
  backdrop-filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px) scale(.96);
  transform-origin: bottom right;
  transition: width .7s var(--ease-settle), height .7s var(--ease-settle), border-radius .7s var(--ease-settle), opacity .4s, transform .7s var(--ease-settle);
}
.sonic-player.is-open { opacity: 1; pointer-events: auto; transform: none; }
.sonic-player:not(.is-open), .sonic-player:not(.is-open) * { pointer-events: none !important; }
.sonic-player.is-compact { width: 330px; height: 104px; border-radius: 54px; }
.sonic-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sonic-chrome { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; padding: 20px 21px; pointer-events: none; }
.sonic-copy, .sonic-controls { pointer-events: auto; }
.sonic-copy .label { color: var(--accent); font: .58rem "Space Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.sonic-copy strong { display: block; margin-top: 4px; font: 1.55rem "Anton", sans-serif; text-transform: uppercase; }
.sonic-copy small { color: var(--muted); }
.sonic-controls { display: flex; align-items: center; gap: 7px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; font: .68rem "Space Mono", monospace; }
.depth-control { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 21px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font: .58rem "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.depth-control input { width: 100%; accent-color: var(--accent); }
.sonic-player.is-compact .sonic-copy small, .sonic-player.is-compact .depth-control { display: none; }
.sonic-player.is-compact .sonic-copy strong { font-size: 1.05rem; }
.sonic-player.is-compact .sonic-chrome { align-items: center; padding: 17px 18px; }

@media (max-width: 820px) {
  .nav-right .nav-link { display: none; }
  #sticky-cta { top: 64px; left: 16px; right: 16px; max-width: none; }
  #sticky-cta a { justify-content: center; }
  .section-intro, .equalize-layout, .baseline-panel, .sonic-lab { grid-template-columns: 1fr; }
  .equalize-title { position: relative; top: auto; }
  .equalize-copy { margin: 6vh 0; }
  .beat-grid, .instruments, .sets { grid-template-columns: 1fr; }
  .beat-card:nth-child(2), .beat-card:nth-child(3) { --float-y: 0px; }
  .bring { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 1fr; gap: 9px; }
  .srow .btn { width: fit-content; }
}

@media (max-width: 560px) {
  .wrap { width: min(100% - 34px, 1080px); }
  #nav { height: 62px; padding: 0 17px; }
  .brand { font-size: 1.35rem; }
  .theme-toggle { padding: 7px 10px; }
  .hero h1 { font-size: clamp(4rem, 22vw, 6.4rem); }
  .hero-next a { max-width: calc(100vw - 34px); align-items: flex-start; text-align: left; }
  section { padding-block: 70px; }
  .sonic-player { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: min(62svh, 460px); border-radius: 24px; }
  .sonic-player.is-compact { width: calc(100vw - 20px); height: 92px; border-radius: 46px; }
  .sonic-copy strong { font-size: 1.25rem; }
  .sonic-controls { gap: 4px; }
  .icon-button { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ambient-orb { animation: none; }
  .reveal { opacity: 1; transform: translateY(var(--float-y, 0)); }
  section[data-parallax]::before, section[data-parallax]::after { transform: none; }
  .instr.in .instrument-illustration { animation: none; }
  .message-shift { transform: none; opacity: 1; }
  .beat-card, .instr, .btn, #sticky-cta, .sonic-player, .word-light .word { transition: none; }
}