:root {
  color-scheme: dark;
  font-family: 'DM Sans', sans-serif;
  color: #eeeee7;
  background: #101214;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #101214; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #d9f873; outline-offset: 4px; }
.app-shell { max-width: 1600px; margin: 0 auto; padding: 0 6.3%; }
.topbar { height: 90px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #303234; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.07em; font-size: 22px; white-space: nowrap; }
.brand-mark { color: #d4ef83; font-size: 28px; vertical-align: -2px; margin-right: 5px; }
.brand-period { color: #d4ef83; }
.header-right { display: flex; gap: 65px; align-items: center; }
.header-caption, .header-index, .eyebrow, .intro-side, .section-number, .section-heading > p, .visual-top, .visual-bottom, .panel-top, .track-number, .playback div span, .volume-row, .station-header > span, .station-number, .station-description, .audio-note, .closing > span:last-child, footer { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; }
.header-caption { color: #c4c7bd; }
.header-index { color: #747976; }
.status-dot, .tiny-dot, .sound-indicator span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c7ed77; margin-right: 7px; vertical-align: 1px; }
.intro { position: relative; min-height: 520px; display: flex; align-items: center; padding: 77px 0 90px; }
.intro-copy { width: 100%; }
.eyebrow { color: #d1ee88; display: flex; align-items: center; gap: 12px; }
.eyebrow-line { width: 28px; height: 1px; background: #d1ee88; }
.eyebrow-number { color: #767c72; }
h1, h2, h3, p { margin: 0; }
h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(62px, 7.5vw, 112px); line-height: .94; letter-spacing: -.075em; font-weight: 500; margin: 27px 0 24px; }
h1 em, .closing em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.075em; }
.heading-star { color: #d5f285; font-size: .26em; display: inline-block; vertical-align: top; margin: .2em 0 0 .45em; }
.intro-copy > p { color: #a0a59e; font-size: 14px; line-height: 1.7; max-width: 330px; }
.text-link { display: inline-flex; gap: 36px; align-items: center; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .04em; margin-top: 28px; border-bottom: 1px solid #82945b; padding-bottom: 10px; }
.text-link span { color: #d4ef83; font-size: 17px; }
.intro-side { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 22px; color: #686e68; writing-mode: vertical-rl; }
.intro-side span:nth-child(2) { font-size: 22px; color: #d4ef83; }
.experience { border-top: 1px solid #36393a; padding-top: 31px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.section-number { color: #cce98a; }
.section-heading h2 { font: 500 clamp(28px, 3vw, 43px)/1.1 'Space Grotesk', sans-serif; letter-spacing: -.055em; margin-top: 12px; }
.section-heading h2 span { color: #cde98a; }
.section-heading > p { color: #7c827d; line-height: 1.7; text-align: right; }
.player { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 430px; }
.visual-panel { position: relative; overflow: hidden; min-height: 430px; background: #c9df9e; color: #334334; transition: background .8s; }
.visual-panel[data-scene='moon'] { background: #bac7d1; }
.visual-panel[data-scene='solar'] { background: #e8b88f; }
.visual-top, .visual-bottom { position: absolute; z-index: 3; left: 25px; right: 25px; display: flex; justify-content: space-between; color: #53634b; font-size: 8px; }
.visual-top { top: 24px; }
.visual-bottom { bottom: 24px; }
.tiny-dot { background: #546b43; width: 5px; height: 5px; }
.orbit-art { position: absolute; inset: 0; display: grid; place-items: center; }
.orbit { position: absolute; width: 360px; height: 360px; border: 1px solid rgba(69, 92, 62, .19); border-radius: 50%; }
.orbit-two { width: 470px; height: 470px; }
.planet { width: 226px; height: 226px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 34% 26%, #f7f5d2 0%, #e4ebba 24%, #a9c381 58%, #6e945d 100%); box-shadow: inset -21px -20px 45px rgba(47, 80, 43, .19), 0 0 80px rgba(250, 255, 209, .3); transition: background .8s; }
[data-scene='moon'] .planet { background: radial-gradient(circle at 34% 26%, #f8f7e9, #d8e0dd 30%, #9eaebd 65%, #758c9d); }
[data-scene='solar'] .planet { background: radial-gradient(circle at 34% 26%, #fff5d0, #f3d4a2 30%, #d99570 65%, #a65e51); }
.planet-shine { position: absolute; width: 170%; height: 44%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; left: -30%; top: 27%; transform: rotate(-25deg); }
.planet-ring { position: absolute; width: 355px; height: 100px; border: 1px solid rgba(77, 102, 68, .47); border-radius: 50%; transform: rotate(-25deg); box-shadow: 0 3px 0 -2px rgba(77, 102, 68, .25), 0 -4px 0 -3px rgba(77, 102, 68, .2); }
.orbit-point { position: absolute; height: 8px; width: 8px; background: #526d46; border-radius: 50%; transform: translate(166px, -68px); }
.star { position: absolute; color: #536e48; }
.star-1 { top: 27%; left: 23%; font-size: 17px; }.star-2 { bottom: 27%; right: 19%; font-size: 11px; }.star-3 { top: 23%; right: 25%; font-size: 22px; }
.visual-panel.playing .planet { animation: breathe 8s ease-in-out infinite alternate; }
.control-panel { background: #1c1f1e; padding: 25px 30px 27px; display: flex; flex-direction: column; }
.panel-top { display: flex; justify-content: space-between; color: #858b84; border-bottom: 1px solid #3a3e3a; padding-bottom: 22px; }
.sound-indicator { color: #b4caa1; }.sound-indicator span { width: 5px; height: 5px; }
.track-heading { display: flex; justify-content: space-between; padding-top: 35px; }
.track-number { color: #a8be8e; }
.track-heading h3 { font: 500 clamp(31px, 3vw, 44px)/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; margin-top: 10px; }
.track-heading p { color: #9ca39c; font-size: 12px; margin-top: 10px; line-height: 1.5; }
.track-spark { color: #cde98a; font-size: 33px; }
.waveform { display: flex; align-items: center; gap: 4px; height: 72px; margin: 12px 0; overflow: hidden; }
.waveform span { display: block; flex: 1; min-width: 2px; height: 15%; background: #68735d; opacity: .8; }
.waveform span:nth-child(4n+1) { height: 29%; }.waveform span:nth-child(7n+2) { height: 55%; }.waveform span:nth-child(9n+3) { height: 80%; }.waveform span:nth-child(5n+4) { height: 40%; }.waveform span:nth-child(11n+5) { height: 100%; }
.waveform.playing span { animation: wave 1.4s ease-in-out infinite alternate; }.waveform.playing span:nth-child(3n) { animation-delay: -.6s; }.waveform.playing span:nth-child(4n) { animation-delay: -.9s; }
.playback { display: flex; align-items: center; gap: 14px; }
.play-button { width: 48px; height: 48px; border-radius: 50%; border: 0; color: #1b2719; background: #d0ec91; font-size: 15px; transition: transform .2s, background .2s; }
.play-button:hover { transform: scale(1.08); background: #e1faa9; }
.playback div { display: flex; flex-direction: column; gap: 5px; }.playback div strong { font-size: 12px; font-weight: 600; }.playback div span { color: #7e897e; font-size: 8px; }.playback-mark { margin-left: auto; color: #87917e; }
.volume-row { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 26px; color: #899087; font-size: 8px; }.volume-row input { flex: 1; min-width: 0; accent-color: #cce98a; height: 3px; }.volume-row > span { color: #ccd6c4; }
.station-header { display: flex; justify-content: space-between; align-items: end; margin: 48px 0 19px; }.station-header h3 { font: 500 26px 'Space Grotesk', sans-serif; letter-spacing: -.05em; margin-top: 10px; }.station-header > span { color: #7d837b; }
.stations { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #3b403b; }.station { position: relative; text-align: left; min-height: 145px; padding: 20px 23px; border: 0; border-right: 1px solid #3b403b; color: #ebeee7; background: #171a19; transition: background .2s; }.station:last-child { border-right: 0; }.station:hover { background: #252b23; }.station.active { background: #252e20; box-shadow: inset 0 2px #cde98a; }.station-number { color: #9ea799; display: flex; justify-content: space-between; }.station-number span { color: #cde98a; font-size: 20px; line-height: 1; }.station-name { display: block; font: 500 20px 'Space Grotesk', sans-serif; letter-spacing: -.04em; margin-top: 22px; }.station-description { display: block; color: #858d82; margin-top: 7px; font-size: 8px; }.station-arrow { position: absolute; bottom: 22px; right: 23px; color: #b3c99c; }
.audio-note { color: #777f76; margin-top: 15px; font-size: 8px; }
.closing { min-height: 300px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; }.closing-icon { color: #d4ef83; font-size: 24px; }.closing p { font: 500 clamp(30px, 4vw, 48px)/1.05 'Space Grotesk', sans-serif; letter-spacing: -.05em; }.closing em { color: #c9df9e; }.closing > span:last-child { color: #7c837b; margin-top: 4px; }
footer { min-height: 85px; border-top: 1px solid #36393a; display: flex; justify-content: space-between; align-items: center; color: #7e867d; }footer .brand { color: #e6ebe3; font-size: 15px; }footer a:last-child { color: #c4d5b4; }
@keyframes wave { from { transform: scaleY(.45); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (max-width: 760px) {
  .app-shell { padding: 0 5%; }.topbar { height: 72px; }.header-index { display: none; }.header-caption { font-size: 8px; }.intro { min-height: 460px; padding: 70px 0; }.intro-side { display: none; }h1 { font-size: clamp(58px, 11vw, 85px); }.section-heading > p { display: none; }.player { grid-template-columns: 1fr; }.visual-panel { min-height: 360px; }.control-panel { min-height: 360px; }.station-header > span { display: none; }.stations { grid-template-columns: 1fr; }.station { min-height: 113px; border-right: 0; border-bottom: 1px solid #3b403b; }.station:last-child { border-bottom: 0; }.station-name { margin-top: 10px; }.closing { min-height: 260px; }footer > span { display: none; }
}
@media (max-width: 400px) { .header-caption { display: none; }.visual-top, .visual-bottom { font-size: 7px; left: 15px; right: 15px; }.orbit-two { width: 380px; height: 380px; }.planet { width: 190px; height: 190px; }.planet-ring { width: 300px; }.orbit-point { transform: translate(140px, -57px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }