/* ═══════════════════════════════════════════════════════════════
   Quranic Numerics - Shared Theme System
   Load order: <link href="theme.css"> BEFORE the page's <style>
   Selector html[data-theme="light"] has specificity (0,1,1) which
   beats per-page :root {} (0,1,0) - so overrides win regardless
   of source order.
═══════════════════════════════════════════════════════════════ */

/* Browser chrome (scrollbars, inputs) respects the color scheme */
html                     { color-scheme: dark; }
html[data-theme="dark"]  { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }


/* ── LIGHT THEME TOKEN OVERRIDES ─────────────────────────────────
   Only tokens that change in light mode are listed.
   Per-page --accent / --accent-dim stay as-is; only --accent-light
   and --accent-ring are overridden below.
──────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  /* Warm parchment - manuscript / Islamic book feel */
  --bg:           #f5f1ea;
  --surface:      #ffffff;
  --surface2:     #ece8e0;
  --border:       rgba(26,36,51,0.12);
  --text:         #1c2b3a;
  --muted:        #5e6e7e;

  /* Gold: deep amber - WCAG AA on parchment (#92400e = 6.2:1 on #f5f1ea) */
  --gold:         #92400e;
  --gold-light:   #7c2d12;
  --gold-lt:      #92400e;   /* index page alias */

  /* OK / error palettes - swap to light variants */
  --ok:           #15803d;
  --ok-bg:        #f0fdf4;
  --ok-border:    #86efac;
  --err-light:    #dc2626;
  --err-bg:       #fef2f2;
  --err-border:   #fca5a5;

  /* Accent variants: darken per-page accent for light bg readability.
     color-mix(in oklch) gives perceptually uniform darkening across
     any hue - even pastels like #c7d2fe become readable on parchment. */
  --accent-light: color-mix(in oklch, var(--accent) 62%, black 38%);
  --accent-ring:  color-mix(in oklch, var(--accent) 45%, white 55%);
}


/* ── COMPONENT FIXES ─────────────────────────────────────────────
   Hardcoded rgba(255,255,255,...) values that break on light bg.
──────────────────────────────────────────────────────────────── */

/* Answer cards: hardcoded white border → use semantic token */
html[data-theme="light"] .answer-card {
  border-color: var(--border);
  border-bottom-color: rgba(26,36,51,0.16);
}

/* Feedback panel sub-text: was rgba(255,255,255,0.6) → dark */
html[data-theme="light"] .fb-sub {
  color: rgba(0,0,0,0.7);
}
/* Success panel sub-text: ensure contrast on dark ok-bg */
.fb-panel.fb-ok .fb-sub {
  color: rgba(255,255,255,0.75);
}

/* Big display numbers: remove yellow glow */
html[data-theme="light"] .cr-num,
html[data-theme="light"] .match-num,
html[data-theme="light"] .stat-n {
  text-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
html[data-theme="light"] .calc-result-num.lit {
  text-shadow: 0 2px 8px rgba(146,64,14,0.2);
}

/* Lesson heroCanvas: add subtle shadow on light bg */
html[data-theme="light"] #heroCanvas {
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
}

