:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #14213d;
  background: #eaf7ff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% 10%, #fff7c8 0 8%, transparent 27%), linear-gradient(145deg, #d9f4ff, #eefbff 46%, #dff8ee); }
.fx-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}.fx-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:3px;background:var(--color);box-shadow:0 0 10px var(--color);animation:particle-burst var(--duration) cubic-bezier(.16,.72,.28,1) forwards}.fx-ring{position:fixed;left:50%;top:50%;width:30px;height:30px;border:3px solid #7fffe1;border-radius:50%;box-shadow:0 0 28px #4ee8ca;transform:translate(-50%,-50%);animation:energy-ring .8s ease-out forwards}
button, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { height: 72px; padding: 0 28px; display: grid; grid-template-columns: 1fr minmax(260px, 430px) 1fr; align-items: center; gap: 24px; background: rgba(255,255,255,.92); border-bottom: 1px solid #cde4ef; backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; color: #10274a; font-size: 1.2rem; font-weight: 850; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: white; background: #1769e0; box-shadow: 0 6px 16px #1769e040; }
.brand-mark span { color: #ffe66d; font-size: .62em; }
.progress-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: .88rem; color: #47617c; }
.progress-track { height: 9px; background: #dceaf2; border-radius: 99px; overflow: hidden; }
.progress-fill { width: 33%; height: 100%; background: linear-gradient(90deg,#20c997,#57dfb3); border-radius: inherit; transition: width .4s ease; }
.top-actions { justify-self: end; display:flex; align-items:center; gap:10px; }
.stars { padding: 9px 14px; border-radius: 99px; background: #fff8d8; color: #7a5c00; }
.top-reset { border:0; background:transparent; color:#567188; font-weight:700; padding:8px; border-radius:9px; }
.top-reset:hover { background:#edf5f9; color:#1769e0; }
.catalog-top-btn{min-height:38px;padding:0 13px;border:1px solid #b8d9ee;border-radius:11px;color:#125a91;background:linear-gradient(135deg,#e5f7ff,#eafbf4);font-weight:850}.catalog-top-btn:hover{border-color:#68b8df;transform:translateY(-1px);box-shadow:0 8px 18px #1769e018}
.app-shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.map-panel { padding: 32px 16px 90px 22px; border-right: 1px solid #c7e2ed; background: linear-gradient(180deg, rgba(22,112,185,.96), rgba(24,148,161,.94)); color: white; position: relative; overflow: hidden; }
.map-panel::after { content:""; position: absolute; width: 260px; height: 160px; border-radius: 50%; background: #84e0a5; bottom: -95px; left: 25px; box-shadow: 0 -12px 0 #62c890; opacity: .65; }
.map-heading p { margin: 0 0 6px; color: #bdeeff; font-weight: 750; }
.map-heading h1 { margin: 0; font-size: 2rem; }
.map-heading span { display: block; margin-top: 8px; line-height: 1.5; color: #dcf8ff; font-size: .9rem; }
.chapter-picker { display:block; margin-top:16px; color:#c9f5ff; font-size:.78rem; font-weight:750; }
.chapter-picker select { width:100%; margin-top:6px; padding:9px 10px; border:1px solid #ffffff55; border-radius:10px; color:white; background:#0b5f8899; outline:none; }
.chapter-picker option { color:#163a56; background:white; }
.open-catalog-btn{width:100%;margin-top:11px;padding:10px 12px;border:1px solid #bdf5ea77;border-radius:11px;color:#f1fffc;background:#ffffff16;font-weight:850}.open-catalog-btn:hover{background:#ffffff28}
.lesson-map { margin-top: 26px; padding-right:6px; max-height:calc(100vh - 285px); overflow-y:auto; position: relative; z-index: 1; scrollbar-width:thin; scrollbar-color:#ffffff66 transparent; }
.week-label { padding:14px 10px 7px; color:#c9f5ff; font-size:.78rem; font-weight:850; letter-spacing:.06em; }
.lesson-node { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 12px; border: 0; border-radius: 16px; color: white; background: transparent; }
.lesson-node.active { background: white; color: #123866; box-shadow: 0 12px 30px #0a426955; }
.lesson-node:not(.active):not(.locked):hover { background: #ffffff22; }
.lesson-node.locked { color: #d2e9ef; cursor: not-allowed; opacity: .78; }
.node-index { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #55d9ae; color: #063d38; font-weight: 900; }
.locked .node-index { background: #ffffff2b; color: white; }
.lesson-node strong, .lesson-node small { display: block; }
.lesson-node strong { font-size: .94rem; margin-bottom: 4px; }
.lesson-node small { opacity: .72; }
.node-status { font-size: .74rem; white-space:nowrap; }
.map-line { height: 20px; width: 2px; background: #c7f3ff77; margin-left: 33px; }
.map-tip { position: absolute; left: 22px; right: 22px; bottom: 26px; padding: 13px; border: 1px solid #ffffff33; border-radius: 14px; background: #063f5e38; font-size: .86rem; line-height: 1.5; z-index: 1; }
.workspace { padding: 26px clamp(20px,3vw,44px) 44px; max-width: 1400px; width: 100%; margin: 0 auto; }
.mission-card { display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 20px 24px; border: 1px solid #cfe4ed; border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px #5b8ca316; }
.eyebrow { color: #1769e0; font-weight: 850; letter-spacing: .08em; }
.mission-card h2 { margin: 5px 0 8px; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.mission-card p { margin: 0; color: #52677a; line-height: 1.6; }
.mission-checks { flex: 0 0 auto; display: grid; gap: 8px; min-width: 170px; color: #60778a; font-size: .9rem; }
.mission-checks .done { color: #16835f; font-weight: 750; }
.learning-cycle{margin-top:14px;border:1px solid #c5dde8;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 30px #51758a14}.learning-cycle-nav{display:grid;grid-template-columns:repeat(4,1fr);background:#edf6fa;border-bottom:1px solid #d6e7ed}.learning-cycle-nav button{min-height:72px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:9px;padding:10px 14px;border:0;border-right:1px solid #d6e7ed;text-align:left;color:#627b8d;background:transparent}.learning-cycle-nav button:last-child{border-right:0}.learning-cycle-nav button:hover{background:#f8fdff}.learning-cycle-nav button.active{color:#153f63;background:white;box-shadow:inset 0 -3px #1b9e8c}.learning-cycle-nav button.done{color:#13745f;background:#ecfbf5}.learning-cycle-nav button.mastered{color:#795900;background:#fff7ce;box-shadow:inset 0 -3px #f0c52e}.learning-cycle-nav button>span{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;align-self:center;border-radius:50%;color:white;background:#89a8ba;font-weight:900}.learning-cycle-nav button.active>span{background:#1878bd}.learning-cycle-nav button.done>span{background:#21ae87}.learning-cycle-nav button.mastered>span{color:#624800;background:#ffd84f}.learning-cycle-nav strong,.learning-cycle-nav small{display:block}.learning-cycle-nav strong{font-size:.84rem}.learning-cycle-nav small{margin-top:2px;font-size:.68rem;font-weight:500;opacity:.78}
.learning-phase-panel{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(250px,1.05fr) minmax(260px,1.2fr) auto;align-items:center;gap:18px;padding:18px 20px;background:linear-gradient(120deg,#fff,#f5fbfd)}.learning-phase-copy>span{color:#137fa1;font-size:.72rem;font-weight:900;letter-spacing:.06em}.learning-phase-copy h3{margin:4px 0;font-size:1.05rem}.learning-phase-copy p{margin:0;color:#668094;font-size:.78rem;line-height:1.45}.learning-phase-code{max-height:116px;margin:0;padding:12px 14px;overflow:auto;border-radius:12px;color:#dcf8ff;background:#132d49;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.learning-phase-code:empty{display:none}.learning-phase-points{margin:0;padding-left:20px;color:#526d80;font-size:.78rem;line-height:1.65}.learning-phase-points li::marker{color:#1ba587}.learning-phase-action{min-width:130px;min-height:42px;padding:0 14px;border:0;border-radius:11px;color:white;background:linear-gradient(135deg,#1675c1,#159e8c);font-weight:850;box-shadow:0 7px 16px #1676a526}.learning-phase-action:hover{filter:brightness(1.06);transform:translateY(-1px)}
.story-card{display:grid;grid-template-columns:auto minmax(0,1fr) 150px;align-items:center;gap:16px;margin-top:14px;padding:16px 18px;border:1px solid #bfcfea;border-radius:18px;color:#eaf4ff;background:linear-gradient(125deg,#172c58,#284a78 58%,#176f83);box-shadow:0 12px 30px #15355d22;overflow:hidden;position:relative}.story-card::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-75px;top:-95px;background:#6be1d51a}.story-emblem{width:54px;height:54px;display:grid;place-items:center;border:1px solid #fff5a966;border-radius:16px;color:#fff3a2;background:#ffffff12;font-size:1.9rem;box-shadow:inset 0 0 24px #fff4a31a}.story-kicker{font-size:.76rem;font-weight:850;letter-spacing:.1em;color:#8ee6df}.story-copy h3{margin:3px 0 5px;font-size:1.08rem;color:white}.story-copy p{margin:0;line-height:1.5;color:#d3e5f5;font-size:.88rem}.story-objective{display:flex;gap:8px;margin-top:8px;font-size:.8rem}.story-objective strong{color:#fff29b}.story-objective span{color:#dcecff}.story-progress{position:relative;z-index:1}.story-progress>span{display:block;text-align:right;color:#fff;font-weight:850;font-size:.8rem}.story-progress>div{height:7px;margin:7px 0;border-radius:99px;background:#ffffff26;overflow:hidden}.story-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffe66d,#55e2b7);transition:width .35s ease}.story-progress small{display:block;text-align:right;color:#c9ecf0;font-size:.72rem}
.lesson-tools { display:grid; grid-template-columns:1fr minmax(260px,.65fr); gap:14px; margin-top:14px; }
.concept-card,.input-card { min-height:78px; padding:14px 18px; border:1px solid #cfe4ed; border-radius:16px; background:rgba(255,255,255,.78); }
.concept-card span,.input-card span { display:block; color:#1769e0; font-size:.78rem; font-weight:850; letter-spacing:.06em; }
.concept-card strong { display:block; margin-top:4px; }.concept-card p { margin:4px 0 0; color:#607487; font-size:.86rem; line-height:1.45; }
.input-card input { width:100%; margin-top:6px; padding:9px 11px; border:1px solid #b9d2df; border-radius:9px; background:white; color:#173a5e; outline:none; }.input-card input:focus{border-color:#1769e0;box-shadow:0 0 0 3px #1769e018}.input-card small{display:block;margin-top:4px;color:#74899a}
.input-card.hidden-input { opacity:.58; }.input-card.hidden-input input { pointer-events:none; background:#eef4f7; }
.function-guide{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(220px,.8fr) minmax(320px,1.5fr);align-items:center;gap:18px;margin-top:14px;padding:17px 20px;border:1px solid #9bd7cf;border-radius:18px;background:linear-gradient(125deg,#f2fffb,#edf8ff);box-shadow:0 10px 26px #2d8c8b12}.function-guide-heading>span{color:#118574;font-size:.74rem;font-weight:900;letter-spacing:.08em}.function-guide-heading h3{margin:4px 0;font-size:1rem}.function-guide-heading p{margin:0;color:#668094;font-size:.78rem;line-height:1.45}.function-guide>code{display:block;padding:14px;border-radius:12px;color:#eafcff;background:#153653;font:800 .9rem/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:inset 0 0 0 1px #78e2cd35}.function-guide-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.function-part{padding:9px 11px;border:1px solid #cce6e6;border-radius:11px;background:#fff;color:#47657a;font-size:.76rem}.function-part strong{display:block;margin-bottom:3px;color:#126da0;font-size:.72rem}
.coding-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); gap: 20px; margin-top: 20px; }
.editor-card, .result-card { border-radius: 20px; overflow: hidden; background: white; border: 1px solid #cbdde8; box-shadow: 0 16px 38px #557a921c; }
.panel-header { height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #63768b; background: #f7fbfd; border-bottom: 1px solid #dce9f0; font-size: .86rem; }
.editor-meta{display:flex;align-items:center;gap:10px}.draft-status{color:#6f8395;font-size:.76rem}.draft-status.saving{color:#a36c00}.draft-status.saved{color:#16835f}
.dot { display:inline-block; width:11px; height:11px; margin-right:6px; border-radius:50%; }.red{background:#ff6b6b}.yellow{background:#ffd43b}.green{background:#51cf66}
.text-btn { border: 0; background: transparent; color: #1769e0; font-weight: 700; }
.editor-wrap { display: grid; grid-template-columns: 45px 1fr; min-height: 350px; background: #102039; }
.line-numbers { margin: 0; padding: 21px 13px; overflow:hidden; color: #5f7898; text-align: right; font: 15px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; user-select: none; border-right: 1px solid #29405d; }
#codeEditor { width: 100%; min-height: 350px; resize: none; border: 0; outline: 0; padding: 20px; color: #e6f0ff; caret-color: #5ce1b8; background: #102039; font: 15px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; }
.editor-actions { display: flex; justify-content: space-between; align-items:center; gap:12px; padding: 14px 16px; background: #f7fbfd; border-top: 1px solid #dce9f0; }
.keyboard-help{color:#73889a;font-size:.74rem;text-align:center}
.editor-wrap.enhanced-editor{display:block;height:350px;min-height:350px}
.enhanced-editor>.line-numbers,.enhanced-editor>#codeEditor{display:none}
.code-editor-host{height:100%;min-width:0;text-align:left}
.code-editor-host .cm-editor{font-size:15px;line-height:1.75}
.code-editor-host .cm-tooltip{z-index:15}
.secondary-btn, .run-btn { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; font-weight: 800; }
.secondary-btn { color: #225176; background: #e7f3fa; }
.run-btn { color: white; background: linear-gradient(135deg,#1769e0,#0d90c7); box-shadow: 0 8px 18px #1769e035; }
.run-btn{position:relative;overflow:hidden}.run-btn::after{content:"";position:absolute;top:-60%;left:-35%;width:25%;height:220%;background:#ffffff55;transform:rotate(25deg);transition:left .45s ease}.run-btn:hover::after{left:120%}.run-btn:disabled{opacity:.78;cursor:wait}.run-btn:disabled .run-icon{display:inline-block;animation:run-spin .7s linear infinite}
.run-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.run-btn:active { transform: translateY(0); }
.state { padding: 5px 9px; border-radius: 99px; }.state.idle{background:#e8eef2}.state.running{background:#fff2b8;color:#775900}.state.success{background:#d9f8e9;color:#08724e}.state.error{background:#ffe0e0;color:#a32020}
.robot-stage { min-height: 285px; display: grid; place-items: center; position: relative; background: linear-gradient(#dff7ff 0 67%, #b8ead2 67%); overflow: hidden; }
.robot-stage::before, .robot-stage::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; background:#fff8af; top:20px; right:20px; opacity:.7; }.robot-stage::after{width:160px;height:55px;background:white;top:54px;left:-45px;filter:blur(1px)}
.speech-bubble { position: absolute; top: 20px; left: 22px; right: 115px; min-height: 54px; padding: 14px 16px; border-radius: 16px 16px 4px 16px; background: white; color: #294766; box-shadow: 0 8px 18px #46748a20; z-index: 2; line-height: 1.45; }
.robot { position: relative; margin-top: 66px; z-index: 2; transition: transform .35s ease; }.robot.happy{animation:bounce .55s ease 2}
.robot.power-up{animation:power-up .75s ease both;filter:drop-shadow(0 0 18px #56e5c5)}
.antenna { width: 5px; height: 22px; margin: auto; background: #405e79; position: relative; }.antenna i{position:absolute;width:13px;height:13px;border-radius:50%;background:#ffcf33;top:-8px;left:-4px}
.robot-head { width: 112px; height: 82px; border: 7px solid #314b68; border-radius: 32px; background: #ebfaff; display:flex; align-items:center; justify-content:center; gap:24px; position:relative; }.eye{width:12px;height:18px;background:#1769e0;border-radius:50%}.robot-head b{position:absolute;width:30px;height:12px;border-bottom:4px solid #2aa981;border-radius:50%;bottom:12px}
.robot-body { width: 92px; height: 72px; margin: -2px auto 0; border: 7px solid #314b68; border-radius: 20px 20px 28px 28px; background: #2f8fe8; display:grid;place-items:center;color:#fff27a;font-weight:900; }
.stage-floor { position:absolute;bottom:20px;width:170px;height:18px;border-radius:50%;background:#5cae8870;filter:blur(2px)}
.console { min-height: 102px; padding: 13px 16px; background: #0e1b2c; color: #d8e6f5; }.console-title{font-size:.75rem;color:#7990a9;margin-bottom:8px}.console pre{margin:0;white-space:pre-wrap;font:14px/1.55 ui-monospace,monospace}
.feedback { margin-top: 16px; padding: 14px 18px; border-radius: 14px; line-height: 1.5; }.feedback.hint{background:#fff6cf;color:#6d5200;border:1px solid #f2dc79}.feedback.error{background:#ffe8e8;color:#8f2727;border:1px solid #ffb9b9}.hidden{display:none!important}
.ai-tutor{margin-top:14px;padding:18px;border:1px solid #b8d4ff;border-radius:18px;background:linear-gradient(135deg,#f5f9ff,#eefbf8);box-shadow:0 10px 28px #1769e012;color:#253f5d}.ai-tutor-header{display:flex;align-items:center;gap:11px}.ai-tutor-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#1769e0,#20b78a);color:#fff;font-weight:900;letter-spacing:-.05em}.ai-tutor-header>div:nth-child(2){min-width:0}.ai-tutor-header span{font-size:.72rem;font-weight:900;color:#4b739d}.ai-tutor-header h3{margin:2px 0 0;font-size:1.05rem;color:#183d66}.ai-tutor-mode{margin-left:auto;padding:5px 9px;border-radius:999px;background:#dceaff;color:#1557ad;white-space:nowrap}.ai-tutor-summary{margin:14px 0 8px;line-height:1.65;font-weight:750}.ai-tutor-evidence{margin:0;padding-left:21px;color:#46617c;line-height:1.65}.ai-tutor-next{margin-top:12px;padding:12px 14px;border-radius:12px;background:#fff;border-left:4px solid #20b78a}.ai-tutor-next strong{color:#087557}.ai-tutor-next p{margin:4px 0 0;line-height:1.55}.ai-tutor.loading{opacity:.82}.ai-tutor.loading .ai-tutor-avatar{animation:aiTutorPulse 1s ease-in-out infinite alternate}@keyframes aiTutorPulse{to{transform:scale(1.08);box-shadow:0 0 0 8px #1769e015}}
.modal { position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#0c2849aa;backdrop-filter:blur(6px);z-index:30}.modal-card{width:min(440px,100%);padding:32px;text-align:center;border-radius:26px;background:white;box-shadow:0 26px 80px #001a3d55}.celebration{width:78px;height:78px;margin:-4px auto 12px;display:grid;place-items:center;border-radius:50%;background:#fff2a8;color:#e29b00;font-size:2.8rem;animation:pop .45s ease}.modal-card>p:first-of-type{margin:0;color:#13835d;font-weight:850}.modal-card h2{margin:6px 0 10px;font-size:1.7rem}.earned-stars{font-size:1.8rem;letter-spacing:.18em}.modal-copy{color:#5f7083;line-height:1.6}.modal-card .run-btn{width:100%;margin-top:8px}
.catalog-modal{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px;background:#06162fe8;backdrop-filter:blur(14px)}
.catalog-shell{width:min(1380px,100%);height:min(900px,calc(100vh - 32px));display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid #73d9d15c;border-radius:26px;background:#f4fbff;box-shadow:0 30px 110px #000a}
.catalog-header{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) minmax(260px,420px);align-items:center;gap:28px;padding:22px 70px 22px 28px;color:white;background:radial-gradient(circle at 78% -40%,#43e7c955,transparent 45%),linear-gradient(120deg,#102b58,#125f78)}
.catalog-kicker{color:#74ead4;font-size:.72rem;font-weight:900;letter-spacing:.18em}.catalog-header h2{margin:4px 0 3px;font-size:clamp(1.45rem,3vw,2rem)}.catalog-header p{margin:0;color:#bfd9e9;font-size:.86rem}
.catalog-search span{display:block;margin-bottom:6px;color:#c7eaf0;font-size:.75rem;font-weight:800}.catalog-search input{width:100%;height:44px;padding:0 15px;border:1px solid #bdece366;border-radius:12px;outline:none;color:#173a5e;background:#f8feff}.catalog-search input:focus{border-color:#5ee3c9;box-shadow:0 0 0 4px #5ee3c922}
.catalog-close{position:absolute;right:20px;top:20px;width:40px;height:40px;border:1px solid #ffffff33;border-radius:50%;color:white;background:#ffffff0d;font-size:1.5rem}.catalog-close:hover{background:#ffffff22}
.catalog-body{min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr)}
.catalog-worlds{overflow-y:auto;padding:18px;background:linear-gradient(180deg,#e8f6fb,#e9f8f3);border-right:1px solid #cce1e9;scrollbar-width:thin}
.catalog-world-card{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:9px;padding:11px;border:1px solid transparent;border-radius:15px;text-align:left;color:#234b68;background:#ffffffad;transition:.2s ease}.catalog-world-card:hover{border-color:#9acfe0;transform:translateX(2px)}.catalog-world-card.active{color:white;border-color:#49cfb7;background:linear-gradient(135deg,#1769b7,#168b91);box-shadow:0 10px 24px #17688735}.catalog-world-rune{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;color:#0a6a65;background:#d8f7ed;font-size:1.35rem;font-weight:900}.active .catalog-world-rune{color:#fff5a8;background:#ffffff1d}.catalog-world-card strong,.catalog-world-card small{display:block}.catalog-world-card strong{font-size:.9rem}.catalog-world-card small{margin-top:3px;opacity:.68;font-size:.72rem}.catalog-world-count{font-size:.72rem;font-weight:850;white-space:nowrap}
.catalog-detail{min-width:0;overflow-y:auto;padding:24px 28px 34px;scrollbar-width:thin}.catalog-detail-heading{position:sticky;top:-24px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-24px -28px 18px;padding:22px 28px 16px;border-bottom:1px solid #d8e8ee;background:#f4fbfff2;backdrop-filter:blur(10px)}.catalog-detail-heading span{color:#1674a8;font-size:.74rem;font-weight:900;letter-spacing:.08em}.catalog-detail-heading h3{margin:3px 0;font-size:1.55rem}.catalog-detail-heading p{margin:0;max-width:720px;color:#60798d;font-size:.84rem;line-height:1.5}.catalog-world-progress{min-width:130px;text-align:right}.catalog-world-progress strong{display:block;color:#137c69;font-size:.86rem}.catalog-world-progress>span{display:block;width:130px;height:8px;margin-top:8px;overflow:hidden;border-radius:99px;background:#d9e9ef}.catalog-world-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#21bfa0,#ffe06a);transition:width .3s ease}
.catalog-week{margin-top:18px}.catalog-week:first-child{margin-top:0}.catalog-week h4{margin:0 0 9px;color:#688198;font-size:.77rem;letter-spacing:.08em}.catalog-week-lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}.catalog-lesson{min-height:72px;display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #d1e3eb;border-radius:14px;text-align:left;color:#264b68;background:white}.catalog-lesson:hover{border-color:#6ebddd;box-shadow:0 8px 20px #3a76901c;transform:translateY(-1px)}.catalog-lesson.current{border-color:#247ad2;box-shadow:inset 0 0 0 1px #247ad2}.catalog-lesson.done{border-color:#8dd9c5;background:#f1fff9}.catalog-lesson-index{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#126a61;background:#dff7ef;font-size:.78rem;font-weight:900}.catalog-lesson strong,.catalog-lesson small{display:block}.catalog-lesson strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.83rem}.catalog-lesson small{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#758a9b;font-size:.7rem}.catalog-lesson-status{color:#159272;font-size:.72rem;font-weight:900}.catalog-empty{padding:70px 20px;text-align:center;color:#728799}
.catalog-shell{animation:modal-rise .35s cubic-bezier(.2,.8,.2,1) both}
@media(max-width:900px){.catalog-modal{padding:0}.catalog-shell{height:100vh;border:0;border-radius:0}.catalog-header{grid-template-columns:1fr;padding:17px 58px 17px 18px;gap:12px}.catalog-header p{display:none}.catalog-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.catalog-worlds{display:flex;gap:8px;padding:10px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid #cce1e9}.catalog-world-card{min-width:190px;margin:0}.catalog-world-card small,.catalog-world-count{display:none}.catalog-detail{padding:18px}.catalog-detail-heading{top:-18px;margin:-18px -18px 14px;padding:16px 18px}.catalog-detail-heading p{display:none}.catalog-world-progress{min-width:100px}.catalog-world-progress>span{width:100px}.catalog-week-lessons{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
@media(max-width:600px){.catalog-top-btn{padding:0 10px;font-size:0}.catalog-top-btn::after{content:'🗺️';font-size:1rem}.catalog-header{padding-top:12px}.catalog-search input{height:40px}.catalog-detail-heading h3{font-size:1.2rem}.catalog-world-progress{display:none}.catalog-week-lessons{grid-template-columns:1fr}}
.settings-card{position:relative;text-align:left}.settings-card>p:first-of-type,.settings-card h2{text-align:center}.settings-card label{display:block;margin-top:15px;color:#35516e;font-size:.86rem;font-weight:800}.settings-card label>input:not([type="checkbox"]){width:100%;margin-top:7px;padding:12px;border:1px solid #b9d2df;border-radius:10px;outline:none}.settings-card label>input:focus{border-color:#1769e0;box-shadow:0 0 0 3px #1769e018}.mode-row{display:flex!important;align-items:center;gap:8px}.mode-row input{width:18px;height:18px}.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.settings-actions .run-btn{margin:0}.modal-close{position:absolute;top:14px;right:16px;border:0;background:transparent;color:#607487;font-size:1.5rem}.server-status{margin-top:14px;padding:10px 12px;border-radius:10px;background:#edf5f9;color:#52677a;font-size:.84rem}.server-status.ok{background:#d9f8e9;color:#08724e}.server-status.bad{background:#ffe8e8;color:#8f2727}
@keyframes bounce{50%{transform:translateY(-13px) rotate(2deg)}}@keyframes pop{from{transform:scale(.4) rotate(-20deg);opacity:0}}
@keyframes rune-glow{50%{color:#fff;background:#fff2a825;box-shadow:inset 0 0 26px #fff4a344,0 0 22px #68e4d055;transform:translateY(-2px)}}@keyframes progress-shine{from{transform:translateX(-150%)}to{transform:translateX(400%)}}@keyframes story-arrive{from{opacity:.3;transform:translateY(-8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}@keyframes run-spin{to{transform:rotate(360deg)}}@keyframes power-up{35%{transform:translateY(-16px) scale(1.08)}70%{transform:translateY(-4px) scale(.98)}100%{transform:none}}@keyframes particle-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--spin))}}@keyframes energy-ring{to{width:min(90vw,700px);height:min(90vw,700px);opacity:0;border-width:1px}}@keyframes unlock-flash{0%{box-shadow:0 0 0 #ffe66d00}45%{box-shadow:0 0 0 4px #ffe66d99,0 0 30px #ffe66d}100%{box-shadow:0 0 0 #ffe66d00}}@keyframes modal-rise{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:none}}
.story-emblem{animation:rune-glow 2.4s ease-in-out infinite}.story-progress i{position:relative}.story-progress i::after{content:"";position:absolute;inset:0;width:35%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:progress-shine 2s linear infinite}.story-card.story-enter{animation:story-arrive .5s ease both}.lesson-node.just-unlocked{animation:unlock-flash 1.2s ease}.modal:not(.hidden) .modal-card{animation:modal-rise .45s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.fx-layer{display:none}}
@media (max-width: 900px){.topbar{grid-template-columns:1fr auto}.progress-summary{display:none}.app-shell{grid-template-columns:1fr}.map-panel{padding:18px 20px;border-right:0}.map-heading span,.map-tip{display:none}.map-heading{display:grid;grid-template-columns:1fr minmax(170px,.8fr);align-items:end;gap:12px}.map-heading p,.map-heading h1{grid-column:1}.map-heading h1{font-size:1.35rem}.chapter-picker{grid-column:2;grid-row:1/3;margin:0}.lesson-map{margin-top:14px;display:flex;gap:8px;overflow:auto}.map-line{display:none}.lesson-node{min-width:230px}.coding-grid{grid-template-columns:1fr}.workspace{padding-top:18px}.story-card{grid-template-columns:auto 1fr}.story-progress{grid-column:2}}
@media (max-width: 900px){.lesson-map{max-height:none}.week-label{display:none}.lesson-tools{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.learning-phase-panel{grid-template-columns:1fr 1fr}.learning-phase-action{justify-self:end}.learning-cycle-nav button{padding:9px}.learning-cycle-nav button>span{width:28px;height:28px}.learning-cycle-nav small{display:none}}
@media (max-width:900px){.function-guide{grid-template-columns:1fr 1fr}.function-guide-parts{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width: 600px){.topbar{height:62px;padding:0 14px}.brand>span:last-child,.top-reset{display:none}.app-shell{min-height:calc(100vh - 62px)}.mission-card{align-items:flex-start;flex-direction:column}.mission-checks{min-width:0}.workspace{padding:14px 12px 28px}.lesson-tools{grid-template-columns:1fr}.coding-grid{gap:14px}.editor-wrap,#codeEditor{min-height:300px}.robot-stage{min-height:260px}.panel-header{font-size:.8rem}.draft-status{display:none}.story-card{grid-template-columns:1fr;padding:16px}.story-emblem{display:none}.story-progress{grid-column:1}.story-progress>span,.story-progress small{text-align:left}}
@media (max-width:600px){.editor-wrap.enhanced-editor{height:320px;min-height:320px}.keyboard-help{display:none}}
@media(max-width:600px){.learning-cycle-nav button{display:flex;justify-content:center;min-height:52px;padding:8px}.learning-cycle-nav button>span{width:30px;height:30px}.learning-cycle-nav strong{display:none}.learning-phase-panel{grid-template-columns:1fr;padding:15px}.learning-phase-action{width:100%;justify-self:stretch}.learning-phase-code{max-height:150px}}
@media (max-width:600px){.function-guide{grid-template-columns:1fr;padding:15px}.function-guide-parts{grid-column:auto;grid-template-columns:1fr 1fr}}
.story-watch-btn{width:100%;margin-top:9px;padding:7px 10px;border:1px solid #9feadd66;border-radius:9px;color:#eafffb;background:#ffffff12;font-weight:800;font-size:.76rem}.story-watch-btn:hover{background:#ffffff24;border-color:#fff2a899}
.theater{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:#020817ed;backdrop-filter:blur(12px)}.cinema-shell{width:min(960px,100%);position:relative;border:1px solid #7ee6d344;border-radius:22px;overflow:hidden;background:#071426;box-shadow:0 32px 100px #000,0 0 50px #1acbb52b}.cinema-close{position:absolute;right:14px;top:12px;z-index:5;width:40px;height:40px;border:1px solid #ffffff33;border-radius:50%;color:white;background:#06142799;font-size:1.5rem}.cinema-stage{aspect-ratio:16/8.4;min-height:340px;position:relative;display:grid;align-items:end;overflow:hidden;background:radial-gradient(circle at 50% 45%,#2e8ea8 0 5%,transparent 28%),linear-gradient(145deg,#071327,#172d56 55%,#0a5661);transition:background 1s ease}.cinema-stage.scene-1{background:radial-gradient(circle at 72% 26%,#ffe66d55 0 3%,transparent 24%),linear-gradient(140deg,#101c3c,#3b2872 55%,#164c68)}.cinema-stage.scene-2{background:radial-gradient(circle at 50% 38%,#fff6a8 0 4%,#59e3c455 13%,transparent 35%),linear-gradient(145deg,#09233f,#146778 55%,#172b54)}.cinema-stars{position:absolute;inset:-30%;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:43px 43px;opacity:.35;animation:cinema-drift 12s linear infinite}.cinema-orb{position:absolute;left:50%;top:41%;width:130px;height:130px;display:grid;place-items:center;border:2px solid #9cfff0;border-radius:50%;color:#fff3a2;font-size:4rem;background:#5ee8d019;box-shadow:0 0 40px #56e5cf88,inset 0 0 40px #8ef5e844;transform:translate(-50%,-50%);animation:cinema-orb 3s ease-in-out infinite}.scene-1 .cinema-orb{border-radius:28%;transform:translate(-50%,-50%) rotate(45deg)}.scene-1 .cinema-orb span{transform:rotate(-45deg)}.scene-2 .cinema-orb{box-shadow:0 0 75px #ffe66dcc,inset 0 0 45px #fff3a266}.cinema-vignette{position:absolute;inset:0;background:linear-gradient(transparent 42%,#020817e8),radial-gradient(ellipse,transparent 35%,#01051099)}.cinema-caption{position:relative;z-index:2;padding:42px clamp(24px,6vw,70px) 36px;color:white;text-shadow:0 2px 10px #000}.cinema-caption span{color:#7ce9d6;font-size:.8rem;font-weight:900;letter-spacing:.15em}.cinema-caption h2{margin:7px 0 10px;font-size:clamp(1.65rem,4vw,2.8rem)}.cinema-caption p{max-width:720px;margin:0;color:#dfebf7;font-size:clamp(1rem,2vw,1.25rem);line-height:1.7}.cinema-timeline{height:5px;background:#142944}.cinema-timeline i{display:block;width:0;height:100%;background:linear-gradient(90deg,#55e2b7,#ffe66d);transition:width .15s linear}.cinema-controls{min-height:66px;display:flex;align-items:center;gap:10px;padding:10px 16px;color:#bcd2e7}.cinema-controls button{min-height:40px;padding:0 14px;border:1px solid #ffffff22;border-radius:10px;color:#dbeaff;background:#ffffff0d;font-weight:800}.cinema-controls button:hover{background:#ffffff1c}.cinema-controls .cinema-play{min-width:110px;color:#062c35;background:#71e7d2}.cinema-controls span{margin-left:auto;font-size:.82rem}.cinema-stage.scene-change .cinema-caption{animation:caption-in .65s ease both}.cinema-stage.scene-change .cinema-orb{animation:orb-enter .7s ease both,cinema-orb 3s .7s ease-in-out infinite}
@keyframes cinema-drift{to{transform:translate3d(43px,43px,0)}}@keyframes cinema-orb{50%{translate:0 -9px;filter:brightness(1.25)}}@keyframes caption-in{from{opacity:0;transform:translateY(20px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes orb-enter{from{opacity:0;scale:.4;filter:blur(10px)}}
@media (max-width:600px){.theater{padding:8px}.cinema-stage{aspect-ratio:auto;min-height:430px}.cinema-caption{padding:30px 22px}.cinema-orb{width:100px;height:100px;font-size:3rem}.cinema-controls{flex-wrap:wrap}.cinema-controls span{order:5;width:100%;margin:0;text-align:center}.cinema-controls button{flex:1}.cinema-close{right:10px;top:10px}}
.cinema-stage{background-image:linear-gradient(#06102422,#02081777),url('./assets/code-harbor.png');background-size:112% 112%;background-position:center 48%;animation:scene-pan 12s ease-in-out infinite alternate}.cinema-stage.scene-1{background-image:linear-gradient(#06102422,#02081788),url('./assets/code-realm.png');background-size:115% 115%;background-position:center 48%}.cinema-stage.scene-2{background-image:linear-gradient(#fff0,#02081788),url('./assets/code-realm.png');background-size:108% 108%;background-position:70% 45%}.cinema-stars{opacity:.14;mix-blend-mode:screen}.cinema-orb{left:82%;top:28%;width:84px;height:84px;font-size:2.6rem;opacity:.85}.cinema-character{position:absolute;z-index:3;left:6%;bottom:4%;width:clamp(180px,27vw,330px);height:84%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 18px #00152ccc);transform-origin:50% 90%;animation:character-walk 5.2s ease-in-out infinite}.scene-1 .cinema-character{left:36%;bottom:4%;height:82%;animation:character-point 5.2s ease-in-out infinite}.scene-2 .cinema-character{left:62%;bottom:4%;height:83%;animation:character-celebrate 5.2s ease-in-out infinite}.cinema-foreground{position:absolute;z-index:1;left:-8%;right:-8%;bottom:-13%;height:28%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at center,#123c49bb,#061420 70%);filter:blur(1px);animation:foreground-drift 8s ease-in-out infinite alternate}.cinema-vignette{z-index:4}.cinema-caption{z-index:5}.cinema-stage.scene-change .cinema-character{animation:character-enter .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes scene-pan{from{background-position:42% 48%}to{background-position:58% 51%}}@keyframes foreground-drift{to{transform:translateX(3%) scaleX(1.05)}}@keyframes character-walk{0%,100%{transform:translateX(0) rotate(-1deg)}25%{transform:translateX(22px) translateY(-8px) rotate(1deg)}50%{transform:translateX(50px) rotate(-1deg)}75%{transform:translateX(72px) translateY(-8px) rotate(1deg)}}@keyframes character-point{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-9px) rotate(-2deg)}55%{transform:translateY(-9px) rotate(2deg)}}@keyframes character-celebrate{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-28px) rotate(-4deg) scale(1.04)}55%{transform:translateY(-34px) rotate(4deg) scale(1.06)}75%{transform:translateY(-8px) scale(.98)}}@keyframes character-enter{from{opacity:0;transform:translateX(-120px) scale(.8);filter:blur(8px)}to{opacity:1;transform:none;filter:drop-shadow(0 18px 18px #00152ccc)}}
@media (max-width:600px){.cinema-character{width:190px;height:68%;left:-2%;bottom:7%}.scene-1 .cinema-character{left:18%;bottom:7%;height:66%}.scene-2 .cinema-character{left:44%;bottom:7%;height:67%}.cinema-orb{left:78%;top:24%;width:66px;height:66px;font-size:2rem}.cinema-caption{background:linear-gradient(transparent,#020817cc);padding-top:90px}}

/* Keep the complete J++ silhouette clear of story captions. */
.cinema-caption{padding-right:clamp(250px,32vw,370px)}
.cinema-orb{left:72%;top:24%}
.cinema-character,.scene-1 .cinema-character,.scene-2 .cinema-character{left:auto;right:5%;bottom:8%;width:clamp(180px,24vw,290px);height:78%}
.scene-1 .cinema-character{height:76%}
.scene-2 .cinema-character{height:77%}
@media (max-width:600px){.cinema-caption{padding:190px 22px 28px;background:linear-gradient(transparent,#020817e8)}.cinema-orb{left:22%;top:22%}.cinema-character,.scene-1 .cinema-character,.scene-2 .cinema-character{left:auto;right:6%;bottom:39%;width:150px;height:49%}.scene-1 .cinema-character,.scene-2 .cinema-character{height:48%}}