:root {
  --bg: #121113;
  --surface: #1a191c;
  --surface-strong: #252329;
  --line: rgba(231, 229, 233, .15);
  --line-bright: rgba(231, 229, 233, .27);
  --text: #efedf0;
  --muted: #99949f;
  --dim: #6d6873;
  --violet: #ce82ff;
  --violet-deep: #8e3ec5;
  --cyan: #33d3d5;
  --amber: #f7a232;
  --rose: #e5a1b9;
  --mono: "JetBrains Mono", monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { width: 100%; max-width: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); overflow-x: hidden; }
body, body * { user-select: none; -webkit-user-select: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.grain { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .055; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.scroll-progress { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; height: 2px; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: var(--scroll-progress, 0%); background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 18px var(--violet); }
.section-shell { width: min(1160px, calc(100% - 64px)); max-width: 100%; margin: 0 auto; }

.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; width: min(1320px, calc(100% - 64px)); margin: 18px auto 0; padding: 12px 14px 12px 0; border-bottom: 1px solid transparent; backface-visibility: hidden; transform: translateZ(0); transition: padding .35s ease, background-color .35s ease, border-color .35s ease, border-radius .35s ease, box-shadow .35s ease; }
.site-nav.scrolled { padding: 10px 14px; background-color: rgba(18,17,19,.92); border: 1px solid var(--line); border-radius: 99px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 50px rgba(0,0,0,.18); }
.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand-logo { display: block; width: 142px; height: auto; }
.desktop-nav { display: flex; gap: 32px; margin-left: auto; margin-right: 34px; color: var(--muted); font-size: .84rem; }
.desktop-nav a { transition: color .2s ease; }
.nav-label-short { display: none; }
.desktop-nav a:hover, .footer-links a:hover { color: var(--text); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 8px; font-weight: 600; letter-spacing: -.02em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #180f1f; background: var(--violet); box-shadow: 0 10px 30px rgba(206,130,255,.2); }
.button-primary:hover { background: #dc9cff; box-shadow: 0 14px 40px rgba(206,130,255,.34); }
.button-outline { border: 1px solid var(--line-bright); color: var(--text); }
.button-outline:hover { border-color: var(--violet); color: var(--violet); }
.button-small { padding: 10px 14px; font-size: .79rem; }
.button-large { padding: 15px 19px; font-size: .95rem; }

.hero { position: relative; min-height: 900px; padding-top: 210px; padding-bottom: 82px; display: grid; grid-template-columns: .91fr 1.09fr; gap: 70px; align-items: center; }
.hero::before { content: ""; position: absolute; z-index: -2; width: 620px; height: 620px; left: -240px; top: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(142,62,197,.2), transparent 68%); filter: blur(10px); }
.hero-copy { max-width: 550px; align-self: center; }
.eyebrow { margin: 0 0 26px; color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 26px; height: 1px; margin: 0 9px 3px 0; background: var(--violet); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 28px; font-size: clamp(3.7rem, 5vw, 5.4rem); font-weight: 500; letter-spacing: -.095em; line-height: .91; }
.hero-title-line { display: block; white-space: nowrap; }
.hero-title-accent, h2 em { color: var(--violet); font-style: normal; }
.hero-lead { max-width: 470px; margin-bottom: 34px; color: var(--muted); font-size: 1.09rem; line-height: 1.62; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.text-link { color: var(--muted); font-size: .9rem; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.text-link:hover { color: var(--text); border-color: var(--violet); }
.text-link span { color: var(--violet); margin-left: 7px; }
.hero-meta { display: flex; align-items: center; gap: 9px; margin-top: 26px; color: var(--dim); font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(51,211,213,.8); }
.meta-divider { color: var(--line-bright); }
.hero-art { position: relative; min-height: 560px; align-self: center; }
.art-kicker { position: absolute; top: 17px; left: 20px; z-index: 4; color: var(--dim); font-family: var(--mono); font-size: .63rem; letter-spacing: .14em; }
.art-kicker span { color: var(--violet); margin: 0 8px; }
.orbit-ring { position: absolute; border: 1px solid rgba(206,130,255,.16); border-radius: 50%; pointer-events: none; animation: orbit 16s linear infinite; }
.orbit-ring-large { width: 560px; height: 420px; top: 53px; left: 70px; transform: rotate(-26deg); }
.orbit-ring-small { width: 310px; height: 220px; top: 165px; left: 205px; transform: rotate(28deg); border-color: rgba(51,211,213,.16); animation-duration: 11s; animation-direction: reverse; }
.cover-stack { position: absolute; top: 72px; left: 106px; width: 430px; height: 430px; transform: rotate(-7deg); }
.cover-card { position: absolute; width: 330px; height: 330px; padding: 25px; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 35px 80px rgba(0,0,0,.5); animation: cover-float 7s ease-in-out infinite; }
.cover-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 34%, rgba(0,0,0,.14)); pointer-events: none; }
.cover-card-back { top: 82px; left: 115px; transform: rotate(16deg) scale(.84); opacity: .56; animation-delay: -2.4s; }
.cover-card-middle { top: 39px; left: 57px; transform: rotate(5deg) scale(.9); opacity: .78; animation-delay: -1.1s; }
.cover-card-front { top: 0; left: 0; z-index: 2; }
.pattern { background-color: #332246; background-image: repeating-radial-gradient(ellipse at 100% 0%, transparent 0 16px, rgba(255,255,255,.24) 17px 18px, transparent 19px 28px), linear-gradient(135deg, rgba(206,130,255,.45), transparent 70%); background-size: 108% 108%, 100% 100%; animation: pattern-drift 18s ease-in-out infinite alternate; }
.pattern-violet { background-color: #34203f; background-image: repeating-radial-gradient(ellipse at 100% 0%, transparent 0 15px, rgba(242,207,255,.3) 16px 17px, transparent 18px 27px), linear-gradient(140deg, #8e3ec5 0%, #382347 70%); }
.pattern-rose { background-color: #60334d; background-image: repeating-radial-gradient(ellipse at 0% 0%, transparent 0 17px, rgba(255,228,235,.29) 18px 19px, transparent 20px 30px), linear-gradient(130deg, #773f63 0%, #3e2749 80%); }
.pattern-cyan { background-color: #263e57; background-image: repeating-radial-gradient(ellipse at 8% 18%, transparent 0 15px, rgba(202,253,252,.27) 16px 17px, transparent 18px 29px), linear-gradient(140deg, #31516e 0%, #23334d 80%); }
.pattern-blue { background-color: #253c56; background-image: repeating-radial-gradient(ellipse at 18% 0%, transparent 0 18px, rgba(205,230,255,.27) 19px 20px, transparent 21px 33px), linear-gradient(130deg, #3e6b94 0%, #26384f 78%); }
.pattern-amber { background-color: #5c4435; background-image: repeating-radial-gradient(ellipse at 100% 80%, transparent 0 14px, rgba(255,235,192,.3) 15px 16px, transparent 17px 27px), linear-gradient(145deg, #ca8c4e 0%, #4a3340 78%); }
.pattern-night { background-color: #242735; background-image: repeating-radial-gradient(ellipse at 30% 20%, transparent 0 17px, rgba(212,220,255,.25) 18px 19px, transparent 20px 32px), linear-gradient(135deg, #46517c, #1e202b 80%); }
.cover-card-top, .cover-card-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; color: rgba(255,255,255,.78); font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.cover-wordmark { position: relative; z-index: 1; display: block; width: 105px; height: auto; }
.cover-live { color: #fff; }
.cover-card strong { position: absolute; z-index: 1; left: 25px; bottom: 106px; color: #fff; font-size: 3.6rem; font-weight: 500; letter-spacing: -.1em; line-height: .87; }
.cover-card strong i { color: #eab2ff; font-style: normal; }
.cover-card-bottom { position: absolute; bottom: 24px; left: 25px; right: 25px; color: rgba(255,255,255,.65); }
.cover-wave { position: absolute; z-index: 1; left: 25px; right: 25px; bottom: 50px; display: flex; align-items: center; gap: 4px; height: 20px; }
.cover-wave span { flex: 1; min-width: 3px; height: 4px; border-radius: 20px; background: rgba(255,255,255,.48); animation: equalize 1.3s ease-in-out infinite alternate; }
.cover-wave span:nth-child(2n) { height: 10px; animation-delay: -.8s; }.cover-wave span:nth-child(3n) { height: 16px; animation-delay: -.35s; }.cover-wave span:nth-child(4n) { height: 7px; animation-delay: -1s; }
.floating-note { position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; padding: 12px 15px; color: var(--muted); background: rgba(26,25,28,.76); border: 1px solid var(--line-bright); border-radius: 8px; backdrop-filter: blur(15px); box-shadow: 0 20px 50px rgba(0,0,0,.3); font-size: .78rem; line-height: 1.3; animation: note-float 5s ease-in-out infinite; }
.floating-note b { color: var(--text); font-size: 1.08rem; font-weight: 500; }.floating-note small { color: var(--dim); font-size: .64rem; }.note-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--violet); border: 1px solid rgba(206,130,255,.32); border-radius: 50%; font-size: 1rem; }.note-pin { color: var(--cyan); border-color: rgba(51,211,213,.3); }.note-top { top: 135px; right: 0; animation-delay: -.9s; }.note-bottom { right: 25px; bottom: 54px; animation-delay: -2.6s; }
.hero-orbit { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 22px var(--violet); opacity: .7; }.hero-orbit-one { right: 3%; top: 20%; animation: dot-drift 9s ease-in-out infinite; }.hero-orbit-two { left: 47%; bottom: 12%; width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: dot-drift 7s ease-in-out infinite reverse; }
.station-section { position: relative; overflow: hidden; padding: 150px 0 170px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 82% 44%, rgba(142,62,197,.17), transparent 34%), linear-gradient(180deg, rgba(37,36,39,.18), transparent 78%); }.station-section::before { content: ""; position: absolute; width: 480px; height: 480px; right: -220px; top: 28%; border: 1px solid rgba(206,130,255,.1); border-radius: 50%; box-shadow: 0 0 0 42px rgba(206,130,255,.025), 0 0 0 84px rgba(206,130,255,.02); pointer-events: none; }.station-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); align-items: center; gap: 78px; }.station-copy { max-width: 510px; }.station-copy h2 { max-width: 570px; margin: 0 0 28px; font-size: clamp(3.2rem, 5.4vw, 5.5rem); font-weight: 500; letter-spacing: -.1em; line-height: .87; }.station-copy h2 em { display: inline-block; color: var(--violet); }.station-lead { max-width: 430px; margin-bottom: 32px; color: var(--muted); font-size: 1rem; line-height: 1.65; }.station-visual { position: relative; min-width: 0; padding: 30px 0 30px 18px; }.station-board { position: relative; z-index: 1; padding: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: linear-gradient(145deg, rgba(37,36,39,.96), rgba(22,20,24,.94)); box-shadow: 0 35px 100px rgba(0,0,0,.42), 0 0 0 1px rgba(206,130,255,.08); transform: rotate(2deg); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease; }.station-board:hover { transform: rotate(0deg) translateY(-7px); box-shadow: 0 45px 110px rgba(0,0,0,.5), 0 0 0 1px rgba(206,130,255,.22); }.station-board::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.07), transparent 28%, transparent 70%, rgba(206,130,255,.06)); pointer-events: none; }.station-board-top, .station-board-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--dim); font-family: var(--mono); font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; }.station-board-top > span:first-child { display: flex; align-items: center; gap: 7px; }.station-board-top img { width: 98px; height: auto; }.station-board-top i { color: var(--dim); font-style: normal; }.station-live { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }.station-live b { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(51,211,213,.8); animation: live-pulse 2s ease-in-out infinite; }.station-board-main { position: relative; z-index: 1; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; margin-top: 18px; }.station-cover { position: relative; min-height: 320px; padding: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; color: #fff; }.station-cover-kicker { position: relative; z-index: 1; color: rgba(255,255,255,.68); font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; }.station-cover strong { position: absolute; z-index: 1; left: 18px; bottom: 72px; color: #fff; font-size: 2.4rem; font-weight: 500; letter-spacing: -.1em; line-height: .86; }.station-cover strong i { color: #eab2ff; font-style: normal; }.station-cover .cover-wave { left: 18px; right: 18px; bottom: 44px; }.station-cover-meta { position: absolute; z-index: 1; right: 18px; bottom: 18px; left: 18px; color: rgba(255,255,255,.68); font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; }.station-changes { min-width: 0; padding: 12px 0 4px; }.station-changes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-size: .92rem; }.station-changes-head small { color: var(--dim); font-family: var(--mono); font-size: .52rem; letter-spacing: .08em; }.rotation-list { display: grid; gap: 8px; margin-top: 18px; }.rotation-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; color: var(--muted); text-align: left; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; opacity: .5; transform: translateX(0); transition: opacity .35s ease, transform .35s ease, color .35s ease, border-color .35s ease, background .35s ease; }.rotation-row:hover, .rotation-row.is-active { color: var(--text); opacity: 1; border-color: rgba(206,130,255,.45); background: rgba(206,130,255,.08); }.rotation-row.is-active { transform: translateX(8px); }.rotation-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .9rem; font-weight: 500; }.rotation-icon-keep { color: var(--amber); background: rgba(247,162,50,.11); }.rotation-icon-new { color: var(--cyan); background: rgba(51,211,213,.1); }.rotation-icon-note { color: var(--violet); background: rgba(206,130,255,.11); }.rotation-song { min-width: 0; }.rotation-song b, .rotation-song small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.rotation-song b { color: inherit; font-size: .82rem; font-weight: 500; }.rotation-song small { margin-top: 3px; color: var(--dim); font-size: .63rem; }.rotation-tag { color: var(--dim); font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; }.rotation-row.is-active .rotation-tag { color: var(--violet); }.rotation-explain { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: var(--muted); font-family: var(--mono); font-size: .57rem; letter-spacing: .04em; }.rotation-explain .live-dot { flex: 0 0 auto; }.station-board-bottom { margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--line); }.station-board-bottom b { color: var(--text); font-weight: 400; }.station-progress { display: flex; align-items: center; gap: 3px; margin-left: auto; }.station-progress i { display: block; width: 13px; height: 4px; border-radius: 5px; background: var(--line-bright); animation: station-bars 1.8s ease-in-out infinite alternate; }.station-progress i:nth-child(2n) { animation-delay: -.6s; }.station-progress i:nth-child(3n) { animation-delay: -1.1s; }.station-progress i:nth-child(4n) { animation-delay: -.3s; }.station-progress i:nth-child(5n) { background: rgba(206,130,255,.55); }.station-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--text); background: rgba(26,25,28,.88); border: 1px solid var(--line-bright); border-radius: 7px; box-shadow: 0 18px 40px rgba(0,0,0,.28); font-family: var(--mono); font-size: .57rem; letter-spacing: .05em; text-transform: uppercase; }.station-float-top { top: 0; right: -11px; }.station-float-bottom { bottom: 0; left: -4px; color: var(--muted); }.station-float-bottom:first-letter { color: var(--violet); }.float-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }

.rotation-icon-remove { color: var(--rose); background: rgba(229,161,185,.11); }.rotation-row[data-rotation="2"].is-active { border-color: rgba(229,161,185,.5); background: rgba(229,161,185,.07); }.rotation-row[data-rotation="2"].is-active .rotation-tag { color: var(--rose); }
.content-section { padding-top: 190px; padding-bottom: 150px; }.section-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; margin-bottom: 80px; }.section-intro .eyebrow { grid-column: 1 / -1; }.section-intro h2, .pattern-intro h2, .voices-heading h2 { margin-bottom: 0; font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 500; letter-spacing: -.095em; line-height: .92; }.section-intro > p:last-child, .pattern-intro > p:last-child { max-width: 360px; margin-bottom: 4px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.step-card { padding: 12px; background: linear-gradient(180deg, rgba(37,36,39,.92), rgba(26,25,28,.92)); border: 1px solid var(--line); border-radius: 14px; transition: border-color .3s ease, transform .3s ease; }.step-card:hover { border-color: rgba(206,130,255,.55); transform: translateY(-8px); }.step-number { padding: 8px 8px 18px; color: var(--violet); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; }.frame { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: #101012; }.step-image { aspect-ratio: 16 / 10; }.step-image img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .7s cubic-bezier(.2,.7,.2,1); }.step-card:hover .step-image img { transform: scale(1.045); }.step-copy { padding: 25px 12px 16px; }.step-copy h3 { margin-bottom: 8px; font-size: 1.22rem; font-weight: 500; letter-spacing: -.05em; }.step-copy p { margin-bottom: 0; color: var(--muted); font-size: .91rem; line-height: 1.55; }

.loop-section { display: grid; grid-template-columns: .73fr 1.27fr; gap: 88px; padding-top: 145px; padding-bottom: 180px; border-top: 1px solid var(--line); }.loop-copy { padding-top: 30px; }.loop-copy h2 { margin-bottom: 26px; font-size: clamp(3rem, 5vw, 5.2rem); font-weight: 500; letter-spacing: -.095em; line-height: .92; }.loop-lead { max-width: 390px; color: var(--muted); font-size: 1rem; line-height: 1.65; }.scene-list { display: grid; gap: 4px; margin-top: 60px; }.scene-step { position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 13px; padding: 17px 0 17px 0; color: var(--dim); text-align: left; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; transition: color .25s ease; }.scene-step:last-child { border-bottom: 1px solid var(--line); }.scene-step span { grid-row: 1 / 3; color: var(--dim); font-family: var(--mono); font-size: .66rem; padding-top: 4px; }.scene-step strong { color: inherit; font-size: 1rem; font-weight: 500; letter-spacing: -.03em; }.scene-step small { margin-top: 4px; color: var(--dim); font-size: .78rem; }.scene-step:hover, .scene-step.is-active { color: var(--text); }.scene-step.is-active span { color: var(--violet); }.scene-step.is-active::after { content: "↗"; position: absolute; top: 21px; right: 5px; color: var(--violet); }
.loop-stage { position: relative; min-height: 680px; }.stage-backdrop { position: absolute; inset: 50px 0 0 40px; opacity: .5; border-radius: 30px; filter: blur(0); }.stage-card { position: absolute; top: 0; left: 0; width: 100%; padding: 18px; overflow: hidden; border: 1px solid var(--line-bright); border-radius: 17px; background: rgba(26,25,28,.92); box-shadow: 0 32px 90px rgba(0,0,0,.38); opacity: 0; transform: translateY(22px) rotate(1deg); pointer-events: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }.stage-card.is-active { opacity: 1; transform: translateY(0) rotate(0); pointer-events: auto; }.stage-label { display: flex; justify-content: space-between; padding: 2px 4px 15px; color: var(--dim); font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; }.stage-label span:last-child { color: var(--violet); }.stage-card img { width: 100%; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; }.stage-caption { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 17px 5px 1px; }.stage-caption b { font-size: .95rem; font-weight: 500; }.stage-caption span { color: var(--muted); font-size: .78rem; }.stage-counter { position: absolute; right: 25px; bottom: -10px; color: var(--dim); font-family: var(--mono); font-size: .66rem; }.stage-counter .counter-active { color: var(--violet); }.stage-counter i { padding: 0 8px; color: var(--line-bright); font-style: normal; }

.pattern-section { padding-top: 130px; padding-bottom: 185px; border-top: 1px solid var(--line); }.pattern-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; margin-bottom: 72px; }.pattern-intro .eyebrow { grid-column: 1 / -1; }.pattern-wall { display: grid; grid-template-columns: 1.35fr .9fr .9fr; grid-template-rows: repeat(2, 300px); gap: 18px; align-items: stretch; }.pattern-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 0; overflow: hidden; padding: 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.22); transition: transform .35s ease, box-shadow .35s ease; }.pattern-tile:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 34px 65px rgba(0,0,0,.35); }.pattern-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 30%, rgba(0,0,0,.22)); pointer-events: none; }.tile-wide { grid-column: span 2; }.tile-tall { grid-row: auto; }.pattern-tile:nth-child(4) { grid-column: 2 / span 2; }.tile-index, .tile-meta { position: relative; z-index: 1; font-family: var(--mono); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; }.tile-index { color: rgba(255,255,255,.65); }.pattern-tile h3 { position: relative; z-index: 1; margin: auto 0; color: #fff; font-size: clamp(2rem, 4vw, 3.9rem); font-weight: 500; letter-spacing: -.1em; line-height: .86; }.pattern-tile h3 i { color: rgba(255,255,255,.64); font-style: normal; }.tile-meta { display: flex; justify-content: space-between; color: rgba(255,255,255,.68); }

.voices-section { padding-top: 140px; padding-bottom: 170px; border-top: 1px solid var(--line); }.voices-heading { margin-bottom: 72px; }.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }.quote-card { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: transform .3s ease, border-color .3s ease, background .3s ease; }.quote-card:hover { transform: translateY(-7px); border-color: rgba(206,130,255,.4); background: #201d22; }.quote-card-feature { grid-column: auto; background: linear-gradient(130deg, #27202b, #1a191c 65%); }.quote-mark { display: block; color: var(--violet); font-size: 3rem; font-weight: 500; line-height: .8; }.quote-card p { max-width: 600px; margin: 20px 0 28px; color: #d3cfd6; font-size: 1.03rem; line-height: 1.5; }.quote-card-feature p { font-size: 1.08rem; }.quote-card footer { display: flex; align-items: center; gap: 10px; margin-top: auto; }.avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: #fff; font-size: .83rem; font-weight: 600; border: 1px solid rgba(255,255,255,.35); }.avatar-purple { background: linear-gradient(135deg, #b265db, #3f2750); }.avatar-rose { background: linear-gradient(135deg, #b65d78, #4a293f); }.avatar-amber { background: linear-gradient(135deg, #c6874b, #443127); }.avatar-cyan { background: linear-gradient(135deg, #398d9b, #1c3745); }.avatar-lime { background: linear-gradient(135deg, #718c69, #263d2e); }.avatar-violet { background: linear-gradient(135deg, #8e54d4, #33234d); }.quote-card footer b, .quote-card footer small { display: block; }.quote-card footer b { font-size: .79rem; font-weight: 500; }.quote-card footer small { margin-top: 3px; color: var(--dim); font-size: .67rem; }

.final-cta { position: relative; display: grid; place-items: center; min-height: 580px; overflow: hidden; margin-bottom: 112px; border: 1px solid var(--line-bright); border-radius: 18px; background: #1e1923; text-align: center; }.cta-pattern { position: absolute; inset: -40%; opacity: .52; background-size: 150% 150%; animation: pattern-drift 24s ease-in-out infinite alternate; }.cta-content { position: relative; z-index: 1; }.cta-content .eyebrow { margin-bottom: 28px; }.cta-content h2 { margin-bottom: 34px; font-size: clamp(3rem, 6vw, 5.7rem); font-weight: 500; letter-spacing: -.1em; line-height: .9; }.cta-note { margin: 22px 0 0; color: var(--muted); font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; }.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 130px; padding-top: 26px; padding-bottom: 28px; border-top: 1px solid var(--line); color: var(--dim); }.site-footer .brand { color: var(--text); }.site-footer p { margin: 0; font-size: .78rem; text-align: center; }.footer-links { display: flex; justify-content: flex-end; gap: 18px; font-family: var(--mono); font-size: .61rem; }.footer-links span { color: var(--dim); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-delay-short { transition-delay: .12s; }.reveal-delay-medium { transition-delay: .22s; }.reveal-delay { transition-delay: .16s; }

@keyframes pattern-drift { 0% { background-position: 0% 0%, 0 0; } 100% { background-position: 16% 9%, 0 0; } }
@keyframes cover-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
@keyframes note-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes equalize { from { transform: scaleY(.55); } to { transform: scaleY(1.4); } }
@keyframes orbit { to { transform: rotate(334deg); } }
@keyframes dot-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-25px, 40px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes live-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes station-bars { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }

@media (max-width: 980px) {
  .section-shell, .site-nav { width: min(100% - 40px, 720px); }
  .desktop-nav { gap: 16px; margin-right: 15px; }.desktop-nav a:nth-child(3) { display: none; }
  .hero { min-height: auto; padding-top: 168px; padding-bottom: 80px; grid-template-columns: 1fr; gap: 70px; }.hero-copy { max-width: 650px; }.hero-art { width: min(600px, 100%); min-height: 560px; margin: 0 auto; }
  .loop-section { grid-template-columns: 1fr; gap: 64px; }.loop-copy { max-width: 620px; }.loop-stage { min-height: 600px; }.quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.quote-card-feature { grid-column: auto; }
}

@media (max-width: 760px) {
  .desktop-nav { display: none; }.site-nav { padding-right: 0; }.nav-button { margin-left: auto; padding: 10px 12px; font-size: .74rem; gap: 6px; white-space: nowrap; }.nav-label-full { display: none; }.nav-label-short { display: inline; }
  .hero { padding-top: 145px; padding-bottom: 72px; gap: 48px; }.hero-copy { min-width: 0; max-width: 100%; }.hero h1 { max-width: 100%; font-size: clamp(3rem, 10vw, 5rem); letter-spacing: -.11em; }.hero-title-line { white-space: normal; }.hero-lead { max-width: 100%; }.hero-art { max-width: 100%; }
  .station-layout { grid-template-columns: 1fr; gap: 48px; }.station-copy { max-width: 620px; }.station-visual { width: min(680px, 100%); margin: 0 auto; }
  .step-grid { grid-template-columns: 1fr; }.pattern-wall { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 220px); }.tile-wide { grid-column: span 2; }.tile-tall { grid-row: auto; }.pattern-tile:nth-child(4) { grid-column: span 2; }.quote-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .section-shell, .site-nav { width: calc(100% - 32px); }.site-nav { margin-top: 11px; padding: 11px 0; }.site-nav.scrolled { padding: 9px 11px; width: calc(100% - 24px); }.brand { font-size: 1.26rem; }.desktop-nav { display: none; }.nav-button { padding: 9px 10px; font-size: .67rem; gap: 6px; }
  .hero { padding-top: 145px; padding-bottom: 64px; gap: 40px; }.hero::before { width: 400px; height: 400px; left: -220px; }.eyebrow { font-size: .59rem; }.hero h1 { font-size: clamp(3.4rem, 16vw, 5rem); }.hero-title-line { white-space: normal; }.hero-lead { font-size: .98rem; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 19px; }.hero-art { min-height: 405px; }.art-kicker { top: 0; left: 8px; font-size: .53rem; }.orbit-ring-large { width: 360px; height: 270px; top: 42px; left: 16px; }.orbit-ring-small { width: 220px; height: 160px; top: 116px; left: 83px; }.cover-stack { top: 48px; left: 18px; transform: rotate(-7deg) scale(.68); transform-origin: top left; }.floating-note { padding: 9px 10px; font-size: .65rem; }.floating-note small { font-size: .55rem; }.note-top { top: 66px; right: -2px; }.note-bottom { right: 0; bottom: 9px; }
  .station-section { padding: 100px 0 112px; }.station-layout { gap: 50px; }.station-copy h2 { margin-bottom: 24px; font-size: clamp(2.85rem, 14vw, 4.2rem); }.station-lead { font-size: .92rem; }.station-visual { padding: 22px 0 28px; }.station-board { padding: 12px; border-radius: 12px; transform: rotate(1.5deg); }.station-board-top, .station-board-bottom { font-size: .46rem; }.station-board-top img { width: 78px; }.station-board-main { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; margin-top: 12px; }.station-cover { min-height: 210px; padding: 12px; border-radius: 8px; }.station-cover-kicker { font-size: .43rem; }.station-cover strong { left: 12px; bottom: 60px; font-size: 2rem; }.station-cover .cover-wave { left: 12px; right: 12px; bottom: 31px; height: 14px; }.station-cover-meta { right: 12px; bottom: 12px; left: 12px; font-size: .4rem; }.station-changes { padding: 5px 0 0; }.station-changes-head { font-size: .58rem; }.station-changes-head small { font-size: .4rem; }.rotation-list { gap: 5px; margin-top: 10px; }.rotation-row { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; padding: 8px; }.rotation-row.is-active { transform: translateX(4px); }.rotation-icon { width: 20px; height: 20px; font-size: .7rem; }.rotation-song b { font-size: .66rem; }.rotation-song small { margin-top: 2px; font-size: .48rem; }.rotation-tag { display: none; }.rotation-explain { gap: 5px; margin-top: 10px; font-size: .43rem; line-height: 1.35; }.station-board-bottom { gap: 7px; margin-top: 11px; padding-top: 9px; }.station-board-bottom > span:first-child { max-width: 108px; }.station-progress { gap: 2px; }.station-progress i { width: 7px; height: 3px; }.station-float { padding: 7px 9px; font-size: .45rem; }.station-float-top { top: 3px; right: -4px; }.station-float-bottom { bottom: 3px; left: -4px; }
  .content-section, .pattern-section, .voices-section { padding-top: 105px; padding-bottom: 105px; }.section-intro, .pattern-intro { display: block; margin-bottom: 48px; }.section-intro .eyebrow, .pattern-intro .eyebrow { margin-bottom: 20px; }.section-intro h2, .pattern-intro h2, .voices-heading h2 { font-size: clamp(2.85rem, 14vw, 4.2rem); margin-bottom: 26px; }.section-intro > p:last-child, .pattern-intro > p:last-child { font-size: .92rem; }.step-grid { grid-template-columns: 1fr; gap: 14px; }.step-card { padding: 10px; }.step-image { aspect-ratio: 1.6 / 1; }.step-copy { padding: 21px 10px 12px; }
  .loop-section { padding-top: 100px; padding-bottom: 115px; gap: 48px; }.loop-copy h2 { font-size: clamp(2.85rem, 14vw, 4.2rem); }.loop-lead { font-size: .92rem; }.scene-list { margin-top: 40px; }.scene-step { padding: 15px 0; }.scene-step strong { font-size: .9rem; }.scene-step small { font-size: .7rem; }.loop-stage { min-height: 345px; }.stage-card { padding: 10px; border-radius: 12px; }.stage-caption { display: block; padding-top: 12px; }.stage-caption b, .stage-caption span { display: block; }.stage-caption b { font-size: .78rem; }.stage-caption span { margin-top: 4px; font-size: .63rem; }.stage-counter { right: 4px; bottom: -23px; }.stage-backdrop { inset: 30px 0 0 20px; }
  .brand-logo { width: 112px; }.cover-wordmark { width: 105px; }.pattern-wall { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 190px); gap: 12px; }.pattern-tile { min-height: 0; padding: 16px; border-radius: 9px; }.tile-wide { grid-column: span 2; }.tile-tall { grid-row: auto; }.pattern-tile:nth-child(4) { grid-column: span 2; }.pattern-tile h3 { font-size: clamp(1.7rem, 9vw, 2.5rem); }.tile-meta { display: block; font-size: .48rem; }.tile-meta span { display: block; margin-top: 4px; }
  .voices-heading { margin-bottom: 46px; }.quote-grid { grid-template-columns: 1fr; gap: 12px; }.quote-card-feature { grid-column: auto; min-height: 260px; }.quote-card-feature p, .quote-card p { font-size: .95rem; }.quote-card-feature p { font-size: 1.08rem; }
  .final-cta { min-height: 500px; margin-bottom: 74px; padding: 30px 20px; }.cta-content h2 { font-size: clamp(2.9rem, 14vw, 4.2rem); }.cta-content .button { width: 100%; }.site-footer { grid-template-columns: 1fr; gap: 19px; min-height: auto; padding-top: 25px; padding-bottom: 30px; }.site-footer p { text-align: left; font-size: .74rem; }.footer-links { justify-content: flex-start; flex-wrap: wrap; line-height: 1.6; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(2.8rem, 13.3vw, 4.5rem); letter-spacing: -.11em; }
  .station-copy h2 { max-width: 100%; font-size: clamp(2.5rem, 12.3vw, 4.1rem); letter-spacing: -.105em; }.station-copy h2 br { display: none; }
  .station-board-top img { width: 72px; }.station-board-main { grid-template-columns: 106px minmax(0, 1fr); gap: 10px; }.station-cover { min-height: 204px; }.station-cover strong { font-size: 1.85rem; }.station-changes-head { display: block; }.station-changes-head small { display: block; margin-top: 3px; }.station-board-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }.station-board-bottom > span:first-child { max-width: none; }.station-progress { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 8px 0 0; }.quote-card { padding: 20px; }.quote-card p, .quote-card-feature p { font-size: .92rem; }
}

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