/* QuizHub bright homepage (qh3) — scoped under .qh3-page */
.qh3-page {
  --qh3-bg:#f4f7fb;
  --qh3-bg-2:#eef3f9;
  --qh3-surface:#ffffff;
  --qh3-border:#dde5f0;
  --qh3-text:#122033;
  --qh3-text-2:#4d5d73;
  --qh3-text-3:#8a97ab;
  --qh3-blue:#2f6df6;
  --qh3-blue-dark:#1f54d0;
  --qh3-blue-soft:#e8f0ff;
  --qh3-green:#149a55;
  --qh3-green-soft:#e5f8ee;
  --qh3-orange:#e8892c;
  --qh3-orange-soft:#fff1e3;
  --qh3-amber:#b8860b;
  --qh3-radius:16px;
  --qh3-shadow:0 1px 2px rgba(18,32,51,0.04), 0 14px 36px -18px rgba(18,32,51,0.18);
  --qh3-shadow-soft:0 1px 2px rgba(18,32,51,0.03), 0 8px 20px -14px rgba(18,32,51,0.12);
  color: var(--qh3-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  background:
    radial-gradient(980px 420px at 8% -8%, #dce9ff 0%, transparent 55%),
    radial-gradient(780px 360px at 100% 0%, #dff7ef 0%, transparent 48%),
    linear-gradient(180deg, #f8fbff 0%, var(--qh3-bg) 28%, var(--qh3-bg-2) 100%);
}
.qh3-page h1, .qh3-page h2, .qh3-page h3 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -.02em;
}
.qh3-page p { margin: 0; }
.qh3-page a { color: inherit; text-decoration: none; }
.qh3-page *, .qh3-page *::before, .qh3-page *::after { box-sizing: border-box; }

  
  
  
.qh3-page .qh3-wrap {max-width:1180px;margin:0 auto;padding:0 32px;}
  
  
  
  
  
  

  /* hero */
.qh3-page .hero {padding:52px 0 28px;position:relative;overflow:hidden;}
.qh3-page .hero-grid {display:grid;grid-template-columns:1.12fr 0.88fr;gap:36px;align-items:start;position:relative;z-index:1;}
.qh3-page .hero h1 {font-size:clamp(2.2rem,4.4vw,3.15rem);font-weight:800;line-height:1.12;margin-bottom:14px;color:#fff;}
.qh3-page .hero h1 .accent {color:#bfdbfe;font-style:italic;} /* blue-200 accent on blue hero */
.qh3-page .hero .subhead {font-size:16px;color:#dbeafe;line-height:1.6;max-width:480px;margin-bottom:24px;} /* blue-100 */
.qh3-page .search-row {display:flex;gap:10px;max-width:500px;margin-bottom:14px;}
.qh3-page .search-input {flex:1;position:relative;}
.qh3-page .search-input i {position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--qh3-text-3);font-size:14px;}
.qh3-page .search-input input {
    width:100%;background:var(--qh3-surface);border:1px solid var(--qh3-border);border-radius:12px;
    padding:13px 16px 13px 40px;font-size:14px;font-family:inherit;color:var(--qh3-text);
    box-shadow:var(--qh3-shadow-soft);
  }
.qh3-page .search-row .qh3-btn-primary {padding:0 24px;border-radius:12px;}
.qh3-page .dyk-row {max-width:500px;}
.qh3-page .dyk-pill {
    display:inline-flex;align-items:stretch;flex-wrap:nowrap;
    max-width:100%;padding:0;overflow:hidden;border-radius:999px;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  }
.qh3-page .dyk-badge {
    display:inline-flex;align-items:center;flex:0 0 auto;
    background:rgba(34,211,238,.4);color:#ecfeff;font-weight:800;
    font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
    padding:8px 16px 8px 16px;
    font-family:'DM Sans',system-ui,sans-serif;
  }
.qh3-page .dyk-text {
    color:#e2e8f0;font-size:13.5px;line-height:1.45;font-weight:500;
    padding:8px 14px 8px 12px;min-width:0;flex:1 1 auto;
  }
.qh3-page .dyk-text p {display:inline;margin:0;}
.qh3-page .dyk-text strong, .qh3-page .dyk-text b {color:#fff;font-weight:700;}
.qh3-page .pill {
    background:rgba(255,255,255,.85);border:1px solid var(--qh3-border);color:var(--qh3-blue-dark);
    padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  }

  /* mastery / dashboard preview in hero
     Note: global app.css .hero { color:#fff } would otherwise wash out
     titles inside this light card (Goal / Focus / streak chips). */
.qh3-page .mastery-card {
    background:var(--qh3-surface);border:1px solid var(--qh3-border);border-radius:18px;
    box-shadow:var(--qh3-shadow);padding:22px 22px 18px;position:relative;
    color:var(--qh3-text);
  }
.qh3-page .mastery-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;}
.qh3-page .mastery-head h3 {font-size:15px;font-weight:700;font-family:'DM Sans',sans-serif;color:var(--qh3-text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.qh3-page .mastery-head a {font-size:12.5px;color:var(--qh3-blue);font-weight:700;font-family:'DM Sans',sans-serif;flex-shrink:0;}
.qh3-page .mastery-cert {
    display:inline-block;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;color:var(--qh3-blue);
    background:var(--qh3-blue-soft);padding:3px 7px;border-radius:999px;line-height:1.2;
  }
.qh3-page .mastery-body {display:flex;align-items:center;gap:18px;}
.qh3-page .mastery-ring {
    width:112px;height:112px;border-radius:50%;
    background:conic-gradient(var(--qh3-blue) 0% 78%, #e7edf6 78% 100%);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;
  }
.qh3-page .mastery-ring::before {content:"";position:absolute;inset:11px;background:var(--qh3-surface);border-radius:50%;}
.qh3-page .mastery-ring-label {position:relative;text-align:center;}
.qh3-page .mastery-ring-label b {font-size:22px;font-weight:800;display:block;font-family:'DM Sans',sans-serif;color:var(--qh3-text);}
.qh3-page .mastery-ring-label span {font-size:9.5px;color:var(--qh3-text-3);display:block;line-height:1.2;max-width:64px;}
.qh3-page .domain-list {flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.qh3-page .domain-row {display:grid;grid-template-columns:minmax(0,4.6em) 1fr 2rem;align-items:center;gap:8px;}
.qh3-page .domain-row span:first-child, .qh3-page .domain-row span:last-child {font-size:11px;color:var(--qh3-text-2);}
.qh3-page .domain-row span:first-child {
    font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
.qh3-page .domain-row span:last-child {text-align:right;font-variant-numeric:tabular-nums;}
.qh3-page .domain-row.is-focus span:first-child,
.qh3-page .domain-row.is-focus span:last-child {color:var(--qh3-orange);font-weight:700;}
.qh3-page .bar-track {height:5px;background:#e7edf6;border-radius:99px;overflow:hidden;}
.qh3-page .bar-fill {height:100%;border-radius:99px;}
.qh3-page .dash-strip {
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;padding-top:14px;
    border-top:1px solid var(--qh3-border);
  }
.qh3-page .dash-chip {
    background:var(--qh3-bg);border:1px solid var(--qh3-border);border-radius:10px;padding:10px 10px 9px;
    min-width:0;
  }
.qh3-page .dash-chip b {
    display:flex;align-items:center;gap:5px;font-size:12.5px;font-family:'DM Sans',sans-serif;
    margin-bottom:3px;color:var(--qh3-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
.qh3-page .dash-chip b i {font-size:10px;width:12px;text-align:center;flex-shrink:0;}
.qh3-page .dash-chip span {font-size:10.5px;color:var(--qh3-text-3);line-height:1.3;display:block;}
.qh3-page .dash-chip--goal {background:var(--qh3-green-soft);border-color:#cfe9db;}
.qh3-page .dash-chip--goal b i {color:var(--qh3-green);}
.qh3-page .dash-chip--focus {background:var(--qh3-orange-soft);border-color:#f3ddc4;}
.qh3-page .dash-chip--focus b i {color:var(--qh3-orange);}
.qh3-page .dash-chip--streak {background:#fff8eb;border-color:#f0e0bf;}
.qh3-page .dash-chip--streak b i {color:#d97706;}
.qh3-page .hero-bell {
    position:absolute;right:14px;bottom:-34px;width:44px;height:44px;border-radius:12px;
    background:var(--qh3-blue);display:flex;align-items:center;justify-content:center;color:#fff;
    font-size:16px;box-shadow:0 10px 22px -6px rgba(47,109,246,.55);
  }

  /* stats */
.qh3-page .stats-bar {
    background:rgba(255,255,255,.9);border:1px solid var(--qh3-border);border-radius:16px;
    box-shadow:var(--qh3-shadow-soft);padding:22px 10px;display:flex;align-items:center;
    justify-content:space-around;margin-bottom:48px;
  }
.qh3-page .stat-item {display:flex;align-items:center;gap:12px;}
.qh3-page .stat-icon {
    width:38px;height:38px;border-radius:10px;background:var(--qh3-blue-soft);color:var(--qh3-blue);
    display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
  }
.qh3-page .stat-item b {font-size:20px;font-weight:800;display:block;line-height:1.1;font-family:'DM Sans',sans-serif;}
.qh3-page .stat-item span {font-size:12px;color:var(--qh3-text-3);}
.qh3-page .stat-divider {width:1px;height:34px;background:var(--qh3-border);}

  /* sections */
.qh3-page .section-row {display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px;}
.qh3-page .section-row .eyebrow {
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--qh3-blue);margin-bottom:6px;font-family:'DM Sans',sans-serif;
  }
.qh3-page .section-row h2 {font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:700;}
.qh3-page .section-row .view-all {font-size:13.5px;font-weight:700;color:var(--qh3-blue);white-space:nowrap;padding-bottom:4px;}
.qh3-page section {padding-bottom:48px;}

  /* popular exams (was new & noteworthy data) */
.qh3-page .exam-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.qh3-page .exam-card {
    background:var(--qh3-surface);border:1px solid var(--qh3-border);border-radius:15px;
    padding:20px 20px 16px;box-shadow:var(--qh3-shadow-soft);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
.qh3-page .exam-card:hover {
    transform:translateY(-2px);
    border-color:#c9d6ea;
    box-shadow:0 16px 34px -20px rgba(18,32,51,.28);
  }
.qh3-page .exam-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;}
.qh3-page .exam-meta-line {font-size:12px;font-weight:700;color:var(--qh3-text-3);letter-spacing:.02em;}
.qh3-page .badge {font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;}
.qh3-page .badge-popular {background:var(--qh3-green-soft);color:var(--qh3-green);}
.qh3-page .badge-new {background:#efe9ff;color:#6a43d6;}
.qh3-page .exam-card h3 {
    font-size:17px;font-weight:700;line-height:1.3;margin-bottom:10px;
    font-family:'DM Sans',sans-serif;letter-spacing:-.01em;
  }
.qh3-page .stars {display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.qh3-page .stars .fa-star, .qh3-page .stars .fa-star-half-stroke {color:#f0b400;font-size:12px;}
.qh3-page .stars span {font-size:12px;color:var(--qh3-text-3);}
.qh3-page .exam-stats {font-size:12.5px;color:var(--qh3-text-2);margin-bottom:14px;}
.qh3-page .exam-cta {
    display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--qh3-blue);
    border-top:1px solid var(--qh3-border);padding-top:13px;
  }

  /* Miniaturized dark sample-question preview (Exam Simulators header) */
.qh3-page .sample-mini {
    display:block;width:100%;margin:0 0 16px;padding:0;text-align:left;
    height:232px;border-radius:14px;overflow:hidden;cursor:pointer;
    background:#0b1220;border:1px solid #1e293b;box-shadow:var(--qh3-shadow-soft);
    position:relative;font:inherit;color:inherit;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
.qh3-page .sample-mini:hover {
    border-color:#475569;box-shadow:0 16px 34px -20px rgba(18,32,51,.4);
  }
.qh3-page .sample-mini:focus-visible {outline:2px solid var(--qh3-blue);outline-offset:2px;}
.qh3-page .sample-mini-bar {
    display:flex;align-items:center;gap:8px;padding:9px 12px;
    background:#151c27;border-bottom:1px solid #1e293b;
  }
.qh3-page .sample-mini-dots {display:flex;gap:5px;flex-shrink:0;}
.qh3-page .sample-mini-dots span {width:7px;height:7px;border-radius:50%;background:#3a4557;}
.qh3-page .sample-mini-meta {
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:11px;font-weight:600;color:#94a3b8;
  }
.qh3-page .sample-mini-engine {
    flex-shrink:0;font-size:10px;font-weight:700;color:#17a398;
    border:1px solid rgba(23,163,152,.35);padding:2px 7px;border-radius:999px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
.qh3-page .sample-mini-body {padding:12px 14px 14px;}
.qh3-page .sample-mini-label {
    margin:0 0 6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:#17a398;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
.qh3-page .sample-mini-stem {
    margin:0 0 10px;font-size:12px;font-weight:500;line-height:1.4;color:#e2e8f0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
.qh3-page .sample-mini-options {display:grid;gap:6px;}
.qh3-page .sample-mini-opt {
    font-size:11px;line-height:1.3;padding:7px 10px;border-radius:8px;
    border:1px solid #1e293b;background:rgba(15,23,42,.8);color:#94a3b8;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
.qh3-page .sample-mini-opt.is-correct {
    border-color:rgba(16,185,129,.45);background:rgba(6,78,59,.28);color:#6ee7b7;
  }
.qh3-page .sample-mini-cta {
    position:absolute;right:12px;bottom:12px;z-index:2;
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 11px;border-radius:9px;background:var(--qh3-blue);color:#fff;
    font-size:11.5px;font-weight:700;box-shadow:0 8px 18px -8px rgba(47,109,246,.7);
    transition:background .15s ease, transform .15s ease;
  }
.qh3-page .sample-mini:hover .sample-mini-cta {background:var(--qh3-blue-dark);transform:translateY(-1px);}
.qh3-page .sample-mini-fade {
    position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;
    background:linear-gradient(to top, rgba(11,18,32,.95), rgba(11,18,32,0));
  }

  /* Sample question console (lives in modal; always in DOM for SEO) */
.qh3-page .sample-console {
    background:#1b2330;border:1px solid #2a3445;border-radius:16px;overflow:hidden;
    box-shadow:0 28px 56px -22px rgba(18,32,51,.55);
  }
.qh3-page .sample-console-bar {
    display:flex;align-items:center;gap:8px;padding:12px 16px;
    background:#151c27;border-bottom:1px solid #2a3445;
  }
.qh3-page .sample-dot {width:9px;height:9px;border-radius:50%;background:#3a4557;}
.qh3-page .sample-console-title {
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:10.5px;color:#8a93a3;margin-left:6px;
  }
.qh3-page .sample-live {
    margin-left:auto;display:flex;align-items:center;gap:6px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;color:#7fd8cb;
  }
.qh3-page .sample-blip {
    width:6px;height:6px;border-radius:50%;background:#17a398;
    animation:sample-blip 1.6s infinite;
  }
  @keyframes sample-blip{0%,100%{opacity:1}50%{opacity:.25}}
.qh3-page .sample-console-body {padding:28px 32px;position:relative;}
.qh3-page .sample-q-label {
    margin:0 0 7px;color:#17a398;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  }
.qh3-page .sample-q-scenario {margin:0 0 8px;color:#c3c9d3;font-size:13px;line-height:1.5;}
.qh3-page .sample-q-scenario--question {margin-bottom:12px;}
.qh3-page .sample-q-scenario--question strong {color:#e7eaef;}
.qh3-page .sample-console code {
    color:#ddefe2;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  }
.qh3-page .sample-q-options {display:grid;gap:8px;margin:14px 0 18px;}
.qh3-page .sample-q-option {
    display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;
    border:1px solid #2a3445;font-size:13px;line-height:1.45;color:#c3c9d3;
  }
.qh3-page .sample-letter {
    width:20px;height:20px;flex:0 0 20px;border-radius:5px;background:#232c3a;
    display:flex;align-items:center;justify-content:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;color:#8a93a3;margin-top:1px;
  }
.qh3-page .sample-q-option.is-correct {
    border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.08);color:#ddefe2;
  }
.qh3-page .sample-q-option.is-correct .sample-letter {background:#22c55e;color:#06231f;}
.qh3-page .sample-q-option.is-correct i {margin-left:auto;margin-top:3px;color:#22c55e;font-size:12px;}
.qh3-page .sample-gauge-row {
    display:flex;align-items:center;gap:16px;padding-top:18px;border-top:1px solid #2a3445;
  }
.qh3-page .sample-gauge {
    width:58px;height:58px;border-radius:50%;flex:0 0 58px;
    background:conic-gradient(#17a398 72%, #232c3a 0);
    display:flex;align-items:center;justify-content:center;
  }
.qh3-page .sample-gauge-inner {
    width:44px;height:44px;border-radius:50%;background:#1b2330;
    display:flex;align-items:center;justify-content:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;font-weight:600;color:#fff;
  }
.qh3-page .sample-gauge-label {flex:1;min-width:0;}
.qh3-page .sample-gauge-label b {display:block;font-size:13px;color:#e7eaef;font-family:'DM Sans',sans-serif;margin-bottom:3px;}
.qh3-page .sample-gauge-label span {display:block;font-size:11.5px;color:#7c8598;line-height:1.4;}
.qh3-page .sample-gauge-label span strong {color:#aab3c0;font-weight:600;}
.qh3-page .sample-gauge-tag {
    margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:10.5px;color:#17a398;border:1px solid rgba(23,163,152,.4);
    padding:4px 8px;border-radius:999px;white-space:nowrap;
  }

  /* Modal overlay for sample question */
.qh3-page .sample-modal {
    position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
    padding:24px 16px;
  }
.qh3-page .sample-modal.is-open {display:flex;}
.qh3-page .sample-modal-backdrop {
    position:absolute;inset:0;background:rgba(18,32,51,.62);backdrop-filter:blur(3px);
  }
.qh3-page .sample-modal-dialog {
    position:relative;z-index:1;width:min(860px,100%);max-height:min(90vh,900px);
    overflow:auto;border-radius:18px;
  }
.qh3-page .sample-modal-close {
    position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
    border:1px solid #2a3445;background:#151c27;color:#c3c9d3;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:14px;
  }
.qh3-page .sample-modal-close:hover {background:#1f2937;color:#fff;}
.qh3-page .sample-modal-head {
    padding:18px 48px 0 22px;background:#1b2330;border:1px solid #2a3445;border-bottom:0;
    border-radius:16px 16px 0 0;
  }
.qh3-page .sample-modal-head .eyebrow {
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:#17a398;margin-bottom:4px;
  }
.qh3-page .sample-modal-head h2 {
    font-size:1.15rem;font-weight:700;color:#e7eaef;font-family:'DM Sans',sans-serif;
    margin:0 0 14px;letter-spacing:-.01em;
  }
.qh3-page .sample-modal .sample-console {border-radius:0 0 16px 16px;border-top:0;}
.qh3-page body.sample-modal-open {overflow:hidden;}
  @media (max-width:640px){
.qh3-page .sample-console-body {padding:18px;}
.qh3-page .sample-gauge-row {flex-wrap:wrap;}
.qh3-page .sample-gauge-tag {margin-left:0;}
  }

  /*
   * Practice framework: marketing copy + docked sidebar showcase widget.
   * All 7 panels stay in the DOM; JS only toggles visibility classes.
   */
.qh3-page .framework-section {padding-bottom:56px;}
.qh3-page .framework-showcase {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:32px;
    align-items:start;
  }
.qh3-page .framework-intro {
    grid-column:span 5;min-width:0;
    display:flex;flex-direction:column;justify-content:space-between;
  }
.qh3-page .framework-intro .eyebrow {
    display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--qh3-blue);margin-bottom:8px;
  }
.qh3-page .framework-intro h2 {
    font-size:clamp(1.55rem,2.4vw,1.95rem);margin-bottom:14px;line-height:1.15;color:var(--qh3-text);
  }
.qh3-page .framework-intro > div > p {
    font-size:15px;color:var(--qh3-text-2);line-height:1.6;max-width:42ch;margin:0 0 1.35em;
  }
.qh3-page .framework-intro > div > p + p { margin-top: 0.35em; }
.qh3-page .framework-intro .framework-features { margin-top: 10px; }
.qh3-page .framework-features {display:flex;flex-direction:column;gap:16px;}
.qh3-page .framework-feature {display:flex;align-items:flex-start;gap:12px;}
.qh3-page .framework-check {
    width:20px;height:20px;margin-top:2px;flex-shrink:0;border-radius:50%;
    background:var(--qh3-blue-soft);color:var(--qh3-blue);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;line-height:1;
  }
.qh3-page .framework-feature h4 {
    margin:0 0 4px;font-size:13.5px;font-weight:700;color:var(--qh3-text);
    font-family:'DM Sans',sans-serif;letter-spacing:-.01em;
  }
.qh3-page .framework-feature p {
    margin:0;font-size:13px;color:var(--qh3-text-2);line-height:1.5;
  }

  /* Integrated widget: tab sidebar docked to white preview card */
.qh3-page .framework-widget {
    grid-column:span 7;min-width:0;
    display:flex;flex-direction:row;align-items:stretch;gap:0;
  }
.qh3-page .framework-tabs {
    width:14rem;flex-shrink:0;display:flex;flex-direction:column;gap:6px;
    padding:10px 0;z-index:2;position:relative;
  }
.qh3-page .tab-pill {
    display:flex;align-items:center;gap:10px;width:100%;
    padding:12px 12px 12px 14px;border-radius:12px 0 0 12px;
    border:1px solid transparent;border-right:0;
    background:transparent;color:var(--qh3-text-2);cursor:pointer;text-align:left;
    font:inherit;transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
.qh3-page .tab-pill:hover {
    background:rgba(255,255,255,.65);color:var(--qh3-text);
  }
.qh3-page .tab-pill.is-active {
    background:var(--qh3-surface);
    border-color:var(--qh3-border);
    border-right-color:transparent;
    box-shadow:var(--qh3-shadow-soft);
    color:var(--qh3-blue);
    font-weight:700;
    position:relative;
  }
  /* Cover the stage's left border so the active tab visually merges into the card */
.qh3-page .tab-pill.is-active::after {
    content:"";position:absolute;top:0;right:-2px;bottom:0;width:4px;
    background:var(--qh3-surface);
  }
.qh3-page .tab-pill.is-active .tab-pill-label {color:var(--qh3-blue);font-weight:700;}
.qh3-page .tab-pill-icon {
    width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
    justify-content:center;font-size:12.5px;flex-shrink:0;
  }
.qh3-page .tab-pill-label {font-size:13px;font-weight:600;line-height:1.25;}
.qh3-page .fi-blue {background:var(--qh3-blue-soft);color:var(--qh3-blue);}
.qh3-page .fi-green {background:var(--qh3-green-soft);color:var(--qh3-green);}
.qh3-page .fi-orange {background:var(--qh3-orange-soft);color:var(--qh3-orange);}
.qh3-page .fi-teal {background:#e2f6f4;color:#0f9488;}
.qh3-page .fi-indigo {background:#eceafc;color:#5b4de0;}
.qh3-page .fi-amber {background:#fff3d6;color:#b8860b;}
.qh3-page .fi-slate {background:#eef2f7;color:#40556f;}

.qh3-page .framework-stage {
    flex:1;min-width:0;
    background:var(--qh3-surface);border:1px solid var(--qh3-border);
    border-radius:0 18px 18px 0;
    box-shadow:var(--qh3-shadow);padding:24px 26px;min-height:520px;position:relative;z-index:1;
  }
.qh3-page .tab-panel {display:none;}
.qh3-page .tab-panel.is-active {display:block;}
.qh3-page .panel-head {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.qh3-page .panel-head h3 {
    font-size:1.2rem;font-weight:700;font-family:'DM Sans',sans-serif;
    letter-spacing:-.015em;line-height:1.25;
  }
.qh3-page .panel-badge {
    flex-shrink:0;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
    background:var(--qh3-blue-soft);color:var(--qh3-blue);
  }
.qh3-page .panel-visual {
    border:1px solid var(--qh3-border);border-radius:14px;overflow:hidden;margin-bottom:16px;
    background:linear-gradient(160deg,#f4f7fb,#e8eef8);aspect-ratio:16/9;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--qh3-shadow-soft);
  }
.qh3-page .panel-visual img {display:block;width:100%;height:100%;object-fit:cover;}
.qh3-page .tab-panel p {
    font-size:14px;color:var(--qh3-text-2);line-height:1.6;margin:0 0 12px;
  }
.qh3-page .tab-panel p:last-of-type {margin-bottom:18px;}
.qh3-page .panel-cta {
    display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--qh3-blue);
  }
.qh3-page .panel-cta:hover {text-decoration:underline;}
.qh3-page .panel-cta-row {display:flex;flex-wrap:wrap;gap:16px;}
.qh3-page .qh3-toolkit-links {
  list-style:none;margin:0 0 16px;padding:0;
  border:1px solid var(--qh3-border);border-radius:14px;overflow:hidden;
  background:var(--qh3-surface);
}
.qh3-page .qh3-toolkit-links li {
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 14px;border-top:1px solid var(--qh3-border);font-size:14px;
}
.qh3-page .qh3-toolkit-links li:first-child {border-top:0;}
.qh3-page .qh3-toolkit-links a {font-weight:700;color:var(--qh3-blue);}
.qh3-page .qh3-toolkit-links a:hover {text-decoration:underline;}
.qh3-page .qh3-toolkit-link-badge {font-size:11px;color:var(--qh3-text-2);flex-shrink:0;}

  @media (max-width:1024px){
.qh3-page .framework-showcase {grid-template-columns:1fr;gap:18px;}
.qh3-page .framework-intro, .qh3-page .framework-widget {grid-column:auto;}
.qh3-page .framework-intro > div > p {max-width:none;}
  }
  @media (max-width:768px){
.qh3-page .framework-widget {flex-direction:column;}
.qh3-page .framework-tabs {
      width:100%;flex-direction:row;overflow-x:auto;gap:8px;padding:0 0 10px;
      border-bottom:1px solid var(--qh3-border);margin-bottom:-1px;
      -webkit-overflow-scrolling:touch;scrollbar-width:thin;
    }
.qh3-page .tab-pill {
      flex:0 0 auto;width:auto;white-space:nowrap;padding:10px 12px;
      border-radius:12px 12px 0 0;border:1px solid transparent;border-bottom:0;
      background:rgba(255,255,255,.7);
    }
.qh3-page .tab-pill:hover {background:rgba(255,255,255,.9);}
.qh3-page .tab-pill.is-active {
      border-color:var(--qh3-border);border-bottom-color:transparent;
      box-shadow:none;
    }
.qh3-page .tab-pill.is-active::after {
      top:auto;right:0;bottom:-2px;left:0;width:auto;height:4px;
    }
.qh3-page .tab-pill-label {font-size:13px;}
.qh3-page .framework-stage {
      border-radius:0 0 16px 16px;min-height:0;padding:20px;
    }
.qh3-page .panel-head {flex-direction:column;align-items:flex-start;}
  }

  /* community */
.qh3-page .community-banner {
    background:linear-gradient(120deg,#e8f0ff,#edf7ff);
    border:1px solid #d5e4ff;border-radius:16px;padding:24px 28px;
    display:flex;align-items:center;gap:20px;margin-bottom:56px;
  }
.qh3-page .avatar-stack {display:flex;flex-shrink:0;}
.qh3-page .avatar {
    width:42px;height:42px;border-radius:50%;border:3px solid #e8f0ff;
    display:flex;align-items:center;justify-content:center;color:#fff;
    font-weight:700;font-size:13px;margin-left:-12px;
  }
.qh3-page .avatar:first-child {margin-left:0;}
.qh3-page .a1 {background:#f27ba0;}.a2{background:#5b8def;}.a3{background:#3fbf8f;}
.qh3-page .community-text {flex:1;}
.qh3-page .community-text h3 {font-size:17px;font-weight:700;margin-bottom:4px;font-family:'DM Sans',sans-serif;}
.qh3-page .community-text p {font-size:13px;color:var(--qh3-text-2);}

  @media (max-width:980px){
.qh3-page .hero-grid, .qh3-page .exam-grid, .qh3-page .qh3-unused-fg {grid-template-columns:1fr;}
.qh3-page .dyk-row {max-width:100%;}
.qh3-page nav.qh3-unused-nav {display:none;}
.qh3-page .stats-bar {flex-wrap:wrap;gap:18px;justify-content:flex-start;padding:18px;}
.qh3-page .stat-divider {display:none;}
.qh3-page .community-banner {flex-direction:column;align-items:flex-start;}
  }

/* Flashcard home preview player */
.qh3-page .qh3-fc-player {
  background: var(--qh3-surface);
  border: 1px solid var(--qh3-border);
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
  box-shadow: var(--qh3-shadow-soft);
}
.qh3-page .qh3-fc-progress {
  font-size: 12px;
  font-weight: 700;
  color: var(--qh3-text-3);
  margin-bottom: 10px;
  text-align: center;
}
.qh3-page .qh3-fc-scene { perspective: 1200px; margin: 0 0 12px; min-height: 150px; }
.qh3-page .qh3-fc-card {
  position: relative;
  width: 100%;
  min-height: 150px;
  transform-style: preserve-3d;
  transition: transform .45s ease;
  cursor: pointer;
}
.qh3-page .qh3-fc-card.is-flipped { transform: rotateY(180deg); }
.qh3-page .qh3-fc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border: 1px solid var(--qh3-border);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  display: flex; flex-direction: column;
  overflow: auto;
}
.qh3-page .qh3-fc-face.back {
  transform: rotateY(180deg);
  background: #f8fafc;
}
.qh3-page .qh3-fc-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--qh3-text-3); margin-bottom: 8px;
}
.qh3-page .qh3-fc-content {
  font-size: 14px; line-height: 1.45; color: var(--qh3-text); flex: 1;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.qh3-page .qh3-fc-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.qh3-page .qh3-fc-nav .qh3-btn { font-size: 13px; padding: 8px 14px; }
.qh3-page .qh3-fc-empty { font-size: 13px; color: var(--qh3-text-2); text-align: center; padding: 24px 8px; }

.qh3-page .qh3-cs-mini {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--qh3-border); border-radius: 14px; overflow: hidden;
  background: var(--qh3-surface); margin-bottom: 14px; padding: 0;
  box-shadow: var(--qh3-shadow-soft); font: inherit; color: inherit;
  max-height: 240px; position: relative;
}
.qh3-page .qh3-cs-mini:hover { border-color: #c7d8ff; box-shadow: var(--qh3-shadow); }
.qh3-page .qh3-cs-mini-inner {
  padding: 12px; transform: scale(.88); transform-origin: top left;
  width: 113.6%; pointer-events: none; max-height: 280px; overflow: hidden;
}
.qh3-page .qh3-cs-mini-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to top, #fff, rgba(255,255,255,0)); pointer-events: none;
}
.qh3-page .qh3-cs-mini-cta {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: var(--qh3-blue); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 7px 11px; border-radius: 9px;
}

.qh3-page .qh3-dash-mini {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--qh3-border); border-radius: 14px; overflow: hidden;
  background: var(--qh3-surface); margin-bottom: 14px; padding: 12px;
  box-shadow: var(--qh3-shadow-soft); font: inherit; color: inherit;
  position: relative; max-height: 240px;
}
.qh3-page .qh3-dash-mini:hover { border-color: #c7d8ff; }
.qh3-page .qh3-dash-mini-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qh3-page .qh3-dash-mini-top strong { font-size: 13px; font-family: 'DM Sans', sans-serif; }
.qh3-page .qh3-dash-mini-streak {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  background: #fffbeb; color: #b45309; padding: 4px 8px; border-radius: 8px;
}
.qh3-page .qh3-dash-mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 10px; }
.qh3-page .qh3-dash-mini-stat {
  background: #f8fafc; border: 1px solid var(--qh3-border); border-radius: 8px; padding: 8px;
  text-align: center;
}
.qh3-page .qh3-dash-mini-stat b { display: block; font-size: 14px; font-family: 'DM Sans', sans-serif; }
.qh3-page .qh3-dash-mini-stat span { font-size: 10px; color: var(--qh3-text-3); }
.qh3-page .qh3-dash-mini-grid { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 28px; }
.qh3-page .qh3-dash-mini-cell {
  width: 10px; height: 10px; border-radius: 2px; background: #e2e8f0;
}
.qh3-page .qh3-dash-mini-cell.is-active { background: var(--qh3-blue); }
.qh3-page .qh3-dash-mini-cta {
  position: absolute; right: 10px; bottom: 10px;
  background: var(--qh3-blue); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 7px 11px; border-radius: 9px;
}

.qh3-modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 24px 16px;
}
.qh3-modal.is-open { display: flex; }
.qh3-modal-backdrop {
  position: absolute; inset: 0; background: rgba(18,32,51,.62); backdrop-filter: blur(3px);
}
.qh3-modal-dialog {
  position: relative; z-index: 1; width: min(920px, 100%);
  max-height: min(90vh, 920px); overflow: auto; border-radius: 18px;
  background: #fff; border: 1px solid #dde5f0; box-shadow: 0 28px 56px -22px rgba(18,32,51,.55);
}
.qh3-modal-dialog--dark { background: transparent; border: 0; box-shadow: none; }
.qh3-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid #dde5f0; background: #fff; color: #4d5d73;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.qh3-modal-dialog--dark .qh3-modal-close {
  border-color: #2a3445; background: #151c27; color: #c3c9d3;
}
.qh3-modal-body { padding: 22px; }
.qh3-modal-body--dash { background: #f7f8fa; }
.qh3-modal-body--cs { padding: 16px; }
body.qh3-modal-open { overflow: hidden; }

.qh3-page .qh3-banner {
  background: #122033; color: #d7e2f2; padding: 12px 0; font-size: 14px;
}
.qh3-page .qh3-banner a { color: #9ec0ff; text-decoration: underline; }
.qh3-page .qh3-banner-content { line-height: 1.5; }
.qh3-page .qh3-hero-welcome {
  font-size: 13px; font-weight: 700; color: var(--qh3-blue); margin-bottom: 8px;
}
.qh3-page .qh3-starts-inline { margin-top: 10px; }