:root{color:#e7effd;font-synthesis:none;background:#0b1523;font-family:Vazirmatn,Tahoma,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input,textarea,select{font:inherit}button,select,input[type=number]{color:#e6efff;background:#233a56;border:1px solid #395472;border-radius:8px;padding:7px 9px}button{cursor:pointer}button:hover{background:#345775}button:disabled{opacity:.48;cursor:wait}input[type=range]{accent-color:#e5ba6c}h2{margin:8px 0;font-size:17px}p{line-height:1.75}pre,code{direction:ltr;unicode-bidi:embed}.app{flex-direction:column;gap:8px;min-width:0;height:100dvh;padding:10px;display:flex;overflow:hidden}.topbar{background:#14253c;border:1px solid #28425d;border-radius:12px;flex:0 0 61px;justify-content:space-between;align-items:center;gap:15px;padding:9px 15px;display:flex}.brand strong{font-size:19px;display:block}.brand span{color:#9db3cf;margin-top:2px;font-size:11px;display:block}.headerRight{align-items:center;gap:9px;font-size:12px;display:flex}.sourceTag{color:#c3d5ef}.count{white-space:nowrap;background:#304763;border-radius:7px;padding:7px}.workspace{flex:1 1 0;grid-template-columns:minmax(0,1fr) 325px;gap:9px;min-width:0;min-height:100px;display:grid}.visualPanel{background:#14253c;border:1px solid #29435e;border-radius:13px;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.panelTop{justify-content:space-between;align-items:center;gap:6px;padding:8px 14px;display:flex}.panelTop strong{font-size:17px}.legend{color:#a8bad0;gap:13px;font-size:10px;display:flex}.legend span:first-child{color:#f7b2ba}.legend span:nth-child(2){color:#9cceff}.legend span:nth-child(3){color:#f5d28c}.visualPanel canvas{background:#101b2d;flex:1 1 0;width:100%;min-height:0;display:block}.narrative{background:#1b304a;padding:9px 16px;font-size:14px;font-weight:600;line-height:1.8}.disclaimer{color:#afc1d8;background:#162941;padding:5px 13px;font-size:10px}.sidePanel{background:#14253c;border:1px solid #29435e;border-radius:13px;flex-direction:column;gap:9px;min-height:0;padding:11px;display:flex;overflow:auto}.tabs{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.tabs button{padding:5px 2px;font-size:12px}.tabs .chosen{background:#416486;border-color:#82b7df}.sideContent{flex:none;font-size:13px}.sideContent p{margin:6px 0}.teachingNote,.sourceNote{background:#233a55;border-radius:8px;padding:8px}.sourceNote{color:#a8bedb;font-size:11px}.formula{white-space:pre-wrap;text-align:left;background:#091b30;border-radius:7px;padding:10px;font-size:12px;line-height:1.6;display:block}.settings{border-top:1px solid #334d6a;flex-direction:column;gap:8px;margin-top:auto;padding-top:10px;display:flex}.settingHead{justify-content:space-between;align-items:center;font-size:14px;display:flex}.settingHead button{padding:3px 7px;font-size:11px}.settings label{color:#b9cde3;font-size:12px;display:block}.settings label select,.settings label>input[type=range]{width:100%;margin-top:4px;display:block}.settings input[type=number]{width:100%;margin-top:4px}.settings .two{grid-template-columns:1fr 1fr;gap:8px;display:grid}.settings .inline{align-items:center;gap:5px;display:flex}.settings .inline>input{flex:1;width:100%}.check{align-items:center;gap:2px;display:flex!important}.actionRow{gap:6px;display:flex}.actionRow button{flex:1;font-size:11px}.primary{font-weight:700;color:#152234!important;background:#c99546!important;border-color:#e6bd78!important}.primary:hover{background:#ebbc6a!important}.runtime{color:#a6bfd8;margin:0;font-size:10px;line-height:1.5}.error{color:#ffa0a0;white-space:pre-wrap;font-size:11px;line-height:1.5}.metricGrid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.metric{background:#1b304a;border:1px solid #38536e;border-radius:7px;padding:7px}.metric small{color:#afc3dd;font-size:10px;display:block}.metric b{font-size:15px}.confusion{margin-top:8px}.confusion small{color:#b9cada;font-size:10px}.matrix{gap:3px;margin-top:6px;display:grid}.matrix span{text-align:center;background:#314b69;padding:6px 3px}.sideContent pre{max-width:100%;font-size:10px;overflow:auto}.codePanel{background:#14253c;border:1px solid #29435e;border-radius:12px;flex-direction:column;flex:0 0 212px;gap:7px;min-height:0;padding:8px;display:flex;overflow:hidden}.codePanel.collapsed{flex-basis:39px}.codeTop{justify-content:space-between;align-items:center;gap:8px;display:flex}.codeTop strong{font-size:13px}.codeOptions{align-items:center;gap:6px;display:flex}.codeOptions button,.codeOptions select{padding:4px 7px;font-size:11px}.codeBody{flex:1 1 0;grid-template-columns:1fr 1fr;gap:8px;min-height:0;display:grid}.codeBody textarea,.codeBody pre{color:#c7f0c9;white-space:pre;background:#0b1829;border:1px solid #344c65;border-radius:8px;min-width:0;min-height:0;margin:0;padding:9px;font:11px/1.5 DejaVu Sans Mono,monospace;overflow:auto}.codeBody textarea{resize:none;outline-color:#e8c27a}.codeBody pre{white-space:pre-wrap;color:#d5e3fa}.player{background:#14253c;border:1px solid #29435e;border-radius:12px;flex-direction:column;flex:0 0 90px;gap:2px;min-height:0;padding:6px 12px;display:flex}.playerButtons{justify-content:center;align-items:center;gap:10px;display:flex}.playerButtons button,.playerButtons select{padding:4px 12px;font-size:12px}.playerButtons label{color:#adc4dc;font-size:12px}.scrubber{width:100%;height:14px;margin:0;display:block}.chapters{justify-content:space-between;gap:2px;min-width:0;display:flex}.chapters button{border-radius:4px;flex:1;min-width:0;padding:2px 0;font-size:10px}.chapters .active{color:#18263b;background:#c99546;font-weight:700}@media (width<=930px){.workspace{grid-template-columns:minmax(0,1fr) 285px}.legend{display:none}.sidePanel{padding:8px}.topbar{flex-basis:54px}.codePanel{flex-basis:185px}}@media (width<=620px){.app{gap:5px;padding:5px}.topbar{flex-basis:45px;padding:5px}.brand strong{font-size:14px}.brand span,.sourceTag{display:none}.workspace{grid-template-columns:minmax(0,1fr) 145px;gap:5px}.panelTop strong{font-size:12px}.panelTop{padding:5px}.narrative{padding:5px;font-size:11px}.disclaimer{font-size:9px}.sidePanel{gap:4px;padding:6px}.tabs button{padding:3px 0;font-size:10px}.sideContent{font-size:10px}.sideContent h2{font-size:12px}.settings{gap:5px}.settings .two{display:block}.settings label{font-size:10px}.settings select{padding:4px;font-size:10px}.settings input[type=number]{padding:4px}.actionRow{flex-direction:column}.actionRow button{padding:5px}.codePanel{flex-basis:165px}.codePanel.collapsed{flex-basis:32px}.codeTop strong{display:none}.codeBody textarea,.codeBody pre{font-size:9px}.player{flex-basis:70px;padding:3px}.playerButtons{gap:3px}.playerButtons button{padding:2px 5px}.chapters button{padding:1px 0;font-size:8px}}@media (height<=650px){.topbar{flex-basis:43px}.brand span{display:none}.codePanel{flex-basis:155px}.codePanel.collapsed{flex-basis:35px}.player{flex-basis:72px}.settings{gap:4px}.narrative{padding:4px 12px}}.canvasWrap{flex:1 1 0;width:100%;min-height:0;position:relative;overflow:hidden}.visualPanel .canvasWrap canvas{width:100%;height:100%;display:block}.oldCanvas{pointer-events:none;opacity:1;object-fit:fill;width:100%;height:100%;transition:opacity .48s;position:absolute;inset:0}.oldCanvas.fading{opacity:0}.advanced{color:#bed1e7;border:1px solid #35516e;border-radius:7px;padding:6px;font-size:11px}.advanced summary{cursor:pointer}.advanced label{margin-top:6px}.tabs{z-index:2;background:#14253c;flex:none;grid-template-columns:repeat(4,minmax(0,1fr));padding:2px 0;position:sticky;top:-11px}.tabs button{white-space:nowrap;padding:7px 2px;font-size:11px}.sideContent.lessonFlow{flex-direction:column;flex:1;gap:7px;min-height:0;display:flex;overflow:hidden}.learningGoal{background:#213852;border-right:3px solid #e6b96b;border-radius:7px;flex:none;padding:8px 10px}.learningGoal>b{color:#e9c78b;font-size:11px}.learningGoal p{margin:2px 0 0;font-size:12px;line-height:1.55}.sequenceTitle{flex:none;justify-content:space-between;align-items:center;margin:2px 0;font-size:13px;font-weight:700;display:flex}.sequenceTitle span{color:#a7c2e4;font-size:10px;font-weight:500}.teachingSteps{flex:none;grid-template-columns:minmax(0,1fr);gap:4px;margin:0;padding:0;list-style:none;display:grid}.teachingSteps li{min-width:0}.teachingStep{text-align:right;background:#172d44;border:1px solid #2d465f;border-radius:8px;align-items:center;gap:8px;width:100%;min-height:34px;padding:6px 8px;transition:background-color .22s,border-color .22s,transform .22s;display:flex}.teachingStep:hover{background:#2c4662}.teachingStep.isActive{background:#31475f;border-color:#e1b36a;box-shadow:inset 3px 0 #e7bd70}.stepNumber{color:#aaccf2;font-variant-numeric:tabular-nums;background:#2b4867;border-radius:7px;flex:0 0 23px;justify-content:center;align-items:center;height:23px;font-size:11px;display:flex}.isActive .stepNumber{color:#182535;background:#e7bd70;font-weight:800}.stepName{flex:1;min-width:0;font-size:11px;line-height:1.45}.stepNow{color:#f1c982;white-space:nowrap;font-size:9px}.stepDone{color:#9fd9ba;font-size:12px}.activeTeaching{background:#102238;border:1px solid #344f69;border-radius:9px;flex:1;min-height:0;padding:10px;overflow:auto}.activeTeachingKicker{color:#e2b96f;margin-bottom:4px;font-size:10px;display:block}.activeTeaching>strong{font-size:14px;display:block}.activeTeaching p{margin:5px 0;font-size:12px;line-height:1.7}.demonstration{background:#1f3851;border-radius:7px;padding:8px;font-size:11px;line-height:1.65}.demonstration b{color:#efd49f}.learningCheckpoint{color:#d0e6df;background:#1f3c46;border-radius:7px;flex:none;padding:7px 9px;font-size:11px;line-height:1.55}.learningCheckpoint b{color:#a1d8c1}.narrative{align-items:flex-start;gap:9px;min-height:43px;display:flex}.narrative strong{color:#ffd58a;white-space:nowrap;font-size:12px}.narrative span{flex:1;min-width:0}.playerStepCounter{color:#e8c488;background:#273a4f;border-radius:7px;padding:5px 9px;font-size:11px}.settings{flex:1;min-height:0;margin-top:0;overflow:auto}@media (width<=930px){.stepNow{display:none}.teachingStep{gap:5px;padding:6px}.tabs button{font-size:10px}}@media (width<=620px){.tabs{top:-6px}.tabs button{padding:4px 0;font-size:9px}.sideContent.lessonFlow{gap:4px;overflow:auto}.learningGoal{padding:6px}.learningGoal p{font-size:10px}.sequenceTitle{font-size:11px}.teachingSteps{gap:3px}.teachingStep{gap:4px;min-height:32px;padding:4px}.stepNumber{flex-basis:18px;height:18px;font-size:9px}.stepName{font-size:10px;line-height:1.35}.activeTeaching{flex:none;padding:7px;overflow:visible}.activeTeaching>strong{font-size:11px}.activeTeaching p,.demonstration,.learningCheckpoint{font-size:10px}.narrative{display:block}.narrative strong{white-space:normal;font-size:11px;display:block}.narrative span{font-size:10px;line-height:1.45}.playerStepCounter{padding:4px;font-size:10px}}.sidePanel{gap:8px}.classroomSlide{flex-direction:column;flex:1;gap:12px;min-height:0;font-size:14px;display:flex;overflow:hidden}.slideHeader{flex:none;justify-content:space-between;align-items:center;gap:10px;display:flex}.slideChapter{color:#b2c8df;white-space:nowrap;text-overflow:ellipsis;max-width:235px;font-size:12px;overflow:hidden}.slideProgressLabel{color:#f9d393;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px;font-weight:750}.slideProgress{flex:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;display:grid}.slideTick{color:#93b0cf;background:#1a3047;border:1px solid #3f5470;border-radius:8px;height:31px;padding:0;font-size:11px;transition:background .25s,border-color .25s,transform .2s;position:relative}.slideTick:hover{transform:translateY(-1px)}.slideTick.completed{color:#b2e5d5;background:#284f4d;border-color:#4c8b7d}.slideTick.current{color:#192c3c;background:#e6bc73;border-color:#ffdfa1;font-weight:900;box-shadow:0 0 0 2px #e3bb6840}.slideContent{flex-direction:column;flex:1;gap:9px;min-height:0;padding:7px 1px 3px;display:flex;overflow:auto}.slideNumber{letter-spacing:.05em;color:#ebbf78;font-size:11px}.slideTitle{color:#fcf3df;margin:0;font-size:clamp(19px,1.5vw,24px);font-weight:800;line-height:1.45}.slideExplanation{color:#e7eef9;margin:2px 0;font-size:clamp(14px,1.15vw,17px);font-weight:500;line-height:2.05}.slideVisual{background:linear-gradient(115deg,#2d3445,#1b3047);border:1px solid #ad8444;border-right:4px solid #e0b673;border-radius:10px;margin-top:auto;padding:13px 12px}.slideVisualLabel{color:#f7d694;align-items:center;gap:6px;margin-bottom:8px;font-size:12px;font-weight:750;display:flex}.slideVisualIcon{font-size:18px}.slideVisual p{color:#dbe6f4;margin:0;font-size:13px;line-height:1.8}.slideTakeaway{background:#183d40;border:1px solid #456b68;border-radius:9px;padding:9px 11px}.slideTakeaway strong{color:#a6e4cf;font-size:12px}.slideTakeaway p{color:#e0f7ef;margin:5px 0 0;font-size:12px;line-height:1.65}.slideNavigation{flex:none;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px;display:grid}.slideNavigation button{min-height:45px;font-size:16px;font-weight:700}.slideNavigation .slideNext{box-shadow:0 3px 16px #d4a35d29}.slideNext span{margin-right:8px;font-size:18px}.slideKeyboardHint{text-align:center;color:#8da9c9;flex:none;font-size:10px}.slideKeyboardHint kbd{color:#b9d1e9;border:1px solid #405773;border-radius:3px;padding:1px 4px;font:10px monospace}.classroomCaption{border-top:1px solid #38546f;align-items:center;gap:12px;min-height:56px;display:flex}.classroomCaption strong{color:#f6cd7c;font-size:clamp(14px,1.15vw,17px)}.classroomCaption span{font-size:clamp(12px,1vw,14px);line-height:1.7}@media (width>=1440px){.workspace{grid-template-columns:minmax(0,1fr) 368px}.sidePanel{padding:16px}.slideExplanation{font-size:17px}.slideTitle{font-size:24px}.slideVisual p{font-size:14px}}@media (width<=930px){.classroomSlide{gap:9px}.slideContent{gap:7px}.slideTitle{font-size:20px}.slideExplanation{font-size:14px;line-height:1.8}.slideVisual{padding:8px}.slideVisual p{font-size:12px}.slideNavigation button{min-height:39px;font-size:14px}.slideChapter{font-size:11px}}@media (width<=620px){.classroomSlide{gap:5px}.slideHeader{display:none}.slideProgress{gap:2px}.slideTick{border-radius:4px;height:21px;font-size:9px}.slideContent{gap:5px;overflow:auto}.slideNumber{font-size:9px}.slideTitle{font-size:13px;line-height:1.5}.slideExplanation{font-size:11px;line-height:1.6}.slideVisual{border-right-width:2px;margin-top:3px;padding:6px}.slideVisualLabel{margin-bottom:3px;font-size:9px}.slideVisualIcon{font-size:11px}.slideVisual p{font-size:10px;line-height:1.5}.slideNavigation{gap:3px}.slideNavigation button{min-height:32px;padding:3px;font-size:10px}.slideNext span{margin-right:1px;font-size:12px}.slideKeyboardHint{display:none}.slideTakeaway{padding:5px}.slideTakeaway strong,.slideTakeaway p{font-size:9px}.classroomCaption{min-height:48px;padding:5px;display:block}.classroomCaption strong{font-size:11px;display:block}.classroomCaption span{font-size:10px;line-height:1.4;display:block}.tabs button{font-size:9px}}@media (height<=650px) and (width>=621px){.slideContent{gap:5px}.slideExplanation{font-size:14px;line-height:1.7}.slideVisual{padding:8px}.slideNavigation button{min-height:34px}.slideKeyboardHint{display:none}}.stepExperiment{color:#e2edf9;background:#203950;border:1px solid #53738d;border-radius:10px;flex-direction:column;gap:8px;max-width:100%;padding:10px;font-size:12px;display:flex}.stepExperiment>label{color:#e7c58d;font-size:12px;font-weight:700}.stepExperiment input[type=range]{accent-color:#f1bd66;width:100%}.stepExperiment>button{min-height:34px}.stepExperiment>span{color:#aec9e0;font-size:10px;line-height:1.5}.stepExperiment>strong{color:#a9e7d1;font-size:12px}@media (width<=620px){.stepExperiment{gap:4px;padding:5px}.stepExperiment>label{font-size:10px}.stepExperiment>button{padding:4px;font-size:10px}.stepExperiment>span{font-size:9px}}.panelTop{gap:10px;min-width:0}.focusToolbar{flex:none;align-items:center;gap:5px;margin-right:auto;display:flex}.focusOption{color:#aec3da;background:#1b2e45;border-color:#36536e;border-radius:7px;min-height:29px;padding:5px 9px;font-size:11px;transition:background-color .2s,border-color .2s}.focusOption.active{color:#ffe0aa;background:#3c3b3e;border-color:#ba9455}.focusOption:focus-visible{outline-offset:2px;outline:2px solid #ffe1a1}@media (width<=1100px){.panelTop .legend{display:none}.focusOption{padding:4px 7px;font-size:10px}}@media (width<=620px){.panelTop,.focusToolbar{gap:3px}.focusOption{min-height:24px;padding:3px;font-size:9px}.focusOption:first-child{white-space:nowrap;text-overflow:ellipsis;max-width:86px;overflow:hidden}.panelTop strong{max-width:42%;line-height:1.3}}@media (prefers-reduced-motion:reduce){.oldCanvas,.slideTick,.focusOption,.teachingStep{transition:none!important;animation:none!important}}@media (height<=900px){.classroomSlide{gap:5px}.slideContent{gap:4px;padding:3px 0}.slideTitle{font-size:clamp(13px,1.4vw,19px);line-height:1.35}.slideExplanation{margin:0;font-size:clamp(11px,1.05vw,14px);line-height:1.65}.slideVisual{margin-top:3px;padding:6px 8px}.slideVisualLabel{margin-bottom:3px;font-size:11px}.slideVisual p{font-size:11px;line-height:1.45}.slideTakeaway{padding:5px 8px}.slideTakeaway p{margin-top:2px;font-size:11px;line-height:1.4}.stepExperiment{gap:4px;padding:6px 8px}.stepExperiment input[type=range]{height:14px;margin:0}.slideNavigation button{min-height:37px}.slideKeyboardHint{display:none}}@media (height<=800px) and (width>=621px){.stepExperiment:has(input[type=range]:nth-child(2)){gap:3px}.stepExperiment label{font-size:11px}.slideContent{gap:3px}.slideProgress .slideTick{height:27px}}@media (width<=380px) and (height<=680px){.classroomSlide{gap:3px}.slideContent{gap:2px}.slideNumber{display:none}.slideExplanation{font-size:10px;line-height:1.4}.slideTitle{font-size:12px;line-height:1.25}.slideVisual{padding:3px 4px}.slideVisualLabel{margin-bottom:1px;font-size:9px}.slideVisual p{font-size:9px;line-height:1.3}.slideTakeaway{padding:3px 4px}.slideTakeaway strong,.slideTakeaway p{font-size:9px;line-height:1.25}.stepExperiment{gap:2px;padding:3px}.stepExperiment label{font-size:9px}.stepExperiment input[type=range]{height:12px}.slideNavigation button{min-height:28px}}.regLegend{white-space:nowrap;color:#bdcfe3;align-items:center;gap:9px;font-size:10px;display:flex}.regLegend .legendTrain{color:#71aef4}.regLegend .legendValidation{color:#b9a1ee}.regLegend .legendTest{color:#8ad5ac}.regLegend .legendModel{color:#f2c577}@media (width<=1050px){.regLegend{display:none}}.canvasWrap canvas{touch-action:none;cursor:crosshair}.canvasWrap canvas:active{cursor:grabbing}