/* Разбор задания ОГЭ — SEO landing page. Self-contained: tokens + components. */

@font-face {
    font-family: "STIX Two Math";
    src: url("/static/fonts/STIXTwoMath-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --oz-bg: #0D1117;
    --oz-elevated: #161B22;
    --oz-text-primary: #F8FAFC;
    --oz-text-secondary: #94A3B8;
    --oz-text-muted: #64748B;
    --oz-body-on-dark: #D8DEEA;
    --oz-chalk: #EDF0FE;
    --oz-violet: #A855F7;
    --oz-violet-soft: #B69CFF;
    --oz-lilac-bright: #D8B4FE;
    --oz-danger-text: #FCA5A5;
    --oz-success-text: #86EFAC;

    --oz-border-hair: rgba(255, 255, 255, 0.08);
    --oz-border-subtle: rgba(255, 255, 255, 0.1);
    --oz-border-slate: rgba(148, 163, 184, 0.18);
    --oz-border-glass: rgba(255, 255, 255, 0.12);
    --oz-border-violet: rgba(168, 85, 247, 0.48);
    --oz-border-violet-badge: rgba(168, 85, 247, 0.3);

    --oz-fill-ghost: rgba(255, 255, 255, 0.035);
    --oz-fill-violet: rgba(168, 85, 247, 0.1);
    --oz-fill-violet-badge: rgba(168, 85, 247, 0.15);

    --oz-surface-inset: rgba(10, 15, 23, 0.42);
    --oz-glass-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
    --oz-nebula-modal: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);

    --oz-bg-landing:
        radial-gradient(ellipse 68% 12% at 88% 2%, rgba(112, 92, 255, .09) 0%, rgba(82, 68, 176, .035) 43%, transparent 76%),
        radial-gradient(ellipse 72% 13% at 8% 18%, rgba(99, 102, 241, .105) 0%, rgba(67, 82, 178, .045) 46%, transparent 76%),
        radial-gradient(ellipse 60% 10% at 94% 23%, rgba(224, 83, 157, .075) 0%, transparent 74%),
        radial-gradient(ellipse 60% 15% at 4% 40%, rgba(41, 110, 164, .045) 0%, transparent 72%),
        radial-gradient(ellipse 68% 18% at 96% 67%, rgba(202, 76, 151, .055) 0%, transparent 74%),
        linear-gradient(180deg, #05070B 0%, #070A10 42%, #06080D 75%, #05070B 100%);
    --oz-bg-graph-paper:
        linear-gradient(rgba(180, 187, 218, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 187, 218, .055) 1px, transparent 1px);

    --oz-gradient-brand: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #F472B6 100%);

    --oz-font-display: "Unbounded", sans-serif;
    --oz-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --oz-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --oz-font-math: "STIX Two Math", "Times New Roman", Times, serif;

    --oz-type-hero: clamp(30px, 4vw, 48px);
    --oz-type-h2: clamp(22px, 2.25vw, 30px);
    --oz-type-lede: clamp(17px, 1.5vw, 20px);

    --oz-radius-8: 8px;
    --oz-radius-20: 20px;
    --oz-radius-24: 24px;
    --oz-radius-pill: 100px;

    --oz-glow-cta: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 24px 4px rgba(154, 131, 255, 0.45);
    --oz-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.18);
    --oz-shadow-glass: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --oz-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --oz-dur-base: 0.25s;
    --oz-dur-default: 0.3s;
}

.oz-page {
    background: var(--oz-bg-landing);
    background-attachment: fixed;
    color: var(--oz-body-on-dark);
    font-family: var(--oz-font-body);
    font-size: 17.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.oz-page a { color: var(--oz-violet-soft); text-decoration: none; }
.oz-page a:hover { color: var(--oz-lilac-bright); }

.oz-main {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.oz-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.oz-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--oz-radius-pill);
    font-size: 13px;
    font-weight: 600;
}
.oz-badge-part {
    background: var(--oz-fill-violet-badge);
    border: 1px solid var(--oz-border-violet-badge);
    color: var(--oz-violet-soft);
    font-family: var(--oz-font-mono);
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.oz-badge-points {
    background: var(--oz-fill-ghost);
    border: 1px solid var(--oz-border-subtle);
    color: var(--oz-text-secondary);
}

.oz-h1 {
    margin: 0 0 18px;
    font-family: var(--oz-font-display);
    font-weight: 700;
    font-size: var(--oz-type-hero);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--oz-text-primary);
    text-wrap: balance;
    max-width: 22ch;
}

.oz-lede {
    margin: 0 0 16px;
    max-width: 62ch;
    font-size: var(--oz-type-lede);
    line-height: 1.6;
    color: var(--oz-body-on-dark);
}
.oz-lede b { color: var(--oz-text-primary); }

