:root{color-scheme:dark;--bg: #12343b;--bg2: #0f2226;--surface: #1d4d4f;--surface2: #245f5b;--text: #f4fbf8;--muted: #acd5cc;--gold: #f7c948;--green: #6ad6a5;--coral: #ff7f6e;--blue: #74b9ff;--shadow: rgba(0, 0, 0, .28)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 18% 12%,rgba(247,201,72,.18),transparent 28rem),linear-gradient(145deg,var(--bg),var(--bg2));color:var(--text);font-family:Inter,ui-rounded,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-user-select:none;user-select:none}button,input,select{font:inherit}button{border:0;cursor:pointer}.appShell{min-height:100vh;display:flex;flex-direction:column;width:min(1120px,100%);margin:0 auto;padding:16px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.brandButton{display:inline-flex;align-items:center;gap:10px;color:var(--text);background:transparent;font-weight:850;font-size:1.1rem}.brandMark{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:var(--gold);color:#17363b;font-weight:900}.topStatus{display:flex;gap:10px;align-items:center;color:var(--muted);font-weight:750}.topStatus span{background:#ffffff14;border-radius:999px;padding:8px 12px}.topButton{min-height:38px;color:var(--text);background:#ffffff1a;border-radius:8px;padding:8px 12px;font-weight:850}.centerScreen,.stageScreen,.lessonScreen,.panel{flex:1;min-height:0}.centerScreen{display:grid;place-items:center;align-content:center;gap:20px;text-align:center;padding:28px 0}.panel{width:min(440px,100%);margin:8vh auto 0;background:#1d4d4fd1;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:24px;box-shadow:0 22px 60px var(--shadow)}.narrow{max-width:440px}h1{margin:0;font-size:clamp(2rem,6vw,4rem);line-height:1.02;letter-spacing:0}p{margin:0}.muted{color:var(--muted)}.centered{text-align:center}.largeMascot{width:clamp(120px,22vw,190px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#12343b;font-size:clamp(3rem,12vw,6rem);font-weight:950;box-shadow:0 24px 60px var(--shadow)}.formStack{display:grid;gap:14px;margin-top:18px}label{display:grid;gap:6px;text-align:left;color:var(--muted);font-weight:750}input,select{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:12px 14px;color:var(--text);background:#0000002e}select{appearance:none}.primaryButton,.secondaryButton,.iconButton,.dangerButton{border-radius:8px;min-height:44px;font-weight:900}.primaryButton{color:#12343b;background:var(--gold);padding:12px 20px}.secondaryButton,.iconButton{color:var(--text);background:#ffffff1f;padding:12px 18px}.dangerButton{color:var(--text);background:#ff7f6e38;padding:12px 18px}.compact{min-height:38px;padding:8px 12px}.huge{min-width:180px;min-height:74px;font-size:1.35rem}.profileGrid,.stageGrid,.launcherGrid{display:grid;gap:16px;width:min(860px,100%)}.profileGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.profileCard,.stageCard,.launcherTile{min-height:180px;border-radius:8px;background:#1d4d4fdb;color:var(--text);display:grid;place-items:center;gap:10px;padding:18px;box-shadow:0 18px 44px var(--shadow)}.launcherGrid{width:min(360px,100%)}.launcherTile{font-size:1.25rem;font-weight:950}.profileCard{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:900}.avatar{width:92px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#12343b;font-size:3rem}.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:10px 0 18px}.sectionHead h1{font-size:clamp(2rem,5vw,3.4rem)}.sectionHead p{color:var(--gold);font-weight:850}.accountScreen{flex:1;padding-bottom:24px}.accountGrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.85fr);gap:16px;align-items:start}.accountPanel{display:grid;gap:14px;background:#1d4d4fb8;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:18px;box-shadow:0 16px 44px var(--shadow)}.accountPanel h2,.accountPanel h3{margin:0;font-size:1.25rem;letter-spacing:0}.accountPanel h3{font-size:1rem;color:var(--gold)}.profileEditorList{display:grid;gap:12px}.profileEditor{display:grid;gap:12px;background:#00000021;border-radius:8px;padding:14px}.profileEditorHead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900}.profileCreateForm{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.miniPill{color:#12343b;background:var(--green);border-radius:999px;padding:5px 9px;font-size:.78rem}.checkRow{display:flex;align-items:center;gap:10px}.checkRow input{width:20px;height:20px}.tight{justify-content:start;gap:8px}.stageGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.stageCard{position:relative;text-align:center;align-content:center}.stageCard:disabled{cursor:default}.stageCard.locked{opacity:.52;box-shadow:none}.stageCard.complete .stageIcon{background:var(--green)}.stageCard.alternatePath .stageDescription:after{content:" Later";color:var(--blue);font-weight:850}.stageCard.recommended:after{content:"";position:absolute;inset:-4px;border:3px solid var(--gold);border-radius:10px;animation:pulseBorder 1.6s ease-in-out infinite}@keyframes pulseBorder{50%{transform:scale(1.02);opacity:.55}}.stageIcon{width:76px;height:76px;display:grid;place-items:center;border-radius:8px;background:var(--blue);color:#102c34;font-size:1.8rem;font-weight:950}.stageTitle{font-size:1.35rem;font-weight:950}.stageDescription,.stageStars{color:var(--muted);min-height:1.4em}.stageStars{color:var(--gold);font-weight:950}.stageMeter{width:min(180px,100%);height:10px;display:block;border-radius:999px;overflow:hidden;background:#ffffff1f}.stageMeter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--gold))}.lessonScreen{display:flex;flex-direction:column;gap:12px}.lessonTop{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.lessonTop h1{font-size:clamp(1.5rem,4vw,2.5rem)}.comboBadge{color:#12343b;background:var(--gold);border-radius:999px;padding:10px 14px;font-weight:950}.progressTrack{height:14px;border-radius:999px;background:#ffffff1c;overflow:hidden}.progressTrack div{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .14s ease}.playArea{flex:1;min-height:280px;display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:16px;align-items:stretch}.pixiHost{min-height:220px;border-radius:8px;background:#ffffff14;overflow:hidden}.pixiFallback{display:grid;place-items:center}.fallbackMascot{width:112px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:#12343b;background:var(--green);font-size:2rem;font-weight:950}.pixiHost canvas{width:100%;height:100%;display:block}.promptBox{min-height:220px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:2px;border-radius:8px;background:#ffffff1a;padding:24px;font-size:clamp(3rem,9vw,6.5rem);font-weight:950;line-height:1.1}.promptCharacter{min-width:.64em;border-radius:8px;color:#f4fbf885}.promptCharacter.current{background:var(--gold);color:#12343b}.promptCharacter.done{color:var(--green)}.promptCharacter.wrong{color:var(--coral)}.keyboard{display:grid;gap:6px}.keyboardRow{display:flex;justify-content:center;gap:6px}.keyButton{width:clamp(30px,7vw,52px);height:48px;border-radius:8px;color:var(--text);background:#ffffff1f;font-weight:900;text-transform:uppercase}.keyButton.target{color:#12343b;background:var(--gold)}.keyButton.wide{width:min(48vw,280px)}.keyButton.backspace{width:92px;text-transform:none}.resultBadge{color:#12343b;background:var(--green);border-radius:999px;padding:10px 18px;font-weight:950}.resultBadge.best{background:var(--gold)}.stars{color:var(--gold);font-size:clamp(3.2rem,12vw,6rem);letter-spacing:0}.resultGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(620px,100%)}.resultGrid div{display:grid;gap:6px;background:#ffffff1a;border-radius:8px;padding:16px}.resultGrid strong{font-size:2rem}.resultGrid span,.syncNote{color:var(--muted)}.bestList{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.bestList span{color:#12343b;background:var(--gold);border-radius:999px;padding:8px 12px;font-weight:950}.buttonRow{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}@media(max-width:760px){.appShell{padding:10px}.topbar,.sectionHead{align-items:start;flex-direction:column}.profileGrid,.stageGrid,.accountGrid,.playArea,.resultGrid{grid-template-columns:1fr}.profileCard,.stageCard{min-height:140px}.promptBox{min-height:180px}}