:root{--pine:#071f1c;--pine2:#0b302a;--gold:#efbb5f;--goldlight:#ffdb91;--paper:#f5e6c7;--darkink:#142a23;--white:#fffaeb;--line:rgba(250,204,113,.67)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -10%,#1c4941,#071e1b 62%);color:var(--white);font:15px/1.55 Inter,system-ui,-apple-system,sans-serif}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffe3a1;outline-offset:3px}img,video{display:block} [hidden]{display:none!important}
.skip-link{position:absolute;top:-100px;left:10px;z-index:200;background:white;color:black;padding:10px}.skip-link:focus{top:10px}
.site-top{height:72px;border-bottom:1px solid #ddbd7344;background:rgba(3,28,25,.96)}.top-inner{max-width:1520px;margin:auto;height:100%;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font:700 29px/1 'Cormorant Garamond',Georgia,serif;text-decoration:none;white-space:nowrap}.brand>span{color:var(--gold)}.brand span:last-child{color:var(--gold)}.top-chapter{font-size:10px;letter-spacing:.24em;font-weight:700;color:#e2b967}.dot{padding:0 14px;font-size:8px}.back-link{font-size:13px;color:#f8edd8;text-underline-offset:4px}
.intro-heading{text-align:center;padding:28px 16px 21px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.21em;margin:0 0 6px;font-weight:800}.intro-heading h1{font:700 clamp(33px,3.8vw,54px)/1.04 'Cormorant Garamond',Georgia,serif;letter-spacing:-.018em;margin:0}.subtitle{font-size:13px;color:#d6dfd2;margin:8px 0 0}
.cinema-shell{max-width:1450px;margin:0 auto;border-radius:17px;border:2px solid #ab803e;overflow:hidden;background:#07221e;box-shadow:0 26px 70px #0008,0 0 0 7px #050f0d55}.cinema-toolbar,.cinema-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#133b33,#082c28);padding:0 17px}.cinema-toolbar{min-height:50px;letter-spacing:.06em}.level{font-size:11px;font-weight:800;color:#eec06d;white-space:nowrap}.star{color:#ffe29e;font-size:17px;padding-right:6px}.chapter-progress{display:flex;align-items:center;gap:6px;color:#d8e1d6;font-size:11px}.chapter-progress i{height:8px;width:8px;border-radius:50%;border:1px solid #bda06d}.chapter-progress i.active{background:#f5c578;box-shadow:0 0 0 2px #f5c57833}.chapter-progress span{padding-left:8px}.toolbar-actions{display:flex;align-items:center;gap:7px}.icon-button,.skip-intro{border:1px solid #a7a58469;color:#f3e4c5;background:#0d352f;border-radius:999px;padding:7px 10px;font-size:12px}.icon-button span{padding-left:4px}.icon-button:hover,.skip-intro:hover{background:#275449}.cinema-bottom{min-height:39px;font-size:11px;color:#c6d0c0}.cinema-bottom>span:last-child{color:#edc478;white-space:nowrap;font-weight:600;font-size:9px;letter-spacing:.1em}
.film-stage{position:relative;aspect-ratio:16/9;min-height:500px;overflow:hidden;isolation:isolate;background:#08271e;color:#fff;outline:none}.scene-picture,.approach-video,.forest-art,.beyond-art,.forest-haze,.light-beam,.image-vignette,.magic-particles,.tree-runes,.eye-flare,.portal-light,.gate-roots{position:absolute;pointer-events:none}.scene-picture{inset:0;z-index:0;transform-origin:73% 72%;will-change:transform}.forest-art,.beyond-art,.approach-video{width:100%;height:100%;object-fit:cover;inset:0}.forest-art{opacity:1}.beyond-art{opacity:0;transition:opacity 2.3s ease-in-out;z-index:1}.approach-video{opacity:0;z-index:4;transition:opacity 1s ease;background:#0b2c23}.film-stage.state-intro .approach-video{opacity:1}.film-stage.state-awake .approach-video,.film-stage.state-voice .approach-video,.film-stage.state-question .approach-video{opacity:0}
.forest-haze{inset:0;z-index:5;background:radial-gradient(ellipse at 30% 66%,rgba(253,219,152,.11),transparent 45%),linear-gradient(100deg,rgba(7,30,25,.24),transparent 38%);mix-blend-mode:screen;opacity:.8;animation:hazeShift 13s ease-in-out infinite alternate}.light-beam{inset:-30%;z-index:5;background:conic-gradient(from 38deg at 59% 30%,transparent 0 30deg,rgba(252,224,157,.09) 39deg,transparent 55deg 360deg);animation:beamShift 15s ease-in-out infinite alternate}
.tree-runes{z-index:6;font:700 55px Georgia,serif;color:#ffcd67;text-shadow:0 0 11px #ffc660,0 0 35px #ffa21e;opacity:0;transition:opacity 1.4s ease;animation:runePulse 2.7s ease-in-out infinite}.rune-one{left:57%;top:43%}.rune-two{left:68%;top:58%;animation-delay:.8s}.eye-flare{z-index:6;width:5.5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff7bb 0%,#ffd05870 18%,#ffad1400 68%);filter:blur(6px);mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease;animation:eyeBreathe 3.4s ease-in-out infinite}.eye-left{left:77%;top:13%}.eye-right{left:87%;top:5%;animation-delay:.65s}.film-stage.is-awake .tree-runes,.film-stage.is-awake .eye-flare{opacity:.78}.film-stage.is-speaking .eye-flare{animation-duration:.68s}.film-stage.is-speaking .tree-runes{animation-duration:1.2s}
.portal-light{z-index:6;left:67%;top:58%;width:26%;height:40%;border-radius:48% 48% 30% 30%;background:radial-gradient(ellipse at 52% 65%,#fffdeccf 0%,#ffc86da8 28%,#ffb23a33 51%,transparent 75%);mix-blend-mode:screen;opacity:0;filter:blur(4px);transform:scale(.15);transition:opacity 2.8s ease,transform 4.2s cubic-bezier(.2,.8,.2,1)}.gate-roots{z-index:7;inset:0;width:100%;height:100%;opacity:.68;transition:opacity 1.2s}.root-moving{transform-box:fill-box;transition:transform 4.8s cubic-bezier(.16,.76,.25,1),opacity 4.4s ease}.left-root{transform-origin:15% 88%}.right-root{transform-origin:92% 90%}.film-stage.is-opening .left-root{transform:translate(-18%,10%) rotate(-24deg);opacity:.03}.film-stage.is-opening .right-root{transform:translate(20%,13%) rotate(26deg);opacity:.03}.film-stage.is-opening .portal-light{opacity:1;transform:scale(1.48)}.film-stage.is-opening .scene-picture{animation:pathZoom 7.5s ease-in forwards}.film-stage.is-beyond .beyond-art,.film-stage.state-complete .beyond-art{opacity:1}.film-stage.is-beyond .eye-flare,.film-stage.is-beyond .tree-runes,.film-stage.is-beyond .gate-roots{opacity:0}.image-vignette{z-index:9;inset:0;background:linear-gradient(to bottom,#02151355,transparent 21%,transparent 70%,#041612a6),linear-gradient(to right,#08292225,transparent 24%,transparent 74%,#071c1542)}.magic-particles{inset:0;z-index:8;width:100%;height:100%}
.cinema-topline{position:absolute;top:17px;left:22px;right:22px;z-index:11;display:flex;align-items:center;justify-content:space-between;gap:10px}.chapter-label{letter-spacing:.14em;font-size:10px;font-weight:700;background:#062b25ae;border:1px solid #f6c56e55;color:#f8ddb0;border-radius:12px;padding:9px 13px}.skip-intro{background:#092f2ad9}
.start-overlay{position:absolute;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(110deg,#05221dba,#05221d42 57%,#05221d6b);padding:30px}.start-card{width:min(590px,95%);padding:42px 38px 35px;text-align:center;background:linear-gradient(150deg,#0a322cc9,#071b1ac9);border:1px solid #e1ad61a8;box-shadow:0 10px 75px #0008,inset 0 0 50px #e5b65c11;border-radius:19px;backdrop-filter:blur(10px)}.start-ornament{color:#edba66;display:block;font-size:21px;letter-spacing:.24em}.start-card h2,.end-panel h2{font:700 clamp(38px,4vw,56px)/1 'Cormorant Garamond',Georgia,serif;color:#ffedc3;margin:10px 0 18px}.start-card p,.end-panel p{font-size:15px;color:#f1e6ce}.start-card small,.end-panel small{display:block;margin-top:20px;font-size:11px;color:#c4d3bf}.gold-button,.dark-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #c68c34;border-radius:999px;background:linear-gradient(180deg,#ffe098,#e7a33e);color:#102a24;text-decoration:none;font-weight:800;font-size:14px;padding:13px 22px;box-shadow:0 5px 16px #0003}.gold-button:hover{filter:brightness(1.09);transform:translateY(-1px)}.gold-button.large{margin-top:13px;font-size:17px;padding:16px 27px}.dark-button{background:#0e3d35;color:#ffecc8;border-color:#d9b278}
.narration{position:absolute;z-index:15;bottom:5.3%;left:5%;width:min(645px,80%);background:linear-gradient(95deg,#062a25e9,#0a352ec7);border:1px solid #c7a05f;border-left:4px solid var(--gold);border-radius:11px;padding:17px 24px 17px;box-shadow:0 12px 40px #0008;backdrop-filter:blur(6px)}.speaker{font-size:10px;color:#e9ba75;font-weight:800;letter-spacing:.17em}.narration p{font:600 clamp(19px,2.1vw,29px)/1.15 'Cormorant Garamond',Georgia,serif;margin:5px 0 0;color:#fff5de}.narration-line{position:absolute;right:16px;bottom:13px;width:30px;height:3px;border-radius:9px;background:#eac27a;animation:linePulse 1.8s ease-in-out infinite}
.question-panel{position:absolute;z-index:16;left:3.7%;top:18%;width:40%;max-height:77%;overflow-y:auto;background:linear-gradient(180deg,rgba(255,245,217,.98),rgba(243,222,181,.97));color:#1e352a;border:3px solid #684821;outline:1px solid #d8b575;outline-offset:-7px;box-shadow:0 10px 30px #0009, inset 0 0 29px #ab86461f;border-radius:13px;padding:23px 28px 20px}.question-ornament{font:700 15px 'Cormorant Garamond',Georgia,serif;letter-spacing:.08em;text-align:center;color:#f5d58e;background:#0c332c;border:1px solid #997334;border-radius:7px;padding:8px;margin:-13px -18px 16px}.question-ornament span{padding:0 15px;color:#eac179}.question-context{font:600 20px/1.2 'Cormorant Garamond',Georgia,serif;text-align:center;margin:0 0 12px}.question-panel h2{font:700 clamp(26px,3vw,39px)/1.07 'Cormorant Garamond',Georgia,serif;text-align:center;margin:0 0 17px;color:#173b31}.answer-options{display:grid;gap:8px}.answer-button{display:flex;align-items:center;gap:18px;width:100%;padding:10px 14px;border-radius:11px;border:1px solid #996a32;background:#0a302b;color:#ffebbb;text-align:left;box-shadow:inset 0 1px 0 #ffeab128;transition:background .2s,transform .2s}.answer-button:hover:not(:disabled){background:#1a5548;transform:translateX(3px)}.answer-button .answer-symbol{display:grid;place-items:center;border-radius:9px;background:#f2d490;color:#0d342a;height:32px;width:38px;font-size:21px}.answer-button .answer-word{font:700 24px/1 'Cormorant Garamond',Georgia,serif}.answer-button.is-correct{background:#246744;border-color:#d3e59c}.answer-button.is-wrong{background:#704133;border-color:#e2ba9e}.question-footer{display:flex;justify-content:center;gap:12px;margin:14px 0 3px;flex-wrap:wrap}.quiet-button{border:1px solid #b98d56;background:#f0dfc3;color:#385147;border-radius:999px;padding:7px 11px;font-size:11px}.quiet-button:hover{background:#fff1d5}.answer-feedback{min-height:18px;margin:8px 0 0;color:#714626;text-align:center;font-size:12px;font-weight:700}
.end-panel{position:absolute;z-index:22;inset:8% 20%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid #e5bb6d;border-radius:20px;background:linear-gradient(155deg,#082c26ed,#092a25d9);backdrop-filter:blur(8px);padding:30px 42px;box-shadow:0 15px 75px #000a}.end-panel h2{font-size:clamp(36px,4.5vw,63px)}.end-panel .learned{border:1px solid #b99761;background:#f3e5c51a;padding:10px 23px;border-radius:30px;color:#ffe9ad}.end-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.below-cinema{max-width:1450px;display:flex;justify-content:space-between;gap:26px;margin:20px auto 38px;padding:0 8px;color:#a9bcb1;font-size:11px}.below-cinema p{max-width:46%;margin:0}.below-cinema kbd{color:#ffe0a1;border:1px solid #7b947c;padding:1px 5px;border-radius:4px}footer{color:#83a69c;text-align:center;border-top:1px solid #6d9b7e30;padding:22px;font-size:11px}
@keyframes hazeShift{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}@keyframes beamShift{from{transform:rotate(-4deg);opacity:.4}to{transform:rotate(3deg);opacity:.8}}@keyframes runePulse{0%,100%{filter:brightness(.8);transform:scale(.95)}50%{filter:brightness(1.5);transform:scale(1.09)}}@keyframes eyeBreathe{0%,100%{transform:scale(.7);opacity:.38}50%{transform:scale(1.4);opacity:.85}}@keyframes pathZoom{0%{transform:scale(1)}100%{transform:scale(1.75) translate(-7%,-4%)}}@keyframes linePulse{0%,100%{opacity:.3;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}
@media(max-width:1000px){.top-chapter{display:none}.cinema-shell{border-radius:10px;margin:0 12px}.question-panel{width:45%;padding:18px 15px;top:18%;max-height:78%}.question-context{font-size:18px}.question-panel h2{font-size:27px}.answer-button .answer-word{font-size:21px}.answer-button{padding:7px 10px}.cinema-toolbar{padding:0 10px}.chapter-progress span{display:none}}
@media(max-width:700px){.site-top{height:60px}.top-inner{padding:0 14px}.brand{font-size:24px}.intro-heading{padding:21px 16px 16px}.intro-heading h1{font-size:36px}.subtitle{font-size:12px}.cinema-shell{margin:0 8px}.film-stage{aspect-ratio:auto;height:700px;min-height:0}.scene-picture{height:58%;bottom:auto;transform-origin:70% 63%}.scene-picture .forest-art,.scene-picture .beyond-art,.scene-picture .approach-video{object-fit:cover;object-position:57% center}.film-stage.state-intro .approach-video{object-position:57% center}.gate-roots{opacity:.35}.film-stage.is-opening .scene-picture{animation:none}.film-stage.is-opening .portal-light{opacity:.85}.film-stage.is-beyond .scene-picture{height:100%}.image-vignette{background:linear-gradient(to bottom,#081e2040,transparent 30%,#071b1d 60%,#071b1d)}.chapter-label{font-size:9px}.cinema-topline{left:12px;right:12px;top:13px}.start-overlay{padding:14px}.start-card{padding:25px 18px}.start-card h2{font-size:39px}.start-card p{font-size:14px}.question-panel{top:auto;bottom:12px;left:3%;width:94%;max-height:55%;padding:17px 18px}.question-ornament{margin:-8px -10px 9px}.question-context{font-size:16px;margin-bottom:4px}.question-panel h2{font-size:30px;margin:0 0 10px}.answer-options{gap:6px}.answer-button{min-height:40px}.question-footer{margin:10px 0 2px}.narration{left:4%;bottom:17px;width:92%;padding:13px 18px}.narration p{font-size:24px}.end-panel{inset:auto 4% 5%;min-height:340px;padding:19px 18px}.end-panel h2{font-size:39px}.cinema-bottom{font-size:10px}.cinema-bottom>span:last-child{font-size:8px}.below-cinema{flex-direction:column;margin:14px 15px 30px;gap:12px}.below-cinema p{max-width:100%}.toolbar-actions .icon-button span{display:none}}
@media(max-width:420px){.intro-heading h1{font-size:31px}.film-stage{height:660px}.brand{font-size:20px}.question-context{display:none}.question-panel{max-height:53%}.answer-button .answer-word{font-size:21px}.question-panel h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.film-stage.is-opening .scene-picture{animation:none}}