/*
 * AUTO-GENERATED: Backend public unified reader stylesheet.
 * 
 * SOURCE OF TRUTH: packages/protocol/unified-reader/style.css
 * REGENERATE WITH: npm run copy:reader --workspace=@gist/backend
 * Last generated: 2026-01-30T01:12:55.000Z
 */
/**
 * Unified Reader Styles - Shared Base Stylesheet
 *
 * This is the single source of truth for unified reader styling across all contexts.
 * Loaded by both Chrome extension (Shadow DOM) and share pages (standard DOM).
 *
 * ## Architecture: Context-Specific Overrides
 *
 * The unified reader uses a modular CSS architecture with context-specific overrides:
 *
 * - **style.css** (this file) - Shared base styles used by all contexts
 * - **style-extension.css** - Extension-only overrides (Chrome extension Shadow DOM)
 * - **style-web.css** - Web-only overrides (standard DOM, e.g. public share pages)
 *
 * ## How Styles Are Loaded
 *
 * **Chrome Extension (Shadow DOM):**
 * 1. Build script merges style.css + style-extension.css
 * 2. Converts merged CSS to JavaScript module
 * 3. Shadow DOM injects styles synchronously
 * 4. Files: extension/content/overlay/unified-reader-styles.generated.js
 *
 * **Web Pages (Standard DOM):**
 * 1. Build script copies style.css + style-web.css to backend/public/reader/
 * 2. HTML loads both via <link> tags
 * 3. Files: unified-reader.generated.css + unified-reader-share.generated.css
 *
 * ## When to Use Each File
 *
 * - **Add to THIS file** if the style applies to both extension AND web contexts
 * - **Add to style-extension.css** if the style is extension-specific (overlay behavior)
 * - **Add to style-web.css** if the style is web-specific (full-bleed backgrounds, etc.)
 *
 * ## Design Philosophy
 *
 * SIMPLER IS BETTER. Keep styles focused and modular. Avoid context-specific hacks
 * in the shared base. Use the override files for context-specific behavior.
 */

* {
    box-sizing: border-box;
}

.reader-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* ===== SKIP LINK =====
 * WCAG 2.4.1 Bypass Blocks: Provides keyboard users a way to skip
 * header controls and jump directly to main content.
 *
 * The link is visually hidden until focused, then appears at the top
 * of the viewport with high contrast for maximum visibility.
 */
.reader-skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 24px;
    background: var(--ink);
    color: var(--bg);
    font-size: var(--type-sm, 15px);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.2s ease;
}

/* Only reveal on keyboard focus (not mouse click) per WCAG 2.4.1 */
.reader-skip-link:focus-visible {
    top: 0;
    outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, #1C1C24);
    outline-offset: var(--focus-outline-offset, 2px);
}

html {
    font-size: 112.5%; /* 18px baseline - matches narrative-reader-modular */
}

:root {
    font-size: 112.5%; /* 18px baseline - ensures rem units work in Shadow DOM */
    /* Colors - Brand Guide Tokens */
    --text-primary: #000000;
    --text-secondary: #383838;
    --text-tertiary: #666666; /* WCAG AA: 5.74:1 on white (was #888888 at 3.54:1) */
    --bg: #ffffff;
    --wash: #f8f8f8;
    --border: #e5e7eb;
    --ink: #1C1C24; /* Marketing ink for CTAs */

    /* Focus System - WCAG 2.2 AA Compliant
     * Uses high-contrast ink outline with subtle brand glow.
     * Ink (#1C1C24) provides 16:1 contrast on white for maximum visibility.
     * Brand coral glow adds warmth without compromising accessibility.
     */
    --focus-outline-color: #1C1C24;
    --focus-outline-width: 2px;
    --focus-outline-offset: 2px;
    --focus-glow: 0 0 0 4px rgba(255, 107, 107, 0.2);

    --divider-dark: #333;
    --modal-text-light: #ffffff; /* White text in always-dark modal */

    /* Inline + block emphasis backgrounds */
    --code-inline-bg: #f4f5f7;
    --code-block-bg: #f6f7f9;
    --code-block-border: #e6e8ec;
    --math-inline-bg: #f2f6ff;
    --math-block-bg: #f5f8ff;
    --math-block-border: #e2e8f4;

    /* Typography scaling */
    --reader-rem-baseline: 18px; /* Forces consistent typography sizing across host documents */

    /* Typography scale - minor third (1.2) derived from the 18px baseline. */
    --type-ratio: 1.2;
    --type-base: 1rem; /* 18px baseline (1rem = 18px with 112.5% root size) */

    /* Scale up (each step multiplies previous) */
    --type-md: calc(var(--type-base) * var(--type-ratio));
    --type-lg: calc(var(--type-md) * var(--type-ratio));
    --type-xl: calc(var(--type-lg) * var(--type-ratio));
    --type-2xl: calc(var(--type-xl) * var(--type-ratio));

    /* Scale down (each step divides previous) */
    --type-sm: calc(var(--type-base) / var(--type-ratio));
    --type-xs: calc(var(--type-sm) / var(--type-ratio));

    /* Line-height tokens: tight for titles, normal for body, loose for small UI */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-loose: 1.7;

    /* Elevation system for consistent shadows */
    --elevation-low: 0 2px 8px rgba(28, 28, 36, 0.08);
    --elevation-medium: 0 8px 24px rgba(28, 28, 36, 0.12);
    --elevation-high: 0 24px 48px rgba(28, 28, 36, 0.16);
    --elevation-modal: 0 10px 40px rgba(0, 0, 0, 0.3);

    /* Brand Gradient */
    --gradient-start: #FF6B6B;
    --gradient-mid: #FFD93D;
    --gradient-end: #FF8E53;
    --gradient: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
    --gradient-horizontal: linear-gradient(90deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end));

    /* Accent Colors - Mode-Specific */
    --accent: #FFD93D; /* Default argument yellow, overridden by mode */

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --reader-font-body: var(--font-sans);
    --reader-font-title: var(--font-sans);

    /* Layout Constants */
    --header-height: 72px;
    --control-height: 64px;
    --content-max-width: 700px;
    --safe-gutter: clamp(32px, 8vw, 96px);
    --z-float: 1000; /* Z-index for floating elements like toasts */
    --content-mirror-spacing: 48px; /* Symmetric distance for label above & CTA below content */

    /* Dynamic Reading Line - content starts 20% down available viewport */
    --viewport-available: calc(100dvh - var(--header-height) - var(--control-height));
    --min-top-space: 40px;
    --ideal-top-ratio: 0.2; /* 20% on desktop */
    --reading-line: max(var(--min-top-space), calc(var(--viewport-available) * var(--ideal-top-ratio)));

    /* Responsive Reading Line */
    --slide-bottom-padding: calc(var(--control-height) + 120px);
}

@media (max-width: 768px) {
    :root {
        --min-top-space: 24px;
        --ideal-top-ratio: 0.12; /* 12% on tablets */
        --safe-gutter: clamp(24px, 6vw, 48px);
        --content-mirror-spacing: 40px; /* Slightly tighter on tablet */
    }
}

@media (max-width: 480px) {
    :root {
        --min-top-space: 16px;
        --ideal-top-ratio: 0.06; /* 6% on mobile - more compact */
        --safe-gutter: clamp(24px, 5vw, 32px);
        --content-mirror-spacing: 32px; /* Compact on mobile */
    }

    .summary-reload-button {
        width: 34px;
        height: 34px;
    }
    .reload-icon {
        width: 16px;
        height: 16px;
    }
}

/* Dark Mode - Auto-detects system preference on desktop and mobile */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode Colors */
        --text-primary: #ffffff;
        --text-secondary: #c8c8c8;
        --text-tertiary: #9a9a9a; /* WCAG AA: 5.02:1 on #1C1C24 (was #888888 at 4.77:1, now comfortably AA) */
        --bg: #1C1C24;
        --wash: #151518;
        --border: #2a2a2f;
        --ink: #ffffff;

        --code-inline-bg: #22242c;
        --code-block-bg: #1f2128;
        --code-block-border: #2b2f3a;
        --math-inline-bg: #1f2430;
        --math-block-bg: #1c2230;
        --math-block-border: #2a3243;

        /* Focus System - Dark Mode Override
         * Inverts to white outline for visibility on dark backgrounds.
         * Maintains brand coral glow for consistency.
         */
        --focus-outline-color: #ffffff;
        --focus-glow: 0 0 0 4px rgba(255, 107, 107, 0.25);
    }

    /* Navigation buttons disabled state in dark mode */
    .nav-btn:disabled {
        color: var(--text-tertiary);
    }

    /* Dark mode button hover states */
    .nav-btn:hover:not(:disabled),
    .play-btn:hover,
    .bolt-btn:hover:not(:disabled) {
        background: #1f1f24;
        border-color: var(--text-secondary);
    }

    .share-btn:not(.shared):hover:not(:disabled) {
        border-color: var(--text-secondary);
        background: #1f1f24;
    }

    /* Layer CTA arrows - set color for SVG stroke */
    .layer-cta svg,
    .layer-cta svg path {
        stroke: var(--accent);
    }

    /* Layer label dark mode */
    .steelman-title {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Share modal stays dark in both modes (intentionally) */
    /* But adjust internal colors for dark mode */
    .privacy-title {
        color: var(--text-tertiary);
    }

    .copy-link-btn {
        background: #1f1f24;
        color: var(--modal-text-light);
    }

    .copy-link-btn:hover {
        background: #2a2a2f;
        border-color: var(--border);
    }
}

