/* Poli21 · Sunrise 11 · Prepositions of place, movement and time
   Built from the standalone prototype; colours and type follow the site tokens.
   Sections: tokens · base · utilities (purged) · workspace design · site layer. */
:root {
  /* Site tokens, shared with the other Grade 11 English modules */
  --canvas: #f4f7fb;
  --ink: #182b38;
  --muted: #586c78;
  --faint: #748690;
  --line: rgba(29, 74, 91, 0.14);
  --sea: #194f49;
  --sea-deep: #123f3a;
  --sea-soft: #e8f4f1;
  --blue: #1767bd;
  --blue-soft: #e9f3ff;
  --gold: #9c6d16;
  --gold-soft: #f8eed7;
  --violet: #5e5ce6;
  --violet-soft: #efeefd;
  --correct: #13795b;
  --correct-soft: #e6f5ef;
  --incorrect: #b4233d;
  --incorrect-soft: #fcecef;
  --focus: #0c6fe8;
  --shadow: 0 24px 70px -52px rgba(20, 55, 70, 0.7);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Game tokens mapped onto the site palette */
  --bg: var(--canvas);
  --card-bg: #ffffff;
  --text-main: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --accent: var(--blue);
  --accent-soft: var(--blue-soft);
  --paper: #eef3f8;
  --success: var(--correct);
  --danger: var(--incorrect);
  --warning: var(--gold);
}

