:root{--bg:#090e16;--panel:#111923;--panel2:#0d151e;--edge:#243241;--text:#f1f5f8;--muted:#8b9dab;--dim:#5c6c79;--mint:#5ce0b8;--cyan:#73caff;--violet:#b9a0ff;--amber:#ffca72;--red:#ff808f;--font:'IBM Plex Sans Arabic',Tahoma,sans-serif;--mono:'IBM Plex Mono',Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 74% -30%,#173346 0,transparent 42%),linear-gradient(140deg,#080d14,#0b111a 56%,#0a1118);color:var(--text);font-family:var(--font);min-height:100vh}button,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.app-shell{max-width:1500px;margin:auto;padding:0 30px 25px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1e2b37}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brand-icon{width:39px;height:39px;display:grid;place-items:center;border:1px solid #3c816f;border-radius:12px;background:linear-gradient(145deg,#183a35,#12252b);font:600 16px var(--mono);color:var(--mint);box-shadow:0 0 25px #5ce0b812}.brand b{display:block;font-size:17px;line-height:1.2}.brand small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.top-meta{display:flex;align-items:center;gap:8px;border:1px solid #253542;background:#0d151e;border-radius:99px;padding:8px 13px;color:#a6b4bf;font-size:11px}.live-dot{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 9px #5ce0b8aa}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;padding-top:22px}.lesson-rail{border-left:1px solid #20303c;padding-left:19px;min-height:calc(100vh - 100px);display:flex;flex-direction:column}.rail-heading{display:flex;justify-content:space-between;align-items:center;padding:7px 3px 13px;color:#aab8c2;font-size:12px;font-weight:700}.rail-count{font:10px var(--mono);color:#667989;direction:ltr}.lesson-nav{display:grid;gap:5px}.lesson-link{position:relative;display:flex;align-items:center;gap:11px;text-align:right;width:100%;border:1px solid transparent;border-radius:12px;background:transparent;padding:10px 9px;color:#9aabb7;font-size:12px;transition:background .2s,border .2s,color .2s}.lesson-link:hover{background:#111c26;color:#eaf2f6}.lesson-link.active{background:linear-gradient(90deg,#132a29,#12202a);border-color:#284c48;color:#ebfff8}.lesson-number{font:500 10px var(--mono);color:#617483;width:21px;direction:ltr}.lesson-link.active .lesson-number{color:var(--mint)}.lesson-link.active:after{content:'';position:absolute;left:-20px;top:10px;bottom:10px;width:2px;border-radius:3px;background:var(--mint);box-shadow:0 0 12px #5ce0b880}.rail-foot{margin-top:auto;display:flex;align-items:flex-start;gap:10px;padding:13px 10px 7px;border-top:1px solid #1e2b37;color:#7e909d;font-size:11px;line-height:1.7}.foot-glyph{font-size:19px;color:var(--mint)}
.lesson-workspace{min-width:0}.lesson-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:5px 0 16px}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:10px;font-weight:700;color:var(--mint)}h1{font-size:27px;letter-spacing:-.04em;margin:5px 0 3px;line-height:1.35}.heading-copy p{margin:0;color:#93a4b0;font-size:13px}.progress-box{width:146px;flex:none;text-align:left;color:#91a2af;font-size:10px}.progress-track{height:4px;border-radius:5px;background:#1d2b37;margin-top:8px;overflow:hidden}.progress-track i{display:block;width:12%;height:100%;border-radius:5px;background:linear-gradient(90deg,#53dcb1,#74c9ff);transition:width .35s}.work-grid{display:grid;grid-template-columns:minmax(315px,.88fr) minmax(380px,1.25fr);gap:14px;align-items:stretch}.panel{border:1px solid #22313e;border-radius:17px;background:linear-gradient(150deg,#131d27f5,#0e161ff5);box-shadow:0 16px 50px #0002}.code-card,.visual-card{padding:16px;min-width:0}.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.card-header b{font-size:13px;display:block}.card-header small{display:block;color:#778995;font-size:10px;margin-top:4px}.language-switch{display:flex;gap:3px;padding:3px;border:1px solid #2a3946;background:#0a1118;border-radius:9px}.lang{border:0;border-radius:6px;padding:6px 9px;background:transparent;color:#80919e;font:10px var(--mono);transition:.2s}.lang.active{color:#d8fff1;background:#17332e;box-shadow:inset 0 0 0 1px #326957}
.editor-window{overflow:hidden;border:1px solid #293844;border-radius:12px;background:#0a1118}.editor-bar{height:32px;display:flex;align-items:center;gap:10px;padding:0 11px;border-bottom:1px solid #202d38;color:#7e929f;font-size:10px;direction:ltr}.traffic{display:flex;gap:4px}.traffic i{width:7px;height:7px;border-radius:50%;background:#ed777b}.traffic i:nth-child(2){background:#efbd5c}.traffic i:nth-child(3){background:#58cfa0}.editor-spacer{flex:1}.editor-label{font-family:var(--font);direction:rtl}.code-content{min-height:172px;padding:17px 9px 17px 0;overflow:auto;color:#d6e2e9;font:12px/2.25 var(--mono);text-align:left}.code-line{padding:0 12px 0 4px;white-space:pre;transition:background .3s,color .3s}.code-line.current{background:linear-gradient(90deg,#16342e,#13272100);color:#fff;border-left:2px solid var(--mint)}.line-number{display:inline-block;width:28px;color:#536573;text-align:right;margin-right:11px;user-select:none}.kw{color:#c09cff}.fn{color:#72c9ff}.str{color:#90daa9}.num{color:#ffc776}.bool{color:#ff9ec4}.comment{color:#657887}.name{color:#f3d17d}.op{color:#f3a5cc}.concept-note{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 11px;border:1px solid #21353e;border-radius:11px;background:#101c24;color:#aebdc6;font-size:11px;line-height:1.75;min-height:56px}.concept-note p{margin:0}.note-icon{color:var(--mint);font-size:15px;line-height:1.2}.control-row{display:flex;align-items:center;gap:7px;margin-top:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;padding:8px 10px;border:1px solid #2c3c48;background:#15212b;color:#d6e2e8;font-size:10px;transition:transform .16s,background .16s,border-color .16s}.btn:hover{background:#1b2b36;border-color:#425967;transform:translateY(-1px)}.btn-play{background:#57dcb2;border-color:#57dcb2;color:#09251e;font-weight:700;min-width:111px}.btn-play:hover{background:#88edce;border-color:#88edce}.btn-soft{background:#121d27}.btn-icon{width:34px;height:32px;font-size:17px;padding:0;color:#aab9c3}.speed-control{display:flex;align-items:center;gap:6px;margin-right:auto;color:#82939e;font-size:10px}.speed-control select{background:#101922;border:1px solid #293a47;border-radius:7px;padding:6px 7px;color:#c5d2da;font-size:10px}
.visual-card{display:flex;flex-direction:column}.visual-header{margin-bottom:12px}.run-state{border:1px solid #293b46;border-radius:99px;background:#101a22;padding:5px 9px;color:#9eb1bc;font-size:10px}.run-state.running{border-color:#2b6858;color:var(--mint);background:#10261f}.stage{min-height:330px;position:relative;overflow:hidden;border:1px solid #223644;border-radius:14px;background-color:#0b141d;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px),radial-gradient(ellipse at 50% 47%,#17313b 0,#101b25 49%,#0a121a 100%);background-size:28px 28px,28px 28px,auto;display:grid;place-items:center;padding:22px}.stage:before,.stage:after{content:'';position:absolute;border:1px solid #b3e5ff0a;border-radius:50%;width:270px;height:270px;pointer-events:none}.stage:after{width:440px;height:440px}.scene{position:relative;z-index:1;width:min(100%,520px);min-height:245px;display:flex;align-items:center;justify-content:center}.scene-content{width:100%;text-align:center}.scene-caption{color:#89a0ad;font-size:10px;letter-spacing:.04em;margin-bottom:18px}.scene-explainer{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}.node{position:relative;z-index:2;min-width:91px;padding:12px 13px;border:1px solid #39525e;background:#152630;border-radius:13px;box-shadow:0 7px 20px #0003;color:#dbe9ef;font-size:11px;animation:nodeIn .4s ease both}.node .node-label{display:block;color:#8297a4;font:9px var(--mono);direction:ltr;margin-bottom:6px}.node strong{font:600 17px var(--mono);direction:ltr;color:#edf9fb}.node.mint{border-color:#397664;background:#15352d}.node.mint strong{color:var(--mint)}.node.blue{border-color:#3b6480;background:#152b3a}.node.blue strong{color:var(--cyan)}.node.amber{border-color:#775b31;background:#30271a}.node.amber strong{color:var(--amber)}.flow-arrow{color:#668392;font-size:18px;animation:arrowPulse 1.2s infinite}.flow-arrow.active{color:var(--mint);text-shadow:0 0 12px #5ce0b8}.token{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--mint);box-shadow:0 0 14px #5ce0b8;z-index:3;animation:float 2s ease-in-out infinite}.motion-line{height:2px;min-width:35px;background:linear-gradient(90deg,#416273,#5ce0b8,#416273);position:relative;overflow:visible}.motion-line:after{content:'';position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 13px #5ce0b8;animation:travel 1.1s linear infinite}.terminal{width:min(100%,370px);margin:19px auto 0;text-align:left;direction:ltr;border:1px solid #294451;border-radius:11px;background:#081117;padding:10px 13px;color:#9fe8ca;font:11px/1.8 var(--mono);white-space:pre-wrap;min-height:40px;box-shadow:0 9px 24px #0003}.terminal-label{display:flex;justify-content:space-between;color:#8195a2;font:9px var(--font);direction:rtl;margin-bottom:4px}.cursor{display:inline-block;width:6px;height:13px;background:var(--mint);vertical-align:middle;animation:blink 1s steps(1) infinite}
.data-rack{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.data-box{min-width:104px;border:1px solid #344b58;background:#12212b;padding:12px 15px 10px;border-radius:13px;transform:translateY(0);transition:.35s}.data-box.active{border-color:#4c9b82;background:#17352e;transform:translateY(-7px);box-shadow:0 12px 25px #0004,0 0 20px #5ce0b818}.data-box label{display:block;color:#8296a3;font:9px var(--mono);direction:ltr;margin-bottom:7px}.data-box b{display:block;color:#edf8f5;font:600 17px var(--mono);direction:ltr}.type-tag{display:inline-block;margin-top:7px;padding:3px 7px;border-radius:99px;color:#83d9b9;background:#18352e;font:9px var(--mono);direction:ltr}.operator-equation{display:flex;align-items:center;justify-content:center;gap:13px;direction:ltr}.operand{display:grid;place-items:center;width:70px;height:70px;border:1px solid #456173;border-radius:19px;background:#172b37;color:#f3f8fa;font:700 22px var(--mono);transition:.35s}.operand.moving{transform:translateX(8px) rotate(7deg);border-color:var(--cyan)}.operator{font:700 23px var(--mono);color:var(--violet)}.result-orb{display:grid;place-items:center;width:77px;height:77px;border:1px solid #43856e;border-radius:50%;background:#17372e;color:var(--mint);font:700 20px var(--mono);box-shadow:0 0 24px #5ce0b821;animation:popIn .42s ease}.compare-badge{display:block;color:#a9bac4;font:11px var(--mono);direction:ltr;margin-top:13px}
.decision-wrap{width:min(100%,440px);margin:auto}.decision-gate{width:max-content;max-width:100%;margin:0 auto 19px;padding:11px 18px;border:1px solid #456578;background:#172c38;color:#e7f4f6;border-radius:11px;font:600 12px var(--mono);direction:ltr;box-shadow:0 0 24px #73caff10}.decision-routes{display:grid;grid-template-columns:1fr 1fr;gap:28px;position:relative}.route{min-height:73px;border:1px dashed #40515c;border-radius:12px;padding:10px;color:#738692;font-size:11px;position:relative;transition:.3s}.route label{display:block;font:9px var(--mono);direction:ltr;margin-bottom:7px}.route.active{border:1px solid var(--mint);background:#16352e;color:#eafff8;box-shadow:0 0 24px #5ce0b81c}.route.active.false-route{border-color:var(--amber);background:#302718}.route-particle{position:absolute;width:10px;height:10px;left:50%;top:-6px;border-radius:50%;background:var(--mint);box-shadow:0 0 15px var(--mint);opacity:0}.decision-routes.animate .route.active .route-particle{opacity:1;animation:routeDrop .8s ease-in forwards}.decision-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:17px;color:#91a4af;font-size:10px}.decision-controls input{accent-color:var(--mint);width:130px}.decision-controls strong{font:12px var(--mono);color:var(--mint)}
.loop-visual{width:min(100%,450px);margin:auto}.loop-label{font:10px var(--mono);color:#91a6b2;direction:ltr;margin-bottom:16px}.loop-track{display:flex;justify-content:center;align-items:center;gap:8px;direction:ltr;position:relative;padding:6px}.loop-stop{width:57px;height:57px;display:grid;place-items:center;border:1px solid #364c59;border-radius:15px;background:#14232d;color:#b7c6cf;font:600 16px var(--mono);position:relative;transition:.35s}.loop-stop.visited{border-color:#34705e;background:#16332d;color:#9cebd0}.loop-stop.current{transform:translateY(-8px) scale(1.06);border-color:var(--mint);color:#fff;background:#1c473b;box-shadow:0 11px 26px #5ce0b82b}.loop-trail{position:absolute;top:50%;left:5%;right:5%;height:2px;background:linear-gradient(90deg,#263c48,#5ce0b8,#263c48);z-index:0}.loop-cursor{position:absolute;top:calc(50% - 6px);left:7%;width:12px;height:12px;border-radius:50%;background:#caffea;box-shadow:0 0 16px var(--mint);z-index:2;transition:left .5s cubic-bezier(.2,.8,.2,1)}.loop-stats{margin:17px auto 0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.stat-pill{border:1px solid #304551;background:#101c25;padding:8px 11px;border-radius:9px;color:#91a5b1;font-size:10px}.stat-pill b{margin-right:5px;font:600 12px var(--mono);color:var(--mint)}.while-wheel{width:157px;height:157px;margin:2px auto 0;border:2px dashed #35566a;border-radius:50%;position:relative;display:grid;place-items:center;animation:slowTurn 18s linear infinite}.while-wheel:before{content:'↻';position:absolute;top:-11px;right:26px;padding:0 3px;color:var(--cyan);background:#101b24;font-size:20px}.wheel-counter{width:72px;height:72px;display:grid;place-items:center;border:1px solid #43846e;border-radius:50%;background:#17362e;color:var(--mint);font:700 22px var(--mono);box-shadow:0 0 23px #5ce0b81a;animation:counterPop .5s ease}.function-box{width:150px;min-height:111px;margin:auto;border:1px solid #456485;border-radius:15px;background:linear-gradient(145deg,#1a2b40,#14222e);padding:12px;position:relative;box-shadow:0 11px 28px #0003}.function-box:before{content:'FUNCTION';font:9px var(--mono);color:#8fb0ca;letter-spacing:.1em}.function-box strong{display:block;margin:10px 0 3px;color:#d9cbff;font:600 14px var(--mono)}.function-box span{color:#8195a3;font:9px var(--mono)}.arg-token{position:absolute;width:40px;height:40px;display:grid;place-items:center;left:-49px;top:34px;border-radius:50%;border:1px solid #49788b;background:#153344;color:var(--cyan);font:11px var(--mono);animation:argTravel 1.4s ease-in-out infinite alternate}.return-token{position:absolute;width:52px;padding:7px 4px;right:-57px;top:36px;border:1px solid #43806b;border-radius:9px;background:#15342d;color:var(--mint);font:10px var(--mono);animation:returnTravel 1.4s ease-in-out infinite alternate}.array-row{display:flex;justify-content:center;gap:5px;direction:ltr}.array-cell{position:relative;width:59px;height:69px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #3a5361;background:#152630;border-radius:11px;transition:.35s}.array-cell small{position:absolute;top:5px;left:7px;font:8px var(--mono);color:#718997}.array-cell b{font:600 18px var(--mono);color:#e8f3f5}.array-cell.selected{transform:translateY(-9px);border-color:var(--mint);background:#173a31;box-shadow:0 11px 23px #5ce0b821}.array-pointer{font:10px var(--mono);color:var(--mint);direction:ltr;margin-top:12px;animation:pointerIn .4s ease}.scene-note{min-height:20px;color:#94a9b4;font-size:10px;margin-top:16px}
.stage-bottom{padding:12px 2px 0}.stage-bottom p{margin:0;color:#bfccd3;min-height:21px;font-size:11px;line-height:1.6}.stage-meta{display:flex;align-items:center;justify-content:space-between;margin-top:9px;color:#71838f;font-size:9px}.step-track{display:flex;gap:4px;direction:ltr}.step-pip{width:5px;height:5px;border-radius:5px;background:#33434f;transition:.2s}.step-pip.done{background:#397963}.step-pip.current{width:17px;background:var(--mint)}
.flow-strip{margin-top:14px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #294151;border-radius:14px;background:linear-gradient(105deg,#101c26,#14232c 58%,#162e31)}.flow-copy{display:flex;align-items:center;gap:11px}.flow-spark{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;border:1px solid #54735d;background:#20372d;color:#c0f39b;font-size:15px}.flow-copy b,.prompt-top b{display:block;font-size:11px}.flow-copy small,.prompt-top small{display:block;color:#8ea1ac;font-size:9px;margin-top:4px}.btn-flow{background:#d2ff9c;border-color:#d2ff9c;color:#1c2c16;font-weight:700;padding:9px 12px}.btn-flow:hover{background:#e0ffc0;border-color:#e0ffc0}.prompt-card{margin-top:10px;border:1px solid #2c4551;border-radius:13px;background:#0c151d;overflow:hidden}.prompt-card[hidden]{display:none}.prompt-top{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid #22343e}.prompt-card pre{margin:0;padding:13px;max-height:240px;overflow:auto;white-space:pre-wrap;direction:ltr;text-align:left;color:#cfdee5;font:10px/1.75 var(--mono)}.lesson-footer{display:flex;justify-content:space-between;gap:12px;padding:13px 3px 0;color:#6f808c;font-size:9px}.lesson-footer i{color:var(--mint);font-style:normal}.toast{position:fixed;bottom:20px;left:50%;z-index:10;transform:translate(-50%,12px);opacity:0;pointer-events:none;border:1px solid #5ad3ac;background:#d9fff1;color:#09271e;padding:10px 14px;border-radius:10px;font-size:11px;font-weight:700;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.decision-controls input[type="number"],.decision-controls input:not([type]),.decision-controls input[type="text"]{width:74px;min-height:32px;padding:5px 7px;border:1px solid #344b58;border-radius:8px;background:#0c151d;color:#e8f3f5;font:11px var(--mono);text-align:center}.decision-controls input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.decision-controls input[type="range"]{width:130px}.operator-controls{flex-wrap:wrap;gap:7px}.operator-controls label{white-space:nowrap}.list-controls{flex-wrap:wrap;gap:7px}.list-controls input#listValuesInput{width:138px;direction:ltr}.mini-btn{border:1px solid #397664;border-radius:8px;background:#15352d;color:#c9f8e8;padding:7px 10px;font:600 10px var(--font);cursor:pointer;transition:background .2s,transform .2s}.mini-btn:hover{background:#1d493b;transform:translateY(-1px)}.mini-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.name-input{width:125px;min-height:32px;padding:6px 8px;border:1px solid #344b58;border-radius:8px;background:#0c151d;color:#e8f3f5;font:11px var(--font);text-align:center}
.code-line.current{position:relative}.code-line.current:after{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px 3px #5ce0b880;opacity:0;pointer-events:none;transform:translateY(-50%)}body.is-playing .code-line.current:after{animation:codeSweep var(--step-speed,1050ms) linear infinite}.flow-arrow,.motion-line:after,.token,.while-wheel,.arg-token,.return-token{animation-play-state:paused}body.is-playing .flow-arrow,body.is-playing .motion-line:after,body.is-playing .token,body.is-playing .while-wheel,body.is-playing .arg-token,body.is-playing .return-token{animation-play-state:running}
@keyframes nodeIn{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes arrowPulse{50%{opacity:.42;transform:scale(.9)}}@keyframes travel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}@keyframes float{50%{transform:translateY(-7px)}}@keyframes blink{50%{opacity:0}}@keyframes popIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}@keyframes routeDrop{0%{top:-7px;opacity:0}25%{opacity:1}100%{top:55px;opacity:0}}@keyframes slowTurn{to{transform:rotate(360deg)}}@keyframes counterPop{50%{transform:scale(1.1)}}@keyframes argTravel{to{transform:translateX(82px);opacity:.4}}@keyframes returnTravel{to{transform:translateX(20px);opacity:.4}}@keyframes pointerIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1050px){.app-shell{padding:0 19px 22px}.layout{grid-template-columns:185px minmax(0,1fr);gap:18px}.work-grid{grid-template-columns:minmax(285px,.9fr) minmax(320px,1.1fr)}.lesson-rail{padding-left:13px}.lesson-link{gap:8px;padding:9px 6px;font-size:11px}}
@media(max-width:820px){.layout{grid-template-columns:1fr}.lesson-rail{min-height:auto;border-left:0;border-bottom:1px solid #20303c;padding:0 0 11px}.rail-heading{padding-top:0}.lesson-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.lesson-link{justify-content:flex-start;font-size:10px}.lesson-link.active:after{left:8px;right:8px;top:auto;bottom:-5px;width:auto;height:2px}.rail-foot{display:none}.work-grid{grid-template-columns:1fr 1fr}.stage{min-height:310px}.visual-card{grid-column:1/-1;grid-row:1}.code-card{grid-column:1/-1}.code-content{min-height:120px}}
@media(max-width:560px){.app-shell{padding:0 12px 20px}.topbar{height:61px}.top-meta{font-size:9px;padding:7px 9px}.brand-icon{width:34px;height:34px}.layout{padding-top:15px;gap:13px}.lesson-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-link{padding:8px 7px}.lesson-heading{align-items:start}.progress-box{width:92px}.progress-box span{font-size:9px}h1{font-size:22px}.heading-copy p{font-size:11px}.work-grid{grid-template-columns:1fr;gap:10px}.visual-card,.code-card{grid-column:auto;grid-row:auto;padding:13px}.stage{min-height:285px;padding:14px}.scene{min-height:230px}.node{min-width:77px;padding:10px 8px;font-size:10px}.node strong{font-size:15px}.loop-stop{width:48px;height:48px}.array-cell{width:50px;height:63px}.data-box{min-width:94px}.flow-strip{padding:11px;gap:8px}.flow-copy{gap:7px}.flow-copy small{max-width:160px;line-height:1.5}.btn-flow{font-size:9px;padding:8px}.lesson-footer{font-size:8px}}

@keyframes codeSweep{0%{left:0;opacity:0}12%{opacity:.95}88%{opacity:.85}100%{left:calc(100% - 6px);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Purple + electric blue identity, with mint retained for success states. */
:root{--bg:#0b0a1a;--panel:#15132b;--panel2:#100f22;--edge:#332d55;--text:#f4f1ff;--muted:#b4aec9;--dim:#7f7899;--accent:#a855f7;--accent-bright:#c084fc;--sky:#38bdf8;--mint:#65e6c3;--cyan:#38bdf8;--violet:#c084fc}
body{background:radial-gradient(ellipse at 78% -25%,#392060 0,transparent 42%),radial-gradient(ellipse at 5% 35%,#0e3152 0,transparent 38%),linear-gradient(140deg,#090817,#0b0a1a 56%,#0a1020)}
button:focus-visible,select:focus-visible{outline-color:var(--accent-bright)}
.topbar{border-color:#282344}.brand-icon{border-color:#7447a6;background:linear-gradient(145deg,#3a1d5b,#172744);color:#d8b4fe;box-shadow:0 0 25px #a855f72b}
.top-meta{border-color:#302a4c;background:#111026}.layout{--edge:#332d55}.rail-heading{color:#c5bddb}.lesson-link:hover{background:#17152f;color:#f7f2ff}.lesson-link.active{background:linear-gradient(100deg,#291740,#172844);border-color:#65418a;color:#fff}.lesson-link.active:after{background:linear-gradient(180deg,var(--accent-bright),var(--sky));box-shadow:0 0 13px #a855f799}.lesson-link.active .lesson-number{color:#d8b4fe}.foot-glyph{color:var(--accent-bright)}
.eyebrow{color:var(--accent-bright)}.heading-copy p,.progress-box{color:#b4aec9}.progress-track{background:#25213d}.progress-track i{background:linear-gradient(90deg,var(--accent),var(--sky))}
.panel{border-color:#302a4c;background:linear-gradient(150deg,#191630f5,#101326f5);box-shadow:0 16px 50px #05041455}.language-switch{border-color:#332d55;background:#100f22}.lang.active{color:#f2e7ff;background:#35204d;box-shadow:inset 0 0 0 1px #8751b4}
.editor-window{border-color:#332d55;background:#0d0c1b}.editor-bar{border-color:#26213d}.code-line.current{background:linear-gradient(90deg,#392052,#17274300);border-left-color:var(--accent-bright)}.kw{color:#d8b4fe}.fn{color:#7dd3fc}
.concept-note{border-color:#302a4c;background:#131229;color:#c7c0d9}.note-icon{color:var(--accent-bright)}
.btn{border-color:#3a3454;background:#1a1831}.btn:hover{background:#262044;border-color:#695286}.btn-play{background:linear-gradient(100deg,#9333ea,#7c3aed 52%,#2563eb);border-color:#9b5de5;color:#fff;box-shadow:0 5px 19px #7c3aed40}.btn-play:hover{background:linear-gradient(100deg,#a855f7,#8b5cf6 52%,#3b82f6);border-color:#c084fc}.btn-soft{background:#15142a}.btn-icon{color:#c7c0d9}.speed-control{color:#b4aec9}.speed-control select{border-color:#393453;background:#111026;color:#eee9ff}
.visual-card .run-state{border-color:#393453;background:#111026;color:#c3bbd8}.run-state.running{border-color:#7650a4;color:#e9d5ff;background:#28183b}
.stage{border-color:#343052;background-color:#0d0c1b;background-image:linear-gradient(#c4b5fd0a 1px,transparent 1px),linear-gradient(90deg,#c4b5fd0a 1px,transparent 1px),radial-gradient(ellipse at 50% 47%,#24224a 0,#11172d 50%,#0c0d1b 100%);background-size:28px 28px,28px 28px,auto}.stage:before,.stage:after{border-color:#93c5fd16;animation:stageBreathe 6s ease-in-out infinite alternate;animation-play-state:paused}.stage:after{animation-delay:-3s}body.is-playing .stage:before,body.is-playing .stage:after{animation-play-state:running}
.scene{animation:sceneArrive .32s cubic-bezier(.2,.75,.25,1) both}.scene-caption{color:#b4aec9}.node{border-color:#484263;background:#1b1a34}.node.mint{border-color:#397664;background:#15352d}.node.blue{border-color:#356b91;background:#132a40}.flow-arrow.active{color:var(--sky);text-shadow:0 0 14px #38bdf8b3}.motion-line{background:linear-gradient(90deg,#514071,var(--accent),var(--sky),#3d5274)}.motion-line:after{background:var(--sky);box-shadow:0 0 14px #38bdf8}
.terminal{border-color:#343052;background:#090a17;color:#b8f7e3}.data-box{border-color:#3b3656;background:#17162e}.data-box.active{border-color:#9360bd;background:#281b3d;box-shadow:0 12px 25px #0005,0 0 22px #a855f729}.type-tag{color:#b8f7e3;background:#17352f}.operand{border-color:#514671;background:#1b1a35}.operand.moving{border-color:var(--sky)}.operator{color:var(--accent-bright)}.result-orb{border-color:#43856e;background:#17372e}
.decision-gate{border-color:#4b5580;background:#17233d;box-shadow:0 0 24px #38bdf81a}.route.active{border-color:var(--accent-bright);background:#291b3e;box-shadow:0 0 24px #a855f729}.route.active.false-route{border-color:var(--amber);background:#302718}.route-particle{background:var(--accent-bright);box-shadow:0 0 15px var(--accent-bright)}.decision-controls{color:#c0bad2}.decision-controls strong{color:var(--accent-bright)}.decision-controls input{accent-color:var(--accent)}
.loop-stop{border-color:#393653;background:#17162e}.loop-stop.visited{border-color:#34705e;background:#16332d}.loop-stop.current{border-color:var(--accent-bright);background:#35204d;box-shadow:0 11px 26px #a855f738}.loop-trail{background:linear-gradient(90deg,#3e3659,var(--accent),var(--sky),#3e3659)}.loop-cursor{background:#e9d5ff;box-shadow:0 0 17px var(--accent-bright)}.while-wheel{border-color:#4a4771}.while-wheel:before{color:var(--sky);background:#11172d}.function-box{border-color:#514671;background:linear-gradient(145deg,#252047,#14233b)}.function-box:before{color:#93c5fd}.function-box strong{color:#e9d5ff}.arg-token{border-color:#397ba0;background:#153344;color:#7dd3fc}.array-cell{border-color:#403b5d;background:#17162e}.array-cell.selected{border-color:var(--accent-bright);background:#291b3e;box-shadow:0 11px 23px #a855f733}.array-pointer{color:#7dd3fc}
.step-pip{background:#38334f}.step-pip.done{background:#527c78}.step-pip.current{background:linear-gradient(90deg,var(--accent-bright),var(--sky))}.flow-strip{border-color:#393453;background:linear-gradient(105deg,#17152e,#18233e 60%,#211a37)}.flow-spark{border-color:#7953a0;background:#2a1d41;color:#e9d5ff}.btn-flow{background:linear-gradient(100deg,#d8b4fe,#93c5fd);border-color:#c084fc;color:#1a1230}.btn-flow:hover{background:linear-gradient(100deg,#e9d5ff,#bae6fd);border-color:#d8b4fe}.prompt-card{border-color:#393453;background:#0e0d1e}.toast{border-color:#38bdf8;background:#e0f2fe;color:#10223c}
.decision-controls input[type="number"],.decision-controls input:not([type]),.decision-controls input[type="text"],.name-input{border-color:#403b5d;background:#0f0e20;color:#f4f1ff}.decision-controls input:focus-visible{outline-color:var(--sky)}.mini-btn{border-color:#8751b4;background:#2a1d41;color:#f1e4ff}.mini-btn:hover{background:#392052}
.code-line.current:after{background:var(--sky);box-shadow:0 0 12px 3px #38bdf899}
@keyframes sceneArrive{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes stageBreathe{from{opacity:.45;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
@media(max-width:900px){.app-shell{padding-inline:18px}.layout{grid-template-columns:1fr;gap:17px}.lesson-rail{min-height:auto;border-left:0;border-bottom:1px solid #302a4c;padding:0 0 11px}.rail-heading{padding-top:0}.lesson-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.lesson-link{justify-content:flex-start;font-size:10px}.lesson-link.active:after{left:8px;right:8px;top:auto;bottom:-5px;width:auto;height:2px}.rail-foot{display:none}.work-grid{grid-template-columns:minmax(0,1fr)}.visual-card,.code-card{grid-column:auto;grid-row:auto}.visual-card{order:0}.code-card{order:1}}
@media(max-width:600px){.app-shell{padding-inline:12px}.topbar{height:62px}.top-meta{font-size:9px;padding:7px 10px}.layout{padding-top:14px;gap:13px}.lesson-rail{padding-bottom:12px}.lesson-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.lesson-link{min-height:40px;padding:8px 7px;font-size:10px}.lesson-heading{align-items:flex-start;gap:8px;margin-bottom:12px}.progress-box{width:82px;font-size:9px}.progress-box span{font-size:9px}h1{font-size:clamp(19px,6vw,23px)}.heading-copy p{font-size:11px;line-height:1.65}.work-grid{gap:10px}.visual-card,.code-card{padding:12px}.stage{min-height:270px;padding:12px}.scene{min-height:225px}.scene-explainer{gap:7px}.node{min-width:70px;padding:9px 7px;font-size:9px}.node strong{font-size:14px}.scene-caption{font-size:9px;margin-bottom:14px}.loop-stop{width:clamp(39px,12vw,49px);height:clamp(39px,12vw,49px)}.loop-track{gap:5px;padding:4px}.array-cell{width:clamp(43px,14vw,51px);height:60px}.data-box{min-width:88px;padding:10px 11px}.operator-equation{gap:8px}.operand{width:58px;height:58px}.result-orb{width:62px;height:62px}.decision-controls{gap:7px;flex-wrap:wrap}.operator-controls,.list-controls{row-gap:8px}.control-row{gap:6px}.btn{min-height:36px;padding:8px}.btn-play{min-width:104px}.speed-control{margin-right:0}.speed-control select{min-height:34px}.code-content{font-size:11px;min-height:130px;padding-top:12px}.flow-strip{align-items:flex-start;padding:10px;gap:8px}.flow-copy{gap:7px}.flow-copy small{max-width:150px;line-height:1.5}.btn-flow{font-size:9px;padding:8px 9px;white-space:nowrap}.lesson-footer{font-size:8px;flex-wrap:wrap}.prompt-card pre{font-size:9px}}
@media(max-width:370px){.app-shell{padding-inline:9px}.top-meta{gap:5px;padding-inline:8px}.brand{gap:7px}.brand small{font-size:9px}.lesson-link{font-size:9px;gap:6px}.lesson-number{width:18px}.progress-box{width:72px}.card-header{gap:6px}.card-header b{font-size:12px}.lang{padding:6px}.control-row .btn{font-size:9px}.stage{padding:9px}.scene-explainer{gap:5px}.node{min-width:64px}.flow-strip{flex-wrap:wrap}.btn-flow{margin-inline-start:auto}}
.creator-credit{color:#c7c0d9;text-align:center}.creator-credit a{color:var(--accent-bright);font-weight:700;text-decoration:none;white-space:nowrap;transition:color .2s,text-shadow .2s}.creator-credit a:hover,.creator-credit a:focus-visible{color:#7dd3fc;text-shadow:0 0 12px #38bdf866;text-decoration:underline}.creator-credit a:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:3px}@media(max-width:600px){.lesson-footer{align-items:center;justify-content:center;column-gap:14px;row-gap:8px}.creator-credit{flex-basis:100%;order:3}}