/* ===== INVERTED THEME TOKENS (Counter-Argument Layer) ===== */
/* Creates jarring visual break to force reader attention when entering opposing viewpoint territory.
 * In light mode: counter-arguments appear with dark theme
 * In dark mode: counter-arguments appear with light theme
 * This solves the critical beta tester issue where counter-arguments were being missed entirely.
 */

/* Light mode: invert to dark */
.slide-argument-counter--inverted {
    --inverted-bg: #1C1C24;
    --inverted-text-primary: #ffffff;
    --inverted-text-secondary: #b0b0b0;
    --inverted-text-tertiary: #9a9a9a; /* AA on dark: 5.02:1 */
    --inverted-wash: #151518;
    --inverted-border: #2a2a2f;
    --inverted-accent: #FFD93D;
    --code-inline-bg: #22242c;
    --code-block-bg: #1f2128;
    --code-block-border: #2b2f3a;
    --math-inline-bg: #1f2430;
    --math-block-bg: #1c2230;
    --math-block-border: #2a3243;
    /* Focus ring on dark inverted bg: use white for visibility */
    --focus-outline-color: #ffffff;
    --focus-glow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

/* Dark mode: invert to light */
@media (prefers-color-scheme: dark) {
    .slide-argument-counter--inverted {
        --inverted-bg: #ffffff;
        --inverted-text-primary: #000000;
        --inverted-text-secondary: #383838;
        --inverted-text-tertiary: #666666; /* AA on light: 5.74:1 */
        --inverted-wash: #f8f8f8;
        --inverted-border: #e5e7eb;
        --inverted-accent: #FFD93D;
        --code-inline-bg: #f4f5f7;
        --code-block-bg: #f6f7f9;
        --code-block-border: #e6e8ec;
        --math-inline-bg: #f2f6ff;
        --math-block-bg: #f5f8ff;
        --math-block-border: #e2e8f4;
        /* Focus ring on light inverted bg: use ink for visibility */
        --focus-outline-color: #1C1C24;
        --focus-glow: 0 0 0 4px rgba(28, 28, 36, 0.15);
    }
}

/* Mode-Specific Accent Colors */
.mode-story {
    --accent: #FF6B6B; /* Sunrise red for story mode */
}

.mode-argument {
    --accent: #FFD93D; /* Sunlight yellow for argument mode */
}

/* ===== UTILITY CLASSES ===== */

/* Gradient text effect - used across multiple components */
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-horizontal {
    background: var(--gradient-horizontal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Touch optimization for interactive elements */
.touchable {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    height: 100dvh; /* Dynamic viewport height - adapts when mobile address bar shows/hides */
    display: flex;
    flex-direction: column;
    /* Prevent pull-to-refresh from interfering with reader scroll */
    overscroll-behavior-y: contain;
}

/* ===== LAYOUT ===== */

.reader-root {
    width: 100%;
    height: 100dvh; /* Dynamic viewport height - adapts when mobile address bar shows/hides */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--reader-font-body); /* Explicitly set font to prevent inheriting host page serif fonts in Shadow DOM */
    line-height: var(--leading-normal);
    position: relative;
}

/* ===== HEADER ===== */
/* Matches narrative-reader-modular exactly */

.header {
    height: var(--header-height);
    background: var(--bg);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: relative;
    z-index: 100;
}

.reader-root[data-active-layer="original"] .header {
    height: 0;
    padding: 0;
    background: transparent;
}

.reader-root[data-active-layer="original"] .header-content {
    display: none;
}

.reader-root[data-active-layer="original"] .content {
    background: transparent;
}

.header-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 16px;
}

.summary-reload {
    display: none;
    align-items: center;
    margin-left: auto;
    /* Prevent clicks when hidden (fixes invisible clickable element issue) */
    pointer-events: none;
}

/* Entrance animation */
.summary-reload.visible {
    display: flex;
    animation: reload-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: auto;
}

@keyframes reload-pop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.summary-reload-button {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gradient);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.25);
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.summary-reload-button:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
    background: var(--gradient);
    border: none;
}

.summary-reload-button:active {
    transform: scale(0.95);
}

.summary-reload-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.summary-reload-button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.reload-icon {
    width: 16px;
    height: 16px;
    stroke: #000000;
}

/* Tooltip - positioned to extend leftward so it doesn't get cut off at right edge */
.reload-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    background: var(--ink);
    color: var(--bg);
    font-size: var(--type-xs);
    font-weight: 500;
    line-height: var(--leading-loose);
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.summary-reload-button:hover .reload-tooltip {
    opacity: 1;
}

.title-cluster {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.article-title {
    font-size: var(--type-md);
    font-weight: 600;
    line-height: var(--leading-tight);
    font-family: var(--reader-font-title);
    text-align: left;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 4px 0;
}

.article-source {
    font-size: var(--type-sm);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--text-tertiary);
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-title.is-interactive,
.article-source.is-interactive {
    cursor: pointer;
    transition: color 0.2s ease;
}

.article-title.is-interactive:hover,
.article-title.is-interactive:focus {
    color: var(--text-secondary);
}

.article-source.is-interactive:hover,
.article-source.is-interactive:focus {
    color: var(--text-secondary);
}

.favicon.is-interactive {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Focus handled by global :focus-visible rule */
}

.favicon.is-interactive:hover,
.favicon.is-interactive:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(28, 28, 36, 0.12);
}

/* Canonical Gist Wordmark - See /packages/ui/shared/wordmark.js for reference */
.gist-identity {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: var(--type-base);  /* Matches title size - differentiated by weight (800 vs 600) and position */
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.gist-identity:hover {
    opacity: 0.7;
}

.gist-identity svg {
    width: 0.9em;
    height: 1.5em;
    margin-right: 0.08em;
}

/* Help Menu Wrapper - Positions menu relative to wordmark */
.gist-identity-wrapper {
    position: relative;
    display: inline-flex;
}

/* Help Menu Popup
 * Drops UP from the wordmark since it's positioned in the footer.
 * Uses subtle elevation and brand-consistent styling.
 */
.reader-help-menu {
    position: absolute;
    bottom: calc(100% + 8px); /* Drop UP, not down */
    left: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    min-width: 160px;
    z-index: var(--z-float);
    box-shadow: var(--elevation-medium);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.reader-help-menu.hidden {
    opacity: 0;
    transform: translateY(8px); /* Animate FROM below when opening */
    pointer-events: none;
}

.reader-help-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: var(--type-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.1s ease, color 0.1s ease;
    font-family: var(--font-sans);
    cursor: pointer;
}

.reader-help-menu-item:hover {
    background: var(--wash);
    color: var(--text-primary);
}

/* Focus state for keyboard navigation */
.reader-help-menu-item:focus {
    outline: none;
    background: var(--wash);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 2px var(--focus-outline-color);
}

.reader-help-menu-icon {
    width: 16px;
    height: 16px;
    color: var(--gradient-start);
    flex-shrink: 0;
}

.favicon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

/* SHARE BUTTON */
.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Mobile touch optimizations - see .touchable utility */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.share-btn:not(.shared):hover:not(:disabled) {
    border-color: var(--text-secondary);
    background: var(--wash);
}

.share-btn:active {
    transform: scale(0.95);
}

.share-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed; /* WCAG 1.4.1: Shape cue beyond color/opacity */
}

.share-btn svg {
    width: 20px;
    height: 20px;
    transition: color 0.3s ease, fill 0.3s ease;
}

.share-btn.shared {
    background: var(--gradient);
    border: none;
    animation: gentlePulse 3s ease-in-out infinite;
    color: #000000; /* Black text for contrast on sunrise gradient */
}

.share-btn.shared:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
    background: var(--gradient);
    border: none;
}

.share-btn.shared svg {
    fill: #000000; /* Black icon for contrast on sunrise gradient */
}

/* ===== PROGRESS BAR ===== */
/* Unified progress bar: indeterminate during streaming, determinate after completion.
 * Anchored at the top of the footer bar for consistent placement.
 *
 * STATE MACHINE:
 * - [data-streaming="true"]: Indeterminate animation (content arriving)
 * - [data-streaming="false"]: Determinate progress (reading position)
 * - Transition: Brief pulse, then settle to reading position
 */

.progress-track {
    overflow: hidden;
}

.progress-track:not([data-shell-progress-bar]) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 101;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-horizontal);
    z-index: 102;
    /* Default: determinate mode with smooth width transitions */
    transition: width 0.3s ease;
}

/* ===== INDETERMINATE STATE (STREAMING) ===== */
/* Bar slides left→right continuously while content is arriving */
.progress-track[data-streaming="true"] .progress-fill {
    width: 30% !important;
    animation: gist-progress-indeterminate 1.5s ease-in-out infinite;
    transition: none;
}