/* ── Base (game components) ── */
:root {
  --place-a: var(--sea); --move-a: var(--blue); --time-a: var(--gold); --boss-a: var(--violet);
}
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  background-color: var(--bg);
  color: var(--text-main);
  transition: background-color .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.ckb, .ckb-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  direction: rtl;
  unicode-bidi: isolate;
}
.ckb-block { display: block; text-align: right; }
body.en-only .ckb, body.en-only .ckb-text, body.en-only .ckb-only { display: none !important; }
.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px -4px rgba(15, 23, 42, .08);
}
.muted { color: var(--text-muted); }
.tab-btn { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-main); }
.tab-btn.active { color: #fff; border-color: transparent; box-shadow: 0 8px 18px -6px rgba(15, 23, 42, .35); }
.tab-btn.active.t-place { background: linear-gradient(135deg, var(--place-a), var(--place-b)); }
.tab-btn.active.t-move  { background: linear-gradient(135deg, var(--move-a), var(--move-b)); }
.tab-btn.active.t-time  { background: linear-gradient(135deg, var(--time-a), var(--time-b)); }
.tab-btn.active.t-boss  { background: linear-gradient(135deg, var(--boss-a), var(--boss-b)); }
.tab-btn.active.t-book  { background: linear-gradient(135deg, #3d4f5c, #182b38); }
.tab-btn .done { display: none; }
.tab-btn.is-done .done { display: inline; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .6rem 1.1rem; border-radius: .9rem; font-weight: 700; transition: transform .12s ease, box-shadow .12s ease, background .15s ease; cursor: pointer; }
.btn:active { transform: scale(.97); }
.btn:focus-visible, .opt:focus-visible, .zone:focus-visible, .tier:focus-visible { outline: 3px solid #f3c24a; outline-offset: 2px; }
.btn-primary { background: linear-gradient(135deg, #1767bd, #1767bd); color: #fff; box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .6); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-main); }
.btn-soft { background: rgba(100, 116, 139, .12); color: var(--text-main); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Option pills (shared by all levels) */
.opt { position: relative; min-height: 52px; padding: .65rem 1rem; border-radius: 1rem; border: 2px solid var(--border); background: var(--card-bg); font-weight: 800; font-size: 1.05rem; text-align: left; transition: transform .12s ease, border-color .15s ease, background .15s ease; cursor: pointer; }
.opt:hover:not([disabled]) { transform: translateY(-2px); border-color: #9aa8b3; }
.opt .letter { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; font-size: .8rem; background: rgba(100, 116, 139, .15); margin-right: .6rem; }
.opt.correct { border-color: var(--success); background: rgba(16, 185, 129, .12); }
.opt.wrong { border-color: var(--danger); background: rgba(239, 68, 68, .12); animation: shake .4s ease-in-out; }
.opt[disabled] { cursor: default; opacity: .8; }
.opt.correct[disabled], .opt.wrong[disabled] { opacity: 1; }

/* Hearts / streak */
.heart { display: inline-block; transition: transform .25s ease, filter .25s ease, opacity .25s ease; }
.heart.lost { filter: grayscale(1); opacity: .35; transform: scale(.8); }
.heart.pop { animation: heartpop .5s ease; }
.streak-flame { display: none; }
.streak-flame.on { display: inline-flex; animation: flicker 1s infinite alternate; }
@keyframes heartpop { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes flicker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.12) rotate(3deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.shake-anim { animation: shake .4s ease-in-out; }
@keyframes pulse-ring { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.floaty { animation: floaty 2.4s ease-in-out infinite; }
@keyframes popin { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.popin { animation: popin .35s ease; }

/* Level 1 — SVG room */
#l1-scene { width: 100%; height: auto; display: block; border-radius: 1rem; background: #e9f3ff; touch-action: manipulation; }
.zone { fill: rgba(56, 189, 248, 0); stroke: rgba(56, 189, 248, 0); stroke-width: 2; stroke-dasharray: 6 5; cursor: pointer; transition: fill .15s ease, stroke .15s ease; }
#l1-scene.show-zones .zone { fill: rgba(56, 189, 248, .10); stroke: rgba(14, 165, 233, .7); }
.zone:hover, .zone:focus-visible { fill: rgba(56, 189, 248, .28) !important; stroke: #1767bd !important; }
.zone.hit { fill: rgba(16, 185, 129, .35) !important; stroke: #13795b !important; }
.zone.miss { fill: rgba(239, 68, 68, .35) !important; stroke: #b4233d !important; animation: shake .4s ease-in-out; }
.zone.locked { pointer-events: none; }
.item-emoji { font-size: 26px; pointer-events: none; }
.pulse-ring { fill: none; stroke: #f3c24a; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulse-ring 1.4s ease-out infinite; }

/* Level 2 — canvas */
#l2-wrap { position: relative; border-radius: 1rem; overflow: hidden; background: #182b38; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#l2-canvas { width: 100%; height: auto; display: block; aspect-ratio: 9 / 5; }
#l2-wrap.crash { animation: shake .45s ease-in-out; }
.trail-legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; }
.trail-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }

/* Level 3 — pyramid arcade */
#l3-arena { position: relative; height: 420px; border-radius: 1rem; overflow: hidden; background: radial-gradient(ellipse at top, rgba(245, 158, 11, .18), transparent 60%), linear-gradient(180deg, #1b2a3a 0%, #182b38 100%); user-select: none; }
#l3-token { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); padding: .55rem 1.1rem; border-radius: 999px; background: linear-gradient(135deg, #f3d98a, #f3c24a); color: #182b38; font-weight: 800; font-size: 1.05rem; box-shadow: 0 10px 25px -8px rgba(245, 158, 11, .8); white-space: nowrap; transition: none; }
#l3-token.zip { transition: top .35s ease, left .35s ease, transform .35s ease, opacity .35s ease; opacity: 0; transform: translateX(-50%) scale(.3); }
#l3-token.bad { background: linear-gradient(135deg, #f1b6c1, #b4233d); color: #fff; animation: shake .4s ease-in-out; }
.pyramid { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 10px; }
.tier { position: relative; border: 0; color: #fff; font-weight: 900; letter-spacing: .04em; cursor: pointer; transition: transform .12s ease, filter .12s ease; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.tier small { display: block; font-weight: 600; letter-spacing: 0; font-size: .68rem; opacity: .9; }
.tier:hover { filter: brightness(1.12); }
.tier:active { transform: scale(.98); }
.tier-at { width: 42%; height: 62px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #d9a441, #f3c24a); }
.tier-on { width: 66%; height: 66px; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #1767bd, #1767bd); }
.tier-in { width: 92%; height: 70px; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #9c6d16, #9c6d16); }
.tier.flash-ok { animation: tierok .5s ease; }
.tier.flash-bad { animation: shake .4s ease-in-out; filter: saturate(.4) brightness(.8); }
@keyframes tierok { 0% { filter: brightness(1); } 40% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
.tumbler { min-width: 84px; min-height: 48px; border-radius: .8rem; border: 2px solid #f3c24a; background: linear-gradient(180deg, #f8eed7, #f3e2b8); color: #6c4c12; font-weight: 900; font-size: 1.1rem; cursor: pointer; transition: transform .1s ease; }
.tumbler:active { transform: translateY(2px); }
.tumbler.bad { border-color: var(--danger); animation: shake .4s ease-in-out; }
.tumbler.good { border-color: var(--success); background: rgba(16,185,129,.18); }
.chest { font-size: 3rem; transition: transform .4s ease; display: inline-block; }
.chest.open { transform: scale(1.25) rotate(-6deg); }

/* Level 4 — boss arena */
.hp-bar { height: 14px; border-radius: 999px; background: rgba(148, 163, 184, .25); overflow: hidden; }
.hp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #b4233d, #1767bd); transition: width .5s ease; }
.examiner { font-size: 4rem; line-height: 1; display: inline-block; transition: transform .2s ease; }
.examiner.hit { animation: exhit .45s ease; }
@keyframes exhit { 0% { transform: translateX(0); filter: none; } 30% { transform: translateX(-10px) rotate(-6deg); filter: brightness(1.6); } 60% { transform: translateX(8px); } 100% { transform: translateX(0); } }
.timer-ring { transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 6; }
.timer-ring .track { stroke: rgba(148, 163, 184, .25); }
.timer-ring .prog { stroke: #5e5ce6; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .25s ease; }
.timer-ring .prog.warn { stroke: #b4233d; }

/* Confetti */
.confetti-piece { position: fixed; top: -12px; width: 10px; height: 14px; opacity: .95; z-index: 80; animation: fall linear forwards; pointer-events: none; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .7; } }

/* Banner / toast */
#banner { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); padding: 0; }
@media (min-width: 640px) { #banner { align-items: center; padding: 1rem; } }
#banner .sheet { width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; background: var(--card-bg); color: var(--text-main); border-radius: 1.4rem 1.4rem 0 0; padding: 1.25rem; animation: sheetin .3s ease; border: 1px solid var(--border); }
@media (min-width: 640px) { #banner .sheet { border-radius: 1.4rem; } }
@keyframes sheetin { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
#banner .sheet.ok { border-top: 6px solid var(--success); }
#banner .sheet.bad { border-top: 6px solid var(--danger); }
#toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60; pointer-events: none; opacity: 0; transition: opacity .25s ease, transform .25s ease; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(6px); }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; padding: .1rem .35rem; border-radius: .35rem; background: rgba(100,116,139,.15); }
.blank { display: inline-block; min-width: 3.2rem; border-bottom: 3px solid #f3c24a; text-align: center; font-weight: 900; color: #9c6d16; padding: 0 .3rem; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }
[hidden] { display: none !important; }

/* ── Utilities (purged, remapped below in the site layer) ── */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-3{left:.75rem}.right-3{right:.75rem}.top-3{top:.75rem}.isolate{isolation:isolate}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.min-h-0{min-height:0}.w-16{width:4rem}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-violet-200{--tw-border-opacity:1;border-color:rgb(221 214 254/var(--tw-border-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-950{--tw-bg-opacity:1;background-color:rgb(69 26 3/var(--tw-bg-opacity,1))}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1))}.bg-rose-50{--tw-bg-opacity:1;background-color:rgb(255 241 242/var(--tw-bg-opacity,1))}.bg-rose-500{--tw-bg-opacity:1;background-color:rgb(244 63 94/var(--tw-bg-opacity,1))}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}.bg-sky-50{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity,1))}.bg-violet-50{--tw-bg-opacity:1;background-color:rgb(245 243 255/var(--tw-bg-opacity,1))}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pr-3{padding-right:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-loose{line-height:2}.leading-snug{line-height:1.375}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity,1))}.text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-rose-500{--tw-text-opacity:1;color:rgb(244 63 94/var(--tw-text-opacity,1))}.text-sky-600{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity,1))}.text-sky-700{--tw-text-opacity:1;color:rgb(3 105 161/var(--tw-text-opacity,1))}.text-violet-600{--tw-text-opacity:1;color:rgb(124 58 237/var(--tw-text-opacity,1))}.text-violet-700{--tw-text-opacity:1;color:rgb(109 40 217/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.decoration-2{text-decoration-thickness:2px}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-95{opacity:.95}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:p-5{padding:1.25rem}.md\:p-6{padding:1.5rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ── Workspace design ── */
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  font-size:14px;
  line-height:1.6;
  background:var(--bg);
  color:var(--text-main)
}
button,input {
  font:inherit
}
button {
  touch-action:manipulation
}
button:not(:disabled) {
  cursor:pointer
}
svg.lucide {
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:-3px;
  flex-shrink:0
}
.icon-text {
  display:inline;
  white-space:inherit
}
.icon-text .lucide {
  margin-inline:2px
}
.ckb,.ckb-text {
  line-height:1.9;
  font-weight:400;
  font-family:inherit
}
.ckb-block {
  font-size:13px;
  line-height:1.95
}
.eyebrow {
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700;
  line-height:1.5
}
.skip-link {
  position:fixed;
  top:10px;
  left:240px;
  z-index:100;
  padding:12px;
  background:var(--card-bg);
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:none
}
a,button,input {
  outline-offset:4px
}
:focus-visible {
  outline:2px solid var(--accent)!important
}
.glass-card {
  border:1px solid var(--border);
  box-shadow:none;
  background:var(--card-bg);
  border-radius:12px!important
}
.course-sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:220px;
  padding:30px 20px 22px;
  background:#eef3f8;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:30
}
.course-identity {
  padding:40px 10px 29px
}
.course-identity .eyebrow {
  color:var(--text-muted);
  font-size:10px
}
.course-identity h1 {
  font-size:23px;
  letter-spacing:-.7px;
  line-height:1.3;
  font-weight:600;
  margin:9px 0 5px
}
.course-identity p {
  font-size:12px;
  color:var(--text-muted);
  margin:0
}
.sidebar-section-label {
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--text-muted);
  margin:0 10px 12px
}
.course-nav {
  display:flex;
  flex-direction:column;
  gap:8px
}
.course-nav .tab-btn {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:13px 11px;
  min-height:64px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  box-shadow:none;
  transition:background .15s,border-color .15s;
  color:var(--text-muted)
}
.course-nav .tab-btn:hover {
  background:var(--card-bg)
}
.course-nav .tab-btn.active {
  background:var(--card-bg);
  border-color:var(--border);
  color:var(--text-main);
  box-shadow:0 2px 5px #182b3805
}
.nav-number {
  font-size:11px;
  letter-spacing:.04em;
  width:27px;
  height:27px;
  border:1px solid var(--border);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.active .nav-number {
  background:#194f49;
  color:#fff;
  border-color:#194f49
}
.nav-copy {
  display:flex;
  flex-direction:column;
  gap:1px
}
.nav-copy strong {
  font-weight:600;
  font-size:13px
}
.nav-copy small {
  font-size:10px;
  color:var(--text-muted)
}
.tab-btn .done {
  display:none;
  margin-left:auto
}
.tab-btn.is-done .done {
  display:inline-flex;
  color:var(--accent)
}
.done svg {
  width:15px
}
.sidebar-progress {
  padding:25px 10px 22px
}
.sidebar-progress>div:first-child {
  display:flex;
  justify-content:space-between;
  font-size:11px
}
.sidebar-progress strong {
  font-size:10px;
  font-weight:500;
  font-variant-numeric:tabular-nums
}
.course-track {
  height:4px;
  background:var(--border);
  border-radius:4px;
  margin:10px 0 12px;
  overflow:hidden
}
.course-track>div {
  height:100%;
  background:var(--accent);
  width:0;
  transition:width .25s
}
.sidebar-progress p {
  font-size:10px;
  line-height:1.6;
  color:var(--text-muted);
  margin:0
}
.reference-tab {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:12px;
  font-weight:500;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  padding:18px 10px;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text-main)!important
}
.reference-tab>svg:last-child {
  width:14px;
  margin-left:auto
}
.reference-tab.active {
  color:var(--accent)!important;
  font-weight:700
}
.sidebar-bottom {
  margin-top:auto;
  padding:35px 10px 0
}
.sidebar-bottom .eyebrow {
  font-size:9px;
  letter-spacing:.08em
}
.sidebar-bottom p {
  color:var(--text-muted);
  font-size:11px;
  margin:7px 0 0
}
.workspace {
  margin-left:220px;
  padding:0 40px;
  max-width:1600px
}
.workspace-toolbar {
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  gap:16px
}
.breadcrumb {
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap
}
.breadcrumb span {
  margin:0 11px;
  color:#9aa8b3
}
.breadcrumb b {
  font-weight:500;
  color:var(--text-main)
}
.toolbar-controls {
  display:flex;
  align-items:center;
  gap:9px
}
.xp-display {
  display:flex;
  align-items:center;
  gap:5px;
  margin-right:12px;
  color:var(--text-main);
  font-size:11px;
  font-weight:600;
  white-space:nowrap
}
.xp-display svg {
  color:#9c6d16;
  width:16px
}
.language-switch {
  display:flex;
  padding:3px;
  border:1px solid var(--border);
  border-radius:7px;
  gap:2px;
  background:var(--paper);
  white-space:nowrap
}
.language-switch .btn {
  font-size:10px;
  min-height:29px;
  padding:4px 9px;
  border:0;
  border-radius:5px;
  font-weight:600;
  gap:4px;
  background:transparent;
  color:var(--text-muted);
  box-shadow:none
}
.language-switch .btn-primary {
  background:var(--card-bg);
  color:var(--text-main);
  box-shadow:0 1px 3px #182b3810
}
.icon-button {
  border:0;
  background:transparent;
  color:var(--text-muted);
  display:grid;
  place-items:center;
  width:34px;
  height:36px;
  border-radius:6px
}
.icon-button:hover {
  background:var(--paper)
}
.icon-button svg {
  width:17px
}
main {
  padding-top:30px;
  outline:none
}
main>section {
  max-width:1220px;
  margin:auto
}
.lesson-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:7px 0 23px;
  border:none!important;
  background:transparent!important;
  border-radius:0;
  box-shadow:none
}
.lesson-heading>div:first-child {
  max-width:720px
}
.lesson-kicker {
  color:var(--accent);
  letter-spacing:.14em;
  margin:0 0 9px
}
.lesson-heading h2 {
  font-family:inherit;
  font-weight:400;
  font-size:clamp(30px,3vw,45px);
  letter-spacing:-.9px;
  line-height:1.15;
  margin:0 0 13px;
  max-width:680px
}
.lesson-heading p {
  font-size:12px;
  line-height:1.75;
  color:var(--text-muted);
  margin:0;
  max-width:690px
}
.lesson-heading p.ckb {
  font-size:12px;
  margin-top:5px;
  max-width:640px
}
.lesson-stats {
  display:flex;
  gap:11px;
  align-items:center;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:130px;
  padding-bottom:3px
}
.lesson-stats [id$='-hearts'] {
  display:flex;
  gap:3px;
  justify-content:flex-end;
  flex-basis:100%;
  height:20px
}
.heart {
  display:inline-flex
}
.heart svg {
  width:17px;
  height:17px;
  color:#b4233d;
  fill:#b4233d14
}
.heart.lost {
  opacity:.2;
  filter:none;
  transform:none
}
.lesson-stats [id$='-score'] {
  padding:3px 8px;
  border-radius:4px;
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  font-size:11px;
  line-height:1.5
}
.lesson-stats [id$='-score']:after {
  content:' pts';
  font-size:9px;
  font-weight:400
}
.lesson-stats [id$='-progress'] {
  font-size:10px;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums
}
.streak-flame {
  color:var(--accent)!important;
  font-size:10px
}
.streak-flame.on {
  animation:none
}
.streak-flame svg {
  width:12px
}
.activity-progress {
  height:3px;
  background:var(--border);
  overflow:hidden;
  border-radius:3px;
  margin:0 0 26px!important
}
.activity-progress>div {
  height:100%;
  background:var(--accent);
  transition:width .3s;
  width:0
}
main section>div.grid {
  gap:22px
}
.scene-card {
  padding:0!important;
  overflow:hidden;
  align-self:start
}
.scene-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px 19px;
  border-bottom:1px solid var(--border);
  font-size:9px;
  letter-spacing:.12em;
  font-weight:600;
  color:var(--text-muted)
}
.scene-heading>span:first-child {
  display:flex;
  align-items:center;
  gap:7px
}
.scene-heading svg {
  width:13px;
  height:13px
}
.scene-heading #scene-counter {
  font-variant-numeric:tabular-nums;
  font-size:10px
}
#l1-scene {
  border-radius:0;
  background:#e9f3ff!important;
  width:100%;
  height:auto;
  aspect-ratio:600/340;
  overflow:visible
}
.zone {
  fill:transparent;
  stroke:transparent;
  stroke-width:1;
  stroke-dasharray:3 3
}
.zone:hover,.zone:focus-visible {
  fill:#194f4916!important;
  stroke:#194f49!important;
  outline:none!important
}
#l1-scene.show-zones .zone {
  fill:#194f490d;
  stroke:#194f497a
}
.zone.hit {
  fill:#194f4920!important;
  stroke:#194f49!important
}
.zone.miss {
  fill:#b4233d20!important;
  stroke:#b4233d!important
}
.room-target circle:first-child {
  fill:#ffffff;
  stroke:#194f4980;
  stroke-width:1
}
.room-target circle:last-child {
  fill:#194f49
}
.room-target {
  opacity:.75
}
.scene-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 17px 11px;
  gap:12px;
  color:var(--text-muted);
  font-size:10px
}
.scene-status {
  display:flex;
  gap:5px;
  align-items:center;
  white-space:nowrap;
  font-size:9px
}
.scene-status i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#13795b
}
.scene-card>div:last-child {
  padding:0 16px 13px;
  margin-top:0
}
.scene-card label {
  font-size:9px;
  line-height:1.5;
  gap:6px
}
.scene-card label .ckb-text {
  display:none
}
.scene-card input {
  accent-color:var(--accent);
  width:12px;
  height:12px
}
.scene-card .btn {
  font-size:9px;
  min-height:30px;
  padding:3px 7px;
  border:none;
  color:var(--text-muted)
}
.scene-card .btn svg {
  width:12px;
  height:12px
}
.pulse-ring {
  stroke:#194f49;
  stroke-width:1.6;
  animation:none;
  r:23;
  stroke-dasharray:3 3
}
.btn {
  font-weight:500;
  min-height:40px;
  padding:9px 15px;
  border-radius:7px;
  gap:7px;
  box-shadow:none;
  transition:background .15s,border-color .15s
}
.btn-primary {
  background:#194f49;
  color:#ffffff;
  box-shadow:none
}
.btn-primary:hover:not(:disabled) {
  background:#123f3a
}
.btn-ghost {
  border:1px solid var(--border);
  background:transparent
}
.btn-soft {
  background:var(--paper);
  color:var(--text-muted)
}
.btn:hover:not(:disabled) {
  filter:brightness(.97)
}
.btn:active {
  transform:translateY(1px)
}
.btn svg {
  width:16px;
  height:16px
}
.btn.min-h-0 {
  min-height:34px
}
#l1-phase,#l2-stage,#l4-cat {
  padding:0;
  border-radius:0;
  background:transparent!important;
  color:var(--accent)!important;
  font-size:9px;
  line-height:1.5;
  letter-spacing:.07em;
  font-weight:600
}
#l1-phase {
  max-width:155px
}
#l1-phase + button,#l2-stage + button,#l4-cat + button {
  background:none;
  font-size:10px;
  border:0;
  padding:0 0 0 8px;
  gap:5px;
  white-space:nowrap
}
#l1-phase + button svg,#l2-stage + button svg,#l4-cat + button svg {
  width:14px;
  height:14px
}
.current-object {
  width:43px;
  height:43px;
  border:1px solid var(--border);
  background:var(--accent-soft);
  border-radius:9px;
  color:var(--accent);
  display:grid;
  place-items:center;
  margin:24px 0 15px
}
.current-object svg {
  width:23px;
  height:23px
}
#l1-prompt,#l2-prompt,#l4-q {
  font-size:25px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.6px;
  margin:15px 0 12px
}
#l1-prompt b {
  font-weight:500;
  color:var(--accent)!important;
  text-decoration:none;
  background:var(--accent-soft);
  padding:0 3px;
  border-radius:3px
}
#l1-prompt-ckb,#l2-prompt-ckb {
  font-size:13px;
  line-height:2;
  margin-top:10px;
  padding-top:13px;
  border-top:1px solid var(--border)
}
#l1-instruction {
  font-size:11px;
  line-height:1.7;
  color:var(--text-muted);
  border-top:1px solid var(--border);
  padding-top:15px;
  margin-top:20px
}
#l1-instruction .ckb {
  font-size:11px;
  margin-top:4px
}
#view-l1>div.grid>div:last-child>div:first-child,#view-l2>div.grid>div:last-child>div:first-child {
  padding:23px!important
}
#view-l1>div.grid>div:last-child>div:last-child,#view-l2>div.grid>div:last-child>div:last-child {
  border:none;
  background:transparent;
  padding:18px 0 0!important;
  border-radius:0!important
}
#view-l1 .reminder-label {
  color:var(--text-muted);
  font-size:9px;
  font-weight:600;
  margin:0 0 13px
}
#view-l1 .reminder-label+div {
  gap:0;
  border-top:1px solid var(--border);
  padding-top:13px
}
#view-l1 .reminder-label+div>div {
  background:transparent!important;
  border-radius:0!important;
  padding:0 8px!important;
  border-right:1px solid var(--border);
  font-size:10px;
  color:var(--text-muted);
  line-height:1.8
}
#view-l1 .reminder-label+div>div:last-child {
  border-right:none
}
#view-l1 .reminder-label+div>div>div:first-child {
  color:var(--accent)!important;
  font-size:16px;
  font-family:inherit;
  font-weight:400;
  margin-bottom:3px
}
#view-l1 .reminder-label+div .ckb {
  font-size:10px
}
.opt {
  min-height:49px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:7px;
  font-size:14px;
  font-weight:500;
  color:var(--text-main);
  background:var(--card-bg);
  display:flex;
  align-items:center
}
.opt .letter {
  background:var(--paper);
  color:var(--text-muted);
  width:23px;
  height:23px;
  font-size:10px;
  border-radius:4px;
  font-weight:500;
  margin-right:12px;
  flex-shrink:0
}
.opt:hover:not(:disabled) {
  transform:none;
  border-color:var(--accent);
  background:var(--accent-soft)
}
.opt.correct {
  background:var(--accent-soft);
  border-color:var(--success)
}
.opt.correct:after {
  content:'Correct';
  font-size:9px;
  margin-left:auto;
  padding-left:6px;
  color:var(--success);
  font-weight:600
}
.opt.wrong {
  background:#b4233d0c;
  border-color:var(--danger);
  animation:none
}
.opt.wrong:after {
  content:'Try again';
  font-size:9px;
  margin-left:auto;
  padding-left:6px;
  color:var(--danger);
  font-weight:600
}
.opt[disabled] {
  opacity:.65
}
.opt.correct[disabled],.opt.wrong[disabled] {
  opacity:1
}
.blank {
  border-bottom:2px solid var(--time-a);
  color:var(--accent);
  font-weight:500;
  min-width:48px
}
.lesson-footer {
  max-width:1220px;
  margin:34px auto 24px;
  padding-top:17px;
  border-top:1px solid var(--border);
  color:var(--text-muted);
  font-size:9px;
  line-height:1.8
}
.lesson-footer .ckb {
  font-size:10px;
  margin-top:4px
}
.font-extrabold,.font-black {
  font-weight:600
}
.font-bold {
  font-weight:600
}
.floaty,.popin,.heart.pop,.shake-anim {
  animation:none
}
#view-book article {
  border-top-width:2px;
  padding:22px
}
#view-book h3 {
  font-family:inherit;
  font-size:25px;
  font-weight:400
}
#view-book article ul {
  font-size:12px;
  line-height:1.8
}
#view-book article li {
  padding-bottom:10px
}
#view-book article .ckb {
  font-size:11px
}
#view-book .border-t-4 {
  border-top-color:var(--accent)!important
}
#view-book>div.glass-card {
  padding:24px
}
.bg-slate-100 {
  background:var(--paper)!important
}
.text-sky-600,.text-emerald-600,.text-violet-600,.text-indigo-500 {
  color:var(--accent)!important
}
.text-amber-600,.text-orange-500 {
  color:var(--time-a)!important
}
.bg-amber-50 {
  background:var(--paper)!important
}
.border-amber-200 {
  border-color:var(--border)!important
}
#l2-wrap {
  background:var(--paper);
  border-radius:10px;
  border:1px solid var(--border);
  box-shadow:none;
  overflow:hidden;
  padding-top:0
}
#l2-wrap:before {
  content:'MOVEMENT STUDY · ERBIL TO DUKAN';
  display:block;
  padding:17px 19px;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  font-size:9px;
  letter-spacing:.12em;
  color:var(--text-muted)
}
.trail-legend {
  gap:7px 14px!important;
  padding:12px 0;
  margin:0;
  font-size:9px
}
.trail-legend span {
  font-size:9px;
  font-weight:500
}
.trail-legend i {
  height:2px;
  width:13px
}
.trail-legend span:nth-child(1) i {
  background:#217d91!important
}
.trail-legend span:nth-child(2) i {
  background:#9c6d16!important
}
.trail-legend span:nth-child(3) i {
  background:#13795b!important
}
.trail-legend span:nth-child(4) i {
  background:#1767bd!important
}
.trail-legend span:nth-child(5) i {
  background:#5e5ce6!important
}
.trail-legend span:nth-child(6) i {
  background:#9c6d16!important
}
#l3-arena {
  height:450px;
  background:var(--paper);
  border-radius:8px
}
#l3-arena>div:first-child {
  color:var(--text-muted);
  font-size:10px
}
#l3-token {
  background:var(--card-bg);
  color:var(--text-main);
  border:1px solid var(--border);
  border-radius:7px;
  padding:10px 18px;
  box-shadow:0 3px 9px #182b380c;
  font-weight:500;
  font-size:17px
}
.pyramid {
  gap:6px;
  padding:0 18px 15px
}
.tier {
  clip-path:none;
  border-radius:7px;
  text-shadow:none;
  border:1px solid #fff2;
  text-align:left;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  font-family:inherit;
  font-weight:400;
  font-size:24px;
  color:#ffffff;
  background:#194f49;
  height:64px;
  min-height:64px;
  letter-spacing:0
}
.tier small {
  font-family:inherit;
  font-size:10px;
  line-height:1.4;
  font-weight:400;
  opacity:.85
}
.tier-at {
  width:76%;
  background:#9c6d16
}
.tier-on {
  width:88%;
  background:#1767bd
}
.tier-in {
  width:100%;
  background:#194f49
}
.tier:hover {
  filter:brightness(1.07)
}
#l3-overlay {
  background:var(--paper);
  backdrop-filter:none;
  border-radius:8px
}
.time-intro {
  text-align:center;
  padding:32px;
  max-width:380px
}
.time-intro>.eyebrow {
  color:var(--text-muted)
}
.time-intro h3 {
  font:800 35px/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  letter-spacing:-.6px;
  margin:15px 0
}
.time-intro p {
  font-size:12px;
  line-height:1.8;
  color:var(--text-muted);
  margin-bottom:24px
}
.time-intro .btn {
  font-size:12px;
  padding:10px 18px
}
.tumbler {
  min-width:58px;
  min-height:42px;
  border:1px solid var(--border);
  background:var(--paper);
  color:var(--text-main);
  border-radius:6px;
  font-size:16px;
  font-weight:500
}
.chest {
  font-size:20px;
  color:var(--accent);
  display:flex
}
.chest svg {
  width:23px;
  height:23px
}
.chest.open {
  transform:none
}
#view-l3 #l3-locks>div {
  padding:24px
}
.examiner {
  font:800 96px/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  letter-spacing:-5px;
  color:var(--accent);
  margin:24px auto 5px
}
.challenge-caption {
  font-size:9px;
  letter-spacing:.14em;
  color:var(--text-muted);
  margin-bottom:25px
}
.hp-bar {
  height:5px;
  background:var(--border)
}
.hp-fill {
  background:#13795b;
  height:100%
}
.timer-ring .prog {
  stroke:var(--accent)
}
.timer-ring .prog.warn {
  stroke:var(--danger)
}
#l4-taunt {
  font-size:11px;
  line-height:1.8;
  font-style:normal;
  margin-top:16px
}
#l4-card {
  min-height:265px;
  padding:27px
}
#l4-intro h3 {
  font:800 29px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  margin:0 0 14px
}
#l4-intro p {
  font-size:12px;
  line-height:1.85
}
#l4-intro .btn {
  font-size:13px;
  margin-top:23px
}
#view-l4 .hp-bar+* {
  font-size:12px
}
#l4-result>div:first-child {
  background:#194f49!important
}
.text-rose-500 {
  color:var(--danger)!important
}
#banner {
  background:#182b3866;
  backdrop-filter:blur(5px)
}
#banner .sheet {
  border-radius:14px;
  padding:28px;
  border:1px solid var(--border);
  box-shadow:0 20px 100px #182b3820;
  max-width:570px
}
#banner .sheet.ok,#banner .sheet.bad {
  border-top:1px solid var(--border)
}
#banner-icon {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:9px;
  background:var(--paper);
  color:var(--time-a)
}
#banner-icon svg {
  width:22px;
  height:22px
}
#banner-title {
  font:800 28px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  letter-spacing:-.4px
}
#banner-title-ckb {
  font-size:13px;
  margin-top:5px
}
#banner-body {
  font-size:13px;
  line-height:1.85
}
#banner-actions .btn {
  font-size:12px;
  flex-wrap:wrap;
  line-height:1.5;
  column-gap:6px;
  row-gap:0;
  padding:10px 16px
}
#banner-actions .ckb-text {
  font-size:11px
}
#toast {
  top:auto;
  bottom:24px;
  background:#194f49!important;
  box-shadow:0 5px 18px #182b3820!important;
  border:1px solid #ffffff30;
  border-radius:8px;
  max-width:calc(100vw - 32px);
  font-size:12px;
  font-weight:500;
  width:max-content;
  padding:10px 18px;
  line-height:1.7
}
#toast .ckb-text {
  font-size:11px
}
#toast.show {
  transform:translateX(-50%)
}
.confetti-piece {
  width:4px;
  height:7px;
  opacity:.65
}
#l4-table {
  min-width:680px
}
#l4-table th {
  font-size:9px;
  letter-spacing:.1em
}
#l4-table td {
  font-size:12px;
  padding:14px 12px 14px 0
}
#l4-table .ckb {
  font-size:11px
}
@media(min-width:1550px) {
  .workspace {
    padding:0 64px
  }
  .course-sidebar {
    width:240px;
    padding-left:25px;
    padding-right:25px
  }
  .workspace {
    margin-left:240px
  }
  main {
    padding-top:42px
  }
  .lesson-heading {
    padding-bottom:30px
  }
  .lesson-heading h2 {
    font-size:49px
  }
  .lesson-heading p {
    font-size:13px
  }
}
@media(min-width:1024px) {
  #view-l1>div.grid,#view-l2>div.grid {
    grid-template-columns:minmax(0,1.38fr) minmax(0,1fr)
  }
  #view-l1>div.grid>div,#view-l2>div.grid>div {
    grid-column:auto
  }
}
@media(max-width:1150px) and (min-width:1024px) {
  .course-sidebar {
    width:190px;
    padding-left:13px;
    padding-right:13px
  }
  .workspace {
    margin-left:190px;
    padding:0 25px
  }
  .breadcrumb {
    font-size:10px
  }
  .breadcrumb span {
    margin:0 7px
  }
  .toolbar-controls {
    gap:4px
  }
  .xp-display {
    margin-right:4px
  }
  .lesson-heading h2 {
    font-size:36px
  }
  .lesson-heading p {
    font-size:11px
  }
  #l1-prompt,#l2-prompt {
    font-size:22px
  }
  .scene-controls {
    font-size:9px;
    padding:12px
  }
  .scene-status {
    display:none
  }
}
@media(max-width:1023px) {
  .course-sidebar {
    width:185px;
    padding:26px 12px
  }
  .workspace {
    margin-left:185px;
    padding:0 26px
  }
  .workspace-toolbar {
    height:76px
  }
  .breadcrumb {
    display:none
  }
  .toolbar-controls {
    margin-left:auto
  }
  .course-identity {
    padding-top:30px
  }
  .nav-copy small {
    font-size:9px
  }
  .course-nav .tab-btn {
    gap:8px
  }
  .course-nav .nav-copy strong {
    font-size:12px
  }
  .lesson-heading h2 {
    font-size:36px
  }
  .lesson-heading p {
    font-size:12px
  }
  .scene-card {
    max-width:none
  }
  main section>div.grid {
    grid-template-columns:minmax(0,1fr)
  }
  #view-book>div.grid {
    grid-template-columns:minmax(0,1fr)
  }
  .lesson-heading {
    padding-bottom:23px;
    gap:20px
  }
  .scene-status {
    display:flex
  }
  .lesson-stats {
    max-width:105px
  }
  .lesson-stats [id$='-score'] {
    font-size:10px
  }
  .lesson-stats [id$='-progress'] {
    font-size:9px
  }
  .activity-progress {
    margin-bottom:22px!important
  }
  #view-l1>div.grid>div:last-child {
    display:grid;
    grid-template-columns:1fr;
    gap:16px
  }
  #view-l1>div.grid>div:last-child>div:first-child {
    margin-top:0
  }
  .current-object {
    float:left;
    margin:18px 14px 8px 0;
    width:37px;
    height:37px
  }
  #l1-prompt {
    margin-top:18px
  }
  #l1-instruction {
    clear:both
  }
  #l3-arena {
    height:430px
  }
}
@media(max-width:700px) {
  .course-sidebar {
    position:relative;
    width:auto;
    inset:auto;
    padding:18px 20px 0;
    border-right:0;
    border-bottom:1px solid var(--border);
    display:block;
    background:var(--bg)
  }
  .course-identity {
    padding:0;
    position:absolute;
    left:124px;
    top:17px
  }
  .course-identity .eyebrow {
    font-size:8px;
    letter-spacing:.08em
  }
  .course-identity h1 {
    font-size:16px;
    margin:1px 0 0;
    line-height:1.2;
    letter-spacing:-.3px
  }
  .course-identity p,.sidebar-section-label,.sidebar-progress,.sidebar-bottom,.nav-copy small,.nav-number {
    display:none
  }
  .course-nav {
    display:flex;
    flex-direction:row;
    gap:1px;
    margin:22px -4px 0
  }
  .course-nav .tab-btn {
    flex:1;
    justify-content:center;
    text-align:center;
    min-height:42px;
    padding:8px 4px;
    border-radius:0;
    border:0;
    border-bottom:2px solid transparent;
    background:none!important;
    box-shadow:none!important;
    gap:4px
  }
  .course-nav .tab-btn.active {
    border-bottom-color:var(--accent)
  }
  .nav-copy strong,.course-nav .nav-copy strong {
    font-size:11px;
    font-weight:500;
    white-space:nowrap
  }
  .reference-tab {
    position:absolute;
    right:18px;
    top:19px;
    padding:5px;
    border:none;
    font-size:10px;
    gap:5px
  }
  .reference-tab>svg {
    width:14px
  }
  .reference-tab>svg:last-child {
    display:none
  }
  .reference-tab.active {
    background:var(--accent-soft)!important;
    border-radius:5px
  }
  .tab-btn.is-done .done svg {
    width:11px
  }
  .workspace {
    margin:0;
    padding:0 20px
  }
  .workspace-toolbar {
    height:64px;
    gap:8px
  }
  .toolbar-controls {
    margin:0;
    width:100%;
    gap:7px;
    justify-content:flex-end
  }
  .xp-display {
    margin-right:auto;
    font-size:11px
  }
  .icon-button {
    width:30px;
    height:34px
  }
  .language-switch .btn {
    font-size:10px;
    padding:4px 8px;
    min-height:29px
  }
  .language-switch {
    gap:0
  }
  .lesson-heading {
    padding:1px 0 21px;
    gap:16px;
    align-items:flex-start
  }
  .lesson-kicker {
    font-size:9px;
    margin-bottom:8px
  }
  .lesson-heading h2 {
    font-size:32px;
    line-height:1.15;
    letter-spacing:-.5px;
    margin-bottom:12px
  }
  .lesson-heading p {
    font-size:11px;
    line-height:1.75
  }
  .lesson-heading p.ckb {
    font-size:11px;
    line-height:1.9;
    margin-top:7px
  }
  .lesson-stats {
    position:absolute;
    right:0;
    top:0;
    max-width:none;
    gap:8px;
    align-items:center;
    padding:0
  }
  .lesson-stats [id$='-hearts'] {
    flex-basis:auto;
    gap:2px;
    height:auto
  }
  .heart svg {
    width:12px;
    height:12px
  }
  .lesson-stats [id$='-score'] {
    display:none
  }
  .lesson-stats [id$='-progress'] {
    font-size:9px
  }
  .lesson-stats .streak-flame {
    display:none!important
  }
  .lesson-heading>div:first-child {
    max-width:100%;
    width:100%
  }
  .lesson-heading {
    position:relative
  }
  .lesson-heading h2 {
    padding-top:2px
  }
  .lesson-kicker {
    padding-right:110px
  }
  main {
    padding-top:23px
  }
  main section>div.grid {
    gap:16px
  }
  .activity-progress {
    margin-bottom:20px!important
  }
  .scene-heading {
    padding:13px 14px;
    font-size:8px
  }
  .scene-heading #scene-counter {
    font-size:9px
  }
  .scene-heading svg {
    width:12px;
    height:12px
  }
  .scene-controls {
    padding:11px 12px 9px;
    font-size:9px;
    gap:6px
  }
  .scene-status {
    font-size:8px;
    gap:4px
  }
  .scene-card>div:last-child {
    padding:0 9px 9px
  }
  .scene-card label {
    font-size:9px
  }
  .scene-card .btn {
    font-size:9px;
    padding:3px
  }
  .scene-card .btn svg {
    width:11px
  }
  .scene-card label .ckb-text {
    display:none
  }
  #view-l1>div.grid>div:last-child>div:first-child,#view-l2>div.grid>div:last-child>div:first-child {
    padding:18px!important
  }
  #l1-phase,#l2-stage,#l4-cat {
    font-size:9px;
    max-width:none
  }
  #l1-prompt,#l2-prompt,#l4-q {
    font-size:22px;
    line-height:1.4;
    letter-spacing:-.3px;
    margin-bottom:10px
  }
  .current-object {
    width:34px;
    height:34px;
    border-radius:7px;
    margin:18px 11px 6px 0
  }
  .current-object svg {
    width:20px;
    height:20px
  }
  #l1-prompt-ckb,#l2-prompt-ckb {
    clear:both;
    font-size:12px;
    padding-top:11px
  }
  #l1-instruction {
    font-size:10px;
    padding-top:12px;
    margin-top:15px
  }
  #l1-instruction .ckb {
    font-size:10px
  }
  #view-l1>div.grid>div:last-child>div:last-child {
    padding-top:0!important
  }
  #view-l1 .reminder-label+div>div {
    font-size:10px
  }
  #l1-options {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .opt {
    padding:8px 10px;
    min-height:46px;
    font-size:13px
  }
  .opt .letter {
    margin-right:8px;
    font-size:10px;
    width:21px;
    height:21px
  }
  .opt.correct:after,.opt.wrong:after {
    font-size:8px
  }
  #l1-options .opt {
    flex-wrap:wrap;
    row-gap:4px
  }
  #l1-options .opt:after {
    margin-left:29px;
    flex-basis:100%
  }
  .lesson-footer {
    font-size:9px;
    margin-top:27px;
    line-height:1.9
  }
  .lesson-footer .ckb {
    font-size:9px
  }
  .lesson-heading h2 {
    max-width:340px
  }
  #view-l3 .lesson-heading h2 {
    max-width:260px
  }
  #view-l4 .lesson-heading h2 {
    max-width:250px
  }
  #view-book .lesson-heading h2 {
    max-width:260px
  }
  #view-book>div.glass-card {
    padding:19px
  }
  .tier {
    font-size:22px;
    padding:9px 12px;
    gap:10px
  }
  .tier small {
    font-size:9px
  }
  .tier-at {
    width:85%
  }
  .tier-on {
    width:93%
  }
  .pyramid {
    padding:0 10px 13px
  }
  #l3-arena {
    height:405px
  }
  #l3-token {
    font-size:15px;
    padding:8px 12px
  }
  .time-intro {
    padding:24px
  }
  .time-intro h3 {
    font-size:33px
  }
  #l3-locks {
    grid-template-columns:1fr
  }
  #view-l3 #l3-locks>div {
    padding:18px
  }
  #l4-card {
    padding:20px
  }
  .examiner {
    font-size:70px;
    margin:12px 0 0
  }
  .challenge-caption {
    margin-bottom:17px
  }
  #l4-taunt {
    font-size:10px
  }
  .lesson-footer {
    margin-bottom:20px
  }
  #banner {
    padding:12px;
    align-items:center
  }
  #banner .sheet {
    border-radius:12px;
    padding:22px;
    max-height:90dvh
  }
  #banner-title {
    font-size:25px
  }
  #banner-title-ckb {
    font-size:12px
  }
  #banner-body {
    font-size:12px
  }
  #banner-body .ckb {
    font-size:12px
  }
  #banner-actions {
    justify-content:stretch
  }
  #banner-actions .btn {
    flex:1;
    font-size:11px
  }
  #toast {
    bottom:14px;
    font-size:11px;
    padding:9px 14px
  }
  .skip-link {
    left:20px
  }
  .workspace {
    padding-bottom:env(safe-area-inset-bottom)
  }
}
@media(max-width:365px) {
  .workspace {
    padding:0 15px
  }
  .course-sidebar {
    padding-left:15px;
    padding-right:15px
  }
  .course-identity {
    left:112px
  }
  .reference-tab {
    right:13px;
    font-size:9px
  }
  .course-nav .nav-copy strong {
    font-size:10px
  }
  .lesson-heading h2 {
    font-size:29px
  }
  .scene-controls>span {
    max-width:155px
  }
  .scene-status {
    font-size:8px
  }
  .lesson-kicker {
    font-size:8px
  }
  .language-switch .btn {
    padding:4px 6px
  }
  .toolbar-controls {
    gap:3px
  }
  #l1-phase {
    max-width:170px
  }
  .xp-display {
    font-size:10px
  }
  .tier {
    gap:8px
  }
  .tier small {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .confetti-piece {
    display:none
  }
}

