:root {
  /* compliance tokens: Mono** commands KR** clear multilingual explanations Interpret “mujun” tension contradictions resolved by practice: looks patient guide breaks steps */
  --eel: #11131A;
  --teal: #2E8C8A;
  --coral: #C96B5A;
  --amber: #D8A84A;
  --mauve: #7A5A73;
  --parchment: #E2D2A4;
  --indigo: #242B4A;
  --display: "Monoton", cursive;
  --deco: "Limelight", serif;
  --body: "IBM Plex Sans KR", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 18% 8%, rgba(46,140,138,.28), transparent 34%), radial-gradient(circle at 82% 14%, rgba(201,107,90,.18), transparent 30%), linear-gradient(135deg, var(--eel), #0b0d13 42%, var(--indigo));
  color: var(--parchment);
  font-family: var(--body);
}

.noise, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.noise {
  opacity: .18;
  background-image: radial-gradient(circle, rgba(226,210,164,.55) 0 1px, transparent 1px), radial-gradient(circle, rgba(46,140,138,.36) 0 1px, transparent 1px);
  background-size: 7px 9px, 13px 15px;
  mix-blend-mode: screen;
}

.scanlines {
  opacity: .16;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(226,210,164,.18) 6px, transparent 8px);
}

.lesson-reel { position: relative; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 9vw 7vw;
  isolation: isolate;
  clip-path: polygon(0 7vw, 100% 0, 100% calc(100% - 7vw), 0 100%);
  margin-top: -6vw;
}

.chamber:first-child { margin-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%); }
.chamber:nth-child(even) { clip-path: polygon(0 0, 100% 7vw, 100% 100%, 0 calc(100% - 7vw)); }

.chamber::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background: linear-gradient(115deg, rgba(36,43,74,.9), rgba(17,19,26,.95) 46%, rgba(122,90,115,.35));
}

.chamber::after {
  content: "";
  position: absolute;
  inset: 8% -5%;
  border-top: 1px solid rgba(216,168,74,.45);
  border-bottom: 1px solid rgba(46,140,138,.45);
  transform: rotate(-7deg);
  opacity: .7;
}

