/* ============================================================
   academy.css — Academy + Orion premium layer (Quant Quest)
   Owned by the Academy worker. Reuses existing design tokens
   from styles.css (--qq-*). New class prefixes only, to avoid
   collisions with parallel Arena/DNA workers.
   ============================================================ */

/* ── Spring/pop micro-animations (Duolingo-grade feedback) ── */
@keyframes acaPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes acaPunch{0%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes acaRise{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes acaShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes acaRingGrow{from{stroke-dashoffset:var(--ring-circ)}to{stroke-dashoffset:var(--ring-offset)}}
@keyframes acaBadgeSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes acaStreakFlame{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.08)}}

.aca-pop{animation:acaPop .42s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) both}
.aca-punch{animation:acaPunch .34s var(--qq-spring,cubic-bezier(.34,1.56,.64,1))}

/* ── Per-step "you learned X" reinforcement toast ── */
.aca-learned{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  display:flex;align-items:center;gap:12px;z-index:120;
  padding:13px 20px 13px 15px;border-radius:16px;max-width:min(520px,92vw);
  background:linear-gradient(150deg,rgba(16,32,52,.96),rgba(9,16,28,.96));
  border:1px solid rgba(52,211,153,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 24px rgba(52,211,153,.12);
  opacity:0;transition:transform .4s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)),opacity .35s ease;
  pointer-events:none;
}
.aca-learned.show{opacity:1;transform:translateX(-50%) translateY(0)}
.aca-learned .aca-learned-ic{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(52,211,153,.14);color:#34d399;border:1px solid rgba(52,211,153,.3);
}
.aca-learned .aca-learned-k{font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#6ee7b7;margin-bottom:2px}
.aca-learned .aca-learned-t{font-size:13.5px;font-weight:600;color:#eaf2ff;line-height:1.35}

/* ── Level-complete rewarding transition (replaces mastery summary) ── */
.aca-lvlcomplete{
  max-width:600px;margin:0 auto;padding:30px 24px 40px;text-align:center;
  animation:acaRise .55s var(--qq-ease,cubic-bezier(.22,1,.36,1)) both;
}
.aca-lvlcomplete-ring{position:relative;width:132px;height:132px;margin:6px auto 22px}
.aca-lvlcomplete-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.aca-lvlcomplete-ring .aca-lc-fill{
  stroke-linecap:round;stroke-dasharray:var(--ring-circ);
  animation:acaRingGrow 1s var(--qq-ease,cubic-bezier(.22,1,.36,1)) .12s both;
  filter:drop-shadow(0 0 8px rgba(52,211,153,.6));
}
.aca-lvlcomplete-badge{
  position:absolute;inset:0;display:grid;place-items:center;
}
.aca-lvlcomplete-badge > div{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(52,211,153,.22),rgba(16,185,129,.1));
  border:1px solid rgba(52,211,153,.5);color:#34d399;
  animation:acaPop .5s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) .2s both;
}
/* Fail path: badge must NOT be absolute (would overlay buttons/title) */
.aca-lvlcomplete-fail .aca-lvlcomplete-icon{
  width:78px;height:78px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#f87171;
  position:relative;inset:auto;
  animation:acaPop .5s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) .1s both;
}
.aca-lvlcomplete-actions{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;max-width:340px;margin:18px auto 0;position:relative;z-index:2;
}
.aca-lvlcomplete-actions .aca-check-btn{
  width:100%;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.aca-lvlcomplete-kicker{font-family:Outfit,sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#94a3b8;margin-bottom:8px}
.aca-lvlcomplete-title{font-family:Outfit,sans-serif;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;color:#f1f5f9;line-height:1.15;margin-bottom:6px}
.aca-lvlcomplete-sub{font-size:13.5px;color:var(--qq-text-3,#64748b);margin-bottom:22px;line-height:1.5;max-width:36rem;margin-left:auto;margin-right:auto}

.aca-lc-rewards{display:flex;gap:12px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.aca-lc-chip{
  display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;
  background:rgba(148,163,184,.06);border:1px solid var(--qq-border,rgba(148,163,184,.08));
  animation:acaPop .4s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) both;
}
.aca-lc-chip .aca-lc-chip-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px}
.aca-lc-chip .aca-lc-chip-v{font-family:Outfit,sans-serif;font-size:18px;font-weight:900;line-height:1}
.aca-lc-chip .aca-lc-chip-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--qq-text-3,#64748b)}

.aca-lc-learned{
  text-align:left;padding:18px 20px;border-radius:16px;margin-bottom:24px;
  background:linear-gradient(150deg,rgba(56,189,248,.06),rgba(37,99,235,.03));
  border:1px solid rgba(56,189,248,.16);
}
.aca-lc-learned .k{font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#67e8f9;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.aca-lc-learned .t{font-size:15.5px;font-weight:600;color:#eaf2ff;line-height:1.5}

/* ── Per-unit exam ── */
.aca-exam-wrap{max-width:920px;margin:0 auto;padding:22px 20px 40px;animation:acaRise .5s var(--qq-ease,cubic-bezier(.22,1,.36,1)) both}
.aca-exam-cockpit .aca-exam-hero{border-color:rgba(34,211,238,.28)}
.aca-exam-passline{position:relative;z-index:1;margin:12px auto 10px;font-size:13px;color:#94a3b8}
.aca-exam-passline b{color:#e2e8f0}
.aca-source-badge.real{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.35);color:#6ee7b7}
.aca-exam-situation{
  background:rgba(8,18,36,.92);border:1px solid rgba(56,189,248,.22);border-radius:14px;
  padding:12px 14px;margin-bottom:12px;color:#cbd5e1;font-size:14px;line-height:1.5;
  border-left:3px solid #22d3ee;
}
.aca-exam-stage{
  background:rgba(4,10,22,.95);border:1px solid rgba(148,163,184,.16);border-radius:16px;
  overflow:hidden;margin-bottom:16px;box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.aca-exam-stage-meta{
  padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#67e8f9;border-bottom:1px solid rgba(148,163,184,.1);
}
.aca-exam-stage canvas{display:block;width:100%;height:min(42vh,420px);min-height:280px}
.aca-exam-opts--decision .aca-exam-opt{padding:14px 16px;font-size:15px}
.aca-exam-hero{
  position:relative;overflow:hidden;text-align:center;padding:34px 28px;border-radius:26px;margin-bottom:22px;
  background:linear-gradient(165deg,rgba(20,29,50,.95),rgba(8,13,26,.97));
  border:1px solid rgba(255,255,255,.07);box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.aca-exam-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 60% at 50% -10%,rgba(56,189,248,.18),transparent 60%)}
.aca-exam-hero .aca-exam-shield{width:74px;height:74px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.34);color:#38bdf8;position:relative;z-index:1;animation:acaPop .5s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) both}
.aca-exam-hero .aca-exam-kicker{position:relative;z-index:1;font-family:Outfit,sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#94a3b8;margin-bottom:8px}
.aca-exam-hero .aca-exam-title{position:relative;z-index:1;font-family:Outfit,sans-serif;font-size:clamp(22px,3vw,30px);font-weight:800;color:#f1f5f9;margin-bottom:8px}
.aca-exam-hero .aca-exam-desc{position:relative;z-index:1;font-size:14px;color:#cbd5e1;max-width:520px;margin:0 auto;line-height:1.6}

.aca-source-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;position:relative;z-index:1;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;
}
.aca-source-badge.real{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#6ee7b7}
.aca-source-badge.synthetic{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:#fcd34d}

.aca-exam-progress{display:flex;gap:6px;margin-bottom:20px}
.aca-exam-progress-seg{flex:1;height:6px;border-radius:99px;background:rgba(148,163,184,.14);transition:background .3s var(--qq-ease,cubic-bezier(.22,1,.36,1))}
.aca-exam-progress-seg.done{background:#34d399}
.aca-exam-progress-seg.active{background:#38bdf8;box-shadow:0 0 10px rgba(56,189,248,.5)}
.aca-exam-progress-seg.wrong{background:#f87171}

.aca-exam-qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.aca-exam-skill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#38bdf8;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22);padding:6px 12px;border-radius:99px}
.aca-exam-count{font-size:12px;font-weight:800;color:var(--qq-text-3,#64748b)}
.aca-exam-prompt{font-size:17px;font-weight:600;color:#eaf2ff;line-height:1.5;margin-bottom:18px}

/* Chart-choice grid — full width, no wasted space */
.aca-exam-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:16px}
.aca-exam-chart{
  position:relative;cursor:pointer;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,21,36,.7),rgba(8,12,22,.8));
  border:1.5px solid var(--qq-border,rgba(148,163,184,.1));
  transition:transform .18s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)),border-color .18s ease,box-shadow .18s ease;
}
.aca-exam-chart:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.4);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.aca-exam-chart.correct{border-color:rgba(52,211,153,.7);box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.aca-exam-chart.wrong{border-color:rgba(248,113,113,.7);box-shadow:0 0 0 3px rgba(248,113,113,.18)}
.aca-exam-chart.dim{opacity:.4;filter:saturate(.5)}
.aca-exam-chart canvas{display:block;width:100%;height:200px}
.aca-exam-chart-tag{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-family:Outfit,sans-serif;font-weight:900;font-size:13px;color:#02040a;background:#38bdf8;z-index:2}
.aca-exam-chart-foot{padding:10px 12px;border-top:1px solid rgba(148,163,184,.08);font-size:11.5px;font-weight:700;color:#94a3b8;text-align:center}

/* Recall options */
.aca-exam-opts{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.aca-exam-opt{
  display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:15px;
  background:rgba(15,21,36,.55);border:1.5px solid var(--qq-border,rgba(148,163,184,.1));
  transition:transform .16s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)),border-color .16s ease;
  color:#e2e8f0;font-size:14.5px;font-weight:600;width:100%;
}
.aca-exam-opt:hover{transform:translateX(3px);border-color:rgba(56,189,248,.4)}
.aca-exam-opt.correct{border-color:rgba(52,211,153,.7);background:rgba(52,211,153,.08)}
.aca-exam-opt.wrong{border-color:rgba(248,113,113,.7);background:rgba(248,113,113,.08)}
.aca-exam-opt .aca-exam-opt-k{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;font-family:Outfit,sans-serif;font-weight:900;font-size:13px;background:rgba(148,163,184,.12);color:#94a3b8}

.aca-exam-feedback{margin-bottom:8px}

/* Exam result screen */
.aca-exam-result{max-width:560px;margin:0 auto;padding:28px 22px 40px;text-align:center;animation:acaRise .5s var(--qq-ease,cubic-bezier(.22,1,.36,1)) both}
.aca-exam-result-score{font-family:Outfit,sans-serif;font-size:56px;font-weight:900;line-height:1;margin-bottom:6px}
.aca-exam-result-label{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--qq-text-3,#64748b);margin-bottom:20px}

/* ── Progress-map: unit exam gate node ── */
.aca-unit-gate{
  margin:14px auto 4px;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px;border-radius:14px;text-align:center;
  background:rgba(12,16,26,.7);
  border:1px solid rgba(148,163,184,.16);
}
.aca-unit-gate.locked{background:rgba(148,163,184,.04);border-color:rgba(148,163,184,.14)}
.aca-unit-gate-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.16);color:#94a3b8}
.aca-unit-gate.locked .aca-unit-gate-ic{background:rgba(148,163,184,.06);border-color:rgba(148,163,184,.14);color:#64748b}
.aca-unit-gate-title{font-family:Outfit,sans-serif;font-size:14px;font-weight:700;color:#f1f5f9}
.aca-unit-gate-desc{font-size:11.5px;color:var(--qq-text-3,#64748b);line-height:1.5}
.aca-unit-gate-btn{
  margin-top:4px;padding:10px 18px;border-radius:10px;cursor:pointer;
  font-family:Outfit,sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#f8fafc;
  background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.22);
  box-shadow:none;transition:background .16s ease,transform .16s ease}
.aca-unit-gate-btn:hover{transform:translateY(-1px)}
.aca-unit-gate-pulse{animation:none;border-style:solid;border-color:rgba(148,163,184,.28)}
@keyframes acaNodeUnlock{
  0%{transform:scale(.72);filter:brightness(.8)}
  45%{transform:scale(1.12);filter:brightness(1.15)}
  100%{transform:scale(1);filter:brightness(1)}
}
.aca-node-unlock .aca-node-orb{
  animation:acaNodeUnlock .7s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) both;
  box-shadow:0 0 0 6px rgba(52,211,153,.12),0 0 36px rgba(52,211,153,.35)!important;
}

/* Soft Arena transfer bonus card */
.aca-arena-bonus{
  text-align:left;margin:0 auto 18px;max-width:420px;padding:14px 16px;border-radius:14px;
  background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.16);
}
.aca-arena-bonus-k{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.aca-arena-bonus-t{font-size:13px;color:#cbd5e1;line-height:1.45;margin-bottom:10px}
.aca-arena-bonus-btn{
  width:100%;padding:10px 14px;border-radius:11px;cursor:pointer;
  font-family:Outfit,sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#e2e8f0;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.22);
  transition:background .15s ease,transform .15s ease;
}
.aca-arena-bonus-btn:hover{background:rgba(148,163,184,.18);transform:translateY(-1px)}

/* Lesson → Arena memory bridge */
.aca-arena-bridge{max-width:440px;margin:0 auto;text-align:left}
.aca-arena-bridge-kicker{
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:#94a3b8;margin-bottom:14px;display:flex;align-items:center;gap:6px;justify-content:center;
}
.aca-pocket-card{
  padding:16px 18px;border-radius:16px;margin-bottom:14px;
  background:linear-gradient(145deg,rgba(14,116,144,.18),rgba(15,23,42,.75));
  border:1px solid rgba(34,211,238,.28);
  box-shadow:0 0 28px rgba(34,211,238,.08);
}
.aca-pocket-card-done{max-width:420px;margin:0 auto 16px;text-align:left}
.aca-pocket-label{
  font-size:10.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#67e8f9;margin-bottom:8px;
}
.aca-pocket-rule{font-size:15.5px;font-weight:700;color:#f1f5f9;line-height:1.45}
.aca-pocket-word{
  margin-top:12px;display:inline-block;padding:6px 12px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#0f172a;background:linear-gradient(135deg,#67e8f9,#34d399);
}
.aca-pocket-word-k{
  font-weight:700;letter-spacing:.04em;text-transform:none;opacity:.75;
}
.aca-arena-will{
  padding:14px 16px;border-radius:14px;margin-bottom:16px;
  background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.16);
}
.aca-arena-will-k{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8;margin-bottom:6px}
.aca-arena-will p{font-size:13.5px;color:#cbd5e1;line-height:1.45;margin:0 0 10px}
.aca-arena-will-a{
  font-size:14px;font-weight:800;color:#6ee7b7;line-height:1.4;
  padding-top:8px;border-top:1px solid rgba(148,163,184,.12);
}

/* Lesson viewport lock — true desktop fullscreen, no letterbox card */
html.aca-lesson-lock,body.aca-lesson-lock{overflow:hidden!important;height:100%;height:100dvh;overscroll-behavior:none}
/* Escape #mode-boss rounded shell + app max-width padding while lesson is open */
body.aca-lesson-lock #qq-main-app{
  max-width:none!important;width:100%!important;margin:0!important;padding:0!important;
}
body.aca-lesson-lock #qq-grid{gap:0!important;margin:0!important}
body.aca-lesson-lock #qq-main-section{margin:0!important;padding:0!important;max-width:none!important}
body.aca-lesson-lock #mode-boss{
  position:fixed!important;inset:0!important;z-index:90!important;
  width:100vw!important;max-width:none!important;
  height:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:none!important;
  margin:0!important;padding:0!important;
  border-radius:0!important;border:none!important;box-shadow:none!important;
  overflow:hidden!important;
}
body.aca-lesson-lock #mode-boss > .relative.z-10{display:none!important}
#academy-level-content.aca-lesson-open{
  position:fixed!important;inset:0!important;z-index:100!important;
  width:100%!important;width:100vw!important;max-width:none!important;margin:0!important;
  height:100%!important;height:100dvh!important;
  max-height:100dvh!important;
  padding:0!important;
  overflow:hidden!important;background:#060913!important;
  display:flex!important;flex-direction:column!important;
  border-radius:0!important;
}
/* Absolute fill breaks flex-sibling height bugs (stars/blobs/exam) */
#academy-level-content.aca-lesson-open #academy-lesson-area{
  position:absolute!important;inset:0!important;
  width:auto!important;height:auto!important;
  min-height:0!important;max-height:none!important;
  display:flex!important;flex-direction:column!important;
  overflow:hidden!important;
  padding:10px 12px 12px;box-sizing:border-box;
}
#academy-level-content.aca-lesson-open #academy-exam-area{
  position:absolute!important;inset:0!important;
  overflow:auto;padding:10px 12px 12px;box-sizing:border-box;
}
#academy-level-content.aca-lesson-open .aca-lesson-viewport{
  flex:1 1 auto;min-height:0;height:100%;max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;
  max-width:none;width:100%;margin:0;
}
#academy-level-content.aca-lesson-open .aca-lesson-viewport-live,
#academy-level-content.aca-lesson-open .aca-lesson-viewport-teach{
  max-width:none;
}
#academy-level-content.aca-lesson-open .aca-lesson-viewport-teach > .aca-orion-teach{
  flex:1 1 auto;min-height:0;max-height:none;height:auto;
}
#academy-level-content.aca-lesson-open .aca-lesson-viewport > .flex.items-center{
  flex:0 0 auto;flex-shrink:0;margin-bottom:6px!important;padding:6px 10px!important;
}
/* Kill slide transform after settle — transform breaks nested overflow scroll on some engines */
#academy-level-content.aca-lesson-open .aca-lesson-viewport.lesson-slide-in{
  animation:none!important;opacity:1!important;transform:none!important;
}
/* Desktop: edge-to-edge panels; overflow lives inside scroll regions */
@media(min-width:900px){
  #academy-level-content.aca-lesson-open #academy-lesson-area,
  #academy-level-content.aca-lesson-open #academy-exam-area{
    padding:14px 20px 16px;box-sizing:border-box;
  }
  #academy-level-content.aca-lesson-open .aca-live-show{
    max-width:none!important;width:100%!important;margin:0!important;
    /* NEVER height:100% here — HUD is a sibling; 100% clips the dock */
    height:auto!important;flex:1 1 auto!important;min-height:0!important;
  }
  #academy-level-content.aca-lesson-open .aca-orion-teach{
    max-width:none!important;width:100%!important;margin:0!important;
  }
  #academy-level-content.aca-lesson-open .aca-hook-card,
  #academy-level-content.aca-lesson-open .aca-lvlcomplete,
  #academy-level-content.aca-lesson-open .aca-exam-wrap,
  #academy-level-content.aca-lesson-open .aca-arena-bridge{
    max-width:none;width:100%;
  }
  #academy-level-content.aca-lesson-open .aca-chart-frame{
    border-radius:14px;
  }
  #academy-level-content.aca-lesson-open .aca-live-chart-slot .aca-chart-frame{
    border-radius:12px;
  }
}
/* Mobile: keep light safe padding; content can stay slightly inset */
@media(max-width:899px){
  #academy-level-content.aca-lesson-open .aca-lesson-viewport{
    max-width:100%;
  }
  #academy-level-content.aca-lesson-open .aca-live-show{max-width:100%;margin:0 auto}
  #academy-level-content.aca-lesson-open .aca-orion-teach{max-width:100%;margin:0 auto}
}

/* Orion teach — flex column: scroll chips + fixed bottom CTA (never clipped by HUD) */
.aca-orion-teach{
  flex:1 1 auto;min-height:0;height:auto;max-height:none;
  width:100%;max-width:none;margin:0;
  display:flex!important;flex-direction:column;
  overflow:hidden!important;padding-bottom:0;
  position:relative;
}
.aca-teach-top{flex:0 0 auto;min-height:0;z-index:3}
.aca-teach-scroll{
  flex:1 1 auto;min-height:0!important;height:auto;
  overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  touch-action:pan-y;padding:0 2px 12px;scrollbar-gutter:stable;
}
.aca-teach-scroll::-webkit-scrollbar{width:6px}
.aca-teach-scroll::-webkit-scrollbar-thumb{background:rgba(103,232,249,.28);border-radius:99px}
.aca-teach-footer{
  flex:0 0 auto;position:relative;z-index:20;
  padding:12px 10px max(10px, env(safe-area-inset-bottom, 0px));
  background:#0b1220!important;
  box-shadow:0 -12px 28px rgba(0,0,0,.55);
  border-top:2px solid rgba(88,204,2,.35);
  border-radius:18px 18px 0 0;
}
.aca-teach-footer .aca-hook-btn,.aca-teach-footer #aca-teach-next{
  width:100%;min-height:56px;border-radius:18px!important;
  font-size:15px!important;letter-spacing:.04em!important;
  box-shadow:0 5px 0 #2f6b54!important;
}
.aca-teach-footer .aca-teach-progress{margin:0 0 10px}
#aca-teach-next:not(:disabled),
#aca-teach-next.aca-teach-cta-ready{
  opacity:1!important;pointer-events:auto!important;cursor:pointer!important;
  color:#fff!important;
  background:#3d8b6e!important;
  border:2px solid #2f6b54!important;
  box-shadow:0 5px 0 #2f6b54!important;
}
/* live_show: CSS GRID — chart row shrinks, dock row ALWAYS reserved */
#academy-level-content.aca-lesson-open .aca-lesson-viewport-live{
  display:flex!important;flex-direction:column!important;
  min-height:0!important;height:100%!important;max-height:100%!important;
  overflow:hidden!important;gap:0;
}
#academy-level-content.aca-lesson-open .aca-lesson-viewport-live > .aca-live-show{
  flex:1 1 auto!important;min-height:0!important;height:auto!important;
  max-height:none!important;
}
.aca-live-show{
  flex:1 1 auto;min-height:0;height:auto;max-height:none;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  max-width:none;width:100%;margin:0;overflow:hidden!important;
  box-sizing:border-box;
}
.aca-live-head{grid-row:1;flex:0 0 auto;flex-shrink:0;min-height:0;z-index:2}
.aca-live-chart-slot{
  grid-row:2;min-height:0!important;max-height:calc(100% - 200px);
  overflow:hidden!important;
  display:flex;flex-direction:column;
  position:relative;z-index:1;
}
.aca-live-chart-slot .aca-chart-frame-premium,
.aca-live-chart-slot .aca-chart-frame{
  flex:1 1 auto;min-height:0!important;max-height:100%!important;height:100%!important;
  display:flex;flex-direction:column;margin:0!important;overflow:hidden!important;
}
/* Nuclear: kill global 440/480/520 canvas min-heights + index.html height:auto */
#academy-level-content.aca-lesson-open .aca-live-chart-slot .aca-chart-frame-premium canvas,
#academy-level-content.aca-lesson-open .aca-live-chart-slot .aca-chart-frame canvas,
#academy-level-content.aca-lesson-open .aca-live-chart-slot .aca-live-canvas,
.aca-live-chart-slot .aca-chart-frame-premium canvas,
.aca-live-chart-slot .aca-chart-frame canvas,
.aca-live-chart-slot .aca-live-canvas,
.aca-live-show .aca-live-canvas{
  width:100%!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  display:block!important;
}
/* Always-visible bottom dock — solid, reserved grid row, never clipped */
.aca-live-controls,
.aca-live-dock{
  grid-row:3;
  flex:0 0 auto!important;flex-shrink:0!important;
  position:relative;z-index:50;
  display:flex;flex-direction:column;gap:8px;
  min-height:160px;height:auto;
  padding:10px 10px max(10px, env(safe-area-inset-bottom, 0px));
  margin:0 -2px;
  background:#0b1220!important;
  box-shadow:0 -10px 28px rgba(0,0,0,.55);
  border-top:2px solid rgba(52,211,153,.28);
  border-radius:18px 18px 0 0;
  box-sizing:border-box;
}
.aca-live-orion-row{
  padding:12px 14px!important;margin:0!important;gap:14px!important;
  align-items:center!important;display:flex!important;
  border-radius:18px!important;
  background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(15,23,42,.85))!important;
  border:1px solid rgba(52,211,153,.28)!important;
}
.aca-live-orion-row .aca-mascot-slot{
  flex:0 0 64px;width:64px;height:64px;align-self:center;
}
.aca-live-orion-row .aca-mascot-slot .mascot-svg,
.aca-live-orion-row .aca-mascot-slot svg{width:58px;height:58px}
.aca-live-orion-row .mascot-bubble{
  flex:1 1 auto;min-width:0;font-size:14.5px;line-height:1.4;margin:0;
  align-self:center;min-height:2.8em;
  background:rgba(8,15,30,.75)!important;border-radius:16px!important;
  padding:12px 14px!important;border:1px solid rgba(253,224,71,.22)!important;
  color:#f8fafc!important;
}
.aca-live-nav-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}
.aca-live-nav-row .aca-live-nav{flex:1 1 0}
.aca-live-nav-row .aca-live-done{flex:1.4 1 0}
.aca-live-nav-row .aca-live-nav.hidden,.aca-live-nav-row .aca-live-done.hidden{display:none!important}
.aca-teach-kicker,.aca-live-kicker{
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:#94a3b8;margin-bottom:6px;display:flex;align-items:center;gap:6px;justify-content:center;
}
.aca-live-title{
  font-family:Outfit,sans-serif;font-size:clamp(16px,2.2vw,22px);font-weight:800;
  color:#f1f5f9;text-align:center;margin-bottom:4px;letter-spacing:-.02em;
}
.aca-teach-hero{
  display:flex;gap:14px;align-items:center;margin:0 0 8px;
  padding:12px 14px;border-radius:20px;
  background:
    radial-gradient(ellipse 80% 70% at 12% 30%, rgba(88,204,2,.16), transparent 55%),
    linear-gradient(155deg, rgba(15,23,42,.98), rgba(8,15,30,.96));
  border:2px solid rgba(88,204,2,.28);
  box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.aca-teach-orion-stage{
  position:relative;flex:0 0 72px;width:72px;height:72px;
  display:grid;place-items:center;
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 40%, rgba(250,204,21,.18), transparent 65%),
    linear-gradient(160deg,#163024,#070b14);
  border:2px solid rgba(88,204,2,.4);
  box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 0 12px rgba(88,204,2,.08);
  overflow:hidden;contain:strict;
}
.aca-teach-orion-glow{
  position:absolute;inset:-4px;border-radius:50%;
  background:radial-gradient(circle, rgba(52,211,153,.18), transparent 70%);
  opacity:.7;pointer-events:none;
}
@keyframes acaTeachGlow{
  0%,100%{opacity:.45;transform:scale(.96)}
  50%{opacity:.75;transform:scale(1.02)}
}
.aca-teach-orion-stage .mascot-svg,.aca-teach-orion-stage svg{width:60px;height:60px;position:relative;z-index:1}
.aca-teach-orion-stage .aca-mascot-idle{animation:none!important}
.aca-teach-orion-stage .aca-antenna-tip{animation:acaAntenna 2.4s ease-in-out infinite}
.aca-teach-next-btn{
  background:#3d8b6e!important;
  border:2px solid #2f6b54!important;
  box-shadow:0 5px 0 #2f6b54!important;
  color:#fff!important;
}
.aca-teach-next-btn:disabled,
.aca-teach-next-btn[aria-disabled="true"]{
  filter:saturate(.35) brightness(.72);box-shadow:none!important;
}
.aca-teach-speech{flex:1;min-width:0}
.aca-teach-speech-label{
  font-size:10.5px;font-weight:900;letter-spacing:.18em;color:#facc15;
  margin-bottom:4px;text-transform:uppercase;
}
.aca-teach-speech .mascot-bubble{
  margin:0;text-align:left;min-height:2.4em;font-size:15px;line-height:1.4;
  background:rgba(8,15,30,.75);border-radius:16px;padding:12px 14px;
  border:1px solid rgba(103,232,249,.18);
}
.aca-teach-lead{font-size:13.5px;color:#cbd5e1;line-height:1.45;text-align:center;margin:4px 0 10px;font-weight:600}
.aca-teach-grid{display:grid;gap:12px;margin:4px 0 8px;max-width:720px;margin-left:auto;margin-right:auto}
.aca-teach-chip{
  display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  padding:16px 18px;border-radius:20px;cursor:pointer;
  background:rgba(15,23,42,.82);border:2px solid rgba(148,163,184,.22);
  transition:border-color .2s ease, transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-sizing:border-box;
  box-shadow:0 4px 0 rgba(15,23,42,.9);
}
.aca-teach-chip:hover{border-color:rgba(88,204,2,.45);transform:translateY(-1px)}
.aca-teach-chip:focus-visible{outline:2px solid rgba(250,204,21,.65);outline-offset:2px}
.aca-teach-chip.open{
  border-color:rgba(88,204,2,.55);background:rgba(16,80,40,.22);
  box-shadow:0 6px 0 rgba(22,50,30,.9),0 10px 24px rgba(16,185,129,.12);
}
.aca-teach-chip-num{
  width:36px;height:36px;border-radius:12px;flex:0 0 36px;display:grid;place-items:center;
  font-size:15px;font-weight:900;color:#fff;background:#3d8b6e;
  box-shadow:0 3px 0 #2f6b54;
}
.aca-teach-chip-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.aca-teach-chip-t{font-size:16px;font-weight:800;color:#f8fafc;line-height:1.3}
.aca-teach-chip-h{font-size:12px;color:#94a3b8;margin-top:3px;font-weight:600}
.aca-teach-chip.open .aca-teach-chip-h{display:none!important}
.aca-teach-chip-x{
  font-size:14.5px;color:#e2e8f0;line-height:1.45;margin-top:10px;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;
}
.aca-teach-chip-x.hidden,.aca-teach-mini.hidden{display:none!important}
.aca-teach-mini{
  margin-top:12px;border-radius:16px;overflow:hidden;
  border:2px solid rgba(250,204,21,.35);
  background:#0a1220;box-shadow:inset 0 0 0 1px rgba(15,23,42,.6),0 8px 18px rgba(0,0,0,.25);
  min-height:220px;width:100%;
}
.aca-teach-mini canvas{width:100%!important;height:220px!important;display:block;max-width:100%}
.aca-teach-progress{
  text-align:center;font-size:12px;font-weight:900;letter-spacing:.08em;
  color:#94a3b8;margin:4px 0 8px;text-transform:uppercase;
}
.aca-teach-progress.is-ready{color:#86efac}

/* Hook entry polish */
.aca-hook-promise{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 auto 16px;padding:8px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.04em;color:#a5f3fc;
  background:rgba(34,211,238,.1);border:1px solid rgba(103,232,249,.28);
}
.aca-hook-promise-dot{
  width:7px;height:7px;border-radius:50%;background:#22d3ee;
  box-shadow:0 0 10px rgba(34,211,238,.7);flex-shrink:0;
}
.aca-hook-card.aca-hook-enter .aca-hook-mascot{animation:acaHookEnter .7s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) both}
.aca-hook-card.aca-hook-enter .aca-hook-bubble{animation:acaPop .5s ease .12s both}
@keyframes acaHookEnter{
  from{opacity:0;transform:translateY(18px) scale(.86)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
#academy-level-content.aca-lesson-open .aca-hook-card,
#academy-level-content.aca-lesson-open .aca-arena-bridge{
  max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  min-height:0;padding:28px 22px;
}
#academy-level-content.aca-lesson-open .aca-hook-text{
  font-size:15.5px;line-height:1.5;margin-bottom:18px;max-width:480px;
}
#academy-level-content.aca-lesson-open .aca-hook-mascot{width:112px;height:112px;flex:0 0 112px;overflow:hidden}

/* Hook — Duolingo-style vertical fun stack (no sparse 2-col void) */
@media(min-width:900px){
  #academy-level-content.aca-lesson-open .aca-lesson-viewport:has(.aca-hook-card),
  #academy-level-content.aca-lesson-open .aca-lesson-viewport:has(.aca-arena-bridge){
    justify-content:stretch;
  }
  #academy-level-content.aca-lesson-open .aca-hook-card{
    flex:1 1 auto;width:100%;max-width:min(720px,100%);margin:0 auto;
    min-height:0;height:100%;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;
    padding:clamp(24px,3.5vh,48px) clamp(28px,4vw,56px);
    border-radius:28px;
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(88,204,2,.14), transparent 55%),
      radial-gradient(ellipse 50% 40% at 80% 90%, rgba(250,204,21,.08), transparent 50%),
      linear-gradient(165deg,rgba(20,29,50,.94),rgba(8,13,26,.98));
    border:2px solid rgba(88,204,2,.22);
  }
  #academy-level-content.aca-lesson-open .aca-hook-mascot-wrap{
    flex-direction:column;align-items:center;justify-content:center;
    margin:0 0 4px;gap:14px;width:100%;
  }
  #academy-level-content.aca-lesson-open .aca-hook-mascot{
    width:clamp(140px,16vw,188px);height:clamp(140px,16vw,188px);
    flex:0 0 auto;
  }
  #academy-level-content.aca-lesson-open .aca-hook-mascot svg{
    width:100%!important;height:100%!important;max-width:100%;max-height:100%;
  }
  #academy-level-content.aca-lesson-open .aca-hook-bubble{
    max-width:min(520px,100%);font-size:clamp(16px,1.5vw,20px);line-height:1.45;
    padding:16px 22px;border-radius:22px;
    background:rgba(8,15,30,.8);border:2px solid rgba(250,204,21,.3);
    color:#f8fafc;font-weight:700;
  }
  #academy-level-content.aca-lesson-open .aca-hook-kicker{
    font-size:clamp(12px,1.1vw,14px);letter-spacing:.02em;margin:0;text-transform:none;
    color:#94a3b8;
  }
  #academy-level-content.aca-lesson-open .aca-hook-promise{
    margin:0;padding:12px 20px;border-radius:999px;
    font-size:clamp(14px,1.25vw,17px);
    background:rgba(88,204,2,.14);border:2px solid rgba(88,204,2,.35);
    color:#bbf7d0;
  }
  #academy-level-content.aca-lesson-open .aca-hook-text{
    font-size:clamp(18px,2vw,24px);line-height:1.45;
    max-width:min(560px,100%);margin:0;color:#e2e8f0;font-weight:600;
  }
  #academy-level-content.aca-lesson-open .aca-hook-special .aca-hook-text{
    font-size:clamp(18px,2vw,24px);line-height:1.45;
  }
  #academy-level-content.aca-lesson-open .aca-hook-preview{
    max-width:min(520px,100%);margin:0 auto;width:100%;
  }
  #academy-level-content.aca-lesson-open .aca-hook-preview-frame canvas{height:160px}
  #academy-level-content.aca-lesson-open .aca-hook-card > .aca-hook-btn{
    font-size:clamp(15px,1.3vw,18px);padding:18px 48px;margin-top:8px;
    min-width:min(320px,100%);justify-content:center;
    background:#3d8b6e!important;border:2px solid #2f6b54!important;color:#fff!important;
    border-radius:18px!important;box-shadow:0 5px 0 #2f6b54!important;
    letter-spacing:.04em;
  }
  #academy-level-content.aca-lesson-open .aca-hook-card > .aca-hook-btn:hover{
    filter:brightness(1.06);transform:translateY(-1px);
  }
  #academy-level-content.aca-lesson-open .aca-arena-bridge{
    flex:1 1 auto;width:100%;max-width:min(960px,100%);margin:0 auto;
    min-height:0;height:100%;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(28px,4vh,52px) clamp(32px,4vw,72px);
  }
}
@media(max-height:720px){
  .aca-teach-orion-stage{flex:0 0 56px;width:56px;height:56px;border-radius:16px}
  .aca-teach-orion-stage .mascot-svg,.aca-teach-orion-stage svg{width:48px;height:48px}
  .aca-teach-hero{padding:8px 10px;gap:10px}
  .aca-teach-kicker{margin-bottom:4px}
  .aca-teach-speech .mascot-bubble{font-size:13.5px;padding:10px 12px}
  .aca-teach-mini{min-height:180px}
  .aca-teach-mini canvas{height:180px!important}
  .aca-teach-footer{padding:8px 8px max(8px, env(safe-area-inset-bottom, 0px))}
  .aca-teach-footer .aca-hook-btn,.aca-teach-footer #aca-teach-next{min-height:50px}
  .aca-live-controls,.aca-live-dock{padding:8px 8px max(8px, env(safe-area-inset-bottom, 0px));min-height:148px}
}
.aca-boss-fresh-badge{
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.22);
  padding:8px 14px;border-radius:8px;
}
.aca-map-fanfare{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(4,7,12,.92);
  animation:acaFanfareIn .3s ease both;overflow-y:auto;padding:16px;box-sizing:border-box;
}
.aca-map-fanfare.out{animation:acaFanfareOut .25s ease both}
@keyframes acaFanfareIn{from{opacity:0}to{opacity:1}}
@keyframes acaFanfareOut{from{opacity:1}to{opacity:0}}
.aca-map-fanfare-card{
  position:relative;overflow:hidden;
  width:min(420px,92vw);text-align:center;padding:28px 24px 22px;border-radius:14px;
  background:#0b1220;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 20px 48px rgba(0,0,0,.45);
  animation:acaPop .35s ease both;
}
.aca-map-fanfare-card::after{content:none}
.aca-map-fanfare-rays{display:none}
.aca-map-fanfare-particles{display:none}
.aca-map-fanfare-orion{position:relative;display:flex;justify-content:center;margin-bottom:10px}
.aca-map-fanfare-glow{display:none}
.aca-map-fanfare-orion .mascot-svg,.aca-map-fanfare-orion svg{position:relative;z-index:1;width:72px;height:72px}
.aca-map-fanfare-kicker{
  font-size:12px;font-weight:600;letter-spacing:.02em;color:#94a3b8;text-transform:none;margin-bottom:8px;
}
.aca-map-fanfare-title{
  font-family:Outfit,sans-serif;font-size:22px;font-weight:700;color:#f8fafc;letter-spacing:-.02em;margin-bottom:8px;
}
.aca-map-fanfare-sub{font-size:14px;color:#94a3b8;line-height:1.5;margin-bottom:16px}
.aca-map-fanfare-payoff{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.aca-map-fanfare-xp{
  display:inline-flex;align-items:baseline;justify-content:center;gap:4px;
  font-size:22px;font-weight:700;color:#5eead4;
  padding:8px 16px;border-radius:10px;
  background:rgba(45,212,191,.08);
  border:1px solid rgba(45,212,191,.25);
  box-shadow:none;
}
.aca-map-fanfare-xp-plus{font-size:16px;color:#5eead4}
.aca-map-fanfare-xp-unit{font-size:12px;letter-spacing:0;color:#99f6e4}
.aca-map-fanfare-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:0;color:#94a3b8;text-transform:none;
  padding:6px 12px;border-radius:8px;
  background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.18);
}
.aca-map-fanfare-next{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:2px 12px;text-align:left;margin:0 0 14px;padding:12px 14px;border-radius:10px;
  background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.14);color:#e2e8f0;
}
.aca-map-fanfare-next span{grid-column:1;font-size:11px;font-weight:600;letter-spacing:0;color:#94a3b8}
.aca-map-fanfare-next strong{grid-column:1;font-size:13px}
.aca-map-fanfare-next svg{grid-column:2;grid-row:1/3;color:#94a3b8}
.aca-map-fanfare-btn{
  width:100%;padding:13px 18px;border-radius:10px;border:none;cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  color:#0a0e17;background:#2dd4bf;
  box-shadow:none;
}
.aca-live-caption{
  text-align:center;font-size:13px;font-weight:800;color:#fde68a;
  margin:0;min-height:1.2em;letter-spacing:.02em;
}
.aca-live-dots{display:flex;gap:7px;justify-content:center;margin:0 0 2px}
.aca-live-dot{
  width:9px;height:9px;border-radius:4px;
  background:rgba(148,163,184,.2);border:1px solid rgba(148,163,184,.25);
}
.aca-live-dot.active{background:#facc15;border-color:#fde047;box-shadow:0 0 10px rgba(250,204,21,.45)}
.aca-live-dot.done{background:rgba(52,211,153,.7);border-color:rgba(52,211,153,.85)}
.aca-live-nav{
  padding:14px 16px;border-radius:16px;font-size:13px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  color:#0f172a;background:#e2e8f0;border:2px solid #cbd5e1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:52px;line-height:1.1;
  box-shadow:0 4px 0 #94a3b8;
  transition:transform .12s ease, filter .12s ease;
}
.aca-live-nav:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}
.aca-live-nav:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #94a3b8}
.aca-live-nav:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.aca-live-nav-primary{
  background:#3d8b6e!important;border-color:#2f6b54!important;color:#fff!important;
  box-shadow:0 4px 0 #2f6b54!important;
}
.aca-live-nav-primary:active:not(:disabled){box-shadow:0 1px 0 #2f6b54!important}
.aca-hook-special .aca-hook-kicker{color:#fbbf24}
.aca-hook-special .aca-hook-text{font-size:15.5px;line-height:1.55}

/* Exam selected (no correct leak) */
.aca-exam-chart.selected,.aca-exam-opt.selected{
  outline:2px solid rgba(56,189,248,.55);outline-offset:2px;
  border-color:rgba(56,189,248,.45)!important;
}

/* Tone down generic cyan glass on journey */
.aca-unit-status{box-shadow:none!important}
.aca-node.current .aca-node-orb{box-shadow:0 0 0 5px rgba(56,189,248,.08),0 10px 28px rgba(0,0,0,.35)!important}

/* ── Orion mascot polish ── */
.mascot-svg{display:block;width:100%;height:100%;overflow:visible}
.mascot-orion{filter:drop-shadow(0 6px 16px rgba(34,211,238,.32))}
.mascot-vega{filter:drop-shadow(0 6px 16px rgba(103,232,249,.3))}
.mascot-atlas{filter:drop-shadow(0 6px 16px rgba(251,191,36,.34))}
.mascot-nova{filter:drop-shadow(0 6px 16px rgba(52,211,153,.32))}
.mascot-lyra{filter:drop-shadow(0 6px 16px rgba(214,182,111,.32))}
@keyframes acaAntenna{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.mascot-svg .aca-antenna-tip{transform-origin:32px 7px;animation:acaAntenna 1.8s ease-in-out infinite}
@keyframes acaBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.mascot-svg .aca-eyes{transform-origin:32px 30px;animation:acaBlink 5.2s ease-in-out infinite}
/* Face crossfade inside fixed slots */
@keyframes mascotFaceIn{
  from{opacity:0;transform:scale(.88) translateY(4px)}
  to{opacity:1;transform:none}
}
@keyframes mascotFaceOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:scale(1.06) translateY(-3px)}
}
.mascot-face-in{animation:mascotFaceIn .28s cubic-bezier(.2,.8,.2,1) both;position:relative;z-index:2}
.mascot-face-out{animation:mascotFaceOut .26s ease forwards;position:absolute!important;inset:0;margin:auto;z-index:1;pointer-events:none}
/* Idle life: soft tilt while waiting — never fights feedback states */
@keyframes acaOrionTilt{
  0%,100%{transform:rotate(0deg) translateY(0)}
  40%{transform:rotate(-2.5deg) translateY(-1px)}
  70%{transform:rotate(2deg) translateY(0)}
}
.aca-mascot-idle{animation:acaOrionTilt 5.5s ease-in-out infinite}
.aca-orion-nudge{animation:acaPop .45s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) both}
.aca-hook-mascot .aca-mascot-idle,.aca-orion-avatar .aca-mascot-idle,.aca-mascot-slot .aca-mascot-idle{transform-origin:50% 60%}
.orion-feedback .aca-mascot-idle,.orion-feedback .aca-antenna-tip{animation:none!important}
/* Fixed Orion face slot — expression swap must NOT reflow the speech bubble */
.aca-mascot-slot{
  position:relative;flex:0 0 56px;width:56px;height:56px;
  display:grid;place-items:center;overflow:hidden;contain:strict;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 40%, rgba(34,211,238,.12), transparent 65%),
    linear-gradient(160deg,#12233d,#070b14);
  border:1px solid rgba(103,232,249,.22);
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.aca-mascot-slot .mascot-svg,
.aca-mascot-slot > svg{
  width:48px!important;height:48px!important;max-width:48px;max-height:48px;
  flex-shrink:0;position:relative;z-index:1;
}
.aca-orion-avatar{
  overflow:hidden;contain:strict;flex:0 0 80px!important;width:80px!important;height:80px!important;
  position:relative;
}
.aca-orion-avatar .mascot-svg,
.aca-orion-avatar > svg{width:52px!important;height:52px!important}
.mascot-container{
  align-items:stretch!important;
}
.mascot-container > .aca-mascot-slot{align-self:center}
.mascot-container > .mascot-bubble{
  flex:1 1 auto;min-width:0;align-self:center;min-height:2.8em;
}

/* ── Boss-consequence icon chips (replaces raw emoji) ── */
.aca-con-ic{width:56px;height:56px;margin:0 auto 6px;border-radius:18px;display:grid;place-items:center;animation:acaPop .45s var(--qq-spring,cubic-bezier(.34,1.56,.64,1)) both}
.aca-con-ic.win{background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4);color:#34d399}
.aca-con-ic.loss{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#f87171}

@media(max-width:640px){
  .aca-exam-chart canvas{height:170px}
  .aca-lc-rewards{gap:8px}
  .aca-teach-hero{flex-direction:row;align-items:center;text-align:left}
  .aca-teach-speech .mascot-bubble{text-align:left;font-size:12.5px}
}
@media(max-height:700px){
  .aca-map-fanfare{place-items:start center}
  .aca-map-fanfare-card{margin:auto;padding:18px 22px 16px}
  .aca-map-fanfare-orion{margin-bottom:4px}
  .aca-map-fanfare-orion .mascot-svg,.aca-map-fanfare-orion svg{width:62px;height:62px}
  .aca-map-fanfare-title{font-size:21px;margin-bottom:4px}
  .aca-map-fanfare-sub{font-size:12.5px;margin-bottom:10px}
  .aca-map-fanfare-payoff{flex-direction:row;justify-content:center;margin-bottom:10px}
  .aca-map-fanfare-xp{font-size:23px;padding:7px 16px}
  .aca-map-fanfare-next{margin-bottom:10px;padding:9px 12px}
  .aca-map-fanfare-btn{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){
  .aca-teach-orion-glow,.aca-map-fanfare,.aca-map-fanfare-card{animation:none!important}
}

/* ============================================================
   CORRECTION PASS — dark lesson stage, campaign map, live dock
   ============================================================ */
@keyframes acaMarketDrift{from{transform:translate3d(-1.5%,0,0) scale(1.04)}to{transform:translate3d(1.5%,-1%,0) scale(1.04)}}
#academy-level-content.aca-lesson-open #academy-lesson-area::before{
  content:none;
}
#academy-level-content.aca-lesson-open .aca-lesson-viewport{position:relative;z-index:1}
.aca-lesson-ambient{
  position:absolute;inset:0;z-index:0;width:100%!important;height:100%!important;
  opacity:.14;pointer-events:none;filter:saturate(.7);
}
.aca-lesson-viewport.aca-has-large-chart .aca-lesson-ambient,
.aca-lesson-viewport-live .aca-lesson-ambient{opacity:.06}
.aca-lesson-viewport > :not(.aca-lesson-ambient){position:relative;z-index:1}
.aca-bg-blob,.aca-stars{display:none!important}
.aca-micro-note{
  border:1px solid rgba(103,232,249,.16);border-radius:14px;padding:12px 14px;
  background:rgba(9,20,38,.92);
}
.aca-micro-note h3{
  margin:0 0 6px;font:800 10.5pxpx/1 Sora,sans-serif;letter-spacing:.16em;color:#67e8f9;text-transform:uppercase;
}
.aca-micro-note p{margin:0;font:500 14px/1.45 Sora,sans-serif;color:#d7e6f7}
.aca-micro-next{width:100%;justify-content:center}

/* Remove the late warm/white lesson skin. */
:root{--aca-panel:#101d32;--aca-panel-2:#0d1a2d;--aca-ink:#edf5ff;--aca-muted:#9eb0c8;--aca-line:rgba(125,211,252,.16)}
.aca-teach-chip,.aca-teach-chip.open,.aca-option-card,.duo-option-card,
.aca-orion-wrap,.mascot-container,.aca-summary-beat,.aca-arena-bridge{
  color:#edf5ff!important;background:linear-gradient(155deg,rgba(16,29,50,.97),rgba(8,17,31,.97))!important;
  border-color:rgba(125,211,252,.18)!important;box-shadow:0 12px 30px rgba(2,8,20,.25)!important;
}
.aca-teach-chip-t,.aca-teach-chip-x,.aca-option-text,.duo-option-card .text-sm,
.aca-orion-bubble,.mascot-bubble,.aca-pocket-rule,.aca-arena-will-a,
.aca-summary-title,.aca-summary-next strong{color:#edf5ff!important}
.aca-teach-chip-h,.aca-summary-copy,.aca-arena-will p{color:#9eb0c8!important}
.aca-teach-chip-num{background:#12334a!important;color:#67e8f9!important;border:1px solid rgba(103,232,249,.25)}
.aca-option-card:hover:not(.selected),.duo-option-card:hover{background:#13263e!important}
.aca-option-card.selected,.duo-option-card.selected{background:#103348!important}
.aca-option-card.correct,.duo-option-card.correct{background:#103629!important}
.aca-option-card.wrong,.duo-option-card.wrong{background:#3a1821!important}
.aca-orion-avatar{background:#0b1d30!important;border-color:rgba(103,232,249,.25)!important}
.aca-arena-will{background:#0a1728!important;border-color:rgba(125,211,252,.14)!important}

/* Mandatory two-row live root: chart shrinks; opaque dock always owns row 2. */
#academy-level-content.aca-lesson-open .aca-lesson-viewport-live>.aca-live-show,
.aca-live-show{
  position:relative!important;display:grid!important;
  grid-template-rows:minmax(0,1fr) minmax(150px,auto)!important;
  grid-template-columns:minmax(0,1fr)!important;
  min-height:0!important;height:100%!important;max-height:100%!important;
  overflow:hidden!important;gap:8px!important;
}
.aca-live-head{
  position:absolute!important;z-index:15!important;top:8px;left:50%;transform:translateX(-50%);
  padding:6px 14px;border-radius:12px;background:rgba(6,14,27,.88);border:1px solid rgba(125,211,252,.16);
  pointer-events:none;white-space:nowrap;
}
.aca-live-title{font-size:14px;margin:0}.aca-live-kicker{font-size:10.5px;margin:0}
.aca-live-chart-slot{grid-row:1!important;min-height:0!important;max-height:none!important;height:100%!important}
.aca-live-controls,.aca-live-dock{
  grid-row:2!important;position:relative!important;z-index:60!important;
  min-height:150px!important;max-height:none!important;height:auto!important;
  margin:0!important;padding:10px 12px max(10px,env(safe-area-inset-bottom,0px))!important;
  background:#091426!important;border:1px solid rgba(103,232,249,.18)!important;
  box-shadow:0 -16px 34px rgba(1,6,15,.72)!important;overflow:visible!important;
}

/* Chart interactions: slot + permanently reserved answer dock. */
#academy-level-content.aca-lesson-open .aca-lesson-viewport-interactive{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  min-height:0!important;height:100%!important;overflow:hidden!important;
}
.aca-interactive-scene{
  min-height:0;height:100%;overflow:hidden;
  display:grid!important;
  grid-template-rows:minmax(0,64%) minmax(180px,1fr);
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.aca-interactive-chart{
  min-width:0;min-height:0;max-height:100%;overflow:hidden;
  display:flex;flex-direction:column;
}
.aca-interactive-chart>.aca-chart-frame,
.aca-interactive-chart>.aca-chart-frame-premium,
.aca-interactive-chart .aca-chart-frame{
  flex:1 1 auto;min-width:0;min-height:0!important;height:100%!important;
  max-width:100%;max-height:100%!important;margin:0!important;overflow:hidden!important;
}
#academy-level-content.aca-lesson-open .aca-interactive-chart canvas,
.aca-interactive-chart .aca-chart-frame canvas,
.aca-interactive-chart .aca-chart-frame-premium canvas{
  width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
  display:block!important;
}
.aca-interactive-dock{
  min-width:0;min-height:180px;overflow:auto;
  display:flex;flex-direction:column;gap:9px;
  padding:10px 12px max(10px,env(safe-area-inset-bottom,0px));
  border:1px solid rgba(103,232,249,.16);border-radius:16px;
  background:#091426;box-shadow:0 -12px 28px rgba(1,6,15,.55);
}
.aca-interactive-dock .mascot-container{margin:0!important;padding:9px 12px!important}
.aca-interactive-dock .space-y-3{margin:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.aca-interactive-dock .space-y-3>*{margin:0!important}
.aca-interactive-dock #check-panel-container{
  margin-top:auto;position:sticky;bottom:0;z-index:3;padding-top:4px;background:#091426;
}
.aca-interactive-dock>button:last-child{
  position:sticky;bottom:0;z-index:3;flex:0 0 auto;margin-top:auto;
}
@media(max-width:700px){
  .aca-interactive-scene{grid-template-rows:minmax(180px,52%) minmax(200px,1fr)}
  .aca-interactive-dock .space-y-3{grid-template-columns:1fr}
}
.aca-live-orion-row .mascot-bubble{height:44px;min-height:44px!important;max-height:44px;overflow:auto}
.aca-live-orion-row .aca-mascot-slot{flex:0 0 54px!important}
.aca-live-nav{background:#14243a!important;color:#dce9f8!important;border-color:rgba(148,163,184,.24)!important}
.aca-live-nav-primary{background:#63cf62!important;color:#07150d!important;border-color:#7de079!important}
@media(max-height:650px){
  .aca-live-show{grid-template-rows:minmax(0,1fr) minmax(150px,150px)!important}
  .aca-live-dock{gap:4px!important;padding-top:6px!important}
  .aca-live-orion-row .mascot-bubble{height:38px;min-height:38px!important;max-height:38px;font-size:12px!important}
  .aca-live-caption{display:none}.aca-live-nav{min-height:40px!important;padding:8px 12px!important}
}

/* Premium campaign mission — trading art is part of the primary decision card. */
.aca-journey-now{
  width:min(1080px,calc(100% - 28px));padding:26px;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 30px;
  background:
    radial-gradient(80% 100% at 100% 0,rgba(34,211,238,.13),transparent 58%),
    linear-gradient(145deg,#12243c,#081426);
  border:1px solid rgba(103,232,249,.25);box-shadow:0 28px 70px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.04)
}
.aca-campaign-copy{display:flex;flex-direction:column;justify-content:center}
.aca-campaign-guide{display:flex;align-items:center;gap:8px;margin-top:10px;color:#9eb0c8;font-size:11px;font-weight:750}
.aca-campaign-guide svg{width:42px;height:42px;flex:0 0 42px}
.aca-journey-now h2{font-size:clamp(25px,3vw,36px);margin-top:8px}
.aca-campaign-rewards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.aca-campaign-rewards>div{padding:12px;border-radius:13px;background:rgba(5,13,26,.58);border:1px solid rgba(148,163,184,.14)}
.aca-campaign-rewards span{display:block;font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#71849c;margin-bottom:5px}
.aca-campaign-rewards strong{display:block;color:#b9f6d4;font-size:12px;line-height:1.3}
.aca-campaign-start{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:15px;background:linear-gradient(135deg,#34d399,#22c7c7);color:#06151a;border:0;font-weight:900;letter-spacing:.07em;cursor:pointer}
.aca-campaign-art{align-self:stretch;overflow:hidden;border-radius:18px;background:#07111f;border:1px solid rgba(103,232,249,.2);box-shadow:0 18px 38px rgba(0,0,0,.3)}
.aca-campaign-art-head{display:flex;justify-content:space-between;padding:10px 13px;color:#7890aa;font-size:10.5px;font-weight:900;letter-spacing:.14em}
.aca-campaign-art-head b{color:#67e8f9}.aca-campaign-art canvas{display:block;width:100%;height:230px}
.aca-journey-details{grid-column:1/-1;margin:0;justify-self:center}
@media(max-width:780px){
  .aca-journey-now{grid-template-columns:1fr;padding:20px}
  .aca-campaign-art canvas{height:190px}.aca-campaign-rewards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .aca-lesson-ambient{animation:none!important;transform:none!important}
}

/* ── Decision Academy: one clear next step, details on demand ── */
.aca-journey-now{
  position:relative;z-index:2;width:min(1080px,calc(100% - 32px));max-width:100%;margin:0 auto 18px;
  padding:24px 24px 20px;border-radius:22px;
  background:linear-gradient(145deg,rgba(21,38,58,.96),rgba(9,17,29,.98));
  border:1px solid rgba(103,232,249,.24);box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.aca-journey-now>*{min-width:0}
.aca-campaign-art{min-width:0;max-width:100%}
.aca-campaign-art canvas{max-width:100%}
.aca-journey-now-kicker{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:900;letter-spacing:.18em;color:#67e8f9}
.aca-journey-now-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 12px rgba(52,211,153,.65)}
.aca-journey-now h2{margin:10px 0 6px;font:800 clamp(22px,3vw,30px)/1.12 Outfit,sans-serif;color:#f8fafc;letter-spacing:-.03em}
.aca-journey-now p{margin:0;max-width:58ch;color:#cbd5e1;font-size:13.5px;line-height:1.55}
.aca-journey-next{display:flex;align-items:baseline;gap:10px;margin-top:16px;padding-top:13px;border-top:1px solid rgba(148,163,184,.14)}
.aca-journey-next-label{font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#64748b}
.aca-journey-next strong{font-size:13px;color:#a7f3d0}
.aca-journey-details{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:9px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:rgba(148,163,184,.07);color:#cbd5e1;font-size:11px;font-weight:800;cursor:pointer}
.aca-journey-details:hover{background:rgba(148,163,184,.13);color:#fff}
.aca-journey-details svg{transition:transform .2s ease}.aca-journey-details.is-open svg{transform:rotate(180deg)}
.aca-journey-details-wrap{display:none;width:100%}.aca-journey-details-wrap.is-open{display:block}
.aca-hook-bridge{width:min(520px,100%);padding:14px 16px;border-radius:16px;text-align:left;background:rgba(8,15,30,.7);border:1px solid rgba(103,232,249,.2)}
.aca-hook-bridge-kicker{display:flex;align-items:center;gap:6px;margin-bottom:9px;font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#67e8f9}
.aca-hook-bridge-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid rgba(148,163,184,.1);font-size:11px;color:#94a3b8}
.aca-hook-bridge-row strong{color:#f1f5f9;text-align:right}.aca-hook-bridge-reward{display:flex;align-items:center;gap:7px;margin-top:10px;color:#a7f3d0;font-size:11px;font-weight:700}
.builder-lock-note{display:block;margin-top:3px;font-size:10.5px;font-weight:700;color:#64748b;letter-spacing:.02em}
@media(max-width:900px){.aca-journey-now{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.aca-journey-now{width:calc(100% - 20px);padding:20px 18px}.aca-journey-next{flex-direction:column;gap:4px}.aca-hook-bridge-row{flex-direction:column;gap:3px}.aca-hook-bridge-row strong{text-align:left}}

/* ── Duolingo-style glossary terms ── */
.qq-gloss,button.qq-gloss{
  display:inline;padding:0;margin:0;border:none;background:transparent;cursor:help;
  color:inherit;font:inherit;font-weight:inherit;line-height:inherit;
  border-bottom:1.5px dotted rgba(125,211,252,.75);
  border-radius:0;
}
.qq-gloss:hover,.qq-gloss:focus-visible,button.qq-gloss:hover,button.qq-gloss:focus-visible{
  color:#7dd3fc;border-bottom-color:#7dd3fc;outline:none;
}
.qq-gloss-pop{
  position:fixed;z-index:200;padding:12px 14px;border-radius:14px;
  background:linear-gradient(165deg,rgba(15,23,42,.98),rgba(8,12,22,.98));
  border:1px solid rgba(125,211,252,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  pointer-events:auto;
}
.qq-gloss-pop.hidden{display:none}
.qq-gloss-pop-term{
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#67e8f9;margin-bottom:6px;
}
.qq-gloss-pop-def{
  font-size:13px;font-weight:600;color:#e2e8f0;line-height:1.45;
}

/* ============================================================
   DECISION COLD OPEN — cinematic game academy stage
   Type: Cormorant Garamond (brand) + Sora (UI) — editorial premium
   ============================================================ */
@keyframes coldOpenRise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes coldOpenBrandIn{
  from{opacity:0;transform:translateY(14px);clip-path:inset(0 0 110% 0)}
  to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
}
@keyframes coldOpenBrandSweep{
  0%{background-position:140% 50%}
  100%{background-position:-40% 50%}
}
@keyframes coldOpenCtaBreath{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 10px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.06)}
  50%{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 36px rgba(0,0,0,.28),0 0 24px rgba(248,250,252,.08)}
}
@keyframes coldOpenAmbientPulse{
  0%,100%{opacity:.88;transform:scale(1)}
  50%{opacity:1;transform:scale(1.012)}
}
@keyframes coldOpenVignetteBreath{
  0%,100%{opacity:.92}
  50%{opacity:1}
}
@keyframes coldOpenFlash{
  0%{opacity:0}
  14%{opacity:.32}
  45%{opacity:.12}
  100%{opacity:0}
}
@keyframes coldOpenChartBreath{
  0%,100%{transform:scale(1) translate(0,0)}
  50%{transform:scale(1.008) translate(-0.15%,0.1%)}
}
@keyframes coldXpFly{
  0%{opacity:0;transform:translateY(10px) scale(.92)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  72%{opacity:1;transform:translateY(-6px) scale(1)}
  100%{opacity:0;transform:translateY(-18px) scale(.96)}
}
@keyframes coldInsightIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.decision-cold-open{
  --co-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --co-sans:"Sora",system-ui,-apple-system,sans-serif;
  --co-ease:cubic-bezier(.22,1,.36,1);
  position:absolute;inset:0;z-index:30;
  display:block;overflow:hidden;
  background:#060a12;
  font-family:var(--co-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.decision-cold-open[style*="display: none"],
.decision-cold-open[style*="display:none"]{z-index:0}

/* Atmosphere — depth without costume clutter; alive from frame 0 */
.cold-open-atmosphere{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.cold-open-depth{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 32% 42%,rgba(36,58,94,.32),transparent 62%),
    radial-gradient(ellipse 48% 38% at 58% 48%,rgba(38,166,154,.07),transparent 58%),
    radial-gradient(ellipse 50% 40% at 78% 18%,rgba(22,40,72,.22),transparent 55%),
    linear-gradient(165deg,#0a1220 0%,#070b14 42%,#05080f 100%);
  animation:none;
  transform-origin:38% 48%;
}
.cold-open-grid{
  position:absolute;inset:0;opacity:.065;
  background-image:
    linear-gradient(rgba(148,163,184,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.55) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 72% 68% at 38% 48%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 38% 48%,#000 20%,transparent 75%);
}
.cold-open-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 85% 75% at 40% 45%,transparent 35%,rgba(2,4,10,.55) 100%),
    linear-gradient(90deg,rgba(4,8,16,.2) 0%,transparent 35%,rgba(4,8,16,.35) 100%);
  animation:none;
}
.cold-open-flash{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 36% at 42% 46%,rgba(255,255,255,.28),transparent 58%),
    radial-gradient(ellipse 32% 28% at 48% 44%,rgba(38,166,154,.16),transparent 62%);
  mix-blend-mode:screen;
}

.cold-open-chart{
  position:absolute;inset:0;z-index:1;
  background:transparent;
  overflow:hidden;
  will-change:transform,filter;
  transition:transform .85s var(--co-ease),filter .55s ease;
  animation:none;
  transform-origin:38% 48%;
}
.cold-open-chart canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.decision-cold-open.cold-open--accel .cold-open-chart,
.decision-cold-open.cold-open--intensify .cold-open-chart{
  animation:none;
  transform:scale(1.022) translate(-0.45%,0.25%);
  filter:contrast(1.04) saturate(1.06) brightness(1.02);
}
.decision-cold-open.cold-open--climax .cold-open-chart{
  animation:none;
  transform:scale(1.03) translate(-0.55%,0.3%);
  filter:contrast(1.05) saturate(1.08) brightness(1.03);
}
.decision-cold-open.cold-open--climax .cold-open-flash{
  animation:coldOpenFlash .48s ease-out both;
}
.decision-cold-open.cold-open--ready .cold-open-chart{
  animation:none;
  transform:none;
  filter:none;
}

/* Legibility veil — soft navy, not flat black card */
.cold-open-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(6,10,18,.06) 0%,
      rgba(6,10,18,.12) 40%,
      rgba(7,12,22,.62) 66%,
      rgba(6,10,18,.86) 100%),
    linear-gradient(180deg,
      rgba(6,10,18,.42) 0%,
      transparent 24%,
      transparent 56%,
      rgba(4,8,14,.58) 100%);
  transition:opacity .4s ease;
}
.decision-cold-open.cold-open--accel .cold-open-veil,
.decision-cold-open.cold-open--climax .cold-open-veil{
  opacity:.88;
}

.cold-open-copy{
  position:absolute;z-index:3;
  top:0;right:0;bottom:0;
  width:min(460px,48vw);
  display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
  padding:clamp(32px,7vh,64px) clamp(28px,4.5vw,52px) clamp(32px,6vh,56px) clamp(20px,2.5vw,28px);
  text-align:left;pointer-events:none;
}
.cold-open-copy .decision-choice{pointer-events:auto}

/* Brand — editorial serif; enters only after candles settle (.cold-open--ready) */
.cold-open-brand{
  margin:0 0 clamp(18px,2.8vh,28px);
  max-width:18ch;
  font-family:var(--co-display);
  font-size:clamp(34px,4.2vw,50px);
  font-weight:600;
  font-style:normal;
  letter-spacing:.01em;
  line-height:1.05;
  color:#f4f6f8;
  opacity:0;
  transform:translateY(14px);
  clip-path:inset(0 0 110% 0);
}

.cold-open-copy h1{
  margin:0 0 14px;
  max-width:14ch;
  font-family:var(--co-sans);
  font-size:clamp(26px,3.15vw,36px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.18;
  color:#f1f5f9;
  opacity:0;
}
.cold-open-copy h1 .cold-open-q{
  display:block;
  margin-top:.22em;
  font-weight:500;
  color:rgba(226,232,240,.86);
  letter-spacing:-.018em;
}

.cold-open-sub{
  margin:0 0 clamp(24px,3.6vh,36px);
  max-width:34ch;
  font-family:var(--co-sans);
  font-size:14.5px;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.65;
  color:rgba(148,163,184,.82);
  opacity:0;
}
.cold-open-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:11px;
  width:100%;max-width:372px;
  opacity:0;
}
.cold-open-stakes{
  margin:16px 0 0;
  max-width:36ch;
  font-family:var(--co-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.45;
  color:rgba(148,163,184,.48);
  opacity:0;
}

/* Choreographed reveal after chart freezes — decision feels earned */
.decision-cold-open.cold-open--ready .cold-open-brand{
  animation:coldOpenBrandIn 1s var(--co-ease) .05s both;
}
.decision-cold-open.cold-open--ready .cold-open-copy h1{
  animation:coldOpenRise .9s var(--co-ease) .22s both;
}
.decision-cold-open.cold-open--ready .cold-open-sub{
  animation:coldOpenRise .85s var(--co-ease) .36s both;
}
.decision-cold-open.cold-open--ready .cold-open-actions{
  animation:coldOpenRise .88s var(--co-ease) .5s both;
}
.decision-cold-open.cold-open--ready .cold-open-stakes{
  animation:coldOpenRise .8s var(--co-ease) .64s both;
}
.decision-cold-open.cold-open--ready .decision-choice-enter{
  animation:none;
}

/* The old .decision-choice styling (a bright white "primary" pill for
   Enter) lived here. design-system.css loads after this file and redeclares
   every one of these selectors at equal specificity, so the cascade already
   discarded this block — it never painted. Removing it outright rather than
   leaving it as inert dead weight: a future stylesheet reorder would have
   silently resurrected the old white-pill look with no code change to point
   at as the cause. */

/* Cold open consequence — reward beat + process feedback */
.cold-open-consequence{
  --co-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --co-sans:"Sora",system-ui,-apple-system,sans-serif;
  --co-ease:cubic-bezier(.22,1,.36,1);
  position:absolute;inset:0;z-index:40;
  display:none;
  /* flex-start + auto margins on the child, NOT align-items:center. Centring a
     flex item that is taller than its container makes the overflow unreachable
     in both directions; auto margins centre it when there is room and fall back
     to normal scroll flow when there is not. This screen used to have neither:
     no overflow at all and a parent with overflow:hidden, so on a 664px iPhone
     viewport the one button on it sat 67px below the fold and could not be
     scrolled to. 45 of 269 visitors were on screens that short. */
  align-items:flex-start;justify-content:center;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:clamp(18px,5vh,64px) 24px max(clamp(18px,5vh,64px),env(safe-area-inset-bottom,0px));
  text-align:left;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%,rgba(22,40,72,.35),transparent 70%),
    rgba(5,8,14,.96);
  box-sizing:border-box;
  font-family:var(--co-sans);
  -webkit-font-smoothing:antialiased;
}
.cold-open-consequence.visible{
  display:flex;
  animation:coldOpenRise .6s var(--co-ease) both;
}
.cold-open-consequence-inner{width:100%;max-width:520px;position:relative;margin-block:auto}

/* Short viewports — the median visitor is 734px tall and a third are under 700.
   Scrolling above is the safety net; this is the part that makes the screen
   actually fit, because a verdict you have to scroll to finish reads as broken.
   Keyed on height, not width: a landscape phone is short too. */
@media (max-height:800px){
  .cold-open-consequence{padding:16px 18px max(16px,env(safe-area-inset-bottom,0px))}
  .consequence-label{margin-bottom:8px}
  .consequence-statement{font-size:clamp(20px,5.4vw,25px);margin-bottom:14px;line-height:1.26}
  .consequence-question{font-size:14px;margin-bottom:9px;line-height:1.4}
  .evidence-options{gap:6px;margin-bottom:14px}
  .evidence-option{padding:10px 14px;font-size:13.5px}
  .consequence-insight{padding:12px 14px;margin-bottom:13px}
  .consequence-verdict-body{font-size:13px;line-height:1.5}
  .consequence-promise{font-size:12.5px;margin:0 0 8px;line-height:1.45}
  .cta-primary,.cta-secondary{padding:12px 22px}
}
.consequence-xp{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:18px;padding:6px 12px;border-radius:999px;
  font-family:var(--co-sans);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#e2e8f0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(226,232,240,.18);
  animation:coldXpFly 1.65s var(--co-ease) .15s both;
}
.consequence-label{
  font-family:var(--co-sans);
  font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(148,163,184,.55);margin-bottom:12px;
}
.consequence-statement{
  font-family:var(--co-display);
  font-size:clamp(24px,3.1vw,32px);font-weight:600;
  letter-spacing:.006em;color:#f1f5f9;line-height:1.3;margin-bottom:26px;
}
.consequence-statement em{font-style:normal;color:#f8fafc;}
.consequence-question{
  font-family:var(--co-sans);
  font-size:15px;font-weight:400;letter-spacing:-.01em;
  color:rgba(148,163,184,.78);margin-bottom:14px;line-height:1.5;
}
.evidence-options{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.evidence-option{
  padding:14px 18px;border-radius:12px;
  font-family:var(--co-sans);
  font-size:14px;font-weight:500;letter-spacing:-.01em;color:#cbd5e1;
  background:rgba(255,255,255,.035);border:1px solid rgba(148,163,184,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .14s ease;text-align:left;
}
.evidence-option:hover{
  background:rgba(255,255,255,.07);border-color:rgba(148,163,184,.3);
  transform:translateY(-1px);
}
.evidence-option.selected{
  background:rgba(255,255,255,.09);border-color:rgba(226,232,240,.4);color:#f1f5f9;
}
.evidence-options.answered{display:none}
/* The answered state: one quiet line where four options were. Reads as a
   receipt, not a control — but it is one, so the answer stays changeable. */
.evidence-recap{
  display:flex;align-items:baseline;gap:8px;width:100%;
  margin:0 0 14px;padding:9px 13px;border-radius:10px;
  font-family:var(--co-sans);text-align:left;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid rgba(148,163,184,.16);
  transition:border-color .16s ease,background .16s ease;
}
.evidence-recap:hover{background:rgba(255,255,255,.06);border-color:rgba(148,163,184,.3)}
.evidence-recap[hidden]{display:none}
.evidence-recap-label{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(148,163,184,.6);flex:none;
}
.evidence-recap-value{
  flex:1;min-width:0;font-size:13.5px;font-weight:500;color:#e2e8f0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.evidence-recap-edit{
  flex:none;font-size:11.5px;font-weight:600;color:rgba(148,163,184,.72);
  border-bottom:1px solid rgba(148,163,184,.32);
}
.consequence-insight{
  padding:18px 20px;border-radius:12px;background:rgba(255,255,255,.035);
  border:1px solid rgba(148,163,184,.14);margin-bottom:22px;
  animation:coldInsightIn .55s var(--co-ease) both;
}
.consequence-insight-label{
  font-family:var(--co-sans);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(148,163,184,.55);margin-bottom:10px;
}
.consequence-insight-text{
  font-family:var(--co-sans);
  font-size:15px;font-weight:400;letter-spacing:-.01em;color:#e2e8f0;line-height:1.6;
}
.consequence-insight-text strong{font-weight:700;color:#f8fafc;}
.consequence-cta{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  animation:coldInsightIn .5s var(--co-ease) .08s both;
}
.cta-primary{
  padding:14px 26px;border-radius:12px;
  font-family:var(--co-sans);
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:#0a1018;
  background:linear-gradient(180deg,#f3f5f8,#e4e9f0);border:1px solid rgba(255,255,255,.35);cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 22px rgba(0,0,0,.25);
  transition:filter .16s ease,transform .16s ease;
}
.cta-primary:hover{filter:brightness(1.04);transform:translateY(-1px);}
.cta-primary:active{transform:translateY(1px) scale(.985)}
/* The open-loop line sits full-width above the buttons: it is the reason to
   press them, so it reads first. Quiet, not a banner. */
.consequence-promise{
  flex-basis:100%;margin:2px 0 10px;
  font-family:var(--co-sans);
  font-size:13.5px;line-height:1.5;color:rgba(226,232,240,.82);
}
.consequence-promise b{color:#f5d485;font-weight:600;}
.cta-secondary{
  padding:14px 22px;border-radius:12px;
  font-family:var(--co-sans);
  font-size:14px;font-weight:500;letter-spacing:-.01em;
  color:rgba(226,232,240,.58);background:transparent;border:1px solid rgba(148,163,184,.18);
  cursor:pointer;transition:all .15s ease;
}
.cta-secondary:hover{color:rgba(226,232,240,.9);border-color:rgba(148,163,184,.34);}

/* Auth ambient chart — moving candles behind login form */
.login-chart-bg{
  position:absolute;inset:0;z-index:4;
  width:100%;height:100%;display:block;
  opacity:.32;pointer-events:none;
}
.login-chart-veil{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 48%,rgba(5,7,10,.55) 0%,rgba(5,7,10,.22) 45%,transparent 72%),
    linear-gradient(180deg,rgba(5,7,10,.35) 0%,transparent 28%,transparent 72%,rgba(5,7,10,.45) 100%);
  opacity:1;
}
#qq-login.qq-login--cold .login-chart-bg,
#qq-login.qq-login--aftermath .login-chart-bg,
#qq-login.qq-login--cold .login-chart-veil,
#qq-login.qq-login--aftermath .login-chart-veil{
  opacity:0;visibility:hidden;
}

/* When cold-open or consequence owns the screen */
#qq-login.qq-login--cold #login-main-container,
#qq-login.qq-login--aftermath #login-main-container{
  pointer-events:none;opacity:0;visibility:hidden;
}

@media(prefers-reduced-motion:reduce){
  .cold-open-brand,
  .cold-open-depth,
  .cold-open-vignette,
  .cold-open-chart,
  .cold-open-flash,
  .decision-cold-open.cold-open--ready .cold-open-brand,
  .decision-cold-open.cold-open--ready .cold-open-copy h1,
  .decision-cold-open.cold-open--ready .cold-open-sub,
  .decision-cold-open.cold-open--ready .cold-open-actions,
  .decision-cold-open.cold-open--ready .cold-open-stakes,
  .decision-cold-open.cold-open--ready .decision-choice-enter,
  .consequence-xp,
  .cold-open-consequence.visible,
  .consequence-insight,
  .consequence-cta{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .cold-open-brand{
    -webkit-text-fill-color:#f4f6f8;
    background:none;
  }
  .decision-cold-open.cold-open--intensify .cold-open-chart,
  .decision-cold-open.cold-open--accel .cold-open-chart,
  .decision-cold-open.cold-open--climax .cold-open-chart{transform:none;filter:none}
}

@media(max-width:820px){
  .cold-open-veil{
    background:
      linear-gradient(180deg,
        rgba(6,10,18,.28) 0%,
        rgba(6,10,18,.18) 26%,
        rgba(6,10,18,.78) 60%,
        rgba(5,8,14,.95) 100%);
  }
  .cold-open-copy{
    top:auto;left:0;right:0;bottom:0;width:100%;
    justify-content:flex-end;
    padding:28px 22px max(32px,env(safe-area-inset-bottom));
  }
  .cold-open-brand{
    max-width:13ch;
    font-size:clamp(30px,8vw,40px);
    letter-spacing:.01em;
    line-height:1.06;
    margin-bottom:14px;
  }
  .cold-open-copy h1{
    max-width:15ch;
    font-size:clamp(23px,6.2vw,30px);
    letter-spacing:-.018em;
    margin-bottom:12px;
  }
  .cold-open-sub{
    font-size:14px;line-height:1.58;margin-bottom:22px;max-width:36ch;
  }
  .cold-open-actions{max-width:none}
  .cold-open-stakes{font-size:11.5px;margin-top:14px}
  /* Padding is not re-declared here: design-system.css loads after this file
     and gives .decision-choice its frameless treatment, so a padding value
     left in this block would only look authoritative without ever painting. */
  .decision-choice{font-size:14px}
}
@media(max-width:480px){
  .cold-open-actions{grid-template-columns:1fr}
  .decision-choice-reject{grid-column:auto}
  .cold-open-brand{font-size:clamp(28px,9vw,36px)}
}

/* ============================================================
   ONBOARDING — Kendini seç (path select)
   Cormorant brand + Sora UI · cold-open atmospheric continuity
   ============================================================ */
@keyframes qqOnboardIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes qqOnboardRise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes qqOnboardPathIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes qqOnboardSelectPulse{
  0%{transform:translateY(-2px) scale(1)}
  45%{transform:translateY(-2px) scale(1.015)}
  100%{transform:translateY(-2px) scale(1)}
}
@keyframes qqOnboardAmbient{
  0%,100%{opacity:.9}
  50%{opacity:1}
}

#qq-onboarding.qq-onboard,
.qq-onboard{
  --ob-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ob-sans:"Sora",system-ui,-apple-system,sans-serif;
  --ob-ease:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0;z-index:80;
  /* Same reason as the cold-open verdict: centring inside a scroller makes the
     overflow unreachable. 128 people pass through this screen. */
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(20px,4vh,40px) clamp(16px,3vw,32px) max(clamp(20px,4vh,40px),env(safe-area-inset-bottom,0px));
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#060a12;
  font-family:var(--ob-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  animation:qqOnboardIn .45s var(--ob-ease) both;
}
.qq-onboard-atmosphere{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.qq-onboard-depth{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 68% 52% at 50% 18%,rgba(36,58,94,.34),transparent 64%),
    radial-gradient(ellipse 42% 36% at 72% 62%,rgba(38,166,154,.06),transparent 58%),
    radial-gradient(ellipse 40% 32% at 22% 70%,rgba(22,40,72,.28),transparent 55%),
    linear-gradient(168deg,#0a1220 0%,#070b14 46%,#05080f 100%);
  animation:qqOnboardAmbient 5.2s ease-in-out infinite;
}
.qq-onboard-grid{
  position:absolute;inset:0;opacity:.05;
  background-image:
    linear-gradient(rgba(148,163,184,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.5) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 15%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 15%,transparent 78%);
}
.qq-onboard-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 42%,transparent 38%,rgba(2,4,10,.58) 100%),
    linear-gradient(180deg,rgba(4,8,16,.12) 0%,transparent 28%,rgba(4,8,16,.35) 100%);
}

.qq-onboard-stage{
  position:relative;z-index:1;
  width:100%;max-width:520px;
  margin:auto;
  text-align:center;
  transition:opacity .28s var(--ob-ease),transform .28s var(--ob-ease);
}
.qq-onboard-stage--exit{
  opacity:0;transform:translateY(8px);
}
.qq-onboard-stage--confirm{
  max-width:440px;
}

.qq-onboard-brand{
  margin:0 0 10px;
  font-family:var(--ob-display);
  font-size:clamp(22px,3.2vw,28px);
  font-weight:600;
  letter-spacing:.014em;
  line-height:1.1;
  color:#f4f6f8;
  background:linear-gradient(105deg,#e8eef5 0%,#f8fafc 45%,#c5d0de 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:qqOnboardRise .7s var(--ob-ease) .04s both;
}
.qq-onboard-cast{
  display:flex;justify-content:center;gap:10px;
  margin:0 auto 18px;
  animation:qqOnboardRise .75s var(--ob-ease) .1s both;
}
.qq-onboard-cast-chip{
  --cast-accent:var(--theme-accent,#67e8f9);
  width:44px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  background:rgba(8,16,28,.75);
  border:1px solid color-mix(in srgb, var(--cast-accent) 40%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.35), 0 0 18px color-mix(in srgb, var(--cast-accent) 18%, transparent);
}
.qq-onboard-cast-chip .mascot-svg{width:34px;height:34px}
.qq-onboard-cast-chip:nth-child(1){animation:qqCastEnter .5s cubic-bezier(.2,.85,.2,1) .12s both}
.qq-onboard-cast-chip:nth-child(2){animation:qqCastEnter .5s cubic-bezier(.2,.85,.2,1) .18s both}
.qq-onboard-cast-chip:nth-child(3){animation:qqCastEnter .5s cubic-bezier(.2,.85,.2,1) .24s both}
.qq-onboard-cast-chip:nth-child(4){animation:qqCastEnter .5s cubic-bezier(.2,.85,.2,1) .3s both}
.qq-onboard-cast-chip:nth-child(5){animation:qqCastEnter .5s cubic-bezier(.2,.85,.2,1) .36s both}
.qq-onboard-title{
  margin:0 0 14px;
  font-family:var(--ob-display);
  font-size:clamp(36px,5.2vw,48px);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.08;
  color:#f1f5f9;
  animation:qqOnboardRise .75s var(--ob-ease) .12s both;
}
.qq-onboard-title--sm{
  font-size:clamp(28px,4vw,36px);
  margin-bottom:12px;
}
.qq-onboard-lead{
  margin:0 auto 8px;
  max-width:38ch;
  font-size:14.5px;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.65;
  color:rgba(148,163,184,.88);
  animation:qqOnboardRise .75s var(--ob-ease) .2s both;
}
.qq-onboard-note{
  margin:0 auto clamp(28px,4.5vh,40px);
  max-width:40ch;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.55;
  color:rgba(100,116,139,.72);
  animation:qqOnboardRise .75s var(--ob-ease) .28s both;
}

.qq-onboard-paths{
  display:flex;flex-direction:column;gap:10px;
  width:100%;
  text-align:left;
}

.qq-path{
  --path-accent:rgba(148,163,184,.55);
  --path-tint:rgba(148,163,184,.06);
  position:relative;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:14px;
  width:100%;
  padding:18px 18px 18px 16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 48%),
    rgba(8,12,20,.55);
  color:inherit;
  cursor:pointer;
  text-align:left;
  outline:none;
  transition:
    transform .35s var(--ob-ease),
    border-color .3s ease,
    background .3s ease,
    box-shadow .35s var(--ob-ease);
  animation:qqOnboardPathIn .7s var(--ob-ease) both;
}
.qq-path:nth-child(1){animation-delay:.34s;--path-accent:rgba(45,212,168,.7);--path-tint:rgba(45,212,168,.08)}
.qq-path:nth-child(2){animation-delay:.44s;--path-accent:rgba(125,180,220,.7);--path-tint:rgba(125,180,220,.08)}
.qq-path:nth-child(3){animation-delay:.54s;--path-accent:rgba(212,175,100,.7);--path-tint:rgba(212,175,100,.08)}

.qq-path::before{
  content:"";
  position:absolute;left:0;top:14px;bottom:14px;width:2px;
  border-radius:0 2px 2px 0;
  background:var(--path-accent);
  opacity:.35;
  transition:opacity .3s ease,transform .3s var(--ob-ease);
  transform:scaleY(.72);
}
.qq-path:hover,
.qq-path:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,var(--path-tint),transparent 55%),
    rgba(12,18,28,.72);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.qq-path:hover::before,
.qq-path:focus-visible::before{
  opacity:.9;transform:scaleY(1);
}
.qq-path:focus-visible{
  box-shadow:0 0 0 2px rgba(15,23,42,.9),0 0 0 3px rgba(226,232,240,.28);
}
.qq-path.is-selected{
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(135deg,var(--path-tint),transparent 55%),
    rgba(14,20,32,.85);
  animation:qqOnboardSelectPulse .32s var(--ob-ease) both;
  box-shadow:0 12px 32px rgba(0,0,0,.32);
}
.qq-path.is-selected::before{opacity:1;transform:scaleY(1)}
.qq-path:disabled{cursor:default}

.qq-path-index{
  font-family:var(--ob-display);
  font-size:13px;font-weight:600;
  letter-spacing:.06em;
  color:rgba(148,163,184,.45);
  min-width:1.6em;
  transition:color .25s ease;
}
.qq-path:hover .qq-path-index,
.qq-path.is-selected .qq-path-index{color:rgba(226,232,240,.7)}

.qq-path-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border-radius:11px;
  background:var(--path-tint);
  border:1px solid rgba(255,255,255,.05);
  color:var(--path-accent);
  transition:transform .35s var(--ob-ease),border-color .25s ease;
}
.qq-path-icon svg,
.qq-path-icon i{
  width:18px;height:18px;
}
.qq-path:hover .qq-path-icon{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.1);
}

.qq-path-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.qq-path-title{
  font-size:15px;font-weight:600;
  letter-spacing:-.01em;
  color:#f1f5f9;
  line-height:1.25;
}
.qq-path-desc{
  font-size:12.5px;font-weight:400;
  line-height:1.5;
  color:rgba(100,116,139,.9);
}
.qq-path-desc b{color:#e2e8f0;font-weight:700}
.qq-path-meta{
  display:block;margin-top:6px;font-size:11px;line-height:1.4;color:rgba(148,163,184,.88);
}
.aca-node.skipped .aca-node-orb{border-color:rgba(56,189,248,.45)!important;background:rgba(14,48,72,.7)!important}
.aca-node-skipped{color:#7dd3fc!important;font-size:10.5px!important;letter-spacing:.04em}
.qq-path-chevron{
  display:flex;align-items:center;color:rgba(148,163,184,.28);
  transition:transform .3s var(--ob-ease),color .25s ease;
}
.qq-path-chevron svg,
.qq-path-chevron i{width:16px;height:16px}
.qq-path:hover .qq-path-chevron{
  color:rgba(226,232,240,.55);
  transform:translateX(3px);
}

/* Confirm step */
.qq-onboard-confirm{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  animation:qqOnboardRise .65s var(--ob-ease) both;
}
.qq-onboard-confirm-mark{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin-bottom:22px;
  border-radius:14px;
  border:1px solid rgba(45,212,168,.28);
  background:rgba(45,212,168,.08);
  color:#2dd4a8;
}
.qq-onboard-confirm-mark svg,
.qq-onboard-confirm-mark i{width:26px;height:26px}
.qq-onboard-confirm .qq-onboard-brand{animation:none;opacity:1}
.qq-onboard-confirm .qq-onboard-title{animation:none;opacity:1}
.qq-onboard-confirm .qq-onboard-lead{
  animation:none;opacity:1;
  margin-bottom:28px;
}

.qq-onboard-result{
  width:100%;
  padding:18px 20px;
  margin-bottom:14px;
  text-align:left;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(8,12,20,.55);
}
.qq-onboard-result-label{
  font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(45,212,168,.85);
  margin-bottom:6px;
}
.qq-onboard-result-name{
  font-family:var(--ob-display);
  font-size:22px;font-weight:600;
  color:#f1f5f9;letter-spacing:.01em;
  margin-bottom:6px;
}
.qq-onboard-result-desc{
  font-size:12.5px;line-height:1.55;
  color:rgba(100,116,139,.95);
}

.qq-onboard-warn{
  width:100%;
  padding:14px 16px;
  margin-bottom:22px;
  text-align:left;
  border-radius:12px;
  border:1px solid rgba(212,175,100,.22);
  background:rgba(212,175,100,.06);
}
.qq-onboard-warn-label{
  font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,196,120,.9);
  margin-bottom:5px;
}
.qq-onboard-warn p{
  margin:0;
  font-size:12.5px;line-height:1.55;
  color:rgba(241,230,200,.82);
}

.qq-onboard-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  margin-top:4px;
  padding:15px 22px;
  border:none;border-radius:12px;
  background:#f1f5f9;
  color:#070b14;
  font-family:var(--ob-sans);
  font-size:14px;font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .3s var(--ob-ease),background .2s ease,box-shadow .3s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 10px 28px rgba(0,0,0,.22);
}
.qq-onboard-cta svg,
.qq-onboard-cta i{width:16px;height:16px}
.qq-onboard-cta:hover{
  background:#0d1a2d;
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 32px rgba(0,0,0,.28);
}
.qq-onboard-cta:focus-visible{
  outline:2px solid rgba(226,232,240,.5);
  outline-offset:3px;
}

@media(max-width:640px){
  .qq-onboard{padding:20px 14px;align-items:flex-start;padding-top:max(24px,6vh)}
  .qq-onboard-stage{max-width:100%}
  .qq-path{
    grid-template-columns:auto 1fr auto;
    gap:12px;padding:16px 14px;
  }
  .qq-path-index{display:none}
  .qq-path-title{font-size:14.5px}
  .qq-path-desc{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .qq-onboard,
  .qq-onboard-brand,
  .qq-onboard-title,
  .qq-onboard-lead,
  .qq-onboard-note,
  .qq-path,
  .qq-onboard-depth,
  .qq-onboard-confirm{animation:none!important;opacity:1;transform:none}
  .qq-path{transition:border-color .15s ease,background .15s ease}
}

/* ============================================================
   LESSON SYSTEM 2026 — shared stage, hierarchy and motion
   ============================================================ */
:root{
  --aca-base:#0c1830;
  --aca-base-2:#13233e;
  --aca-panel:#101d32;
  --aca-panel-2:#0d1a2d;
  --aca-ink:#edf5ff;
  --aca-muted:#9eb0c8;
  --aca-line:rgba(30,53,86,.14);
  --aca-cyan:#22b8cf;
  --aca-green:#44a340;
  --aca-warm:#f1b84b;
  --aca-danger:#dc6670;
  --aca-ease:cubic-bezier(.22,1,.36,1);
}

#academy-level-content.aca-lesson-open{
  color:#edf5ff!important;
  background:#000!important;
}
#academy-level-content.aca-lesson-open #academy-lesson-area{padding:12px clamp(16px,2.2vw,36px) 18px}
#academy-level-content.aca-lesson-open .aca-lesson-viewport{
  width:min(1440px,100%);margin:0 auto;gap:12px!important;
}
.aca-lesson-hud{
  flex:0 0 auto;display:grid;grid-template-columns:44px minmax(0,1fr) 56px;
  align-items:center;gap:14px;width:min(1180px,100%);margin:0 auto 4px;
  min-height:48px;padding:4px 0;
}
.aca-lesson-close{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;cursor:pointer;
  color:#b7c5da;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  transition:background .18s ease,color .18s ease,transform .18s var(--aca-ease);
}
.aca-lesson-close:hover{background:rgba(255,255,255,.13);color:#fff;transform:scale(1.03)}
.aca-lesson-close:focus-visible,.aca-hook-btn:focus-visible,.aca-live-nav:focus-visible,.aca-check-btn:focus-visible{
  outline:3px solid rgba(125,211,252,.75);outline-offset:3px;
}
.aca-lesson-progress{height:10px;border-radius:99px;padding:2px;background:rgba(5,12,25,.44);border:1px solid rgba(255,255,255,.1)}
.aca-lesson-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#47d7e8,#65d38e);transition:width .35s var(--aca-ease)}
.aca-lesson-count{font:700 12px/1 Sora,sans-serif;color:#b9c8db;text-align:right;font-variant-numeric:tabular-nums}

/* One purposeful stage instead of a bordered card around the entire screen. */
#academy-level-content.aca-lesson-open .aca-hook-card{
  flex:1;min-height:0;height:auto;max-width:1180px;width:100%;margin:0 auto;padding:clamp(18px,3vh,32px);
  display:grid;grid-template-columns:minmax(300px,.85fr) minmax(440px,1.15fr);
  grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:24px 42px;text-align:left;
  background:transparent;border:0;border-radius:0;box-shadow:none;overflow:hidden;
}
.aca-hook-card::before{display:none}
.aca-hook-copy{align-self:center;max-width:520px}
.aca-hook-mascot-wrap{display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;margin:16px 0!important}
#academy-level-content.aca-lesson-open .aca-hook-mascot{
  width:76px!important;height:76px!important;flex:0 0 76px!important;border-radius:24px;
  display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(125,211,252,.25);
  filter:none;overflow:hidden;
}
#academy-level-content.aca-lesson-open .aca-hook-mascot svg{width:62px!important;height:62px!important}
#academy-level-content.aca-lesson-open .aca-hook-bubble{
  max-width:390px;padding:14px 16px;border-radius:16px;font-size:15px;line-height:1.45;font-weight:650;
  color:#eaf4ff;background:rgba(4,12,25,.35);border:1px solid rgba(255,255,255,.1);box-shadow:none;
}
.aca-hook-bubble::before{display:none}
#academy-level-content.aca-lesson-open .aca-hook-kicker{
  margin:0;color:#83e3ef;font-size:10.5px;letter-spacing:.18em;font-weight:800;
}
#academy-level-content.aca-lesson-open .aca-hook-promise{
  margin:0 0 12px;padding:0;border:0;background:transparent;color:#f5ce7a;
  font-size:13px;line-height:1.4;justify-content:flex-start;
}
.aca-hook-promise-dot{box-shadow:none;background:var(--aca-warm)}
#academy-level-content.aca-lesson-open .aca-hook-text,
#academy-level-content.aca-lesson-open .aca-hook-special .aca-hook-text{
  margin:0;max-width:46ch;font:650 clamp(20px,2.2vw,29px)/1.26 Outfit,sans-serif;color:#fff;letter-spacing:-.025em;
}
.aca-hook-visual{align-self:stretch;display:flex;align-items:center;min-height:0}
.aca-hook-preview{width:100%;max-width:none;margin:0}
.aca-hook-preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#a7b8cf;font-size:10.5px;font-weight:800;letter-spacing:.12em}
.aca-hook-preview-head strong{color:#8de8f1}
.aca-hook-preview-frame{
  overflow:hidden;border-radius:22px;background:#0a1425;border:1px solid rgba(145,202,231,.2);
  box-shadow:0 24px 56px rgba(2,8,20,.28);
}
.aca-hook-preview-frame canvas{display:block;width:100%;height:clamp(210px,34vh,360px)!important}
.aca-hook-preview-payoff{display:flex;align-items:center;gap:8px;margin-top:10px;color:#b9c8db;font-size:12px;font-weight:650}
.aca-action-dock{
  grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
}
#academy-level-content.aca-lesson-open .aca-action-dock .aca-hook-btn{
  width:min(340px,100%);min-height:54px;margin:0;padding:14px 28px;border-radius:16px!important;
  color:#102016!important;background:#74d45a!important;border:1px solid #87e46f!important;
  box-shadow:0 4px 0 #3f9136!important;font-size:14px;letter-spacing:.025em;
}

/* Warm learning panels improve contrast and reduce oppressive dark stacking. */
.aca-orion-teach{max-width:1100px!important;margin:0 auto!important}
.aca-teach-hero{
  max-width:860px;width:100%;margin:0 auto 10px;padding:10px 12px;border-radius:18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);box-shadow:none;
}
.aca-teach-orion-stage{width:60px;height:60px;flex-basis:60px;border-radius:18px;background:rgba(5,16,30,.35);border:1px solid rgba(125,211,252,.25);box-shadow:none}
.aca-teach-speech-label{color:#83e3ef}
.aca-teach-speech .mascot-bubble,.aca-live-orion-row .mascot-bubble{
  color:#eef7ff!important;background:transparent!important;border:0!important;padding:4px 6px!important;box-shadow:none!important;
}
.aca-teach-scroll{padding:4px 4px 14px}
.aca-teach-grid{max-width:860px;width:100%;gap:10px}
.aca-teach-chip{
  padding:14px 16px;border-radius:18px;background:rgba(13,26,45,.96);border:1px solid rgba(125,211,252,.18);
  box-shadow:0 8px 24px rgba(2,8,20,.14);color:var(--aca-ink);
}
.aca-teach-chip:hover{border-color:#84dce7;transform:translateY(-1px)}
.aca-teach-chip.open{background:var(--aca-panel-2);border-color:#65c8d5;box-shadow:0 14px 34px rgba(2,8,20,.18)}
.aca-teach-chip-num{background:#dff5f6;color:#167789;box-shadow:none}
.aca-teach-chip-t{color:var(--aca-ink);font-size:15px}
.aca-teach-chip-h{color:var(--aca-muted)}
.aca-teach-chip-x{color:#d7e4f4;font-size:14.5px;line-height:1.45;font-weight:600;margin-top:6px}
#academy-level-content.aca-lesson-open .aca-teach-chip-x{
  color:#dbe7f5!important;font-size:15px!important;line-height:1.45!important;
  font-weight:600;margin-top:8px;
}
.aca-teach-chip.open .aca-teach-chip-x{display:block!important}
.aca-teach-mini{min-height:188px;border:1px solid rgba(30,53,86,.16);border-radius:14px;box-shadow:none}
.aca-teach-mini canvas{height:188px!important}
.aca-teach-footer,.aca-live-controls,.aca-live-dock{
  background:rgba(12,24,48,.96)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:18px;box-shadow:0 -10px 28px rgba(2,8,20,.22);
}
.aca-teach-footer{max-width:860px;width:100%;margin:0 auto;padding:10px}

/* Central chart stage; dialogue and action remain visible in the reserved dock. */
.aca-live-show{max-width:1180px!important;margin:0 auto!important;gap:8px}
.aca-live-chart-slot{max-height:none}
.aca-chart-frame-premium{border-radius:20px;overflow:hidden;border:1px solid rgba(145,202,231,.18);background:#0a1425;box-shadow:0 18px 48px rgba(2,8,20,.22)}
.aca-chart-topbar{min-height:38px;padding:9px 14px;background:#101d32}
.aca-live-controls,.aca-live-dock{min-height:132px;padding:10px 12px}
.aca-live-orion-row{padding:0!important;background:transparent!important;border:0!important}
.aca-live-orion-row .aca-mascot-slot{width:54px;height:54px;flex-basis:54px}
.aca-live-orion-row .aca-mascot-slot svg{width:48px;height:48px}
.aca-live-caption{font-size:12px;color:#d7e5f5}
.aca-live-nav{min-height:46px;border-radius:14px;padding:11px 14px;box-shadow:none;border:1px solid rgba(255,255,255,.16);background:#edf2f7}
.aca-live-nav-primary{background:#74d45a!important;border-color:#87e46f!important;box-shadow:none!important;color:#102016!important}

/* Decision scenes share a compact, viewport-filling grammar. */
.aca-lesson-layout{width:min(1180px,100%);margin:auto;grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);gap:20px;min-height:0}
.aca-lesson-col-right{justify-content:center;gap:14px}
.aca-orion-wrap,.mascot-container{
  border-radius:18px;background:rgba(13,26,45,.96)!important;border:1px solid rgba(125,211,252,.18)!important;
  box-shadow:0 12px 30px rgba(2,8,20,.14);color:var(--aca-ink);
}
.aca-orion-bubble,.mascot-bubble{color:var(--aca-ink)!important;background:transparent!important;border:0!important;box-shadow:none!important}
.aca-orion-bubble::before{display:none}
.aca-orion-avatar{width:62px!important;height:62px!important;flex-basis:62px!important;background:#e9f7f7;border:1px solid #c6ebee;animation:none}
.aca-options-grid{margin:0;gap:10px}
.aca-option-card,.duo-option-card{
  min-height:58px;padding:14px 16px;border-radius:16px;background:rgba(13,26,45,.96);border:1px solid rgba(125,211,252,.18);
  color:var(--aca-ink);box-shadow:0 8px 22px rgba(2,8,20,.12);transition:transform .18s var(--aca-ease),border-color .18s ease,background .18s ease;
}
.aca-option-text,.duo-option-card .text-sm{color:var(--aca-ink)}
.aca-option-card:hover:not(.selected),.duo-option-card:hover{transform:translateY(-2px);border-color:#7fd4de;background:#13263e}
.aca-option-card.selected,.duo-option-card.selected{border-color:#22b8cf;background:#e9f9fb;box-shadow:0 0 0 3px rgba(34,184,207,.14)}
.aca-option-card.correct,.duo-option-card.correct{border-color:#63bb63;background:#eef9ed}
.aca-option-card.wrong,.duo-option-card.wrong{border-color:#dc7b83;background:#3a1821}
.aca-check-btn{min-height:50px;border-radius:15px;background:#74d45a;color:#102016;border:1px solid #87e46f;box-shadow:none}
.aca-boss-fresh{width:min(1060px,100%);margin:auto;min-height:0;overflow-y:auto;padding:0 4px 8px}
.aca-boss-fresh .aca-chart-frame-premium{max-height:46vh}
.aca-boss-fresh #academy-boss-canvas{height:min(400px,42vh)!important}
.aca-boss-fresh-badge{color:#f7d38b;background:rgba(241,184,75,.1);border-color:rgba(241,184,75,.28)}
.aca-feedback.ok{animation:acaProcessGood .36s var(--aca-ease) both}

.aca-arena-bridge,.aca-lvlcomplete{width:min(760px,100%);max-width:760px!important;margin:auto!important;padding:24px!important}
.aca-summary-beat{
  width:min(640px,100%);margin:auto;padding:clamp(24px,5vw,48px);text-align:center;border-radius:26px;
  background:var(--aca-panel-2);color:var(--aca-ink);box-shadow:0 24px 60px rgba(2,8,20,.22);
}
.aca-summary-beat>.aca-mascot-slot{margin:0 auto 14px}
.aca-summary-kicker{font-size:10.5px;font-weight:900;letter-spacing:.18em;color:#168092;margin-bottom:8px}
.aca-summary-title{font:800 clamp(24px,4vw,34px)/1.15 Outfit,sans-serif;letter-spacing:-.03em;margin-bottom:12px}
.aca-summary-copy{max-width:42ch;margin:0 auto 20px;color:#4d5a70;font-size:15px;line-height:1.55}
.aca-summary-next{display:flex;justify-content:space-between;gap:16px;padding:13px 0;margin-bottom:18px;border-block:1px solid var(--aca-line);font-size:12px;color:var(--aca-muted);text-align:left}
.aca-summary-next strong{color:var(--aca-ink);text-align:right}
.aca-arena-bridge{border-radius:24px;background:rgba(13,26,45,.96);color:var(--aca-ink);box-shadow:0 20px 54px rgba(2,8,20,.2)}
.aca-arena-bridge .mascot-container{box-shadow:none}
.aca-pocket-card{background:#e9f7f7;border-color:#b9e4e8;box-shadow:none}
.aca-pocket-label,.aca-arena-bridge-kicker{color:#167789}
.aca-pocket-rule,.aca-arena-will-a{color:var(--aca-ink)}
.aca-arena-will{background:#0a1728;border-color:var(--aca-line)}
.aca-arena-will p{color:#536176}
.aca-consequence-dock{justify-content:center!important;gap:6px!important;padding:7px 10px!important}
.aca-consequence-mascot{display:flex;justify-content:center;margin:0 auto 2px}
.aca-consequence-mascot .aca-mascot-slot{width:52px;height:52px;flex-basis:52px;border-radius:16px}
.aca-consequence-mascot .aca-mascot-slot svg{width:44px!important;height:44px!important;max-width:44px;max-height:44px}
.aca-consequence-card{padding:12px 16px!important;border-radius:18px!important}
.aca-consequence-card>div:first-child{margin-bottom:4px!important}
.aca-consequence-card .text-2xl{font-size:19px!important;margin-bottom:3px!important}
.aca-consequence-card p{font-size:12.5px!important;line-height:1.35!important}
.aca-consequence-card .mt-5{margin-top:8px!important;padding:5px 10px!important;font-size:11px!important}
.aca-consequence-dock>button{padding-top:11px!important;padding-bottom:11px!important}

@keyframes acaSceneEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes acaDialogueReveal{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes acaProcessGood{0%{transform:scale(.98);opacity:.5}100%{transform:none;opacity:1}}
@keyframes acaRewardSettle{0%{opacity:0;transform:translateY(14px) scale(.97)}100%{opacity:1;transform:none}}
.lesson-slide-in,.aca-step-enter{animation:acaSceneEnter .36s var(--aca-ease) both}
.aca-hook-bubble,.aca-orion-bubble,.mascot-bubble{animation:acaDialogueReveal .3s var(--aca-ease) both}
.aca-lvlcomplete{animation:acaRewardSettle .5s var(--aca-ease) both}
.orion-mentor .orion-antenna{transform-origin:32px 15px;animation:orionAntenna 2.8s ease-in-out 2}
.orion-curious{animation:orionInspect .5s var(--aca-ease) both}
.orion-cautious .orion-body{animation:orionCaution .42s ease 1}
.orion-proud{animation:orionNod .5s var(--aca-ease) 1}
.orion-playful{animation:orionSurprise .46s var(--aca-ease) 1}
@keyframes orionAntenna{50%{transform:rotate(7deg)}}
@keyframes orionInspect{50%{transform:rotate(-4deg) translateX(-1px)}}
@keyframes orionCaution{50%{transform:translateY(1px)}}
@keyframes orionNod{50%{transform:translateY(2px) scale(.98)}}
@keyframes orionSurprise{50%{transform:scale(1.06)}}

@media(max-width:899px){
  #academy-level-content.aca-lesson-open #academy-lesson-area{padding:8px 10px 12px}
  .aca-lesson-hud{grid-template-columns:40px 1fr 48px;gap:10px}
  /* flex without a direction meant ROW: on phones the bubble, the chart and
     the DEVAM button all crammed side by side, one word per line. */
  #academy-level-content.aca-lesson-open .aca-hook-card{display:flex;flex-direction:column;overflow-y:auto;padding:12px 6px 6px;gap:16px}
  .aca-hook-copy{max-width:none}
  .aca-hook-visual{width:100%}
  .aca-hook-preview-frame canvas{height:200px!important}
  .aca-action-dock{position:sticky;bottom:0;width:100%;padding:10px;background:linear-gradient(180deg,transparent,var(--aca-base) 30%)}
  #academy-level-content.aca-lesson-open .aca-action-dock .aca-hook-btn{width:100%}
  .aca-lesson-layout{grid-template-columns:1fr;overflow-y:auto}
  .aca-lesson-col-left .aca-chart-frame canvas{min-height:280px}
}
@media(max-height:780px) and (min-width:900px){
  #academy-level-content.aca-lesson-open .aca-hook-card{gap:16px 30px;padding:12px 24px}
  .aca-hook-preview-frame canvas{height:250px!important}
  #academy-level-content.aca-lesson-open .aca-hook-text{font-size:21px}
  .aca-live-controls,.aca-live-dock{min-height:118px}
  .aca-teach-mini,.aca-teach-mini canvas{height:164px!important;min-height:164px}
}
@media(prefers-reduced-motion:reduce){
  .lesson-slide-in,.aca-step-enter,.aca-hook-bubble,.aca-orion-bubble,.mascot-bubble,.aca-feedback.ok,.aca-lvlcomplete,
  .orion-mentor .orion-antenna,.orion-curious,.orion-cautious .orion-body,.orion-proud,.orion-playful{
    animation:none!important;transition-duration:.01ms!important;
  }
}

/* Final cascade guard: no warm/white lesson surfaces may override dark mode. */
#academy-level-content.aca-lesson-open .aca-teach-chip,
#academy-level-content.aca-lesson-open .aca-teach-chip.open,
#academy-level-content.aca-lesson-open .aca-option-card,
#academy-level-content.aca-lesson-open .duo-option-card,
#academy-level-content.aca-lesson-open .aca-orion-wrap,
#academy-level-content.aca-lesson-open .mascot-container,
#academy-level-content.aca-lesson-open .aca-summary-beat,
#academy-level-content.aca-lesson-open .aca-arena-bridge{
  color:#edf5ff!important;background:linear-gradient(155deg,#101d32,#08111f)!important;
  border-color:rgba(125,211,252,.18)!important;box-shadow:0 12px 30px rgba(2,8,20,.25)!important;
}
#academy-level-content.aca-lesson-open .aca-teach-chip-t,
#academy-level-content.aca-lesson-open .aca-teach-chip-x,
#academy-level-content.aca-lesson-open .aca-option-text,
#academy-level-content.aca-lesson-open .duo-option-card .text-sm,
#academy-level-content.aca-lesson-open .aca-orion-bubble,
#academy-level-content.aca-lesson-open .mascot-bubble{color:#edf5ff!important}
#academy-level-content.aca-lesson-open .aca-orion-avatar{background:#0b1d30!important;border-color:rgba(103,232,249,.25)!important}
/* Light pocket cards need dark ink. This contextual rule intentionally wins over
   the dark-stage typography guard above. */
#academy-level-content.aca-lesson-open .aca-pocket-card{
  background:linear-gradient(145deg,#effcfc,#dff5f5)!important;
  border-color:#a9dfe4!important;color:#102234!important;
}
#academy-level-content.aca-lesson-open .aca-pocket-card .aca-pocket-label{color:#167789!important}
#academy-level-content.aca-lesson-open .aca-pocket-card .aca-pocket-rule{color:#102234!important}
#academy-level-content.aca-lesson-open .aca-pocket-card .aca-pocket-word{color:#102234!important}

/* ── Cast tour (studio coach + roster) ── */
.qq-cast-tour{
  position:fixed;inset:0;z-index:9990;
  pointer-events:none;
  font-family:"Segoe UI",Inter,system-ui,sans-serif;
}
.qq-cast-tour--live .qq-cast-tour-scrim{
  position:absolute;inset:0;
  background:rgba(2,6,14,.82);
  pointer-events:none;
  transition:background .25s ease;
}
.qq-cast-spot-target{
  position:relative!important;
  z-index:9992!important;
  outline:2px solid rgba(103,232,249,.95)!important;
  outline-offset:4px!important;
  box-shadow:
    0 0 0 6px rgba(34,211,238,.18),
    0 0 40px rgba(34,211,238,.45)!important;
  filter:brightness(1.12) saturate(1.1)!important;
  border-radius:14px;
}
#qq-cast-spot-ring{
  position:fixed;z-index:9991;pointer-events:none;
  border:2px solid rgba(103,232,249,.9);
  border-radius:16px;
  box-shadow:0 0 0 9999px rgba(2,6,14,.72), 0 0 36px rgba(34,211,238,.5);
  transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease;
}
#qq-cast-spot-label{
  position:fixed;z-index:9993;pointer-events:none;
  background:rgba(8,20,36,.95);color:#e0f2fe;border:1px solid rgba(103,232,249,.4);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
}
.qq-cast-tour-coach{
  --cast-accent:var(--theme-accent,#67e8f9);
  position:fixed;left:50%;
  width:min(460px,calc(100vw - 24px));
  padding:16px 18px 18px;
  border-radius:22px;
  border:1px solid color-mix(in srgb, var(--cast-accent) 35%, rgba(125,211,252,.18));
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, color-mix(in srgb, var(--cast-accent) 18%, transparent), transparent 55%),
    linear-gradient(165deg,rgba(14,28,46,.98),rgba(6,12,22,.99));
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  pointer-events:auto;
  z-index:9994;
  transition:opacity .18s ease, filter .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qq-cast-coach--bottom{bottom:18px;top:auto;transform:translateX(-50%)}
.qq-cast-coach--top{top:72px;bottom:auto;transform:translateX(-50%)}
.qq-cast-coach--lit{
  filter:brightness(1.14) saturate(1.08);
  border-color:color-mix(in srgb, var(--cast-accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cast-accent) 28%, transparent),
    0 0 52px color-mix(in srgb, var(--cast-accent) 28%, transparent),
    0 22px 56px rgba(0,0,0,.52);
}
.qq-cast-tour-stage--exit{opacity:0;transform:translateX(-50%) translateY(6px)}
.qq-cast-roster{
  display:flex;justify-content:space-between;gap:6px;
  margin:0 0 14px;padding:8px 6px 10px;
  border-radius:16px;
  background:rgba(2,10,20,.45);
  border:1px solid rgba(148,163,184,.12);
}
.qq-cast-roster-chip{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:.42;transform:scale(.92);
  transition:opacity .25s ease, transform .25s ease, filter .25s ease;
}
.qq-cast-roster-chip.is-active{
  opacity:1;transform:scale(1.06);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--cast-accent) 55%, transparent));
}
.qq-cast-roster-face{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(8,16,28,.8);
  border:1px solid color-mix(in srgb, var(--cast-accent) 25%, transparent);
}
.qq-cast-roster-chip.is-active .qq-cast-roster-face{
  border-color:color-mix(in srgb, var(--cast-accent) 70%, transparent);
  background:color-mix(in srgb, var(--cast-accent) 12%, rgba(8,16,28,.9));
}
.qq-cast-roster-face .mascot-svg{width:30px;height:30px}
.qq-cast-roster-name{
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(226,232,240,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.qq-cast-roster-chip.is-active .qq-cast-roster-name{color:#f8fafc}
.qq-cast-coach-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.qq-cast-mascot{
  position:relative;
  width:76px;height:76px;flex:0 0 76px;
  display:flex;align-items:center;justify-content:center;
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cast-accent) 22%, transparent), transparent 70%),
    linear-gradient(160deg,#12233d,#070b14);
  border:1px solid color-mix(in srgb, var(--cast-accent) 40%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.35);
  overflow:hidden;
}
.qq-cast-mascot .mascot-svg{width:64px;height:64px}
.qq-cast-mascot-enter{animation:qqCastEnter .42s cubic-bezier(.2,.85,.2,1) both}
@keyframes qqCastEnter{
  from{opacity:0;transform:translateY(12px) scale(.86) rotate(-3deg)}
  to{opacity:1;transform:none}
}
.qq-cast-coach-copy{flex:1;min-width:0;text-align:left}
.qq-cast-tour-step{
  margin:0 0 4px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb, var(--cast-accent) 85%, #94a3b8);
}
.qq-cast-tour-title{
  margin:0 0 2px;
  font-size:19px;font-weight:800;letter-spacing:.02em;
  color:#f8fafc;
}
.qq-cast-role{
  margin:0 0 8px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb, var(--cast-accent) 70%, #94a3b8);
}
.qq-cast-bubble{
  margin:0 0 6px;
  font-size:13.5px;line-height:1.48;font-weight:600;
  color:#e2e8f0;
}
.qq-cast-tip{
  font-size:12px;line-height:1.4;font-weight:500;
  color:rgba(148,163,184,.95);
}
.qq-cast-tour-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 18px;border-radius:14px;
  border:1px solid color-mix(in srgb, var(--cast-accent) 45%, transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--cast-accent) 28%, #1e3a4f),
    color-mix(in srgb, var(--cast-accent) 12%, #0f2740));
  color:#ecfeff;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  cursor:pointer;transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.qq-cast-tour-cta:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--cast-accent) 70%, transparent);
  box-shadow:0 8px 22px color-mix(in srgb, var(--cast-accent) 22%, transparent);
}
.qq-cast-tour-cta--final{
  background:linear-gradient(180deg,#0e7490,#155e75);
  border-color:rgba(103,232,249,.5);color:#fff;
}
.qq-cast-tour-cta i,.qq-cast-tour-cta svg{width:16px;height:16px}
.qq-cast-place--academy .qq-cast-tour-step{color:#67e8f9}
.qq-cast-place--today .qq-cast-tour-step{color:#a5f3fc}
.qq-cast-place--arena .qq-cast-tour-step{color:#6ee7b7}
.qq-cast-place--mission .qq-cast-tour-step{color:#f5e6c8}
.qq-cast-place--risk .qq-cast-tour-step{color:#fde68a}

.aca-hook-cast-name{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(103,232,249,.8);margin-bottom:6px;
}

@media(max-width:420px){
  .qq-cast-roster-name{font-size:10.5px}
  .qq-cast-roster-face{width:30px;height:30px}
  .qq-cast-roster-face .mascot-svg{width:24px;height:24px}
  .qq-cast-mascot{width:64px;height:64px;flex-basis:64px}
  .qq-cast-mascot .mascot-svg{width:54px;height:54px}
  .qq-cast-tour-title{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .qq-cast-mascot-enter,.mascot-face-in,.mascot-face-out,.mascot-svg .aca-eyes,.mascot-svg .aca-antenna-tip{animation:none!important}
}

/* Plain hook — okunası gelsin */
.aca-hook-plain .aca-hook-kicker,
.aca-hook-plain .aca-hook-promise{display:none!important}
.aca-hook-plain .aca-hook-beats{min-height:2.6em;margin:8px 0 12px}
.aca-hook-plain .aca-hook-beat{
  font-family:Outfit,sans-serif;
  font-size:clamp(22px,3.4vw,30px)!important;
  font-weight:700;letter-spacing:-.02em;line-height:1.25;
  color:#f8fafc!important;max-width:18ch;margin:0 auto;text-align:center;
}
.aca-hook-plain .aca-hook-bubble{
  font-size:15px!important;line-height:1.4!important;font-weight:600;
  max-width:28ch;
}
.aca-hook-plain .aca-hook-cast-name{
  font-size:10.5px;letter-spacing:.12em;text-transform:none;opacity:.7;margin-bottom:4px;
}
.aca-micro-plain h3{display:none}
.aca-micro-plain .aca-micro-line{
  font-family:Outfit,sans-serif;
  font-size:clamp(18px,2.6vw,24px);font-weight:700;line-height:1.3;
  color:#f1f5f9;max-width:22ch;
}

.aca-hook-beats{min-height:3.2em;margin:0 auto 10px;max-width:36rem}
.aca-hook-beat{
  margin:0;font-size:clamp(16px,1.7vw,22px);line-height:1.45;font-weight:700;color:#e8eef7;
  animation:acaBeatIn .38s cubic-bezier(.22,1,.36,1) both;
}
.aca-hook-beat[hidden]{display:none!important}
@keyframes acaBeatIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.aca-hook-beat-dots,.aca-micro-dots{
  display:flex;gap:6px;justify-content:center;margin:8px 0 4px;
}
.aca-hook-beat-dots span,.aca-micro-dots span{
  width:7px;height:7px;border-radius:99px;background:rgba(148,163,184,.28);
  transition:background .2s,transform .2s;
}
.aca-hook-beat-dots span.on,.aca-micro-dots span.on{background:#67e8f9;transform:scale(1.25)}
.aca-hook-beat-dots span.done,.aca-micro-dots span.done{background:rgba(103,232,249,.55)}
.aca-micro-reveal{min-height:3em}
.aca-micro-line{
  margin:0;font-size:14.5px;line-height:1.5;color:#dbe4f0;font-weight:600;
  animation:acaBeatIn .34s ease both;
}
.aca-micro-line[hidden]{display:none!important}

/* Pedagogy legend under EĞİTİM chart */
.aca-pedagogy-legend{
  margin-top:8px;padding:10px 12px;border-radius:12px;
  background:rgba(6,14,28,.72);border:1px solid rgba(103,232,249,.18);
  display:flex;flex-direction:column;gap:6px;
}
.aca-ped-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#e2e8f0;font-weight:700}
.aca-ped-dot{width:8px;height:8px;border-radius:99px;background:#67e8f9;box-shadow:0 0 8px rgba(103,232,249,.5)}
.aca-ped-sides{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:11.5px;font-weight:650}
.aca-ped-up{color:#6ee7b7}.aca-ped-dn{color:#fca5a5}

/* Quiz verdict — correct/wrong must feel obvious */
.aca-quiz-verdict{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;margin:10px 0;
  font-size:13.5px;line-height:1.45;font-weight:650;
  animation:acaBeatIn .28s ease both;
}
.aca-quiz-verdict.is-correct{
  background:rgba(16,80,50,.35);border:1.5px solid rgba(52,211,153,.55);color:#d1fae5;
}
.aca-quiz-verdict.is-wrong{
  background:rgba(80,20,30,.35);border:1.5px solid rgba(248,113,113,.55);color:#fecaca;
}
.aca-qv-badge{
  flex:0 0 auto;font-size:10.5px;font-weight:900;letter-spacing:.12em;padding:4px 8px;border-radius:8px;
}
.aca-qv-badge.ok{background:rgba(52,211,153,.2);color:#6ee7b7}
.aca-qv-badge.bad{background:rgba(248,113,113,.2);color:#fca5a5}
.aca-qv-body{flex:1;min-width:0}
.aca-qv-body em{display:block;margin-top:4px;font-style:normal;color:#a7f3d0;font-weight:700}
.aca-check-btn.aca-check-ok{background:linear-gradient(135deg,#34d399,#059669)!important;color:#042f1e!important}
.aca-check-btn.aca-check-bad{background:rgba(248,113,113,.18)!important;color:#fecaca!important;border:1px solid rgba(248,113,113,.4)}
.duo-option-card.reveal-answer,.aca-option-card.reveal-answer{
  box-shadow:0 0 0 2px rgba(52,211,153,.55);
}
.aca-mini-card.is-correct{border-color:rgba(52,211,153,.7)!important;box-shadow:0 0 0 2px rgba(52,211,153,.25)}
.aca-mini-card.is-wrong{border-color:rgba(248,113,113,.7)!important;box-shadow:0 0 0 2px rgba(248,113,113,.2)}

/* ── Mini mission ─────────────────────────────────────────────────────────
   The question a lesson closes on was rendering as a bare flex child of the
   lesson shell: pinned to the top-left corner, with its cards in a grid
   hardcoded to three columns. Forty of the forty-two missions author two
   charts, so nearly every one of them left a third of the row empty and read
   as a panel that had failed to finish loading rather than as the last thing
   the lesson asks you.

   Loaded after styles.css, so the two rules below deliberately override the
   fixed 3-column grid and the fixed 150px canvas height declared there. */
.aca-mini-screen{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  align-items:center;
  /* v86: justify-content:center + overflow-y:auto, icerik tasinca ust yarisi
     erisilemez bolgeye kayiyordu (telefonda iki grafik ekrandan uzun): soru
     basligi kesik, yukari kaydirma imkansiz, oyuncu takili kaliyordu (canli
     rapor). Guvenli ortalama: ilk/son cocuga auto margin; tasinca 0'a duser. */
  justify-content:flex-start;
  gap:clamp(14px,2.4vh,24px);
  width:100%;max-width:1000px;margin:0 auto;
  padding:clamp(10px,2vh,22px) 2px;
  overflow-y:auto;overflow-x:hidden;text-align:center;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
}
.aca-mini-screen > :first-child{margin-top:auto}
.aca-mini-screen > :last-child{margin-bottom:auto}
.aca-mini-card canvas{touch-action:pan-y}
.aca-mini-head{
  display:flex;align-items:center;gap:14px;
  max-width:660px;text-align:left;
}
.aca-mini-face{width:58px;height:58px;flex:0 0 58px}
.aca-mini-face svg{width:100%;height:100%}
.aca-mini-say{display:flex;flex-direction:column;gap:6px;min-width:0}
.aca-mini-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-family:Outfit,sans-serif;font-size:10.5px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;
}
.aca-mini-prompt{
  font-family:Outfit,sans-serif;font-weight:700;
  font-size:clamp(17px,2.1vw,22px);letter-spacing:-.02em;line-height:1.3;
  color:#f1f5f9;
}
.aca-mini-loading{padding:28px 0;font-size:13px;color:#64748b}
.aca-mini-grid{
  display:grid;
  grid-template-columns:repeat(var(--mini-cols,2),minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
  width:100%;
}
/* Match the canvas backing ratio (440×300) so nothing is squashed. */
.aca-mini-card canvas{
  width:100%!important;height:auto!important;
  aspect-ratio:22/15;display:block;min-height:0;
}
.aca-mini-card:focus-visible{outline:2px solid rgba(56,189,248,.8);outline-offset:2px}
.aca-mini-label{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px 12px;
  font-size:12.5px;font-weight:650;line-height:1.35;color:#cbd5e1;
}
/* The caption is the explanation, not a hint: hidden until the grid is
   answered, because captions like "Yeşil gövdeler çoğunlukta" would hand the
   word-match answer to anyone who never looked at the charts. */
.aca-mini-grid:not(.is-answered) .aca-mini-label-text{display:none}
.aca-mini-grid.is-answered .aca-mini-label-text{animation:qqAccIn .3s ease both}
/* Overrides the absolute top-left placement declared in styles.css: floating
   over the plot, the letter covered the topmost price-axis label. */
.aca-mini-card .aca-mini-tag{
  position:static;
  flex:0 0 auto;
  width:20px;height:20px;
  font-size:11px;
}
.aca-mini-hint{font-size:11.5px;color:#64748b}
.aca-mini-feedback{width:100%;max-width:660px}
@media(max-width:720px){
  .aca-mini-grid{grid-template-columns:1fr}
}

/* Quiz review + mastery gate */
.aca-quiz-review,.aca-mastery-gate,.aca-prior-recall{
  max-width:640px;margin:0 auto;padding:24px 18px;text-align:center;
}
.aca-quiz-review-kicker,.aca-prior-kicker{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:#83e3ef;margin-bottom:10px;
}
.aca-quiz-review-title,.aca-prior-title{font-family:Outfit,sans-serif;font-size:22px;font-weight:800;color:#f1f5f9;margin-bottom:6px}
.aca-quiz-review-sub,.aca-mastery-promise{font-size:13.5px;color:#94a3b8;margin-bottom:16px;line-height:1.45}
.aca-quiz-review-list{display:flex;flex-direction:column;gap:10px;text-align:left;margin-bottom:18px}
.aca-quiz-review-item{
  display:flex;gap:12px;padding:12px 14px;border-radius:14px;
  background:rgba(8,14,28,.7);border:1px solid rgba(148,163,184,.14);
}
.aca-quiz-review-item.is-wrong{border-color:rgba(248,113,113,.28)}
.aca-qri-n{
  flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-size:12px;font-weight:900;background:rgba(248,113,113,.15);color:#fca5a5;
}
.aca-qri-q{font-size:13.5px;font-weight:700;color:#e2e8f0;margin-bottom:6px}
.aca-qri-a{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;font-weight:650}
.aca-qri-a .bad{color:#fca5a5}.aca-qri-a .ok{color:#6ee7b7}
.aca-qri-why{margin-top:6px;font-size:12px;color:#94a3b8;line-height:1.4}
.aca-mastery-q,.aca-prior-q{font-size:16px;font-weight:700;color:#f1f5f9;margin:12px 0 14px;line-height:1.4}
.aca-mastery-opts,.aca-prior-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.aca-mastery-opt,.aca-prior-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;
  border-radius:14px;background:rgba(10,18,34,.8);border:1px solid rgba(148,163,184,.2);
  color:#e2e8f0;font-weight:700;font-size:14px;cursor:pointer;transition:border-color .15s,transform .15s;
}
.aca-mastery-opt:hover,.aca-prior-opt:hover{border-color:#67e8f9;transform:translateY(-1px)}
.aca-mastery-opt span:first-child,.aca-prior-letter{
  flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:rgba(103,232,249,.12);color:#67e8f9;font-size:12px;font-weight:900;
}
.aca-mastery-opt.is-correct,.aca-prior-opt.is-correct{border-color:rgba(52,211,153,.65);background:rgba(16,60,40,.35)}
.aca-mastery-opt.is-wrong,.aca-prior-opt.is-wrong{border-color:rgba(248,113,113,.65);background:rgba(60,16,24,.35)}
.aca-mastery-opt.dim,.aca-prior-opt.dim{opacity:.45}
.aca-prior-skip{
  margin-top:14px;background:none;border:none;color:#64748b;font-size:12px;font-weight:700;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.aca-lc-nojump{margin-top:10px;font-size:11.5px;color:#64748b;font-weight:600}

@media(prefers-reduced-motion:reduce){
  .aca-hook-beat,.aca-micro-line,.aca-quiz-verdict{animation:none!important}
}

/* ── Scroll choreography (Bugün) ──
   Scrolling down hands the outer frame to the journey: the terminal column
   folds its text away and gives its width to the map, then unfolds when you
   come back up. Nodes rise into place the first time they reach the screen. */
@media (min-width: 768px){
  #mode-boss .aca-terminal-wrap{
    transition: width .42s cubic-bezier(.22,1,.36,1),
                padding .42s cubic-bezier(.22,1,.36,1),
                opacity .3s ease;
    overflow: hidden;
    white-space: nowrap;
    /* This collapse animates width, which reflows the map beside it every
       frame — the source of the scroll stutter. will-change lets the browser
       promote and pre-plan the layout, and containing the map's own layout
       keeps that reflow from cascading through all of its nodes. */
    will-change: width, opacity;
  }
  #mode-boss.qq-scrolly .aca-terminal-wrap{
    width: 0 !important;
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
    pointer-events: none;
  }
  #mode-boss #academy-level-map{ contain: layout style; }
}
.qq-scrollfx #academy-level-map .aca-node,
.qq-scrollfx #academy-level-map .aca-unit-card{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.qq-scrollfx #academy-level-map .aca-node.in-view,
.qq-scrollfx #academy-level-map .aca-unit-card.in-view{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  #mode-boss .aca-terminal-wrap{transition:none}
  .qq-scrollfx #academy-level-map .aca-node,
  .qq-scrollfx #academy-level-map .aca-unit-card{opacity:1;transform:none;transition:none}
}

/* ── Account tab + hearts HUD + today band ── */
.aca-hearts-hud{display:flex;align-items:center;gap:4px;margin-right:10px;min-height:22px}
.aca-hearts-hud .aca-heart{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;font-size:13px;line-height:1;
  color:rgba(148,163,184,.35);filter:none;border-radius:0;background:transparent;
  transition:transform .2s ease,color .2s ease,opacity .2s ease;
}
.aca-hearts-hud .aca-heart.full{color:#fb7185;text-shadow:0 0 10px rgba(244,63,94,.45);background:transparent}
.aca-hearts-hud .aca-heart.breaking{animation:acaHeartBreak .55s ease forwards}
/* Bold Turkish feedback leads: without a touch of tracking, "lı" in
   "Yanlış" fuses into a shape that reads as "h" at lesson sizes. */
.aca-orion-bubble b,.mascot-bubble b,.aca-qv-body b,.aca-quiz-feedback b{letter-spacing:.02em}
.aca-hearts-count{font-family:Outfit,Inter,sans-serif;font-size:12.5px;font-weight:800;color:#fda4af;margin-left:2px;letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1}
.aca-hearts-count i{font-style:normal;font-size:10.5px;font-weight:700;color:#64748b}
.aca-lesson-hud-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.aca-lesson-hearts{margin-right:0 !important}
.aca-hud-streak-inline,.aca-hud-hearts-inline{
  font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.aca-hud-streak-inline{color:#fbbf24}
.aca-hud-hearts-inline{color:#fb7185}
@keyframes acaHeartBreak{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(.2);opacity:0}}
.qq-account{
  max-width:640px;margin:0 auto;padding:0;
  animation:qqAccIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes qqAccIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qq-account-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 22px 20px;margin-bottom:18px;border-radius:18px;
  background:#0b1220;border:1px solid rgba(148,163,184,.14);
}
.qq-account-hero-orb{
  position:absolute;right:-40px;top:-50px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,212,191,.14),transparent 68%);
  pointer-events:none;animation:qqAccOrb 8s ease-in-out infinite;
}
@keyframes qqAccOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,10px)}}
.qq-account-avatar{
  position:relative;z-index:1;
  width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  font-family:Outfit,sans-serif;font-weight:700;font-size:26px;
  background:#134e4a;color:#ccfbf1;border:1px solid rgba(45,212,191,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:qqAccAvatar .7s cubic-bezier(.22,1,.36,1) .08s both;
}
@keyframes qqAccAvatar{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.qq-account-hero-copy{position:relative;z-index:1;flex:1;min-width:0}
.qq-account-kicker{font-size:12px;font-weight:600;letter-spacing:.02em;color:#94a3b8;margin-bottom:4px}
.qq-account-name{font-family:Outfit,sans-serif;font-size:26px;font-weight:700;color:#f8fafc;margin:0;line-height:1.15;letter-spacing:-.02em}
.qq-account-sub{font-size:13px;color:#94a3b8;margin:6px 0 0;line-height:1.45}
.qq-account-gear{
  position:relative;z-index:1;
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(15,23,42,.8);border:1px solid rgba(148,163,184,.18);color:#94a3b8;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.qq-account-gear:hover{color:#e2e8f0;border-color:rgba(148,163,184,.35);background:rgba(30,41,59,.9)}
.qq-account-ring-row{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.qq-account-ring{
  --pct:0;
  position:relative;width:96px;height:96px;flex-shrink:0;
}
.qq-account-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.qq-account-ring-bg{fill:none;stroke:rgba(148,163,184,.12);stroke-width:7}
.qq-account-ring-fg{
  fill:none;stroke:#2dd4bf;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:226.08;
  stroke-dashoffset:calc(226.08 - (226.08 * var(--pct) / 100));
  transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1);
}
.qq-account-ring-val{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:Outfit,sans-serif;
}
.qq-account-ring-val strong{font-size:18px;font-weight:700;color:#f1f5f9;line-height:1}
.qq-account-ring-val span{font-size:10.5px;color:#64748b;margin-top:3px}
.qq-account-stats{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:200px}
.qq-acc-stat{
  padding:12px 12px;border-radius:12px;background:#0b1220;border:1px solid rgba(148,163,184,.12);
  animation:qqAccStat .5s cubic-bezier(.22,1,.36,1) both;
}
.qq-acc-stat:nth-child(1){animation-delay:.05s}
.qq-acc-stat:nth-child(2){animation-delay:.1s}
.qq-acc-stat:nth-child(3){animation-delay:.15s}
.qq-acc-stat:nth-child(4){animation-delay:.2s}
@keyframes qqAccStat{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qq-acc-stat span{display:block;font-size:11px;font-weight:600;color:#64748b;margin-bottom:4px}
.qq-acc-stat strong{font-family:Outfit,sans-serif;font-size:17px;font-weight:700;color:#e2e8f0}
.qq-account-daily-bar{margin-bottom:18px}
.qq-account-daily-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:6px}
.qq-account-daily-track{height:6px;border-radius:99px;background:rgba(148,163,184,.12);overflow:hidden}
.qq-account-daily-fill{height:100%;border-radius:99px;background:#2dd4bf;transition:width .55s cubic-bezier(.22,1,.36,1)}
.qq-account-section{margin-bottom:16px}
.qq-account-section-label{font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:8px}
.qq-account-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.qq-acc-unit{
  display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;
  background:#0b1220;border:1px solid rgba(148,163,184,.12);color:#cbd5e1;
  transition:border-color .15s,transform .15s;
}
.qq-acc-unit strong{font-size:13px;font-weight:700;color:#f1f5f9}
.qq-acc-unit span{font-size:11px;color:#64748b}
.qq-acc-unit.is-done{border-color:rgba(45,212,191,.35)}
.qq-acc-unit.is-done span{color:#5eead4}
.qq-acc-unit.is-mid{border-color:rgba(251,191,36,.28)}
.qq-acc-unit.is-mid span{color:#fbbf24}
.qq-acc-unit.is-locked{opacity:.55}
.qq-acc-unit.is-locked strong{color:#94a3b8}
/* .qq-account-challenge / .qq-acc-ch-kicker removed with the daily-challenge
   card they styled: a trading question on the account screen. The challenge
   now lives in the Academy's today band as .aca-today-daily. */
.qq-account-actions{display:flex;flex-wrap:wrap;gap:10px}
.qq-acc-btn{
  flex:1;min-width:140px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(148,163,184,.18);background:#0b1220;color:#e2e8f0;
  font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;
}
.qq-acc-btn:hover{background:#111827;border-color:rgba(148,163,184,.3)}
.qq-acc-btn--danger{border-color:rgba(244,63,94,.3);color:#fda4af;background:rgba(127,29,29,.18)}
.qq-acc-btn--danger:hover{background:rgba(127,29,29,.28)}
@media(max-width:640px){
  .qq-account-ring-row{flex-direction:column;align-items:stretch}
  .qq-account-ring{margin:0 auto}
}

/* Arena transfer progress */
.aca-transfer-summary{margin:12px 0 14px}
.aca-transfer-summary-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:6px}
.aca-transfer-summary-meta strong{color:#5eead4;font-family:Outfit,sans-serif}
.aca-transfer-track{height:6px;border-radius:99px;background:rgba(148,163,184,.12);overflow:hidden}
.aca-transfer-track--lg{height:8px}
.aca-transfer-track--gate{width:100%;margin:4px 0 8px}
.aca-transfer-fill{height:100%;border-radius:inherit;background:#2dd4bf;transition:width .45s ease}
.aca-transfer-list{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;max-height:220px;overflow:auto}
.aca-transfer-row{padding:10px 12px;border-radius:10px;background:rgba(8,16,28,.55);border:1px solid rgba(148,163,184,.12)}
.aca-transfer-row.is-ready{border-color:rgba(45,212,191,.3)}
.aca-transfer-row-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#cbd5e1;margin-bottom:6px}
.aca-transfer-row-top b{font-family:Outfit,sans-serif;color:#94a3b8;font-weight:700}
.aca-transfer-row.is-ready .aca-transfer-row-top b{color:#5eead4}
.aca-transfer-mini-list{width:100%;display:flex;flex-direction:column;gap:4px;margin:0 0 8px;text-align:left}
.aca-transfer-mini{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#94a3b8;padding:4px 2px}
.aca-transfer-mini b{font-weight:700;color:#64748b}
.aca-transfer-mini.is-ready{color:#cbd5e1}
.aca-transfer-mini.is-ready b{color:#5eead4}

/* Why-chain evidence chips + SRS band */
.aca-why-chips{display:flex;flex-direction:column;gap:8px;margin:12px 0 8px}
.aca-why-chip{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.22);background:rgba(8,16,28,.65);color:#e2e8f0;font-size:13px;font-weight:650;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.aca-why-chip:hover{border-color:rgba(103,232,249,.4);background:rgba(14,40,56,.75)}
.aca-why-chip.is-on{border-color:rgba(56,189,248,.7);background:rgba(14,60,90,.45);box-shadow:0 0 0 1px rgba(56,189,248,.25)}
.aca-why-chip.is-correct{border-color:rgba(52,211,153,.65);background:rgba(16,60,40,.35)}
.aca-why-chip.is-wrong{border-color:rgba(248,113,113,.65);background:rgba(60,16,24,.35)}
.aca-why-chip.dim{opacity:.45}
.aca-why-chip:disabled{cursor:default}
.aca-why-chip-k{flex:0 0 22px;width:22px;height:22px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800;background:rgba(148,163,184,.15);color:#94a3b8}
.aca-why-chip.is-on .aca-why-chip-k{background:rgba(56,189,248,.25);color:#7dd3fc}
.aca-srs-band{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;padding:14px 16px;border-radius:12px;background:rgba(15,23,42,.8);border:1px solid rgba(148,163,184,.18);flex-wrap:wrap}
.aca-srs-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#94a3b8;margin-bottom:4px}
.aca-srs-copy strong{display:block;font-size:15px;color:#f8fafc;margin-bottom:2px}
.aca-srs-copy p{margin:0;font-size:12px;color:#94a3b8}
.aca-srs-btn{flex-shrink:0;padding:10px 16px;border-radius:10px;border:1px solid rgba(148,163,184,.28);background:rgba(30,41,59,.9);color:#e2e8f0;font-size:13px;font-weight:600;letter-spacing:0;cursor:pointer}
.aca-srs-btn:hover{background:rgba(51,65,85,.9)}
.aca-exam-opt.is-selected{border-color:rgba(251,146,60,.7);background:rgba(60,30,10,.4)}
.qq-acc-btn{flex:1;min-width:140px;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:#0b1220;color:#e2e8f0;font-size:13px;font-weight:600;cursor:pointer}
.qq-acc-btn--danger{border-color:rgba(244,63,94,.3);color:#fda4af;background:rgba(127,29,29,.18)}
/* End-of-map teaser: the course is alive, not exhausted. Dashed and dimmed —
   deliberately unfinished-looking, because that is the message. */
.aca-map-continues{
  margin:6px auto 26px;
  padding:20px 26px;
  max-width:340px;text-align:center;
  border:1.5px dashed rgba(148,163,184,.28);
  border-radius:18px;
  color:#94a3b8;
}
.aca-map-continues-dots{display:flex;justify-content:center;gap:7px;margin-bottom:10px}
.aca-map-continues-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(148,163,184,.4);
  animation:acaContinuesPulse 1.8s ease-in-out infinite;
}
.aca-map-continues-dots span:nth-child(2){animation-delay:.25s}
.aca-map-continues-dots span:nth-child(3){animation-delay:.5s}
@keyframes acaContinuesPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.aca-map-continues-title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:22px;font-weight:600;letter-spacing:.02em;color:#e2e8f0;
  margin-bottom:4px;
}
.aca-map-continues-desc{font-size:12.5px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.aca-map-continues-dots span{animation:none;opacity:.7}}

/* One warm sentence before the numbers. Editorial serif to match the brand,
   so the home opens like the cold open does — with a voice, not a dashboard. */
.aca-home-hello{margin:2px 0 14px}
.aca-home-hello h1{
  margin:0 0 4px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(24px,3vw,32px);
  font-weight:600;letter-spacing:.01em;line-height:1.1;
  color:#f4f6f8;
}
.aca-home-hello p{margin:0;font-size:13px;color:#94a3b8}
.aca-today-band{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:0 0 18px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(14,116,144,.18),rgba(6,12,22,.9));border:1px solid rgba(103,232,249,.22)}
.aca-today-chip{flex:1;min-width:110px}
.aca-today-chip span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.aca-today-chip strong{font-size:18px;color:#f8fafc}
.aca-today-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:3px solid rgba(34,211,238,.35);font-size:11px;font-weight:800;color:#67e8f9}
/* The daily-challenge button lived here until the feature was removed from
   the UI entirely. */
/* Sits a third of the way down instead of hugging the top of an otherwise
   empty stage. */
.aca-digest-screen{max-width:420px;margin:clamp(40px,16vh,150px) auto 40px;text-align:center;padding:28px 22px}
.aca-digest-title{font-size:22px;font-weight:800;color:#f8fafc;margin:12px 0 8px}
.aca-digest-rule{font-size:15px;line-height:1.45;color:#cbd5e1;margin-bottom:18px;padding:14px;border-radius:14px;background:rgba(8,16,28,.7);border:1px solid rgba(148,163,184,.15)}
.aca-digest-sub{font-size:13px;color:#7d8ea8;margin:-6px 0 16px;letter-spacing:.01em}
.aca-digest-actions{display:flex;flex-direction:column;gap:10px}
@media(max-width:640px){.qq-account-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ── İlerleme (Arena-only, sade) ── */
.prog-shell{max-width:720px;margin:0 auto}
.prog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.prog-kicker,.prog-kicker-sm{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#94a3b8;margin-bottom:6px}
.prog-kicker-sm{color:#64748b;margin-bottom:8px}
.prog-title{font-family:Outfit,sans-serif;font-size:clamp(22px,3vw,28px);font-weight:800;color:#f1f5f9;margin:0;line-height:1.15}
.prog-sub{font-size:13px;color:#94a3b8;margin:8px 0 0;max-width:42ch;line-height:1.45}
/* Tek sayfa "sicil" görünümü: üç ayrı kart + altı renkli bar yerine tek
   zemin, ince ayraçlar, tek aksan rengi. Rakamlar tabular, renk sadece
   anlam taşıdığı yerde (odak ekseni). */
.prog-sheet{background:rgba(8,12,20,.72);border:1px solid rgba(148,163,184,.12);border-radius:18px;overflow:hidden}
.prog-sheet>section{padding:20px 22px}
.prog-sheet>section+section{border-top:1px solid rgba(148,163,184,.09)}
.prog-desc{font-size:13px;color:#94a3b8;line-height:1.5;margin:14px 0 0}
.prog-sum{display:flex;gap:26px;align-items:stretch;flex-wrap:wrap}
.prog-sum-score{display:flex;flex-direction:column;justify-content:center;min-width:120px}
.prog-score{font-family:Outfit,sans-serif;font-size:52px;font-weight:900;line-height:1;letter-spacing:-.03em;color:#f1f5f9;font-variant-numeric:tabular-nums}
.prog-score small{font-size:14px;font-weight:700;color:#475569;margin-left:4px}
.prog-tier{margin-top:8px;font-size:12.5px;font-weight:800;letter-spacing:.02em}
.prog-record{flex:1;min-width:220px;display:flex;flex-direction:column;justify-content:center;gap:7px;
  border-left:1px solid rgba(148,163,184,.1);padding-left:26px}
.prog-rec-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.prog-rec-row span{color:#64748b}
.prog-rec-row b{color:#e2e8f0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.prog-rows{display:grid;gap:13px}
.prog-row{display:grid;grid-template-columns:150px 1fr 34px;align-items:center;gap:14px}
.prog-row-name{font-size:13px;font-weight:600;color:#94a3b8;white-space:nowrap}
.prog-row-name em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#fbbf24;margin-left:7px;text-transform:uppercase}
.prog-row-track{height:5px;border-radius:99px;background:rgba(148,163,184,.1);overflow:hidden}
.prog-row-fill{height:100%;width:0;border-radius:inherit;background:rgba(56,189,248,.75);transition:width .7s cubic-bezier(.22,1,.36,1)}
.prog-row.is-focus .prog-row-name{color:#e2e8f0}
.prog-row.is-focus .prog-row-fill{background:#fbbf24}
.prog-row-val{font-size:13.5px;font-weight:800;color:#e2e8f0;font-variant-numeric:tabular-nums;text-align:right}
.prog-foot{font-size:11.5px;color:#475569;margin:16px 0 0}
.prog-next{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.prog-next-copy{flex:1;min-width:240px}
.prog-next-k{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#38bdf8;margin-bottom:6px}
.prog-next-line{font-size:14.5px;font-weight:600;color:#e2e8f0;line-height:1.5;margin:0}
.prog-trend{font-size:12px;color:#64748b;margin:8px 0 0}
.prog-go{flex:0 0 auto;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:11px;
  cursor:pointer;font-family:Outfit,Inter,sans-serif;font-size:13.5px;font-weight:800;color:#a7f3d0;
  background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3)}
.prog-go:hover{background:rgba(52,211,153,.16)}
@media(max-width:560px){
  .prog-record{border-left:none;padding-left:0;border-top:1px solid rgba(148,163,184,.1);padding-top:14px}
  .prog-row{grid-template-columns:112px 1fr 30px;gap:10px}
  .prog-row-name{white-space:normal;font-size:12px}
}
/* Green like every other primary action — this was the one blue CTA left. */
.prog-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;border:none;cursor:pointer;font-family:Outfit,Inter,sans-serif;font-size:14px;font-weight:800;color:#06251f;background:linear-gradient(135deg,#34d399,#2dd4bf)}
.prog-cta:hover{filter:brightness(1.05)}
.prog-empty{text-align:center;padding:28px 16px}
.prog-empty-title{font-family:Outfit,sans-serif;font-size:20px;font-weight:800;color:#e2e8f0;margin-bottom:8px}
.prog-empty-sub{font-size:13px;color:#94a3b8;line-height:1.5;margin:0 auto 18px;max-width:40ch}
.prog-loading .dna-skel{margin-bottom:12px}

/* ── Günün Grafiği — the daily ritual ── */
.qq-daily-card{
  position:relative;z-index:2;width:min(1080px,calc(100% - 32px));margin:0 auto 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-radius:18px;
  background:linear-gradient(120deg,rgba(14,26,42,.96),rgba(9,16,28,.98));
  border:1px solid rgba(103,232,249,.2);
}
.qq-daily-skel{height:56px;border-radius:12px;background:rgba(148,163,184,.08);animation:pulse 1.4s ease infinite;width:100%}
.qq-daily-kicker{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#67e8f9;margin-bottom:4px}
.qq-daily-copy h3{font-family:Outfit,sans-serif;font-size:18px;font-weight:800;color:#f1f5f9;margin:0 0 4px}
.qq-daily-copy p{font-size:12.5px;color:#94a3b8;margin:0;line-height:1.5}
.qq-daily-cta{
  flex:0 0 auto;padding:12px 22px;border-radius:12px;border:none;cursor:pointer;
  font-family:Outfit,sans-serif;font-size:13.5px;font-weight:800;color:#06251f;
  background:linear-gradient(135deg,#34d399,#2dd4bf);
}
.qq-daily-cta:hover{filter:brightness(1.07)}
.qq-daily-cta-ghost{background:rgba(148,163,184,.1);color:#cbd5e1;border:1px solid rgba(148,163,184,.25)}
.qq-daily-side{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.qq-daily-streak{font-size:13px;font-weight:800;color:#fbbf24;white-space:nowrap}
.qq-daily-v{font-size:12px;font-weight:900;letter-spacing:.06em;padding:3px 9px;border-radius:8px;vertical-align:2px;margin-right:6px}
.qq-daily-v.ok{background:rgba(52,211,153,.15);color:#34d399;border:1px solid rgba(52,211,153,.35)}
.qq-daily-v.bad{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.3)}

.qq-daily-modal{
  position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(4,7,12,.85);backdrop-filter:blur(6px);
}
.qq-daily-panel{
  position:relative;width:min(860px,100%);max-height:94vh;overflow-y:auto;
  background:#0b1220;border:1px solid rgba(103,232,249,.22);border-radius:22px;
  padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:qqAccIn .35s cubic-bezier(.22,1,.36,1) both;
}
.qq-daily-x{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;color:#94a3b8;
  background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.18);
}
.qq-daily-x:hover{color:#f1f5f9}
.qq-daily-q{font-family:Outfit,sans-serif;font-size:22px;font-weight:800;color:#f8fafc;margin-top:2px}
.qq-daily-chartbox{margin:16px 0;border-radius:16px;overflow:hidden;border:1px solid rgba(148,163,184,.14);background:#080b12}
.qq-daily-chartbox canvas{display:block;width:100%;height:auto}
.qq-daily-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qq-daily-opt{
  padding:16px 12px;border-radius:14px;cursor:pointer;text-align:center;
  background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.2);
  transition:transform .12s ease,border-color .15s;
}
.qq-daily-opt:hover{transform:translateY(-2px)}
.qq-daily-opt b{display:block;font-family:Outfit,sans-serif;font-size:16px;font-weight:800;color:#f1f5f9}
.qq-daily-opt span{font-size:11.5px;color:#64748b}
.qq-daily-opt.up:hover{border-color:rgba(52,211,153,.5)}
.qq-daily-opt.down:hover{border-color:rgba(248,113,113,.5)}
.qq-daily-opt.watch:hover{border-color:rgba(56,189,248,.5)}
.qq-daily-opt:disabled{opacity:.5;pointer-events:none}
.qq-daily-verdict{font-family:Outfit,sans-serif;font-size:17px;font-weight:800;padding:14px 16px;border-radius:12px;margin-bottom:14px}
.qq-daily-verdict.ok{color:#a7f3d0;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3)}
.qq-daily-verdict.bad{color:#fecaca;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.28)}
.qq-daily-verdict b{color:#fbbf24;margin-left:6px}
.qq-daily-dist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.qq-daily-drow{display:grid;grid-template-columns:110px 1fr 52px;align-items:center;gap:12px;font-size:12.5px;font-weight:700;color:#94a3b8}
.qq-daily-drow.mine{color:#e2e8f0}
.qq-daily-drow.ideal span{color:#a7f3d0}
.qq-daily-dbar{height:10px;border-radius:99px;background:rgba(148,163,184,.12);overflow:hidden}
.qq-daily-dbar div{height:100%;border-radius:99px;background:#38bdf8;transition:width .6s ease}
.qq-daily-drow.ideal .qq-daily-dbar div{background:#34d399}
.qq-daily-drow b{text-align:right;font-variant-numeric:tabular-nums;color:#e2e8f0}
.qq-daily-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qq-daily-total{font-size:12px;color:#64748b;font-weight:600}
.qq-daily-share{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;
  border:none;cursor:pointer;font-family:Outfit,sans-serif;font-size:13px;font-weight:800;
  color:#06251f;background:linear-gradient(135deg,#34d399,#2dd4bf);
}
.qq-daily-share:hover{filter:brightness(1.07)}

/* ── the one polite push ask ── */
  position:fixed;bottom:20px;right:20px;z-index:150;width:min(340px,calc(100vw - 32px));
  padding:16px;border-radius:16px;background:#0b1220;
  border:1px solid rgba(251,191,36,.3);box-shadow:0 20px 50px rgba(0,0,0,.5);
  animation:qqAccIn .4s cubic-bezier(.22,1,.36,1) both;
}
.qq-push-yes{border:none;background:#2dd4bf;color:#06251f}
.qq-push-no{background:transparent;border:1px solid rgba(148,163,184,.25);color:#94a3b8}

@media(max-width:640px){
  .qq-daily-card{flex-direction:column;align-items:stretch;text-align:center}
  .qq-daily-actions{grid-template-columns:1fr}
  .qq-daily-drow{grid-template-columns:84px 1fr 44px}
}

/* ── Derin Rapor (İlerleme) ── */
.qq-deep-report{margin:14px 0 0;padding:18px 22px;border-radius:18px;background:rgba(11,18,32,.9);border:1px solid rgba(148,163,184,.16)}
.qq-deep-report.is-open{border-color:rgba(103,232,249,.25)}
.qq-deep-head{display:flex;align-items:center;gap:8px;color:#e2e8f0;font-size:14px;margin-bottom:12px}
.qq-deep-head span{margin-left:auto;font-size:10.5px;font-weight:900;letter-spacing:.1em;color:#e3b341;border:1px solid rgba(227,179,65,.35);border-radius:6px;padding:2px 7px}
.qq-deep-body{display:flex;flex-direction:column;gap:10px}
.qq-deep-item{padding:10px 12px;border-radius:10px;background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.1)}
.qq-deep-item b{display:block;font-size:13px;color:#e2e8f0}
.qq-deep-item span{font-size:11.5px;color:#64748b}
.qq-deep-locked{position:relative;opacity:.85}
.qq-deep-locked .qq-deep-item b{filter:blur(0px)}
.qq-deep-locked .qq-deep-item span{color:#475569}
.qq-deep-report .prog-cta{width:100%;margin-top:12px}

/* ── Atlanan ünite köprüsü ──────────────────────────────────────────────
   "Orta seviye" seçen oyuncu bir üniteyi sessizce geçmiş sayılıyor ve
   Ünite 2'ye düşüyordu — o ünitenin üstüne kurulduğu kelimeleri hiç
   görmeden. Köprü bunu tek ekranda söyler ve geri dönüş kapısını açık
   tutar; asıl iş o kapıda: kendini fazla iyi sanan oyuncu yoksa sekmeyi
   kapatıyor. */
.qq-bridge{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .24s ease}
.qq-bridge.show{opacity:1}
.qq-bridge-scrim{position:absolute;inset:0;background:rgba(3,6,12,.88)}
.qq-bridge-card{
  position:relative;width:min(520px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;
  padding:24px 22px 20px;border-radius:22px;
  border:1px solid rgba(56,189,248,.28);
  background:linear-gradient(180deg,rgba(13,19,31,.98),rgba(8,11,18,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:translateY(10px) scale(.985);transition:transform .28s cubic-bezier(.22,1,.36,1)
}
.qq-bridge.show .qq-bridge-card{transform:none}
.qq-bridge-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.qq-bridge-face{flex:0 0 52px;width:52px;height:52px}
.qq-bridge-face svg{width:100%;height:100%}
.qq-bridge-kicker{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:#38bdf8}
.qq-bridge-title{font-family:Outfit,sans-serif;font-size:20px;font-weight:800;color:#f1f5f9;margin:2px 0 0;line-height:1.25}
.qq-bridge-lead{font-size:13px;line-height:1.6;color:#94a3b8;margin:0 0 16px}
.qq-bridge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.qq-bridge-chip{padding:10px 8px;border-radius:12px;text-align:center;background:rgba(15,23,42,.7);border:1px solid rgba(51,65,85,.8)}
.qq-bridge-chip b{display:block;font-size:11.5px;font-weight:900;letter-spacing:.03em;color:#a5f3fc}
.qq-bridge-chip span{display:block;margin-top:3px;font-size:10.5px;line-height:1.3;color:#64748b}
.qq-bridge-chip-more b{color:#64748b}
.qq-bridge-go{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;border:0;border-radius:15px;cursor:pointer;background:#0e9f6e;color:#f0fdf4;
  font-family:Outfit,sans-serif;font-size:14px;font-weight:900;letter-spacing:.03em
}
.qq-bridge-go:hover{background:#10b981}
.qq-bridge-go:active{transform:scale(.99)}
.qq-bridge-back{
  width:100%;margin-top:10px;padding:10px;border:0;background:transparent;cursor:pointer;
  color:#64748b;font-size:12.5px;font-weight:700;text-decoration:underline
}
.qq-bridge-back:hover{color:#cbd5e1}
@media (max-width:420px){
  .qq-bridge-grid{grid-template-columns:repeat(2,1fr)}
  .qq-bridge-title{font-size:18px}
  .qq-bridge-card{padding:20px 16px 16px}
}

/* ── Marking task: how to answer ──────────────────────────────────────────
   The question was always on screen; the gesture never was. On a phone
   "paint the zone" does not tell you to press and drag, and a learner who
   cannot answer looks identical to one who does not know. */
.aca-howto {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 2px solid rgba(34, 211, 238, .45);
  background: rgba(8, 16, 28, .55);
  border-radius: 0 10px 10px 0;
}
.aca-howto-verb {
  font-size: 12.5px;
  font-weight: 600;
  color: #67e8f9;
  margin-bottom: 7px;
}
.aca-howto-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.aca-howto-steps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #cbd5e1;
}
.aca-howto-n {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(34, 211, 238, .16);
  color: #67e8f9;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aca-howto-note {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #94a3b8;
}

/* ── Concept mastery: the tier a finished lesson can still climb ──────────
   A small ring on the node that is already on the map. Bronze is the default
   state of every completed lesson and is deliberately near-invisible — the
   mark should read as "there is further to go here" only once the player has
   actually gone somewhere, otherwise 72 identical badges are just noise. */
.aca-node-orb { position: relative; }
.aca-node-tier {
  position: absolute;
  inset: -5px;
  /* The orb is a 68px rounded square, not a circle — the ring has to follow
     its silhouette or it reads as a misaligned artefact. */
  border-radius: 22px;
  border: 2px solid transparent;
  pointer-events: none;
}
.aca-tier-bronze  { border-color: rgba(180, 120, 70, .32); }
.aca-tier-silver  { border-color: rgba(203, 213, 225, .78); }
.aca-tier-gold    { border-color: rgba(251, 191, 36, .9); box-shadow: 0 0 9px rgba(251,191,36,.30); }
.aca-tier-diamond {
  border-color: rgba(103, 232, 249, .95);
  box-shadow: 0 0 12px rgba(103, 232, 249, .45), inset 0 0 7px rgba(103, 232, 249, .22);
}

/* ── Curriculum handover ──────────────────────────────────────────────────
   The screen that used to say "finished". It now reports a ceiling nobody
   reaches in a month, so the tier counts are the headline and the point total
   is gone — a number that only goes up says nothing about how far is left. */
.aca-tierbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 12px;
}
.aca-tierpill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid transparent;
  background: rgba(148, 163, 184, .07);
  color: #94a3b8;
}
.aca-tierpill b { font-size: 15px; font-weight: 700; }
.aca-tierpill.t-bronze  { border-color: rgba(180,120,70,.35);  color: #c69a72; }
.aca-tierpill.t-silver  { border-color: rgba(203,213,225,.45); color: #cbd5e1; }
.aca-tierpill.t-gold    { border-color: rgba(251,191,36,.5);   color: #fbbf24; }
.aca-tierpill.t-diamond { border-color: rgba(103,232,249,.55); color: #67e8f9; }
.aca-tier-progress { font-size: 13px; color: #94a3b8; margin-bottom: 14px; }
.aca-tier-progress b { color: #e2e8f0; font-size: 16px; }
.aca-next-goal {
  font-size: 13.5px;
  line-height: 1.55;
  color: #cbd5e1;
  max-width: 420px;
  margin: 0 auto;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(34, 211, 238, .07);
  border: 1px solid rgba(34, 211, 238, .18);
}

/* ── Orion's invitation ───────────────────────────────────────────────────
   A centred card, not the old bottom-corner toast. This is the single most
   valuable yes in the product, and a corner toast reads as an ad. Scrolls
   and centres by the same rule as every other full-bleed layer here. */
.qq-push-invite{
  position:fixed;inset:0;z-index:9995;
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px 16px max(20px,env(safe-area-inset-bottom,0px));
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  font-family:Sora,Manrope,system-ui,sans-serif;
}
.qq-push-invite-scrim{position:absolute;inset:0;background:rgba(3,6,12,.86);backdrop-filter:blur(4px)}
.qq-push-invite-card{
  position:relative;z-index:1;margin-block:auto;
  width:min(420px,100%);
  padding:20px 20px 18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(14,20,32,.99),rgba(9,13,22,.99));
  border:1px solid rgba(103,232,249,.20);
  box-shadow:0 24px 64px rgba(0,0,0,.55);
  animation:qqPushIn .34s cubic-bezier(.22,1,.36,1) both;
}
@keyframes qqPushIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.qq-push-invite-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:13px}
.qq-push-invite-face{
  flex:none;width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(103,232,249,.07);border:1px solid rgba(103,232,249,.20);
}
.qq-push-invite-face svg{width:40px;height:40px;display:block}
.qq-push-invite-headtext{min-width:0}
.qq-push-invite-who{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;
  color:rgba(103,232,249,.78);margin-bottom:4px;
}
.qq-push-invite-title{
  margin:0;font-family:Outfit,Sora,sans-serif;
  font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.28;color:#f1f5f9;
}
.qq-push-invite-lead{
  margin:0 0 13px;font-size:13.5px;line-height:1.6;color:#94a3b8;
}
.qq-push-invite-lead b{color:#e2e8f0;font-weight:700}

/* What we promise, in the shape of a promise: short, checkable, and small
   enough that it does not look like terms. */
.qq-push-promise{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:6px}
.qq-push-promise li{
  position:relative;padding-left:20px;
  font-size:12.5px;line-height:1.45;color:#cbd5e1;
}
.qq-push-promise li::before{
  content:"";position:absolute;left:4px;top:6px;
  width:7px;height:7px;border-radius:2px;
  background:rgba(103,232,249,.55);
}
.qq-push-steps{
  margin:0 0 15px;padding:0 0 0 20px;display:grid;gap:7px;
  font-size:12.5px;line-height:1.5;color:#cbd5e1;
}
.qq-push-steps li{padding-left:2px}
.qq-push-steps b{color:#f1f5f9;font-weight:700}

.qq-push-invite-btns{display:flex;gap:9px;flex-wrap:wrap}
.qq-push-invite-btns button{
  flex:1;min-width:120px;padding:12px 14px;border-radius:11px;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;transition:filter .16s ease,transform .14s ease;
}
.qq-push-invite-btns .qq-push-yes{
  color:#04121a;border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg,#7fe9f7,#3fcadf);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 20px rgba(20,160,190,.24);
}
.qq-push-invite-btns .qq-push-yes:hover{filter:brightness(1.05);transform:translateY(-1px)}
.qq-push-invite-btns .qq-push-no{
  flex:0 1 auto;min-width:96px;
  color:#94a3b8;background:transparent;border:1px solid rgba(148,163,184,.22);
}
.qq-push-invite-btns .qq-push-no:hover{color:#cbd5e1;border-color:rgba(148,163,184,.38)}

/* ── Pointer to the native permission dialog ──────────────────────────────
   The browser's own prompt anchors under the address bar and we cannot draw
   in it. So: point, name the exact word on the button, and disappear the
   moment it is answered. Never styled to look like the browser's own UI. */
.qq-push-invite ~ .qq-perm-point,.qq-perm-point{
  position:fixed;z-index:9996;
  top:max(10px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  max-width:min(400px,calc(100vw - 24px));
  padding:10px 15px;border-radius:12px;
  font-family:Sora,system-ui,sans-serif;font-size:12.5px;line-height:1.35;
  color:#e2e8f0;background:rgba(10,16,26,.97);
  border:1px solid rgba(103,232,249,.32);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  animation:qqPermIn .3s cubic-bezier(.22,1,.36,1) both;
  pointer-events:none;
}
@keyframes qqPermIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%)}}
.qq-perm-point-arrow{
  flex:none;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:9px solid #67e8f9;
  animation:qqPermBob 1.1s ease-in-out infinite;
}
@keyframes qqPermBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.qq-perm-point-text b{color:#67e8f9;font-weight:700}

@media (prefers-reduced-motion: reduce){
  .qq-push-invite-card,.qq-perm-point{animation:none}
  .qq-perm-point-arrow{animation:none}
}

/* ── Lesson-complete → gate bridge ──────────────────────────────────────
   Primary action after a unit's last lesson: the gate, not the map. */
.aca-lc-gate-note{
  max-width:380px;margin:16px auto 12px;
  font-size:12.5px;line-height:1.55;color:#94a3b8;text-align:center;
}
#aca-lc-gate{
  background:linear-gradient(135deg,#34d399,#22c7c7)!important;
  color:#06151a!important;font-weight:800;
  box-shadow:0 8px 22px rgba(34,199,199,.22);
}
.aca-lc-map-quiet{
  background:transparent!important;color:#94a3b8!important;
  border:1px solid rgba(148,163,184,.22)!important;box-shadow:none!important;
}

/* Delete dialog's Google path — quiet, under the fields */
.qq-del-google{display:grid;gap:8px;margin:4px 0 10px;padding-top:10px;border-top:1px dashed rgba(148,163,184,.16)}
.qq-del-google-note{font-size:12px;line-height:1.5;color:#94a3b8}

/* Re-tap on an open teach card: visible "already done" pulse instead of the
   silence that read as broken. */
@keyframes acaChipAgain{0%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}100%{box-shadow:0 0 0 12px rgba(52,211,153,0)}}
.aca-teach-chip.aca-chip-again{animation:acaChipAgain .5s ease-out}
@media (prefers-reduced-motion: reduce){.aca-teach-chip.aca-chip-again{animation:none}}

/* Style badge — the chosen trading rhythm, worn quietly on the home header */
.qq-style-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:4px 11px;border-radius:999px;
  font-family:Sora,sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#67e8f9;background:rgba(103,232,249,.08);border:1px solid rgba(103,232,249,.22);
}
.qq-style-badge svg{width:12px;height:12px}

/* ── Günlük Seans ────────────────────────────────────────────────────────
   A day, as three checkable boxes. Each is a button that goes there. */
.aca-seans{display:block;padding:13px 15px}
.aca-seans-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.aca-seans-kicker{
  font-family:Sora,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;color:#5b6b85;
}
.aca-seans-streak{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-family:Sora,sans-serif;font-size:12px;font-weight:700;color:#fb923c;
}
.aca-seans-tasks{display:flex;gap:8px;flex-wrap:wrap}
.aca-seans-task{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:11px;cursor:pointer;
  font-family:Sora,sans-serif;font-size:12.5px;font-weight:600;color:#cbd5e1;
  background:rgba(148,163,184,.06);border:1px solid rgba(148,163,184,.16);
  transition:border-color .16s ease,background .16s ease,transform .14s ease;
}
.aca-seans-task:hover{border-color:rgba(103,232,249,.35);transform:translateY(-1px)}
.aca-seans-check{
  width:16px;height:16px;border-radius:6px;flex:none;
  border:1.5px solid rgba(148,163,184,.4);
  display:grid;place-items:center;font-size:11px;color:#06151a;
  transition:background .2s ease,border-color .2s ease;
}
.aca-seans-task.is-done{color:#6ee7b7;background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.28)}
.aca-seans-task.is-done .aca-seans-check{
  background:linear-gradient(135deg,#34d399,#22c7c7);border-color:transparent;
}
.aca-seans-task.is-done .aca-seans-check::before{content:"✓";font-weight:900}
.aca-seans-done{
  margin-top:10px;font-size:12.5px;font-weight:600;color:#6ee7b7;
}

/* "Başka türlü anlat" — the second explanation, one tap away */
.aca-qv-again{
  display:inline-block;margin-top:8px;padding:6px 12px;border-radius:9px;cursor:pointer;
  font-family:Sora,sans-serif;font-size:11.5px;font-weight:700;
  color:#67e8f9;background:rgba(103,232,249,.08);border:1px solid rgba(103,232,249,.25);
}
.aca-qv-again:hover{background:rgba(103,232,249,.14)}

/* Guide's own praise line on the lesson-complete screen */
.aca-lc-guide-praise{
  display:flex;align-items:center;gap:10px;max-width:400px;margin:10px auto 4px;
  padding:10px 14px;border-radius:12px;text-align:left;
  background:rgba(103,232,249,.05);border:1px solid rgba(103,232,249,.14);
}
.aca-lc-guide-praise svg{width:34px;height:34px;flex:none}
.aca-lc-guide-praise span{font-size:12.5px;line-height:1.5;color:#cbd5e1;font-weight:500}

/* FAZ 2 · live_show tahmin kapisi — soru maskot satirinin altinda belirir */
.aca-live-predict{margin:10px 0 4px;padding:12px 14px;border-radius:12px;
  background:rgba(8,16,28,.72);border:1px solid rgba(56,189,248,.22);
  animation:acaPredictIn .32s ease}
@keyframes acaPredictIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.aca-live-predict .aca-mastery-q{margin-bottom:10px}
@media (prefers-reduced-motion: reduce){.aca-live-predict{animation:none}}

/* FAZ 5 · sonraki can geri sayimi */
.aca-hearts-eta{font-size:10.5px;color:#7d8ea8;margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Saha düğümü — yolun üstündeki Arena adımı ──────────────────────────────
   Ders ile aynı yolda durur ama aynı şey olmadığı ilk bakışta anlaşılsın:
   ders yuvarlak ve sakin, Saha köşeli ve nişanlı. İkisi de aynı çizgiye
   dizilir — çünkü artık aynı sistemin iki adımı. */
.aca-node--saha .aca-node-orb{
  border-radius:14px;
  background:rgba(56,189,248,.07);
  border:1px solid rgba(56,189,248,.28);
}
.aca-node--saha.current .aca-node-orb{
  background:rgba(56,189,248,.14);
  border-color:rgba(125,211,252,.55);
  box-shadow:0 0 0 4px rgba(56,189,248,.10);
}
.aca-node--saha.done .aca-node-orb{
  background:rgba(52,211,153,.09);
  border-color:rgba(52,211,153,.30);
}
.aca-node--saha .aca-node-orb i{ color:#7dd3fc; }
.aca-node--saha.done .aca-node-orb i{ color:#34d399; }
.aca-node--saha .aca-node-label{
  font-size:12.5px; letter-spacing:.01em; color:#bcd3e6;
}
.aca-node--saha .aca-node-status{ font-size:11px; }

/* Yola dönüş düğmesi — Saha bitince tek çıkış */
.rp-saha-back{ margin-top:10px; }

/* ── Serbest saha — yolun dışındaki ikincil kapı ────────────────────────── */
.aca-free-saha{
  margin:26px auto 8px; max-width:520px; padding:18px 20px;
  border:1px solid rgba(148,163,184,.16); border-radius:16px;
  background:rgba(148,163,184,.04); text-align:center;
}
.aca-free-saha-head{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#7d8ea8; margin-bottom:6px;
}
.aca-free-saha-desc{ font-size:13.5px; color:#94a3b8; margin:0 0 14px; }
.aca-free-saha-btn{
  padding:10px 20px; border-radius:12px; font-size:13.5px; font-weight:600;
  color:#cbd5e1; background:rgba(148,163,184,.10);
  border:1px solid rgba(148,163,184,.22); cursor:pointer;
}
.aca-free-saha-btn:hover{ background:rgba(148,163,184,.16); color:#e2e8f0; }

/* ── Kutlama anı ────────────────────────────────────────────────────────────
   Nadir olan şey ekranı durdurur. Madalya yaylanarak gelir, arkasından ışık
   demetleri döner, üstünden bir parlaklık geçer — üç hareket, hepsi 700ms
   içinde biter ve sonra ekran sakinleşir. Sürekli dönen hiçbir şey yok:
   telefonda arkada dönen bir animasyon, kapatılana kadar pil yakar. */
.qq-moment{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .24s ease;
}
.qq-moment.is-in{ opacity:1; }
.qq-moment-veil{ position:absolute; inset:0; background:rgba(2,5,10,.82); }
.qq-moment-card{
  position:relative; width:100%; max-width:340px; padding:34px 26px 26px;
  border-radius:26px; text-align:center;
  background:linear-gradient(180deg,#101a2b 0%,#0a121f 100%);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  transform:translateY(14px) scale(.94);
  transition:transform .34s cubic-bezier(.2,.9,.25,1.15);
}
.qq-moment.is-in .qq-moment-card{ transform:translateY(0) scale(1); }

/* Işık demetleri — bir kez döner ve durur */
.qq-moment-rays{
  position:absolute; top:-40px; left:50%; width:280px; height:280px;
  margin-left:-140px; pointer-events:none; opacity:0;
  background:conic-gradient(from 0deg,
    rgba(227,179,65,.22) 0deg 8deg, transparent 8deg 30deg,
    rgba(227,179,65,.16) 30deg 36deg, transparent 36deg 60deg,
    rgba(227,179,65,.22) 60deg 68deg, transparent 68deg 90deg,
    rgba(227,179,65,.16) 90deg 96deg, transparent 96deg 120deg,
    rgba(227,179,65,.22) 120deg 128deg, transparent 128deg 180deg,
    rgba(227,179,65,.16) 180deg 186deg, transparent 186deg 240deg,
    rgba(227,179,65,.22) 240deg 248deg, transparent 248deg 300deg,
    rgba(227,179,65,.16) 300deg 306deg, transparent 306deg 360deg);
  mask-image:radial-gradient(circle,#000 30%,transparent 68%);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);
}
.qq-moment.is-in .qq-moment-rays{ animation:qqMomentRays 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes qqMomentRays{
  0%{ opacity:0; transform:rotate(-24deg) scale(.6); }
  45%{ opacity:1; }
  100%{ opacity:.55; transform:rotate(16deg) scale(1); }
}

/* Madalya */
.qq-moment-medal{
  position:relative; width:96px; height:96px; margin:0 auto 16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #fbe2a0 0%, #e3b341 45%, #a97c1b 100%);
  box-shadow:0 10px 30px -8px rgba(227,179,65,.55), inset 0 -6px 14px rgba(0,0,0,.28);
  transform:scale(.3) rotate(-18deg); opacity:0;
}
.qq-moment.is-in .qq-moment-medal{ animation:qqMedalIn .62s cubic-bezier(.18,1.1,.3,1.25) .08s forwards; }
@keyframes qqMedalIn{
  0%{ transform:scale(.3) rotate(-18deg); opacity:0; }
  60%{ transform:scale(1.14) rotate(4deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.qq-moment-glyph{ font-size:44px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
/* Madalyanın üstünden bir kez geçen parlaklık */
.qq-moment-shine{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none;
}
.qq-moment-shine::after{
  content:""; position:absolute; top:-60%; left:-120%; width:60%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(18deg);
}
.qq-moment.is-in .qq-moment-shine::after{ animation:qqShine .85s ease-out .5s 1; }
@keyframes qqShine{ from{ left:-120%; } to{ left:150%; } }

.qq-moment-kicker{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#e3b341; font-weight:700; margin-bottom:6px;
}
.qq-moment-title{
  font-size:21px; font-weight:800; color:#f1f5f9; margin:0 0 8px; line-height:1.25;
}
.qq-moment-line{ font-size:14px; color:#94a3b8; margin:0 0 20px; line-height:1.6; }
.qq-moment-btn{
  width:100%; padding:13px; border-radius:14px; border:0; cursor:pointer;
  font-size:14.5px; font-weight:800; letter-spacing:.02em; color:#052018;
  background:linear-gradient(180deg,#4bdb9a,#2fb87c);
  box-shadow:0 6px 0 #1f7c53, 0 12px 24px -10px rgba(75,219,154,.6);
}
.qq-moment-btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #1f7c53; }

/* Hedef ve ünite anları aynı iskeleti farklı renkle kullanır */
.qq-moment--goal .qq-moment-medal{
  background:radial-gradient(circle at 32% 28%, #a7f3d0 0%, #4bdb9a 45%, #17805a 100%);
  box-shadow:0 10px 30px -8px rgba(75,219,154,.55), inset 0 -6px 14px rgba(0,0,0,.28);
}
.qq-moment--goal .qq-moment-kicker{ color:#4bdb9a; }
.qq-moment--unit .qq-moment-medal{
  background:radial-gradient(circle at 32% 28%, #bae6fd 0%, #6cc7f5 45%, #1b6f9c 100%);
  box-shadow:0 10px 30px -8px rgba(108,199,245,.55), inset 0 -6px 14px rgba(0,0,0,.28);
}
.qq-moment--unit .qq-moment-kicker{ color:#6cc7f5; }

/* Altın soru artık bildirim değil: kazanılan puanın kendisi altın uçuyor. */
.aca-xp-fly.is-golden{
  color:#e3b341; text-shadow:0 0 18px rgba(227,179,65,.55);
}
.aca-xp-fly .aca-xp-mult{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px;
  font-size:11.5px; font-weight:800; vertical-align:2px;
  background:rgba(227,179,65,.18); border:1px solid rgba(227,179,65,.45);
}

@media (prefers-reduced-motion: reduce){
  .qq-moment-card,.qq-moment-medal,.qq-moment-rays,.qq-moment-shine::after{
    animation:none !important; transition:none !important; transform:none !important; opacity:1 !important;
  }
}
/* Zayıf cihazda ışık demetleri (conic-gradient + mask) pahalı: madalya kalır. */
.perf-weak .qq-moment-rays{ display:none; }

/* ── "Saha açıldı" — Ünite 1 sonunda, bir kez ───────────────────────────── */
.aca-saha-open{
  margin:20px auto 8px; max-width:520px; padding:22px 24px;
  border:1px solid rgba(56,189,248,.28); border-radius:18px; text-align:center;
  background:linear-gradient(180deg, rgba(56,189,248,.10), rgba(56,189,248,.03));
}
.aca-saha-open-ic{
  width:44px; height:44px; margin:0 auto 12px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(56,189,248,.16); border:1px solid rgba(125,211,252,.42); color:#7dd3fc;
}
.aca-saha-open-t{ font-size:17px; font-weight:800; color:#e0f2fe; margin-bottom:8px; }
.aca-saha-open-d{ font-size:14px; line-height:1.65; color:#a8c5da; margin:0 0 8px; }
.aca-saha-open-d b{ color:#7dd3fc; }
.aca-saha-open-n{ font-size:12.5px; color:#7d8ea8; margin:0; }


/* ── Güncelleme şeridi (27 Ağu 2026) ────────────────────────────────
   Haritanın en üstünde, kapatılınca sürüm damgasıyla bir daha çıkmaz. */
.qq-duyuru{ position:relative; width:100%; max-width:520px;
  margin:0 auto 22px; padding:18px 20px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(34,214,155,.10), rgba(34,214,155,.035));
  border:1px solid rgba(34,214,155,.28);
  display:flex; flex-direction:column; gap:8px; }
.qq-duyuru-x{ position:absolute; top:10px; right:12px; width:28px; height:28px;
  background:none; border:0; color:rgba(226,232,240,.45); font-size:20px;
  line-height:1; cursor:pointer; border-radius:8px; }
.qq-duyuru-x:hover{ color:#e2e8f0; background:rgba(255,255,255,.06); }
.qq-duyuru-kick{ font-size:10.5px; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:#22d69b; }
.qq-duyuru-title{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.015em;
  color:#f1f5f9; }
.qq-duyuru-list{ margin:2px 0 0; padding-left:18px; display:flex;
  flex-direction:column; gap:6px; }
.qq-duyuru-list li{ font-size:13.5px; line-height:1.5; color:#9fb0bd; }
.qq-duyuru-list b{ color:#e2e8f0; font-weight:700; }
.qq-duyuru-cta{ align-self:flex-start; margin-top:6px; padding:9px 16px;
  border:0; border-radius:11px; background:#22d69b; color:#06231a;
  font-size:13.5px; font-weight:800; cursor:pointer; }
.qq-duyuru-cta:hover{ background:#3fe0ac; }
.qq-duyuru-cta:focus-visible{ outline:2px solid #7dd3fc; outline-offset:2px; }

/* ══ ÜCRETSİZ BÖLÜMÜN SINIR TAŞI (27 Ağu 2026) ═════════════════════════
   Paywall'ı gören 95 kişinin %70'i hiçbir üniteyi bitirmemişti: Pro'yla
   ilk tanışmaları bir duvardı, üstelik arkasında ne olduğunu bilmeden.
   Bu taş yolun üstünde duruyor ama yolu KESMİYOR — aşağısı görünmeye
   devam ediyor. İşi satmak değil, sınırı önceden göstermek. */
.aca-pro-sinir{ position:relative; width:100%; max-width:520px;
  margin:6px auto 18px; display:flex; flex-direction:column; align-items:center; }
.aca-pro-sinir-cizgi{ width:100%; height:1px; margin-bottom:14px;
  background:linear-gradient(90deg, transparent, rgba(250,204,21,.45), transparent); }
.aca-pro-sinir-kart{ width:100%; padding:16px 18px 14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(250,204,21,.09), rgba(250,204,21,.03));
  border:1px solid rgba(250,204,21,.26);
  display:flex; flex-direction:column; gap:7px; }
.aca-pro-sinir-kick{ font-size:10.5px; font-weight:800; letter-spacing:.14em;
  color:#facc15; }
.aca-pro-sinir-t{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.015em;
  color:#f1f5f9; line-height:1.28; text-wrap:balance; }
.aca-pro-sinir-p{ margin:0; font-size:13.5px; line-height:1.55; color:#9fb0bd; }
.aca-pro-sinir-alt{ display:flex; align-items:center; gap:12px; margin-top:4px;
  flex-wrap:wrap; }
.aca-pro-sinir-btn{ padding:10px 16px; border:0; border-radius:11px;
  background:#facc15; color:#231a02; font-size:13.5px; font-weight:800;
  cursor:pointer; }
.aca-pro-sinir-btn:hover{ background:#fde047; }
.aca-pro-sinir-fiyat{ font-size:13px; font-weight:700; color:rgba(226,232,240,.6);
  font-variant-numeric:tabular-nums; }
@media (max-width: 520px){
  .aca-pro-sinir-kart{ padding:14px 15px 13px; }
  .aca-pro-sinir-t{ font-size:16px; }
  .aca-pro-sinir-btn{ flex:1; }
}