.oz-sub {
    margin: 0 0 26px;
    max-width: 62ch;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--oz-text-secondary);
}

.oz-section { padding: 26px 0 10px; scroll-margin-top: 84px; }
.oz-section-divider {
    padding: 44px 0 8px;
    scroll-margin-top: 84px;
    border-top: 1px solid var(--oz-border-hair);
    margin-top: 36px;
}

.oz-h2 {
    margin: 0 0 10px;
    font-family: var(--oz-font-display);
    font-weight: 700;
    font-size: var(--oz-type-h2);
    line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--oz-text-primary);
    text-wrap: balance;
}

.oz-h2-lead {
    margin: 0 0 24px;
    max-width: 62ch;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--oz-text-secondary);
}

.oz-layout-main { min-width: 0; }

/* Type navigation column. It only ever exists as a fixed, vertically
   centered column docked near the right edge of the viewport — never as a
   fallback row. oge_zadanie.js measures whether it actually fits beside the
   centered content without overlapping it (see updateRailFit); when it
   doesn't, it stays fully hidden — no buttons at all. Hidden by default so
   there's no flash of it before that measurement runs. */
.oz-toc {
    display: none;
    position: fixed;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    z-index: 40;
    width: 240px;
    max-height: calc(100vh - 64px);
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    padding: 4px;
}
.oz-toc.oz-toc-fits { display: flex; }
.oz-toc-label {
    font-family: var(--oz-font-mono);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--oz-text-muted);
}
.oz-toc-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
}
.oz-toc-item {
    display: block;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: var(--oz-radius-8);
    background: var(--oz-fill-ghost);
    border: 1px solid var(--oz-border-slate);
    color: var(--oz-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow: hidden;
    max-height: 60px;
    opacity: 1;
    transition: max-height .32s var(--oz-ease-standard), opacity .22s ease, padding .32s var(--oz-ease-standard), margin .32s var(--oz-ease-standard), border-width .32s var(--oz-ease-standard), background .15s ease, border-color .15s ease, color .15s ease;
}
.oz-toc-item:hover { border-color: var(--oz-border-violet); color: var(--oz-text-primary); background: var(--oz-fill-violet); }
.oz-toc-item.oz-toc-item-active {
    background: var(--oz-fill-violet-badge);
    border-color: var(--oz-border-violet);
    color: var(--oz-violet-soft);
}
.oz-toc-item.oz-toc-item-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    pointer-events: none;
}

.oz-condition {
    margin-bottom: 16px;
}
.oz-card {
    padding: 20px 22px 22px;
    border-radius: var(--oz-radius-8);
    background: var(--oz-bg);
    border: 1px solid var(--oz-border-glass);
    box-shadow: var(--oz-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.oz-kicker {
    font-family: var(--oz-font-mono);
    font-size: 11.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--oz-text-muted);
}
.oz-card-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--oz-text-secondary); }

.oz-math-box {
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--oz-surface-inset);
    border: 1px solid var(--oz-border-subtle);
    background-image: var(--oz-bg-graph-paper);
    background-size: 22px 22px;
}
.oz-math-line { font-family: var(--oz-font-math); font-size: 22px; line-height: 1.55; color: var(--oz-chalk); }
.oz-math-line + .oz-math-line { margin-top: 10px; }

/* KaTeX renders the "√(...)" / "a/b" spans that oge_zadanie.js typesets
   inside these lines (see typesetMathLines there). Left alone, KaTeX sets
   its own font-size (1.21em of the surrounding text — it's designed to
   visually match typical body fonts, but that's too big next to STIX Two
   Math) and its own font family (KaTeX_Main), which together made the
   radicand look bigger and differently styled than the rest of the line.
   This pins both back to match. */
.oz-math-line .katex,
.oz-answer-value .katex {
    font-size: 1em;
}
.oz-math-line .katex,
.oz-math-line .katex *,
.oz-answer-value .katex,
.oz-answer-value .katex * {
    font-family: var(--oz-font-math);
}
/* KaTeX italicizes math variables (.mathdefault/.mathit/.mathnormal) by
   mathematical convention — the plain text elsewhere on this page never is,
   so left alone a variable like "x" under a radical still looked like a
   different letter next to the upright "x"s around it. */
.oz-math-line .katex .mathdefault,
.oz-math-line .katex .mathit,
.oz-math-line .katex .mathnormal,
.oz-answer-value .katex .mathdefault,
.oz-answer-value .katex .mathit,
.oz-answer-value .katex .mathnormal {
    font-family: var(--oz-font-math);
    font-style: normal;
}
/* Breathing room around fractions and a slightly thicker bar — same
   readability tweak /chat applies to its own KaTeX fractions. */
.oz-math-line .katex .mfrac,
.oz-answer-value .katex .mfrac {
    margin-left: .14em;
    margin-right: .14em;
}
.oz-math-line .katex .frac-line,
.oz-answer-value .katex .frac-line {
    border-top-width: 2px;
}

