/* How I got First Honors: a five-scene story driven by scroll. Every animated part is .hs;
   where supported it runs on a native scroll timeline, otherwise honors.js scrubs it with --p. */
.h-hero{padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:24px;display:flex;flex-direction:column;gap:12px}
.h-hero h1{margin:0;font-size:clamp(38px,7vw,72px);line-height:1.02;font-weight:400;letter-spacing:-.03em}
.h-hero .gold{color:var(--bronze)}
.story-track{position:relative;height:620vh;height:620svh}
.story-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding-top:calc(70px + env(safe-area-inset-top,0px))}
.canvas{position:relative;width:min(94vw,520px,calc((100svh - 230px) * .8));aspect-ratio:4/5;border-radius:22px;background:#EDE5D3;box-shadow:inset 0 0 0 1.5px #DCCFB4}
@media (min-width:900px){.canvas{width:min(80vw,980px,calc((100svh - 240px) * 1.6));aspect-ratio:16/10}}
.scene{position:absolute;inset:0;container-type:size}
.hs{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-iteration-count:1;animation-play-state:paused;animation-delay:calc(var(--p,0) * -1s)}
@supports (animation-timeline: view()){
html.stl .story-track{view-timeline:--honors block}
html.stl .hs{animation-timeline:--honors;animation-range:contain 0% contain 100%;animation-duration:auto;animation-delay:0s;animation-play-state:running}
}
/* ---------- scene 1: Blackboard on a monitor ---------- */
.monitor{position:absolute;left:7cqw;right:7cqw;top:6cqh;height:72cqh;background:#FFFCF5;border:2px solid #1C1A16;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px rgba(28,26,22,.18)}
.stand{position:absolute;left:42cqw;right:42cqw;top:78cqh;height:9cqh;background:#3D382F;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
.mbar{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:#1C1A16;color:#F5F0E6;font-size:12px}
.mbar i{width:8px;height:8px;border-radius:50%;background:#5E5648}.mbar i:first-child{background:#FF4750}
.mbar span{margin-inline-start:8px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbody{display:flex;height:calc(100% - 30px)}
.mside{display:none;flex-direction:column;gap:8px;width:26%;padding:14px 10px;background:#F1EADB;font-size:13px;color:#5E5648}
.mside .on{color:#1C1A16;font-weight:600}
@container (min-width:520px){.mside{display:flex}}
.mmain{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.mh{margin:0;font-size:13px;color:#5E5648}
.toast{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:#fff;border:1.5px solid #E2D7C1;font-size:clamp(12px,3.4cqh,15px);line-height:1.3}
.toast i{flex:none;width:10px;height:10px;margin-top:4px;border-radius:2px;background:#FF4750}
.toast small{display:block;color:#5E5648;font-size:.86em}
/* ---------- scene 2: into one folder per course ---------- */
.mini{position:absolute;left:50cqw;top:4cqh;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 12px;background:#1C1A16;color:#F5F0E6;border-radius:999px;font-size:13px}
.flyer{position:absolute;left:calc(50cqw - 11px);top:8cqh;opacity:0}
.tree{position:absolute;left:8cqw;right:8cqw;top:20cqh;bottom:4cqh;display:flex;flex-direction:column;gap:1.4cqh}
.tree-h{margin:0;font:13px ui-monospace,Consolas,monospace;color:#5E5648}
.fold{display:flex;align-items:center;gap:12px;height:10.5cqh;padding:0 10px;background:#FFFCF5;border-radius:10px;border:1.5px solid #E2D7C1}
.fico{position:relative;line-height:0}
.cnt{position:absolute;top:-8px;right:-14px;padding:2px 6px;border-radius:999px;background:#1F6B52;color:#fff;font:600 11px var(--font);line-height:1.2;opacity:0}
.fname{display:flex;flex-direction:column;font-size:clamp(12px,3.2cqh,15px);line-height:1.2;min-width:0}
.fname small{color:#5E5648;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- scene 3: AI turns lectures into practice ---------- */
.ai{position:absolute;inset:5cqh 6cqw;display:flex;flex-direction:column;gap:3cqh}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tools span{padding:7px 12px;border-radius:999px;border:1.5px solid #CDBF9F;font-size:clamp(12px,3.2cqh,15px);background:#FFFCF5}
.prompt{margin:0;padding:12px 14px;background:#1C1A16;color:#F5F0E6;border-radius:14px 14px 14px 4px;font-size:clamp(13px,3.4cqh,16px);line-height:1.35}
.prompt span{display:inline-block}
.outs{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.out{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:12px;border-radius:14px;background:#FFFCF5;border:1.5px solid #E2D7C1;font-size:clamp(13px,3.4cqh,16px)}
.out:nth-child(1){background:#E7F3EC}.out:nth-child(2){background:#FCEFD9}.out:nth-child(3){background:#E5EEF9}.out:nth-child(4){background:#F7E3E1}
.out small{color:#5E5648;font-size:.82em;line-height:1.3}
/* ---------- scene 4: practising on a phone ---------- */
.phone{position:absolute;top:4cqh;bottom:4cqh;left:50cqw;width:min(64cqw,330px);transform:translateX(-50%);padding:14px;border:3px solid #1C1A16;border-radius:26px;background:#FFFCF5;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.pbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#5E5648}
.score{position:relative;display:inline-flex;gap:3px;color:#1F6B52}
.dg{position:relative;display:inline-block}.dg span{display:inline-block}.dg .h-sc2{position:absolute;left:0;top:0}
.q{margin:0;font-size:clamp(13px,3.6cqh,16px);line-height:1.35}
.opts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.opt{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;border:1.5px solid #E2D7C1;font-size:clamp(12px,3.2cqh,15px);line-height:1.25}
.opt span{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:#EDE5D3;font-size:12px}
.opt.ok{background:#E7F3EC;border-color:#1F6B52}
.why{margin:0;padding:8px 10px;border-radius:10px;background:#FCEFD9;font-size:clamp(11px,3cqh,14px);line-height:1.35}
/* ---------- scene 5: the result ---------- */
.s5{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqh;text-align:center}
.res-l,.res-of{margin:0;color:#5E5648;font-size:clamp(14px,4cqh,18px)}
.odo{display:flex;align-items:flex-start;font-size:clamp(64px,24cqh,190px);line-height:1;height:1em;overflow:hidden;color:#1F6B52;letter-spacing:-.03em}
.reel{display:flex;flex-direction:column}.reel i{font-style:normal;height:1em}
.seal{margin-top:2cqh;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(120px,36cqh,200px);aspect-ratio:1;border-radius:50%;border:3px double #8A4A2E;color:#8A4A2E;background:#FBF3E2;transform:rotate(-8deg);font-size:clamp(11px,3cqh,14px)}
.seal b{font-weight:400;font-size:2.2em;line-height:1;margin:.1em 0}
.seal span{max-width:80%}
/* ---------- captions and progress ---------- */
.steps-cap{position:relative;width:min(92vw,620px);min-height:76px;margin:0;padding:0;list-style:none}
.steps-cap li{position:absolute;inset:0;display:flex;gap:12px;align-items:flex-start;font-size:clamp(16px,2vw,19px);line-height:1.35}
.steps-cap b{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#1C1A16;color:#E8B84A;font-weight:400}
.hrail{position:absolute;top:30%;height:40%;inset-inline-end:12px;width:5px;border-radius:3px;background:rgba(28,26,22,.15);overflow:hidden}
.hrail i{position:absolute;inset:0;background:var(--gold-2);transform-origin:top}
/* ---------- keyframes: positions on the story (0-100%) ---------- */
.h-s1{animation-name:h-s1}.h-s2{animation-name:h-s2}.h-s3{animation-name:h-s3}.h-s4{animation-name:h-s4}.h-s5{animation-name:h-s5}
@keyframes h-s1{0%,17%{opacity:1;transform:none}21%,100%{opacity:0;transform:translateY(-24px)}}
@keyframes h-s2{0%,19%{opacity:0;transform:translateY(24px)}23%,39%{opacity:1;transform:none}43%,100%{opacity:0;transform:translateY(-24px)}}
@keyframes h-s3{0%,41%{opacity:0;transform:translateY(24px)}45%,61%{opacity:1;transform:none}65%,100%{opacity:0;transform:translateY(-24px)}}
@keyframes h-s4{0%,63%{opacity:0;transform:translateY(24px)}67%,80%{opacity:1;transform:none}84%,100%{opacity:0;transform:translateY(-24px)}}
@keyframes h-s5{0%,82%{opacity:0;transform:translateY(24px)}86%,100%{opacity:1;transform:none}}
.h-mon{animation-name:h-mon}@keyframes h-mon{0%{transform:scale(.92)}5%,100%{transform:none}}
.h-t1{animation-name:h-t1}.h-t2{animation-name:h-t2}.h-t3{animation-name:h-t3}
@keyframes h-t1{0%,3%{opacity:0;transform:translateX(30px)}7%,100%{opacity:1;transform:none}}
@keyframes h-t2{0%,7%{opacity:0;transform:translateX(30px)}11%,100%{opacity:1;transform:none}}
@keyframes h-t3{0%,11%{opacity:0;transform:translateX(30px)}15%,100%{opacity:1;transform:none}}
.h-fly1{animation-name:h-fly1}.h-fly2{animation-name:h-fly2}.h-fly3{animation-name:h-fly3}



.h-f1,.h-f2,.h-f3,.h-f4,.h-f5,.h-f6{animation-name:h-f}
@keyframes h-f{0%,20%{opacity:0;transform:translateX(-14px)}25%,100%{opacity:1;transform:none}}
.h-c1{animation-name:h-c1}.h-c3{animation-name:h-c3}.h-c5{animation-name:h-c5}
@keyframes h-c1{0%,29%{opacity:0;transform:scale(.4)}31%{opacity:1;transform:scale(1.25)}33%,100%{opacity:1;transform:none}}
@keyframes h-c3{0%,34%{opacity:0;transform:scale(.4)}36%{opacity:1;transform:scale(1.25)}38%,100%{opacity:1;transform:none}}
@keyframes h-c5{0%,38%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.25)}41%,100%{opacity:1;transform:none}}
.h-ai1{animation-name:h-ai1}.h-ai2{animation-name:h-ai2}.h-ai3{animation-name:h-ai3}.h-ai4{animation-name:h-ai4}
@keyframes h-ai1{0%,45%{background:#FFFCF5}46%,50%{background:#E8B84A}51%,100%{background:#FFFCF5}}
@keyframes h-ai2{0%,50%{background:#FFFCF5}51%,54%{background:#E8B84A}55%,100%{background:#FFFCF5}}
@keyframes h-ai3{0%,54%{background:#FFFCF5}55%,58%{background:#E8B84A}59%,100%{background:#FFFCF5}}
@keyframes h-ai4{0%,58%{background:#FFFCF5}59%,100%{background:#E8B84A}}
.h-type{animation-name:h-type}@keyframes h-type{0%,44%{clip-path:inset(0 100% 0 0)}49%,100%{clip-path:inset(0 0 0 0)}}
.h-o1{animation-name:h-o1}.h-o2{animation-name:h-o2}.h-o3{animation-name:h-o3}.h-o4{animation-name:h-o4}.h-o5{animation-name:h-o5}




.h-ok{animation-name:h-ok}@keyframes h-ok{0%,70%{background:#FFFCF5;border-color:#E2D7C1}72%,100%{background:#E7F3EC;border-color:#1F6B52}}
.h-why{animation-name:h-why}@keyframes h-why{0%,72%{opacity:0;transform:translateY(10px)}75%,100%{opacity:1;transform:none}}
.h-sc1{animation-name:h-sc1}.h-sc2{animation-name:h-sc2}
@keyframes h-sc1{0%,74%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes h-sc2{0%,74%{opacity:0;transform:translateY(8px)}76%,100%{opacity:1;transform:none}}
.h-r1{animation-name:h-r1}.h-r2{animation-name:h-r2}.h-r3{animation-name:h-r3}
@keyframes h-r1{0%,85%{transform:none}92%,100%{transform:translateY(-3em)}}
@keyframes h-r2{0%,85%{transform:none}94%,100%{transform:translateY(-8em)}}
@keyframes h-r3{0%,85%{transform:none}95.5%,100%{transform:translateY(-1em)}}
.h-seal{animation-name:h-seal}@keyframes h-seal{0%,94%{opacity:0;transform:scale(2.4) rotate(-24deg)}97.5%{opacity:1;transform:scale(.94) rotate(-6deg)}99%,100%{opacity:1;transform:rotate(-8deg)}}
.h-k1{animation-name:h-k1}.h-k2{animation-name:h-k2}.h-k3{animation-name:h-k3}.h-k4{animation-name:h-k4}.h-k5{animation-name:h-k5}
@keyframes h-k1{0%,18%{opacity:1}20%,100%{opacity:0}}
@keyframes h-k2{0%,20%{opacity:0}22%,40%{opacity:1}42%,100%{opacity:0}}
@keyframes h-k3{0%,42%{opacity:0}44%,62%{opacity:1}64%,100%{opacity:0}}
@keyframes h-k4{0%,64%{opacity:0}66%,81%{opacity:1}83%,100%{opacity:0}}
@keyframes h-k5{0%,83%{opacity:0}85%,100%{opacity:1}}
.h-rail{animation-name:h-rail}@keyframes h-rail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* ---------- no motion: the five scenes stacked, each in its finished state ---------- */
.reduce .hs,.no-js .hs{animation:none !important}
.reduce .story-track,.no-js .story-track{height:auto}
.reduce .story-stage,.no-js .story-stage{position:relative;height:auto;padding-top:0;gap:28px}
.reduce .canvas,.no-js .canvas{aspect-ratio:auto;background:none;box-shadow:none;display:flex;flex-direction:column;gap:20px}
.reduce .scene,.no-js .scene{position:relative;inset:auto;height:min(80vh,560px);border-radius:22px;background:#EDE5D3}
.reduce .flyer,.no-js .flyer,.reduce .h-sc1,.no-js .h-sc1,.reduce .steps-cap,.no-js .steps-cap,.reduce .hrail,.no-js .hrail{display:none}
.reduce .cnt,.no-js .cnt{opacity:1}
.reduce .seal,.no-js .seal{transform:rotate(-8deg)}
@media (prefers-reduced-motion:reduce){.hs{animation:none !important}}
/* ---------- the proof ---------- */
.proof{padding-bottom:64px}
.tops{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tops li{display:flex;gap:12px;align-items:center;padding:12px 14px;background:#FFFCF5;border:1.5px solid #E2D7C1;border-radius:12px}
.tops b{flex:none;min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#1F6B52;color:#fff;font-weight:400;font-size:17px}
.mats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mat{margin:0;display:flex;flex-direction:column;gap:8px}
.mat img{width:100%;height:auto;border-radius:12px;border:1.5px solid #E2D7C1;background:#fff}
.mat figcaption{font-size:15px;line-height:1.4;color:#3D382F}
.clist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.clist li{padding:10px 12px;border-radius:10px;background:#FFFCF5;border:1.5px solid #E2D7C1;font-size:15px}
.clist span{display:block;color:#5E5648;font-size:13px}
/* real materials, re-created */
.term,.files{border-radius:12px;overflow:hidden;background:#0E1013;color:#D7DCE3;border:1.5px solid #262B33}
.tbar{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:#1A1E25;font-size:12px;color:#8A93A3}
.tbar i{width:9px;height:9px;border-radius:50%;background:#3A404B}.tbar i:first-child{background:#FF5F57}.tbar i:nth-child(2){background:#FEBC2E}.tbar i:nth-child(3){background:#28C840}
.tbar span{margin-inline-start:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term pre{margin:0;padding:14px;overflow:auto;font:13px/1.6 ui-monospace,"Cascadia Code",Consolas,monospace;white-space:pre-wrap}
.tp{color:#C792EA}.tk{color:#FF8AD8}.tc{color:#7FDBFF}.tg{color:#7CD3A6}
.files ul{margin:0;padding:12px 14px 4px;list-style:none;display:flex;flex-direction:column;gap:8px;font:13px ui-monospace,Consolas,monospace}
.files li::before{content:"";display:inline-block;width:10px;height:12px;margin-inline-end:8px;background:#E8B84A;vertical-align:-1px}
.files b{font-weight:400;color:#fff}
.files p{margin:0;padding:8px 14px 14px;color:#8A93A3;font-size:13px;line-height:1.5}
/* ---------- how a lecture became practice: re-created tool screens ---------- */
.mocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:22px;align-items:start}
.mock{margin:0;display:flex;flex-direction:column;gap:10px}
.mock figcaption{font-size:15px;line-height:1.45;color:#3D382F}
.mk{border-radius:16px;overflow:hidden;border:1.5px solid #E2D7C1;box-shadow:0 10px 24px rgba(28,26,22,.08);font-size:14px;line-height:1.45}
.mk-bar{display:flex;align-items:baseline;gap:10px;padding:10px 14px;font-size:13px}
.mk-bar b{font-weight:400;font-size:15px}
.mk-bar span{opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@supports (animation-timeline: view()){.mk{animation:mock-in linear both;animation-timeline:view();animation-range:entry 0% entry 75%}}
@keyframes mock-in{from{translate:0 56px;rotate:-1.5deg}to{translate:0 0;rotate:0deg}}
/* chat */
.m-gpt{background:#212121;color:#ECECEC;border-color:#2F2F2F}
.m-gpt .mk-bar{background:#171717}
.g-body{display:flex;flex-direction:column;gap:12px;padding:14px}
.g-user{align-self:flex-end;max-width:86%;padding:10px 14px;border-radius:18px;background:#303030}
.g-file{display:block;width:max-content;max-width:100%;margin-bottom:6px;padding:4px 10px;border-radius:8px;background:#3F3F3F;font-size:12px;color:#CFCFCF}
.g-file::before{content:"";display:inline-block;width:9px;height:11px;margin-inline-end:6px;background:#E8B84A;vertical-align:-1px}
.g-bot p{margin:0 0 8px}
.g-bot pre{margin:0;padding:12px;border-radius:10px;background:#0D0D0D;color:#B5E8C8;font:12px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
/* notebook */
.m-nlm{background:#FFFFFF;color:#1F1F1F}
.m-nlm .mk-bar{background:#F0F4F9}
.n-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}
.n-src{display:flex;flex-direction:column;gap:6px;padding:12px;background:#F8FAFD;border-inline-end:1px solid #E3E8EF;font-size:12.5px}
.n-src p{margin:0 0 2px;font-size:12px;color:#5F6368}
.n-src span{padding:6px 8px;border-radius:8px;background:#fff;border:1px solid #E3E8EF}
.n-src span::before{content:"";display:inline-block;width:8px;height:10px;margin-inline-end:6px;background:#D93025;vertical-align:-1px}
.n-main{display:flex;flex-direction:column;gap:10px;padding:12px}
.n-audio{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#E8F0FE}
.n-audio small{display:block;color:#5F6368;font-size:11.5px}
.n-play{flex:none;width:30px;height:30px;border-radius:50%;background:#1A73E8;clip-path:circle(50%)}
.n-play{background:radial-gradient(circle,#1A73E8 64%,transparent 65%)}
.wave{flex:1;display:flex;align-items:center;gap:3px;height:28px}
.wave i{flex:1;height:calc(var(--h) * 100%);background:#1A73E8;border-radius:2px;transform-origin:center;animation:wave 1.4s ease-in-out infinite alternate}
.wave i:nth-child(odd){animation-delay:-.6s}.wave i:nth-child(3n){animation-delay:-1.1s}
@keyframes wave{to{transform:scaleY(.45)}}
.n-q{margin:0;align-self:flex-end;max-width:92%;padding:8px 12px;border-radius:14px;background:#F0F4F9}
.n-a{margin:0}
.n-a i{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-inline-start:3px;border-radius:50%;background:#E8EAED;font:11px var(--font);font-style:normal}
@media (max-width:460px){.n-body{grid-template-columns:1fr}.n-src{border-inline-end:0;border-bottom:1px solid #E3E8EF}}
/* video */
.m-vid{background:#131314;color:#E3E3E3;border-color:#2A2A2C}
.m-vid .mk-bar{background:#1E1F20}
.v-screen{position:relative;margin:12px 12px 0;padding:16px;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,#1B2B4B,#3B2A5C);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.v-title{margin:0;font-size:clamp(15px,2.2vw,19px);color:#fff}
.v-arr{display:flex;justify-content:center;gap:6px}
.v-arr span{display:grid;place-items:center;width:clamp(26px,4vw,34px);height:clamp(26px,4vw,34px);border-radius:6px;background:#E8B84A;color:#1C1A16;font-size:13px;animation:split 3.2s ease-in-out infinite}
.v-arr span:nth-child(-n+4){--x:-14px}.v-arr span:nth-child(n+5){--x:14px}
.v-arr span:nth-child(odd){--y:-6px}.v-arr span:nth-child(even){--y:6px}
@keyframes split{0%,15%{transform:none}45%,70%{transform:translate(var(--x),var(--y))}100%{transform:none}}
.v-sub{margin:0;align-self:center;max-width:90%;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;text-align:center}
.v-ctrl{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:12px;color:#BDBDBD}
.v-play{width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.v-bar{flex:1;height:4px;border-radius:2px;background:#3C3C3E;overflow:hidden}
.v-bar i{display:block;width:46%;height:100%;background:#8AB4F8}
.v-chap{display:flex;gap:6px;padding:0 12px 12px;font-size:12px}
.v-chap span{padding:4px 10px;border-radius:999px;background:#2A2A2C}
.v-chap .on{background:#8AB4F8;color:#131314}
/* quiz */
.m-quiz{background:#FAF9F5;color:#1F1E1D}
.m-quiz .mk-bar{background:#F0EEE6}
.qz-body{display:flex;flex-direction:column;gap:10px;padding:14px}
.qz-top{display:flex;justify-content:space-between;font-size:12.5px;color:#6B6862}
.qz-streak{color:#A54A2A}
.qz-prog{height:6px;border-radius:3px;background:#E8E5DC;overflow:hidden}
.qz-prog i{display:block;width:50%;height:100%;background:#C15F3C}
.qz-q{margin:0;font-size:15px}
.qz-o{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.qz-o li{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;border:1.5px solid #E2DED3;background:#fff}
.qz-o span{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:#F0EEE6;font-size:12px}
.qz-o .ok{border-color:#1F6B52;background:#E7F3EC}
.qz-o .ok span{background:#1F6B52;color:#fff}
.qz-why{margin:0;padding:9px 12px;border-radius:10px;background:#FCEFD9;font-size:13px}
@media (prefers-reduced-motion:reduce){.wave i,.v-arr span{animation:none}}
.still .wave i,.still .v-arr span{animation:none}
/* Arabic page: the story's screens stay left to right; course names stay Latin */
[dir="rtl"] .h-hero h1{line-height:1.25}
[dir="rtl"] .seal b{font-size:2em}
[dir="rtl"] .clist .cn{display:inline}
.tops b,.fact b{direction:ltr;unicode-bidi:isolate}

/* ===== scene 1: Blackboard Ultra activity stream ===== */
.monitor{background:#fff}
.bb{display:flex;height:100%;font-family:system-ui,"Segoe UI",Helmet,sans-serif}
.bb-nav{flex:none;width:28%;display:flex;flex-direction:column;gap:2px;padding:12px 8px;background:#172622;color:#D7E5E0;font-size:clamp(10px,2.6cqh,13px)}
.bb-logo{width:28px;height:28px;margin:2px 6px 10px;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.bb-inst{display:flex;align-items:center;gap:6px;margin:0 4px 10px;padding:6px;border-radius:8px;background:rgba(255,255,255,.06);font-size:.92em}
.bb-inst img{width:14px;height:auto;filter:brightness(0) invert(1)}
.bb-i{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px}
.bb-i i{width:12px;height:12px;border-radius:3px;border:1.6px solid currentColor;opacity:.8}
.bb-i.on{background:#1D5245;color:#fff}
.bb-main{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:9px;background:#F9F7F6;overflow:hidden}
.bb-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:8px;border-bottom:1px solid #E4E0DC}
.bb-top b{font-size:clamp(14px,3.6cqh,18px);font-weight:600;color:#172622}
.bb-top span{font-size:12px;color:#5E6B67}
.bb-main .mh{margin:2px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#1D5245}
.bb .toast{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;background:#fff;border:1px solid #E4E0DC;border-inline-start:4px solid #1D5245}
.bb .toast i{margin:0}
.bb .toast small{display:block;font-size:.8em;color:#5E6B67}
.bb .toast b{font-weight:600;color:#172622}
.bb .toast em{margin-inline-start:auto;font-style:normal;font-size:.78em;color:#1D5245;white-space:nowrap}
.bb-ic{flex:none;width:26px !important;height:26px !important;border-radius:6px !important;background:#E3EEEA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h7l5 5v13H7z' fill='none' stroke='%231D5245' stroke-width='2'/%3E%3Cpath d='M14 3v5h5' fill='none' stroke='%231D5245' stroke-width='2'/%3E%3C/svg%3E") center/60% no-repeat !important}
@container (max-width:420px){.bb-nav{width:23%;padding:10px 4px}.bb-i{font-size:0;justify-content:center;padding:7px 0}.bb-inst{font-size:0;justify-content:center}.bb-logo{margin:2px auto 10px}}
/* ===== scene 2: Windows 11 File Explorer ===== */
.s2 .mini{top:2.5cqh;display:flex;align-items:center;gap:8px;background:#172622;color:#E3EEEA;font-family:system-ui,"Segoe UI",sans-serif}
.s2 .mini img{width:16px;height:16px;border-radius:4px}
.ex{position:absolute;left:3cqw;right:3cqw;top:13cqh;bottom:3cqh;display:flex;flex-direction:column;border-radius:9px;overflow:hidden;background:#F3F3F3;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 16px 32px rgba(0,0,0,.18);font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;font-size:clamp(10px,2.6cqh,13px);color:#1B1B1B}
.ex-title{flex:none;height:8cqh;display:flex;align-items:flex-end;gap:4px;padding:0 0 0 8px;background:#E9E9E9}
.ex-tab{display:flex;align-items:center;gap:6px;height:78%;padding:0 26px 0 10px;border-radius:8px 8px 0 0;background:#F9F9F9;font-size:.95em}
.ex-tab img{width:14px;height:14px}
.ex-plus{width:20px;height:20px;margin-bottom:6px;background:linear-gradient(#555,#555) center/9px 1.3px no-repeat,linear-gradient(#555,#555) center/1.3px 9px no-repeat}
.ex-win{margin-inline-start:auto;align-self:stretch;display:flex}
.ex-win i{width:clamp(30px,8cqw,46px);background-position:center;background-repeat:no-repeat}
.ex-win .mn{background-image:linear-gradient(#333,#333);background-size:10px 1px}
.ex-win .mx{background-image:linear-gradient(#333,#333),linear-gradient(#333,#333),linear-gradient(#333,#333),linear-gradient(#333,#333);background-size:9px 1px,9px 1px,1px 9px,1px 9px;background-position:center calc(50% - 4px),center calc(50% + 4px),calc(50% - 4px) center,calc(50% + 4px) center}
.ex-win .cl{background-image:linear-gradient(45deg,transparent 46%,#333 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#333 46% 54%,transparent 54%);background-size:11px 11px}
.ex-addr{flex:none;height:8cqh;display:flex;align-items:center;gap:8px;padding:0 10px;background:#F9F9F9;border-bottom:1px solid #E5E5E5}
.ex-arrows{display:flex;gap:6px}.ex-arrows i{width:14px;height:14px;border-top:1.6px solid #777;border-left:1.6px solid #777;transform:rotate(-45deg) scale(.6)}
.ex-arrows i:nth-child(2){transform:rotate(135deg) scale(.6);opacity:.45}.ex-arrows i:nth-child(3){transform:rotate(45deg) scale(.6)}
.ex-crumb{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:70%;padding:0 10px;border-radius:4px;background:#fff;border:1px solid #E5E5E5;white-space:nowrap;overflow:hidden}
.ex-crumb i{flex:none;width:6px;height:6px;border-top:1.4px solid #777;border-right:1.4px solid #777;transform:rotate(45deg)}
.ex-search{flex:none;width:28%;height:70%;display:flex;align-items:center;padding:0 10px;border-radius:4px;background:#fff;border:1px solid #E5E5E5;color:#777;white-space:nowrap;overflow:hidden}
.ex-body{flex:1;min-height:0;display:flex}
.ex-side{flex:none;width:24cqw;display:flex;flex-direction:column;gap:1px;padding:8px 6px;background:#F3F3F3;border-inline-end:1px solid #E5E5E5}
.ex-side span{padding:5px 8px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-side .on{background:#E5E5E5;box-shadow:inset 3px 0 0 #0067C0}
.ex-side hr{width:100%;border:0;border-top:1px solid #E5E5E5;margin:4px 0}
.ex-list{flex:1;min-width:0;background:#fff;padding:4px 6px}
.ex-hd,.ex-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr);gap:8px;align-items:center;padding:0 8px}
.ex-hd{height:6cqh;color:#5E5E5E;font-size:.9em;border-bottom:1px solid #EFEFEF}
.ex-row{position:relative;height:7.4cqh;border-radius:4px}
.ex-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-n{display:flex;align-items:center;gap:8px}
.ex-n img{width:18px;height:18px;flex:none}
.ex-row .cnt{position:static;margin-inline-start:6px;flex:none}
.ex-d,.ex-t,.ex-s{color:#5E5E5E}
.ex-status{flex:none;height:5cqh;display:flex;align-items:center;padding:0 12px;background:#F3F3F3;color:#5E5E5E;font-size:.9em}
.s2 .flyer{left:calc(50cqw - 11px);top:8cqh;z-index:3}
.scene{--fx:-41cqw}
@container (min-width:560px){.s2 .flyer{--fx:-17cqw}}
@container (max-width:559px){.ex-side,.ex-t{display:none}.ex-hd,.ex-row{grid-template-columns:minmax(0,2.2fr) minmax(0,1.6fr) minmax(0,.8fr)}}
@container (max-width:380px){.ex-d,.ex-search{display:none}.ex-hd,.ex-row{grid-template-columns:minmax(0,1fr) auto}}
@keyframes h-fly1{0%,23%{opacity:0;transform:none}24%{opacity:1;transform:none}29%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(.8)}30%,100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.6)}}
@keyframes h-fly2{0%,28%{opacity:0;transform:none}29%{opacity:1;transform:none}34%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(.8)}35%,100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.6)}}
@keyframes h-fly3{0%,33%{opacity:0;transform:none}34%{opacity:1;transform:none}38%{opacity:1;transform:translate(var(--fx),var(--fy)) scale(.8)}39%,100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.6)}}
.h-f1,.h-f2,.h-f3,.h-f4,.h-f5,.h-f6{animation-name:ex-row}
@keyframes ex-row{0%,20%{opacity:0}25%,100%{opacity:1}}
/* ===== the AI tools, with their own logos ===== */
.tools span{display:inline-flex;align-items:center;gap:7px}
.tools img,.mk-bar img{width:18px;height:18px;flex:none}
.mk-bar{align-items:center}

/* ===== scene 3: what came out of each tool, as little mockups ===== */
.outs{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.out{grid-column:span 2;position:relative;justify-content:flex-start;gap:3px;padding:9px;overflow:hidden}
.out:nth-child(n+4){grid-column:span 3}
.out .by{position:absolute;top:7px;inset-inline-end:7px;width:16px;height:16px}
.out > b{font-size:clamp(11px,2.9cqh,14px);line-height:1.2;margin-top:auto}
.out > small{font-size:clamp(9px,2.4cqh,12px)}
.ov{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;padding:6px;border-radius:7px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:clamp(7px,2cqh,10px);line-height:1.25;overflow:hidden;margin-inline-end:18px}
.ov-q p{margin:0 0 2px;font-weight:600}
.ov-q i{font-style:normal;padding:2px 5px;border-radius:4px;border:1px solid #E2DED3}
.ov-q i.ok{border-color:#1F6B52;background:#E7F3EC;color:#1F6B52}
.ov-v{position:relative;background:linear-gradient(135deg,#1B2B4B,#3B2A5C);color:#fff;justify-content:space-between}
.ov-v em{font-style:normal}
.ov-v .pl{align-self:center;width:0;height:0;border-left:clamp(9px,3cqh,14px) solid #fff;border-top:clamp(6px,2cqh,9px) solid transparent;border-bottom:clamp(6px,2cqh,9px) solid transparent}
.ov-v .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.3)}.ov-v .bar i{display:block;width:45%;height:100%;background:#8AB4F8;border-radius:2px}
.ov-f{position:relative;background:none;box-shadow:none;padding:0}
.ov-f span{position:absolute;inset:8% 6% 4% 6%;border-radius:7px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.ov-f span:nth-child(1){rotate:-6deg}.ov-f span:nth-child(2){rotate:4deg}
.ov-f .top{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:600;rotate:0deg}
.ov-f .top small{font-weight:400;color:#6B6862}
.ov-s b,.ov-c b{font-size:1.02em}
.ov-s i{display:block;height:4px;width:var(--w);border-radius:2px;background:#E5E7EB}
.ov-s i.hl{background:#F5D27A}
.ov-c{display:grid;grid-template-columns:1fr 1fr;align-content:start}
.ov-c b{grid-column:1/-1}
.ov-c code{font:clamp(7px,1.9cqh,10px) ui-monospace,Consolas,monospace;padding:2px 4px;border-radius:3px;background:#F3F4F6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.out:nth-child(5){background:#EEE8F7}
@keyframes h-o1{0%,47%{opacity:0;transform:scale(.6)}49%{opacity:1;transform:scale(1.05)}50%,100%{opacity:1;transform:none}}
@keyframes h-o2{0%,49.5%{opacity:0;transform:scale(.6)}51.5%{opacity:1;transform:scale(1.05)}52.5%,100%{opacity:1;transform:none}}
@keyframes h-o3{0%,52%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1.05)}55%,100%{opacity:1;transform:none}}
@keyframes h-o4{0%,54.5%{opacity:0;transform:scale(.6)}56.5%{opacity:1;transform:scale(1.05)}57.5%,100%{opacity:1;transform:none}}
@keyframes h-o5{0%,57%{opacity:0;transform:scale(.6)}59%{opacity:1;transform:scale(1.05)}60%,100%{opacity:1;transform:none}}
.ai .outs{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
@container (max-width:480px){
.ai{gap:2cqh}
.tools{gap:6px}.tools span{font-size:0;gap:0;padding:6px 8px}.tools img{width:20px;height:20px}
.prompt{padding:9px 11px;font-size:clamp(11px,3cqh,13px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.out > small{display:none}.out{padding:7px}.ov{margin-inline-end:0;margin-top:14px}
}

/* ===== what AI did, and what I did ===== */
.pledge-card{margin-top:10px;max-width:760px;display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px;border-radius:18px;background:#FFFCF5;border:1px solid #E6DCC8;box-shadow:0 14px 30px -22px rgba(28,26,22,.45)}
.pl-title{margin:0;font-size:clamp(20px,3.4vw,27px);line-height:1.2;font-weight:500;color:var(--ink)}
.pl-text{margin:0;color:var(--muted);line-height:1.55}
.pledge{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.pledge{grid-template-columns:1fr}}
.pl-col{padding:12px 14px;border-radius:12px}
.pl-ai{background:#EEF1F6}.pl-me{background:#E6F2EB}
.pl-h{margin:0 0 8px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.pl-logos{display:inline-flex}.pl-logos img{width:16px;height:16px;margin-inline-end:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #EEF1F6}
.pl-logos img:last-child{margin-inline-end:4px}
.pl-col ul{margin:0;padding-inline-start:1.15em;display:grid;gap:5px;font-size:15px;line-height:1.4}
.pl-me li::marker{color:var(--green)}.pl-ai li::marker{color:#6B7A90}

/* Arabic: the motion graphic and the mock windows use a clean interface face, not the handwriting one */
[dir="rtl"] .canvas,[dir="rtl"] .mk,[dir="rtl"] .steps-cap{font-family:"IBM Plex Sans Arabic","Helmet","Segoe UI",system-ui,sans-serif}
[dir="rtl"] .canvas code,[dir="rtl"] .mk pre{font-family:ui-monospace,"Cascadia Code",Consolas,monospace}
[dir="rtl"] .mk pre{text-align:right}
[dir="rtl"] .cnt,[dir="rtl"] .score .dg{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .v-ctrl > span:last-child{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .mk pre{line-height:1.9}
/* ===== night: from Makkah sunset to sunrise ===== */
/* the scenes become a dark stage; the screens on it keep their daylight colours */
.night .canvas,.night.reduce .scene,.night.no-js .scene{background:#18223A;box-shadow:inset 0 0 0 1.5px #2A3552}
.night .canvas{--bg:#F5F0E6;--card:#FFFFFF;--ink:#1C1A16;--muted:#5E5648;--line:#E3D9C6;--chip:#EFE5D2;--gold:#C9973A;--bronze:#8A4A2E;--green:#1F6B52;color:var(--ink)}
.night .hrail{background:rgba(255,255,255,.12)}
.night .steps-cap b{background:#26304D}
.night .tops li,.night .clist li,.night .pledge-card{background:var(--card);border-color:var(--line)}
.night .pledge-card{box-shadow:0 14px 30px -22px rgba(0,0,0,.7)}
.night .pl-ai{background:#1E2843}
.night .pl-me{background:#16302A}
.night .pl-ai li::marker{color:#8E9BB3}
.night .clist span,.night .mat figcaption,.night .mock figcaption{color:var(--muted)}
.night .mk{border-color:#2A3552;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.night .res-l,.night .res-of{color:#A3ABBF}
.night .odo{color:#62C99D}