@font-face{font-family:"Plex Arabic";src:url(../fonts/plex-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(../fonts/plex-arabic-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(../fonts/plex-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Latin";src:url(../fonts/plex-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Latin";src:url(../fonts/plex-latin-600.woff2) format("woff2");font-weight:600 700;font-display:swap}

:root{
  --bg:#f8f6ff;--bg-2:#f1edff;--surface:#fff;--ink:#1f1b2e;--ink-2:#4f4a68;--ink-3:#6f6990;--line:#e6e0f7;
  --accent:#6d4aff;--accent-ink:#fff;--accent-2:#b9a7ff;--soft:#efeaff;--pink:#ffb8d6;--mint:#a8ecd6;--butter:#ffe6a3;
  --ok:#0b7a5c;--ok-bg:#e3f6ef;--bad:#b42345;--bad-bg:#fdecef;
  --board:#1f3b36;--board-2:#28493f;--chalk:#f4f1e8;--chalk-2:#cfd8cf;--c-yellow:#f6d365;--c-pink:#f7a8bd;--c-cyan:#9ad7e8;--c-green:#a6e3a1;
  --radius:24px;--radius-sm:14px;--shadow:0 18px 40px -24px rgb(109 74 255 / .35);
  --font:"Plex Arabic","Plex Latin",system-ui,"Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f0d16;--bg-2:#15121e;--surface:#1b1826;--ink:#f3f0fc;--ink-2:#c3bcdc;--ink-3:#a39dbd;--line:#2d2841;
  --accent:#b8a4ff;--accent-ink:#17122a;--soft:#271f3e;--ok:#7fe6c4;--ok-bg:#12322a;--bad:#ff9db3;--bad-bg:#3a1622;
  --shadow:0 18px 40px -24px rgb(0 0 0 / .7);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f0d16;--bg-2:#15121e;--surface:#1b1826;--ink:#f3f0fc;--ink-2:#c3bcdc;--ink-3:#a39dbd;--line:#2d2841;
  --accent:#b8a4ff;--accent-ink:#17122a;--soft:#271f3e;--ok:#7fe6c4;--ok-bg:#12322a;--bad:#ff9db3;--bad-bg:#3a1622;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.75;overflow-x:clip}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent)}
h1,h2,h3{line-height:1.35;margin:0 0 .5em}
p{margin:0 0 .8em}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:10px;z-index:50}
.skip:focus{top:12px}

/* header / footer */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);text-decoration:none}
.brand i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:14px;font-family:"Plex Latin",sans-serif}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{color:var(--ink-2);text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:600;font-size:.95rem}
.top nav a:hover,.top nav a[aria-current="page"]{background:var(--soft);color:var(--accent)}
footer.foot{margin-top:72px;border-top:1px solid var(--line);padding:28px 0 40px;color:var(--ink-3);font-size:.9rem}
footer.foot .wrap{display:grid;gap:8px}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px;list-style:none}
.chips li{background:var(--soft);color:var(--accent);border-radius:999px;padding:3px 12px;font-size:.88rem;font-weight:600}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px dashed var(--accent-2);border-radius:var(--radius-sm);padding:12px 16px;color:var(--ink-2);font-size:.93rem}
.note b{color:var(--ink)}
section{scroll-margin-top:80px}
.sec{margin-top:64px}
.sec>h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}
.kicker{color:var(--accent);font-weight:700;font-size:.9rem;margin-bottom:6px;display:block}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}