.oz-source { margin-top: auto; font-size: 13px; color: var(--oz-text-muted); }

.oz-solution {
    border-radius: var(--oz-radius-8);
    background: var(--oz-elevated);
    border: 1px solid var(--oz-border-glass);
    overflow: hidden;
}
.oz-solution-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--oz-border-hair);
    flex-wrap: wrap;
}
.oz-solution-head .oz-kicker { color: var(--oz-text-secondary); }
.oz-toggle-all {
    padding: 8px 14px;
    border-radius: var(--oz-radius-8);
    background: var(--oz-fill-ghost);
    border: 1px solid var(--oz-border-slate);
    color: var(--oz-text-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--oz-ease-standard);
}
.oz-toggle-all:hover { background: var(--oz-fill-violet); border-color: var(--oz-border-violet); }

.oz-step { border-bottom: 1px solid var(--oz-border-hair); }
.oz-step:last-of-type { border-bottom: none; }
.oz-step-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--oz-text-primary);
}
.oz-step-btn:hover { background: rgba(255, 255, 255, .035); }
.oz-step-num {
    font-family: var(--oz-font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--oz-violet-soft);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.oz-step-title { flex: 1; font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.oz-step-chevron {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--oz-fill-violet-badge);
    border: 1px solid var(--oz-border-violet-badge);
    color: var(--oz-violet);
    line-height: 1;
    transition: transform var(--oz-dur-base) var(--oz-ease-standard);
}
.oz-step[data-open="true"] .oz-step-chevron { transform: rotate(180deg); }
.oz-step-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s var(--oz-ease-standard);
}
.oz-step[data-open="true"] .oz-step-body { max-height: 1100px; }
.oz-step-body-inner { padding: 2px 20px 20px 56px; display: flex; flex-direction: column; gap: 12px; }
.oz-step-body-inner .oz-math-box { padding: 14px 16px; }
.oz-step-body-inner .oz-math-line { font-size: 20px; line-height: 1.6; }
.oz-step-note { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--oz-text-secondary); }

/* Task-22 function graphs: an SVG built at content-authoring time (see
   oge_zadanie_content.py) from exact sampled coordinates, not hand-drawn —
   themed with the same tokens as the rest of the page so it reads as part
   of the chalkboard rather than a pasted-in image. */
