@font-face { font-family: "IndoPak Nastaleeq"; src: url("../fonts/indopak-nastaleeq.woff2") format("woff2"); font-display: swap; }
/* Al-Tarteel — midnight & gold (dark by default) with a warm paper light theme. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --page: #050506; --surface-1: #0e0e10; --surface-2: #151517; --surface-3: #1d1d20; --surface-4: #26262a;
  --line-subtle: rgba(255,255,255,.07); --line: rgba(255,255,255,.11); --line-strong: rgba(255,255,255,.19);
  --text: #f3f3f1; --text-2: #cfcfca; --text-muted: #a3a39e; --text-disabled: #5c5c59;
  --gold: #d1ae68; --gold-hover: #ddbd7e; --gold-press: #bf9a52; --gold-soft: rgba(209,174,104,.13); --gold-line: rgba(209,174,104,.4); --on-gold: #17120a;
  --gold-glow: rgba(209,174,104,.55);
  --success: #6cc495; --success-soft: rgba(108,196,149,.13); --success-line: rgba(108,196,149,.34);
  --review: #f0954a; --review-soft: rgba(240,149,74,.12); --review-line: rgba(240,149,74,.34);
  --info: #86ade0; --info-soft: rgba(134,173,224,.12); --info-line: rgba(134,173,224,.34);
  --focus: #e9cb85;
  --hl-red: #f2786a; --hl-green: #6fd39b; --hl-blue: #7fb2ee; --hl-orange: #f39a52; --hl-yellow: #ecd36a; --hl-purple: #c39af0; --hl-pink: #f08cc0; --hl-brown: #c99a6b;
  --elev-1: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px var(--line-subtle);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--line-subtle), 0 14px 32px -16px rgba(0,0,0,.9);
  --elev-3: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--line-strong), 0 28px 60px -20px rgba(0,0,0,.95);
  --page-sheen: radial-gradient(1100px 520px at 85% -12%, rgba(209,174,104,.075), transparent 62%), radial-gradient(900px 480px at 0% -10%, rgba(255,255,255,.045), transparent 60%), linear-gradient(180deg, #08080a 0%, #050506 38%);
  --ornament: .05;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f6f2e9; --surface-1: #fffdf8; --surface-2: #f1ebdf; --surface-3: #e8dfcd; --surface-4: #ffffff;
  --line-subtle: rgba(28,26,22,.07); --line: rgba(28,26,22,.12); --line-strong: rgba(28,26,22,.2);
  --text: #1c1a16; --text-2: #48433a; --text-muted: #625b4e; --text-disabled: #a39c8e;
  --gold: #735719; --gold-hover: #5f4813; --gold-press: #4e3b10; --gold-soft: rgba(176,138,62,.14); --gold-line: rgba(115,87,25,.4); --on-gold: #fffdf8;
  --gold-glow: rgba(176,138,62,.45);
  --success: #256845; --success-soft: rgba(37,104,69,.09); --success-line: rgba(37,104,69,.3);
  --review: #94480b; --review-soft: rgba(148,72,11,.08); --review-line: rgba(148,72,11,.3);
  --info: #2d5b98; --info-soft: rgba(45,91,152,.09); --info-line: rgba(45,91,152,.3);
  --focus: #7a5c1a;
  --hl-red: #b8321f; --hl-green: #1d7a45; --hl-blue: #2459a8; --hl-orange: #a85212; --hl-yellow: #8a6d00; --hl-purple: #7140b0; --hl-pink: #b0306f; --hl-brown: #7d5228;
  --elev-1: 0 1px 2px rgba(28,26,22,.05), 0 0 0 1px var(--line-subtle);
  --elev-2: 0 1px 2px rgba(28,26,22,.06), 0 0 0 1px var(--line-subtle), 0 12px 28px -16px rgba(28,26,22,.28);
  --elev-3: 0 0 0 1px var(--line), 0 28px 56px -20px rgba(28,26,22,.32);
  --page-sheen: radial-gradient(900px 420px at 90% -10%, rgba(176,138,62,.10), transparent 62%), #f6f2e9;
  --ornament: .08;
}
:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-italic: "Instrument Serif", "Fraunces", Georgia, serif;
  --font-ar: "IndoPak Nastaleeq", "Noto Naskh Arabic", "Amiri", serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;
  --topbar-h: 64px;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-drawer: cubic-bezier(.32,.72,0,1); --spring-sm: cubic-bezier(.3,1.35,.4,1);
  --t-press: 100ms; --t-hover: 150ms; --t-state: 200ms; --t-panel: 320ms; --t-sheet: 420ms;
  --gutter: max(16px, env(safe-area-inset-left));
  --ar-size: 2.8rem; --en-scale: 1;
  --girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='.8'%3E%3Crect x='12' y='12' width='24' height='24'/%3E%3Crect x='12' y='12' width='24' height='24' transform='rotate(45 24 24)'/%3E%3Cpath d='M0 24h7M41 24h7M24 0v7M24 41v7'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; scroll-padding: calc(var(--topbar-h) + 16px) 0 150px; scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100svh; background: var(--page-sheen) fixed, var(--page); color: var(--text);
  font: 400 1rem/1.55 var(--font-ui); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; flex: none; }
h1, h2, h3, p { margin: 0; }
a { color: var(--gold); text-underline-offset: .2em; text-decoration-color: var(--gold-line); }
:lang(ar) { font-family: var(--font-ar); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eyebrow { margin: 0 0 10px; font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }

/* View Transition theme switch: the new theme grows as a circle from the button. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ── Buttons ── */
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-size: .9375rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover), scale var(--t-press) var(--ease-out), box-shadow var(--t-hover); touch-action: manipulation; }
button:hover:not(:disabled), .btn:hover { background-color: var(--surface-3); }
button:active:not(:disabled), .btn:active { scale: .96; }
button:disabled { cursor: not-allowed; color: var(--text-disabled); border-color: var(--line-subtle); background: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--gold-soft); color: var(--text); }
.btn-icon { width: 44px; padding: 0; background: transparent; border-color: transparent; color: var(--text-2); }
.btn-icon:hover:not(:disabled) { background: var(--gold-soft); color: var(--text); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.btn-gold {
  position: relative; display: inline-grid; grid-auto-flow: column; padding: 0 22px; border-color: transparent; color: var(--on-gold); font-weight: 700;
  background-color: var(--gold); background-image: linear-gradient(180deg, rgb(255 255 255 / .18), transparent 55%);
  box-shadow: 0 10px 24px -10px var(--gold-glow), inset 0 1px 0 rgb(255 255 255 / .35);
}
.btn-gold:hover:not(:disabled) { background-color: var(--gold-hover); translate: 0 -1px; }
.btn-gold:active:not(:disabled) { background-color: var(--gold-press); translate: 0 1px; }
.btn-gold .btn-state { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out); }
.btn-gold[data-state] .btn-state[data-for] { opacity: 0; translate: 0 6px; pointer-events: none; }
.btn-gold[data-state="idle"] .btn-state[data-for="idle"], .btn-gold[data-state="busy"] .btn-state[data-for="busy"] { opacity: 1; translate: 0 0; }
.btn-big { min-height: 54px; padding: 0 26px; font-size: 1.0625rem; border-radius: var(--r-lg); }
.btn-big svg { width: 22px; height: 22px; }
.chip-btn { min-height: 36px; padding: 0 13px 0 10px; border-radius: var(--r-full); background: transparent; border-color: var(--line); color: var(--text-2); font-size: .875rem; }
.chip-btn svg { width: 17px; height: 17px; color: var(--gold); }
.chip-btn[aria-pressed="true"], .chip-btn.on { background: var(--gold-soft); border-color: var(--gold-line); color: var(--text); }
.chip-btn:disabled svg { color: var(--text-disabled); }

