:root {
  --ink: #0B1420;
  --glass: #C8DDE7;
  --quartz: #EAF2F4;
  --lavender: #8C8FAE;
  --aqua: #73A7AA;
  --pearl: #F7F4EA;
  --rose: #C99AA6;
  --graphite: #26313A;
  --bubble-size: 8rem;
  --blur: 18px;
  --prism-angle: 10deg;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--quartz);
  background: var(--ink);
}

.aquarium {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(115, 167, 170, 0.24), transparent 28%),
    radial-gradient(circle at 84% 72%, rgba(140, 143, 174, 0.22), transparent 32%),
    linear-gradient(180deg, #0B1420 0%, #26313A 100%);
}

.water-wash {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(90deg, transparent 0 6%, rgba(200, 221, 231, 0.035) 6.5%, transparent 7%),
    repeating-linear-gradient(180deg, rgba(234, 242, 244, 0.035) 0 1px, transparent 1px 18px);
  filter: blur(.2px);
  animation: waterShift 12s ease-in-out infinite alternate;
}

.lesson-nav {
  position: fixed;
  top: 5vh;
  left: 3.5vw;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1px auto;
  gap: 1rem;
  align-items: start;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--glass);
}

.lesson-count { writing-mode: vertical-rl; letter-spacing: .28em; font-size: .8rem; }
.lesson-count i { color: var(--rose); font-style: normal; opacity: .8; }

.progress-filament {
  width: 1px;
  height: 54vh;
  background: rgba(200, 221, 231, .18);
  border-radius: 99px;
  overflow: hidden;
}

.progress-filament span { display: block; width: 100%; height: 20%; background: linear-gradient(var(--pearl), var(--aqua), var(--rose)); transition: height .65s cubic-bezier(.2,.8,.2,1); }

.chapter-dots { display: flex; flex-direction: column; gap: .86rem; padding-top: .2rem; }
.dot { width: .78rem; height: .78rem; padding: 0; border: 1px solid rgba(234,242,244,.55); border-radius: 50%; background: rgba(200,221,231,.1); box-shadow: inset 0 0 10px rgba(234,242,244,.18); transition: transform .35s, background .35s; cursor: pointer; }
.dot.active { transform: scale(1.45); background: rgba(115,167,170,.55); }

.reel-stage { position: relative; width: 100%; height: 100%; perspective: 1200px; }
.chapter { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(9, 1fr); padding: 5vh 5vw; opacity: 0; pointer-events: none; transform: translateY(7vh) scale(.985); transition: opacity .8s ease, transform .8s cubic-bezier(.18,1.22,.35,1); }
.chapter.active { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.central-tube { grid-column: 6 / 10; grid-row: 1 / 10; justify-self: center; align-self: center; width: min(28vw, 360px); height: 88vh; border: 1px solid rgba(234,242,244,.32); border-radius: 48% / 7%; background: linear-gradient(90deg, rgba(234,242,244,.04), rgba(200,221,231,.18) 18%, rgba(11,20,32,.12) 45%, rgba(247,244,234,.12) 84%, rgba(115,167,170,.08)); box-shadow: inset 18px 0 46px rgba(234,242,244,.08), inset -22px 0 52px rgba(115,167,170,.16), 0 0 80px rgba(115,167,170,.18); position: relative; display: grid; place-items: center; overflow: hidden; animation: settle .9s cubic-bezier(.2,1.35,.35,1) both; }
.central-tube:before { content: ""; position: absolute; inset: 5% 42%; background: linear-gradient(rgba(247,244,234,.32), transparent 28%, rgba(200,221,231,.16)); filter: blur(12px); }
.tube-rim { position: absolute; left: 9%; right: 9%; height: 3.8rem; border: 1px solid rgba(234,242,244,.28); border-radius: 50%; background: rgba(200,221,231,.08); }
.tube-rim.top { top: 1.2rem; } .tube-rim.bottom { bottom: 1.2rem; }
.tube-core { position: relative; z-index: 2; text-align: center; padding: 2rem; }
.micro-label, .timecode, .state, .caption-mark { font-family: "Noto Sans JP", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--glass); font-size: .68rem; }
h1 { font-family: "Jost", Futura, "Trebuchet MS", sans-serif; margin: .9rem 0; font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .82; font-weight: 300; letter-spacing: .14em; text-shadow: 0 0 28px rgba(234,242,244,.22); }
.subtitle-fragment { color: rgba(247,244,234,.72); font-size: .95rem; line-height: 1.7; }
.play-shard { width: 3.2rem; height: 3.2rem; margin: 1.4rem auto; background: linear-gradient(135deg, rgba(234,242,244,.68), rgba(115,167,170,.12)); clip-path: polygon(20% 8%, 86% 50%, 20% 92%, 39% 50%); filter: drop-shadow(0 0 16px rgba(200,221,231,.35)); transform: rotate(var(--prism-angle)); }