/* Gold box: the .gt headline uses hardcoded #fcd34d which is invisible on parchment */
html[data-theme="light"] .gold-box {
  background: linear-gradient(135deg, rgba(180,83,9,0.08) 0%, rgba(180,83,9,0.03) 100%);
  border-color: rgba(180,83,9,0.28);
}
html[data-theme="light"] .gold-box .gt { color: #7c2d12; }
html[data-theme="light"] .gold-box .gs { color: var(--muted); }

/* ── Index page hero - light mode ──────────────────────────────
   The canvas draws a permanent dark sky. In light mode the
   .hero-overlay fades it out downward into parchment so the
   hero section blends into the page rather than staying a
   dark island.  Text switches to dark colors on the parchment.
──────────────────────────────────────────────────────────────── */
html[data-theme="light"] .hero-overlay {
  background: linear-gradient(180deg,
    rgba(245,241,234,0.05) 0%,
    rgba(245,241,234,0.62) 42%,
    rgba(245,241,234,0.96) 72%,
    rgba(245,241,234,1)    100%
  );
}
html[data-theme="light"] .hero-hl {
  color: #1c2b3a;
  text-shadow: none;
}
html[data-theme="light"] .hero-sub     { color: var(--muted); }
html[data-theme="light"] .hero-eyebrow { color: var(--gold); }
html[data-theme="light"] .hero-cta     { box-shadow: 0 4px 28px rgba(180,83,9,0.28); }

/* Index hook numbers and card-go arrows: override inline colors
   set by JS - see index.html CSS for the .hook + .card-go rules */
html[data-theme="light"] .hook {
  color: color-mix(in oklch, var(--accent) 62%, black 38%) !important;
  text-shadow: none !important;
}
html[data-theme="light"] .lcard:hover .hook {
  text-shadow: 0 0 18px color-mix(in oklch, var(--accent) 40%, transparent) !important;
}
html[data-theme="light"] .card-go {
  color: color-mix(in oklch, var(--accent) 62%, black 38%) !important;
}


/* ── THEME TRANSITION ─────────────────────────────────────────────
   Added by theme.js briefly on toggle. NOT on initial load (avoids
   flash of transition).  Fallback when View Transitions API absent.
──────────────────────────────────────────────────────────────── */
html.theme-fx,
html.theme-fx * {
  transition:
    background-color 0.28s ease,
    color            0.20s ease,
    border-color     0.22s ease,
    box-shadow       0.22s ease !important;
}

/* View Transitions API: radial reveal expanding from click origin.
   --vt-x / --vt-y are set by theme.js before the transition fires. */
::view-transition-old(root) {
  animation: 180ms ease-out both qn-vt-out;
}
::view-transition-new(root) {
  animation: 360ms ease-out both qn-vt-in;
}
@keyframes qn-vt-out {
  to { opacity: 0; }
}
@keyframes qn-vt-in {
  from { clip-path: circle(0%   at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to   { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); }
}


/* ── THEME TOGGLE WIDGET ─────────────────────────────────────────
   Three-option pill: dark / system / light.
   Fixed on lesson pages; static in the index header.
──────────────────────────────────────────────────────────────── */
.theme-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         2px;
  padding:     3px;
  background:  var(--surface);
  border:      1px solid var(--border);
  border-radius: 100px;
  box-shadow:  0 2px 16px rgba(0,0,0,0.22);
  /* Fixed position for standalone lesson pages */
  position: fixed;
  top:      12px;
  right:    16px;
  z-index:  500;
}

/* On the index page (body.page-index), toggle is inside the header */
body.page-index .theme-toggle {
  position:   static;
  box-shadow: none;
}

.tt-btn {
  width:         28px;
  height:        28px;
  border-radius: 100px;
  border:        none;
  background:    transparent;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:       var(--muted);
  padding:     0;
  transition:  background 0.18s ease, color 0.16s ease, transform 0.14s ease;
}

.tt-btn:hover:not(.active) {
  background: var(--surface2);
  color:      var(--text);
}
.tt-btn:active {
  transform: scale(0.86);
}
.tt-btn.active {
  background: var(--gold);
  color:      #fff;
}
html[data-theme="light"] .tt-btn.active {
  color: #1a0c00;
}


/* ── FIXED HOME BUTTON (lesson pages only) ───────────────────────
   Persistent top-left link back to the lesson index.
   Mirrors the theme toggle pill on the opposite corner.
   Hidden on the index page (body.page-index has its own nav).
──────────────────────────────────────────────────────────────── */
.nav-home-fixed {
  position: fixed;
  top:  12px;
  left: 16px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
  transition: color .18s, background .18s, border-color .18s;
}
.nav-home-fixed:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: rgba(255,255,255,0.16);
}
html[data-theme="light"] .nav-home-fixed:hover {
  border-color: rgba(26,36,51,0.22);
}
body.page-index .nav-home-fixed { display: none; }


/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL MOTION + GLASS LAYER  (injected by theme.js on every page)
   Additive only - no layout/background changes, safe across all pages.
═══════════════════════════════════════════════════════════════ */

/* custom magnetic cursor */
.qn-cur-dot,.qn-cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;
  z-index:9999;transform:translate(-50%,-50%);will-change:transform;mix-blend-mode:difference;}
