/* GENERATED by scripts/build-help-pages.mjs — do not hand-edit. */

  :root {
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --surface-hover: #F5F3FF;
    --border: #E5E7EB;
    --border-accent: #C4B5FD;
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #9CA3AF;
    --accent: #7C3AED;
    --accent-light: #EDE9FE;
    --accent-dark: #5B21B6;
    --success: #059669;
    --success-light: #D1FAE5;
    --warning: #D97706;
    --warning-light: #FEF3C7;
    --info: #2563EB;
    --info-light: #DBEAFE;
    --sidebar-w: 280px;
    --header-h: 64px;
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --transition: 0.2s ease;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.65;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
  }

  /* ── HEADER ── */
  .header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 24px;
    gap: 16px;
  }
  .header-logo {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 17px; color: var(--accent-dark);
    text-decoration: none; white-space: nowrap;
  }
  .header-logo svg { flex-shrink: 0; }
  .header-badge {
    font-size: 11px; font-weight: 600;
    background: var(--accent-light); color: var(--accent);
    padding: 2px 8px; border-radius: 10px;
  }
  .header-search {
    flex: 1; max-width: 480px; margin: 0 auto; position: relative;
  }
  .header-search input {
    width: 100%; height: 38px; border: 1px solid var(--border);
    border-radius: 8px; padding: 0 14px 0 38px;
    font-size: 14px; background: var(--bg);
    transition: border var(--transition), box-shadow var(--transition);
    outline: none;
  }
  .header-search input:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
  }
  .header-search .search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
  }
  .search-results {
    position: absolute; top: 44px; left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    max-height: 360px; overflow-y: auto; display: none; z-index: 200;
  }
  .search-results.visible { display: block; }
  .search-result-item {
    padding: 10px 16px; cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
  }
  .search-result-item:hover { background: var(--surface-hover); }
  .search-result-item:last-child { border-bottom: none; }
  .search-result-item .sr-title { font-weight: 600; font-size: 14px; }
  .search-result-item .sr-section { font-size: 12px; color: var(--text-muted); }
  .menu-toggle {
    display: none; background: none; border: none; cursor: pointer;
    color: var(--text-secondary); padding: 4px;
  }

  /* ── SIDEBAR ── */
  .sidebar {
    position: fixed; top: var(--header-h); left: 0; bottom: 0;
    width: var(--sidebar-w); background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto; padding: 20px 0; z-index: 90;
    transition: transform 0.3s ease;
  }
  .sidebar-section { margin-bottom: 8px; }
  .sidebar-section-title {
    padding: 8px 20px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted);
  }
  .sidebar-link {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 20px 7px 28px;
    font-size: 13.5px; color: var(--text-secondary);
    text-decoration: none; cursor: pointer;
    border-left: 3px solid transparent;
    transition: all var(--transition);
  }
  .sidebar-link:hover {
    background: var(--surface-hover); color: var(--text-primary);
  }
  .sidebar-link.active {
    background: var(--accent-light); color: var(--accent-dark);
    border-left-color: var(--accent); font-weight: 600;
  }
  .sidebar-link .link-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }

  /* ── MAIN ── */
  .main {
    margin-left: var(--sidebar-w); margin-top: var(--header-h);
    padding: 40px 48px 80px;
    max-width: 860px;
  }
  .article { display: none; }
  .article.active { display: block; }
  .article h1 {
    font-size: 28px; font-weight: 800; margin-bottom: 6px;
    color: var(--text-primary); letter-spacing: -0.3px;
  }
  .article .subtitle {
    font-size: 15px; color: var(--text-secondary); margin-bottom: 32px;
    line-height: 1.5;
  }
  .article h2 {
    font-size: 19px; font-weight: 700; margin: 36px 0 12px;
    color: var(--text-primary); padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .article h3 {
    font-size: 16px; font-weight: 700; margin: 24px 0 8px;
    color: var(--text-primary);
  }
  .article p { margin-bottom: 14px; color: var(--text-secondary); }
  .article ul, .article ol {
    margin: 0 0 16px 20px; color: var(--text-secondary);
  }
  .article li { margin-bottom: 6px; }
  .article strong { color: var(--text-primary); }

  /* ── CALLOUT BOXES ── */
  .callout {
    border-radius: var(--radius); padding: 14px 18px;
    margin: 18px 0; font-size: 14px; line-height: 1.6;
    display: flex; gap: 12px; align-items: flex-start;
  }
  .callout .callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  .callout-tip { background: var(--success-light); border-left: 3px solid var(--success); }
  .callout-tip .callout-icon { color: var(--success); }
  .callout-info { background: var(--info-light); border-left: 3px solid var(--info); }
  .callout-info .callout-icon { color: var(--info); }
  .callout-warn { background: var(--warning-light); border-left: 3px solid var(--warning); }
  .callout-warn .callout-icon { color: var(--warning); }
  .callout-hook {
    background: var(--accent-light); border-left: 3px solid var(--accent);
    font-style: italic; font-weight: 500; color: var(--accent-dark);
  }

  /* ── STEP CARDS ── */
  .step-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px;
    margin: 12px 0; transition: border-color var(--transition);
  }
  .step-card:hover { border-color: var(--border-accent); }
  .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700; margin-right: 10px;
    vertical-align: middle;
  }
  .step-title { font-weight: 700; font-size: 15px; display: inline; vertical-align: middle; }
  .step-body { margin-top: 10px; font-size: 14px; color: var(--text-secondary); }
  .step-body p { margin-bottom: 8px; }

  /* ── CREDIT TABLE ── */
  .credit-table {
    width: 100%; border-collapse: collapse; margin: 16px 0;
    font-size: 14px;
  }
  .credit-table th {
    text-align: left; font-weight: 700; padding: 10px 14px;
    background: var(--accent-light); color: var(--accent-dark);
    border-bottom: 2px solid var(--border-accent);
  }
  .credit-table td {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
  }
  .credit-table tr:hover td { background: var(--surface-hover); }
  .credit-table .popular-tag {
    display: inline-block; font-size: 10px; font-weight: 700;
    background: var(--accent); color: #fff; padding: 1px 6px;
    border-radius: 3px; margin-left: 6px; vertical-align: middle;
  }

  /* ── BREADCRUMB ── */
  .breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted); margin-bottom: 12px;
  }
  .breadcrumb a {
    color: var(--accent); text-decoration: none;
    cursor: pointer;
  }
  .breadcrumb a:hover { text-decoration: underline; }

  /* ── SECTION GRID (home) ── */
  .section-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px; margin: 24px 0;
  }
  .section-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    cursor: pointer; transition: all var(--transition);
    text-decoration: none; color: inherit;
  }
  .section-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .section-card .card-icon {
    font-size: 28px; margin-bottom: 10px;
  }
  .section-card .card-title {
    font-weight: 700; font-size: 15px; margin-bottom: 4px;
  }
  .section-card .card-desc {
    font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  }
  .section-card .card-count {
    font-size: 11px; color: var(--text-muted); margin-top: 10px;
  }

  /* ── ARTICLE INDEX (home) ──
     Every article, grouped the way the sidebar groups them. The tiles above are a curated
     entry point and always will be; this is the complete list, so no article is reachable
     only from the sidebar. Labels reuse the nav.* keys, which already carry all seven
     languages — no article title is translated twice. */
  .index-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px 28px; margin: 20px 0 8px;
  }
  .index-group-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); padding-bottom: 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .index-group a {
    display: block; padding: 5px 0; font-size: 13px; line-height: 1.45;
    color: var(--text-secondary); text-decoration: none; cursor: pointer;
  }
  .index-group a:hover { color: var(--accent); text-decoration: underline; }

  /* ── FOOTER NAV ── */
  .article-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 48px; padding-top: 20px;
    border-top: 1px solid var(--border); font-size: 14px;
  }
  .article-footer a {
    color: var(--accent); text-decoration: none;
    display: flex; align-items: center; gap: 4px; cursor: pointer;
  }
  .article-footer a:hover { text-decoration: underline; }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-md); }
    .main { margin-left: 0; padding: 28px 20px 60px; }
    .menu-toggle { display: block; }
    .header-search { max-width: 240px; }
    .section-grid { grid-template-columns: 1fr; }
    .index-grid { grid-template-columns: 1fr; }
  }

  /* ── VIDEO EMBED ── */
  .video-embed {
    margin: 32px 0 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .video-embed-label {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--accent-light);
    font-size: 13px; font-weight: 600; color: var(--accent-dark);
    border-bottom: 1px solid var(--border-accent);
  }
  .video-embed-label svg { flex-shrink: 0; }
  .video-embed iframe {
    display: block; width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
  }
  .video-placeholder {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    cursor: pointer; background: #000; overflow: hidden;
  }
  .video-placeholder img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: opacity 0.2s ease;
  }
  .video-placeholder:hover img { opacity: 0.75; }
  .video-play-btn {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 10px;
    background: rgba(124, 58, 237, 0.92);
    color: #fff; font-size: 14px; font-weight: 700;
    padding: 12px 22px; border-radius: 30px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    transition: background 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  .video-placeholder:hover .video-play-btn {
    background: rgba(91, 33, 182, 0.97);
    transform: translate(-50%, -50%) scale(1.05);
  }
  .video-play-btn svg { flex-shrink: 0; }

  /* ── SCROLL ── */
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  .search-results::-webkit-scrollbar { width: 4px; }
  .search-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

  /* ── EXPAND SECTIONS ── */
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-q {
    padding: 14px 0; font-weight: 600; font-size: 15px;
    cursor: pointer; display: flex; justify-content: space-between;
    align-items: center; color: var(--text-primary);
    transition: color var(--transition);
  }
  .faq-q:hover { color: var(--accent); }
  .faq-q .faq-arrow { transition: transform 0.25s ease; font-size: 12px; }
  .faq-q.open .faq-arrow { transform: rotate(90deg); }
  .faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    font-size: 14px; color: var(--text-secondary); line-height: 1.65;
  }
  .faq-a.open { max-height: 600px; padding-bottom: 14px; }

  /* ── APP MOCKUP ILLUSTRATIONS ── */
  .app-mockup {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: var(--shadow-md);
    background: #f0f4ff;
    font-size: 12px;
  }
  .app-mockup .mock-topbar {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
    color: #fff;
  }
  .mock-topbar .mock-logo { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
  .mock-topbar .mock-logo svg { width: 20px; height: 20px; }
  .mock-topbar .mock-nav { display: flex; gap: 10px; align-items: center; }
  .mock-topbar .mock-btn {
    background: rgba(255,255,255,0.2); border: none; color: #fff;
    padding: 4px 10px; border-radius: 14px; font-size: 11px; font-weight: 600;
  }
  .mock-topbar .mock-credits {
    background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 14px;
    font-size: 11px; font-weight: 600;
  }
  .app-mockup .mock-body { padding: 16px; }
  .app-mockup .mock-banner {
    background: linear-gradient(135deg, #0ea5e9, #22d3ee);
    border-radius: 8px; padding: 16px 20px; color: #fff; margin-bottom: 14px;
  }
  .mock-banner h4 { font-size: 15px; margin-bottom: 4px; }
  .mock-banner p { font-size: 11px; opacity: 0.85; }
  .mock-banner .mock-start-btn {
    margin-top: 8px; display: inline-block;
    background: #fff; color: #0ea5e9; padding: 5px 14px;
    border-radius: 6px; font-size: 11px; font-weight: 700;
  }
  .app-mockup .mock-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .app-mockup .mock-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px;
  }
  .mock-card .mock-card-title { font-weight: 700; font-size: 12px; color: #1e293b; margin-bottom: 4px; }
  .mock-card .mock-card-desc { font-size: 10px; color: #64748b; line-height: 1.4; }
  .mock-card .mock-progress-bar {
    margin-top: 8px; height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden;
  }
  .mock-card .mock-progress-fill { height: 100%; background: #3b82f6; border-radius: 2px; }
  .mock-card .mock-meta { margin-top: 6px; font-size: 9px; color: #94a3b8; }

  /* Explain Mode mockup */
  .mock-explain-header {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff; padding: 10px 16px; border-radius: 8px; margin-bottom: 12px;
  }
  .mock-explain-header .mock-queue { display: flex; gap: 3px; margin-top: 6px; }
  .mock-explain-header .mock-queue-dot {
    width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3);
  }
  .mock-explain-header .mock-queue-dot.active { background: #fff; }
  .mock-progress-track { height: 5px; background: #e2e8f0; border-radius: 3px; margin-bottom: 12px; overflow: hidden; }
  .mock-progress-track .mock-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); width: 65%; border-radius: 3px; }
  .mock-chunk-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;
  }
  .mock-chunk-card h5 { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
  .mock-chunk-card p { font-size: 10px; color: #475569; line-height: 1.5; }
  .mock-callout-box {
    background: #fef2f2; border-left: 3px solid #ef4444;
    padding: 8px 10px; border-radius: 0 6px 6px 0; margin: 8px 0;
    font-size: 10px; color: #991b1b;
  }
  .mock-callout-box.info { background: #eff6ff; border-left-color: #3b82f6; color: #1e40af; }
  .mock-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 10px; }
  .mock-table th { background: #f1f5f9; text-align: left; padding: 5px 8px; font-weight: 600; color: #334155; border-bottom: 1px solid #e2e8f0; }
  .mock-table td { padding: 5px 8px; color: #475569; border-bottom: 1px solid #f1f5f9; }

  /* Knowledge Check mockup */
  .mock-kc {
    background: #fff; border: 2px solid #dbeafe; border-radius: 8px; padding: 14px; margin-top: 12px;
  }
  .mock-kc-label { font-size: 10px; font-weight: 700; color: #3b82f6; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .mock-kc h5 { font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
  .mock-kc-option {
    border: 1px solid #e2e8f0; border-radius: 6px; padding: 7px 10px;
    margin-bottom: 5px; font-size: 10px; color: #475569; display: flex; align-items: center; gap: 6px;
  }
  .mock-kc-option .mock-radio { width: 12px; height: 12px; border: 2px solid #cbd5e1; border-radius: 50%; flex-shrink: 0; }
  .mock-kc-submit {
    margin-top: 8px; background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff; border: none; padding: 7px 0; border-radius: 6px;
    font-size: 11px; font-weight: 600; width: 100%; text-align: center;
  }

  /* Quiz Config mockup */
  .mock-quiz-config { text-align: center; padding: 20px 16px; }
  .mock-quiz-config h4 { font-size: 16px; font-weight: 700; color: #4338ca; margin-bottom: 4px; }
  .mock-quiz-config p { font-size: 11px; color: #64748b; margin-bottom: 12px; }
  .mock-quiz-options { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 0 auto; }
  .mock-quiz-opt {
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px; text-align: left;
  }
  .mock-quiz-opt.selected { border-color: #6366f1; background: #eef2ff; }
  .mock-quiz-opt .mock-radio-lg { width: 16px; height: 16px; border: 2px solid #cbd5e1; border-radius: 50%; flex-shrink: 0; }
  .mock-quiz-opt.selected .mock-radio-lg { border-color: #6366f1; background: #6366f1; box-shadow: inset 0 0 0 3px #fff; }
  .mock-quiz-opt .mock-opt-title { font-weight: 700; font-size: 12px; color: #1e293b; }
  .mock-quiz-opt .mock-opt-desc { font-size: 10px; color: #64748b; }
  .mock-quiz-start {
    margin-top: 12px; background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    color: #fff; padding: 10px 0; border-radius: 8px; font-weight: 700;
    font-size: 13px; text-align: center; max-width: 320px; margin-left: auto; margin-right: auto;
  }

  /* Create Topic mockup */
  .mock-create-center { text-align: center; padding: 20px 16px; }
  .mock-create-center h4 { font-size: 16px; font-weight: 700; background: linear-gradient(135deg, #0ea5e9, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 3px; }
  .mock-create-center p { font-size: 11px; color: #64748b; margin-bottom: 14px; }
  .mock-create-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 400px; margin: 0 auto; }
  .mock-create-card {
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; text-align: left;
    background: #fff;
  }
  .mock-create-card .mock-icon-circle {
    width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-size: 16px; margin-bottom: 8px;
  }
  .mock-create-card .upload-icon { background: linear-gradient(135deg, #c084fc, #e879f9); }
  .mock-create-card .describe-icon { background: linear-gradient(135deg, #fb923c, #f97316); }
  .mock-create-card .card-label { font-weight: 700; font-size: 13px; color: #1e293b; }
  .mock-create-card .card-hint { font-size: 10px; color: #64748b; margin-top: 2px; line-height: 1.4; }

  /* Credits mockup */
  .mock-credits-header {
    text-align: center; padding: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border-radius: 8px; margin-bottom: 12px;
  }
  .mock-credits-header h4 { font-size: 15px; font-weight: 700; }
  .mock-credits-header .mock-balance { font-size: 22px; font-weight: 800; margin-top: 2px; }
  .mock-credit-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
  @media (max-width: 560px) { .mock-credit-tiers { grid-template-columns: repeat(2, 1fr); } }
  .mock-tier {
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; text-align: center;
    background: #fff; position: relative;
  }
  .mock-tier.popular { border-color: #6366f1; }
  .mock-tier .pop-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: #6366f1; color: #fff; font-size: 8px; font-weight: 700;
    padding: 1px 6px; border-radius: 3px;
  }
  .mock-tier .tier-name { font-size: 10px; color: #64748b; }
  .mock-tier .tier-credits { font-size: 18px; font-weight: 800; color: #1e293b; }
  .mock-tier .tier-price { font-size: 12px; font-weight: 700; color: #0ea5e9; margin-top: 2px; }

  /* Subtopics mockup */
  .mock-subtopic-list { display: flex; flex-direction: column; gap: 6px; }
  .mock-subtopic-item {
    border: 1px solid #bfdbfe; border-radius: 8px; padding: 9px 12px;
    display: flex; align-items: center; gap: 8px; background: #fff;
  }
  .mock-subtopic-item .mock-check {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3b82f6;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: #3b82f6; font-size: 10px;
  }
  .mock-subtopic-item .mock-st-num { font-weight: 700; font-size: 11px; color: #3b82f6; }
  .mock-subtopic-item .mock-st-name { font-size: 12px; font-weight: 600; color: #1e293b; }
  .mock-mode-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .mock-mode-btn {
    padding: 10px; border-radius: 8px; text-align: center;
    font-weight: 700; font-size: 12px; color: #fff;
  }
  .mock-mode-btn.explain { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
  .mock-mode-btn.quiz { background: linear-gradient(135deg, #f59e0b, #f97316); }

  .mock-caption {
    text-align: center; font-size: 12px; color: var(--text-muted);
    margin-top: 8px; font-style: italic;
  }

  /* Profile Settings mockup */
  .mock-profile-page { padding: 20px 16px; }
  .mock-profile-header {
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 1px solid #e2e8f0;
  }
  .mock-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 20px; flex-shrink: 0;
  }
  .mock-profile-name { font-size: 15px; font-weight: 700; color: #1e293b; }
  .mock-profile-email { font-size: 10px; color: #64748b; }
  .mock-profile-section { margin-bottom: 16px; }
  .mock-profile-section-title {
    font-size: 10px; font-weight: 700; color: #6366f1;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
  }
  .mock-profile-field {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 8px; margin-bottom: 6px;
  }
  .mock-field-label { font-size: 10px; color: #64748b; }
  .mock-field-value { font-size: 11px; font-weight: 600; color: #1e293b; }
  .mock-lang-selector {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 12px; background: #eef2ff; border: 2px solid #6366f1;
    border-radius: 8px; margin-bottom: 6px;
  }
  .mock-lang-flag { font-size: 16px; }
  .mock-lang-name { font-size: 11px; font-weight: 700; color: #4338ca; flex: 1; }
  .mock-lang-dropdown { font-size: 10px; color: #6366f1; font-weight: 600; }
  .mock-lang-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .mock-lang-chip {
    padding: 4px 10px; border-radius: 14px; font-size: 9px;
    background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0;
  }
  .mock-lang-chip.active { background: #6366f1; color: #fff; border-color: #6366f1; }
  .mock-security-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 8px; margin-bottom: 6px;
  }
  .mock-toggle {
    width: 32px; height: 18px; border-radius: 9px;
    background: #cbd5e1; position: relative;
  }
  .mock-toggle.on { background: #22c55e; }
  .mock-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    transition: transform 0.2s;
  }
  .mock-toggle.on::after { transform: translateX(14px); }

  /* Language selection mockup (topic creation) */
  .mock-lang-step { text-align: center; padding: 20px 16px; }
  .mock-lang-step h4 { font-size: 16px; font-weight: 700; color: #4338ca; margin-bottom: 4px; }
  .mock-lang-step p { font-size: 11px; color: #64748b; margin-bottom: 14px; }
  .mock-lang-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 0 auto 14px; }
  .mock-lang-option {
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 6px;
    background: #fff; text-align: center;
  }
  .mock-lang-option.selected { border-color: #6366f1; background: #eef2ff; }
  .mock-lang-option .lang-flag { font-size: 22px; margin-bottom: 3px; }
  .mock-lang-option .lang-name { font-size: 10px; font-weight: 600; color: #1e293b; }
  .mock-lang-option .lang-native { font-size: 9px; color: #64748b; }
  .mock-lang-option.selected .lang-name { color: #4338ca; }
  .mock-lang-next {
    margin-top: 12px; background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    color: #fff; padding: 10px 0; border-radius: 8px; font-weight: 700;
    font-size: 13px; text-align: center; max-width: 360px; margin-left: auto; margin-right: auto;
  }

  /* ── RTL SUPPORT ── */
  [dir="rtl"] .sidebar {
    left: auto; right: 0;
    border-right: none; border-left: 1px solid var(--border);
  }
  [dir="rtl"] .main { margin-left: 0; margin-right: var(--sidebar-w); }
  [dir="rtl"] .sidebar-link { border-left: none; border-right: 3px solid transparent; padding: 7px 28px 7px 20px; }
  [dir="rtl"] .sidebar-link.active { border-right-color: var(--accent); border-left-color: transparent; }
  [dir="rtl"] .header { flex-direction: row-reverse; }
  [dir="rtl"] .header-search .search-icon { left: auto; right: 12px; }
  [dir="rtl"] .header-search input { padding: 0 38px 0 14px; }
  [dir="rtl"] .callout-tip, [dir="rtl"] .callout-info, [dir="rtl"] .callout-warn, [dir="rtl"] .callout-hook {
    border-left: none; border-right: 3px solid var(--success);
  }
  [dir="rtl"] .callout-info { border-right-color: var(--info); }
  [dir="rtl"] .callout-warn { border-right-color: var(--warning); }
  [dir="rtl"] .callout-hook { border-right-color: var(--accent); }
  [dir="rtl"] .step-num { margin-right: 0; margin-left: 10px; }
  [dir="rtl"] .article ul, [dir="rtl"] .article ol { margin: 0 20px 16px 0; }
  [dir="rtl"] .breadcrumb { flex-direction: row-reverse; }
  @media (max-width: 768px) {
    [dir="rtl"] .sidebar { transform: translateX(100%); left: auto; right: 0; }
    [dir="rtl"] .sidebar.open { transform: translateX(0); }
    /* The LTR mobile rule is `.main { margin-left: 0 }`, which cannot undo the `margin-right`
       set for RTL above — that selector is more specific and was never reset here. On a phone in
       Arabic the content column was therefore 360px minus a 280px gutter reserved for a sidebar
       that is off-screen: an 80px column, on every article. Found 2026-09-23. */
    [dir="rtl"] .main { margin-right: 0; }
  }

  /* ── PHASE 4: per-page chrome ── */
  .article-meta {
    font-size: 13px; color: var(--text-muted); margin: -8px 0 24px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
  }
  .article-author { font-weight: 600; color: var(--text-secondary); }
  /* ── Language menu (header) ──
     Sits where the source's <select> was, parked at the far edge by margin-left:auto.

     No RTL override, deliberately. The source sets [dir="rtl"] .header { flex-direction:
     row-reverse }, but in a right-to-left document "row" already flows right-to-left, so
     row-reverse flips it straight back: the Arabic header has always laid out left-to-right, and
     measured at 360px its items sit exactly where the English ones do. An RTL margin rule here
     would assume a mirroring that never happens. That double reversal predates the split and is
     logged in the Phase 4 handoff rather than fixed here, because it re-lays-out a live header. */
  /* ══════════════════════════════════════════════════════════════════════════════════════════
     HEADER

     Three zones — brand, search, actions — laid out as a grid whose middle column is the search.
     The source centred the search with margin:auto inside a flat flex row, which centres it in
     whatever space is left over rather than in the header; with a back button and a badge on one
     side and a short language menu on the other, it sat noticeably off-centre.

     1fr / minmax(0,560px) / 1fr gives the two side columns equal width, so the search lands on the
     true midpoint regardless of how long "Zurück zur Website" or "العودة إلى الموقع" happens to be.
     Below 1024px it reverts to flex, where a rigid centre column would squeeze the input.
     ══════════════════════════════════════════════════════════════════════════════════════════ */
  .header { padding: 0 20px; gap: 12px; }
  .header-left, .header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .header-actions { margin-inline-start: auto; }
  .header-search { flex: 1; min-width: 0; }

  /* The source sets [dir="rtl"] .header { flex-direction: row-reverse }. A flex row in an RTL
     document already runs right-to-left, so row-reverse flipped it straight back and the Arabic
     header laid itself out left-to-right — the exit on the left, the language menu on the right,
     mirrored from where an Arabic reader looks for them. Now that the header is three grouped
     zones the fix is safe to make, and it matches the grid above 1024px, which mirrors correctly
     on its own. */
  [dir="rtl"] .header { flex-direction: row; }
  /* The menu is inside .header-actions now; its own auto margin would fight that container. */
  .header-actions .lang-menu { margin-left: 0; margin-inline-start: 0; }

  @media (min-width: 1024px) {
    .header {
      display: grid; align-items: center;
      grid-template-columns: 1fr minmax(0, 560px) 1fr;
    }
    .header-search { max-width: none; margin: 0; }
    .header-actions { margin-left: 0; justify-content: flex-end; }
  }

  /* ── Back to site ──
     The one control that leaves the help centre. Quiet by design: a bordered button here competed
     with the brand block beside it and made the left side read as two equal things. As a ghost
     control it stays clearly tappable — 36px tall, and the hover fills in — while the brand leads.
     Its 36px height plus the header's own vertical space clears the 44px target guidance. */
  .back-to-site {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    height: 36px; padding: 0 10px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    text-decoration: none; white-space: nowrap; transition: var(--transition);
  }
  .back-to-site:hover { background: var(--surface-hover); color: var(--accent); }
  .back-to-site:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .back-icon { flex-shrink: 0; }
  /* The arrow means "away from the content", which is rightward in a right-to-left page. */
  [dir="rtl"] .back-icon { transform: scaleX(-1); }

  /* Separates "leave" from "where you are" — the two would otherwise read as one control strip. */
  .header-divider {
    width: 1px; height: 22px; background: var(--border); flex-shrink: 0;
  }

  .lang-menu { position: relative; margin-left: auto; flex-shrink: 0; }
  .lang-menu > summary {
    list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
    display: flex; align-items: center; gap: 6px; padding: 5px 10px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
    font-size: 13px; color: var(--text-secondary); transition: var(--transition);
  }
  .lang-menu > summary::-webkit-details-marker { display: none; }
  .lang-menu > summary:hover,
  .lang-menu[open] > summary { border-color: var(--border-accent); color: var(--accent); }
  .lang-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .lang-caret { font-size: 10px; transition: transform var(--transition); }
  .lang-menu[open] .lang-caret { transform: rotate(180deg); }
  /* Logical, not physical. This used to be a plain right:0, because the Arabic header laid itself
     out left-to-right and the menu sat at the right edge in both directions. The header now
     mirrors properly, so in Arabic the menu is at the LEFT edge — and right:0 would open the list
     leftwards, off the side of the screen. inset-inline-end resolves to right in English and to
     left in Arabic, so the list opens inwards either way. */
  .lang-list {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 200;
    min-width: 170px; margin: 0; padding: 6px; list-style: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow-md);
  }
  .lang-list li { margin: 0; }
  .lang-list .lang-link {
    display: block; padding: 7px 10px; border-radius: 5px; white-space: nowrap;
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
  }
  .lang-list .lang-link:hover { background: var(--surface-hover); color: var(--accent); }
  .lang-list .lang-link.current { background: var(--accent-light); color: var(--accent); font-weight: 600; }
  /* ── Phone header ──
     Measured at 360px before this: the logo block (icon + wordmark + badge) was 250px wide, the
     search box started at 336px and the language menu at 406px — fully off-screen and untappable,
     in every language. The source's <select> was clipped the same way; Phase 3 logged it. Keeping
     the logo icon and dropping the words is the standard phone pattern, and it frees ~200px. */
  /* ── Tablet ── the badge is the first thing to go; it is decoration, not navigation. */
  @media (max-width: 860px) {
    .header-badge { display: none; }
    .header-left, .header-actions { gap: 8px; }
  }

  /* ── Phone ──
     Measured at 360px before any of this: the logo block alone was 250px of a 360px header, so the
     search box started at 336px and the language menu at 406px — both off-screen and untappable.
     Everything that is not the exit, the identity mark, the search or the language drops out; the
     back label becomes icon-only but keeps its aria-label, so it is still announced in full. */
  @media (max-width: 600px) {
    .header { padding: 0 10px; gap: 8px; }
    .header-wordmark, .header-divider { display: none; }
    .lang-menu > summary { padding: 5px 8px; }
    .back-label { display: none; }
    .back-to-site { padding: 0 8px; }
  }
  /* The index groups are anchor targets for BreadcrumbList; keep them clear of the sticky header. */
  .index-group { scroll-margin-top: calc(var(--header-h) + 16px); }
  /* Tiles, cross-link callouts and search hits were clickable <div>s — now real links, so they
     need the anchor defaults neutralised to keep the look they already had. */
  a.section-card, a.callout, a.search-result-item {
    display: block; text-decoration: none; color: inherit;
  }
  a.callout { display: flex; }

  /* ══════════════════════════════════════════════════════════════════════════════════════════
     WIDE-SCREEN LAYOUT

     The source pinned the content to the sidebar and capped it at 860px:

         .main { margin-left: 280px; max-width: 860px; }

     with a single breakpoint at 768px and nothing between there and infinity. On a 1870px window
     that spends 280 + 860 = 1140px and leaves ~730px of dead space down the right-hand side, all
     of it on one side, which reads as a broken layout rather than a margin.

     Two separate widths fix it, because they are two different problems:

       --content-w  the container. Grids, tables, mockups and video want this; it grows with the
                    viewport, so the home page's tiles go from 3 across to 4 or 5 instead of
                    leaving the space empty.
       --measure    the prose. Text does NOT want the container width — 860px at 15px was already
                    about 102 characters per line, well past the 60–75 that stays comfortable to
                    read, and widening the container without this cap would have made it worse.

     Everything is centred in the space after the sidebar, so what space remains sits evenly on
     both sides and looks deliberate.
     ══════════════════════════════════════════════════════════════════════════════════════════ */
  :root { --content-w: 980px; --content-w-doc: 900px; --measure: 75ch; --toc-w: 220px; }

  /* The cap moves off .main and onto the wrapper, so .main can fill the space and centre it.
     min(100%, ...) rather than a bare max-width so the container tracks the viewport continuously
     instead of jumping at each breakpoint — a stepped cap left 390px unused at 1870px, which is
     exactly the window this was reported on. */
  .main { max-width: none; }
  .page { max-width: min(100%, var(--content-w)); margin-inline: auto; }

  /* An article is prose + a rail, so it wants a narrower container than the hub, which is all
     grid. Letting both grow to the same width leaves an article looking half-empty. */
  .page.has-toc { max-width: min(100%, var(--content-w-doc)); }

  /* Prose only. Grids, tables, callouts, step cards, mockups and video keep the full width —
     they are the elements that should absorb a wide screen. */
  .article > p,
  .article > ul,
  .article > ol,
  .article > .subtitle,
  .article > .article-meta { max-width: var(--measure); }

  @media (min-width: 1100px) { :root { --content-w: 1100px; --content-w-doc: 1000px; } }
  @media (min-width: 1280px) { :root { --content-w: 1240px; --content-w-doc: 1100px; } }
  @media (min-width: 1600px) { :root { --content-w: 1440px; --content-w-doc: 1220px; } }

  /* ── On this page ──
     Only once there is genuinely room for it: below 1280px the rail would squeeze the prose
     rather than use spare space, so it is not rendered at all. */
  .toc { display: none; }
  @media (min-width: 1280px) {
    .page.has-toc {
      display: grid; grid-template-columns: minmax(0, 1fr) var(--toc-w);
      gap: 56px; align-items: start;
    }
    .toc {
      display: block; position: sticky; top: calc(var(--header-h) + 40px);
      max-height: calc(100vh - var(--header-h) - 80px); overflow-y: auto;
      font-size: 13px; line-height: 1.5;
      border-inline-start: 1px solid var(--border); padding-inline-start: 18px;
    }
    .toc-title {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-muted); margin-bottom: 10px;
    }
    .toc ul { list-style: none; margin: 0; padding: 0; }
    .toc li { margin: 0 0 2px; }
    .toc a {
      display: block; padding: 4px 0; color: var(--text-secondary); text-decoration: none;
      transition: var(--transition);
    }
    .toc a:hover { color: var(--accent); }
    /* The sticky header would otherwise cover the heading a rail link jumps to. */
    .article > h2 { scroll-margin-top: calc(var(--header-h) + 20px); }
  }

  /* Comfortable gutters as the window grows — a 20px inset on a 1900px screen looks accidental. */
  @media (min-width: 1280px) { .main { padding-inline: 64px; } }
  @media (min-width: 1900px) { .main { padding-inline: 80px; } }

  /* ── Tablet: fold the sidebar away ──
     The source collapsed it only below 768px, so the whole 768–1023 band kept a fixed 280px rail
     against a narrow window: at 900px that left 524px for the content and squeezed the prose to
     65 characters while a third of the screen was navigation the reader was not using. The
     hamburger already exists and already opens it; this just widens the band it covers.

     The RTL twin is required, not optional. The sidebar is pinned left in both directions, so an
     Arabic page holds the gutter open with margin-right; without this, Arabic tablets would keep
     a 280px void where the hidden rail used to be — the same defect found at phone width in the
     previous phase. */
  @media (max-width: 1023px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-md); }
    .main { margin-left: 0; }
    .menu-toggle { display: block; }
    [dir="rtl"] .sidebar { transform: translateX(100%); left: auto; right: 0; }
    [dir="rtl"] .sidebar.open { transform: translateX(0); }
    [dir="rtl"] .main { margin-right: 0; }
  }

  /* ── Phone ──
     The 600px rule above hides the wordmark and badge to free room in the header. It used to hide
     the language name too, which was survivable only while a flag glyph remained to identify the
     control. With the flags gone that left a bare caret, so the name stays: "English" is ~50px and
     the freed wordmark space more than covers it. */
  @media (max-width: 600px) {
    .lang-name { display: inline; }
  }