/* Keep the question and its action together when the workspace stacks. */
@media(max-width:1023px) {
  #view-l1>div.grid>div:last-child,#view-l2>div.grid>div:last-child {
    display:contents
  }
  #view-l1>div.grid>div:last-child>div:first-child,#view-l2>div.grid>div:last-child>div:first-child {
    order:1;
    margin:0
  }
  #view-l1>div.grid>.scene-card,#view-l2>div.grid>div:first-child {
    order:2
  }
  #view-l1>div.grid>div:last-child>div:last-child,#view-l2>div.grid>div:last-child>div:last-child {
    order:3;
    margin:0
  }
}
@media(max-width:700px) {
  #view-l1 .lesson-heading>div>p {
    display:none
  }
  #view-l1 .lesson-heading h2 {
    margin-bottom:0
  }
  #view-l1 .lesson-heading {
    padding-bottom:17px
  }
  #view-l1 .activity-progress {
    margin-bottom:18px!important
  }
  #view-l1 #l1-instruction {
    padding-top:0;
    border:0;
    margin-top:11px
  }
  #view-l1 #l1-instruction .ckb {
    display:none
  }
  #view-l1 #l1-prompt-ckb {
    border:0;
    padding-top:0;
    margin-top:8px
  }
  #view-l1 #l1-phase {
    font-size:8px
  }
  #view-l1 .current-object {
    margin-top:16px
  }
  #view-l1 #l1-prompt {
    margin-top:16px;
    margin-bottom:7px
  }
  #view-l1 #l1-prompt-ckb {
    font-size:12px
  }
  #view-l1 .scene-card label {
    min-height:34px
  }
  #view-l1 .scene-card .btn {
    min-height:34px
  }
  .language-switch .btn {
    min-height:34px
  }
  .icon-button {
    min-height:38px
  }
}
.mobile-clock {
  display:none
}
@media(max-width:700px) {
  .mobile-clock {
    display:inline-flex;
    color:var(--accent);
    font-variant-numeric:tabular-nums;
    font-size:12px;
    margin-right:8px
  }
  #l4-cat {
    margin-right:auto
  }
  .tier small {
    font-size:10px
  }
  .tier-at {
    width:90%
  }
  .tier-on {
    width:95%
  }
}