/* ── Top bar ── */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: color-mix(in srgb, var(--page) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-subtle);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex: none; }
.brand-mark { width: 30px; height: 30px; color: var(--gold); }
.brand-name { font: 500 1.3rem/1.2 var(--font-display); font-variation-settings: "opsz" 48; letter-spacing: -.01em; white-space: nowrap; }
.brand-name em { font: italic 400 1.18em/1 var(--font-italic); color: var(--gold); }
.crumb { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); color: var(--text-2); text-decoration: none; white-space: nowrap; }
.crumb b { flex: none; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.crumb span { overflow: hidden; text-overflow: ellipsis; font: 500 1rem/1.2 var(--font-display); }
.top-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.top-link { min-height: 40px; padding: 0 12px; }
.top-link svg { width: 18px; height: 18px; color: var(--gold); }
.top-actions .on { background: var(--gold-soft); color: var(--text); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; scale: 0 1; background: linear-gradient(90deg, var(--gold-press), var(--gold), var(--gold-hover)); box-shadow: 0 0 12px var(--gold-glow); transition: scale 500ms var(--ease-out); }

/* Segmented controls with a gliding pill. */
.seg { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-full); background: var(--surface-1); box-shadow: var(--elev-1); }
.seg button { position: relative; z-index: 1; min-height: 34px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--r-full); color: var(--text-2); font-weight: 650; font-size: .875rem; font-variant-numeric: tabular-nums; }
.seg button svg { width: 16px; height: 16px; }
.seg button:hover:not(:disabled) { background: transparent; color: var(--text); }
.seg button[aria-checked="true"] { color: var(--gold); }
.seg-pill { position: absolute; top: 0; left: 0; height: 0; width: 0; border-radius: var(--r-full); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--gold-line); opacity: 0; pointer-events: none; }
.seg-pill.is-set { opacity: 1; }
.seg-pill.glide { transition: translate 300ms var(--ease-out), width 300ms var(--ease-out), opacity var(--t-state); }
.size-seg button { min-width: 44px; padding: 0 8px; }
.g { display: inline-block; line-height: 1; color: inherit; }
.g1 { font-size: 1rem; } .g2 { font-size: 1.3rem; } .g3 { font-size: 1.6rem; } .g4 { font-size: 1.9rem; }
.size-seg .g[lang="ar"] { margin-top: -6px; }
.e1 { font: 600 .75rem/1 var(--font-display); } .e2 { font: 600 .9rem/1 var(--font-display); } .e3 { font: 600 1.05rem/1 var(--font-display); } .e4 { font: 600 1.25rem/1 var(--font-display); }