@keyframes gist-progress-indeterminate {
    0% {
        left: -30%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* ===== TRANSITION STATE (STREAMING JUST COMPLETED) ===== */
/* Brief "settling" animation: pause, pulse, settle to position */
.progress-track[data-streaming-complete] .progress-fill {
    animation: gist-progress-settle 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes gist-progress-settle {
    0% {
        transform: scaleY(1);
        filter: brightness(1);
    }
    30% {
        /* Brief glow - "ah, done!" moment */
        transform: scaleY(1.5);
        filter: brightness(1.3);
    }
    100% {
        transform: scaleY(1);
        filter: brightness(1);
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .progress-track[data-streaming="true"] .progress-fill {
        animation: none;
        left: 0;
        width: 50% !important;
    }
    
    .progress-track[data-streaming-complete] .progress-fill {
        animation: none;
    }
}

/* Scroll-snap mode styles removed - using boundary-based navigation instead */

/* ===== CONTENT ===== */
/* Matches narrative-reader-modular exactly */

.content {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0;
    background: var(--bg);
    transition: background 0.4s ease;
    /* Allow vertical scroll, prevent horizontal pan to avoid swipe conflicts */
    touch-action: pan-y;
}

.scroll-continue-hint {
    position: absolute;
    left: 50%;
    bottom: calc(var(--control-height) + 24px + env(safe-area-inset-bottom, 0));
    transform: translate(-50%, 8px);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: var(--text-primary);
    z-index: 90;
}

.scroll-continue-hint[data-visible="true"] {
    opacity: 1;
    transform: translate(-50%, 0);
}

.scroll-continue-hint__icon {
    width: 14px;
    height: 14px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    opacity: 0;
    transform: none;
    transition: opacity 0.25s ease;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-left: var(--safe-gutter);
    padding-right: var(--safe-gutter);
}

.slide.active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.slide-inner[data-gist-typewriting="true"] > :not([data-gist-typewriter-overlay]):not(.steelman-label-overlay):not([data-streaming-cursor]) {
    display: none !important;
}

[data-gist-typewriter-overlay] {
    white-space: pre-wrap;
}

.slide-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: var(--type-sm);
    line-height: var(--leading-loose);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.placeholder-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.placeholder-text {
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
}

.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    animation: dotPulse 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
    40% { opacity: 1; transform: scale(1); }
}

.slide-inner {
    max-width: var(--content-max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--reading-line) 0 48px;
    position: relative;
}

.streaming-cursor {
    /* Visual cursor to make token streaming feel obvious (ChatGPT-like). */
    display: inline-block;
    margin-left: 2px;
    color: var(--accent);
    opacity: 0.9;
    pointer-events: none;
    animation: streamingCursorBlink 1s steps(1, end) infinite;
}

@keyframes streamingCursorBlink {
    0%, 49% { opacity: 0.9; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .streaming-cursor {
        animation: none;
    }
}

.slide-inner p {
    width: 100%;
    max-width: 100%;
}

.slide-inner code {
    background: var(--code-inline-bg);
    border-radius: 4px;
    padding: 0.08em 0.3em;
    font-size: 0.92em;
}

.slide-inner pre {
    background: var(--code-block-bg);
    border: 1px solid var(--code-block-border);
    border-radius: 12px;
    padding: 16px;
    overflow: auto;
    margin: 12px 0 16px;
}

.slide-inner pre code {
    background: none;
    padding: 0;
}

.slide-inner .katex {
    background: var(--math-inline-bg);
    border-radius: 4px;
    padding: 0.06em 0.28em;
    box-decoration-break: clone;
}

.slide-inner .katex-display {
    background: var(--math-block-bg);
    border: 1px solid var(--math-block-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 12px 0 16px;
}

.slide-inner .katex-display .katex {
    background: none;
    padding: 0;
}

/* Author credit subheader - aligns with steelman label position */
.slide__subheader {
    margin-bottom: 24px;
}

.slide__subheader--credit {
    font-size: var(--type-xs); /* 12px at 18px baseline */
    font-weight: 400;
    line-height: var(--leading-loose);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    opacity: 0.85;
}

.slide-story-gist .slide-inner {
    position: relative;
    padding-bottom: calc(var(--control-height) + 48px);
}

/* STORY STYLES */
.slide-story-gist {
    font-size: var(--type-lg);
    font-weight: 700;
    line-height: var(--leading-normal);
    text-align: left;
}

.slide-story-gist p:first-child {
    margin-top: 0;
}

.slide-story-brief {
    font-size: var(--type-base);
    font-weight: 500;
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.slide-story-brief p {
    margin-bottom: 20px;
}

.story-slide-content {
    margin-bottom: var(--content-mirror-spacing);
}

/* Consolidated CTA styles */
.layer-cta {
    font-size: var(--type-sm);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    opacity: 0.8;
    transition: all 0.3s ease;
    font-weight: 500;
    line-height: var(--leading-loose);
    cursor: pointer;
    margin-bottom: calc(var(--control-height) + 16px);
    background: var(--gradient-horizontal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.layer-cta:hover {
    opacity: 1;
}

.layer-cta svg,
.layer-cta svg path {
    stroke: var(--accent);
    flex-shrink: 0;
    animation: gentleArrowPulse 2s ease-in-out infinite;
    transition: stroke 0.3s ease;
}

.layer-cta:hover svg,
.layer-cta:hover svg path {
    animation-duration: 0.8s;
    filter: brightness(0.85);
}

@keyframes gentleArrowPulse {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

.slide-story-brief ul li::marker,
.slide-story-gist ul li::marker {
    color: var(--accent);
}

/* ===== CTA NAVIGATION BUTTONS ===== */
/* "LOGIC →", "STEELMAN →", "ORIGINAL →" hints at end of layers */

.steelman-cta,
.logic-cta {
    margin-top: 32px;
    margin-bottom: calc(var(--control-height) + 16px);
}

/* ===== GIST/PYRAMID LAYER STYLES ===== */

.pyramid-main {
    font-size: var(--type-lg);
    font-weight: 700;
    line-height: var(--leading-normal);
    width: 100%;
}

.pyramid-supporting {
    list-style: none;
    padding: 0;
    margin-top: 24px;
}

.pyramid-supporting li {
    font-size: var(--type-md);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-left: 28px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pyramid-supporting li:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}

.pyramid-supporting li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}

.pyramid-supporting li:hover::before {
    color: var(--accent);
}

/* ===== LOGIC/DETAIL LAYER STYLES ===== */

.detail-argument {
    font-size: var(--type-lg);
    font-weight: 600;
    margin-bottom: 24px;
    line-height: var(--leading-normal);
    width: 100%;
}

.detail-argument p {
    margin: 0;
}

.detail-evidence {
    list-style: none;
    padding: 0;
}

.detail-evidence li {
    font-size: var(--type-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin-bottom: 20px;
    padding-left: 28px;
    position: relative;
}

.detail-evidence li:empty {
    display: none;
}

.detail-evidence li::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: var(--accent);
    font-weight: bold;
}

/* ===== LAYER LABEL OVERLAY STYLES ===== */

/* All slides with layer labels need positioning context so label can float above content */
.slide-story-gist,
.slide-story-brief,
.slide-argument-logic,
.slide-argument-counter,
.slide-argument-steelman {
    position: relative;
}

/* Label floats absolutely above slide-inner content, mirroring content-to-CTA spacing */
.slide-story-gist .steelman-label-overlay,
.slide-story-brief .steelman-label-overlay,
.slide-argument-logic .steelman-label-overlay,
.slide-argument-counter .steelman-label-overlay,
.slide-argument-steelman .steelman-label-overlay {
    position: absolute;
    top: calc(var(--reading-line) - var(--content-mirror-spacing));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 12px 0 10px;
    z-index: 10;
}

.steelman-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Layer-specific icon classes for section title overlays */
.gist-bolt,
.story-bolt,
.logic-bolt,
.counter-argument-bolt,
.steelman-bolt {
    width: 14px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.gist-bolt {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sunriseGradient" x1="0%25" y1="100%25" x2="100%25" y2="0%25"><stop offset="0%25" stop-color="%23FF6B6B"/><stop offset="50%25" stop-color="%23FF8E53"/><stop offset="100%25" stop-color="%23FFD93D"/></linearGradient></defs><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" fill="url(%23sunriseGradient)"/></svg>');
}

.story-bolt {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sunriseGradient" x1="0%25" y1="0%25" x2="100%25" y2="0%25"><stop offset="0%25" stop-color="%23FF6B6B"/><stop offset="50%25" stop-color="%23FF8E53"/><stop offset="100%25" stop-color="%23FFD93D"/></linearGradient></defs><path d="M3 16C6 16 6 8 9 8C12 8 12 12 15 12C18 12 18 6 21 6" stroke="url(%23sunriseGradient)" stroke-width="2.5" stroke-linecap="round" fill="none"/></svg>');
}

.logic-bolt {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sunriseGradient" x1="50%25" y1="100%25" x2="50%25" y2="0%25"><stop offset="0%25" stop-color="%23FF6B6B"/><stop offset="50%25" stop-color="%23FF8E53"/><stop offset="100%25" stop-color="%23FFD93D"/></linearGradient></defs><path d="M12 3L21 20H3L12 3Z" fill="url(%23sunriseGradient)"/></svg>');
}

.counter-argument-bolt {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sunriseGradient" x1="0%25" y1="100%25" x2="100%25" y2="0%25"><stop offset="0%25" stop-color="%23FF6B6B"/><stop offset="50%25" stop-color="%23FF8E53"/><stop offset="100%25" stop-color="%23FFD93D"/></linearGradient></defs><path d="M19 8H9C6.239 8 4 10.239 4 13C4 15.761 6.239 18 9 18H12" stroke="url(%23sunriseGradient)" stroke-width="2.5" stroke-linecap="round" fill="none"/><path d="M16 5L19 8L16 11" stroke="url(%23sunriseGradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>');
}

.steelman-bolt {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sunriseGradient" x1="0%25" y1="100%25" x2="100%25" y2="0%25"><stop offset="0%25" stop-color="%23FF6B6B"/><stop offset="50%25" stop-color="%23FF8E53"/><stop offset="100%25" stop-color="%23FFD93D"/></linearGradient></defs><path d="M4 20H9V13H15V6H20" stroke="url(%23sunriseGradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>');
}

.steelman-title {
    font-size: var(--type-xs);
    font-weight: 600;
    line-height: var(--leading-loose);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Grey text for better readability on light backgrounds */
    color: #888888;
}

/* ===== SCROLL HINT ===== */
/*
 * "Scroll for more" hint at the bottom of each slide.
 *
 * SIMPLER IS BETTER: The hint sits at the end of slide content.
 * When the bottom of content is visible, the hint is visible.
 * No JavaScript visibility detection needed.
 */
.reader-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 48px;
    padding-bottom: 24px;
    font-size: var(--type-xs);
    font-weight: 500;
    line-height: var(--leading-loose);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.reader-scroll-hint:hover {
    opacity: 0.8;
}

.reader-scroll-hint:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: 4px;
    border-radius: 4px;
}

.reader-scroll-hint svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Hide during typewriter animation */
.slide-inner[data-gist-typewriting="true"] .reader-scroll-hint {
    display: none;
}

/* Inverted theme for counter-argument layer */
.slide-argument-counter--inverted .reader-scroll-hint {
    color: var(--inverted-text-tertiary);
}

/* (Argument layer styles defined above in layer-specific sections) */

/* ===== COUNTER-ARGUMENT INVERTED THEME APPLICATION ===== */
/* Apply inverted color scheme to create visual disruption and force reader attention.
 * This prevents "lulled scrolling" where readers miss they're entering opposing viewpoint territory.
 */

.slide-argument-counter--inverted {
    background: transparent;
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease;
}

/* .slide-inner background removed - .content handles background, .slide is transparent */

/* Invert all text colors */
.slide-argument-counter--inverted .detail-argument {
    color: var(--inverted-text-primary);
}

.slide-argument-counter--inverted .detail-evidence li {
    color: var(--inverted-text-secondary);
}

.slide-argument-counter--inverted .detail-evidence li::before {
    color: var(--inverted-accent);
}

/* Invert layer label overlay - ensure good contrast on inverted background */
.slide-argument-counter--inverted .steelman-title {
    /* Light mode: dark background -> use gradient text */
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Invert CTA navigation button */
.slide-argument-counter--inverted .layer-cta {
    /* Keep gradient text for good contrast in both themes */
    filter: brightness(1.1);
}

.slide-argument-counter--inverted .layer-cta svg,
.slide-argument-counter--inverted .layer-cta svg path {
    stroke: var(--inverted-accent);
}

/* Invert the content area background when counter-argument is active */
/* Using both :has() for modern browsers and data attribute for compatibility */
/* Mobile Safari fix: Use .reader-root prefix for higher specificity */
.reader-root:has(.slide-argument-counter--inverted.active) .content,
.reader-root .content[data-counter-argument-active="true"] {
    background: #1C1C24 !important; /* Light mode: dark background */
    transition: background 0.4s ease;
}

@media (prefers-color-scheme: dark) {
    .reader-root:has(.slide-argument-counter--inverted.active) .content,
    .reader-root .content[data-counter-argument-active="true"] {
        background: #ffffff !important; /* Dark mode: light background */
    }

    /* Dark mode counter-argument: light background -> use grey text */
    .slide-argument-counter--inverted .steelman-title {
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: #888888;
        color: #888888;
    }
}

.slide-original {
    /* Keep structural element present but visually neutral */
    background: transparent;
}

.reader-root:has(.slide-original.active) {
    background: transparent;
}

.reader-root:has(.slide-original.active) .slide-original {
    pointer-events: none;
}

/* Original layer .slide-inner visibility is context-specific:
 * - Extension (style-extension.css): Hidden to avoid duplicating underlying page
 * - Web (style-web.css): Visible to show CTA UI
 */

/* ORIGINAL LAYER: Apply page padding via CSS when in original layer mode.
 * This eliminates complex JS state management for 6 padding values.
 * The padding prevents page content from being obscured by reader controls.
 */
.reader-root[data-active-layer="original"] body {
    padding-top: 0;
    padding-bottom: var(--control-height);
}

.reader-root[data-active-layer="original"] html {
    scroll-padding-top: 0;
    scroll-padding-bottom: var(--control-height);
}

.reader-root:has(.slide-original.active) .content {
    pointer-events: none;
}

.original-layer-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.original-layer-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.original-layer-eyebrow {
    font-size: var(--type-sm);
    font-weight: 600;
    line-height: var(--leading-loose);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.original-layer-title {
    font-size: var(--type-lg);
    line-height: var(--leading-tight);
    font-weight: 700;
    font-family: var(--reader-font-title);
    color: var(--text-primary);
    margin: 0;
}

.original-layer-author {
    font-size: var(--type-sm);
    line-height: var(--leading-loose);
    color: var(--text-secondary);
    margin: 0;
}

.original-cta-button {
    width: 100%;
    padding: 20px 24px;
    border-radius: 16px;
    border: none;
    font-size: var(--type-base);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #000000; /* Black text for contrast on sunrise gradient */
    background: var(--gradient);
    box-shadow: 0 24px 48px rgba(28, 28, 36, 0.16);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.original-cta-button:hover,
.original-cta-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 28px 64px rgba(28, 28, 36, 0.22);
    /* Focus outline handled by global :focus-visible rule */
}

.original-cta-button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.4);
    box-shadow: none;
}

.original-shortcut {
    font-size: var(--type-sm);
    color: var(--text-tertiary);
    line-height: var(--leading-loose);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ===== FOOTER CONTROLS ===== */
/* Matches narrative-reader-modular exactly */

.controls {
    height: var(--control-height);
    background: var(--bg);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    position: relative;
    /* iOS safe area insets - prevents address bar from covering controls */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.controls-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}

.nav-cluster {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
}

.bolt-stack {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-primary); /* SVG stroke="currentColor" inherits this */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    /* Mobile touch optimizations - see .touchable utility */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}

.nav-btn:hover:not(:disabled) {
    background: var(--wash);
    border-color: var(--text-secondary);
}

.nav-btn:active:not(:disabled),
.nav-btn:focus-visible {
    background: var(--wash);
    border-color: var(--text-secondary);
    /* Focus outline handled by global :focus-visible rule */
}

.nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    border-style: dashed; /* WCAG 1.4.1: Shape cue beyond color/opacity */
}

.nav-btn:disabled svg {
    opacity: 1 !important;
}

.audio-controls {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.action-controls {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Mobile touch optimizations - see .touchable utility */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.play-btn:hover {
    border-color: var(--text-secondary);
    background: var(--wash);
}

.play-btn.playing {
    background: var(--gradient);
    border: none;
    opacity: 0.9;
    animation: gentlePulse 3s ease-in-out infinite;
}

@keyframes gentlePulse {
    0%, 100% { 
        opacity: 0.9;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.02);
    }
}

.play-btn svg {
    fill: var(--text-primary);
    transition: fill 0.3s ease;
}

.play-btn.playing svg {
    fill: #000000; /* Black icon for contrast on sunrise gradient */
}

.play-btn:active { 
    transform: scale(0.95); 
    background: var(--wash);
    border-color: var(--text-secondary);
}

.play-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed; /* WCAG 1.4.1: Shape cue beyond color/opacity */
}

/* ===== BOLT BUTTON (replaces play button) ===== */
/* Central action button that shows bolt icon (gist available/trigger) or X (close) */

.bolt-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Mobile touch optimizations */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.bolt-btn:hover:not(:disabled) {
    border-color: var(--text-secondary);
    background: var(--wash);
}

.bolt-btn:active:not(:disabled) {
    transform: scale(0.95);
    background: var(--wash);
    border-color: var(--text-secondary);
}

.bolt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed; /* WCAG 1.4.1: Shape cue beyond color/opacity */
}

.bolt-btn svg {
    fill: var(--text-primary);
    transition: fill 0.2s ease;
}

/* State A: Gist available - sunrise gradient background */
.bolt-btn[data-variant="available"] {
    background: var(--gradient);
    border: none;
    color: #000000;
}

.bolt-btn[data-variant="available"]:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
    background: var(--gradient);
    border: none;
}

/* Tooltip - positioned ABOVE button (since controls are at bottom of viewport).
 * Centered horizontally since bolt button is in the center of the nav cluster. */
.bolt-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--ink);
    color: var(--bg);
    font-size: var(--type-xs);
    font-weight: 500;
    line-height: var(--leading-loose);
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 1000;
}

.bolt-btn[data-variant="available"]:hover .bolt-tooltip {
    opacity: 1;
}

/* Hide esc tooltip by default and when bolt button is NOT in loaded state */
.bolt-tooltip--esc {
    opacity: 0;
}

.bolt-btn:not([data-state="loaded"]):hover .bolt-tooltip--esc {
    opacity: 0;
}

/* Show "Esc to dismiss" tooltip when bolt button is in loaded state (showing X) */
.bolt-btn[data-state="loaded"]:hover .bolt-tooltip--esc {
    opacity: 1;
}

/* Hide regular tooltip when showing esc tooltip in loaded state */
.bolt-btn[data-state="loaded"]:hover .bolt-tooltip:not(.bolt-tooltip--esc) {
    opacity: 0;
}

/* Keyboard key styling for Esc in tooltip */
.bolt-tooltip--esc kbd,
.bar-tooltip--esc kbd {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.9em;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Generic bar tooltip - used by nav buttons, share button.
 * Positioned ABOVE button (since controls are at bottom of viewport).
 * Same styling as .bolt-tooltip for consistency. */
.bar-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--ink);
    color: var(--bg);
    font-size: var(--type-xs);
    font-weight: 500;
    line-height: var(--leading-loose);
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 1000;
}

/* Show tooltip on button hover (when button is not disabled) */
.nav-btn:hover:not(:disabled) .bar-tooltip,
.share-btn:hover .bar-tooltip {
    opacity: 1;
}

/* Prevent competing hover tooltips while the reload tooltip auto-shows.
 * The reload tooltip is a brief "notification" and should be the only one visible. */
.reader-root[data-tooltip-lock="reload"] .nav-btn:hover:not(:disabled) .bar-tooltip,
.reader-root[data-tooltip-lock="reload"] .share-btn:hover .bar-tooltip,
.reader-root[data-tooltip-lock="reload"] .bolt-btn:hover .bolt-tooltip,
.reader-root[data-tooltip-lock="reload"] .summary-reload-button:hover .reload-tooltip {
    opacity: 0;
}

/* Share button is at right edge of viewport - extend tooltip leftward to prevent clipping */
.share-btn .bar-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

/* Breathing animation for indeterminate loading state */
.bolt-btn[data-breathing="true"] {
    animation: bolt-breathe 3.5s ease-in-out infinite;
    background: var(--gradient);
    border: none;
    color: #000000;
}

.bolt-btn[data-breathing="true"]:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
    background: var(--gradient);
    border: none;
}

@keyframes bolt-breathe {
    0%, 100% { 
        opacity: 0.3;
    }
    50% { 
        opacity: 1;
    }
}

/* Icon visibility based on state */
.bolt-btn [data-close-icon] {
    display: none;
}

.bolt-btn[data-state="loaded"] [data-bolt-icon] {
    display: none;
}

.bolt-btn[data-state="loaded"] [data-close-icon] {
    display: block;
    fill: none; /* Close icon is stroke-based - override .bolt-btn svg fill rule */
}

/* Reload overlay button: separate action layered on top of the bolt button.
 * Styled to match the original header reload button that looked great.
 * Uses same box-shadow, animation, and hover effects for visual consistency.
 */
.bolt-reload-btn {
    position: absolute;
    inset: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient);
    border: none;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.25);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
    animation: reload-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.bolt-reload-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
}

.bolt-reload-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.bolt-reload-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.bolt-reload-btn [data-bolt-reload-icon] {
    width: 18px;
    height: 18px;
    stroke: #000000; /* Black for contrast on sunrise gradient */
    fill: none;
}

/* Reload button tooltip - positioned ABOVE button like other footer tooltips.
 * Uses same styling as .bar-tooltip for visual consistency.
 * Appears on hover to communicate "New version available" to users. */
.bolt-reload-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--ink);
    color: var(--bg);
    font-size: var(--type-xs);
    font-weight: 500;
    line-height: var(--leading-loose);
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 1000;
}

