:root{--g:#123c31;--emerald:#0c6651;--mint:#bfe6d7;--ice:#f4fff9;--chrome:#d6ded9;--metal:#879d94;--champagne:#d9c08a;--glow:#62f0bd;--line:#a8c6b999;--mx:0;--my:0}
body{height:100vh;overflow:hidden;background:#c8d9d1;color:#103a30;perspective:1400px}
.garden{background:radial-gradient(circle at calc(52% + var(--mx)*2%) calc(42% + var(--my)*2%),#fbfff9 0 7%,#d5e9df 32%,#94b9a9 72%,#5d8073 115%)}
.garden:before{inset:-20%;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:conic-gradient(from 60deg at 55% 48%,transparent 0 10%,#fff7 11%,transparent 18% 42%,#effff74d 48%,transparent 55%);animation:ambientSpin 28s linear infinite}
.garden:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 10%,#fff7 25%,transparent 36% 67%,#c9ffe233 80%,transparent),repeating-linear-gradient(90deg,transparent 0 89px,#eafff00d 90px);mix-blend-mode:screen;animation:shimmer 8s ease-in-out infinite}
.garden>i,.garden>b,.garden>em,.garden>span{display:none}.grid-floor{position:absolute;left:-20%;right:-20%;bottom:-35%;height:75%;background:linear-gradient(#ffffff0a,#bde8d533),repeating-linear-gradient(90deg,#dfffff2b 0 1px,transparent 1px 82px),repeating-linear-gradient(0deg,#dfffff28 0 1px,transparent 1px 82px);transform:perspective(560px) rotateX(67deg);mask-image:linear-gradient(transparent,#000 70%);animation:gridMove 12s linear infinite}.light-sweep{position:absolute;width:38vw;height:160vh;left:-45vw;top:-30vh;transform:rotate(22deg);background:linear-gradient(90deg,transparent,#fff8,transparent);filter:blur(22px);animation:sweep 10s ease-in-out infinite}.particles{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#9affd9 0 1px,transparent 1.5px);background-size:83px 83px,127px 127px;background-position:17px 31px,61px 17px;opacity:.55;animation:particles 20s linear infinite}
@keyframes ambientSpin{to{transform:rotate(360deg)}}@keyframes shimmer{50%{transform:translateX(4%);opacity:.7}}@keyframes gridMove{to{background-position:82px 0,82px 0,0 82px}}@keyframes sweep{0%,20%{left:-45vw}70%,100%{left:130vw}}@keyframes particles{to{transform:translateY(-83px)}}
header{position:fixed;z-index:12;top:18px;left:24px;right:24px;height:58px;padding:0 18px;border:1px solid #efffffbf;border-radius:18px;background:linear-gradient(120deg,#efffffa8,#c7d9d054 45%,#ffffff30);box-shadow:inset 0 1px #fff,inset 0 -1px #526a6244,0 18px 55px #1c4a3b20;backdrop-filter:blur(24px) saturate(160%)}
header:before{content:"";position:absolute;inset:4px;border:1px solid #61776f2c;border-radius:13px;pointer-events:none}header button{position:relative;font:600 19px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 1px #fff}header p{position:relative;display:flex;align-items:center;gap:10px;font-size:9px;color:#214d40}header p:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px var(--glow);animation:blink 1.7s infinite}@keyframes blink{50%{opacity:.3}}
#login{width:36px;height:36px;background:radial-gradient(circle at 35% 25%,#fff,#bcc9c4 55%,#70857d);border:1px solid #fff;box-shadow:inset 0 -2px 5px #304b404c,0 5px 15px #173e2e25;font:700 12px var(--sans)}
.map-button{left:24px;top:50%;width:62px;height:152px;border-radius:18px;border:1px solid #efffffd6;background:linear-gradient(145deg,#f6ffface,#9bb5aa66);box-shadow:inset 0 1px #fff,inset 0 -1px #526a62,0 20px 40px #14392d2b;backdrop-filter:blur(25px);transition:.3s}.map-button:hover{transform:translateY(-50%) translateX(5px);box-shadow:inset 0 1px #fff,0 0 30px #67d8ad77}.map-button:before,.map-button:after{content:"";position:absolute;left:9px;right:9px;height:1px;background:linear-gradient(90deg,transparent,#647c72,transparent)}.map-button:before{top:9px}.map-button:after{bottom:9px}.map-button small{font-size:8px;letter-spacing:.2em}
aside{left:20px;top:20px;bottom:20px;width:min(430px,calc(100vw - 40px));border:1px solid #fff;border-radius:24px;background:linear-gradient(145deg,#eafff2e8,#83a394b8);box-shadow:inset 0 1px #fff,inset -12px -12px 35px #1d473630,0 30px 100px #0b302787;backdrop-filter:blur(32px) saturate(170%)}aside:before{content:"SYSTEM / NAVIGATION";display:block;padding-bottom:18px;font-size:8px;letter-spacing:.22em;color:#315a4c}aside p{font:600 31px var(--sans);letter-spacing:-.04em;text-transform:uppercase}.map-group{border-bottom:1px solid #f4fff566}.map-group h3{font-family:var(--sans);color:#49685d}.map-group button{padding:9px 12px;border-radius:9px;font:600 15px var(--sans);transition:.2s}.map-group button:hover{padding-left:20px;background:linear-gradient(90deg,#f6fffacc,transparent);box-shadow:inset 2px 0 var(--glow)}
main{min-height:100vh;height:100vh;padding:92px 8vw 112px;overflow:hidden;animation:sceneIn .75s cubic-bezier(.2,.8,.2,1)}@keyframes sceneIn{from{opacity:0;transform:scale(.97) translateY(15px);filter:blur(10px)}}
.game-lobby{width:min(1240px,100%);grid-template-columns:minmax(390px,.83fr) 1.17fr;gap:4vw;transform:rotateX(calc(var(--my)*-1deg)) rotateY(calc(var(--mx)*1deg));transition:transform .2s ease-out}.hud-panel{position:relative;padding:38px;border:1px solid #efffff9c;border-radius:28px;background:linear-gradient(135deg,#f7fff9a1,#bfd5ca3d 52%,#ffffff20);box-shadow:inset 0 1px #fff,inset 0 -1px #45665a38,0 30px 80px #20473a1f;backdrop-filter:blur(20px)}.hud-panel:before,.hud-panel:after{content:"";position:absolute;width:35px;height:35px;border-color:#fff;border-style:solid;opacity:.9}.hud-panel:before{left:9px;top:9px;border-width:1px 0 0 1px;border-radius:10px 0 0}.hud-panel:after{right:9px;bottom:9px;border-width:0 1px 1px 0;border-radius:0 0 10px}
.system-line{display:flex;align-items:center;gap:9px!important;font-size:8px!important;font-weight:700;letter-spacing:.22em!important;color:#315c4f!important}.system-line span{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 14px var(--glow)}.game-lobby h1{font:600 clamp(65px,8.5vw,125px)/.78 var(--sans);letter-spacing:-.085em;text-transform:uppercase;text-shadow:0 2px #fff,0 18px 40px #17493628}.game-lobby h1 i{font-style:normal;color:transparent;-webkit-text-stroke:1px #1d5444;background:linear-gradient(135deg,#276f59,#769d90 45%,#173f34);-webkit-background-clip:text;background-clip:text}.game-lobby p:not(.system-line){font-size:14px!important;line-height:1.8!important}.chrome-action{position:relative;border:1px solid #fff!important;background:linear-gradient(115deg,#eafff5,#91aa9f 38%,#fff 52%,#708980 72%,#dff8ec)!important;color:#173f34!important;box-shadow:inset 0 2px 3px #fff,inset 0 -3px 7px #324d4355,0 12px 25px #163f312b!important;text-shadow:0 1px #fff;overflow:hidden}.chrome-action:after{content:"";position:absolute;width:35%;height:180%;left:-60%;top:-40%;transform:rotate(25deg);background:#fff9;filter:blur(6px);animation:buttonShine 4s ease-in-out infinite}@keyframes buttonShine{0%,45%{left:-60%}75%,100%{left:130%}}.enter{display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;min-width:245px;padding:12px 18px!important;text-align:left;border-radius:15px!important}.enter b{font-size:15px;letter-spacing:.13em}.enter small{font-size:7px;letter-spacing:.17em}.enter span{grid-column:2;grid-row:1/3;align-self:center;font-size:24px}.status-strip{display:flex;gap:18px;margin-top:25px;padding-top:20px;border-top:1px solid #fff9}.status-strip span{font-size:7px;font-weight:700;letter-spacing:.13em}.status-strip span:before{content:"◆";margin-right:6px;color:#71958a}
.core-reactor{height:min(66vh,680px);transform-style:preserve-3d}.core-reactor .orb{width:min(35vw,440px);background:radial-gradient(circle at 34% 27%,#fff 0 6%,#d4eee3 15%,#78998b 37%,#214e3f 63%,#071e18 85%);box-shadow:inset -35px -45px 80px #03110caa,inset 20px 15px 40px #fff9,0 0 0 1px #fff9,0 45px 90px #123d3070,0 0 90px #7be8bd55}.core-glass{position:absolute;width:min(23vw,290px);aspect-ratio:1;border-radius:50%;border:1px solid #fff9;background:radial-gradient(circle at 35% 20%,#fff9,transparent 25%),linear-gradient(145deg,#ffffff17,#d9fff024);box-shadow:inset 0 0 35px #e8fff55c;animation:counterSpin 18s linear infinite}.core-reactor .halo{width:min(47vw,580px);border:1px solid #eaffffaa;box-shadow:0 0 0 1px #41695a55,inset 0 0 35px #fff4}.orbit{position:absolute;aspect-ratio:1;border:2px solid transparent;border-top-color:#e7fff6;border-right-color:#647d74;border-radius:50%;box-shadow:inset 0 0 20px #fff5,0 0 15px #ffffff55}.orbit:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#e8fff6;box-shadow:0 0 20px #fff;top:11%;right:17%}.orbit-a{width:min(54vw,650px);animation:spin 14s linear infinite}.orbit-b{width:min(43vw,510px);animation:counterSpin 11s linear infinite}@keyframes counterSpin{to{transform:rotate(-360deg)}}.core-reactor .glyph{font-family:var(--sans);font-weight:300;letter-spacing:-.14em;color:#effff9;text-shadow:0 1px #fff,0 12px 34px #001f15}.core-reactor>small{position:absolute;bottom:9%;padding:8px 15px;border:1px solid #fff9;border-radius:99px;background:#dffff066;font-size:7px;font-weight:700;letter-spacing:.2em;backdrop-filter:blur(8px)}
.chapter.mission-select{width:min(1250px,100%);grid-template-columns:minmax(300px,.62fr) minmax(500px,1.38fr);gap:4vw;transform:rotateX(calc(var(--my)*-.55deg)) rotateY(calc(var(--mx)*.55deg));transition:transform .2s}.chapter-code{position:absolute;right:26px;top:24px;padding:7px 10px;border:1px solid #fff8;border-radius:7px;font-size:7px;letter-spacing:.15em;background:#f5fff455}.chapter-intro h1{font:600 clamp(56px,6.5vw,96px)/.86 var(--sans);text-transform:uppercase;letter-spacing:-.075em}.chapter-intro>p:not(.eyebrow){font:500 16px/1.6 var(--sans)}.chapter-intro>span{border:0;padding:0}.chapter-intro>span i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;background:var(--glow);box-shadow:0 0 12px var(--glow)}
.mission-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start;max-height:68vh;padding:20px;transform-style:preserve-3d}.mission-track:before{display:none}.mission-track .track-axis{position:absolute;inset:4px;border:1px solid #fff6;border-radius:30px;pointer-events:none}.mission-track .track-axis:before,.mission-track .track-axis:after{content:"";position:absolute;width:8px;height:8px;border:1px solid #fff;border-radius:50%;background:#7fa093}.mission-track .track-axis:before{left:-4px;top:18%}.mission-track .track-axis:after{right:-4px;bottom:18%}.mission-track button,.mission-track button:hover{width:100%;height:108px;min-height:0;margin:0;padding:16px;border-radius:18px;transform:none;grid-template-columns:35px 1fr;background:linear-gradient(135deg,#f4fff5a8,#adc7bb69 45%,#ffffff3d);border:1px solid #f2fffac2;box-shadow:inset 0 1px #fff,inset 0 -1px #536e6366,0 14px 30px #0f3b2c1f;overflow:hidden}.mission-track button:before{content:"";position:absolute;inset:4px;border:1px solid #57756a38;border-radius:13px}.mission-track button>i{position:absolute;right:-18px;top:-28px;width:72px;height:72px;border:1px solid #fff8;border-radius:50%;box-shadow:0 0 0 8px #ffffff12}.mission-track button:hover{transform:translateZ(35px) scale(1.03);background:linear-gradient(135deg,#fff,#c4ebd9 55%,#a3b9b0);box-shadow:inset 0 1px #fff,0 0 30px #8dffcf66}.mission-track strong{font-family:var(--sans);font-weight:500;font-size:clamp(23px,2.5vw,38px)}.mission-track span{display:flex;align-items:center;justify-content:space-between;font-size:7px}.mission-track span b{font-size:16px}
.sound-console{width:min(1250px,100%);grid-template-columns:minmax(390px,.95fr) minmax(480px,1.05fr);gap:5vw;transform:rotateX(calc(var(--my)*-.45deg)) rotateY(calc(var(--mx)*.45deg));transition:transform .2s}.sound-core{min-height:550px}.sound-core:before{inset:9%;border:1px solid #fff;box-shadow:0 0 0 9px #8ba69a44,0 0 0 10px #fff8,0 0 65px #75e3b655;background:radial-gradient(circle,#f3fff866,#8eb0a239 45%,transparent 68%);backdrop-filter:blur(10px)}.metal-ring{position:absolute;inset:15%;border:7px solid transparent;border-top-color:#f3fff9;border-right-color:#789087;border-bottom-color:#e0eee8;border-radius:50%;box-shadow:inset 0 0 30px #fff6,0 0 25px #315e4c38;animation:spin 9s linear infinite}.frequency-bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;opacity:.35}.frequency-bars i{display:block;width:2px;height:calc(30px + (var(--n) % 5)*18px);background:linear-gradient(transparent,#fff,#225f49,transparent);animation:freq calc(1.2s + var(--n)*.05s) ease-in-out infinite alternate}@keyframes freq{to{transform:scaleY(2.3);opacity:.2}}.sound-core .symbol{font-family:var(--sans);font-weight:200;letter-spacing:-.1em;color:#eafff7;text-shadow:0 1px #fff,0 10px 30px #06231a,0 0 40px #afffe0}.sound-core .symbol.long{font-size:clamp(50px,7vw,100px)}.sound-core .listen{bottom:2%;border-radius:14px;padding:13px 25px;font:700 9px var(--sans);letter-spacing:.15em}
.glass-console{position:relative;padding:34px 38px;border:1px solid #fff;border-radius:26px;background:linear-gradient(145deg,#f8fff8c4,#abc5ba63 60%,#ffffff3b);box-shadow:inset 0 1px #fff,inset -1px -1px #5c786d66,0 30px 80px #153b2f33;backdrop-filter:blur(26px) saturate(150%);max-height:68vh;overflow:auto}.glass-console:before{content:"";position:absolute;inset:6px;border:1px solid #71887f47;border-radius:20px;pointer-events:none}.console-head{display:flex;justify-content:space-between;align-items:center}.console-head>span{font-size:8px;font-weight:700;letter-spacing:.16em}.sound-console .lesson-copy h1{font:500 clamp(60px,7vw,105px)/.8 var(--sans);letter-spacing:-.07em;text-transform:none}.sound-console .ipa{font:500 22px var(--sans);letter-spacing:.02em}.sound-console .rule{font-size:13px}.sound-console .examples{border-top-color:#fff9}.sound-console .example{grid-template-columns:25px 30px minmax(0,1fr) minmax(0,1fr);font:500 14px var(--sans);border-bottom-color:#fff8}.sound-console .example small{font-size:7px;color:#638074}.sound-console .example button{width:24px;height:24px;border:1px solid #fff;border-radius:50%;background:linear-gradient(#fff,#93aa9f);font-size:7px}.sound-console .notes button{border:1px solid #fff;border-radius:12px;background:linear-gradient(125deg,#effff5a8,#899f9569,#fff7);box-shadow:inset 0 1px #fff,0 7px 18px #153d2e1c;font-size:8px;letter-spacing:.08em}.sound-console .notes i{font-style:normal;margin-right:6px}
footer{bottom:18px;width:min(1050px,calc(100vw - 150px));height:63px;border:1px solid #fff;border-radius:20px;background:linear-gradient(115deg,#f5fff6ba,#8ea79c61 35%,#effff788 70%,#6f887e55);box-shadow:inset 0 2px 2px #fff,inset 0 -2px 4px #42594f55,0 22px 55px #12382c4a;backdrop-filter:blur(26px) saturate(170%)}footer:before{content:"NAV /";padding:0 5px;font-size:7px;font-weight:700;letter-spacing:.16em}footer>button{flex:0 0 38px;border:1px solid #fff;background:linear-gradient(145deg,#fff,#82988e);box-shadow:inset 0 1px #fff,0 3px 9px #31473f55}#journey button{border:1px solid transparent;border-radius:10px;font-size:8px;letter-spacing:.04em}#journey button.active{border-color:#fff;background:linear-gradient(135deg,#f5fff6,#78968a);color:#143d30;box-shadow:inset 0 1px #fff,0 0 17px #aeffe099}
#noteModal{background:#0d2c2399;backdrop-filter:blur(16px)}#noteModal section{border:1px solid #fff;border-radius:28px;background:linear-gradient(145deg,#f8fff5ef,#91aa9fe8);box-shadow:inset 0 1px #fff,inset 0 -1px #405a50,0 35px 110px #061b1599}#noteModal section:before{content:"NOTE MODULE / CLOUD SYNC";position:absolute;top:17px;left:34px;font-size:7px;letter-spacing:.18em}.tools{border-color:#fff;background:linear-gradient(110deg,#fff8,#728d8061,#fff7);box-shadow:inset 0 1px #fff}.surface{border:1px solid #fff8;border-radius:13px;background:linear-gradient(#fafff1bd,#dcebe1aa),repeating-linear-gradient(to bottom,transparent 0 31px,#496e5222 32px);box-shadow:inset 0 8px 25px #143f2e0c}
@media(max-width:780px){body{overflow:hidden}header{top:8px;left:8px;right:8px;height:52px;border-radius:14px}header button{font-size:13px}main{height:100svh;min-height:100svh;padding:68px 12px 91px;overflow:auto}.map-button{left:10px;bottom:82px;width:46px;height:46px;border-radius:13px}.game-lobby,.chapter.mission-select,.sound-console{grid-template-columns:minmax(0,1fr);gap:9px;transform:none}.game-lobby{display:flex;flex-direction:column-reverse;justify-content:center}.hud-panel{padding:23px 20px;border-radius:20px}.game-lobby h1{font-size:clamp(46px,15vw,72px);text-align:left;margin:10px 0}.game-lobby p:not(.system-line){font-size:11px!important;text-align:left}.core-reactor{height:38vh;min-height:270px}.core-reactor .orb{width:min(57vw,230px)}.core-glass{width:min(38vw,150px)}.orbit-a{width:min(82vw,320px)}.orbit-b{width:min(67vw,260px)}.core-reactor .halo{width:min(75vw,290px)}.core-reactor .glyph{font-size:31vw}.enter{min-width:205px}.status-strip{gap:10px}.status-strip span{font-size:6px}.chapter.mission-select{padding:6px 0}.chapter-intro{text-align:left;padding:20px}.chapter-intro h1{font-size:clamp(38px,11vw,54px);margin:9px 0}.chapter-intro>p:not(.eyebrow){font-size:12px}.chapter-code{top:16px}.mission-track{grid-template-columns:repeat(2,minmax(0,1fr));max-height:50vh;padding:8px;gap:8px}.mission-track button,.mission-track button:hover{height:82px;padding:10px;grid-template-columns:25px 1fr;border-radius:13px}.mission-track strong{font-size:clamp(18px,6vw,27px)}.mission-track span{font-size:5px}.sound-console{display:block;overflow:auto}.sound-core{min-height:285px}.sound-core:before{inset:11%}.sound-core .symbol{font-size:38vw}.sound-core .symbol.long{font-size:13vw}.sound-core .listen{bottom:1%}.glass-console{margin-top:8px;padding:23px 19px 95px;max-height:none;text-align:left}.sound-console .lesson-copy h1{font-size:15vw;margin:13px 0}.sound-console .rule{font-size:12px}.sound-console .example{font-size:11px;grid-template-columns:17px 25px minmax(0,1fr) minmax(0,1fr);padding:10px 0}.sound-console .notes{justify-content:flex-start}.sound-console .notes button{padding:10px;font-size:6px}footer{bottom:7px;width:calc(100vw - 14px);height:58px;border-radius:16px}footer:before{display:none}#journey button{font-size:7px}.particles{background-size:63px 63px,97px 97px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important}}