/* Разбор задания ОГЭ — 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-color: #05070B;
    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-page .oz-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 20px 0 0;
    color: var(--oz-text-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}
.oz-back-link svg { flex-shrink: 0; }
.oz-page .oz-back-link:hover {
    color: var(--oz-text-primary);
    text-decoration: underline;
}
.oz-back-link:focus-visible {
    outline: 2px solid var(--oz-violet-soft);
    outline-offset: 3px;
}

.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); }

/* Formula/coefficient legend lines copied verbatim from the FIPI bank (task
   11's "Формулы: 1) ...   2) ...   3) ..."): the source text separates
   items with runs of plain spaces, which HTML collapses to one — pre-wrap
   keeps those gaps (and still wraps normally) without editing the copied
   text itself. */
.oz-legend-line { white-space: pre-wrap; }

.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;
}
/* The condition (Условие) shows the exam statement itself — no separate
   framed block, just the expression sitting in the card's own flow (like
   task_label above it); step-solution boxes below keep the framed/graph-
   paper treatment, since those are worked-out lines, not the printed task. */
.oz-condition .oz-math-box {
    padding: 0;
    border-radius: 0;
    background: none;
    background-image: none;
    border: none;
}
.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; }

/* Multiple-choice options (задание 7 и т.п.): the four real exam choices,
   listed under the condition exactly as printed on the actual bank sheet —
   plain and unmarked, so the condition itself doesn't spoil which one is
   correct (that's only revealed in the answer row below). Flex-wrap, not a
   CSS grid: several options are fractions that KaTeX renders much taller
   than plain text once typeset (after the initial layout pass), and a grid
   with pre-sized row tracks let a later, taller item overlap the row above
   it — flex line-wrapping always measures the actual current item heights.
*/
.oz-options-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 26px;
}
.oz-options-item { display: flex; align-items: baseline; gap: 8px; }
.oz-options-list-stacked { flex-direction: column; }
.oz-options-num { font-family: var(--oz-font-mono); font-size: 13px; color: var(--oz-text-muted); flex-shrink: 0; }
.oz-options-value { font-family: var(--oz-font-math); font-size: 16px; color: var(--oz-chalk); }

/* 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,
.oz-options-value .katex {
    font-size: 1em;
}
.oz-math-line .katex,
.oz-math-line .katex *,
.oz-answer-value .katex,
.oz-answer-value .katex *,
.oz-options-value .katex,
.oz-options-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,
.oz-options-value .katex .mathdefault,
.oz-options-value .katex .mathit,
.oz-options-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,
.oz-options-value .katex .mfrac {
    margin-left: .14em;
    margin-right: .14em;
}
.oz-math-line .katex .frac-line,
.oz-answer-value .katex .frac-line,
.oz-options-value .katex .frac-line {
    border-top-width: 2px;
}

/* Column arithmetic and long division ("уголок"): hand-authored SVG per task, same box/token
   language as the geometry diagrams (.oz-diagram-*) but rendered at native
   pixel size instead of stretched to the card's width — .oz-diagram-svg's
   width:100% is meant for a big geometric figure; on a small division
   layout it blew the ~19px digits up to ~45px, several times the size of
   the surrounding solution text. */
.oz-diagram-box-compact {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--oz-surface-inset);
    border: 1px solid var(--oz-border-subtle);
}
.oz-diagram-svg-compact { display: block; }
.oz-diagram-number { font-family: var(--oz-font-math); fill: var(--oz-chalk); font-size: 19px; }
.oz-diagram-number-accent { font-family: var(--oz-font-math); fill: var(--oz-lilac-bright); font-size: 19px; font-weight: 700; }
.oz-diagram-number-carry { font-family: var(--oz-font-math); fill: var(--oz-lilac-bright); font-size: 13px; opacity: .9; }
.oz-diagram-arrow { fill: var(--oz-text-secondary); }

.oz-source { margin-top: auto; align-self: flex-end; 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; 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; }

/* Task-10 probability diagrams (trees, Euler/Venn circles) and task-11
   function-graph triptychs: real FIPI-bank images (already dark-themed to
   match the chalkboard) served straight from /static/oge_math/tasks/<N>/,
   the same folder and file naming /chat's task trainer reads — not
   hand-authored SVG, since the source is a rendered image, not vector
   geometry we computed ourselves. 640px (wider than task 10's single
   diagrams) so a 3-panel graph triptych keeps its axis labels legible. */
