:root{--g:#174a33;--cream:#f6f4e8;--gold:#ad8648;--line:#285a4033;--serif:"DM Serif Display",serif;--sans:Manrope,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--g);font-family:var(--sans);background:#e6ede1;overflow-x:hidden}.garden{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 50% 30%,#fffef8 0 8%,transparent 35%),linear-gradient(135deg,#f6f4e7,#d9e8d8 55%,#bfd1bf);overflow:hidden}.garden:before{content:"";position:absolute;width:90vw;height:90vw;left:5%;top:12%;border:1px solid #37694a2e;border-radius:50%;box-shadow:0 0 0 58px #fff8,0 0 0 116px #fff5}.garden i,.garden b,.garden em,.garden span{position:absolute;width:160px;height:450px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#225d3a55,transparent);transform:rotate(42deg);animation:leaf 12s ease-in-out infinite}.garden i{left:-45px;top:15%}.garden b{right:-35px;top:8%;animation-delay:-5s}.garden em{left:15%;bottom:-160px;animation-delay:-3s}.garden span{right:17%;bottom:-150px;animation-delay:-8s}@keyframes leaf{50%{transform:rotate(31deg) translate(15px,-20px)}}header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}header button{border:0;background:none;color:var(--g);font:400 clamp(28px,3vw,42px) var(--serif);letter-spacing:-.06em}header p{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#607565}#login{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;font-size:22px}.map-button{position:fixed;left:3vw;top:50%;z-index:5;width:64px;height:120px;transform:translateY(-50%);border:1px solid var(--line);border-radius:32px;background:#fafff9aa;color:var(--g);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:20px}.map-button small{font-size:9px;font-weight:700;writing-mode:vertical-rl;letter-spacing:.1em}aside{position:fixed;z-index:9;left:20px;top:20px;bottom:20px;width:min(390px,calc(100vw - 40px));padding:26px;border:1px solid var(--line);border-radius:28px;background:#f7fbf3f2;backdrop-filter:blur(15px);box-shadow:0 30px 80px #173d292e;overflow:auto;transform:translateX(calc(-100% - 45px));transition:.5s cubic-bezier(.2,.8,.2,1)}aside.open{transform:none}aside>div{display:flex;justify-content:space-between;align-items:center}aside p{font:34px var(--serif);margin:0}aside>div button{border:0;background:none;font-size:30px;color:var(--g)}.map-group{padding:20px 0;border-bottom:1px solid var(--line)}.map-group h3{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.map-group button{display:block;width:100%;padding:7px 0;border:0;background:none;text-align:left;color:var(--g);font:21px var(--serif)}main{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:30px 11vw 135px}.landing{width:min(1180px,100%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}.landing h1,.lesson h1{font:400 clamp(64px,10vw,145px)/.83 var(--serif);letter-spacing:-.075em;margin:15px 0;color:var(--g)}.landing h1 i{color:#9a513e}.landing p:not(.eyebrow){max-width:410px;color:#587064;line-height:1.75}.enter{border:0;border-radius:99px;background:var(--g);color:#fff;padding:15px 22px;font-weight:700}.sculpture{height:min(57vw,620px);display:grid;place-items:center;position:relative}.orb{width:min(38vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 27%,#fffff6,#bdd5bb 40%,#285c40 77%);box-shadow:inset -25px -30px 60px #163c2a80,0 30px 70px #20583840;animation:breathe 7s ease-in-out infinite}.glyph{position:absolute;font:clamp(170px,27vw,370px)/.7 var(--serif);color:#f9f8ee;letter-spacing:-.18em;text-shadow:0 15px 25px #173d2944;animation:float 6s ease-in-out infinite}.halo{position:absolute;width:min(55vw,580px);aspect-ratio:1;border:1px solid #ad864888;border-radius:50%;animation:spin 22s linear infinite}@keyframes breathe{50%{transform:scale(1.04)}}@keyframes float{50%{transform:translateY(-13px) rotate(4deg)}}@keyframes spin{to{transform:rotate(360deg)}}.lesson{width:min(1100px,100%);display:grid;grid-template-columns:.75fr 1.25fr;gap:6vw;align-items:center}.mark{min-height:430px;display:grid;place-items:center;position:relative}.mark:before{content:"";position:absolute;inset:5%;border-radius:50%;border:1px solid #ad864877;box-shadow:0 0 0 20px #fff4}.symbol{font:clamp(150px,23vw,300px)/.7 var(--serif);color:var(--g);letter-spacing:-.14em;z-index:1;word-break:break-word;text-align:center}.symbol.long{font-size:clamp(60px,10vw,135px)}.listen{position:absolute;bottom:5%;z-index:2;border:1px solid var(--line);border-radius:99px;background:#fff9;color:var(--g);padding:12px 17px}.lesson h1{font-size:clamp(54px,8vw,105px)}.ipa{font:italic 28px var(--serif);color:#a45440}.rule{line-height:1.75;color:#587064}.examples{margin-top:25px;border-top:1px solid var(--line)}.example{display:grid;grid-template-columns:42px 1fr 1fr;padding:15px 0;border-bottom:1px solid var(--line);font:18px var(--serif)}.example button{border:0;background:none;color:var(--gold)}.notes{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}.notes button{border:1px solid #27574088;border-radius:99px;background:#fff9;color:var(--g);padding:13px 18px;font-size:11px;font-weight:700}footer{position:fixed;z-index:4;left:50%;bottom:20px;transform:translateX(-50%);width:min(900px,calc(100vw - 40px));padding:10px 15px;display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:99px;background:#fafff9bb;backdrop-filter:blur(15px)}footer>button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--g)}#journey{display:flex;gap:7px;overflow:auto;scrollbar-width:none}#journey button{flex:0 0 auto;border:0;border-radius:99px;background:none;color:#5c7565;padding:9px 10px;font-size:10px;font-weight:700;white-space:nowrap}#journey button.active{background:var(--g);color:#fff}#noteModal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:15px;background:#10352299;backdrop-filter:blur(8px)}#noteModal[hidden]{display:none}#noteModal section{width:min(650px,100%);height:min(720px,92vh);padding:34px;border-radius:27px;background:linear-gradient(145deg,#fffef6,#e0ecdc);position:relative}#closeNote{position:absolute;right:20px;top:12px;border:0;background:none;font-size:30px;color:var(--g)}#noteEyebrow{font-size:10px;letter-spacing:.15em;color:var(--gold)}#noteHeading{font:42px var(--serif);margin:4px 0 15px}.tools{display:flex;gap:4px;padding:7px;border:1px solid var(--line);border-radius:12px}.tools button,.tools label{width:32px;height:29px;border:0;background:none;color:var(--g);display:grid;place-items:center}.tools input{opacity:0;position:absolute}.surface{height:calc(100% - 140px);position:relative;margin-top:12px;background:repeating-linear-gradient(to bottom,transparent 0 31px,#496e5222 32px)}#noteText{position:absolute;inset:0;z-index:2;padding:6px;outline:0;font:19px/32px var(--serif);overflow:auto}#noteText:empty:before{content:attr(data-placeholder);color:#91a092}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;touch-action:none}canvas.draw{pointer-events:auto}#saveState{position:absolute;bottom:15px;font-size:10px;color:#62776a}#toast{position:fixed;z-index:30;bottom:95px;left:50%;transform:translateX(-50%);border-radius:99px;background:var(--g);color:#fff;padding:10px 15px;font-size:12px;opacity:0;transition:.2s}#toast.show{opacity:1}@media(max-width:780px){header p{display:none}.map-button{left:14px;top:auto;bottom:92px;transform:none;width:54px;height:54px}.map-button small{display:none}.landing,.lesson{grid-template-columns:1fr;text-align:center}.sculpture{height:43vh;order:-1}.lesson{gap:0}.mark{min-height:300px}.lesson-copy{padding-bottom:85px}.rule{margin:auto}.example{text-align:left;font-size:16px}.notes{justify-content:center}.garden:before{width:130vw;height:130vw;left:-15vw}.symbol.long{font-size:62px}footer{bottom:10px;width:calc(100vw - 20px)}}