/* ── Views ── */
#app { padding: 0 var(--gutter); }
.view { width: min(1040px, 100%); margin: 0 auto; }

/* ── Home ── */
.hero { position: relative; overflow: hidden; margin: 24px 0 0; padding: 44px 40px 36px; border-radius: var(--r-xl); background: var(--surface-1); box-shadow: var(--elev-2); }
.hero::after { content: ""; position: absolute; top: -90px; right: -90px; width: 340px; height: 340px; pointer-events: none; opacity: calc(var(--ornament) * 1.4); background: var(--gold); -webkit-mask: var(--girih) center / 48px 48px, radial-gradient(closest-side, #000, transparent); -webkit-mask-composite: source-in; mask: var(--girih) center / 48px 48px, radial-gradient(closest-side, #000, transparent); mask-composite: intersect; }
.hero-ornament { position: absolute; right: 36px; bottom: -40px; width: 220px; height: 220px; color: var(--gold); opacity: .05; }
.hero-ar { position: relative; font: 400 clamp(2.4rem, 6vw, 3.4rem)/1.9 var(--font-ar); color: var(--gold); direction: rtl; text-align: left; }
.hero h1 { position: relative; max-width: 16ch; font: 400 clamp(2.3rem, 5.4vw, 3.8rem)/1.04 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.025em; }
.hero h1 em { font: italic 400 1.1em/1 var(--font-italic); letter-spacing: 0; color: var(--gold); }
.hero-sub { position: relative; max-width: 52ch; margin-top: 16px; color: var(--text-2); font-size: 1.0625rem; }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.hero-stats b { color: var(--text); font-weight: 650; }
.hs-stars { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); }
.hs-stars b { color: var(--gold); }
.hs-stars svg { width: 17px; height: 17px; }
.mastery { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 14px 18px; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--elev-1); color: var(--text-2); text-decoration: none; transition: background-color var(--t-hover); }
.mastery:hover { background: var(--surface-2); }
.mastery b { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.mastery > svg { margin-left: auto; width: 18px; height: 18px; color: var(--text-muted); }
.ms-bar { flex: 0 1 160px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-3); }
.ms-bar i { display: block; height: 100%; transform-origin: 0 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); border-radius: 3px; }

.course { margin-top: 30px; display: grid; gap: 30px; }
.unit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line-subtle); }
.unit-head .eyebrow { margin: 0; flex-basis: 100%; }
.unit-head h2 { font: 500 1.45rem/1.2 var(--font-display); font-variation-settings: "opsz" 48; letter-spacing: -.01em; }
.unit-count { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lesson-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--elev-1); color: var(--text); text-decoration: none; transition: background-color var(--t-hover), box-shadow var(--t-hover), translate var(--t-press); }
.lesson-row:hover { background: var(--surface-2); }
.lesson-row:active { translate: 0 1px; }
.ln { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-3); font: 500 1.05rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-2); }
.lt { min-width: 0; }
.lt b { display: block; font-weight: 600; line-height: 1.3; }
.lt small { color: var(--text-muted); font-size: .8125rem; }
.ls { display: grid; place-items: center; width: 26px; height: 26px; }
.ls svg { width: 16px; height: 16px; }
.lesson-row.is-done .ln { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); }
.lesson-row.is-done .ls { border-radius: 50%; background: var(--gold); color: var(--on-gold); }
.lesson-row.is-going .ls .half { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gold); background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); }
.lesson-row.is-next { box-shadow: var(--elev-1), 0 0 0 1.5px var(--gold-line); }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 40px 0 0; padding: 22px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-subtle); color: var(--text-muted); font-size: .8125rem; text-align: center; }
.foot a { color: var(--text-2); font-weight: 600; }