.portfolio-grid { display: contents; }
.sample { position: relative; border: 1px solid rgba(234,242,244,.22); background: rgba(200,221,231,.08); backdrop-filter: blur(var(--blur)); box-shadow: inset 0 1px rgba(247,244,234,.22), 0 24px 70px rgba(0,0,0,.18); padding: 1.2rem; color: rgba(234,242,244,.9); animation: bounceEnter .9s cubic-bezier(.16,1.45,.38,1) both, floaty 6s ease-in-out infinite; animation-delay: var(--delay, .1s), calc(var(--delay, .1s) + 1s); }
.sample h2 { font-family: "Jost", Futura, "Trebuchet MS", sans-serif; font-weight: 400; letter-spacing: .09em; margin: .45rem 0; color: var(--pearl); }
.sample p { margin: 0; font-size: .88rem; line-height: 1.55; }
.bubble { width: var(--bubble-size); min-height: var(--bubble-size); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; text-align: center; background: radial-gradient(circle at 32% 24%, rgba(247,244,234,.28), transparent 18%), radial-gradient(circle at 62% 72%, rgba(115,167,170,.22), transparent 35%), rgba(200,221,231,.08); }
.bubble:after { content:""; position:absolute; inset:10%; border-radius:50%; border:1px solid rgba(247,244,234,.16); }
.capsule { border-radius: 999px; min-height: 18rem; display: flex; flex-direction: column; justify-content: center; }
.strip { border-radius: 999px; display: flex; align-items: center; gap: 1rem; min-height: 4.6rem; }
.prism { clip-path: polygon(8% 0, 92% 4%, 100% 78%, 22% 100%, 0 32%); transform: rotate(-2deg); }
.clip-a { --delay:.15s; --bubble-size: 13rem; grid-column: 3 / 6; grid-row: 2 / 5; }
.clip-b { --delay:.28s; grid-column: 10 / 12; grid-row: 2 / 7; }
.clip-c { --delay:.38s; grid-column: 2 / 7; grid-row: 7 / 8; }
.clip-d { --delay:.5s; grid-column: 11 / 14; grid-row: 7 / 9; }
.clip-e { --delay:.12s; grid-column: 3 / 5; grid-row: 2 / 8; }
.clip-f { --delay:.25s; --bubble-size: 18rem; grid-column: 9 / 13; grid-row: 2 / 6; }
.clip-g { --delay:.42s; grid-column: 6 / 13; grid-row: 7 / 8; }
.clip-h { --delay:.1s; grid-column: 2 / 7; grid-row: 3 / 6; }
.clip-i { --delay:.28s; --bubble-size: 11rem; grid-column: 8 / 10; grid-row: 2 / 4; }
.clip-j { --delay:.45s; grid-column: 11 / 13; grid-row: 4 / 9; }
.clip-k { --delay:.15s; grid-column: 2 / 7; grid-row: 4 / 5; }
.clip-l { --delay:.26s; --bubble-size: 22rem; grid-column: 8 / 13; grid-row: 2 / 7; }
.clip-m { --delay:.4s; grid-column: 4 / 7; grid-row: 7 / 9; }