/* landing */
.hero{padding:44px 0 8px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(2rem,1.4rem + 3vw,3.4rem);margin-bottom:.3em}
.hero h1 span{color:var(--accent)}
.hero .lede{font-size:1.15rem;color:var(--ink-2);max-width:40ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.hero-og{position:relative;display:flex;flex-direction:column;gap:14px;background:radial-gradient(circle at 50% 55%,var(--surface),var(--bg-2) 70%);border-radius:var(--radius);padding:18px 18px 0;overflow:hidden}
.hero-og .orieb-g{width:100%;max-width:380px;margin-inline:auto}
.hero-og .bubble{min-height:4.6em;order:-1}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.facts li{display:flex;gap:10px;align-items:flex-start}
.facts li::before{content:"";flex:0 0 10px;height:10px;margin-top:.65em;border-radius:50%;background:var(--accent-2)}
.lesson-card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;text-decoration:none;color:inherit;transition:transform .2s}
.lesson-card:hover{transform:translateY(-3px);border-color:var(--accent-2)}
.lesson-card .ico{aspect-ratio:1;border-radius:20px;background:var(--board);display:grid;place-items:center;color:var(--chalk);font-size:1.4rem;font-weight:700;font-family:"Plex Latin",sans-serif;direction:ltr}
.lesson-card h3{margin-bottom:.2em}
.lesson-card p{color:var(--ink-2);margin:0;font-size:.95rem}
.lesson-card .go{color:var(--accent);font-weight:700;font-size:.92rem}
.contact{background:linear-gradient(135deg,var(--soft),var(--surface));border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.contact .ways{display:flex;flex-wrap:wrap;gap:10px}
.contact .ways small{display:block;font-weight:400;color:var(--ink-3);font-size:.78rem;line-height:1.2}
.contact .ways .btn{flex-direction:column;gap:0;line-height:1.3}

/* video */
.vids{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:start}
.vid{margin:0}
.vid video{width:100%;height:auto;border-radius:var(--radius-sm);background:#000;aspect-ratio:var(--ar,16/9)}
.vid figcaption{font-size:.9rem;color:var(--ink-2);margin-top:6px}
.vid.tall{--ar:9/16;max-width:320px}

/* speech bubble */
.bubble{position:relative;background:var(--surface);color:var(--ink);border:2px solid var(--accent-2);border-radius:20px;padding:12px 16px;font-size:1rem;line-height:1.7;box-shadow:var(--shadow)}
.bubble::after{content:"";position:absolute;bottom:-11px;inset-inline-start:34px;width:18px;height:18px;background:var(--surface);border-inline-end:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);transform:rotate(45deg)}
[dir="rtl"] .bubble::after{transform:rotate(-45deg)}

/* lesson head */
.lesson-hero{padding:34px 0 0}
.lesson-hero h1{font-size:clamp(1.8rem,1.3rem + 2.4vw,2.8rem)}
.lesson-hero .lede{color:var(--ink-2);font-size:1.08rem;max-width:62ch}

/* stage */
.stage{margin-top:26px}
.stage-grid{display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}
.teacher{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px}
.teacher .orieb-g{width:100%;max-width:290px;margin-inline:auto;order:2}
.teacher .bubble{order:1;min-height:6.5em}
.scenes{min-width:0}
.scene{margin:0 0 22px}
.board{position:relative;background:var(--board);color:var(--chalk);border-radius:var(--radius);padding:26px 28px;border:10px solid #6b4f3a;box-shadow:inset 0 0 60px rgb(0 0 0 / .35),var(--shadow);min-height:420px;overflow:hidden}
.board::after{content:"";position:absolute;inset-inline:18%;bottom:6px;height:8px;border-radius:4px;background:#e9e2d0;opacity:.18}
.board h2{color:var(--c-yellow);font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);border-bottom:2px dashed rgb(244 241 232 / .25);padding-bottom:.35em}
.board h3{color:var(--c-cyan);font-size:1.1rem;margin-top:.8em}
.board p,.board li{color:var(--chalk)}
.board strong,.board b{color:var(--c-yellow)}
.board ul,.board ol{padding-inline-start:1.3em;margin:0 0 .8em}
.board li{margin-bottom:.3em}
.board .def{background:rgb(255 255 255 / .06);border-inline-start:4px solid var(--c-yellow);padding:10px 14px;border-radius:10px;margin:0 0 12px}
.board .law{background:rgb(246 211 101 / .1);border:1.5px solid rgb(246 211 101 / .55);padding:12px 16px;border-radius:14px;margin:0 0 12px;font-size:1.05rem}
.board .formula{direction:ltr;font-family:"Plex Latin",sans-serif;font-size:clamp(1.4rem,1rem + 2vw,2.1rem);text-align:center;color:var(--c-yellow);margin:8px 0 14px;font-weight:600;letter-spacing:.02em}
.board .formula.sm{font-size:1.2rem}
.board table{border-collapse:collapse;width:100%;margin:0 0 12px;font-size:.95rem}
.board th,.board td{border:1px solid rgb(244 241 232 / .22);padding:6px 10px;text-align:start}
.board th{color:var(--c-cyan);font-weight:600}
.board .steps{counter-reset:s;list-style:none;padding:0}
.board .steps li{counter-increment:s;position:relative;padding-inline-start:38px;margin-bottom:8px}
.board .steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:.1em;width:27px;height:27px;border-radius:50%;background:var(--c-yellow);color:var(--board);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.board .eq{direction:ltr;unicode-bidi:isolate;display:inline-block;font-family:"Plex Latin",sans-serif;color:var(--c-green);font-weight:600}
.board .ans{display:inline-block;background:var(--c-yellow);color:var(--board);padding:2px 12px;border-radius:999px;font-weight:700}
.board .q{background:rgb(154 215 232 / .1);border:1px solid rgb(154 215 232 / .4);padding:10px 14px;border-radius:12px;margin-bottom:12px}
.board .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;align-items:center}
.board svg.dia{width:100%;height:auto;max-height:300px}
.board .myth{list-style:none;padding:0}
.board .myth li{background:rgb(255 255 255 / .05);border-radius:12px;padding:10px 14px;margin-bottom:10px}
.board .myth .x{color:var(--c-pink);font-weight:700}
.board .myth .v{color:var(--c-green);font-weight:700}
.board .say-inline{display:none}
.scene .say{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin-top:10px;color:var(--ink-2)}
.scene .say::before{content:"Orieb G";flex:none;font-family:"Plex Latin",sans-serif;font-weight:700;color:var(--accent);font-size:.85rem;margin-top:.15em}

/* stage mode (JS) */
.js .stage:not(.show-all) .scene{display:none}
.js .stage:not(.show-all) .scene.is-current{display:block;animation:scene-in .45s ease}
.js .stage:not(.show-all) .scene .say{display:none}
@keyframes scene-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stage-nav{display:none}
.js .stage-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.js .stage.show-all .stage-nav .dots,.js .stage.show-all .stage-nav .step{display:none}
.dots{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;justify-content:center;flex:1}
.dots button{width:30px;height:30px;border-radius:50%;border:2px solid var(--accent-2);background:var(--surface);color:var(--ink-2);font:600 .78rem "Plex Latin",sans-serif;cursor:pointer;padding:0}
.dots button[aria-current="step"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dots button.seen:not([aria-current]){background:var(--soft)}
.stage-tools{display:none}
.js .stage-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;color:var(--ink-3);font-size:.9rem}
.counter{font-weight:600;color:var(--ink-2)}
.js .teacher-static-note{display:none}
.js .stage.show-all .teacher{position:static}

/* sandbox + mole map */
.lab{background:rgb(0 0 0 / .18);border-radius:16px;padding:16px;margin-bottom:12px}
.lab label{display:block;font-weight:600;margin-bottom:4px}
.lab .ctl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin-bottom:10px}
.lab input[type=range]{width:100%;accent-color:var(--c-yellow);direction:ltr}
.lab output,.lab .val{direction:ltr;unicode-bidi:isolate;font-family:"Plex Latin",sans-serif;font-weight:600;color:var(--c-yellow);min-width:5.5em;text-align:end}
.lab .check{display:flex;gap:8px;align-items:center;font-weight:600}
.lab .check input{width:20px;height:20px;accent-color:var(--c-yellow)}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:10px 0}
.readout div{background:rgb(255 255 255 / .06);border-radius:12px;padding:8px 12px}
.readout small{display:block;color:var(--chalk-2);font-size:.82rem}
.readout b{direction:ltr;display:block;text-align:start;font-family:"Plex Latin",sans-serif;font-size:1.15rem}
.lab .msg{min-height:1.6em;color:var(--c-cyan)}
.lab select,.lab input[type=number]{font:inherit;background:var(--chalk);color:var(--board);border:0;border-radius:10px;padding:6px 10px;min-height:42px}
.lab input[type=number]{direction:ltr;width:9em}
.mm-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;margin-bottom:12px}
.mm-map{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:6px;align-items:center;text-align:center;margin:12px 0;direction:rtl}
.mm-node{background:rgb(255 255 255 / .07);border:2px solid rgb(244 241 232 / .3);border-radius:16px;padding:10px 6px;transition:border-color .3s,background .3s}
.mm-node small{display:block;color:var(--chalk-2);font-size:.8rem}
.mm-node b{direction:ltr;display:block;font-family:"Plex Latin",sans-serif;font-size:1.05rem;word-break:break-word}
.mm-node.on{border-color:var(--c-yellow);background:rgb(246 211 101 / .12)}
.mm-arrow{display:grid;gap:2px;font:600 .8rem "Plex Latin",sans-serif;direction:ltr;color:var(--chalk-2)}
.mm-arrow span{padding:2px 6px;border-radius:8px;white-space:nowrap}
.mm-arrow span.on{background:var(--c-yellow);color:var(--board)}
.mm-arrow span:first-child::before{content:"← "}
.mm-arrow span:last-child::after{content:" →"}
.mm-steps{list-style:none;padding:0;margin:0}
.mm-steps li{direction:rtl}

