:root{--ink:#1a303c;--muted:#65727a;--paper:#f6f4ee;--white:#fffefa;--line:#dedfd6;--orange:#dc683b;--orange-dark:#b74621;--teal:#236c65;--pale:#e8f1e9;--navy:#172d39;--shadow:0 12px 32px #18344309}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 'Segoe UI',Arial,sans-serif}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #167a8c;outline-offset:4px}button{color:inherit}.skip{position:fixed;top:-80px;left:12px;z-index:50;background:white;padding:12px}.skip:focus{top:12px}.app-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}.sidebar{background:var(--navy);color:#f7f3e8;padding:35px 22px 26px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;letter-spacing:1.2px;font-size:21px;font-weight:850}.brand small{display:block;font-size:8px;letter-spacing:1.15px;margin-top:3px;color:#c4d0d0}.sidebar nav{display:grid;gap:9px;margin-top:56px}.sidebar nav a{padding:13px 15px;border-radius:11px;display:flex;gap:13px;align-items:center;color:#cbd5d9;font-size:14px;font-weight:600;transition:.18s}.sidebar nav a:hover{background:#ffffff0b}.sidebar nav a.active{background:#ffffff12;color:white;box-shadow:inset 3px 0 var(--orange)}.sidebar nav a span{width:20px;text-align:center;font-size:19px}.sidebar-bottom{margin-top:auto;border-top:1px solid #ffffff1b;padding-top:24px;font-size:13px}.sidebar-bottom strong{font-weight:600}.sidebar-bottom p{color:#bdc8ca;font-size:12px;line-height:1.7}.signal{display:inline-block;background:#a9cdb3;width:7px;height:7px;border-radius:50%;margin-right:8px}.local-note{font-size:10px;color:#aababe}.main-shell{min-width:0}.topbar{height:88px;padding:0 42px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.breadcrumb{font-size:10px;letter-spacing:1.8px;font-weight:700}.breadcrumb i{font-style:normal;color:#a9b1b0;margin:0 13px}.topbar-right{display:flex;align-items:center;gap:20px}.saved-label{color:var(--teal);font-size:11px}.profile{width:35px;height:35px;border:1px solid #cbd6ce;background:#e7ede3;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px}main{max-width:1320px;margin:0 auto;padding:38px 42px 36px;min-height:calc(100vh - 150px)}main:focus{outline:none}.eyebrow{font-size:10px;letter-spacing:1.9px;text-transform:uppercase;font-weight:750;color:var(--teal);margin:0 0 13px}.hero{display:grid;grid-template-columns:minmax(270px,1fr) minmax(300px,1.16fr);background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.hero-copy{padding:36px 0 34px 34px;z-index:1}.hero h1{font-size:clamp(32px,3.2vw,48px);line-height:1.1;letter-spacing:-1.8px;margin:0 0 20px;font-weight:800}.hero h1 em{color:var(--orange);font-style:normal}.hero-copy p:not(.eyebrow){font-size:14px;max-width:350px;color:var(--muted);margin:0 0 23px;line-height:1.7}.hero-art{position:relative;display:flex;align-items:center;justify-content:center;background:#fffcf2}.hero-art img{width:100%;height:auto;display:block;mix-blend-mode:multiply}.art-label{position:absolute;bottom:14px;right:18px;font-size:9px;letter-spacing:1.8px;color:#51635c;background:#fffdf2da;border-radius:20px;padding:6px 12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border:0;border-radius:11px;padding:12px 22px;font-weight:700;font-size:14px;transition:transform .15s,background .15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn.primary{background:var(--orange);color:white;box-shadow:0 3px 0 var(--orange-dark)}.btn.primary:hover{background:#ce5b31}.btn.secondary{background:#e6ece5;color:var(--ink);border:1px solid #d2dbd1}.btn.ghost{background:transparent;border:1px solid var(--line)}.btn.small{min-height:37px;font-size:12px;padding:8px 14px}.hero-meta{display:flex;gap:17px;font-size:11px;color:var(--muted);margin-top:18px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:34px 0 18px}.section-heading h2{font-size:20px;margin:0;letter-spacing:-.5px}.section-heading span,.section-heading a{font-size:12px;color:var(--muted)}.section-heading a{text-decoration:underline;text-underline-offset:4px}.chapter-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.chapter{position:relative;border:1px solid var(--line);background:#eeeee7;border-radius:15px;padding:19px 20px;min-height:156px}.chapter.open{background:var(--white);border-color:#abbcaf}.chapter-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.2px;color:var(--muted)}.chapter-icon{font-size:20px;color:#81928a}.chapter.open .chapter-icon{color:var(--orange)}.chapter h3{font-size:16px;line-height:1.3;margin:17px 0 7px}.chapter p{font-size:11px;margin:0 0 13px;color:var(--muted)}.chapter .status{font-size:10px;font-weight:650;color:#6e7978}.chapter.open .status{color:var(--teal)}.chapter-hit{position:absolute;inset:0;background:transparent;border:none;border-radius:15px}.chapter:has(.chapter-hit:hover){box-shadow:var(--shadow);border-color:var(--teal)}.note-bar{display:flex;align-items:center;gap:15px;padding:17px 20px;background:#e9eee6;border-radius:13px;margin-top:21px;font-size:12px}.note-bar span{font-size:21px;color:var(--teal)}.note-bar p{margin:0}.footer{padding:18px 42px;display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);color:#79867f;font-size:10px}.page-title{font-size:34px;letter-spacing:-1px;line-height:1.15;margin:0 0 13px}.page-intro{color:var(--muted);max-width:670px;font-size:14px;margin:0 0 26px}.crew-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.crew-card{overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--white)}.character-art{aspect-ratio:1;background-image:url('assets/crew.png');background-size:300% 200%;background-repeat:no-repeat;background-position:var(--x) var(--y);background-color:#fffbed}.crew-info{padding:18px 20px 22px}.crew-info h2{font-size:21px;margin:0 0 4px}.character-tag{font-size:11px;color:var(--teal);font-weight:700}.crew-info p{font-size:12px;color:var(--muted);min-height:88px;line-height:1.65}.voice-label{display:flex;justify-content:space-between;font-size:11px;margin:18px 0 9px;font-weight:600}.voice-label span:last-child{color:var(--teal);font-weight:500}.crew-info audio{width:100%;height:36px}.sample-quote{font-size:11px!important;min-height:0!important;border-left:2px solid #e5b985;padding-left:10px;margin-top:12px;margin-bottom:0}.phrase-list{display:grid;gap:16px;max-width:850px}.phrase-card{padding:25px 28px;border:1px solid var(--line);border-radius:16px;background:var(--white);display:grid;grid-template-columns:50px 1fr;gap:13px}.phrase-num{color:var(--orange);font-size:14px;font-weight:750;padding-top:7px}.phrase-card h2{font-size:27px;margin:0;letter-spacing:-.6px}.phrase-card .translation{font-size:17px;color:var(--teal);margin:4px 0 10px}.phrase-card p{color:var(--muted);font-size:13px;margin:0}.phrase-tag{font-size:10px;display:inline-block;margin-top:13px;background:#edf0e8;padding:4px 8px;border-radius:5px;color:var(--teal)}.lesson-shell{max-width:900px;margin:0 auto}.lesson-head{display:flex;align-items:center;gap:20px;margin-bottom:23px}.exit-button{border:1px solid var(--line);border-radius:50%;width:36px;height:36px;background:transparent;flex:none;font-size:19px}.lesson-progress{flex:1}.progress-caption{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px}.progress-track{height:7px;border-radius:20px;background:#e0e5db;overflow:hidden}.progress-fill{height:100%;background:var(--teal);transition:width .3s;border-radius:20px}.lesson-card{border:1px solid var(--line);border-radius:21px;background:var(--white);padding:30px;box-shadow:var(--shadow);min-height:415px;animation:appear .25s ease-out}.lesson-label{display:flex;justify-content:space-between;gap:15px;margin-bottom:22px;color:var(--muted);font-size:10px;letter-spacing:1px}.speaker{display:flex;align-items:center;gap:13px;margin-bottom:22px}.speaker-dot{width:12px;height:12px;border-radius:50%;background:var(--speaker-color)}.speaker-name{font-size:12px;font-weight:750}.speaker-caption{font-size:10px;color:var(--muted)}.story-layout{display:grid;grid-template-columns:240px 1fr;gap:25px;align-items:center}.story-art{border-radius:17px;overflow:hidden;border:1px solid #f0eadb}.story-copy h1{font-size:28px;line-height:1.15;letter-spacing:-.8px;margin:0 0 15px}.dialogue{font-size:23px;line-height:1.45;letter-spacing:-.4px;margin:0 0 20px}.stage{font-size:13px;color:var(--muted);line-height:1.75}.lesson-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:25px;min-height:50px}.lesson-actions .helper{font-size:11px;color:var(--muted);max-width:340px}.teach-title{font-size:40px;line-height:1.2;margin:20px 0 8px;letter-spacing:-1px}.teach-translation{font-size:22px;color:var(--teal);margin:0 0 23px}.teach-note{background:#eff2e9;padding:16px 19px;font-size:13px;border-radius:10px;line-height:1.7;max-width:620px}.teach-dialogue{font-size:15px;color:var(--muted);max-width:620px}.question-title{font-size:28px;letter-spacing:-.7px;line-height:1.2;margin:0 0 12px}.question-prompt{font-size:16px;margin:0 0 25px;color:#586a70}.options{display:grid;gap:11px}.option{text-align:left;display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;min-height:56px;background:transparent;border:1.5px solid #d7ded5;border-radius:11px;font-size:17px}.option:hover:not(:disabled){background:#f2f4ed}.option.selected{border-color:var(--teal);background:#e7f0e7;box-shadow:0 0 0 1px var(--teal)}.option-key{border:1px solid #c7d0c7;min-width:25px;height:25px;border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:11px;flex:none}.option.selected .option-key{background:var(--teal);color:white;border-color:var(--teal)}.option:disabled{opacity:.82}.answer-input{width:100%;padding:16px 18px;border:2px solid #c9d6cc;border-radius:11px;background:#fffefa;color:var(--ink);font-size:22px}.input-help{font-size:11px;color:var(--muted);margin-top:11px}.token-answer{display:flex;flex-wrap:wrap;gap:9px;min-height:78px;padding:13px;border-radius:12px;border:2px dashed #c2d1c4;margin:10px 0 23px;align-items:center}.token-placeholder{font-size:13px;color:#74847a}.token-bank{display:flex;flex-wrap:wrap;gap:10px}.token{padding:11px 22px;border:1px solid #c7d4c8;border-bottom:3px solid #bac9bd;border-radius:10px;background:#f4f6ef;font-size:19px}.token-answer .token{background:#e8efe3}.feedback{border-radius:13px;padding:18px 20px;margin-top:20px;font-size:14px;border:1px solid #c1d8c8;background:#e8f2e9;color:#275346}.feedback strong{display:block;font-size:15px;margin-bottom:4px}.feedback.incorrect{background:#fff1e3;border-color:#efd0aa;color:#804315}.hint-panel{margin-top:13px;background:#f4efde;border-radius:10px;padding:13px 16px;font-size:13px}.text-button{background:none;border:0;color:var(--teal);font-size:12px;padding:8px 0;text-decoration:underline;text-underline-offset:4px}.results{text-align:center;max-width:740px;margin:25px auto;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:42px 32px}.results-badge{width:78px;height:78px;margin:0 auto 25px;border-radius:24px;background:#dfeada;display:grid;place-items:center;font-size:42px;color:var(--teal)}.results h1{font-size:40px;letter-spacing:-1px;line-height:1.1;margin:0 0 17px}.results>p{color:var(--muted);font-size:14px;max-width:510px;margin:0 auto 25px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:26px}.result-stats b{display:block;font-size:27px}.result-stats span{font-size:10px;color:var(--muted)}.result-skills{text-align:left;background:#edf2e9;border-radius:13px;padding:16px 22px;margin:0 0 26px;font-size:14px}.result-skills p{margin:7px 0}.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}.notes-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}.panel{border:1px solid var(--line);border-radius:17px;padding:25px;background:var(--white)}.panel h2{font-size:19px;margin:0 0 16px}.field-label{display:block;font-size:13px;font-weight:650;margin-bottom:9px}.notes-text{width:100%;min-height:170px;resize:vertical;padding:13px;border:1px solid #c4d0c7;border-radius:10px;background:#fffefa;color:var(--ink)}.notes-help{font-size:11px;color:var(--muted)}.note-item{border-top:1px solid var(--line);padding:16px 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.note-item time{display:block;white-space:normal;color:var(--muted);font-size:10px;margin-bottom:6px}.empty{font-size:13px;color:var(--muted);line-height:1.8}.reset{margin-top:22px;font-size:11px;color:#9b4a33;background:none;border:0;padding:5px 0;text-decoration:underline}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 21px;background:var(--navy);color:white;box-shadow:0 8px 30px #0002;border-radius:10px;font-size:13px;z-index:20;max-width:calc(100% - 30px)}[hidden]{display:none!important}.completion-chip{font-size:11px;padding:6px 10px;background:#e2eddf;border-radius:15px;color:var(--teal)}@keyframes appear{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:1500px){main{padding-top:47px}.hero-copy{padding:44px 0 44px 44px}.hero-art img{max-width:600px}}@media(max-width:1150px){.app-shell{grid-template-columns:205px 1fr}.sidebar{padding:28px 16px}.brand{font-size:18px}.brand small{font-size:7px}.topbar{padding:0 27px}main{padding:28px 27px}.hero{grid-template-columns:1fr 1fr}.hero-copy{padding:28px 0 28px 27px}.hero h1{font-size:34px}.hero-art img{min-width:310px}.hero-copy p:not(.eyebrow){font-size:13px}.crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.story-layout{grid-template-columns:180px 1fr}.dialogue{font-size:21px}.notes-layout{grid-template-columns:1fr}.footer{padding-left:27px;padding-right:27px}}@media(max-width:760px){.app-shell{display:block}.sidebar{height:auto;position:relative;padding:17px 19px 10px}.brand{font-size:19px}.brand img{width:36px;height:36px}.brand small{font-size:7px}.sidebar nav{display:grid;grid-template-columns:repeat(4,1fr);margin-top:17px;gap:4px}.sidebar nav a{justify-content:center;flex-direction:column;padding:9px 4px;gap:3px;font-size:9px;white-space:nowrap}.sidebar nav a span{font-size:18px}.sidebar nav a.active{box-shadow:inset 0 -2px var(--orange)}.sidebar-bottom{display:none}.topbar{height:52px;padding:0 19px}.breadcrumb{font-size:8px;letter-spacing:1px}.breadcrumb i{margin:0 7px}.saved-label{font-size:9px}.profile{display:none}main{padding:22px 17px;min-height:calc(100vh - 220px)}.hero{grid-template-columns:1fr}.hero-copy{padding:29px 25px 12px}.hero h1{font-size:37px;letter-spacing:-1.5px}.hero h1 br{display:none}.hero-copy p:not(.eyebrow){font-size:14px;max-width:440px;margin-bottom:20px}.hero .btn{width:100%}.hero-meta{justify-content:center}.hero-art{padding:0 13px 14px}.hero-art img{max-width:450px;min-width:0}.art-label{font-size:8px;bottom:12px}.section-heading{margin-top:28px}.section-heading h2{font-size:18px}.section-heading span{font-size:10px}.chapter-list{gap:10px}.chapter{padding:15px;min-height:155px}.chapter h3{font-size:15px}.chapter p{font-size:10px}.note-bar{padding:14px;font-size:11px}.footer{padding:16px 18px;font-size:9px;align-items:center}.footer span:last-child{max-width:150px;text-align:right}.page-title{font-size:30px}.page-intro{font-size:13px}.crew-grid{gap:13px}.crew-info{padding:14px}.crew-info h2{font-size:18px;overflow-wrap:anywhere}.character-tag{font-size:10px}.crew-info p{font-size:11px;min-height:0}.voice-label{display:block;font-size:10px}.voice-label span{display:block}.crew-info audio{height:34px}.sample-quote{font-size:10px!important}.phrase-card{grid-template-columns:25px 1fr;padding:21px 18px;gap:11px}.phrase-card h2{font-size:26px}.phrase-card p{font-size:12px}.lesson-card{padding:22px 19px;min-height:0}.lesson-label{font-size:8px;letter-spacing:.6px}.lesson-head{gap:12px;margin-bottom:17px}.story-layout{grid-template-columns:1fr}.story-art{width:150px;justify-self:center}.story-copy h1{font-size:26px}.dialogue{font-size:21px}.stage{font-size:12px}.story-copy{text-align:left}.speaker{margin-bottom:17px}.lesson-actions{flex-direction:column-reverse;gap:13px;align-items:stretch;margin-top:20px}.lesson-actions .helper{text-align:center;max-width:none;font-size:10px}.lesson-actions .btn{width:100%}.teach-title{font-size:35px}.teach-translation{font-size:20px}.question-title{font-size:25px}.question-prompt{font-size:14px}.option{font-size:15px;padding:13px 12px;gap:10px}.answer-input{font-size:18px}.teach-dialogue{font-size:14px}.token{padding:10px 18px;font-size:18px}.results{padding:30px 21px;margin-top:0}.results h1{font-size:34px}.result-stats b{font-size:24px}.panel{padding:21px}.notes-help{font-size:10px}}@media(max-width:370px){.hero h1{font-size:32px}.crew-grid{grid-template-columns:1fr}.chapter-list{grid-template-columns:1fr}.saved-label{display:none}}


/* Space navigation: decorative layers never intercept menu interaction. */
.sidebar {
  isolation: isolate;
  background: radial-gradient(ellipse at 100% 8%, #304477 0, transparent 48%),
    radial-gradient(ellipse at 0% 65%, #16474f 0, transparent 55%), #101a36;
  border-right: 1px solid #9aa9df26;
}
.space-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.space-backdrop::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 13% 10%, #e4f7ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 68% 5%, #b8d3ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 87% 31%, #fff0c8 0 1.2px, transparent 2px),
    radial-gradient(circle at 34% 49%, #b0c5f6 0 .7px, transparent 1.5px),
    radial-gradient(circle at 10% 72%, #bceeee 0 .8px, transparent 1.6px),
    radial-gradient(circle at 72% 88%, #e4ebff 0 1px, transparent 1.6px),
    radial-gradient(circle at 46% 24%, #b7d6ff 0 .6px, transparent 1.2px);
  background-size: 173px 197px, 229px 263px, 317px 239px, 139px 173px, 211px 227px, 293px 181px, 97px 109px;
  opacity: .6;
}
.space-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0a122314, #101a3620 35%, #0b192a88);
}
.space-planet {
  position: absolute; width: 114px; height: 114px; top: 55%; right: -27px;
  border-radius: 50%; transform: rotate(-24deg);
  background: radial-gradient(circle at 30% 22%, #d9c4f8, #9a94d1 31%, #545a9c 63%, #283458 85%);
  box-shadow: inset -15px -8px 20px #111e4c66, 0 0 36px #9c8bff28;
}
.space-planet::after {
  content: ''; position: absolute; inset: 39px -30px;
  border: 9px solid #c1b9e980; border-top-color: #c1b9e933;
  border-radius: 50%; transform: rotate(-8deg);
  box-shadow: 0 2px 0 #e7d7ff44;
}
.space-moon {
  position: absolute; width: 24px; height: 24px; left: 25px; top: 75%; border-radius: 50%;
  background: radial-gradient(circle at 28% 25%, #90e6d5, #3e909f 42%, #18364e 76%);
  box-shadow: 0 0 22px #77d5d322;
}
.space-orbit {
  position: absolute; width: 480px; height: 220px; right: -320px; top: 45%;
  border: 1px solid #c4d6fb22; border-radius: 50%; transform: rotate(-37deg);
}
.brand { color: #fff8ee; text-shadow: 0 2px 14px #0a1229; }
.brand img { filter: drop-shadow(0 3px 12px #ec734444); }
.brand small { color: #d5e3f0; }
.sidebar nav { gap: 10px; }
.sidebar nav a {
  border: 1px solid #b5c7ef1c; background: #0e1939a6;
  color: #e3ecf8; padding: 12px 10px; gap: 10px;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.sidebar nav a:hover { background: #273b60e6; border-color: #a9c8fb69; }
.sidebar nav a.active {
  background: linear-gradient(135deg, #573b48eb, #253758f2);
  border-color: #f6af7077; color: #fff7eb;
  box-shadow: inset 3px 0 #ffaf70, 0 4px 18px #050b231f;
}
.sidebar nav a .nav-icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
}
.nav-icon svg { display: block; width: 31px; height: 31px; filter: drop-shadow(0 2px 4px #0004); }
[data-nav="home"] .nav-icon { color: #ffc998; }
[data-nav="crew"] .nav-icon { color: #b7eafa; }
[data-nav="words"] .nav-icon { color: #c8c2ff; }
[data-nav="notes"] .nav-icon { color: #a1e9da; }
.sidebar a:focus-visible { outline-color: #ffdcac; }
.sidebar-bottom { border-top-color: #afc8e637; }
.sidebar-bottom p, .local-note { color: #cedbe9; }
.signal { background: #94efce; box-shadow: 0 0 10px #67e7c966; }
@media (min-width: 761px) and (max-width: 1150px) {
  .sidebar nav a { font-size: 12px; gap: 7px; padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 760px) {
  .sidebar {
    padding: 20px 19px 13px; border-right: 0; border-bottom: 1px solid #a9b5e23b;
    background: radial-gradient(ellipse at 88% -12%, #534e89 0, transparent 54%),
      radial-gradient(ellipse at 6% 115%, #1d5a66 0, transparent 57%), #101a36;
  }
  .space-planet { width: 69px; height: 69px; top: -14px; right: 23px; opacity: .9; }
  .space-planet::after { inset: 24px -20px; border-width: 5px; }
  .space-moon { width: 13px; height: 13px; top: 48px; left: auto; right: 130px; }
  .space-orbit { width: 280px; height: 105px; top: -35px; right: -80px; transform: rotate(-27deg); }
  .sidebar nav { margin-top: 21px; gap: 6px; }
  .sidebar nav a { min-width: 0; padding: 8px 2px 9px; gap: 4px; font-size: 9px; border-radius: 12px; }
  .sidebar nav a.active { box-shadow: inset 0 -2px #ffaf70, 0 4px 18px #050b231f; }
  .sidebar nav a .nav-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .nav-icon svg { width: 30px; height: 30px; }
}
@media (max-width: 370px) {
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .sidebar nav { gap: 4px; }
  .sidebar nav a { font-size: 8px; }
  .space-planet { right: 3px; opacity: .7; }
}


/* The approved robot is a small articulated UI companion, not a video. */
.robot-companion {
  position: sticky; top: 12px; z-index: 8; display: grid;
  grid-template-columns: 138px minmax(0, 1fr); align-items: center;
  gap: 15px; padding: 8px 23px 8px 10px; margin: 0 0 19px;
  min-height: 124px; border: 1px solid #e1d8bc; border-radius: 20px;
  background: #fffbef; box-shadow: 0 5px 24px #1a303c10;
  transition: background .25s, border-color .25s;
}
.robot-stage { width: 138px; height: 109px; }
.robot-puppet { display: block; width: 100%; height: 100%; overflow: visible; }
.robot-head { transform-box: view-box; transform-origin: 146px 111px; }
.robot-name { display: block; color: #746545; font-size: 10px; font-weight: 700; letter-spacing: .6px; }
.robot-caption { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 6px 0 7px; color: #283b43; }
.robot-state { display: flex; gap: 6px; align-items: center; font-size: 10px; color: #667569; }
.robot-state i { width: 5px; height: 5px; border-radius: 50%; background: #479b83; }
.robot-sad-face, .robot-sparkles, .robot-blink { opacity: 0; }
.is-idle .robot-blink { animation: robot-blink 5.8s 1s infinite; }
.is-correct.robot-companion { border-color: #99bfa3; background: #f4f9ed; }
.is-correct .robot-caption { color: #286345; }
.is-correct .robot-sparkles { opacity: 1; }
.is-correct.is-reacting .robot-head { animation: robot-nod 1.65s ease-in-out both; }
.is-correct.is-reacting .robot-sparkles { animation: robot-spark 1.65s ease-out both; transform-origin: center; }
.is-incorrect.robot-companion { border-color: #d9b98a; background: #fff7e9; }
.is-incorrect .robot-head { transform: translate(0px, 5px) rotate(8deg); }
.is-incorrect .robot-sad-face { opacity: 1; }
.is-incorrect .robot-state i { background: #ca904c; }
.is-incorrect.is-reacting .robot-head { animation: robot-sigh 1.45s ease-in-out both; }
@keyframes robot-nod {
  0%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); }
  20%, 60% { transform: translateY(4px) rotate(5deg) scaleY(.91); }
  40%, 80% { transform: translateY(-1px) rotate(-2deg) scaleY(1.015); }
}
@keyframes robot-sigh {
  0% { transform: translate(0, 0) rotate(0); }
  40% { transform: translate(0, 7px) rotate(10deg); }
  70% { transform: translate(0, 4px) rotate(7deg); }
  100% { transform: translate(0, 5px) rotate(8deg); }
}
@keyframes robot-spark {
  0% { opacity: 0; transform: scale(.86); }
  25%, 65% { opacity: 1; transform: scale(1.07); }
  45%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes robot-blink { 0%, 43%, 47%, 100% { opacity: 0; } 44%, 46% { opacity: 1; } }
@media (max-width: 760px) {
  .robot-companion { top: 8px; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 6px 13px 6px 4px; min-height: 102px; margin-bottom: 14px; border-radius: 17px; }
  .robot-stage { width: 112px; height: 89px; }
  .robot-caption { font-size: 14px; margin: 5px 0; }
  .robot-name { font-size: 8px; letter-spacing: .2px; }
  .robot-state { font-size: 9px; }
}
@media (max-height: 420px) { .robot-companion { position: static; } }
@media (prefers-reduced-motion: reduce) {
  .robot-head, .robot-sparkles, .robot-blink { animation: none !important; }
  .robot-companion { transition: none; }
}


/* Reusable English pronunciation controls. */
.pronunciation { margin: 18px 0 22px; }
.listen-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.listen-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 16px; border: 1px solid #aac9c1; border-radius: 12px;
  background: #eaf3ed; color: #235d53; font-size: 13px; font-weight: 700;
  transition: background .15s, border-color .15s;
}
.listen-button svg { width: 21px; height: 21px; flex-shrink: 0; }
.listen-button:hover { background: #dcece3; border-color: #62988b; }
.listen-button.playing { background: #226b5e; border-color: #226b5e; color: white; }
.listen-slow { background: #fffdf6; border-color: #ddd6c4; color: #6b5d3a; }
.listen-slow:hover { background: #f4eedf; border-color: #b2a27c; }
.listen-slow span { font-size: 10px; border: 1px solid currentColor; padding: 1px 4px; border-radius: 5px; }
.listen-stop { min-height: 44px; padding: 8px; border: 0; background: none; color: #8a4932; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.listen-stop[hidden] { display: none; }
.pronunciation-status { display: block; margin-top: 8px; color: #6f7c76; font-size: 10px; line-height: 1.5; }
.is-playing .pronunciation-status { color: #236958; }
.phrase-card .pronunciation { margin: 16px 0; }
/* Interactive episode and learning journal. */
.series-shell { max-width: 860px; margin: 0 auto; }
.series-header,.series-progress,.series-tools,.series-quick-links { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.series-header { margin: 0 0 24px; font-size:11px; color:#5c6b70; }
.series-back { display:inline-flex; align-items:center; min-height:44px; color:#253f4a; font-size:13px; text-decoration:none; }
.series-progress { font-size:12px; margin-bottom:10px; font-weight:700; }
.series-shell .progress-track { height:5px; margin:0 0 24px; }
.series-tools { justify-content:flex-start; margin:24px 0 12px; border-top:1px solid #d8ddd7; padding-top:12px; }
.series-tools a,.series-quick-links a { font-size:12px; color:#38575b; min-height:44px; display:inline-flex; align-items:center; text-underline-offset:4px; }
.series-quick-links { justify-content:flex-start; margin-bottom:22px; }
.mission-goal { padding:12px 16px; background:#e7ede7; color:#365c52; font-size:12px; margin-bottom:14px; border-radius:10px; }
.scene-stage { position:relative; height:308px; isolation:isolate; overflow:hidden; background:#f7f4e9; border:1px solid #d9ddd5; border-radius:20px 20px 0 0; }
.scene-stage:after { content:""; position:absolute; z-index:-1; inset:54px 0 0; background:#f7f4e9; }
.scene-window { position:absolute; inset:0 0 auto; height:54px; overflow:hidden; background:radial-gradient(ellipse at 80% 30%,#244b72 0,transparent 50%),radial-gradient(circle at 25% 50%,#c9e6e1 0 1px,transparent 2px),radial-gradient(circle at 70% 24%,#c9e6e1 0 1px,transparent 2px),#142d41; background-size:auto,73px 63px,117px 91px,auto; z-index:-1; }
.scene-window i { display:block; width:130px; height:130px; position:absolute; right:12%; top:-80px; border-radius:50%; background:linear-gradient(140deg,#ee9268,#764366); box-shadow:0 0 60px #ffad6522; }
.scene-window b { position:absolute; width:230px; height:40px; border:1px solid #eeaf7199; border-radius:50%; top:0; right:5%; transform:rotate(-20deg); }
.scene-location { position:absolute; z-index:3; left:18px; top:16px; font-size:10px; color:#dae8e7; letter-spacing:1px; text-transform:uppercase; }
.scene-cast { position:absolute; inset:48px 12% 5px; display:flex; align-items:flex-end; justify-content:center; gap:20px; }
.scene-actor { width:28%; max-width:180px; text-align:center; mix-blend-mode:multiply; transform-origin:50% 95%; animation:scene-arrive .4s ease-out both; }
.scene-actor svg { display:block; width:100%; height:210px; mix-blend-mode:multiply; }
.scene-actor span { display:inline-block; padding:3px 8px; border-radius:10px; color:#55686a; background:#f7f4e9; font-size:9px; margin-top:2px; }
.scene-actor.speaking { animation:scene-arrive .4s ease-out both,scene-breathe 4s ease-in-out .4s infinite; }
.scene-actor.speaking span { color:#943e23; font-weight:700; }
.scene-actor.actor-robot { width:25%; }
.scene-actor.actor-robot svg { height:108px; }
.scene-set { position:absolute; inset:0; pointer-events:none; }
.scene-console { position:absolute; top:65px; left:5%; width:100px; padding:13px 6px; border:5px solid #577376; border-radius:6px; color:#9ee9d3; background:#17333d; font-size:8px; text-align:center; transform:rotate(-4deg); }
.scene-cargo { position:absolute; right:4%; bottom:42px; width:66px; height:63px; display:grid; place-items:center; border:5px solid #bca88a; border-radius:9px; background:#d8c9ad; color:#765f46; font-size:25px; transform:rotate(5deg); }
.is-cooled .scene-cargo { background:#c4e8df; border-color:#91b9b1; color:#23665d; }
.series-dialogue { background:#fffdf8; border:1px solid #d9ddd5; padding:28px 30px; border-radius:0 0 18px 18px; }
.series-dialogue h1 { font-size:28px; line-height:1.2; margin:8px 0 16px; letter-spacing:-.7px; }
.series-dialogue>p { line-height:1.7; }
.series-dialogue .scene-speaker { color:#994526; text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:1.4px; margin:0; }
.scene-line { color:#243f49; font-size:17px; }
.scene-description { color:#5b6d70; font-size:12px; margin-top:18px; }
.scene-detail { border-left:2px solid #b3c4ba; padding-left:14px; font-size:13px; color:#4b6264; }
.series-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }
.series-actions>span { max-width:250px; font-size:10px; color:#647571; line-height:1.6; }
.rule-card { border:1px solid #cdded7; background:#edf4ef; border-radius:12px; padding:22px; margin-top:22px; }
.rule-label { color:#3d6b5b; font-weight:800; font-size:10px; letter-spacing:1.1px; }
.rule-card h2 { font-size:20px; margin:10px 0 14px; }
.rule-card p { font-size:13px; line-height:1.75; }
.rule-card .rule-formula { font-size:23px; font-weight:750; color:#284e42; }
.rule-card .pronunciation { margin-bottom:0; }
.story-choices { display:grid; gap:10px; margin:24px 0 0; }
.story-choice { min-height:60px; display:flex; justify-content:space-between; gap:20px; padding:18px; border:1px solid #d7d6c7; border-radius:10px; color:#243f49; background:#f8f5eb; text-align:left; font:inherit; font-size:14px; cursor:pointer; }
.story-choice:hover,.story-choice.chosen { background:#e5f0e7; border-color:#648978; }
.choice-consequence { padding:16px; border-left:3px solid #6a9c80; color:#3a5e4d; background:#eff5ed; font-size:13px; }
.series-finish { padding:36px; border:1px solid #d8dfd5; border-radius:20px; background:#fffdf7; }
.series-finish h1 { font-size:34px; line-height:1.2; }
.series-finish>p { line-height:1.7; }
.finish-emblem { display:block; font-size:48px; color:#db7949; }
.story-memory { padding:20px; background:#eaf2e9; border-radius:12px; margin:24px 0; font-size:13px; }
.series-finish .btn { margin:12px 8px 0 0; }
.journal-list { display:grid; gap:18px; margin-bottom:28px; }
.journal-card { border:1px solid #d5dfd7; border-radius:15px; padding:22px; background:#fffdf8; }
.journal-card>.rule-card { border:0; padding:0; margin:0; background:none; }
.journal-card>h2 { font-size:21px; }
.journal-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:20px; padding-top:14px; border-top:1px solid #e1e4d8; }
.journal-bottom>span { font-size:11px; color:#566b61; }
.level-map { display:grid; gap:14px; margin-bottom:28px; }
.level-card { display:flex; align-items:center; gap:20px; border:1px solid #d9ddd4; border-radius:12px; padding:22px; background:#fffdf7; }
.level-card>b { flex:0 0 58px; font-size:20px; color:#b8542d; }
.level-card h2 { font-size:18px; margin:0 0 6px; }
.level-card p { font-size:13px; margin:0 0 7px; color:#52686b; line-height:1.6; }
.level-card span { font-size:10px; text-transform:uppercase; color:#5b7568; letter-spacing:.8px; }
.level-card>div { flex:1; }
.level-card.planned { background:#f3f3ec; }
.series-entry { padding:34px; display:flex; align-items:center; gap:30px; border-radius:22px; background:radial-gradient(ellipse at 100% 0,#31456e,transparent 65%),#19313e; color:#f5f1e4; margin-bottom:26px; overflow:hidden; }
.series-entry .eyebrow { color:#acd7cf; font-size:10px; }
.series-entry h2 { font-size:34px; line-height:1.12; margin:12px 0 16px; }
.series-entry p:not(.eyebrow) { max-width:500px; color:#c1d0d0; font-size:14px; line-height:1.75; }
.series-entry-links { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:22px; }
.series-entry-links>a:not(.btn) { color:#d6e5e1; font-size:12px; text-underline-offset:4px; min-height:44px; display:flex; align-items:center; }
.entry-planet { flex:0 0 150px; height:150px; border-radius:50%; background:linear-gradient(150deg,#da8b60,#9b3c5a); box-shadow:0 0 0 18px #ffffff08,0 0 0 19px #ffffff13; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:60px; font-weight:800; }
.entry-planet span { font-size:8px; letter-spacing:1px; }
.legacy-prototype { margin-top:24px; }
.legacy-prototype>summary { min-height:48px; cursor:pointer; color:#4e676c; padding:12px 0; font-size:13px; }
.series-warning { border-left:3px solid #bd713f; padding:14px; background:#fff0d9; color:#80502c; font-size:12px; line-height:1.7; }
.install-page { background:radial-gradient(ellipse at 10% 0,#2b4667,transparent 70%),#142d3b; padding:40px 20px; }
.install-card { max-width:590px; margin:auto; background:#faf8ef; border-radius:22px; padding:34px; }
.install-card h1 { font-size:36px; line-height:1.15; letter-spacing:-1px; margin:14px 0; }
.install-card p { font-size:14px; line-height:1.7; }
.install-icon { display:block; border-radius:22px; margin:18px 0 24px; }
.install-steps { padding-left:24px; margin:26px 0; }
.install-steps li { padding:0 0 20px 10px; }
.install-steps strong { display:block; font-size:14px; margin-bottom:4px; }
.install-steps span { display:block; color:#556c6d; font-size:12px; line-height:1.7; }
.install-notes { padding:20px; background:#eaf1e9; border-radius:12px; margin:0 0 22px; }
.install-notes p { font-size:12px; }
.footer a { color:inherit; text-underline-offset:3px; min-height:44px; display:inline-flex; align-items:center; }
@keyframes scene-arrive { from {opacity:0;transform:translateY(7px)} to {opacity:1;transform:translateY(0)} }
@keyframes scene-breathe { 0%,100% {transform:rotate(-.5deg)} 50% {transform:rotate(.5deg)} }
@media (max-width:760px) {
  .series-header { gap:6px; margin-bottom:16px; font-size:9px; }
  .series-progress { font-size:10px; gap:4px; }
  .scene-stage { height:248px; }
  .scene-location { left:12px; top:12px; font-size:8px; }
  .scene-cast { inset:44px 4% 6px; gap:3px; }
  .scene-actor { width:31%; }
  .scene-actor svg { height:166px; }
  .scene-actor.actor-robot { width:30%; }
  .scene-actor.actor-robot svg { height:84px; }
  .scene-console { width:75px; font-size:6px; top:40px; padding:8px 3px; }
  .scene-cargo { width:40px; height:44px; bottom:34px; right:2%; font-size:18px; }
  .series-dialogue { padding:22px 18px; }
  .series-dialogue h1 { font-size:25px; }
  .scene-line { font-size:15px; }
  .series-actions { align-items:stretch; flex-direction:column; gap:8px; }
  .series-actions .btn { justify-content:center; }
  .series-actions>span { max-width:none; text-align:center; font-size:9px; }
  .rule-card { padding:18px 14px; }
  .rule-card .rule-formula { font-size:21px; }
  .series-finish { padding:25px 20px; }
  .series-finish h1 { font-size:29px; }
  .journal-bottom { flex-wrap:wrap; }
  .level-card { flex-wrap:wrap; gap:12px; padding:18px; }
  .level-card>b { flex-basis:55px; }
  .level-card .btn { width:100%; justify-content:center; }
  .series-entry { padding:27px 23px; position:relative; }
  .series-entry>div:first-child { position:relative; z-index:1; }
  .series-entry h2 { font-size:32px; max-width:270px; }
  .series-entry p:not(.eyebrow) { max-width:300px; }
  .entry-planet { position:absolute; right:-63px; top:-35px; opacity:.17; }
  .series-entry-links { gap:8px; }
  .series-tools { gap:12px; }
  .series-tools a { font-size:10px; }
  .install-page { padding:18px 12px; }
  .install-card { padding:25px 20px; }
  .install-card h1 { font-size:31px; }
}
@media (prefers-reduced-motion:reduce) { .scene-actor,.scene-actor.speaking { animation:none; } }
@media (max-width: 760px) {
  .pronunciation { margin-top: 15px; margin-bottom: 20px; }
  .listen-buttons { gap: 7px; }
  .listen-button { padding: 10px 12px; font-size: 12px; gap: 7px; }
  .listen-button svg { width: 19px; height: 19px; }
  .pronunciation-status { font-size: 9px; }
}
.episode-route{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0 32px}
.episode-card{padding:24px;border:1px solid var(--line,#dedbd2);border-radius:20px;background:#fffdf8;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.episode-card.available{border-color:#c8a771}
.episode-card.finished{border-color:#79a79a}
.episode-card.locked{background:#f0efe9}
.episode-card h3{font-size:23px;line-height:1.2;margin:13px 0}
.episode-card p{color:#536875;line-height:1.65;margin:0 0 18px}
.episode-skills{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.episode-skills span{font-size:12px;line-height:1.4;background:#e7eeea;padding:6px 10px;border-radius:8px}
.episode-card .btn{margin-top:auto;white-space:normal}
.journal-episode{margin:28px 0}
.journal-episode-title{font-size:19px;margin:0 0 14px}
.finish-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.finish-links .btn{white-space:normal}
.token-answer .token:disabled{opacity:1;color:var(--ink);background:#e8f0e5;border-color:#a9c1ad}
.option:disabled{opacity:1}
@media(max-width:680px){.episode-route{grid-template-columns:1fr}.episode-card{padding:20px}.episode-card h3{font-size:22px}}