/* Show tooltip on hover when button is not disabled */
.bolt-reload-btn:hover:not(:disabled) .bolt-reload-tooltip {
    opacity: 1;
}

/* Auto-show tooltip on first appearance to grab attention.
 * Added by render-controls.js when reload becomes available.
 * Removed by events.js after first mouseenter to revert to hover-only behavior.
 * This creates a "notification" effect that acknowledges user attention. */
.bolt-reload-btn.tooltip-auto-show .bolt-reload-tooltip {
    opacity: 1;
}

/* ===== SHARE MODAL ===== */

.share-modal {
    position: absolute;
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: #000000;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.1);
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

.share-modal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.share-modal::before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: #000000;
    transform: rotate(45deg);
}

.modal-title {
    font-size: var(--type-base);
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Gradient text effect - see .gradient-text-horizontal utility */
    background: var(--gradient-horizontal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-title svg {
    width: 20px;
    height: 20px;
    fill: url(#modalBoltGradient);
    flex-shrink: 0;
}

.privacy-options {
    margin-bottom: 16px;
}

.privacy-option {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.privacy-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.privacy-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.privacy-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    fill: #666;
}

.privacy-option.selected .privacy-icon {
    fill: url(#iconGradient);
}

.privacy-check {
    margin-left: auto;
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    fill: url(#iconGradient);
}

.privacy-option.selected .privacy-check {
    opacity: 1;
    transform: scale(1);
}

.privacy-label {
    flex: 1;
}

.privacy-title {
    font-size: var(--type-sm);
    font-weight: 500;
    line-height: var(--leading-loose);
    color: var(--text-tertiary);
    margin-bottom: 2px;
    transition: all 0.3s ease;
}

.privacy-option.selected .privacy-title {
    /* Gradient text effect - see .gradient-text-horizontal utility */
    background: var(--gradient-horizontal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.privacy-description {
    font-size: var(--type-xs);
    line-height: var(--leading-loose);
    color: var(--modal-text-light);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.privacy-option.selected .privacy-description {
    opacity: 1;
}

.modal-divider {
    height: 1px;
    background: var(--divider-dark);
    margin: 16px 0;
}

.copy-status {
    font-size: var(--type-xs);
    line-height: var(--leading-loose);
    color: var(--modal-text-light);
    margin-bottom: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
}

.copy-status.visible {
    opacity: 0.8;
}

.copy-link-btn {
    width: 100%;
    padding: 10px 16px;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 8px;
    font-size: var(--type-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.copy-link-btn:hover {
    background: #000000;
    border: 1px solid #333;
}

.copy-link-btn span {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.copy-link-btn:hover span {
    /* Gradient text effect - see .gradient-text-horizontal utility */
    background: var(--gradient-horizontal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.copy-link-btn.copied {
    background: var(--gradient);
    color: #000000;
}

.copy-link-btn.copied:hover {
    filter: brightness(1.08);
    background: var(--gradient);
    border: none;
}

.copy-link-btn.copied span {
    -webkit-text-fill-color: #000000;
}

/* ===== ERROR TOAST ===== */
/* Tasteful error notification for reader failures */

.gist-toast-container {
    position: fixed;
    bottom: calc(var(--control-height) + 24px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-float);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.gist-toast {
    background: rgba(239, 68, 68, 0.95);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: var(--modal-text-light);
    padding: 14px 20px;
    border-radius: 16px;
    font-size: var(--type-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
    box-shadow:
        0 24px 48px rgba(239, 68, 68, 0.25),
        0 8px 16px rgba(28, 28, 36, 0.15),
        0 0 1px rgba(255, 255, 255, 0.3) inset;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    animation: toastFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: auto;
    /* iOS safe area - ensure toast doesn't get covered by address bar */
    margin-bottom: env(safe-area-inset-bottom, 0);
}

.gist-toast--error {
    /* Subtle gradient overlay for visual depth */
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.96),
        rgba(239, 68, 68, 0.94));
}

.gist-toast__emoji {
    font-size: var(--type-md);
    line-height: 1;
    flex-shrink: 0;
}

.gist-toast__message {
    line-height: var(--leading-normal);
}

.gist-toast.fade-out {
    animation: toastFadeOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .gist-toast {
        background: rgba(239, 68, 68, 0.9);
        box-shadow:
            0 24px 48px rgba(0, 0, 0, 0.4),
            0 8px 16px rgba(0, 0, 0, 0.25),
            0 0 1px rgba(255, 255, 255, 0.2) inset;
    }

    .gist-toast--error {
        background: linear-gradient(135deg,
            rgba(239, 68, 68, 0.92),
            rgba(239, 68, 68, 0.88));
    }
}

/* Mobile optimization - slightly larger on small screens */
@media (max-width: 480px) {
    .gist-toast {
        font-size: var(--type-base);
        padding: 16px 22px;
        max-width: calc(100vw - 48px);
    }

    .gist-toast-container {
        bottom: calc(var(--control-height) + 16px);
    }
}

/* Ensure toast doesn't interfere with reader interactions */
.reader-root:has(.slide-original.active) .gist-toast-container {
    bottom: 80px; /* Move higher when on original layer */
}

/* ===== FOCUS ===== */
/* WCAG 2.2 AA Compliant Focus System
 * - High-contrast outline using ink/white for maximum visibility (16:1+ contrast)
 * - Subtle brand coral glow adds warmth without compromising accessibility
 * - 2px offset prevents outline from touching content
 * - Applies to all focusable elements via :focus-visible
 */

*:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-glow);
}

/* ===== KaTeX Math Rendering ===== */

/* stylelint-disable font-family-no-missing-generic-family-keyword */
@font-face {
  font-family: "KaTeX_AMS";
  src: url(katex-fonts/KaTeX_AMS-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_AMS-Regular.woff) format("woff"), url(katex-fonts/KaTeX_AMS-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Caligraphic";
  src: url(katex-fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"), url(katex-fonts/KaTeX_Caligraphic-Bold.woff) format("woff"), url(katex-fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Caligraphic";
  src: url(katex-fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Caligraphic-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Fraktur";
  src: url(katex-fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"), url(katex-fonts/KaTeX_Fraktur-Bold.woff) format("woff"), url(katex-fonts/KaTeX_Fraktur-Bold.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Fraktur";
  src: url(katex-fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Fraktur-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Fraktur-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Main";
  src: url(katex-fonts/KaTeX_Main-Bold.woff2) format("woff2"), url(katex-fonts/KaTeX_Main-Bold.woff) format("woff"), url(katex-fonts/KaTeX_Main-Bold.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Main";
  src: url(katex-fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"), url(katex-fonts/KaTeX_Main-BoldItalic.woff) format("woff"), url(katex-fonts/KaTeX_Main-BoldItalic.ttf) format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Main";
  src: url(katex-fonts/KaTeX_Main-Italic.woff2) format("woff2"), url(katex-fonts/KaTeX_Main-Italic.woff) format("woff"), url(katex-fonts/KaTeX_Main-Italic.ttf) format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Main";
  src: url(katex-fonts/KaTeX_Main-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Main-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Main-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Math";
  src: url(katex-fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"), url(katex-fonts/KaTeX_Math-BoldItalic.woff) format("woff"), url(katex-fonts/KaTeX_Math-BoldItalic.ttf) format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Math";
  src: url(katex-fonts/KaTeX_Math-Italic.woff2) format("woff2"), url(katex-fonts/KaTeX_Math-Italic.woff) format("woff"), url(katex-fonts/KaTeX_Math-Italic.ttf) format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_SansSerif";
  src: url(katex-fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"), url(katex-fonts/KaTeX_SansSerif-Bold.woff) format("woff"), url(katex-fonts/KaTeX_SansSerif-Bold.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_SansSerif";
  src: url(katex-fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"), url(katex-fonts/KaTeX_SansSerif-Italic.woff) format("woff"), url(katex-fonts/KaTeX_SansSerif-Italic.ttf) format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_SansSerif";
  src: url(katex-fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_SansSerif-Regular.woff) format("woff"), url(katex-fonts/KaTeX_SansSerif-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Script";
  src: url(katex-fonts/KaTeX_Script-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Script-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Script-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Size1";
  src: url(katex-fonts/KaTeX_Size1-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Size1-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Size1-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Size2";
  src: url(katex-fonts/KaTeX_Size2-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Size2-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Size2-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Size3";
  src: url(katex-fonts/KaTeX_Size3-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Size3-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Size3-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Size4";
  src: url(katex-fonts/KaTeX_Size4-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Size4-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Size4-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "KaTeX_Typewriter";
  src: url(katex-fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"), url(katex-fonts/KaTeX_Typewriter-Regular.woff) format("woff"), url(katex-fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.katex {
  font: normal 1.21em KaTeX_Main, Times New Roman, serif;
  line-height: 1.2;
  text-indent: 0;
  text-rendering: auto;
}
.katex * {
  -ms-high-contrast-adjust: none !important;
}
.katex * {
  border-color: currentColor;
}
.katex .katex-version::after {
  content: "0.16.27";
}
.katex .katex-mathml {
  /* Accessibility hack to only show to screen readers
   Found at: http://a11yproject.com/posts/how-to-hide-content/ */
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.katex .katex-html {
  /* \newline is an empty block at top level, between .base elements */
}
.katex .katex-html > .newline {
  display: block;
}
.katex .base {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.katex .strut {
  display: inline-block;
}
.katex .textbf {
  font-weight: bold;
}
.katex .textit {
  font-style: italic;
}
.katex .textrm {
  font-family: KaTeX_Main;
}
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .texttt {
  font-family: KaTeX_Typewriter;
}
.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}
.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}
.katex .mathrm {
  font-style: normal;
}
.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: bold;
}
.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-weight: bold;
  font-style: italic;
}
.katex .amsrm {
  font-family: KaTeX_AMS;
}
.katex .mathbb,
.katex .textbb {
  font-family: KaTeX_AMS;
}
.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}
.katex .mathfrak,
.katex .textfrak {
  font-family: KaTeX_Fraktur;
}
.katex .mathboldfrak,
.katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: bold;
}
.katex .mathtt {
  font-family: KaTeX_Typewriter;
}
.katex .mathscr,
.katex .textscr {
  font-family: KaTeX_Script;
}
.katex .mathsf,
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .mathboldsf,
.katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: bold;
}
.katex .mathsfit,
.katex .mathitsf,
.katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}
.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}
.katex .vlist-t {
  display: inline-table;
  table-layout: fixed;
  border-collapse: collapse;
}
.katex .vlist-r {
  display: table-row;
}
.katex .vlist {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
}
.katex .vlist > span {
  display: block;
  height: 0;
  position: relative;
}
.katex .vlist > span > span {
  display: inline-block;
}
.katex .vlist > span > .pstrut {
  overflow: hidden;
  width: 0;
}
.katex .vlist-t2 {
  margin-right: -2px;
}
.katex .vlist-s {
  display: table-cell;
  vertical-align: bottom;
  font-size: 1px;
  width: 2px;
  min-width: 2px;
}
.katex .vbox {
  display: inline-flex;
  flex-direction: column;
  align-items: baseline;
}
.katex .hbox {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
}
.katex .thinbox {
  display: inline-flex;
  flex-direction: row;
  width: 0;
  max-width: 0;
}
.katex .msupsub {
  text-align: left;
}
.katex .mfrac > span > span {
  text-align: center;
}
.katex .mfrac .frac-line {
  display: inline-block;
  width: 100%;
  border-bottom-style: solid;
}
.katex .mfrac .frac-line,
.katex .overline .overline-line,
.katex .underline .underline-line,
.katex .hline,
.katex .hdashline,
.katex .rule {
  min-height: 1px;
}
.katex .mspace {
  display: inline-block;
}
.katex .llap,
.katex .rlap,
.katex .clap {
  width: 0;
  position: relative;
}
.katex .llap > .inner,
.katex .rlap > .inner,
.katex .clap > .inner {
  position: absolute;
}
.katex .llap > .fix,
.katex .rlap > .fix,
.katex .clap > .fix {
  display: inline-block;
}
.katex .llap > .inner {
  right: 0;
}
.katex .rlap > .inner,
.katex .clap > .inner {
  left: 0;
}
.katex .clap > .inner > span {
  margin-left: -50%;
  margin-right: 50%;
}
.katex .rule {
  display: inline-block;
  border: solid 0;
  position: relative;
}
.katex .overline .overline-line,
.katex .underline .underline-line,
.katex .hline {
  display: inline-block;
  width: 100%;
  border-bottom-style: solid;
}
.katex .hdashline {
  display: inline-block;
  width: 100%;
  border-bottom-style: dashed;
}
.katex .sqrt > .root {
  /* These values are taken from the definition of `\r@@t`,
   `\mkern 5mu` and `\mkern -10mu`. */
  margin-left: 0.2777777778em;
  margin-right: -0.5555555556em;
}
.katex .sizing.reset-size1.size1,
.katex .fontsize-ensurer.reset-size1.size1 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size1.size2,
.katex .fontsize-ensurer.reset-size1.size2 {
  /* stylelint-disable-next-line */
  font-size: 1.2em;
}
.katex .sizing.reset-size1.size3,
.katex .fontsize-ensurer.reset-size1.size3 {
  /* stylelint-disable-next-line */
  font-size: 1.4em;
}
.katex .sizing.reset-size1.size4,
.katex .fontsize-ensurer.reset-size1.size4 {
  /* stylelint-disable-next-line */
  font-size: 1.6em;
}
.katex .sizing.reset-size1.size5,
.katex .fontsize-ensurer.reset-size1.size5 {
  /* stylelint-disable-next-line */
  font-size: 1.8em;
}
.katex .sizing.reset-size1.size6,
.katex .fontsize-ensurer.reset-size1.size6 {
  /* stylelint-disable-next-line */
  font-size: 2em;
}
.katex .sizing.reset-size1.size7,
.katex .fontsize-ensurer.reset-size1.size7 {
  /* stylelint-disable-next-line */
  font-size: 2.4em;
}
.katex .sizing.reset-size1.size8,
.katex .fontsize-ensurer.reset-size1.size8 {
  /* stylelint-disable-next-line */
  font-size: 2.88em;
}
.katex .sizing.reset-size1.size9,
.katex .fontsize-ensurer.reset-size1.size9 {
  /* stylelint-disable-next-line */
  font-size: 3.456em;
}
.katex .sizing.reset-size1.size10,
.katex .fontsize-ensurer.reset-size1.size10 {
  /* stylelint-disable-next-line */
  font-size: 4.148em;
}
.katex .sizing.reset-size1.size11,
.katex .fontsize-ensurer.reset-size1.size11 {
  /* stylelint-disable-next-line */
  font-size: 4.976em;
}
.katex .sizing.reset-size2.size1,
.katex .fontsize-ensurer.reset-size2.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.8333333333em;
}
.katex .sizing.reset-size2.size2,
.katex .fontsize-ensurer.reset-size2.size2 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size2.size3,
.katex .fontsize-ensurer.reset-size2.size3 {
  /* stylelint-disable-next-line */
  font-size: 1.1666666667em;
}
.katex .sizing.reset-size2.size4,
.katex .fontsize-ensurer.reset-size2.size4 {
  /* stylelint-disable-next-line */
  font-size: 1.3333333333em;
}
.katex .sizing.reset-size2.size5,
.katex .fontsize-ensurer.reset-size2.size5 {
  /* stylelint-disable-next-line */
  font-size: 1.5em;
}
.katex .sizing.reset-size2.size6,
.katex .fontsize-ensurer.reset-size2.size6 {
  /* stylelint-disable-next-line */
  font-size: 1.6666666667em;
}
.katex .sizing.reset-size2.size7,
.katex .fontsize-ensurer.reset-size2.size7 {
  /* stylelint-disable-next-line */
  font-size: 2em;
}
.katex .sizing.reset-size2.size8,
.katex .fontsize-ensurer.reset-size2.size8 {
  /* stylelint-disable-next-line */
  font-size: 2.4em;
}
.katex .sizing.reset-size2.size9,
.katex .fontsize-ensurer.reset-size2.size9 {
  /* stylelint-disable-next-line */
  font-size: 2.88em;
}
.katex .sizing.reset-size2.size10,
.katex .fontsize-ensurer.reset-size2.size10 {
  /* stylelint-disable-next-line */
  font-size: 3.4566666667em;
}
.katex .sizing.reset-size2.size11,
.katex .fontsize-ensurer.reset-size2.size11 {
  /* stylelint-disable-next-line */
  font-size: 4.1466666667em;
}
.katex .sizing.reset-size3.size1,
.katex .fontsize-ensurer.reset-size3.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.7142857143em;
}
.katex .sizing.reset-size3.size2,
.katex .fontsize-ensurer.reset-size3.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.8571428571em;
}
.katex .sizing.reset-size3.size3,
.katex .fontsize-ensurer.reset-size3.size3 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size3.size4,
.katex .fontsize-ensurer.reset-size3.size4 {
  /* stylelint-disable-next-line */
  font-size: 1.1428571429em;
}
.katex .sizing.reset-size3.size5,
.katex .fontsize-ensurer.reset-size3.size5 {
  /* stylelint-disable-next-line */
  font-size: 1.2857142857em;
}
.katex .sizing.reset-size3.size6,
.katex .fontsize-ensurer.reset-size3.size6 {
  /* stylelint-disable-next-line */
  font-size: 1.4285714286em;
}
.katex .sizing.reset-size3.size7,
.katex .fontsize-ensurer.reset-size3.size7 {
  /* stylelint-disable-next-line */
  font-size: 1.7142857143em;
}
.katex .sizing.reset-size3.size8,
.katex .fontsize-ensurer.reset-size3.size8 {
  /* stylelint-disable-next-line */
  font-size: 2.0571428571em;
}
.katex .sizing.reset-size3.size9,
.katex .fontsize-ensurer.reset-size3.size9 {
  /* stylelint-disable-next-line */
  font-size: 2.4685714286em;
}
.katex .sizing.reset-size3.size10,
.katex .fontsize-ensurer.reset-size3.size10 {
  /* stylelint-disable-next-line */
  font-size: 2.9628571429em;
}
.katex .sizing.reset-size3.size11,
.katex .fontsize-ensurer.reset-size3.size11 {
  /* stylelint-disable-next-line */
  font-size: 3.5542857143em;
}
.katex .sizing.reset-size4.size1,
.katex .fontsize-ensurer.reset-size4.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.625em;
}
.katex .sizing.reset-size4.size2,
.katex .fontsize-ensurer.reset-size4.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.75em;
}
.katex .sizing.reset-size4.size3,
.katex .fontsize-ensurer.reset-size4.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.875em;
}
.katex .sizing.reset-size4.size4,
.katex .fontsize-ensurer.reset-size4.size4 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size4.size5,
.katex .fontsize-ensurer.reset-size4.size5 {
  /* stylelint-disable-next-line */
  font-size: 1.125em;
}
.katex .sizing.reset-size4.size6,
.katex .fontsize-ensurer.reset-size4.size6 {
  /* stylelint-disable-next-line */
  font-size: 1.25em;
}
.katex .sizing.reset-size4.size7,
.katex .fontsize-ensurer.reset-size4.size7 {
  /* stylelint-disable-next-line */
  font-size: 1.5em;
}
.katex .sizing.reset-size4.size8,
.katex .fontsize-ensurer.reset-size4.size8 {
  /* stylelint-disable-next-line */
  font-size: 1.8em;
}
.katex .sizing.reset-size4.size9,
.katex .fontsize-ensurer.reset-size4.size9 {
  /* stylelint-disable-next-line */
  font-size: 2.16em;
}
.katex .sizing.reset-size4.size10,
.katex .fontsize-ensurer.reset-size4.size10 {
  /* stylelint-disable-next-line */
  font-size: 2.5925em;
}
.katex .sizing.reset-size4.size11,
.katex .fontsize-ensurer.reset-size4.size11 {
  /* stylelint-disable-next-line */
  font-size: 3.11em;
}
.katex .sizing.reset-size5.size1,
.katex .fontsize-ensurer.reset-size5.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.5555555556em;
}
.katex .sizing.reset-size5.size2,
.katex .fontsize-ensurer.reset-size5.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.6666666667em;
}
.katex .sizing.reset-size5.size3,
.katex .fontsize-ensurer.reset-size5.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.7777777778em;
}
.katex .sizing.reset-size5.size4,
.katex .fontsize-ensurer.reset-size5.size4 {
  /* stylelint-disable-next-line */
  font-size: 0.8888888889em;
}
.katex .sizing.reset-size5.size5,
.katex .fontsize-ensurer.reset-size5.size5 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size5.size6,
.katex .fontsize-ensurer.reset-size5.size6 {
  /* stylelint-disable-next-line */
  font-size: 1.1111111111em;
}
.katex .sizing.reset-size5.size7,
.katex .fontsize-ensurer.reset-size5.size7 {
  /* stylelint-disable-next-line */
  font-size: 1.3333333333em;
}
.katex .sizing.reset-size5.size8,
.katex .fontsize-ensurer.reset-size5.size8 {
  /* stylelint-disable-next-line */
  font-size: 1.6em;
}
.katex .sizing.reset-size5.size9,
.katex .fontsize-ensurer.reset-size5.size9 {
  /* stylelint-disable-next-line */
  font-size: 1.92em;
}
.katex .sizing.reset-size5.size10,
.katex .fontsize-ensurer.reset-size5.size10 {
  /* stylelint-disable-next-line */
  font-size: 2.3044444444em;
}
.katex .sizing.reset-size5.size11,
.katex .fontsize-ensurer.reset-size5.size11 {
  /* stylelint-disable-next-line */
  font-size: 2.7644444444em;
}
.katex .sizing.reset-size6.size1,
.katex .fontsize-ensurer.reset-size6.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.5em;
}
.katex .sizing.reset-size6.size2,
.katex .fontsize-ensurer.reset-size6.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.6em;
}
.katex .sizing.reset-size6.size3,
.katex .fontsize-ensurer.reset-size6.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.7em;
}
.katex .sizing.reset-size6.size4,
.katex .fontsize-ensurer.reset-size6.size4 {
  /* stylelint-disable-next-line */
  font-size: 0.8em;
}
.katex .sizing.reset-size6.size5,
.katex .fontsize-ensurer.reset-size6.size5 {
  /* stylelint-disable-next-line */
  font-size: 0.9em;
}
.katex .sizing.reset-size6.size6,
.katex .fontsize-ensurer.reset-size6.size6 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size6.size7,
.katex .fontsize-ensurer.reset-size6.size7 {
  /* stylelint-disable-next-line */
  font-size: 1.2em;
}
.katex .sizing.reset-size6.size8,
.katex .fontsize-ensurer.reset-size6.size8 {
  /* stylelint-disable-next-line */
  font-size: 1.44em;
}
.katex .sizing.reset-size6.size9,
.katex .fontsize-ensurer.reset-size6.size9 {
  /* stylelint-disable-next-line */
  font-size: 1.728em;
}
.katex .sizing.reset-size6.size10,
.katex .fontsize-ensurer.reset-size6.size10 {
  /* stylelint-disable-next-line */
  font-size: 2.074em;
}
.katex .sizing.reset-size6.size11,
.katex .fontsize-ensurer.reset-size6.size11 {
  /* stylelint-disable-next-line */
  font-size: 2.488em;
}
.katex .sizing.reset-size7.size1,
.katex .fontsize-ensurer.reset-size7.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.4166666667em;
}
.katex .sizing.reset-size7.size2,
.katex .fontsize-ensurer.reset-size7.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.5em;
}
.katex .sizing.reset-size7.size3,
.katex .fontsize-ensurer.reset-size7.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.5833333333em;
}
.katex .sizing.reset-size7.size4,
.katex .fontsize-ensurer.reset-size7.size4 {
  /* stylelint-disable-next-line */
  font-size: 0.6666666667em;
}
.katex .sizing.reset-size7.size5,
.katex .fontsize-ensurer.reset-size7.size5 {
  /* stylelint-disable-next-line */
  font-size: 0.75em;
}
.katex .sizing.reset-size7.size6,
.katex .fontsize-ensurer.reset-size7.size6 {
  /* stylelint-disable-next-line */
  font-size: 0.8333333333em;
}
.katex .sizing.reset-size7.size7,
.katex .fontsize-ensurer.reset-size7.size7 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size7.size8,
.katex .fontsize-ensurer.reset-size7.size8 {
  /* stylelint-disable-next-line */
  font-size: 1.2em;
}
.katex .sizing.reset-size7.size9,
.katex .fontsize-ensurer.reset-size7.size9 {
  /* stylelint-disable-next-line */
  font-size: 1.44em;
}
.katex .sizing.reset-size7.size10,
.katex .fontsize-ensurer.reset-size7.size10 {
  /* stylelint-disable-next-line */
  font-size: 1.7283333333em;
}
.katex .sizing.reset-size7.size11,
.katex .fontsize-ensurer.reset-size7.size11 {
  /* stylelint-disable-next-line */
  font-size: 2.0733333333em;
}
.katex .sizing.reset-size8.size1,
.katex .fontsize-ensurer.reset-size8.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.3472222222em;
}
.katex .sizing.reset-size8.size2,
.katex .fontsize-ensurer.reset-size8.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.4166666667em;
}
.katex .sizing.reset-size8.size3,
.katex .fontsize-ensurer.reset-size8.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.4861111111em;
}
.katex .sizing.reset-size8.size4,
.katex .fontsize-ensurer.reset-size8.size4 {
  /* stylelint-disable-next-line */
  font-size: 0.5555555556em;
}
.katex .sizing.reset-size8.size5,
.katex .fontsize-ensurer.reset-size8.size5 {
  /* stylelint-disable-next-line */
  font-size: 0.625em;
}
.katex .sizing.reset-size8.size6,
.katex .fontsize-ensurer.reset-size8.size6 {
  /* stylelint-disable-next-line */
  font-size: 0.6944444444em;
}
.katex .sizing.reset-size8.size7,
.katex .fontsize-ensurer.reset-size8.size7 {
  /* stylelint-disable-next-line */
  font-size: 0.8333333333em;
}
.katex .sizing.reset-size8.size8,
.katex .fontsize-ensurer.reset-size8.size8 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size8.size9,
.katex .fontsize-ensurer.reset-size8.size9 {
  /* stylelint-disable-next-line */
  font-size: 1.2em;
}
.katex .sizing.reset-size8.size10,
.katex .fontsize-ensurer.reset-size8.size10 {
  /* stylelint-disable-next-line */
  font-size: 1.4402777778em;
}
.katex .sizing.reset-size8.size11,
.katex .fontsize-ensurer.reset-size8.size11 {
  /* stylelint-disable-next-line */
  font-size: 1.7277777778em;
}
.katex .sizing.reset-size9.size1,
.katex .fontsize-ensurer.reset-size9.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.2893518519em;
}
.katex .sizing.reset-size9.size2,
.katex .fontsize-ensurer.reset-size9.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.3472222222em;
}
.katex .sizing.reset-size9.size3,
.katex .fontsize-ensurer.reset-size9.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.4050925926em;
}
.katex .sizing.reset-size9.size4,
.katex .fontsize-ensurer.reset-size9.size4 {
  /* stylelint-disable-next-line */
  font-size: 0.462962963em;
}
.katex .sizing.reset-size9.size5,
.katex .fontsize-ensurer.reset-size9.size5 {
  /* stylelint-disable-next-line */
  font-size: 0.5208333333em;
}
.katex .sizing.reset-size9.size6,
.katex .fontsize-ensurer.reset-size9.size6 {
  /* stylelint-disable-next-line */
  font-size: 0.5787037037em;
}
.katex .sizing.reset-size9.size7,
.katex .fontsize-ensurer.reset-size9.size7 {
  /* stylelint-disable-next-line */
  font-size: 0.6944444444em;
}
.katex .sizing.reset-size9.size8,
.katex .fontsize-ensurer.reset-size9.size8 {
  /* stylelint-disable-next-line */
  font-size: 0.8333333333em;
}
.katex .sizing.reset-size9.size9,
.katex .fontsize-ensurer.reset-size9.size9 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size9.size10,
.katex .fontsize-ensurer.reset-size9.size10 {
  /* stylelint-disable-next-line */
  font-size: 1.2002314815em;
}
.katex .sizing.reset-size9.size11,
.katex .fontsize-ensurer.reset-size9.size11 {
  /* stylelint-disable-next-line */
  font-size: 1.4398148148em;
}
.katex .sizing.reset-size10.size1,
.katex .fontsize-ensurer.reset-size10.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.2410800386em;
}
.katex .sizing.reset-size10.size2,
.katex .fontsize-ensurer.reset-size10.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.2892960463em;
}
.katex .sizing.reset-size10.size3,
.katex .fontsize-ensurer.reset-size10.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.337512054em;
}
.katex .sizing.reset-size10.size4,
.katex .fontsize-ensurer.reset-size10.size4 {
  /* stylelint-disable-next-line */
  font-size: 0.3857280617em;
}
.katex .sizing.reset-size10.size5,
.katex .fontsize-ensurer.reset-size10.size5 {
  /* stylelint-disable-next-line */
  font-size: 0.4339440694em;
}
.katex .sizing.reset-size10.size6,
.katex .fontsize-ensurer.reset-size10.size6 {
  /* stylelint-disable-next-line */
  font-size: 0.4821600771em;
}
.katex .sizing.reset-size10.size7,
.katex .fontsize-ensurer.reset-size10.size7 {
  /* stylelint-disable-next-line */
  font-size: 0.5785920926em;
}
.katex .sizing.reset-size10.size8,
.katex .fontsize-ensurer.reset-size10.size8 {
  /* stylelint-disable-next-line */
  font-size: 0.6943105111em;
}
.katex .sizing.reset-size10.size9,
.katex .fontsize-ensurer.reset-size10.size9 {
  /* stylelint-disable-next-line */
  font-size: 0.8331726133em;
}
.katex .sizing.reset-size10.size10,
.katex .fontsize-ensurer.reset-size10.size10 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .sizing.reset-size10.size11,
.katex .fontsize-ensurer.reset-size10.size11 {
  /* stylelint-disable-next-line */
  font-size: 1.1996142719em;
}
.katex .sizing.reset-size11.size1,
.katex .fontsize-ensurer.reset-size11.size1 {
  /* stylelint-disable-next-line */
  font-size: 0.2009646302em;
}
.katex .sizing.reset-size11.size2,
.katex .fontsize-ensurer.reset-size11.size2 {
  /* stylelint-disable-next-line */
  font-size: 0.2411575563em;
}
.katex .sizing.reset-size11.size3,
.katex .fontsize-ensurer.reset-size11.size3 {
  /* stylelint-disable-next-line */
  font-size: 0.2813504823em;
}
.katex .sizing.reset-size11.size4,
.katex .fontsize-ensurer.reset-size11.size4 {
  /* stylelint-disable-next-line */
  font-size: 0.3215434084em;
}
.katex .sizing.reset-size11.size5,
.katex .fontsize-ensurer.reset-size11.size5 {
  /* stylelint-disable-next-line */
  font-size: 0.3617363344em;
}
.katex .sizing.reset-size11.size6,
.katex .fontsize-ensurer.reset-size11.size6 {
  /* stylelint-disable-next-line */
  font-size: 0.4019292605em;
}
.katex .sizing.reset-size11.size7,
.katex .fontsize-ensurer.reset-size11.size7 {
  /* stylelint-disable-next-line */
  font-size: 0.4823151125em;
}
.katex .sizing.reset-size11.size8,
.katex .fontsize-ensurer.reset-size11.size8 {
  /* stylelint-disable-next-line */
  font-size: 0.578778135em;
}
.katex .sizing.reset-size11.size9,
.katex .fontsize-ensurer.reset-size11.size9 {
  /* stylelint-disable-next-line */
  font-size: 0.6945337621em;
}
.katex .sizing.reset-size11.size10,
.katex .fontsize-ensurer.reset-size11.size10 {
  /* stylelint-disable-next-line */
  font-size: 0.8336012862em;
}
.katex .sizing.reset-size11.size11,
.katex .fontsize-ensurer.reset-size11.size11 {
  /* stylelint-disable-next-line */
  font-size: 1em;
}
.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}
.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}
.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}
.katex .delimsizing.mult .delim-size1 > span {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.mult .delim-size4 > span {
  font-family: KaTeX_Size4;
}
.katex .nulldelimiter {
  display: inline-block;
  width: 0.12em;
}
.katex .delimcenter {
  position: relative;
}
.katex .op-symbol {
  position: relative;
}
.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}
.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}
.katex .op-limits > .vlist-t {
  text-align: center;
}
.katex .accent > .vlist-t {
  text-align: center;
}
.katex .accent .accent-body {
  position: relative;
}
.katex .accent .accent-body:not(.accent-full) {
  width: 0;
}
.katex .overlay {
  display: block;
}
.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}
.katex .mtable .arraycolsep {
  display: inline-block;
}
.katex .mtable .col-align-c > .vlist-t {
  text-align: center;
}
.katex .mtable .col-align-l > .vlist-t {
  text-align: left;
}
.katex .mtable .col-align-r > .vlist-t {
  text-align: right;
}
.katex .svg-align {
  text-align: left;
}
.katex svg {
  display: block;
  position: absolute;
  width: 100%;
  height: inherit;
  fill: currentColor;
  stroke: currentColor;
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}
.katex svg path {
  stroke: none;
}
.katex img {
  border-style: none;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}