.oz-graph-box {
    width: 100%;
    max-width: 480px;
    margin: 2px auto 0;
    padding: 14px;
    border-radius: 10px;
    background: var(--oz-surface-inset);
    border: 1px solid var(--oz-border-subtle);
}
.oz-graph-svg { width: 100%; height: auto; display: block; }
.oz-graph-grid line { stroke: var(--oz-border-slate); stroke-width: 1; }
.oz-graph-axis line { stroke: var(--oz-text-secondary); stroke-width: 1.4; }
.oz-graph-arrow { fill: var(--oz-text-secondary); }
.oz-graph-axis-label { font-family: var(--oz-font-math); font-style: italic; fill: var(--oz-text-secondary); font-size: 15px; }
.oz-graph-tick { font-family: var(--oz-font-math); fill: var(--oz-text-muted); font-size: 11px; }
.oz-graph-curve { fill: none; stroke: var(--oz-lilac-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oz-graph-asymptote { stroke: var(--oz-danger-text); stroke-width: 1.3; stroke-dasharray: 2 4; opacity: 0.75; }
.oz-graph-dot-filled { fill: var(--oz-lilac-bright); stroke: none; }
.oz-graph-dot-open { fill: var(--oz-surface-inset); stroke: var(--oz-lilac-bright); stroke-width: 2.2; }
.oz-graph-guide { stroke: var(--oz-success-text); stroke-width: 1.3; stroke-dasharray: 5 4; opacity: 0.9; }
.oz-graph-guide-label { font-family: var(--oz-font-math); fill: var(--oz-success-text); font-size: 12.5px; }
.oz-graph-leader { stroke: var(--oz-text-muted); stroke-width: 1; }
.oz-graph-leader-dot { fill: var(--oz-text-muted); }
.oz-graph-fn-label { font-family: var(--oz-font-math); fill: var(--oz-lilac-bright); font-size: 13px; }

/* Task-23 geometry diagrams: chertyozh SVGs built at content-authoring time
   from exact vector-geometry constructions (feet of perpendiculars, circle
   intersections, law-of-cosines placements) — same box and token language
   as .oz-graph-box, but with plain lines/points/labels instead of plotted
   curves. Because the coordinates are computed from the real given numbers,
   right angles marked in the figure really are 90 degrees on screen. */
.oz-diagram-box {
    width: 100%;
    max-width: 540px;
    margin: 2px auto 0;
    padding: 22px;
    border-radius: 10px;
    background: var(--oz-surface-inset);
    border: 1px solid var(--oz-border-subtle);
}
.oz-diagram-svg { width: 100%; height: auto; display: block; }
.oz-diagram-line { stroke: var(--oz-text-secondary); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oz-diagram-line-accent { stroke: var(--oz-lilac-bright); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oz-diagram-dash { stroke: var(--oz-text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.oz-diagram-point { fill: var(--oz-chalk); }
.oz-diagram-vertex-label { font-family: var(--oz-font-math); font-style: italic; fill: var(--oz-chalk); font-size: 19px; font-weight: 600; }
.oz-diagram-value-label { font-family: var(--oz-font-math); fill: var(--oz-lilac-bright); font-size: 16px; }
.oz-diagram-right-angle { fill: none; stroke: var(--oz-text-secondary); stroke-width: 1.6; }
.oz-diagram-tick { stroke: var(--oz-text-secondary); stroke-width: 1.6; }
.oz-diagram-arc { fill: none; stroke: var(--oz-success-text); stroke-width: 1.6; }
.oz-diagram-circle { fill: none; stroke: var(--oz-text-secondary); stroke-width: 1.6; }

/* Value tables for plotting points — same visual family as .oz-math-box. */
.oz-value-table-wrap { width: 100%; max-width: 480px; margin: 0 auto; overflow-x: auto; }
.oz-value-table { border-collapse: collapse; width: 100%; }
.oz-value-table caption { caption-side: top; text-align: left; font-size: 13.5px; color: var(--oz-text-secondary); padding-bottom: 6px; font-family: var(--oz-font-math); }
.oz-value-table th, .oz-value-table td {
    border: 1px solid var(--oz-border-subtle);
    padding: 5px 10px;
    font-family: var(--oz-font-math);
    font-size: 16px;
    text-align: center;
    color: var(--oz-chalk);
    white-space: nowrap;
}
.oz-value-table th { color: var(--oz-text-secondary); font-weight: 600; background: var(--oz-fill-ghost); }

.oz-answer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: var(--oz-fill-violet);
    border-top: 1px solid var(--oz-border-violet);
}
.oz-answer-label { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.oz-answer-value { font-family: var(--oz-font-math); font-size: 24px; color: var(--oz-text-primary); }
.oz-answer-cta-wrap {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.oz-answer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    padding: 10px 18px;
    border-radius: var(--oz-radius-pill);
    background: var(--oz-gradient-brand);
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3), 0 0 16px 2px rgba(154, 131, 255, .35);
    transition: transform var(--oz-dur-base) ease, box-shadow var(--oz-dur-base) ease;
}
.oz-answer-cta-note {
    max-width: 420px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--oz-text-muted);
    text-align: right;
}
.oz-answer-cta:hover {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3), 0 0 22px 4px rgba(154, 131, 255, .5);
}

.oz-trap {
    margin: 16px 0 0;
    padding: 14px 18px;
    border-radius: var(--oz-radius-8);
    background: var(--oz-fill-ghost);
    border: 1px solid var(--oz-border-subtle);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--oz-text-secondary);
}
.oz-trap b { color: var(--oz-text-primary); }

.oz-mistakes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
    gap: 14px;
}
.oz-mistake-card {
    padding: 20px 22px;
    border-radius: var(--oz-radius-8);
    background: var(--oz-bg);
    border: 1px solid var(--oz-border-glass);
    box-shadow: var(--oz-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oz-mistake-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--oz-danger-text);
    font-family: var(--oz-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.oz-mistake-title { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--oz-text-primary); }
.oz-mistake-body { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--oz-text-secondary); }
.oz-mistake-fix {
    margin-top: 2px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .3);
    font-size: 15px;
    line-height: 1.5;
    color: var(--oz-success-text);
}

