:root {
  --v:#c82e36; --v2:#961d2b; --v3:#ed5847; --vs:#fff0eb; --vs2:#f5d8d1;
  --g:#237358; --g2:#15573e; --gs:#e7f4eb; --r:#c82e36; --r2:#961d2b; --rs:#fff0eb;
  --y:#ffb23d; --y2:#956016; --ys:#fff2d7; --o:#aa5425; --o2:#994a1e;
  --ink:#251d23; --mu:#685e65; --ln:#eae0dd; --bg:#fffbf6;
  --ui:"Inter","Segoe UI",system-ui,sans-serif;
}
html,body { min-height:100%; }
body { background:#f5eee8; }
button,select,input,textarea { font:inherit; }
:focus-visible { outline:3px solid #9952cd; outline-offset:3px; }
.workspace { display:grid; grid-template-columns:minmax(200px,256px) minmax(360px,500px) minmax(205px,272px); align-items:center; justify-content:center; gap:clamp(16px,3vw,40px); padding:22px 24px; height:100dvh; background:#eeeae5; }
.demo-nav,.demo-detail { min-width:0; background:#f9f6f1; border:1px solid #ded6cf; border-radius:12px; padding:18px; max-height:100%; overflow:auto; }
.demo-nav { display:flex; flex-direction:column; align-self:center; }
.wordmark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-size:14px; font-weight:900; letter-spacing:-.025em; line-height:1.04; }
.mark { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:13px 13px 13px 3px; background:var(--v); color:#fff; font-family:var(--zh); font-size:21px; font-weight:800; }
.demo-heading { display:flex; justify-content:space-between; align-items:center; margin:22px 0 10px; gap:8px; }
.demo-heading h2 { font-size:17px; }
.demo-heading span { color:var(--mu); font-size:11px; }
.tour { color:var(--v); background:var(--vs); min-height:38px; border-radius:10px; text-align:left; padding:7px 10px; font-size:12px; font-weight:750; }
.tour.on { background:var(--v); color:white; }
.scen { padding:12px 0; margin:0 -4px; scrollbar-color:#d1aaa4 transparent; }
.scen.more { mask-image:none; }
.scen h4 { font-size:10px; margin-top:14px; }
.scen button { min-height:34px; color:var(--ink); font-size:12px; }
.scen button .n { background:var(--vs); color:var(--v2); }
.scen button.on,.scen .exchips button.on { box-shadow:none; }
.scen .exchips { margin-left:8px; }
.scen .exchips button { min-height:38px; background:var(--vs); }
.scen .devgrid { grid-template-columns:1fr; }
.sound-control { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--ln); padding-top:11px; gap:5px; font-size:12px; }
.sound-control small { display:block; color:var(--g2); }
.voice { margin-top:5px; }
.stage { width:min(100%,462px); justify-self:center; display:flex; flex-direction:column; height:min(930px,calc(100dvh - 44px)); }
.emulator-label { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 8px 8px; color:var(--mu); font-size:12px; }
.emulator-label strong { color:var(--v2); font-weight:750; text-align:right; }
.app-frame { position:relative; isolation:isolate; display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; background:var(--bg); border:8px solid #35282c; border-radius:36px; box-shadow:0 20px 65px #452a2038,0 0 0 1px #1e1518; }
.device-top { display:flex; align-items:center; justify-content:space-between; position:relative; min-height:34px; padding:0 17px; background:#fffdf9; font-size:11px; font-weight:750; }
.device-top i { position:absolute; left:50%; transform:translateX(-50%); width:80px; height:19px; background:#251d23; border-radius:24px; }
.device-bottom { display:grid; place-items:center; flex:0 0 14px; background:#fffdf9; }
.device-bottom i { width:98px; height:3px; border-radius:8px; background:#35282c; }
.huohuo { object-fit:contain; vertical-align:middle; }
.huohuo.wave { transform-origin:65% 85%; animation:mascot-wave 5s ease-in-out infinite; }
.huohuo.cheer { animation:mascot-cheer .75s cubic-bezier(.22,.7,.3,1) both; }
.huohuo.sad { animation:mascot-encourage .45s ease-out both; }
.huohuo.think { animation:mascot-think 3.4s ease-in-out infinite; }
@keyframes mascot-wave { 0%,24%,100% { transform:rotate(0); } 5%,15% { transform:rotate(-6deg); } 10%,20% { transform:rotate(4deg); } }
@keyframes mascot-cheer { 0%,100% { transform:translateY(0); } 38% { transform:translateY(-12px) rotate(-6deg); } 68% { transform:translateY(1px) scale(1.05,.94); } }
@keyframes mascot-encourage { 0%,100% { transform:rotate(0); } 42% { transform:rotate(-9deg); } }
@keyframes mascot-think { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.mission .huohuo { position:absolute; z-index:-1; width:clamp(104px,32%,148px); height:auto; right:10px; bottom:-2px; filter:drop-shadow(0 3px 10px #59142655); }
.mission-art { right:33px; top:-46px; }
.mission .overline,.mission h2,.mission p { max-width:70%; }
.info h2 { font-size:23px; }
.info li { color:var(--ink); }
.info .hint { border-style:solid; }
.navbtns { margin-top:16px; }
.navbtns button { box-shadow:none; padding:10px 6px; }
.navbtns #nextScen { background:var(--v); color:#fff; border-color:var(--v); }
.reset-demo { font-size:12px; color:var(--mu); text-decoration:underline; min-height:38px; margin-top:8px; }
.ma-head,.tg-head { min-height:61px; background:#fffdf9; border-bottom:1px solid var(--ln); }
.ma-head { display:grid; grid-template-columns:minmax(72px,1fr) auto minmax(72px,1fr); gap:5px; padding:0 13px; }
.ma-title { text-align:center; }
.ma-title b { font-size:15px; letter-spacing:-.035em; }
.ma-title small { color:var(--mu); }
.ma-close { justify-self:start; padding:8px 0; color:var(--v2); font-size:13px; }
.menu-trigger { justify-self:end; font-size:12px; font-weight:700; padding:10px; border-radius:10px; background:var(--vs); color:var(--v2); }
.tg-head .menu-trigger { flex:none; }
.tg-title { text-align:left; padding-left:6px; }
.tg-chat { background:linear-gradient(145deg,#f7e4d9,#faeee7 50%,#f2dcd4); padding:16px; }
.tg-date { color:#633b39; background:#edd5cd; }
.msg { border:1px solid #f1e4df; padding:12px 14px; }
.msg.out { background:#ffebe5; }
.ikb button { color:#6d2830; background:#f5d9d1; font-weight:750; }
.ikb button:hover { background:#ecc5bb; }
.ikb button.hot { color:#fff; background:var(--v); animation:none; }
.tg-input { padding:9px 12px max(12px,env(safe-area-inset-bottom)); }
.tg-menu { background:var(--v); min-height:44px; }
.app-body { background:var(--bg); }
.tabbar { background:#fffdfa; padding-bottom:max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--ln); }
.tab { min-height:49px; }
.btn { border-radius:14px; letter-spacing:0; text-transform:none; font-weight:750; min-height:46px; }
.btn-main,.btn-green,.btn-red,.btn-ghost { box-shadow:none; }
.btn-main:active:not(:disabled),.btn-green:active,.btn-red:active,.btn-ghost:active { transform:translateY(1px); box-shadow:none; }
.btn-main:disabled { background:#eee6e2; color:#6d6468; box-shadow:none; }
.rocket-home { padding:21px 18px 14px; }
.welcome { display:flex; align-items:end; justify-content:space-between; gap:8px; margin-bottom:13px; }
.welcome h1 { font-size:clamp(25px,5vw,33px); letter-spacing:-.07em; line-height:1.1; }
.welcome p { color:var(--mu); font-size:13px; margin-top:4px; }
.level-pill { background:var(--vs); color:var(--v2); border-radius:30px; padding:7px 10px; font-size:11px; font-weight:800; white-space:nowrap; }
.mission { position:relative; overflow:hidden; isolation:isolate; background:#ac2135; color:white; padding:18px; border-radius:14px; }
.mission .overline { font-size:11px; font-weight:800; letter-spacing:.06em; color:#ffe1d4; }
.mission h2 { font-size:27px; letter-spacing:-.05em; margin-top:5px; }
.mission p { color:#fff1eb; font-size:13px; margin:5px 0 14px; }
.mission .btn { background:#fff8ef; color:#8f1b2c; }
.today-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0; }
.today-stats div { min-width:0; padding:6px 8px 8px; border-bottom:1px solid var(--ln); }
.today-stats strong,.today-stats small { display:block; }
.today-stats strong { font-size:15px; }
.today-stats small { color:var(--mu); font-size:11px; margin-top:2px; }
.today-stats progress { display:block; width:100%; height:5px; margin-top:5px; accent-color:var(--v); }
.achievement-link { width:100%; display:flex; align-items:center; gap:9px; text-align:left; min-height:55px; padding:8px 11px; margin-top:10px; background:#fff2d7; border:1px solid #efd7a7; border-radius:12px; }
.achievement-link span:nth-child(2) { flex:1; }
.achievement-link strong,.achievement-link small { display:block; }
.achievement-link strong { font-size:13px; }
.achievement-link small { font-size:11px; color:var(--mu); margin-top:2px; }
#achievementStats { color:var(--mu); font-size:13px; margin-bottom:12px; }
#achievementList { list-style:none; display:grid; gap:7px; }
#achievementList li { display:flex; align-items:center; gap:10px; border-radius:12px; border:1px solid var(--ln); padding:9px; background:#f5f0ec; }
#achievementList li.earned { background:var(--ys); border-color:#efd7a7; }
#achievementList strong,#achievementList small { display:block; }
#achievementList small { color:var(--mu); font-size:12px; }
.result-reward { border-radius:12px; padding:10px 13px; background:var(--ys); color:#69400f; font-weight:750; font-size:13px; }
.join-form { display:grid; gap:7px; width:100%; }
.join-form input { border:1px solid var(--ln); border-radius:9px; min-height:43px; padding:8px; width:100%; }
.join-form small { color:var(--v2); }
.ch-hero,.acc-hero { background:#ac2135; box-shadow:none; border-radius:14px; }
.acc-hero::before,.acc-hero::after,.ch-hero::after { content:none; }
.l-prog i { background:var(--v); }
.wrow.new,.card-p,.l-foot,.rowcard { border-color:var(--ln); }
.rocket-home .hw-card,.rocket-home .exam { margin:0; width:100%; border-width:1px; border-radius:12px; background:#fff8e9; border-color:#ecddc0; }
.rocket-home .exam { margin-top:13px; }
.section-line { display:flex; align-items:center; justify-content:space-between; margin:17px 0 7px; gap:10px; }
.section-line h2 { font-size:17px; letter-spacing:-.03em; }
.section-line button { color:var(--v2); font-size:13px; font-weight:750; min-height:42px; }
.steps { display:grid; list-style:none; border:1px solid var(--ln); border-radius:12px; overflow:hidden; }
.steps li + li { border-top:1px solid var(--ln); }
.step { display:flex; width:100%; min-height:43px; align-items:center; gap:10px; padding:7px 10px; background:#fffdf9; text-align:left; }
.step .sign { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:#f2ebe7; flex:none; }
.step strong { flex:1; font-size:13px; }
.step small { font-size:11px; color:var(--mu); text-align:right; }
.step.done .sign { background:var(--gs); color:var(--g2); }
.step.current { background:var(--vs); }
.step.current .sign { background:var(--v); color:white; }
.search-words { padding:10px 16px 0; display:flex; flex-direction:column; gap:8px; }
.search-words input { width:100%; border:1px solid var(--ln); border-radius:12px; padding:11px 12px; min-height:44px; background:white; color:var(--ink); }
.search-words button { align-self:flex-start; min-height:40px; padding:8px 11px; border-radius:10px; font-size:13px; font-weight:700; color:var(--v2); background:var(--vs); }
.search-words button[aria-pressed=true] { background:var(--v); color:white; }
.empty-words { margin:10px 16px; padding:14px; color:var(--mu); font-size:13px; }
.wrow[hidden] { display:none; }
.wrow { width:100%; text-align:left; }
.text-opt { min-height:72px; }
.res { background:#fffbf6; }
.tg-head .huohuo { background:var(--vs); border-radius:12px; }
.lesson { background:#fffbf6; }
.ex-t { letter-spacing:-.035em; }
.opt,.mt,.tile { border-color:var(--ln); }
.l-foot,.fb { padding-bottom:max(14px,env(safe-area-inset-bottom)); }
.l-x { min-height:44px; min-width:44px; }
.sheet { max-height:min(84%,720px); overflow:auto; overscroll-behavior:contain; }
.res { justify-content:safe center; overflow:auto; }
.res .result-flag { background:var(--ys); color:#75450e; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:700; }
.access-label { margin:12px 16px; color:var(--mu); font-size:13px; }
dialog { width:min(390px,calc(100% - 26px)); margin:auto; border:1px solid var(--ln); border-radius:22px; background:#fffdf9; color:var(--ink); padding:17px; }
dialog::backdrop { background:#1e111980; }
.menu-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.menu-head h2 { font-size:20px; }
.menu-head button { min-width:42px; min-height:42px; font-size:25px; }
dialog label { display:block; font-size:13px; }
#mscen { display:block; position:static; opacity:1; width:100%; height:46px; border:1px solid var(--ln); border-radius:12px; background:#fff; color:var(--ink); padding:0 8px; margin:5px 0 14px; font-size:14px; }
dialog .btn { margin-bottom:8px; }
@media (max-width:1020px) {
  .workspace { grid-template-columns:minmax(200px,250px) minmax(340px,540px); }
  .demo-detail { display:none; }
}
@media (max-width:650px) {
  .workspace { display:block; padding:0; background:var(--bg); }
  .demo-nav { display:none; }
  .stage { position:relative; inset:auto; height:100dvh; width:100%; }
  .app-frame { border:0; border-radius:0; box-shadow:none; }
  .device-top,.device-bottom,.emulator-label { display:none; }
  .stage { width:100%; }
  .ma-head,.tg-head { padding-top:env(safe-area-inset-top); min-height:calc(56px + env(safe-area-inset-top)); }
  .ma-head { grid-template-columns:minmax(65px,1fr) auto minmax(65px,1fr); }
  .ma-title small { font-size:11px; }
}
@media (max-width:365px) {
  .rocket-home { padding-inline:12px; }
  .today-stats div { padding-inline:6px; }
  .ma-head { padding-inline:8px; }
  .menu-trigger { padding-inline:7px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* Rocket palette sampled visually from the school's homepage. */
:root {
  --v:#602a86; --v2:#42205e; --v3:#82529e; --vs:#f2ebf9; --vs2:#e5d9ed;
  --ink:#211a2b; --mu:#62576c; --ln:#e5dde9; --bg:#fdfbfe;
  --r:#b42139; --r2:#841a2e; --rs:#fbeef0;
  --g:#206048; --g2:#194c39; --gs:#e9f4ed; --ys:#fff3d9;
  --paper:#fff; --lilac:#f0e8f8;
}
body,.workspace { background:#ede9f1; }
.demo-nav,.demo-detail { background:#f8f5fa; border-color:#dfd5e6; }
.demo-nav .devgrid button { background:transparent; border:1px solid var(--ln); color:var(--mu); }
.demo-nav .devgrid button.on { background:var(--v); color:white; border-color:var(--v); }
.info .hint { color:var(--v2); background:var(--vs); border-color:var(--vs2); }
.wordmark .mark { background:var(--v); }
.device-top,.device-bottom,.ma-head,.tg-head,.tabbar,dialog { background:#fbf8fd; }
.app-frame { border-color:#2b2334; box-shadow:0 18px 48px #32233e26; }
.menu-trigger { background:transparent; border:1px solid var(--ln); }
.mission { color:var(--ink); background:var(--lilac); border:1px solid #e2d4ed; min-height:165px; padding:18px 16px; }
.mission .overline { color:var(--v2); letter-spacing:0; text-transform:none; }
.mission h2 { font-size:26px; }
.mission p { color:var(--mu); }
.mission .btn,.access-page > .btn { background:var(--v); color:white; box-shadow:0 3px 0 var(--v2); }
.mission .btn { font-size:14px; padding-inline:12px; }
.mission .huohuo { right:6px; bottom:4px; filter:drop-shadow(0 4px 4px #4c286327); }
.mission .huohuo.wave { animation:welcome-hop .88s cubic-bezier(.2,.8,.25,1) both; }
.mission:focus-within .huohuo,.mission:hover .huohuo { animation-name:launch-hop; }
.rocket-home .exam,.rocket-home .hw-card { background:#f9f5fb; border-color:var(--ln); }
.rocket-home .hw-card small,.rocket-home .hw-card .go { color:var(--mu); }
.step.current { background:var(--vs); }
.tg-chat { background:#eee5f4; }
.tg-date { color:var(--v2); background:#e1d4eb; }
.msg.out { background:#e7dcf1; }
.ikb button { color:var(--v2); background:#e5d8ee; }
.ikb button:hover { background:#dac8e7; }
.lesson,.res { background:var(--bg); }
.opt { transition:background .18s,border-color .18s,transform .16s; }
.opt:active:not(:disabled),.tab:active,.stamp-card.ready:active { transform:scale(.97); }
.fb.show { box-shadow:0 -7px 32px #35204314; }
.fb.show.ok .fb-row { animation:answer-in .34s cubic-bezier(.15,.75,.25,1) both; }
.fb.show.bad .fb-row { animation:answer-in .25s ease-out both; }
.huohuo.cheer { animation:launch-hop .76s cubic-bezier(.19,.66,.28,1) both; }
.huohuo.sad { animation:small-nod .5s ease-out both; transform-origin:50% 83%; }
.l-combo.show { animation:combo-in .42s cubic-bezier(.17,.9,.33,1.34) both; color:var(--v2); background:var(--vs2); }
.res .tiles3 .st { background:#f5eff9; border-color:var(--ln); }
.res .streak,.res .goaldone { background:var(--vs); color:var(--v2); border-color:var(--ln); }
.collection-shortcut { align-self:center; min-height:42px; padding:0 10px; font-size:13px; font-weight:750; border:1px solid var(--ln); border-radius:9px; color:var(--v2); }
.collection-shortcut span { margin-left:5px; color:var(--mu); font-size:11px; }
#achievementMenu { max-height:min(85dvh,680px); overflow:auto; }
#achievementList { grid-template-columns:repeat(2,minmax(0,1fr)); }
#achievementList .stamp-card { align-items:center; min-height:111px; flex-direction:column; justify-content:center; text-align:center; padding:8px; border-radius:10px; background:#f8f5fa; }
#achievementList .ready { background:var(--vs); border-style:dashed; border-color:#b899c8; }
#achievementList .earned { background:#fff5f2; border-color:#e5c4c7; }
.stamp-glyph { display:grid; place-items:center; height:36px; width:36px; border:1px solid #cfc0d8; color:var(--v2); font:700 21px var(--zh); border-radius:6px; }
.earned .stamp-glyph { color:var(--r); border:2px solid currentColor; transform:rotate(-5deg); }
.just-claimed .stamp-glyph { animation:stamp-drop .6s cubic-bezier(.17,.67,.32,1.15) both; }
.just-claimed { animation:stamp-paper .72s ease-out both; }
#stampClaim { margin:12px 0 0; }
#stampClaim[hidden] { display:none; }
.stamp-status { font-size:12px; color:var(--mu); margin-top:8px; }
.stamp-status:empty { display:none; }
.result-reward { color:var(--v2); background:var(--vs); border:1px solid var(--vs2); }
.access-page { padding:18px 16px; }
.access-page > h1 { font-size:26px; letter-spacing:-.04em; margin-bottom:12px; }
.access-page > h2 { font-size:17px; margin:17px 0 5px; }
.access-pass { position:relative; isolation:isolate; background:var(--lilac); border:1px solid var(--vs2); border-radius:13px; min-height:114px; padding:15px 86px 15px 15px; }
.access-pass p { color:var(--v2); font-size:12px; }
.access-pass h2 { font-size:20px; line-height:1.12; margin:5px 0; }
.access-pass strong { font-size:13px; color:var(--r); }
.access-pass img { position:absolute; right:7px; bottom:7px; z-index:-1; }
.access-contents { border-bottom:1px solid var(--ln); margin-top:8px; padding:0 2px; }
.access-contents summary { cursor:pointer; color:var(--v2); min-height:44px; padding:12px 0; font-size:14px; font-weight:700; }
.access-contents ul { font-size:13px; line-height:1.65; margin:0 0 10px 19px; }
.access-options div { padding:8px 0; border-bottom:1px solid var(--ln); }
.access-options dt { font-size:14px; font-weight:750; }
.access-options dd,.access-explain { font-size:13px; color:var(--mu); line-height:1.4; margin-top:3px; }
.access-explain { margin:12px 0; }
@keyframes welcome-hop { 0% { opacity:0; transform:translate(18px,20px) rotate(9deg); } 54% { opacity:1; transform:translate(-3px,-8px) rotate(-7deg); } 100% { transform:none; } }
@keyframes launch-hop { 0% { transform:none; } 18% { transform:translateY(4px) scale(1.07,.91); } 53% { transform:translateY(-16px) rotate(-7deg) scale(.98,1.05); } 78% { transform:translateY(2px) scale(1.05,.95); } 100% { transform:none; } }
@keyframes small-nod { 0%,100% { transform:none; } 40% { transform:translateY(2px) rotate(-10deg); } }
@keyframes answer-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes combo-in { from { opacity:0; transform:translateY(6px) scale(.82); } to { opacity:1; transform:none; } }
@keyframes stamp-drop { 0% { opacity:0; transform:translateY(-16px) rotate(-19deg) scale(1.55); } 54% { opacity:1; transform:rotate(-5deg) scale(.91); } 100% { transform:rotate(-5deg); } }
@keyframes stamp-paper { 45% { box-shadow:inset 0 0 0 2px #bb25384d; } 100% { box-shadow:inset 0 0 0 2px transparent; } }
@media (max-width:365px) {
  .mission .huohuo { width:100px; right:2px; }
  .collection-shortcut span { font-size:10px; }
}