/* quiz */
.quiz-grid{display:grid;grid-template-columns:1fr 250px;gap:22px;align-items:start}
.quiz-side{position:sticky;top:78px;display:flex;flex-direction:column;gap:12px}
.quiz-side .orieb-g{max-width:230px;margin-inline:auto;order:2}
.quiz-side .bubble{order:1}
.score{font-weight:700;color:var(--accent);font-size:1.1rem}
.qs{list-style:none;padding:0;margin:0;counter-reset:q}
.qs>li{counter-increment:q;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;margin-bottom:14px}
.qs fieldset{border:0;padding:0;margin:0;min-width:0}
.qs legend{font-weight:700;margin-bottom:10px;padding:0;display:flex;gap:8px}
.qs legend::before{content:counter(q) ".";color:var(--accent);font-family:"Plex Latin",sans-serif}
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.opt{text-align:start;min-height:46px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}
.opt:hover:not([disabled]){border-color:var(--accent)}
.opt[disabled]{cursor:default}
.opt.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ink)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--ink)}
.opt.right::after{content:" ✓";color:var(--ok);font-weight:700}
.opt.wrong::after{content:" ✗";color:var(--bad);font-weight:700}
.fb{margin-top:10px;border-radius:12px;padding:10px 14px;font-size:.95rem}
.fb[hidden]{display:none}
.fb.ok{background:var(--ok-bg);color:var(--ink)}
.fb.no{background:var(--bad-bg);color:var(--ink)}
.fb b{display:block}
.quiz-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-og{max-width:440px;margin-inline:auto;width:100%}
  .stage-grid{grid-template-columns:1fr}
  .teacher{position:static;display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:end}
  .teacher .orieb-g{order:0;max-width:110px}
  .teacher .bubble{order:1;min-height:0;font-size:.95rem}
  .teacher .bubble::after{inset-inline-start:-10px;bottom:22px;transform:rotate(135deg)}
  .quiz-grid{grid-template-columns:1fr}
  .quiz-side{position:sticky;top:64px;z-index:5;display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:center;background:color-mix(in srgb,var(--bg) 92%,transparent);padding:6px 0;order:-1}
  .quiz-side .orieb-g{order:0;max-width:64px}
  .quiz-side .bubble{font-size:.88rem;padding:6px 10px}
  .quiz-side .bubble::after{display:none}
  .contact{grid-template-columns:1fr}
}
@media (max-width:560px){
  .board{padding:18px 16px;border-width:7px;min-height:0}
  .lesson-card{grid-template-columns:76px 1fr}
  .js .stage-nav .dots{order:-1;flex-basis:100%;gap:5px}
  .dots button{width:28px;height:28px}
  .js .stage-nav .btn{flex:1}
  .mm-map{grid-template-columns:1fr;direction:rtl}
  .mm-arrow{grid-auto-flow:column;justify-content:center;gap:8px}
  .mm-arrow span:first-child::before{content:"↓ "}
  .mm-arrow span:last-child::before{content:"↑ "}
  .mm-arrow span:last-child::after{content:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}

/* board diagram animations, run when the scene becomes current */
.dia .grow{stroke-dasharray:var(--len,300);stroke-dashoffset:0}
.is-current .dia .grow{animation:draw 1.1s ease both;animation-delay:var(--d,0s)}
@keyframes draw{from{stroke-dashoffset:var(--len,300)}}
.is-current .dia .pop{animation:pop .5s cubic-bezier(.3,1.6,.6,1) both;animation-delay:var(--d,0s)}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.dia .pop{transform-box:fill-box;transform-origin:center}
.is-current .dia .bus{animation:bus 3.6s ease-in-out infinite}
@keyframes bus{0%{transform:translateX(-120px)}55%,100%{transform:translateX(0)}}
.is-current .dia .rider{animation:rider 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes rider{0%,50%{transform:rotate(0)}60%{transform:rotate(16deg)}75%,100%{transform:rotate(0)}}
.is-current .dia .cart-a{animation:cartA 3s ease-in infinite}
.is-current .dia .cart-b{animation:cartB 3s ease-in infinite}
@keyframes cartA{0%{transform:translateX(0)}80%,100%{transform:translateX(-300px)}}
@keyframes cartB{0%{transform:translateX(0)}80%,100%{transform:translateX(-100px)}}
.is-current .dia .sk-l{animation:skl 3.4s ease-out infinite}
.is-current .dia .sk-r{animation:skr 3.4s ease-out infinite}
@keyframes skl{0%,20%{transform:translateX(0)}90%,100%{transform:translateX(-45px)}}
@keyframes skr{0%,20%{transform:translateX(0)}90%,100%{transform:translateX(90px)}}
.dia text{font-family:"Plex Latin","Plex Arabic",sans-serif}

/* chemistry helpers */
.tiles{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;direction:ltr;justify-content:center}
.tile{width:74px;border:2px solid rgb(244 241 232 / .45);border-radius:10px;padding:4px 6px;text-align:center;font-family:"Plex Latin",sans-serif;line-height:1.25;background:rgb(255 255 255 / .05)}
.tile b{display:block;font-size:1.35rem;color:var(--c-yellow)}
.tile small{display:block;font-size:.75rem;color:var(--chalk-2)}
.tile span{font-size:.95rem}
.chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:6px 0 14px}
.chain .box{background:rgb(255 255 255 / .07);border:1.5px solid rgb(244 241 232 / .35);border-radius:12px;padding:6px 10px;text-align:center;font-size:.92rem}
.chain .op{font:600 .85rem "Plex Latin",sans-serif;color:var(--board);background:var(--c-yellow);border-radius:999px;padding:2px 9px;direction:ltr}
.chain .arw{color:var(--c-yellow);font-weight:700}
.is-current .chain>*{animation:pop .45s cubic-bezier(.3,1.6,.6,1) both}
.is-current .chain>*:nth-child(2){animation-delay:.15s}.is-current .chain>*:nth-child(3){animation-delay:.3s}.is-current .chain>*:nth-child(4){animation-delay:.45s}
.is-current .chain>*:nth-child(5){animation-delay:.6s}.is-current .chain>*:nth-child(6){animation-delay:.75s}.is-current .chain>*:nth-child(7){animation-delay:.9s}
.is-current .chain>*:nth-child(8){animation-delay:1.05s}.is-current .chain>*:nth-child(9){animation-delay:1.2s}
.dia text,.lab svg text{direction:ltr}.dia text.ar{direction:rtl}

svg.orieb-g{overflow:visible}
.teacher{z-index:2}

/* university courses: English terms, code board */
.en{direction:ltr;unicode-bidi:isolate;font-family:"Plex Latin",sans-serif}
.en-sub{display:block;font-family:"Plex Latin",sans-serif;font-size:.5em;color:var(--ink-3);font-weight:600;margin-top:.2em}
.board .code-two{display:grid;gap:10px;direction:ltr;margin-bottom:12px}
.code{background:#15131f;border-radius:14px;overflow:hidden;direction:ltr;text-align:left;box-shadow:0 8px 20px rgb(0 0 0 / .3)}
.code-bar{display:flex;gap:7px;align-items:center;padding:8px 12px;background:#221f30;font:600 .78rem "Plex Latin",sans-serif;color:#a9a3c9}
.code-bar i{width:10px;height:10px;border-radius:50%;background:#f7a8bd}.code-bar i:nth-child(2){background:#f6d365}.code-bar i:nth-child(3){background:#a6e3a1}.code-bar span{margin-left:6px}
.code pre{margin:0;padding:12px 16px;font:500 .9rem/1.55 Consolas,"Cascadia Mono","Courier New",monospace;color:#f4f1e8;white-space:pre;overflow-x:auto}
.c-kw{color:#c3a6ff}.c-lib{color:#9ad7e8}.c-str{color:#a6e3a1}.c-num{color:#f6d365}.c-com{color:#9a95b5;font-style:italic}.c-inc{color:#f7a8bd}
.term{background:#0d0c14;color:#a6e3a1;border-radius:12px;padding:10px 16px;font:500 .9rem/1.55 Consolas,"Courier New",monospace;white-space:pre;direction:ltr;text-align:left}
.term-p{color:#9a95b5}
.uni-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media (max-width:560px){.top nav a{padding:5px 8px;font-size:.88rem}.top .wrap{gap:4px}}

/* Orieb G illustrated card (approved art) */
.og-card{position:relative;margin:0;aspect-ratio:1;border-radius:28px;overflow:hidden;background:#b6a3d8;box-shadow:0 18px 40px -22px rgb(80 50 160 / .55);animation:og-in .7s ease-out both;isolation:isolate}
.og-card .og-fig{position:absolute;inset:0;transform-origin:50% 100%;animation:og-breathe 4.6s ease-in-out infinite}
.og-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.og-card img.on{opacity:1}
@keyframes og-breathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.012) translateY(-1px)}}
@keyframes og-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.teacher .og-card{width:100%;max-width:290px;margin-inline:auto;order:2}
.hero-og .og-card{width:100%;max-width:400px;margin-inline:auto}
.quiz-side .og-card{max-width:230px;width:100%;margin-inline:auto;order:2;border-radius:22px}
@media (max-width:900px){.teacher .og-card{order:0;max-width:110px;border-radius:18px}.quiz-side .og-card{order:0;max-width:64px;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.og-card,.og-card .og-fig{animation:none}.og-card img{transition:none}}