.chapter-title { grid-column: 6 / 10; grid-row: 2 / 5; align-self: center; text-align: center; z-index: 3; }
.chapter-title span { font-family: "Noto Sans JP", sans-serif; letter-spacing: .28em; color: var(--aqua); }
.chapter-title h2 { font-family: "Jost", Futura, "Trebuchet MS", sans-serif; font-size: clamp(4rem, 10vw, 10rem); font-weight: 300; margin: 0; letter-spacing: .12em; color: var(--pearl); }
.chapter-title p { max-width: 24rem; margin: 0 auto; color: rgba(234,242,244,.72); }
.timeline { display:flex; justify-content:center; gap:.35rem; margin-top:.7rem; } .timeline i { width:.55rem; height:.55rem; border-radius:50%; background: var(--aqua); opacity:.6; }
.buffer-ring, .replay { width: 4rem; height: 4rem; border-radius:50%; border: 2px dotted var(--glass); margin: 1rem auto 0; animation: spin 7s linear infinite; }
.pause-bars:before, .pause-bars:after { content:""; display:inline-block; width:.75rem; height:3.5rem; margin:.8rem .28rem 0; background: linear-gradient(var(--pearl), var(--aqua)); clip-path: polygon(25% 0, 100% 8%, 75% 100%, 0 92%); }
.transcript-panels { grid-column: 3 / 13; grid-row: 5 / 9; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.transcript-panels article { padding: 1.5rem; min-height: 13rem; border: 1px solid rgba(234,242,244,.25); background: linear-gradient(145deg, rgba(234,242,244,.18), rgba(115,167,170,.06)); color: var(--quartz); clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 92%); }
.transcript-panels span { font-family: "Jost", sans-serif; color: var(--rose); font-size: 2rem; }

.bubble-field { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.air { position: absolute; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(234,242,244,.28); background: radial-gradient(circle at 30% 25%, rgba(247,244,234,.3), transparent 22%), rgba(200,221,231,.06); color: rgba(247,244,234,.72); font-family: "Noto Sans JP", sans-serif; font-size: .65rem; animation: rise var(--t) ease-in-out infinite, bounceEnter .8s cubic-bezier(.16,1.45,.38,1) both; animation-delay: var(--d); }
.b1{--s:4.7rem;--t:9s;--d:.2s;left:16%;bottom:6%;}.b2{--s:3.7rem;--t:12s;--d:.5s;left:71%;bottom:12%;}.b3{--s:1.2rem;--t:7s;--d:.8s;left:48%;bottom:5%;}.b4{--s:5.3rem;--t:13s;--d:1s;left:86%;bottom:28%;}.b5{--s:4rem;--t:10s;--d:1.25s;left:8%;bottom:40%;}.b6{--s:1.6rem;--t:8s;--d:1.5s;left:63%;bottom:7%;}.b7{--s:2.8rem;--t:11s;--d:1.7s;left:31%;bottom:16%;}.b8{--s:8rem;--t:15s;--d:2s;left:77%;bottom:-2%;}
.cursor-lens { position: fixed; width: 9rem; height: 9rem; border-radius: 50%; border: 1px solid rgba(247,244,234,.24); background: radial-gradient(circle, rgba(234,242,244,.13), rgba(115,167,170,.04) 58%, transparent 70%); pointer-events: none; z-index: 30; transform: translate(-50%, -50%) scale(.75); opacity: 0; transition: opacity .25s, transform .2s; mix-blend-mode: screen; }
.cursor-lens.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.instruction { position: fixed; right: 3vw; bottom: 3vh; z-index: 20; font-family: "Noto Sans JP", sans-serif; font-size: .72rem; letter-spacing: .2em; color: rgba(200,221,231,.62); text-transform: uppercase; }

@keyframes bounceEnter { 0% { opacity:0; transform: translateY(80px) scale(.72); } 68% { opacity:1; transform: translateY(-12px) scale(1.035); } 100% { opacity:1; transform: translateY(0) scale(1); } }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@keyframes rise { 0%,100% { transform: translateY(20px); } 50% { transform: translateY(-42px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes waterShift { to { transform: translate3d(-2%, 2%, 0) scale(1.04); } }
@keyframes settle { from { transform: translateY(45px) scale(.97); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } }

@media (max-width: 820px) {
  .chapter { grid-template-columns: repeat(6, 1fr); padding: 7vh 7vw; }
  .central-tube { grid-column: 2 / 6; width: 70vw; opacity: .85; }
  .sample { display: none; }
  .sample:nth-of-type(-n+2) { display: flex; grid-column: 1 / 7; grid-row: auto; align-self: end; }
  .chapter-title { grid-column: 1 / 7; }
  .transcript-panels { grid-column: 1 / 7; grid-template-columns: 1fr; overflow: hidden; }
  .lesson-nav { left: 4vw; top: 3vh; }
}