/* ── Site layer ── */
/* Site header: the same brand mark and return pill as the other Grade 11 modules. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 247, 251, 0.93);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.site-header__inner {
  min-height: 62px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand,
.return-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sea);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #3c95ee, #2464d9);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(36, 100, 217, 0.85);
  direction: ltr;
  font-size: 12px;
  letter-spacing: -0.04em;
}
.return-link {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  padding-inline: 14px;
}
.return-link:hover {
  background: #fff;
}
@media (max-width: 700px) {
  .site-header__inner { padding: 0 16px; }
}

/* The fixed activity rail starts under the sticky site header. */
@media (min-width: 701px) {
  .course-sidebar { top: 62px; }
}
@media (max-width: 700px) {
  .course-identity { position: static; padding: 0 110px 0 0; }
  .course-identity h1 { font-size: 17px; }
}

/* Site type: system stack everywhere, headings bold rather than a serif display face. */
.lesson-heading h2,
#view-book h3,
.tier,
#view-l1 .reminder-label + div > div > div:first-child {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tier small { font-weight: 500; }

/* Level accents: place = sea green, movement = blue, time = gold, exam = violet (the site's practice colour). */
#view-book,
#view-l1 { --accent: var(--sea); --accent-soft: var(--sea-soft); }
#view-l2 { --accent: var(--blue); --accent-soft: var(--blue-soft); }
#view-l3 { --accent: var(--gold); --accent-soft: var(--gold-soft); }
#view-l4 { --accent: var(--violet); --accent-soft: var(--violet-soft); }
.active .nav-number { background: var(--blue); border-color: var(--blue); }
.tier-at { background: var(--gold); }
.tier-on { background: var(--blue); }
.tier-in { background: var(--sea); }
.hp-fill { background: var(--correct); }
#l4-result > div:first-child { background: linear-gradient(135deg, #4f4dc9, var(--violet)) !important; }
.heart svg { color: var(--incorrect); fill: rgba(180, 35, 61, 0.1); }
#toast { background: var(--sea) !important; }