.oz-cta-panel {
    margin: 56px 0 0;
    padding: 40px 32px;
    border-radius: var(--oz-radius-24);
    background: var(--oz-glass-fill);
    border: 1px solid var(--oz-border-glass);
    box-shadow: var(--oz-shadow-glass);
    position: relative;
    overflow: hidden;
}
.oz-cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--oz-nebula-modal);
    filter: blur(60px);
    pointer-events: none;
}
.oz-cta-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
@media (min-width: 1300px) {
    /* The demo board is only readable at its own tuned proportions (see
       .hero2-board-shell's 650px max-width) — squeezing it into a narrower
       column clips the handwritten lines. Below this breakpoint there just
       isn't room for a full-size demo beside readable text, so it stacks
       full-width under the copy instead (the default single-column rule
       above) rather than being shrunk to fit. */
    .oz-cta-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 650px); }
}
.oz-cta-text { min-width: 0; }
.oz-cta-inner h2 {
    margin: 0 0 14px;
    font-family: var(--oz-font-display);
    font-weight: 700;
    font-size: var(--oz-type-h2);
    line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--oz-text-primary);
    text-wrap: balance;
    max-width: 30ch;
}
.oz-cta-inner p { margin: 0 0 22px; max-width: 52ch; font-size: 17.5px; line-height: 1.6; color: var(--oz-body-on-dark); }
.oz-cta-inner p b { color: var(--oz-text-primary); }
.oz-cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.oz-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 26px;
    border-radius: var(--oz-radius-pill);
    background: var(--oz-gradient-brand);
    color: #fff !important;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.25;
    text-align: center;
    box-shadow: var(--oz-glow-cta);
    transition: transform var(--oz-dur-base) ease, box-shadow var(--oz-dur-base) ease;
}
.oz-cta-btn:hover { transform: translateY(-3px); color: #fff !important; }
.oz-cta-micro { max-width: 54ch; font-size: 15px; line-height: 1.45; color: var(--oz-text-muted); }

.oz-board-prompt[hidden] { display: none; }
.oz-board-prompt {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 7, 11, .72);
    backdrop-filter: blur(12px);
    overflow-y: auto;
    animation: oz-prompt-fade-in .18s ease both;
}
.oz-board-prompt-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 24px;
    align-items: center;
    width: min(940px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px 64px 28px 28px;
    border-radius: var(--oz-radius-20);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), transparent),
        #161B22;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .58), 0 0 34px rgba(154, 131, 255, .18);
    color: var(--oz-text-primary);
}
.oz-board-prompt-copy {
    min-width: 0;
}
.oz-board-prompt-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--oz-text-muted);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: color var(--oz-dur-base) ease, background var(--oz-dur-base) ease, transform var(--oz-dur-base) ease;
}
.oz-board-prompt-close::before {
    content: "×";
    display: block;
    font-family: Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
    transform: translateY(-1px);
}
.oz-board-prompt-close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .11);
    color: #fff;
}
.oz-board-prompt-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    font-family: var(--oz-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--oz-violet-soft);
}
.oz-board-prompt-card h2 {
    margin: 0 36px 12px 0;
    font-family: var(--oz-font-display);
    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.12;
    letter-spacing: 0;
    color: var(--oz-text-primary);
}
.oz-board-prompt-card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.62;
    color: var(--oz-body-on-dark);
}
.oz-board-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}
.oz-board-prompt-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--oz-radius-pill);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}
.oz-board-prompt-primary {
    background: var(--oz-gradient-brand);
    color: #fff !important;
    box-shadow: var(--oz-glow-cta);
}
.oz-board-prompt-demo {
    --oz-board-prompt-demo-scale: .615;
    justify-self: start;
    min-width: 0;
    width: min(100%, calc(650px * var(--oz-board-prompt-demo-scale)));
    height: calc(510px * var(--oz-board-prompt-demo-scale));
    overflow: hidden;
}
.oz-board-prompt-demo .hero2-board-shell {
    width: 650px;
    max-width: none;
    margin: 0;
    transform: scale(var(--oz-board-prompt-demo-scale));
    transform-origin: top left;
}
body.oz-board-prompt-open {
    overflow: hidden;
}
@keyframes oz-prompt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 880px) {
    .oz-board-prompt-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: min(560px, 100%);
    }
    .oz-board-prompt-copy {
        display: contents;
    }
    .oz-board-prompt-kicker {
        display: none;
    }
    .oz-board-prompt-card h2 {
        order: 1;
        margin: 0 42px 0 0;
    }
    .oz-board-prompt-demo {
        order: 2;
    }
    .oz-board-prompt-demo .hero2-board-shell {
        max-width: none;
    }
    .oz-board-prompt-actions {
        order: 3;
        margin-top: 0;
    }
    .oz-board-prompt-card p {
        order: 4;
    }
}
@media (max-width: 540px) {
    .oz-board-prompt { padding: 16px; align-items: flex-end; }
    .oz-board-prompt-card {
        gap: 16px;
        padding: 24px 18px 18px;
    }
    .oz-board-prompt-card h2 {
        margin-right: 40px;
        font-size: clamp(26px, 9vw, 34px);
    }
    .oz-board-prompt-card p {
        font-size: 15.5px;
        line-height: 1.52;
    }
    .oz-board-prompt-demo {
        --oz-board-prompt-demo-scale: .49;
    }
    .oz-board-prompt-actions { flex-direction: column; align-items: stretch; }
    .oz-board-prompt-primary { width: 100%; }
}
@media (max-width: 380px) {
    .oz-board-prompt-demo {
        --oz-board-prompt-demo-scale: .43;
    }
}