/* ── Pages (credits, rules) ── */
.page { padding: 24px 0 40px; }
.page-card, .credits-card { position: relative; overflow: hidden; padding: 36px 36px 32px; border-radius: var(--r-xl); background: var(--surface-1); box-shadow: var(--elev-2); }
.credits { width: min(760px, 100%); padding: 24px 0 40px; }
.credits-card h1, .page-title { font: 400 clamp(2rem, 4.4vw, 3rem)/1.06 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.credits-card h1 em, .page-title em { font: italic 400 1.1em/1 var(--font-italic); letter-spacing: 0; color: var(--gold); }
.credit-list { display: grid; gap: 18px; margin: 26px 0 0; }
.credit-list div { padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--elev-1); }
.credit-list dt { display: flex; align-items: center; gap: 9px; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.credit-list dt svg { width: 16px; height: 16px; }
.credit-list dd { margin: 8px 0 0; color: var(--text-2); }
.credit-list a { color: var(--text); font-weight: 600; }
.credit-note { margin: 22px 0 14px; color: var(--text-muted); font-size: .875rem; }
.page-sub { margin-top: 10px; color: var(--text-2); font-size: 1.0625rem; }
.page-sub b { color: var(--gold); font-variant-numeric: tabular-nums; }

/* Rules */
.rules { width: min(860px, 100%); }
.rule-list { display: grid; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.rule-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 96px; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--elev-1); color: var(--text); text-decoration: none; transition: background-color var(--t-hover); }
.rule-row:hover { background: var(--surface-3); }
.rr-text b { display: block; font-weight: 600; line-height: 1.3; }
.rr-text small { color: var(--text-muted); font-size: .8125rem; }
.rule-row .lvl { justify-self: end; }
.rr-ar, .cp-ar { font-size: 1.5rem; line-height: 1.6; color: var(--text-2); }
.m-ring { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.m-ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.m-ring circle { fill: none; stroke-width: 3.2; }
.m-ring .t { stroke: var(--surface-4); }
.m-ring .f { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 500ms var(--ease-out); }
.m-ring.lv0 .f { stroke: transparent; }
.m-ring > svg:not(:first-child) { width: 18px; height: 18px; color: var(--gold); }
.m-ring.lv3 { border-radius: 50%; background: var(--gold-soft); }
.lvl { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-full); font-size: .75rem; font-weight: 650; white-space: nowrap; background: var(--surface-3); color: var(--text-muted); }
.lvl.lv1 { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }
.lvl.lv2 { background: var(--success-soft); color: var(--success); box-shadow: inset 0 0 0 1px var(--success-line); }
.lvl.lv3 { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: -6px 0 18px -6px; padding: 6px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.back-link svg { width: 18px; height: 18px; }
.rule-head { display: flex; align-items: center; gap: 18px; }
.rule-head .m-ring { width: 64px; height: 64px; }
.rule-head .m-ring > svg:not(:first-child) { width: 24px; height: 24px; }
.rule-head .eyebrow { margin-bottom: 4px; }
.rule-ar { font-size: 2rem; line-height: 1.8; color: var(--gold); text-align: left; }
.rule-sum { margin-top: 18px; max-width: 60ch; font-size: calc(1.0625rem * var(--en-scale)); color: var(--text); }
.rule-how { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }
.rule-how p:last-child { color: var(--text); font-size: calc(1rem * var(--en-scale)); }
.mini-h { margin-bottom: 8px; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.rule-sec { margin-top: 24px; }
.checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.check { display: flex; justify-content: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px 10px 10px; border-radius: var(--r-md); background: var(--surface-2); border-color: var(--line); text-align: left; white-space: normal; font-weight: 500; font-size: calc(.9375rem * var(--en-scale)); color: var(--text-2); }
.check .box, .assign-toggle .box { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: transparent; transition: background-color var(--t-state), color var(--t-state); }
.check .box svg, .assign-toggle .box svg { width: 16px; height: 16px; }
.check[aria-pressed="true"] { color: var(--text); border-color: var(--success-line); background: var(--success-soft); }
.check[aria-pressed="true"] .box, .assign-toggle[aria-pressed="true"] .box { background: var(--gold); color: var(--on-gold); box-shadow: none; }
.check[aria-pressed="true"] .box svg, .assign-toggle[aria-pressed="true"] .box svg { animation: pop 380ms var(--spring-sm); }
@keyframes pop { from { scale: 0; } }
.cp-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cp-foot:empty { display: none; }
.rule-state { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; font-size: .9375rem; }
.rule-state svg { width: 18px; height: 18px; }
.les-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.les-chip { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 40px; padding: 4px 14px 4px 5px; border-radius: var(--r-full); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); text-decoration: none; font-size: .875rem; font-weight: 600; }
.les-chip b { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold); font-variant-numeric: tabular-nums; }
.les-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.les-chip:hover { background: var(--surface-3); }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ex { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--elev-1); color: var(--text); text-decoration: none; }
.ex img { display: block; width: 100%; height: auto; }
.ex span { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: var(--r-full); background: rgb(0 0 0 / .65); color: #fff; font-size: .75rem; font-weight: 600; }

/* ── Lesson ── */
.lesson { display: flex; flex-direction: column; min-height: calc(100svh - var(--topbar-h) - env(safe-area-inset-top)); width: min(900px, 100%); }
.lesson-scroll { flex: 1; padding: 22px 0 24px; touch-action: pan-y; }
.card { position: relative; overflow: hidden; padding: 30px 34px 34px; border-radius: var(--r-xl); background: var(--surface-1); box-shadow: var(--elev-2); }
.card::after { content: ""; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; pointer-events: none; opacity: var(--ornament); background: var(--gold); -webkit-mask: var(--girih) center / 48px 48px, radial-gradient(closest-side, #000, transparent); -webkit-mask-composite: source-in; mask: var(--girih) center / 48px 48px, radial-gradient(closest-side, #000, transparent); mask-composite: intersect; }
.card > * { position: relative; z-index: 1; }
.card-head { margin-bottom: 18px; }
.card-title { font: 450 clamp(1.6rem, 3.2vw, 2.3rem)/1.12 var(--font-display); font-variation-settings: "opsz" 60; letter-spacing: -.02em; text-wrap: balance; }
.card-title em { font: italic 400 1.1em/1 var(--font-italic); letter-spacing: 0; color: var(--gold); }
.card-title b { font-weight: 550; }
.card-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.slide-img { position: relative; width: fit-content; max-width: 100%; margin: 0 auto 20px; padding: 8px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--elev-1); }
.slide-img::before, .slide-img::after { content: ""; position: absolute; z-index: 2; width: 18px; height: 18px; border: 1.5px solid var(--gold-line); pointer-events: none; }
.slide-img::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.slide-img::after { right: 4px; bottom: 4px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.slide-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 62svh; border-radius: calc(var(--r-lg) - 8px); }
@media (prefers-reduced-motion: no-preference) {
  .card.enter { animation: card-in 380ms var(--ease-out) backwards; }
  .card.enter[data-dir="-1"] { animation-name: card-in-back; }
  .card.enter[data-dir="0"] { animation-name: card-fade; }
  @keyframes card-in { from { opacity: 0; translate: 24px 0; } }
  @keyframes card-in-back { from { opacity: 0; translate: -24px 0; } }
  @keyframes card-fade { from { opacity: 0; translate: 0 8px; } }
  .sheet[open] { animation: sheet-in var(--t-sheet) var(--ease-drawer) backwards; }
  @keyframes sheet-in { from { translate: 0 24px; opacity: 0; } }
}

.blocks { display: grid; gap: 14px; font-size: calc(1rem * var(--en-scale)); }
.txt { font-size: 1.0625em; color: var(--text); }
.txt b, .bul b { color: var(--gold); font-weight: 650; }
.bul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bul li { position: relative; padding-left: 22px; font-size: 1.0625em; color: var(--text); }
.bul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; rotate: 45deg; background: var(--gold); border-radius: 1.5px; }
.en { margin-top: 6px; color: var(--text-2); font-size: 1em; line-height: 1.6; }
.tr { margin-top: 6px; color: var(--text); font-weight: 600; font-size: 1.05em; }

/* Arabic lines */
.ar-blk, .quran { display: grid; gap: 8px; margin: 0; }
.line { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--elev-1); transition: box-shadow var(--t-state), background-color var(--t-state); }
.line.audible { cursor: pointer; }
.ar-line { position: relative; flex: 1; min-width: 0; order: 2; padding: 0 6px; direction: rtl; text-align: right; font: 400 var(--ar-size)/2.05 var(--font-ar); color: var(--text); overflow-wrap: anywhere; }
.line-btns { order: 1; display: flex; flex-direction: column; gap: 6px; }
.line.solo { justify-content: center; background: transparent; box-shadow: none; padding: 0; }
.line.solo .ar-line { flex: 0 1 auto; text-align: center; font-size: calc(var(--ar-size) * 1.45); padding: 0 24px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--elev-1); }
.line.solo .line-btns { order: 3; }
.lb { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }
.lb svg { width: 18px; height: 18px; }
.lb:hover:not(:disabled) { background: var(--gold); color: var(--on-gold); }
.lb-rep { background: transparent; border-color: var(--line-strong); color: var(--text-2); }
.lb-rep.on, .line.is-playing .lb-play { background: var(--gold); border-color: transparent; color: var(--on-gold); }
.line.is-playing, .line.solo.is-playing .ar-line { box-shadow: var(--elev-1), 0 0 0 1.5px var(--gold), 0 12px 30px -16px var(--gold-glow); }
.line.solo.is-playing { box-shadow: none; }
.line.is-turn, .line.solo.is-turn .ar-line, .tile.is-turn { box-shadow: var(--elev-1), 0 0 0 1.5px var(--gold-line); animation: turn 1.4s var(--ease-out) infinite; }
.line.solo.is-turn { box-shadow: none; animation: none; }
@keyframes turn { 50% { box-shadow: var(--elev-1), 0 0 0 4px var(--gold-soft); } }