.katex .stretchy {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.katex .stretchy::before, .katex .stretchy::after {
  content: "";
}
.katex .hide-tail {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.katex .halfarrow-left {
  position: absolute;
  left: 0;
  width: 50.2%;
  overflow: hidden;
}
.katex .halfarrow-right {
  position: absolute;
  right: 0;
  width: 50.2%;
  overflow: hidden;
}
.katex .brace-left {
  position: absolute;
  left: 0;
  width: 25.1%;
  overflow: hidden;
}
.katex .brace-center {
  position: absolute;
  left: 25%;
  width: 50%;
  overflow: hidden;
}
.katex .brace-right {
  position: absolute;
  right: 0;
  width: 25.1%;
  overflow: hidden;
}
.katex .x-arrow-pad {
  padding: 0 0.5em;
}
.katex .cd-arrow-pad {
  padding: 0 0.55556em 0 0.27778em;
}
.katex .x-arrow,
.katex .mover,
.katex .munder {
  text-align: center;
}
.katex .boxpad {
  padding: 0 0.3em;
}
.katex .fbox,
.katex .fcolorbox {
  box-sizing: border-box;
  border: 0.04em solid;
}
.katex .cancel-pad {
  padding: 0 0.2em;
}
.katex .cancel-lap {
  margin-left: -0.2em;
  margin-right: -0.2em;
}
.katex .sout {
  border-bottom-style: solid;
  border-bottom-width: 0.08em;
}
.katex .angl {
  box-sizing: border-box;
  border-top: 0.049em solid;
  border-right: 0.049em solid;
  margin-right: 0.03889em;
}
.katex .anglpad {
  padding: 0 0.03889em;
}
.katex .eqn-num::before {
  counter-increment: katexEqnNo;
  content: "(" counter(katexEqnNo) ")";
}
.katex .mml-eqn-num::before {
  counter-increment: mmlEqnNo;
  content: "(" counter(mmlEqnNo) ")";
}
.katex .mtr-glue {
  width: 50%;
}
.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}
.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  right: calc(50% + 0.3em);
  text-align: left;
}
.katex .cd-label-right {
  display: inline-block;
  position: absolute;
  left: calc(50% + 0.3em);
  text-align: right;
}

.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex-display > .katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.katex-display > .katex > .katex-html {
  display: block;
  position: relative;
}
.katex-display > .katex > .katex-html > .tag {
  position: absolute;
  right: 0;
}

.katex-display.leqno > .katex > .katex-html > .tag {
  left: 0;
  right: auto;
}

.katex-display.fleqn > .katex {
  text-align: left;
  padding-left: 2em;
}

body {
  counter-reset: katexEqnNo mmlEqnNo;
}