.oz-faq-list { display: flex; flex-direction: column; gap: 12px; }
.oz-faq-item {
    background: rgba(220, 226, 240, 0.055);
    border: 1px solid var(--oz-border-subtle);
    border-radius: var(--oz-radius-20);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--oz-dur-default) ease;
}
.oz-faq-head {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 15px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.oz-faq-question { font-weight: 600; color: var(--oz-text-primary); font-size: 1.05rem; line-height: 1.4; }
.oz-faq-toggle {
    width: 40px;
    height: 40px;
    background: var(--oz-fill-violet-badge);
    border: 1px solid var(--oz-border-violet-badge);
    color: var(--oz-violet);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--oz-dur-default) ease;
}
.oz-faq-item[data-open="true"] .oz-faq-toggle { background: var(--oz-violet); border-color: transparent; color: #fff; }
.oz-faq-item:hover .oz-faq-toggle { transform: scale(1.15); box-shadow: 0 4px 12px rgba(168, 85, 247, .35); }
.oz-faq-body { max-height: 0; overflow: hidden; transition: max-height .5s var(--oz-ease-standard); }
.oz-faq-item[data-open="true"] .oz-faq-body { max-height: 600px; }
.oz-faq-body-inner { padding: 0 25px 22px; color: var(--oz-text-secondary); font-size: 1rem; line-height: 1.6; text-align: left; }

.oz-index-section { padding: 44px 0 8px; border-top: 1px solid var(--oz-border-hair); margin-top: 44px; }
.oz-index-h3 { margin: 0 0 8px; font-family: var(--oz-font-display); font-weight: 700; font-size: clamp(19px, 1.95vw, 25px); line-height: 1.26; color: #ECEEF7; }
.oz-index-sub { margin: 0 0 20px; font-size: 15.5px; color: var(--oz-text-muted); }
.oz-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.oz-index-tile, .oz-index-tile-inert {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    border-radius: var(--oz-radius-8);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #94A3B8;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--oz-font-mono);
}
.oz-index-tile:hover { border-color: rgba(168, 85, 247, .48); color: #F8FAFC; }
.oz-index-tile-current {
    background: rgba(168, 85, 247, 0.16);
    border-color: rgba(168, 85, 247, 0.48);
    color: #F8FAFC;
}
.oz-index-tile-inert { opacity: .5; cursor: default; }

@media (max-width: 640px) {
    .oz-cta-panel { padding: 28px 20px; }
    .oz-answer-row { align-items: flex-start; }
}

/* Below 1230px styles.v2.css turns .site-header into a floating fixed pill
   (see its "Fixed header на мобилке" rule) — it leaves normal document flow,
   so content needs its own top clearance instead of relying on header
   height like on desktop (matches welcome.css's own 100px compensation for
   the same breakpoint). It also makes body.welcome-page headers transparent
   there, meant for a hero peeking through — we don't have that hero, so we
   force the same solid color the header already has on desktop instead. */
@media (max-width: 1230px) {
    .oz-main { padding-top: 100px; }
}

body.welcome-page.oz-page .site-header,
body.welcome-page.oz-page .site-header.header-scrolled {
    background: #06080c !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
    border-color: rgba(255, 255, 255, .08);
}

/* styles.v2.css's footer defaults to a navy #0B1120 that doesn't match this
   page's near-black gradient background — welcome.html and tutors_landing.html
   both override it the same way for their own dark backgrounds. */
body.welcome-page.oz-page .site-footer {
    background: #090C11;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* ────────────────────────────────────────────────────────────────────
   Live trainer preview — the same animated whiteboard demo as welcome.html's
   hero (welcome.css/.hero2-board-shell, driven by initHeroBoardDemo in
   welcome.js), reused in the final CTA and timed prompt so visitors see the
   product working instead of only reading a promise. Values below are the
   resolved --wp- and --hero2- custom properties from welcome.css, inlined
   here since this page doesn't load that stylesheet. */
.hero2-board-shell {
    --hero2-bg-base: #05070B;
    --hero2-bg-surface: #161B22;
    --hero2-ink: #F8FAFC;
    --hero2-muted: #94A3B8;
    --hero2-muted-2: #64748B;
    --hero2-brand-a: #6366F1;
    --hero2-brand-b: #F472B6;
    --hero2-border: rgba(255, 255, 255, 0.1);
    --hero2-live: #9A83FF;
    min-width: 0;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}

.hero2-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hero2-board {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--hero2-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent), var(--hero2-bg-surface);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(124, 92, 255, .08);
}

.hero2-paper {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(88px, 1fr) 50px 92px;
    row-gap: 10px;
    padding: 12px 24px 0;
    height: 510px;
}

.hero2-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(500px 240px at 74% 6%, rgba(124, 92, 255, .13), transparent 60%);
}

.hero2-task-card {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    width: min(470px, 76%);
    padding: 12px 15px 7px;
    border-radius: 12px;
    border: 1px solid var(--hero2-border);
    background: var(--hero2-bg-base);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7);
}

.hero2-tc-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--hero2-ink);
    margin-bottom: 7px;
}