/* Words: tap to hear; during playback the current word is lifted and underlined in gold. */
.w { display: inline-block; position: relative; padding: 0 .04em; border-radius: 8px; transition: color 180ms var(--ease-out), transform 260ms var(--ease-out), text-shadow 260ms var(--ease-out), opacity 260ms; transform-origin: 50% 70%; }
.line.audible .w.t:hover { color: var(--gold); }
.hl-whole { color: var(--hl); }
.w mark { background: none; color: var(--hl); }
.w.on { color: var(--gold); transform: scale(1.08); text-shadow: 0 0 18px var(--gold-glow); }
.w.on.hl-whole, .w.on mark { color: var(--hl); }
.is-playing .w.past { opacity: .62; }
.w.turn { color: var(--gold); }
.sync-bar { position: absolute; left: 0; top: 0; height: 3px; width: 0; margin-top: -.42em; border-radius: 3px; background: linear-gradient(90deg, var(--gold-press), var(--gold-hover), var(--gold-press)); box-shadow: 0 0 12px var(--gold-glow); opacity: 0; pointer-events: none; transition: translate 240ms var(--ease-out), width 240ms var(--ease-out), opacity 200ms; font-size: var(--ar-size); }
.line.solo .sync-bar { font-size: calc(var(--ar-size) * 1.45); }
.sync-bar.show { opacity: 1; }
.ayah { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin: 0 .15em; padding: 0 .2em; vertical-align: middle; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold-line); color: var(--gold); font: 400 calc(var(--ar-size) * .42)/1 var(--font-ar); }