.chamber-hero { grid-template-columns: 1.1fr .8fr; gap: 5vw; }
.chamber-signal { background: linear-gradient(140deg, var(--indigo), var(--eel)); }
.chamber-contradiction { background: linear-gradient(42deg, #171824, rgba(122,90,115,.72), #11131A); }
.chamber-current { background: linear-gradient(145deg, #10141a, rgba(46,140,138,.35), var(--indigo)); }
.chamber-repair { background: linear-gradient(35deg, var(--eel), #201823, rgba(216,168,74,.13)); }
.chamber-release { background: radial-gradient(circle at 50% 60%, rgba(46,140,138,.24), transparent 38%), linear-gradient(150deg, var(--indigo), var(--eel)); }

.glass-plane {
  position: absolute;
  border: 1px solid rgba(46,140,138,.55);
  background: linear-gradient(135deg, rgba(46,140,138,.18), rgba(226,210,164,.06));
  box-shadow: inset 0 0 40px rgba(46,140,138,.2), 0 0 50px rgba(46,140,138,.1);
  transform: skewY(-10deg) rotate(-5deg);
}
.plane-a { inset: 6% 9% 30% 4%; }
.plane-b { inset: 34% -8% 8% 45%; border-color: rgba(216,168,74,.35); }

.rail { transform: rotate(-7deg); position: relative; z-index: 2; }
.rail-right { transform: rotate(-7deg) translateY(8vh); display: grid; gap: 1rem; }

.stamp, .depth-marker, code, .acetate, .split-rail, .scope span, .breathing-panel span {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stamp { color: var(--coral); font-size: .78rem; }
.depth-marker { position: absolute; top: 16%; right: 8%; color: rgba(226,210,164,.55); transform: rotate(-7deg); z-index: 3; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.3rem, 13vw, 12rem);
  font-weight: 400;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--amber);
  text-shadow: 8px 4px 0 rgba(201,107,90,.25), 0 0 26px rgba(216,168,74,.58), 0 0 80px rgba(46,140,138,.32);
}

.lead { max-width: 42rem; font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.7; color: rgba(226,210,164,.88); }

.module-button {
  margin-top: 1.5rem;
  padding: 1rem 1.35rem;
  border: 1px solid var(--amber);
  background: linear-gradient(120deg, rgba(216,168,74,.18), rgba(46,140,138,.18));
  color: var(--parchment);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  box-shadow: 0 0 24px rgba(216,168,74,.2);
  transform: skewX(-14deg);
  cursor: pointer;
}
.module-button.playing { background: rgba(216,168,74,.32); box-shadow: 0 0 42px rgba(216,168,74,.45); }

.lesson-fragments span {
  display: block;
  padding: .9rem 1.2rem;
  color: var(--parchment);
  background: rgba(36,43,74,.72);
  border-left: 4px solid var(--teal);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  animation: bounceEnter .9s both;
}
.lesson-fragments span:nth-child(2) { animation-delay: .12s; border-color: var(--coral); }
.lesson-fragments span:nth-child(3) { animation-delay: .24s; border-color: var(--amber); }

.chapter-num {
  position: absolute;
  top: 16%;
  left: 7%;
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 13rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(216,168,74,.48);
  opacity: .7;
  transform: rotate(-10deg);
}

.tutorial-card {
  width: min(46rem, 78vw);
  padding: clamp(1.4rem, 4vw, 3.4rem);
  background: linear-gradient(135deg, rgba(226,210,164,.92), rgba(226,210,164,.72));
  color: var(--eel);
  box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 0 0 1px rgba(17,19,26,.18);
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(70px) rotate(-7deg) scale(.96);
  transition: transform .8s cubic-bezier(.2,1.55,.32,1), opacity .55s ease;
}
.tutorial-card.visible { opacity: 1; transform: translateY(0) rotate(-7deg) scale(1); }
.skew-right, .skew-right.visible { transform: translateY(0) rotate(6deg); }
.skew-right:not(.visible) { transform: translateY(70px) rotate(6deg) scale(.96); }

.tutorial-card h2 {
  margin: .2rem 0 1rem;
  font-family: var(--deco);
  font-size: clamp(2.2rem, 6vw, 5.8rem);
  color: var(--indigo);
  line-height: .95;
}
.tutorial-card p { line-height: 1.75; font-size: 1.05rem; }
code { display: inline-block; margin-top: 1rem; padding: .6rem .8rem; background: var(--eel); color: var(--amber); }

.diagram { position: absolute; right: 6%; bottom: 16%; width: min(45rem, 60vw); height: 16rem; transform: rotate(-7deg); }
.diagram svg { width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(46,140,138,.35)); }
.diagram path { fill: none; stroke-linecap: round; stroke-width: 5; }
.flow-path { stroke: var(--teal); stroke-dasharray: 900; stroke-dashoffset: var(--dash, 900); }
.fin-wave { stroke: rgba(216,168,74,.62); stroke-width: 2; }
.node { position: absolute; padding: .35rem .55rem; background: rgba(17,19,26,.82); color: var(--parchment); font-family: var(--mono); font-size: .75rem; text-transform: uppercase; }
.node-a { left: 2%; top: 56%; }.node-b { left: 43%; top: 12%; }.node-c { right: 2%; bottom: 16%; }

.acetate {
  position: absolute;
  max-width: 20rem;
  padding: .8rem 1rem;
  background: rgba(46,140,138,.22);
  border: 1px solid rgba(46,140,138,.55);
  color: var(--parchment);
  z-index: 4;
  transform: rotate(-7deg);
}
.note-one { left: 10%; bottom: 16%; }.note-two { right: 9%; top: 18%; }.note-three { right: 11%; bottom: 16%; }

.split-rail {
  position: absolute;
  bottom: 18%;
  left: 10%;
  right: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  transform: rotate(6deg);
}
.split-rail div, .breathing-panel span {
  padding: 1rem;
  background: rgba(17,19,26,.78);
  border: 1px solid rgba(201,107,90,.5);
  color: var(--parchment);
}

.scope {
  position: absolute;
  right: 8%;
  top: 22%;
  width: min(34rem, 48vw);
  height: 15rem;
  border: 1px solid rgba(216,168,74,.45);
  background: rgba(17,19,26,.62);
  transform: rotate(-7deg);
  overflow: hidden;
}
.scope span { position: absolute; left: 1rem; top: 1rem; color: var(--amber); }
.wave { position: absolute; left: -10%; right: -10%; top: 48%; height: 5rem; border-top: 3px solid var(--teal); border-radius: 50%; animation: breathe 3.2s ease-in-out infinite; }
.wave-two { top: 62%; border-color: var(--coral); animation-delay: -1.3s; opacity: .65; }

.breathing-panel { position: absolute; inset: auto 12% 18% 14%; display: flex; gap: 1rem; transform: rotate(6deg); }
.breathing-panel span { flex: 1; border-color: rgba(46,140,138,.6); animation: pulsePanel 2.8s ease-in-out infinite; }
.breathing-panel span:nth-child(2) { animation-delay: .35s; }.breathing-panel span:nth-child(3) { animation-delay: .7s; }

.release-glass { position: absolute; inset: 12% 10%; border: 1px solid rgba(46,140,138,.5); transform: skewY(-8deg); background: linear-gradient(90deg, rgba(46,140,138,.12), transparent, rgba(216,168,74,.1)); }
.final-sign { position: relative; text-align: center; max-width: 58rem; z-index: 3; }
.final-sign h2 { margin: 0; font-family: var(--display); font-size: clamp(4rem, 12vw, 11rem); font-weight: 400; color: transparent; -webkit-text-stroke: 1px var(--amber); text-shadow: 0 0 30px rgba(216,168,74,.52); }
.final-sign p:last-child { font-size: 1.25rem; line-height: 1.7; }

.fish, .cursor-fish {
  position: absolute;
  width: 92px;
  height: 42px;
  border-radius: 58% 42% 44% 56%;
  z-index: 5;
  filter: drop-shadow(0 0 16px rgba(46,140,138,.5));
  transform: translate3d(0, var(--swim, 0px), 0) rotate(var(--rot, -9deg));
}
.fish::before, .cursor-fish::before { content: ""; position: absolute; right: -24px; top: 8px; border-left: 32px solid currentColor; border-top: 14px solid transparent; border-bottom: 14px solid transparent; opacity: .72; }
.fish::after, .cursor-fish::after { content: ""; position: absolute; left: 20px; top: 6px; width: 35px; height: 30px; border-top: 2px solid rgba(226,210,164,.55); border-bottom: 2px solid rgba(226,210,164,.35); transform: skewX(-18deg); }
.fish i, .cursor-fish span { position: absolute; left: 34px; top: -12px; width: 28px; height: 22px; border-radius: 50% 50% 0 0; background: currentColor; opacity: .34; }
.fish b { position: absolute; left: 12px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--parchment); box-shadow: 22px 8px 0 -2px rgba(226,210,164,.7), 42px -2px 0 -2px rgba(226,210,164,.6); }
.fish-teal { color: var(--teal); background: linear-gradient(90deg, rgba(46,140,138,.28), rgba(46,140,138,.74)); }
.fish-coral { color: var(--coral); background: linear-gradient(90deg, rgba(201,107,90,.24), rgba(201,107,90,.72)); }
.fish-gold { color: var(--amber); background: linear-gradient(90deg, rgba(216,168,74,.28), rgba(216,168,74,.72)); }
.fish-one { left: 54%; top: 28%; animation: bounceFish 1.4s .1s both, drift 7s ease-in-out infinite 1.4s; }
.fish-two { left: 13%; bottom: 15%; animation: bounceFish 1.5s .28s both, drift 8s ease-in-out infinite 1.5s; }
.fish-three { right: 10%; bottom: 18%; animation: bounceFish 1.45s .48s both, drift 6.5s ease-in-out infinite 1.45s; }
.fish-four { right: 25%; bottom: 34%; animation: drift 5.8s ease-in-out infinite; }
.fish-five { left: 19%; top: 28%; animation: drift 6.2s ease-in-out infinite; }

.cursor-fish { position: fixed; left: 0; top: 0; width: 38px; height: 18px; color: var(--teal); background: rgba(46,140,138,.48); z-index: 30; pointer-events: none; opacity: .75; transition: opacity .25s ease; }
.cursor-fish::before { right: -12px; top: 4px; border-left-width: 16px; border-top-width: 6px; border-bottom-width: 6px; }
.cursor-fish::after { display: none; }

.fish-school { position: absolute; inset: 0; z-index: 2; }
.fish-school span { position: absolute; width: 45px; height: 20px; border-radius: 60% 40% 50% 50%; background: var(--teal); opacity: .35; animation: releaseSwim 9s ease-in-out infinite; }
.fish-school span:nth-child(1) { left: 12%; top: 34%; background: var(--amber); }.fish-school span:nth-child(2) { left: 76%; top: 22%; animation-delay: -2s; }.fish-school span:nth-child(3) { left: 34%; top: 70%; background: var(--coral); animation-delay: -4s; }.fish-school span:nth-child(4) { left: 62%; top: 64%; animation-delay: -1s; }.fish-school span:nth-child(5) { left: 18%; top: 78%; background: var(--indigo); animation-delay: -5s; }

@keyframes bounceEnter { 0% { opacity: 0; transform: translateY(80px) scale(.9); } 68% { opacity: 1; transform: translateY(-14px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bounceFish { 0% { opacity: 0; transform: translateY(120vh) rotate(-18deg) scale(.8); } 66% { opacity: 1; transform: translateY(-28px) rotate(-8deg) scale(1.05); } 100% { opacity: 1; transform: translateY(0) rotate(-9deg) scale(1); } }
@keyframes drift { 0%,100% { margin-left: 0; margin-top: 0; } 50% { margin-left: 4vw; margin-top: -2vh; } }
@keyframes breathe { 0%,100% { transform: translateX(0) scaleY(.7); } 50% { transform: translateX(7%) scaleY(1.35); } }
@keyframes pulsePanel { 0%,100% { box-shadow: inset 0 0 0 rgba(46,140,138,0); } 50% { box-shadow: inset 0 0 38px rgba(46,140,138,.34), 0 0 22px rgba(46,140,138,.22); } }
@keyframes releaseSwim { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(9vw,-5vh) rotate(5deg); } }

body.module-on h1 { animation: signResolve 2.4s ease-in-out infinite alternate; }
@keyframes signResolve { from { text-shadow: 8px 4px 0 rgba(201,107,90,.25), 0 0 20px rgba(216,168,74,.45); } to { text-shadow: 2px 2px 0 rgba(201,107,90,.12), 0 0 48px rgba(216,168,74,.72), 0 0 80px rgba(46,140,138,.35); } }

@media (max-width: 780px) {
  .chamber { padding: 22vw 6vw; }
  .chamber-hero { grid-template-columns: 1fr; }
  .rail-right { transform: rotate(-7deg); }
  .diagram, .scope { position: relative; width: 90vw; right: auto; top: auto; bottom: auto; margin-top: 2rem; }
  .split-rail, .breathing-panel { position: relative; inset: auto; grid-template-columns: 1fr; flex-direction: column; margin-top: 2rem; }
  .acetate { display: none; }
}