.qn-cur-dot{width:7px;height:7px;background:#fff;}
.qn-cur-ring{width:34px;height:34px;border:1.5px solid rgba(255,255,255,.5);
  transition:width .25s cubic-bezier(.22,1,.36,1),height .25s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s;}
.qn-cur-ring.hot{width:54px;height:54px;border-color:transparent;background:rgba(245,158,11,.20);}
body.qn-has-cursor,body.qn-has-cursor a,body.qn-has-cursor button,body.qn-has-cursor .answer-card{cursor:none;}
@media (hover:none),(pointer:coarse){.qn-cur-dot,.qn-cur-ring{display:none!important;}body.qn-has-cursor{cursor:auto;}}

/* scroll progress bar */
.qn-scrollprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:9000;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 70%,#000 0%),
    var(--accent,var(--gold,#f59e0b)));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 55%,transparent);
  transition:width .12s linear;}

/* answer cards - spotlight glow + lift (additive; states keep priority) */
html[data-theme="dark"] .answer-card,html[data-theme="light"] .answer-card{
  position:relative;transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,box-shadow .25s;}
.answer-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s;z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 16%,transparent),transparent 60%);}
.answer-card:hover::after{opacity:1;}
html[data-theme="dark"] .answer-card:hover:not(.ac-correct):not(.ac-wrong):not(.ac-disabled),
html[data-theme="light"] .answer-card:hover:not(.ac-correct):not(.ac-wrong):not(.ac-disabled){
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,0,0,.22),0 0 0 1px color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 30%,transparent);}
html[data-theme="light"] .answer-card:hover:not(.ac-correct):not(.ac-wrong):not(.ac-disabled){
  box-shadow:0 14px 36px rgba(120,80,20,.16),0 0 0 1px color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 35%,transparent);}

/* spring + glow on primary action buttons */
.btn,.fb-btn,.predict-submit,.pr-continue,.calc-btn,.hero-cta{
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .25s,filter .2s,opacity .2s !important;}

/* prediction choices + curiosity buttons - same spotlight treatment */
.predict-choice,.cs-btn{position:relative;}
.predict-choice::after,.cs-btn::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--gold,#f59e0b) 18%,transparent),transparent 60%);}
.predict-choice:hover::after,.cs-btn:hover::after{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .qn-cur-dot,.qn-cur-ring{display:none!important;}
  body.qn-has-cursor{cursor:auto;}
}


/* ═══════════════════════════════════════════════════════════════
   SCENE CINEMATICS - verse reveal + light-sweep on stage activation.
   Applied generically by theme.js to standard content classes.
═══════════════════════════════════════════════════════════════ */
.qn-reveal{animation:qnReveal .85s cubic-bezier(.16,1,.3,1) both !important;}
@keyframes qnReveal{
  from{opacity:0;transform:translateY(16px);filter:blur(6px);}
  to  {opacity:1;transform:none;filter:blur(0);}
}
/* calligraphic light sweep across the Arabic verse */
.qn-sweep{position:relative;overflow:hidden;}
.qn-sweep::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
  background:linear-gradient(105deg,transparent 32%,
    color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 26%,transparent) 50%,transparent 68%);
  background-size:250% 100%;background-position:210% 0;animation:qnSweep 1.5s ease .3s 1 forwards;}
@keyframes qnSweep{to{background-position:-80% 0;}}
@media (prefers-reduced-motion:reduce){
  .qn-reveal{animation:none !important;}
  .qn-sweep::after{display:none !important;}
}

/* ── VERDICT → CONSTELLATION TIE-IN (peak-end, shared) ── */
.qn-verdict-tie{margin:22px 0 8px;padding:20px 22px;border-radius:16px;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 26%,transparent);text-align:center;
  opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);}