/* Letter and word tiles */
.tiles { display: flex; flex-wrap: wrap; gap: 10px; direction: rtl; }
.tile { display: inline-grid; place-items: center; min-width: calc(var(--ar-size) * 1.7); min-height: calc(var(--ar-size) * 1.9); padding: 0 .35em; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--elev-1); color: var(--text); font: 400 calc(var(--ar-size) * 1.05)/1.6 var(--font-ar); white-space: nowrap; }
.tiles.letters .tile { width: calc(var(--ar-size) * 1.7); padding: 0; }
.tiles.words .tile { font-size: var(--ar-size); padding: 0 .5em; }
button.tile:hover:not(:disabled) { background: var(--surface-3); border-color: var(--gold-line); }
.tile.is-playing { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px -12px var(--gold-glow); }
.tile.is-playing .w { color: var(--gold); transform: scale(1.1); }
.tile .w.hl-whole { color: var(--hl); }
/* No audio: flat, dashed and quieter, so it does not read as tappable. */
.tile:not(.audible), .line:not(.audible):not(.solo), .line.solo:not(.audible) .ar-line { background: transparent; box-shadow: none; border: 1px dashed var(--line-strong); cursor: default; }
.tile:not(.audible), .line:not(.audible) .ar-line { color: var(--text-muted); }
.grp-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-blk > .grp-btns { margin-bottom: 2px; }

/* Qur'an */
.quran { padding: 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-2) 55%, transparent); box-shadow: inset 0 0 0 1px var(--gold-line); }
.q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.q-label { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.q-label svg { width: 16px; height: 16px; }
.q-en { padding: 4px 4px 0; font: italic 400 1.2em/1.45 var(--font-italic); color: var(--text-2); }

/* Tables */
.tbl { overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--elev-1); }
.tbl table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tbl td { padding: 10px 12px; border-top: 1px solid var(--line-subtle); text-align: center; background: var(--surface-2); color: var(--text-2); font-weight: 600; overflow-wrap: anywhere; }
.tbl tr:first-child td { border-top: 0; }
.tbl td + td { border-left: 1px solid var(--line-subtle); }
.tbl td[lang="ar"] { font: 400 calc(var(--ar-size) * .95)/1.9 var(--font-ar); color: var(--text); }
.img-blk { justify-self: start; min-height: 40px; border-radius: var(--r-full); background: transparent; border-color: var(--gold-line); color: var(--text); }
.img-blk svg { color: var(--gold); }

