*{box-sizing:border-box;margin:0;padding:0}html{background-color:var(--bg-primary);overscroll-behavior:none}body{overscroll-behavior:none;font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);direction:inherit;text-align:start;min-height:100vh;line-height:1.6;position:relative;overflow-x:clip}main{--font-display:"Cairo", "IBM Plex Sans Arabic", sans-serif;--font-body:"IBM Plex Sans Arabic", "Cairo", sans-serif;font-family:var(--font-body)}html.is-theme-wiping body{transition:background-color var(--transition-normal), color var(--transition-normal)}.container{width:100%;max-width:1200px;padding-left:max(var(--spacing-lg), env(safe-area-inset-left,0px));padding-right:max(var(--spacing-lg), env(safe-area-inset-right,0px));margin-left:auto;margin-right:auto}a{color:inherit;text-decoration:none}body{background-image:linear-gradient(90deg,#00000003 1px,#0000 1px),linear-gradient(#00000003 1px,#0000 1px);background-size:80px 80px}[data-theme=dark] body{background-image:linear-gradient(90deg,#ffffff02 1px,#0000 1px),linear-gradient(#ffffff02 1px,#0000 1px)}.halftone-bg{background-color:var(--bg-dots);width:100%;height:100%;-webkit-mask-image:var(--chart-mask);mask-image:var(--chart-mask);-webkit-mask-size:var(--chart-tile);mask-size:var(--chart-tile);opacity:1;pointer-events:none;z-index:0;position:absolute;top:0;left:0;-webkit-mask-repeat:repeat;mask-repeat:repeat}:root{--chart-tile:1500px}@media (width<=720px){:root{--chart-tile:900px}}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-primary);font-weight:800;line-height:1.25}.main-header{height:var(--header-h);z-index:100;padding-block:calc(env(safe-area-inset-top,0px) + var(--header-pad-top)) var(--header-pad-bottom);pointer-events:none;background:0 0;border:0;padding-inline:0;position:sticky;top:0}.section-title-comic{margin-bottom:1.1rem;font-size:2.2rem;font-weight:900;display:inline-block;position:relative}.section-title-comic:after{content:"";bottom:-.5em;border:1.5px solid var(--border-color);background:repeating-linear-gradient(to left, var(--border-color) 0 1.5rem, transparent 1.5rem 3rem);width:min(100%,15rem);height:7px;position:absolute;inset-inline-start:0}.study-volume-badge{color:#fff;font-family:var(--font-comic);text-shadow:1px 1px #00000080;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50' preserveAspectRatio='none'><path d='M 10,25 C 15,12 30,6 60,5 C 90,4 110,12 115,22 C 120,32 105,42 80,45 C 55,48 25,45 10,40 C -5,35 5,38 10,25 Z' fill='%23dc2626'/><circle cx='112' cy='38' r='3' fill='%23dc2626'/><circle cx='8' cy='15' r='2.5' fill='%23dc2626'/><circle cx='95' cy='12' r='2' fill='%23dc2626'/></svg>");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-radius:0;padding:.5rem 1.1rem;font-size:1.05rem;display:inline-block;transform:rotate(-3deg)}@media (width<=600px){.container{padding-left:max(12px, env(safe-area-inset-left,0px));padding-right:max(12px, env(safe-area-inset-right,0px))}}#subjectView,#lessonReaderView,#studyView,#offlineView,#dataView,#privacyView,#loginView,#teamView,#leaderView,#roomView,#missingView{display:none}html[data-boot-view=reader] #lessonReaderView,html[data-boot-view=subject] #subjectView,html[data-boot-view=study] #studyView,html[data-boot-view=offline] #offlineView,html[data-boot-view=data] #dataView,html[data-boot-view=privacy] #privacyView,html[data-boot-view=login] #loginView,html[data-boot-view=team] #teamView,html[data-boot-view=leader] #leaderView,html[data-boot-view=room] #roomView,html[data-boot-view=missing] #missingView{display:block}html[data-boot-view]:not([data-boot-view=home]) #homeView{display:none}@media print{body{color:#000!important;background:#fff!important}.main-header,.halftone-bg,#themeToggle{display:none!important}.view-panel{display:block!important}}html.has-quiz-open .main-header,html.has-quiz-open .edge-back{visibility:hidden;pointer-events:none}html.has-quiz-open .island.is-inking .island-ink{visibility:hidden}.edge-back{z-index:120;top:var(--edge-tab-top,72%);color:#04121f;background:var(--accent-orange);letter-spacing:0;text-transform:uppercase;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px),0 8px);border:0;flex-direction:column;align-items:center;gap:6px;width:38px;padding:9px 0 10px;font-family:Mona Sans,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:750;font-stretch:100%;line-height:1;display:flex;position:fixed;translate:0 -50%}.edge-back[data-edge=start],html[data-edge-tab=start] .edge-back{inset-inline:0 auto}.edge-back[data-edge=end],html[data-edge-tab=end] .edge-back{inset-inline:auto 0}html[dir=rtl] .edge-back[data-edge=end],html[dir=rtl][data-edge-tab=end] .edge-back,html:not([dir=rtl]) .edge-back[data-edge=start],html:not([dir=rtl])[data-edge-tab=start] .edge-back{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}html[dir=rtl][data-edge-tab=end] .edge-back-word,html:not([dir=rtl])[data-edge-tab=start] .edge-back-word{rotate:180deg}.edge-back-icon{width:15px;height:15px;transition:rotate .45s var(--ease-out), translate .3s var(--ease-out);flex:none}.edge-back-word{writing-mode:vertical-rl;direction:ltr;display:block;overflow:hidden}.edge-back-say{transition:translate .45s cubic-bezier(.2,.8,.1,1);display:none;position:relative}.edge-back-say:after{content:attr(data-text);position:absolute;top:calc(100% + 10px);left:0}.edge-back:not(.is-refresh) .edge-back-say.is-back,.edge-back.is-refresh .edge-back-say.is-refresh{display:block}@media (hover:hover) and (pointer:fine){.edge-back:hover .edge-back-say{translate:0 calc(-100% - 10px)}.edge-back.is-refresh:hover .edge-back-icon{rotate:180deg}.edge-back:not(.is-refresh):hover .edge-back-icon{translate:2px}[dir=rtl] .edge-back:not(.is-refresh):hover .edge-back-icon{translate:-2px}}.edge-back:focus-visible{outline:none}@media (hover:hover) and (pointer:fine){.edge-back:hover{color:#04121f;background:#f4f9fc}}.edge-back:focus-visible{color:#04121f;background:#f4f9fc}.edge-back.is-dragging{cursor:grabbing;color:var(--accent-orange);background:#04121f;transition:none}@media (hover:hover) and (pointer:fine){.edge-back.is-dragging:hover{cursor:grabbing;color:var(--accent-orange);background:#04121f;transition:none}}[data-theme=dark] .edge-back.is-dragging{color:#04121f;background:#f4f9fc}@media (hover:hover) and (pointer:fine){[data-theme=dark] .edge-back.is-dragging:hover{color:#04121f;background:#f4f9fc}}.edge-back.is-tucked{opacity:0;pointer-events:none;transform:translate(-100%)}html[dir=rtl][data-edge-tab=start] .edge-back.is-tucked,html:not([dir=rtl])[data-edge-tab=end] .edge-back.is-tucked{transform:translate(100%)}[dir=rtl] .edge-back-arrow{transform-origin:50%;transform:rotate(180deg)}.edge-back .edge-back-refresh,.edge-back.is-refresh .edge-back-arrow{display:none}.edge-back.is-refresh .edge-back-refresh{display:block}.edge-back-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:where(html[data-lite]) .edge-back-icon,:where(html[data-lite]) .edge-back-say{transition:none}@media (hover:hover) and (pointer:fine){:where(html[data-lite]) .edge-back:hover .edge-back-say,:where(html[data-lite]) .edge-back:hover .edge-back-icon{translate:none;rotate:none}}.theme-ink{background:var(--bg-primary);z-index:2147483646;pointer-events:none;will-change:transform, opacity;border-radius:50%;width:96px;height:96px;margin:-48px 0 0 -48px;position:fixed;top:0;left:0;transform:scale(0)}html.is-theme-wiping:after{content:"";z-index:2147483647;pointer-events:none;background-color:var(--bg-dots);-webkit-mask-image:var(--chart-mask);mask-image:var(--chart-mask);-webkit-mask-size:var(--chart-tile);mask-size:var(--chart-tile);opacity:0;animation:theme-screentone var(--dur-focal) var(--ease-out);position:fixed;inset:0}@keyframes theme-screentone{0%{opacity:0}35%{opacity:.5}to{opacity:0}}.python-lesson-card{transition:translate var(--dur-tap) var(--ease-out), box-shadow var(--dur-tap) var(--ease-out), opacity var(--dur-state) ease, background-color var(--dur-state) ease, color var(--dur-state) ease, border-color var(--dur-state) ease}.edge-back{transition:scale var(--dur-tap) var(--ease-out), transform .26s cubic-bezier(.2, .7, .2, 1), opacity var(--dur-state) ease, background-color var(--dur-state) ease, color var(--dur-state) ease}@media (hover:hover) and (pointer:fine){.edge-back:active{scale:.96}}.edge-back.is-dragging{transition:none;translate:0 -50%;scale:1}@media (hover:hover) and (pointer:fine){.edge-back.is-dragging:active{transition:none;translate:0 -50%;scale:1}.python-lesson-card:active{translate:3px 3px;box-shadow:1px 1px 0 var(--shadow-color)!important}}.page-wipe{z-index:2147483645;pointer-events:none;position:fixed;inset:0;overflow:hidden}.page-wipe-slab{border-inline:7px solid var(--accent-yellow);contain:strict;background-color:#06192c;background-image:linear-gradient(#0a2947 0%,#06192c 58%,#041322 100%);width:calc(100vw + 26vh);position:absolute;top:-4vh;bottom:-4vh;left:-13vh;transform:translate(100%)skew(-12deg)}.page-wipe.is-active .page-wipe-slab{will-change:transform}.page-wipe-slab:after{content:"";-webkit-mask-image:var(--chart-mask);mask-image:var(--chart-mask);-webkit-mask-size:var(--chart-tile);mask-size:var(--chart-tile);background-color:#5ebaf029;position:absolute;inset:0}.page-wipe-slab:before{content:"";border-inline:3px solid var(--bg-primary);pointer-events:none;position:absolute;inset:0 -14px}@keyframes stamp-in{0%{opacity:0;translate:0 10px;scale:.94}to{opacity:1;translate:0;scale:1}}.is-entering .sheet-head{animation:stamp-in var(--dur-view) var(--ease-out) .12s backwards}.is-entering .python-lesson-card{animation:stamp-in var(--dur-view) var(--ease-stamp) backwards}.is-entering .python-lesson-card:first-child{animation-delay:.2s}.is-entering .python-lesson-card:nth-child(2){animation-delay:.28s}.is-entering .python-lesson-card:nth-child(3){animation-delay:.36s}.is-entering .python-lesson-card:nth-child(4){animation-delay:.44s}:where(html[data-lite]) .is-entering,:where(html[data-lite]) .is-entering *{animation:none!important}@media (hover:hover) and (pointer:fine){:where(html[data-lite]) .edge-back:active{translate:0 -50%}:where(html[data-lite]) .python-lesson-card:active{translate:none}}html.is-theme-wiping:after:where(){animation:none}.python-lesson-card.is-launching{transition:transform .16s cubic-bezier(.2,.8,.2,1);transform:translateY(-8px)scale(1.015)}#lessonReaderView.is-launched>.container{animation:.28s cubic-bezier(.2,.8,.2,1) both lesson-launch}@keyframes lesson-launch{0%{opacity:0;transform:translateY(16px)scale(.985)}}.browser-edge{z-index:9990;pointer-events:none;background:var(--browser-tint,var(--bg-primary));position:fixed;left:0;right:0}.browser-edge.is-top{height:max(1px, env(safe-area-inset-top,0px));top:0}.browser-edge.is-bottom{height:max(1px, env(safe-area-inset-bottom,0px));bottom:0}@media print{.browser-edge{display:none}}@supports not (-webkit-touch-callout:none){.browser-edge{display:none}}