.hero2-tc-text {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--hero2-muted);
    margin-bottom: 3px;
}

.hero2-tc-fig {
    display: block;
    width: min(100%, 320px);
    margin: -2px auto -5px;
    overflow: visible;
}

.hero2-tc-circle {
    fill: none;
    stroke: rgba(225, 230, 245, .74);
    stroke-width: 1.7;
}

.hero2-tc-tangent {
    fill: none;
    stroke: rgba(225, 230, 245, .62);
    stroke-width: 1.7;
}

.hero2-tc-chord {
    fill: none;
    stroke: #F3F5FF;
    stroke-width: 2.25;
    stroke-linecap: round;
}

.hero2-tc-radii {
    fill: none;
    stroke: rgba(173, 182, 210, .48);
    stroke-width: 1.8;
    stroke-linecap: round;
    transition: stroke .32s ease, stroke-width .32s ease, filter .32s ease;
}

.hero2-tc-right {
    fill: none;
    stroke: rgba(225, 230, 245, .52);
    stroke-width: 1.45;
    stroke-linejoin: round;
}

.hero2-tc-angle-given {
    fill: none;
    stroke: var(--hero2-brand-b);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.hero2-tc-angle-answer {
    fill: none;
    stroke: var(--hero2-live);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity .28s ease;
}

.hero2-tc-degree,
.hero2-tc-answer,
.hero2-tc-labels text {
    font-family: var(--oz-font-body);
    font-weight: 600;
}

.hero2-tc-degree {
    fill: var(--hero2-brand-b);
    font-size: 11px;
}

.hero2-tc-answer {
    fill: var(--hero2-live);
    font-size: 10.5px;
    opacity: 0;
    transition: opacity .28s ease;
}

.hero2-tc-points circle {
    fill: #F3F5FF;
    transition: fill .28s ease, filter .28s ease;
}

.hero2-tc-labels text {
    fill: #E9ECF8;
    font-size: 13px;
    font-style: italic;
}

.hero2-tc-labels .hero2-tc-tangent-label {
    fill: rgba(225, 230, 245, .62);
}

.hero2-tc-fig.is-reading .hero2-tc-radii,
.hero2-tc-fig.is-solved .hero2-tc-radii {
    stroke: var(--hero2-live);
    stroke-width: 2.8;
    filter: drop-shadow(0 0 5px rgba(154, 131, 255, .55));
}

.hero2-tc-fig.is-reading .hero2-tc-points circle:first-child,
.hero2-tc-fig.is-solved .hero2-tc-points circle:first-child {
    fill: var(--hero2-live);
    filter: drop-shadow(0 0 4px rgba(154, 131, 255, .65));
}

.hero2-tc-fig.is-reading .hero2-tc-radii {
    animation: hero2RadiiRead .72s ease-in-out 1;
}

.hero2-tc-fig.is-solved .hero2-tc-angle-answer,
.hero2-tc-fig.is-solved .hero2-tc-answer {
    opacity: 1;
}

.hero2-tc-src {
    text-align: right;
    font-size: 9.5px;
    color: var(--hero2-muted-2);
    margin-top: 4px;
}

.hero2-hand,
.hero2-hand * {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-weight: 600;
}

.hero2-hand {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1.35em 1.35em;
    align-content: center;
    row-gap: 2px;
    min-height: 0;
    overflow: hidden;
    color: #DDE2F7;
    font-size: 32px;
    line-height: 1.38;
    margin: 0;
    align-self: stretch;
}

.hero2-hand-line {
    display: block;
    margin: 0;
    min-height: 0;
    transition: opacity .45s ease;
}

.hero2-hand-q { color: var(--hero2-brand-b); }

.hero2-ch {
    opacity: 0;
    animation: hero2Ink .14s ease forwards;
}

.hero2-pen {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hero2-brand-a);
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, .7));
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    will-change: transform;
    transition: transform .08s linear, opacity .25s ease;
}

.hero2-pen.is-writing {
    opacity: 1;
    animation: hero2PenPulse 1s ease-in-out infinite;
}

.hero2-pen.no-anim { transition: opacity .25s ease; }

.hero2-student {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 14px;
    pointer-events: none;
}