/* Tailwind colour utilities the markup still uses, remapped to the site palette. */
.bg-sky-50, .bg-sky-100, .bg-violet-50, .bg-violet-100, .bg-indigo-100 { background-color: var(--accent-soft); }
.bg-emerald-50 { background-color: var(--correct-soft); }
.bg-emerald-500 { background-color: var(--correct); }
.bg-rose-50 { background-color: var(--incorrect-soft); }
.bg-rose-500 { background-color: var(--incorrect); }
.bg-amber-100 { background-color: var(--gold-soft); }
.border-violet-200 { border-color: rgba(94, 92, 230, 0.25); }
.text-sky-700, .text-violet-700, .text-indigo-700, .text-cyan-600 { color: var(--accent); }
.text-amber-700, .text-amber-800, .text-orange-600, .text-yellow-600 { color: var(--gold); }
.text-amber-200 { color: var(--muted); }

/* One site, three years: the same grade path the other modules end with (Kurdish, RTL). */
.grade-path {
  max-width: 1220px;
  margin: 34px auto 0;
  padding: 22px;
  border: 1px solid rgba(29, 90, 80, 0.16);
  border-radius: 24px;
  background: linear-gradient(145deg, #eef8f5, #fff);
  box-shadow: 0 22px 60px -50px rgba(16, 54, 48, 0.7);
}
.grade-path > span { color: #1d5a50; font-size: 11px; font-weight: 800; }
.grade-path h2 { margin: 5px 0 0; font-size: clamp(19px, 4vw, 26px); font-weight: 800; line-height: 1.55; }
.grade-path p { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.9; }
.grade-path nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.grade-path nav a {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(29, 90, 80, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #1d5a50;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
}
.grade-path nav a[aria-current="page"] { background: #1d5a50; color: #fff; }
@media (max-width: 560px) {
  .grade-path nav { grid-template-columns: 1fr; }
}
.lesson-footer { font-size: 10px; }
.lesson-footer b { color: var(--correct); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}
.noscript {
  margin: 30px auto;
  max-width: 600px;
  border-radius: 14px;
  background: var(--incorrect-soft);
  padding: 15px;
  color: var(--incorrect);
  text-align: center;
}

/* Installed app: keep the sheet and the toast clear of the bottom tab bar. */
html.poli21-static-app #banner { padding-bottom: var(--p21-app-tabbar-space); }
html.poli21-static-app #toast { bottom: calc(24px + var(--p21-app-tabbar-space)); }