/* ── Dock ── */
.dock {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--page) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-subtle);
}
.dock-mid { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.dock-side { height: 50px; padding: 0 16px; border-radius: var(--r-lg); }
.dock-side svg { width: 22px; height: 22px; }
.dock-play { height: 50px; min-width: 138px; border-radius: var(--r-lg); }
.dock-repeat { position: relative; height: 50px; padding: 0 16px 0 8px; gap: 8px; border-radius: var(--r-lg); background: var(--surface-2); }
.ring { position: relative; display: grid; place-items: center; width: 36px; height: 36px; }
.ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 3; }
.ring-track { stroke: transparent; }
.ring-fill { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 106.81; stroke-dashoffset: 106.81; }
.ring-icon { width: 18px; height: 18px; color: var(--gold); }
.dock-repeat[data-state="listen"], .dock-repeat[data-state="turn"] { border-color: var(--gold-line); background: var(--gold-soft); }
.dock-repeat[data-state="turn"] .ring-track { stroke: var(--surface-4); }
.dock-repeat[data-state="listen"] .ring-icon { animation: spin-slow 2.4s linear infinite; }
@keyframes spin-slow { to { rotate: 360deg; } }
.rep-label { min-width: 5.6em; text-align: left; }
.dock-repeat[data-state="turn"] .rep-label { color: var(--gold); }
.dock.no-audio .dock-play, .dock.no-audio .dock-repeat, .dock.no-audio .speed-seg { display: none; }
.dock-next { margin-left: auto; }

/* ── Quiz ── */
.quiz-dots { display: flex; gap: 6px; margin: 0 0 22px; }
.quiz-dots i { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-3); }
.quiz-dots i.on { background: var(--gold); } .quiz-dots i.cur { background: var(--gold-line); }
.quiz-play { display: flex; justify-content: center; margin-bottom: 22px; }
.quiz-play .is-playing { box-shadow: 0 0 0 4px var(--gold-soft), 0 10px 24px -10px var(--gold-glow); }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt { min-height: calc(var(--ar-size) * 2.1); padding: 4px 14px; border-radius: var(--r-lg); background: var(--surface-2); border-color: var(--line); font: 400 var(--ar-size)/1.9 var(--font-ar); color: var(--text); white-space: normal; direction: rtl; }
.opt.right { border-color: var(--success); background: var(--success-soft); box-shadow: 0 0 0 1px var(--success); color: var(--text); }
.opt.wrong { border-color: var(--review-line); animation: nudge 360ms var(--ease-out); }
.opt:disabled:not(.right) { opacity: .45; color: var(--text); }
@keyframes nudge { 25% { translate: -6px 0; } 60% { translate: 5px 0; } }
.quiz-feedback { min-height: 1.6em; margin-top: 16px; text-align: center; font: italic 400 1.6rem/1.3 var(--font-italic); color: var(--gold); }
.result, .soon { display: grid; justify-items: center; gap: 16px; padding: 24px 0 10px; text-align: center; }
.result-stars, .end-stars { display: flex; gap: 8px; }
.result-stars span, .end-stars span { color: var(--surface-4); }
.result-stars span.on, .end-stars span.on { color: var(--gold); filter: drop-shadow(0 0 10px var(--gold-glow)); }
.result-stars svg { width: 52px; height: 52px; }
.end-stars { margin-top: 14px; }
.end-stars svg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .result-stars span.on { animation: star-in 600ms var(--spring-sm) backwards; animation-delay: calc(var(--i) * 140ms); }
  @keyframes star-in { from { scale: 0; rotate: -30deg; } }
}