.qn-verdict-tie.show{opacity:1;transform:none;}
.qvt-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent,var(--gold,#f59e0b));font-weight:700;margin-bottom:8px;}
.qvt-title{font-family:'Playfair Display',serif;font-size:clamp(18px,4vw,24px);color:var(--text);line-height:1.3;}
.qvt-title b{color:var(--accent,var(--gold,#f59e0b));}
.qvt-sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55;}
.qvt-dots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:16px auto 16px;max-width:340px;}
.qvt-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.12);}
html[data-theme="light"] .qvt-dots i{background:rgba(80,60,20,.16);}
.qvt-dots i.lit{background:var(--accent,var(--gold,#f59e0b));box-shadow:0 0 7px var(--accent,var(--gold,#f59e0b));}
.qvt-dots i.new{animation:qvtPop .85s cubic-bezier(.16,1,.3,1);}
@keyframes qvtPop{0%{transform:scale(0);}55%{transform:scale(1.9);}100%{transform:scale(1);}}
.qvt-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;text-decoration:none;
  color:var(--accent,var(--gold,#f59e0b));padding:9px 18px;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 32%,transparent);transition:background .25s,color .25s;}
.qvt-link:hover{background:var(--accent,var(--gold,#f59e0b));color:#0c0c0c;}
@media (prefers-reduced-motion:reduce){.qn-verdict-tie{transition:none;}.qvt-dots i.new{animation:none;}}

/* ── SHARE: actions row + discovery-card modal ── */
.qvt-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center;}
.qvt-share{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;
  padding:10px 20px;border-radius:100px;border:none;color:#0c0c0c;background:var(--accent,var(--gold,#f59e0b));
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 30%,transparent);transition:filter .2s,transform .15s;}
.qvt-share:hover{filter:brightness(1.08);}
.qvt-share:active{transform:scale(.96);}
.qn-share-modal{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;padding:20px;}
.qn-share-modal.show{opacity:1;pointer-events:auto;}
.qsm-back{position:absolute;inset:0;background:rgba(2,4,9,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.qsm-panel{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:min(420px,92vw);
  transform:translateY(16px) scale(.97);transition:transform .4s cubic-bezier(.16,1,.3,1);}
.qn-share-modal.show .qsm-panel{transform:none;}
.qsm-img{width:100%;max-height:74vh;object-fit:contain;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--accent,#f59e0b) 30%,transparent);}
.qsm-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.qsm-btn{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;padding:12px 22px;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--accent,#f59e0b) 32%,transparent);background:var(--surface2,#182840);color:var(--text,#e2ddd4);transition:all .2s;}
.qsm-btn:hover{border-color:var(--accent,#f59e0b);}
.qsm-btn.qsm-primary{background:var(--accent,#f59e0b);color:#0c0c0c;border-color:var(--accent,#f59e0b);box-shadow:0 6px 20px color-mix(in srgb,var(--accent,#f59e0b) 34%,transparent);}
.qsm-btn.qsm-ghost{background:transparent;border-color:var(--border,rgba(255,255,255,.12));color:var(--muted,#7a8fa3);}

/* ── TWIN-COUNT PROOF (count-them-yourself, S1) ── */
.qn-twin{margin:0 0 24px;padding:20px 20px 18px;border-radius:16px;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 26%,transparent);text-align:center;}
.qn-twin-head{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--gold,#f59e0b));font-weight:700;margin-bottom:18px;}
.qn-twin-cols{display:flex;align-items:flex-start;justify-content:center;gap:14px;}
.qn-twin-col{flex:1;max-width:200px;}
.qn-twin-ar{font-family:'Amiri',serif;direction:rtl;font-size:30px;color:var(--accent-light,var(--accent,#fcd34d));line-height:1.4;min-height:42px;}
.qn-twin-nm{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.qn-twin-n{font-family:'Playfair Display',serif;font-size:clamp(34px,8vw,52px);font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;}
.qn-twin-bar{height:5px;border-radius:100px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden;}
.qn-twin-bar i{display:block;height:100%;width:0;border-radius:100px;background:var(--accent,var(--gold,#f59e0b));transition:width .1s linear;}
.qn-twin-eq{font-size:30px;color:var(--muted);align-self:center;padding-top:34px;transition:transform .4s cubic-bezier(.34,1.6,.5,1),color .4s,text-shadow .4s;}
.qn-twin-eq.locked{color:var(--ok,#22c55e);transform:scale(1.5);text-shadow:0 0 22px var(--ok,#22c55e);}
.qn-twin.is-equal .qn-twin-n{color:var(--ok,#22c55e);text-shadow:0 0 26px color-mix(in srgb,var(--ok,#22c55e) 45%,transparent);}
.qn-twin.is-equal .qn-twin-bar i{background:var(--ok,#22c55e);}
.qn-twin-btn{margin-top:18px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;
  padding:11px 22px;border-radius:100px;border:1px solid color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 40%,transparent);
  background:color-mix(in srgb,var(--accent,var(--gold,#f59e0b)) 12%,transparent);color:var(--accent,var(--gold,#f59e0b));transition:all .2s;}
.qn-twin-btn:hover:not(:disabled){background:var(--accent,var(--gold,#f59e0b));color:#0c0c0c;}
.qn-twin-btn:disabled{opacity:.6;cursor:default;}
.qn-twin-res{font-size:14px;line-height:1.6;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .5s,margin .5s;}
.qn-twin-res.show{max-height:120px;opacity:1;margin-top:16px;}
.qn-twin-res b{color:var(--ok,#22c55e);font-family:'Playfair Display',serif;font-size:18px;}
.qn-twin.is-near .qn-twin-res b{color:var(--accent,var(--gold,#f59e0b));}
@media(max-width:440px){.qn-twin-ar{font-size:24px;}.qn-twin-eq{font-size:24px;padding-top:30px;}}

/* ── VERDICT TYPEWRITER LINE ── */
.qn-verdict-line {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(18px, 3.6vw, 24px);
  color: var(--gold, #f59e0b);
  text-align: center;
  margin: 28px 0 6px;
  min-height: 1.6em;
  line-height: 1.6;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-shadow: 0 0 40px color-mix(in srgb, var(--gold, #f59e0b) 45%, transparent);
}
/* appears the moment first character is typed */
.qn-verdict-line:not(:empty) {
  opacity: 1;
  transform: none;
}
/* cursor blink after typing finishes */
.qn-verdict-line.done::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  animation: qnCursorBlink 1.1s step-end infinite;
  color: var(--gold, #f59e0b);
  opacity: 0.7;
}
@keyframes qnCursorBlink {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0; }
}
/* light mode */
html[data-theme="light"] .qn-verdict-line {
  color: #92400e;
  text-shadow: 0 0 32px rgba(180, 83, 9, 0.35);
}
html[data-theme="light"] .qn-verdict-line.done::after {
  color: #92400e;
}
@media (prefers-reduced-motion: reduce) {
  .qn-verdict-line, .qn-verdict-line:not(:empty) {
    opacity: 1; transform: none; transition: none;
  }
  .qn-verdict-line.done::after { animation: none; opacity: 0.6; }
}

/* ── ARABIC VERSE STROKE-DRAW (calligraphy reveal right-to-left) ── */

/* The main reveal animation: clip-path sweeps right → left matching Arabic reading dir */
@keyframes qnArabicWrite {
  0%   { clip-path: inset(-6px 0 -6px 102%); }
  100% { clip-path: inset(-6px 0 -6px -6px); }
}

.qn-arabic-write {
  animation: qnArabicWrite var(--qn-write-dur, 2.4s) cubic-bezier(0.22, 0, 0.12, 1) forwards;
  will-change: clip-path;
}

/* Settled state after animation completes (or under reduced-motion) */
.qn-arabic-visible {
  clip-path: none !important;
  animation: none !important;
}

/* The glowing pen cursor */
.qn-pen-cursor {
  position: absolute;
  right: 100%;
  width: 3px;
  min-height: 1.4em;
  border-radius: 2px;
  pointer-events: none;
  z-index: 20;
  background: var(--pc, #fcd34d);
  box-shadow:
    0 0  8px 2px var(--pc, #fcd34d),
    0 0 22px 6px color-mix(in srgb, var(--pc, #fcd34d) 55%, transparent),
    0 0 44px 12px color-mix(in srgb, var(--pc, #fcd34d) 22%, transparent);
}

/* light mode */
html[data-theme="light"] .qn-pen-cursor {
  background: #92400e;
  box-shadow:
    0 0 6px 2px rgba(146,64,14,0.7),
    0 0 18px 5px rgba(146,64,14,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .qn-arabic-write { animation: none !important; clip-path: none !important; }
  .qn-pen-cursor   { display: none; }
}