@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--ink:#dce7f3;--muted:#788da6;--cyan:#71e9e4;--gold:#f9be7f;--dark:#06101f;--p:#121e32;--line:rgba(175,211,248,.13)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#051021;color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,sans-serif;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid #77fff3;outline-offset:3px}
button:disabled{opacity:.33;cursor:default}
.shell{width:100%;height:100dvh;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 40% 35%,#14253c,#060d1a 66%)}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.ambient{position:absolute;z-index:1;pointer-events:none;width:40vw;height:40vw;filter:blur(72px);opacity:.11}.ambient.top{top:-28vw;left:8vw;background:#39adce}.ambient.low{bottom:-32vw;right:-5vw;background:#ce83b4}
.topbar{position:absolute;z-index:4;top:0;left:0;right:0;min-height:81px;padding:17px clamp(17px,3vw,48px) 8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(3,10,24,.88),rgba(3,10,24,.12))}
.identity{display:flex;gap:13px;align-items:center;min-width:0}.identity strong{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.16em;font-size:21px;line-height:1}.brand-small{font-size:8px;letter-spacing:.3em;color:var(--muted);font-weight:800;display:block;margin-bottom:5px}
.brand-end{font-weight:600;color:#93a7b8;font-size:13px;letter-spacing:.15em}
.sigil{position:relative;border:1px solid #89b7d852;width:39px;height:39px;border-radius:11px;display:grid;place-items:center;transform:rotate(45deg);flex-shrink:0;background:#23384e38;box-shadow:0 0 24px #52b9ee11}
.sigil span{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 15px #ffb46a88}.sigil span+span{transform:translate(13px,-13px);background:var(--cyan);box-shadow:0 0 15px #53e2e5a0}
.level-meta{text-align:center}.tinycap{display:block;letter-spacing:.23em;font:700 9px 'DM Sans',sans-serif;color:#88a7bd}.level-name{font:800 clamp(16px,2vw,21px) 'Barlow Condensed',sans-serif;letter-spacing:.12em;margin-top:5px}
.nav-button{justify-self:end;min-height:39px;border:1px solid #5da7bd54;background:#12283b91;border-radius:7px;font-size:10px;font-weight:800;letter-spacing:.17em;padding:9px 13px;display:flex;align-items:center;gap:9px;transition:background .2s,border-color .2s}
.nav-button:hover,.tool:hover{background:#29516a9c;border-color:#8ad6ff77}.nav-icon{font-size:19px;color:var(--cyan)}
.progress-track{position:absolute;z-index:4;top:80px;left:0;right:0;height:2px;background:#7897b21a}.progress-track div{height:100%;width:4.16%;background:linear-gradient(90deg,var(--gold),var(--cyan));box-shadow:0 0 14px #68ebea80;transition:width .3s}
.statusline{position:absolute;z-index:3;top:91px;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center}
.status-chip{min-width:110px;padding:7px 15px;background:rgba(10,23,39,.64);border:1px solid #85b7d528;border-radius:6px;display:flex;align-items:center;gap:14px;justify-content:space-between;white-space:nowrap}
.status-chip span{font-size:9px;letter-spacing:.17em;font-weight:800;color:#8293ac}.status-chip strong{font:800 19px 'Barlow Condensed',sans-serif;color:#dce9f4;font-variant-numeric:tabular-nums}
.status-chip.target strong{color:var(--gold)}.status-chip.streak strong{color:var(--cyan)}.status-chip i{font:normal 12px Georgia,serif}
.level-hint{position:absolute;top:138px;left:50%;transform:translateX(-50%);z-index:3;font-size:10px;color:#8aa5b6;letter-spacing:.22em;font-weight:800;text-align:center;white-space:nowrap;opacity:.82}
.stage-labels{position:absolute;z-index:3;left:50%;top:0;transform:translateX(-50%);display:flex;justify-content:space-between;pointer-events:none;opacity:.92}
.stage-labels>div{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.23em}.stage-labels b{font-size:13px;font-weight:800}.stage-labels small{font-size:8px;letter-spacing:.09em;color:#6c86a0}
.insignia{font-size:18px}.insignia.sun{color:var(--gold)}.insignia.moon{color:var(--cyan)}
.bottom-ui{position:absolute;z-index:5;bottom:max(17px,env(safe-area-inset-bottom));left:clamp(15px,3vw,48px);right:clamp(15px,3vw,48px);height:81px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.tools{display:flex;gap:7px;align-items:center}.tool{min-width:75px;height:50px;border-radius:9px;border:1px solid #86bcd038;background:#102338be;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:.2s}
.tool-icon{font-size:22px;line-height:1;color:#9ec4d4}.tool span:last-child{font-size:8px;font-weight:800;color:#819bb0;letter-spacing:.14em}
.phase-button{height:51px;display:flex;align-items:center;gap:7px;padding:0 13px;background:linear-gradient(110deg,#2d3a60bb,#31414dba);border-radius:8px;border:1px solid #a8bddc55;font:900 10px 'DM Sans',sans-serif;letter-spacing:.07em;white-space:nowrap}
.phase-glyph{font-size:25px;color:var(--cyan)}.phase-button small{font-size:8px;color:#a2b2cd;border:1px solid #b7cad34f;padding:2px 4px;margin-left:3px}
.phase-button.active{border-color:#ff969877;background:#512841a9}.phase-button.active .phase-glyph{color:#ff91ab}
.controls{display:flex;align-items:center;gap:6px}
.direction{width:47px;height:47px;border:1px solid #9cbdcc60;border-radius:10px;background:linear-gradient(145deg,#263e55cd,#0e2133da);font:700 24px 'DM Sans',sans-serif;box-shadow:inset 0 1px #e3faff1a,0 6px 16px #0003;transition:transform .12s,border .13s,background .13s}
.direction:active,.direction.pressed{transform:translateY(2px) scale(.96);border-color:#92fcfa;background:#24566c}
.instruction{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;letter-spacing:.1em;font-size:10px;white-space:nowrap}.instruction strong{color:#c3d7e6;font-size:10px;letter-spacing:.23em}.instruction span{color:#738da8;font-weight:700;font-size:9px}.instruction i{font-style:normal;color:#405971}
.screen-overlay{position:absolute;z-index:15;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .35s,visibility .35s;background:radial-gradient(ellipse at 50% 45%,#081a31e3,#030914ef)}
.screen-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.landing-panel,.result-panel,.selection-panel,.help-panel{position:relative;text-align:center;width:min(630px,95vw);padding:20px 24px;border-radius:14px}
.landing-panel:before,.result-panel:before,.help-panel:before{content:'';position:absolute;inset:0;border:1px solid #79bcd52f;border-radius:14px;pointer-events:none;background:linear-gradient(135deg,#7fddff0b,transparent 50%,#d7a9780a)}
.eyebrow{font:800 10px 'DM Sans',sans-serif;letter-spacing:.32em;color:#86f7ee;display:flex;justify-content:center;gap:12px;align-items:center}
.eyebrow-line{width:39px;height:1px;background:#93d7d65a}
.hero-mark{position:relative;height:160px;margin:15px auto -6px;width:260px;display:flex;align-items:center;justify-content:center}
.hero-loop{position:absolute;width:150px;height:150px;border-radius:50%;border:1px solid #6ccee447;transform:rotate(-35deg) skew(17deg,5deg);box-shadow:inset 0 0 50px #3da7e80c,0 0 60px #257d9b13}
.hero-loop.b{width:110px;height:110px;transform:rotate(22deg) skew(14deg,20deg);border-color:#f2b97e50}
.hero-core{position:absolute;width:37px;height:37px;border-radius:50%;box-shadow:0 0 25px #e1a67f81,0 0 75px #e2a66d38;background:radial-gradient(circle at 29% 25%,#fff9d5,#facb86 47%,#d56f4b 88%);left:73px;top:67px}
.hero-core.right{left:153px;top:67px;box-shadow:0 0 25px #6de6e59e,0 0 75px #47c9e558;background:radial-gradient(circle at 29% 25%,#ebfff9,#75e9e5 47%,#3e77c5 88%)}
.hero-line{width:75px;height:2px;box-shadow:0 0 14px #9de1fb;background:linear-gradient(90deg,#f9c087,#9fe8fa);transform:rotate(-17deg)}
.intro-edition{margin-top:7px;font:800 9px 'DM Sans',sans-serif;letter-spacing:.32em;color:#b49f8f}
h1,h2,p{margin:0}
.landing-panel h1{font:900 clamp(66px,12vw,112px)/.77 'Barlow Condensed',sans-serif;letter-spacing:.11em;margin:16px 0 26px;text-shadow:0 0 65px #6ca6cf33}
.title-break{display:block;font-size:clamp(31px,5.5vw,50px);letter-spacing:.19em;margin-top:20px;color:#a8c2d2}
.landing-panel p{font-size:13px;line-height:1.65;color:#aec4d0;font-weight:500;letter-spacing:.06em;margin-bottom:22px}
.primary-btn{position:relative;display:flex;margin:auto;width:min(315px,90%);min-height:55px;border:1px solid #ffffff5a;background:linear-gradient(110deg,#dbeff6,#9fe4e2);color:#091f2c;border-radius:7px;align-items:center;justify-content:center;gap:16px;font:900 13px 'DM Sans',sans-serif;letter-spacing:.14em;box-shadow:0 12px 40px #2f94a64d;transition:transform .16s,filter .16s}
.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}.primary-btn:active{transform:translateY(1px)}
.button-arrow{font-size:22px;font-weight:500;position:absolute;right:17px;top:14px}
.landing-foot{display:flex;gap:16px;justify-content:center;color:#6d8497;font-size:8px;letter-spacing:.15em;font-weight:800;margin:20px 0 2px}
.landing-foot i{font-style:normal;color:#9fdcd7}
.result-panel{background:#07182cbd;border:1px solid #96dbd442;box-shadow:0 30px 90px #020716aa;padding:30px 20px}
.result-orbit{font-size:33px;letter-spacing:.3em;margin:15px 0;color:var(--gold)}.result-orbit span{color:#7295a5}
.result-stars{font-size:34px;letter-spacing:.32em;color:#fbd099;text-shadow:0 0 21px #ffba598f}
.result-panel h2,.selection-panel h2,.help-panel h2{font:900 clamp(35px,5vw,56px)/1.05 'Barlow Condensed',sans-serif;letter-spacing:.08em;margin:10px 0}
.result-panel p{color:#a8c2d2;font-size:12px;margin:0 0 18px}
.result-summary{display:flex;justify-content:center;gap:40px;margin:18px 0 27px}.result-summary div{display:flex;flex-direction:column;gap:5px}
.result-summary small{color:#7792ac;font-size:9px;letter-spacing:.18em;font-weight:700}.result-summary strong{font:800 32px 'Barlow Condensed',sans-serif;color:#d9ecf3}
.text-button{background:none;border:none;display:block;margin:17px auto 0;color:#9daebb;text-decoration:underline;text-underline-offset:5px;font-size:10px;font-weight:700;letter-spacing:.1em}
.selection-panel{width:min(770px,94vw);max-height:min(88dvh,840px);overflow:auto;text-align:left;background:linear-gradient(145deg,#10263add,#071322f5);border:1px solid #8ad7d453;box-shadow:0 22px 80px #000a;padding:24px}
.selection-head{display:flex;justify-content:space-between;align-items:center}.selection-head .eyebrow{justify-content:flex-start;font-size:9px}.selection-head h2{margin:4px 0}
.close{height:38px;width:38px;border:1px solid #7593a95e;background:#193047;border-radius:7px}
.selection-panel>p{font-size:12px;line-height:1.6;color:#91abc0;margin:6px 0 19px}
.chapter-heading{font-size:10px;font-weight:800;letter-spacing:.17em;color:#9de3de;border-bottom:1px solid #7393a53a;padding-bottom:9px;margin:17px 0 11px}
.level-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.level-tile{position:relative;min-height:54px;border:1px solid #7797ad56;border-radius:8px;background:linear-gradient(155deg,#29445b92,#102639a2);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}
.level-tile:disabled{opacity:.36}.level-tile strong{font:800 21px 'Barlow Condensed',sans-serif}.level-tile small{font-size:9px;letter-spacing:.06em;color:#eac58b}
.level-tile.current{border-color:#73eee8;background:#245368}.selection-foot{margin-top:16px;display:flex;justify-content:space-between;gap:14px;color:#8199ab;font-size:9px;letter-spacing:.1em}
.help-panel{background:#08182ddf;border:1px solid #8aded052;max-width:500px;padding:30px}.help-panel h2{font-size:40px;margin:18px 0}.help-panel p{margin:12px 0;color:#afc5d4;line-height:1.65;font-size:13px;text-align:left}.help-panel .primary-btn{margin-top:25px}
.help-link{position:absolute;z-index:6;bottom:max(8px,env(safe-area-inset-bottom));right:12px;border:1px solid #8cb5bd6b;background:#203445ad;color:#9bcbde;border-radius:50%;width:23px;height:23px;font-weight:800;font-size:12px}
#toast{position:absolute;left:50%;transform:translateX(-50%) translateY(15px);bottom:112px;z-index:11;pointer-events:none;font-size:10px;font-weight:800;letter-spacing:.13em;color:#d5fff8;background:#102d3acc;padding:10px 20px;border:1px solid #7ee8d45a;border-radius:5px;opacity:0;transition:opacity .15s,transform .15s;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:960px){.identity strong{font-size:18px}.brand-end{font-size:11px}.instruction{display:none}.bottom-ui{justify-content:space-between}.tools{gap:5px}.tool{min-width:64px}.direction{width:43px;height:43px}}
@media(max-width:650px){
 .topbar{padding:13px 14px 7px;min-height:72px;grid-template-columns:1fr auto}
 .level-meta{grid-column:1/-1;grid-row:2;margin-top:6px}.identity .sigil{width:29px;height:29px}.identity strong{font-size:17px}.brand-end{font-size:10px}.brand-small{font-size:7px}
 .nav-button{grid-column:2;grid-row:1;min-height:32px;padding:5px 10px}.nav-icon{font-size:16px}.nav-label{font-size:9px}
 .progress-track{top:100px}
 .statusline{top:108px;gap:4px}.status-chip{padding:6px 9px;gap:7px;min-width:97px}.status-chip span{font-size:7px}.status-chip strong{font-size:17px}
 .level-hint{top:157px;font-size:8px;letter-spacing:.11em}
 .stage-labels small{display:none}.stage-labels b{font-size:12px}
 .bottom-ui{height:154px;left:10px;right:10px;bottom:max(31px,env(safe-area-inset-bottom));flex-direction:column;justify-content:flex-end;gap:11px}
 .tools{order:2;width:100%;justify-content:center;gap:4px}.tool{min-width:0;flex:1;height:46px}.tool-icon{font-size:20px}.phase-button{flex:1.6;padding:0 8px;gap:4px;font-size:9px;height:46px}.phase-glyph{font-size:21px}.phase-button small{font-size:7px}
 .controls{order:1;gap:8px}.direction{width:53px;height:48px;border-radius:9px;font-size:27px}
 .landing-panel{padding:12px 4px}.hero-mark{transform:scale(.85);margin-top:0;margin-bottom:-17px}
 .landing-panel h1{font-size:clamp(62px,17vw,83px);margin:16px 0 22px}.title-break{font-size:clamp(29px,8vw,40px);margin-top:15px}
 .landing-panel p{font-size:12px;margin-bottom:18px}
 .result-panel{padding:23px 10px}.result-panel h2{font-size:40px}
 .selection-panel{max-height:92dvh;padding:14px}.level-grid{grid-template-columns:repeat(4,1fr)}.level-tile{min-height:46px}
 #toast{bottom:205px;font-size:9px;padding:8px 12px}
 .help-link{bottom:6px;right:9px}
}
@media(max-height:550px) and (min-width:651px){
 .topbar{min-height:64px;padding:10px 20px 4px}.progress-track{top:63px}.statusline{top:73px}.level-hint{top:117px;font-size:8px}
 .bottom-ui{height:61px;bottom:8px}.tool,.phase-button{height:41px}.direction{width:39px;height:39px;font-size:21px}
 .level-hint{display:none}
 .hero-mark{height:100px;transform:scale(.68);margin:-12px auto}.landing-panel h1{font-size:63px;margin:4px 0 14px}
 .landing-panel .title-break{font-size:35px;margin-top:11px}.landing-panel p{margin-bottom:11px}.landing-foot{margin-top:13px}
 .intro-edition{margin-top:0}.primary-btn{min-height:46px}
}
@media(max-height:690px) and (max-width:650px){
 .statusline{top:101px}.level-hint{top:145px}
 .bottom-ui{height:103px;bottom:max(21px,env(safe-area-inset-bottom));gap:5px}
 .direction{height:38px;width:45px;font-size:21px}.tool,.phase-button{height:39px}
 .landing-panel .hero-mark{height:105px;transform:scale(.58);margin:-15px auto -22px}
 .landing-panel h1{font-size:53px;margin:4px 0 15px}.title-break{font-size:26px;margin-top:12px}
 .landing-panel p{font-size:10px;margin-bottom:13px}.landing-foot{font-size:7px;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}