/* Checkpoint and assignment */
.cp-list { display: grid; gap: 14px; }
.cp-rule { padding: 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface-2) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.cp-name { color: var(--text); font: 500 1.2rem/1.2 var(--font-display); text-decoration: none; }
.cp-name:hover { color: var(--gold); }
.cp-head .lvl { margin-left: auto; }
.assign { margin-top: 6px; padding: 18px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--elev-1); transition: box-shadow var(--t-state); }
.assign.is-done { box-shadow: var(--elev-1), 0 0 0 1.5px var(--gold-line); }
.assign-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.assign-head svg { width: 16px; height: 16px; }
.sub-title { font: 500 1.2rem/1.25 var(--font-display); margin-bottom: 4px; }
.assign-toggle { margin-top: 16px; gap: 10px; padding: 0 16px 0 10px; border-radius: var(--r-full); }
.assign-toggle[aria-pressed="true"] { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

/* ── Sheets (settings, video) ── */
.sheet { width: min(620px, calc(100vw - 32px)); max-height: min(86svh, 780px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--surface-1); color: var(--text); box-shadow: var(--elev-3); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet-grab { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 10px 24px; }
.sheet-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 1.5rem/1.2 var(--font-display); }
.sheet-body { overflow-y: auto; padding: 0 24px 24px; overscroll-behavior: contain; }
.setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--line-subtle); }
.setting:first-child { border-top: 0; }
.setting-label b { display: block; font-weight: 600; }
.setting-label small { color: var(--text-muted); font-size: .8125rem; }
.switch-row { display: inline-flex; align-items: center; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { position: relative; width: 46px; height: 26px; border-radius: var(--r-full); background: var(--surface-4); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color var(--t-state); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: translate var(--t-state) var(--ease-out), background-color var(--t-state); }
.switch-row input:checked + .switch { background: var(--gold); box-shadow: none; }
.switch-row input:checked + .switch::after { translate: 20px 0; background: var(--on-gold); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--focus); outline-offset: 2px; }
.watch { width: min(960px, calc(100vw - 32px)); }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Tablet and narrow windows ── */
@media (max-width: 860px) {
  .lessons { grid-template-columns: minmax(0, 1fr); }
  .crumb span { display: none; }
}
/* ── Phones ── */
@media (max-width: 640px) {
  :root { --topbar-h: 56px; }
  .topbar { gap: 8px; }
  .brand-name { font-size: 1.15rem; }
  .brand-mark { width: 26px; height: 26px; }
  .crumb { padding-left: 10px; }
  .top-actions { gap: 0; }
  .top-actions .btn-icon { width: 40px; }
  .top-link span { display: none; }
  .top-link { width: 40px; padding: 0; }
  .hero { margin-top: 14px; padding: 28px 20px 24px; border-radius: var(--r-lg); }
  .hero-actions .btn-gold { flex: 1 1 100%; }
  .mastery { gap: 12px; padding: 12px 14px; }
  .ms-bar { flex-basis: 56px; }
  .course { margin-top: 24px; }
  .card { padding: 22px 16px 24px; border-radius: var(--r-lg); margin: 0 calc(-1 * var(--gutter) + 6px); }
  .lesson-scroll { padding-top: 12px; }
  .line { padding: 4px 8px 4px 4px; gap: 6px; }
  .ar-line { padding: 0 2px; }
  .lb { width: 36px; min-height: 36px; }
  .quran { padding: 10px; }
  .tiles { gap: 8px; }
  .dock { flex-wrap: wrap; gap: 6px 8px; padding-top: 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .dock-mid { display: contents; }
  .dock-side { order: 1; width: 46px; height: 46px; padding: 0; flex: none; }
  .dock-side span { display: none; }
  .dock-next { order: 4; margin-left: 0; }
  .dock-play, .dock-repeat { order: 2; height: 46px; flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .dock-repeat { order: 3; padding: 0 10px 0 6px; }
  .rep-label { min-width: 0; }
  .dock-mid .speed-seg { order: 5; flex-basis: 100%; justify-content: center; box-shadow: none; background: transparent; padding: 0; }
  .speed-seg button { min-height: 30px; }
  .dock.no-audio .dock-side { flex: 1 1 0; }
  .dock.no-audio .dock-side span { display: inline; }
  .dock.no-audio .dock-next { margin-left: auto; }
  .quiz-opts { gap: 8px; }
  .page { padding-top: 14px; }
  .page-card, .credits-card { padding: 26px 18px 24px; border-radius: var(--r-lg); }
  .rule-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; padding: 10px 12px 10px 10px; }
  .rule-row .rr-ar { display: none; }
  .sheet { width: 100vw; max-width: 100vw; max-height: 88svh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .sheet-grab { display: block; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--line-strong); }
  .sheet-head { padding: 8px 12px 6px 20px; }
  .sheet-body { padding: 0 20px 20px; }
}
@media (max-width: 400px) {
  .brand-mark { display: none; }
  .quiz-opts { grid-template-columns: minmax(0, 1fr); }
  .seg button { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
}
@media (forced-colors: active) {
  .w.on { outline: 2px solid Highlight; }
  .line.is-playing, .tile.is-playing { outline: 2px solid Highlight; }
}
.dock-side:disabled { visibility: hidden; }
.ar-in { font-family: var(--font-ar); font-size: 1.3em; line-height: 1; font-weight: 400; unicode-bidi: isolate; }
.ar-blk:has(.solo) > .en, .ar-blk:has(.solo) > .tr { text-align: center; margin-top: 0; }
.sheet h2:focus { outline: none; }