.oz-image-box {
    width: 100%;
    max-width: 640px;
    margin: 2px auto 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--oz-surface-inset);
    border: 1px solid var(--oz-border-subtle);
}
.oz-image-box img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Use the API's figure_url and natural image size, as in the chat trainer.
   Capped like .oz-image-box so a wide desktop card doesn't stretch the
   source image (e.g. task-16's 1200x840 circle diagrams) up past a size
   that reads comfortably next to the surrounding solution text; on a
   narrow phone viewport the card itself is already this size or smaller,
   so the cap doesn't change anything there. */
.oz-task-figure {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 2px auto 0;
    align-self: center;
    border-radius: 6px;
}

/* 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-index { font-family: var(--oz-font-mono); font-size: 15px; color: var(--oz-text-muted); }
.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-statement-groups {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.oz-statement-group-title {
    margin: 0 0 14px;
    font-family: var(--oz-font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--oz-text-primary);
}
.oz-statement-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oz-statement-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--oz-radius-8);
    background: var(--oz-bg);
    border: 1px solid var(--oz-border-glass);
}
.oz-statement-badge {
    flex: none;
    margin-top: 2px;
    padding: 3px 10px;
    border-radius: var(--oz-radius-pill);
    font-family: var(--oz-font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.oz-statement-badge-true {
    color: var(--oz-success-text);
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .3);
}
.oz-statement-badge-false {
    color: var(--oz-danger-text);
    background: rgba(248, 113, 113, .1);
    border: 1px solid rgba(248, 113, 113, .3);
}
.oz-statement-body { min-width: 0; }
.oz-statement-text { margin: 0 0 4px; font-size: 15.5px; line-height: 1.5; color: var(--oz-text-primary); font-weight: 600; }
.oz-statement-note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--oz-text-secondary); }

.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); }

/* Solo variant: no board demo sits alongside the copy, so the text can
   stretch wider before it starts to feel lost in the panel. */
.oz-cta-panel--solo .oz-cta-inner h2 { max-width: 40ch; }
.oz-cta-panel--solo .oz-cta-inner p { max-width: 68ch; }
.oz-cta-panel--solo .oz-cta-micro { max-width: 68ch; }

.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;
    overscroll-behavior: contain;
    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;
    overscroll-behavior: contain;
    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;
}
html.oz-board-prompt-open {
    overflow: hidden;
    scroll-behavior: auto;
}
body.oz-board-prompt-open {
    position: fixed;
    top: var(--oz-prompt-scroll-top, 0px);
    left: var(--oz-prompt-scroll-left, 0px);
    width: 100%;
    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; }

/* Shared-condition lessons: one text and five independently expandable solutions. */
.oz-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; color: var(--oz-text-muted); font-size: 14px; }
.oz-breadcrumbs a, .oz-back-to-condition { color: #C4B5FD; text-decoration: none; }
.oz-breadcrumbs a:hover, .oz-back-to-condition:hover { text-decoration: underline; }
.oz-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.oz-topic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px solid var(--oz-border-hair); border-radius: 16px; background: var(--oz-fill-ghost); text-decoration: none; }
.oz-topic-card:hover { border-color: #A78BFA; background: rgba(168, 85, 247, .06); }
.oz-topic-card h3 { margin: 0; font-size: 24px; color: #F1F5F9; }
.oz-topic-card p { margin: 0; color: var(--oz-text-secondary); line-height: 1.6; }
.oz-topic-link { color: #C4B5FD; font-weight: 600; margin-top: auto; padding-top: 12px; }
.oz-block-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.oz-block-jumps a { display: block; padding: 9px 14px; border: 1px solid var(--oz-border-hair); border-radius: 8px; color: #CBD5E1; text-decoration: none; font-size: 14px; }
.oz-block-jumps a:hover { border-color: #A78BFA; color: #F8FAFC; }
.oz-block-condition { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.oz-block-text { white-space: pre-line; }
.oz-block-image { margin: 0 auto; width: 100%; max-width: 680px; }
.oz-block-image img { max-height: 680px; object-fit: contain; }
.oz-block-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.oz-block-table { min-width: 100%; font-size: 14px; }
.oz-block-table th, .oz-block-table td { padding: 10px 12px; min-width: 80px; white-space: normal; font-family: var(--oz-font-body); }
.oz-back-to-condition { font-size: 14px; align-self: flex-start; }
.oz-block-task, #uslovie { scroll-margin-top: 100px; }
.oz-block-jumps a:focus-visible, .oz-topic-card:focus-visible, .oz-block-table-wrap:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 4px; }
@media (max-width: 640px) {
    .oz-topic-grid { grid-template-columns: minmax(0, 1fr); }
    .oz-topic-card { padding: 20px; }
    .oz-block-table th, .oz-block-table td { padding: 8px; }
}

@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; }
}