.hero2-student-bubble {
    display: flex;
    gap: 8px;
    align-items: center;
    width: max-content;
    max-width: 310px;
    min-height: 44px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 14px 14px 4px 14px;
    background: rgba(255, 255, 255, .095);
    border: 1px solid rgba(255, 255, 255, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.hero2-student-bubble.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .30);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.hero2-student-mic {
    flex: none;
    color: #D8DDEA;
    width: 14px;
    height: 14px;
    opacity: .82;
}

.hero2-student-bubble.is-speaking .hero2-student-mic {
    animation: hero2StudentMic .7s ease-in-out infinite alternate;
}

.hero2-student-body { min-width: 0; }

.hero2-student-label {
    font-size: 11px;
    font-weight: 700;
    color: #E4E8F2;
    margin-bottom: 1px;
}

.hero2-student-msg {
    font-size: 14.5px;
    line-height: 1.3;
    color: #FFFFFF;
    font-weight: 600;
}

.hero2-student-cursor {
    display: inline-block;
    width: 1.5px;
    height: 1em;
    margin-left: 1px;
    vertical-align: -2px;
    background: rgba(232, 234, 245, .75);
    animation: hero2Blink .8s steps(1) infinite;
}

.hero2-voice {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 92px;
    min-height: 92px;
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding: 10px 24px;
    box-sizing: border-box;
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(99, 102, 241, .035), rgba(242, 104, 166, .025)),
        linear-gradient(180deg, rgba(20, 24, 35, .88), rgba(12, 15, 23, .97));
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(99, 102, 241, .035);
}

.hero2-voice-icon {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    transition: opacity .28s ease;
}

.hero2-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
}

.hero2-wave span {
    width: 3.5px;
    border-radius: 3px;
    background: var(--hero2-live);
    height: 7px;
    animation: none;
}

.hero2-voice-body { flex: 1; min-width: 0; }

.hero2-voice-label {
    font-size: 12.5px;
    letter-spacing: .01em;
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 3px;
}

.hero2-voice-msg {
    font-size: 16px;
    line-height: 1.38;
    color: #FAF9FF;
    font-weight: 500;
    height: 50px;
    overflow: hidden;
    white-space: pre-line;
    transition: opacity .18s ease;
}

.hero2-voice-msg.is-switching { opacity: .35; }

.hero2-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--hero2-live);
    margin-left: 1px;
    vertical-align: -2px;
    animation: hero2Blink .8s steps(1) infinite;
}

.hero2-voice-mic-big {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hero2-voice-icon .hero2-wave { display: none; }

.hero2-voice.is-speaking .hero2-voice-icon .hero2-wave { display: flex; }

.hero2-voice.is-speaking .hero2-wave span {
    animation-name: hero2Eq;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.hero2-voice.is-speaking .hero2-wave span:nth-child(2) { animation-delay: .15s; }
.hero2-voice.is-speaking .hero2-wave span:nth-child(3) { animation-delay: .30s; }
.hero2-voice.is-speaking .hero2-wave span:nth-child(4) { animation-delay: .45s; }
.hero2-voice.is-speaking .hero2-wave span:nth-child(5) { animation-delay: .20s; }

.hero2-voice.is-listening .hero2-voice-icon .hero2-voice-mic-big {
    display: flex;
    color: var(--hero2-live);
    opacity: .58;
}

.hero2-voice.is-analyzing .hero2-voice-icon .hero2-voice-mic-big {
    display: flex;
    color: var(--hero2-live);
    animation: hero2MicPulse .45s ease-in-out 1;
}

.hero2-board.is-resetting .hero2-hand-line,
.hero2-board.is-resetting .hero2-student-bubble {
    opacity: 0;
    transition-duration: .28s;
}

@media screen and (max-width: 1230px) {
    .hero2-task-card { width: min(400px, 82%); }
}

@media screen and (max-width: 600px) {
    .hero2-paper { height: 510px; padding: 16px 16px 0; }
    .hero2-task-card { width: 100%; }
    .hero2-hand { font-size: 22px; }
    .hero2-voice-msg { height: 50px; font-size: 12.8px; line-height: 1.3; }
    .hero2-student { padding-inline: 0; }
    .hero2-student-bubble { max-width: 92%; min-height: 44px; padding: 8px 11px; gap: 10px; }
    .hero2-student-msg { font-size: 13px; }
    .hero2-voice { gap: 8px; width: calc(100% + 32px); margin-inline: -16px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero2-board-shell *,
    .hero2-board-shell *::before,
    .hero2-board-shell *::after {
        animation-duration: .001s;
        animation-iteration-count: 1;
        transition: none;
    }
    .hero2-ch { opacity: 1; }
    .hero2-pen { display: none; }
}

@keyframes hero2RadiiRead {
    0%, 100% { opacity: 1; }
    50% { opacity: .58; }
}
@keyframes hero2Ink { to { opacity: 1; } }
@keyframes hero2PenPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .75; }
}
@keyframes hero2StudentMic {
    to { opacity: 1; filter: drop-shadow(0 0 5px rgba(216, 221, 234, .45)); }
}
@keyframes hero2Eq {
    0%, 100% { height: 6px; }
    50% { height: 26px; }
}
@keyframes hero2Blink { 50% { opacity: 0; } }
@keyframes hero2MicPulse {
    0%, 100% { opacity: .58; }
    50% { opacity: .95; }
}