:root {
  --gold: #F0C15A;
  --shadow: #121722;
  --green: #7ED7A5;
  --blue: #8EB6D9;
  --pearl: #F7F2DF;
  --magenta: #D86BAA;
  --chrome: #DDE4EC;
  --font-ui: "Commissioner", Inter, system-ui, sans-serif;
  --font-display: "Syne", "Commissioner", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", Inter, system-ui, sans-serif;
}

/* Design typography note: IBM Plex Sans** for readable narrative paragraphs. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--pearl);
  background: var(--shadow);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(247, 242, 223, .18), transparent 28%),
    radial-gradient(circle at 30% 55%, rgba(142, 182, 217, .18), transparent 35%),
    linear-gradient(125deg, #121722 0%, #172233 46%, #0d1018 100%);
  z-index: -4;
}

.tuner {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(18, 23, 34, .96), rgba(18, 23, 34, .78));
  border-right: 1px solid rgba(221, 228, 236, .22);
  box-shadow: 14px 0 40px rgba(0, 0, 0, .28), inset -1px 0 rgba(247, 242, 223, .12);
  z-index: 10;
}

.brand-lockup { display: flex; gap: 13px; align-items: center; margin-bottom: 34px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 50%; position: relative;
  background: conic-gradient(from 220deg, var(--pearl), var(--blue), var(--chrome), var(--gold), var(--pearl));
  box-shadow: 0 0 24px rgba(142, 182, 217, .38);
}
.brand-mark::before { content: ""; position: absolute; inset: 8px 4px 8px 15px; border-radius: 50%; background: var(--shadow); }
.brand-mark span { position: absolute; width: 27px; height: 7px; border-radius: 99px; left: 12px; top: 23px; transform: rotate(-28deg); background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.brand-kicker { margin: 0 0 3px; font: 700 10px/1 var(--font-ui); letter-spacing: .22em; color: var(--green); }
h1 { margin: 0; font: 800 20px/.9 var(--font-ui); letter-spacing: -.055em; color: var(--chrome); }

.frequency-column { position: absolute; top: 112px; left: 18px; bottom: 90px; width: 26px; display: grid; align-content: space-between; opacity: .62; }
.frequency-column span { width: 18px; height: 1px; background: var(--chrome); box-shadow: 0 0 8px rgba(221, 228, 236, .5); }
.frequency-column span:nth-child(3n) { width: 26px; background: var(--gold); }
.chapter-tuner { display: grid; gap: 16px; margin-left: 30px; }
.tune-link { color: rgba(247, 242, 223, .58); text-decoration: none; display: grid; grid-template-columns: 30px 18px 1fr; align-items: center; gap: 9px; font-family: var(--font-ui); transition: color .35s, transform .35s; }
.tune-link b { font-size: 10px; letter-spacing: .18em; font-weight: 800; }
.tune-link i { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; display: block; position: relative; overflow: hidden; }
.tune-link:nth-child(2) i::before, .tune-link:nth-child(3) i::before, .tune-link:nth-child(4) i::before { content: ""; position: absolute; inset: 0 0 0 45%; background: currentColor; border-radius: 50%; }
.tune-link:nth-child(5) i { background: currentColor; }
.tune-link span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.tune-link.active { color: var(--green); transform: translateX(5px); }
.tune-link.active i { box-shadow: 0 0 16px rgba(126, 215, 165, .72); }
.tuner-footer { position: absolute; left: 50px; bottom: 28px; display: flex; align-items: center; gap: 8px; color: var(--magenta); font: 800 10px/1 var(--font-ui); letter-spacing: .18em; }
.rec-jewel { width: 8px; height: 8px; background: var(--magenta); border-radius: 50%; box-shadow: 0 0 14px var(--magenta); }

.stream-stage { margin-left: 250px; min-height: 100vh; position: relative; isolation: isolate; }
.ambient-grid { position: fixed; inset: 0 0 0 250px; pointer-events: none; z-index: -2; opacity: .34; background-image: linear-gradient(30deg, rgba(221,228,236,.08) 1px, transparent 1px), linear-gradient(150deg, rgba(221,228,236,.08) 1px, transparent 1px); background-size: 92px 53px; }
.chrome-shine { position: fixed; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(247,242,223,.16), rgba(142,182,217,.08) 32%, transparent 68%); mix-blend-mode: screen; transform: translate(-50%, -50%); z-index: -1; }
.chapter { min-height: 100vh; position: relative; padding: 12vh 7vw; display: grid; grid-template-columns: minmax(270px, 420px) 1fr; align-items: center; gap: 4vw; overflow: hidden; }
.scene-copy { position: relative; z-index: 2; }
.plaque { padding: 24px 24px 22px; color: var(--shadow); background: linear-gradient(135deg, rgba(247,242,223,.96), rgba(221,228,236,.88) 54%, rgba(142,182,217,.74)); clip-path: polygon(0 10%, 92% 0, 100% 84%, 8% 100%); box-shadow: 0 28px 55px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.7); }
.right-plaque { order: 2; }
.overline { margin: 0 0 12px; color: var(--magenta); font: 800 11px/1 var(--font-ui); letter-spacing: .2em; }
h2 { margin: 0 0 14px; font: 800 clamp(36px, 5vw, 76px)/.88 var(--font-display); letter-spacing: -.07em; color: var(--shadow); }
.plaque p:last-child { margin: 0; font-size: 15px; line-height: 1.65; }
.iso-world { position: relative; min-height: 580px; transform-style: preserve-3d; filter: drop-shadow(0 34px 30px rgba(0,0,0,.35)); transition: transform .15s ease-out; }
.iso-platform { position: absolute; transform: rotateX(58deg) rotateZ(-32deg); transform-origin: center; border-radius: 22px; background: linear-gradient(135deg, var(--pearl) 0%, var(--blue) 38%, var(--chrome) 68%, #ffffff 100%); box-shadow: inset 0 -16px 24px rgba(18,23,34,.22), inset 14px 12px 20px rgba(247,242,223,.35), 0 30px 45px rgba(0,0,0,.32); overflow: hidden; }
.iso-platform::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(18,23,34,.1) 0 1px, transparent 1px 18px), linear-gradient(115deg, transparent 20%, rgba(247,242,223,.5) 46%, transparent 58%); animation: sheen 8s linear infinite; }
.platform-large { width: 470px; height: 330px; left: 14%; top: 140px; }
.platform-small { width: 210px; height: 150px; left: 54%; top: 80px; background: linear-gradient(135deg, var(--gold), var(--pearl), var(--chrome)); }
.platform-bamboo { width: 520px; height: 310px; left: 16%; top: 170px; }
.platform-canal-left { width: 350px; height: 230px; left: 11%; top: 210px; }
.platform-canal-right { width: 360px; height: 240px; left: 43%; top: 120px; }
.platform-archive { width: 560px; height: 340px; left: 14%; top: 150px; background: linear-gradient(135deg, var(--pearl), var(--chrome), var(--magenta)); }
.moon-disc, .final-moon { position: absolute; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--pearl) 32%, var(--blue) 72%, var(--chrome)); box-shadow: 0 0 50px rgba(247,242,223,.44); }
.moon-disc { width: 132px; height: 132px; left: 55%; top: 36px; }
.moon-disc span { position: absolute; inset: 30px 12px 30px 48px; border-radius: 50%; background: var(--shadow); opacity: .84; }
.final-moon { width: 250px; height: 250px; left: 54%; top: 20px; opacity: .86; }
.stream-ribbon { position: absolute; height: 38px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--blue), var(--pearl), var(--blue), transparent); filter: blur(.2px); transform: rotate(-24deg); overflow: hidden; }
.stream-ribbon::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 16px, transparent 16px 32px); animation: streamFlow 2.8s linear infinite; }
.ribbon-one { width: 520px; left: 9%; top: 355px; }
.ribbon-two { width: 470px; left: 24%; top: 315px; }
.ribbon-four { width: 520px; left: 19%; top: 390px; }
.signal-gate-object { position: absolute; left: 32%; top: 250px; width: 270px; height: 170px; }
.tower { position: absolute; bottom: 0; width: 44px; height: 145px; background: linear-gradient(90deg, var(--chrome), var(--pearl), var(--blue)); border-radius: 16px 16px 5px 5px; box-shadow: inset -8px 0 rgba(18,23,34,.16); }
.tower::before { content: ""; position: absolute; inset: 18px 8px auto; height: 70px; background: repeating-linear-gradient(0deg, rgba(18,23,34,.2) 0 2px, transparent 2px 15px); }
.tower-left { left: 30px; } .tower-right { right: 30px; }
.gate-beam { position: absolute; left: 56px; right: 56px; top: 42px; height: 22px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 24px var(--gold); }
.reflection-wordmark { position: absolute; left: 15%; top: 450px; font: 800 clamp(34px, 6vw, 84px)/1 var(--font-ui); letter-spacing: -.08em; color: rgba(221,228,236,.24); transform: skewX(-22deg) scaleY(.46); filter: blur(.4px); }
.bamboo-cluster { position: absolute; left: 39%; top: 112px; width: 230px; height: 360px; }
.bamboo { position: absolute; bottom: 0; width: 34px; border-radius: 18px; background: repeating-linear-gradient(0deg, var(--green) 0 38px, var(--pearl) 38px 43px, var(--green) 43px 80px); box-shadow: inset -8px 0 rgba(18,23,34,.18), 0 0 20px rgba(126,215,165,.32); transform-origin: bottom; }
.stalk-a { height: 280px; left: 52px; transform: rotate(-5deg); } .stalk-b { height: 340px; left: 100px; } .stalk-c { height: 245px; left: 148px; transform: rotate(6deg); }
.leaf { position: absolute; width: 62px; height: 18px; border-radius: 100% 4px 100% 4px; background: linear-gradient(90deg, var(--green), var(--pearl)); box-shadow: 0 0 14px rgba(126,215,165,.42); }
.leaf-a { top: 92px; left: 17px; transform: rotate(-26deg); } .leaf-b { top: 146px; left: 133px; transform: rotate(24deg); } .leaf-c { top: 42px; left: 104px; transform: rotate(-18deg); }
.antenna-tip { position: absolute; top: 0; left: 106px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 28px var(--gold); }
.test-card { position: absolute; left: 58%; top: 174px; width: 132px; height: 88px; transform: rotateX(58deg) rotateZ(-32deg); background: linear-gradient(90deg, var(--magenta) 0 20%, var(--green) 20% 40%, var(--blue) 40% 60%, var(--gold) 60% 80%, var(--pearl) 80%); border: 6px solid var(--chrome); }
.mirror-canal { position: absolute; left: 22%; top: 255px; width: 530px; height: 92px; transform: rotateX(58deg) rotateZ(-32deg); border-radius: 46px; background: rgba(18,23,34,.55); border: 2px solid rgba(221,228,236,.6); overflow: hidden; }
.canal-fill { position: absolute; inset: 10px; border-radius: 40px; background: linear-gradient(90deg, var(--blue), var(--pearl), var(--blue)); transform-origin: left; animation: canalPulse 5s ease-in-out infinite; }
.pixel-boat { position: absolute; width: 34px; height: 18px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 78% 100%, 18% 100%); top: 37px; animation: boat 7s linear infinite; }
.boat-a { left: -40px; } .boat-b { left: -80px; animation-delay: -3s; background: var(--magenta); }
.moire-orb { position: absolute; width: 180px; height: 180px; left: 58%; top: 75px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(247,242,223,.68) 0 2px, rgba(142,182,217,.2) 2px 7px); box-shadow: 0 0 28px rgba(142,182,217,.34); }
.label-stack { position: absolute; left: 25%; top: 210px; width: 400px; display: grid; gap: 12px; transform: rotate(-7deg); }
.label-stack span { display: block; padding: 15px 24px; font: 800 18px/1 var(--font-ui); letter-spacing: .14em; color: var(--shadow); background: linear-gradient(90deg, var(--pearl), var(--chrome)); border-left: 18px solid var(--magenta); border-radius: 4px 18px 18px 4px; box-shadow: 0 16px 22px rgba(0,0,0,.24); animation: labelFlutter 6s ease-in-out infinite; }
.label-stack span:nth-child(2) { border-color: var(--green); animation-delay: .2s; } .label-stack span:nth-child(3) { border-color: var(--gold); animation-delay: .4s; } .label-stack span:nth-child(4) { border-color: var(--blue); animation-delay: .6s; }
.cassette-window { position: absolute; left: 54%; top: 125px; width: 190px; height: 96px; border-radius: 20px; background: linear-gradient(135deg, rgba(18,23,34,.8), rgba(221,228,236,.25)); border: 2px solid var(--chrome); }
.cassette-window::before, .cassette-window::after { content: ""; position: absolute; top: 24px; width: 46px; height: 46px; border: 6px dotted var(--pearl); border-radius: 50%; opacity: .76; }
.cassette-window::before { left: 28px; } .cassette-window::after { right: 28px; }
.staircase { position: absolute; left: 24%; top: 265px; width: 520px; height: 230px; }
.staircase span { position: absolute; height: 52px; transform: rotateX(58deg) rotateZ(-32deg); background: linear-gradient(135deg, var(--pearl), var(--blue), var(--chrome)); border-radius: 12px; box-shadow: 0 20px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.8); }
.staircase span:nth-child(1) { width: 170px; left: 0; bottom: 0; } .staircase span:nth-child(2) { width: 210px; left: 72px; bottom: 42px; } .staircase span:nth-child(3) { width: 250px; left: 144px; bottom: 84px; } .staircase span:nth-child(4) { width: 290px; left: 216px; bottom: 126px; } .staircase span:nth-child(5) { width: 330px; left: 288px; bottom: 168px; background: linear-gradient(135deg, var(--gold), var(--pearl), var(--chrome)); }
.crescent-ribbon-symbol { position: absolute; left: 18%; top: 132px; width: 130px; height: 130px; border-radius: 50%; background: var(--pearl); box-shadow: 0 0 42px rgba(247,242,223,.48); }
.crescent-ribbon-symbol::before { content: ""; position: absolute; inset: 18px 8px 18px 42px; border-radius: 50%; background: var(--shadow); }
.crescent-ribbon-symbol i { position: absolute; width: 112px; height: 18px; left: 32px; top: 70px; background: var(--blue); border-radius: 99px; transform: rotate(-25deg); box-shadow: 0 0 14px var(--blue); }
.gold-sparks span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px var(--gold); animation: sparkle 2.6s ease-in-out infinite; }
.gold-sparks span:nth-child(1) { left: 70%; top: 26%; } .gold-sparks span:nth-child(2) { left: 62%; top: 55%; animation-delay: .4s; } .gold-sparks span:nth-child(3) { left: 82%; top: 46%; animation-delay: .8s; } .gold-sparks span:nth-child(4) { left: 48%; top: 20%; animation-delay: 1.2s; }
.reveal .plaque, .reveal .iso-world { opacity: 0; filter: blur(16px); transform: translateY(38px); transition: opacity 1s ease, filter 1s ease, transform 1s ease; }
.reveal.visible .plaque { opacity: 1; filter: blur(0); transform: translateY(0); }
.reveal.visible .iso-world { opacity: 1; filter: drop-shadow(0 34px 30px rgba(0,0,0,.35)) blur(0); transform: translateY(0); transition-delay: .15s; }
.interactive-object { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.visible .interactive-object { transform: translateY(-10px); }
.visible .bamboo-cluster { transform: translateY(-10px) scaleY(1); }

@keyframes sheen { from { background-position: -220px 0; } to { background-position: 220px 0; } }
@keyframes streamFlow { from { transform: translateX(-70px); } to { transform: translateX(70px); } }
@keyframes canalPulse { 0%,100% { transform: scaleX(.72); } 50% { transform: scaleX(1); } }
@keyframes boat { from { transform: translateX(0); } to { transform: translateX(650px); } }
@keyframes labelFlutter { 0%, 100% { transform: rotateX(0) translateY(0); } 12% { transform: rotateX(18deg) translateY(-5px); } 24% { transform: rotateX(0) translateY(0); } }
@keyframes sparkle { 0%,100% { transform: scale(.5); opacity: .35; } 50% { transform: scale(1.3); opacity: 1; } }
.rotating-object { animation: slowMoon 12s ease-in-out infinite alternate; }
@keyframes slowMoon { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }

@media (max-width: 900px) {
  .tuner { width: 180px; padding: 18px 12px; }
  .brand-lockup { align-items: flex-start; }
  .brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }
  h1 { font-size: 15px; }
  .chapter-tuner { margin-left: 18px; gap: 13px; }
  .tune-link { grid-template-columns: 24px 14px; }
  .tune-link span { display: none; }
  .stream-stage { margin-left: 180px; }
  .ambient-grid { left: 180px; }
  .chapter { grid-template-columns: 1fr; padding: 10vh 6vw; }
  .right-plaque { order: 0; }
  .iso-world { min-height: 460px; transform: scale(.78); transform-origin: left top; }
}

@media (max-width: 640px) {
  .tuner { position: fixed; inset: 0 0 auto 0; width: auto; height: 82px; display: flex; align-items: center; gap: 14px; overflow: hidden; }
  .frequency-column, .tuner-footer { display: none; }
  .brand-lockup { margin: 0; }
  .chapter-tuner { display: flex; margin: 0; gap: 10px; }
  .tune-link { display: block; }
  .tune-link b, .tune-link span { display: none; }
  .stream-stage { margin-left: 0; padding-top: 80px; }
  .ambient-grid { inset: 80px 0 0 0; }
  .chapter { padding: 7vh 18px; }
  .plaque { padding: 20px; }
  .iso-world { transform: scale(.56); min-height: 360px; width: 760px; }
}