@font-face {
    font-family: "SevenSegmentRegular";
    src: url("/static/fonts/seven-segment.624871e1b617.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "CMUSerif-Roman";
    src: url("/static/fonts/cmunrm.01643be9fa75.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "CMUSerif-Bold";
    src: url("/static/fonts/cmunbx.971a7f181809.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --font-sans: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --color-bg: #f4f7fb;
    --color-surface: #ffffff;
    --color-surface-muted: #eef3f9;
    --color-text: #172033;
    --color-text-muted: #5f6f86;
    --color-heading: #0f1728;
    --color-link: #1f6feb;
    --color-link-hover: #1557b0;
    --color-border: #d6dfeb;
    --color-highlight: #dce9ff;
    --color-shadow: rgba(15, 23, 40, 0.08);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --container-width: 1120px;
    --grid-gap: 10px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    --keycap-height: 43px;
    --keycap-max-width: 57px;
    --keycap-gap: 4px;
    --keycap-font-size: 18px;
    --keycap-shift-font-size: 9px;
    --keycap-small-font-size: 11px;
    --keycap-extra-small-font-size: 10px;
    --keyboard-toolbar-font-size: 14px;
    --keyboard-padding-horizontal: 6px;
    --keyboard-padding-top: 6px;
    --keyboard-padding-bottom: 6px;
    --keyboard-row-padding-left: 4px;
    --keyboard-row-padding-right: 42px;
    --keycap-background: #f4f6f9;
    --keycap-background-hover: #e8edf4;
    --keycap-background-active: #dce9ff;
    --keycap-background-pressed: #cfdef3;
    --keycap-border: 1px solid #d6dfeb;
    --keycap-border-bottom: 1px solid #c7d2e1;
    --keycap-text: #172033;
    --keycap-text-hover: #1557b0;
    --keyboard-toolbar-background: transparent;
}

.MLK__backdrop {
    background: rgba(244, 247, 251, 0.96) !important;
}

@media (max-width: 900px) {
    body {
        --keyboard-row-padding-right: 4px;
    }
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

a:hover,
a:focus-visible {
    color: var(--color-link-hover);
}

button {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.container {
    width: min(100% - 32px, var(--container-width));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--color-border);
    background: rgba(244, 247, 251, 0.96);
    backdrop-filter: blur(14px);
}

.site-header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 62px;
}

.brand {
    color: var(--color-heading);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.nav {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active,
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link {
    background: var(--color-highlight);
    color: var(--color-link-hover);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    display: none;
    min-width: 0;
    width: fit-content;
    max-width: calc(100vw - 32px);
    padding: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 32px var(--color-shadow);
    white-space: nowrap;
}

.nav-dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
    background: var(--color-surface-muted);
    color: var(--color-link-hover);
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown,
.nav-item-dropdown.is-open .nav-dropdown {
    display: inline-grid;
    justify-items: stretch;
}

.account-slot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.account-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-heading);
    font-weight: 500;
    white-space: nowrap;
}

.account-pill-secondary {
    background: var(--color-surface-muted);
}

.account-settings-button {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-heading);
}

.account-settings-button:hover,
.account-settings-button:focus-visible,
.account-settings-button.is-active {
    border-color: #9bb6d6;
    background: var(--color-highlight);
    color: var(--color-link-hover);
}

.account-settings-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-settings-button svg path,
.account-settings-button svg circle {
    fill: var(--color-surface);
    stroke: currentColor;
}

.user-category-menu {
    position: relative;
    z-index: 30;
}

.user-category-menu > summary {
    list-style: none;
    cursor: pointer;
}

.user-category-menu > summary::-webkit-details-marker {
    display: none;
}

.user-category-menu-toggle::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.65;
}

.user-category-menu[open] .user-category-menu-toggle {
    background: var(--color-highlight);
    color: var(--color-link-hover);
}

.user-category-menu-form {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 7px;
    min-width: 250px;
    padding: 9px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 16px 32px var(--color-shadow);
}

.user-category-menu-form select,
.user-category-menu-form .button {
    min-height: 34px;
    border-radius: 10px;
}

.user-category-menu-form select {
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid rgba(95, 111, 134, 0.3);
    background: var(--color-surface);
    color: var(--color-text);
}

.user-category-menu-form .button {
    padding: 5px 9px;
}

.site-main {
    flex: 1 0 auto;
    padding: 40px 0 72px;
}

.site-footer {
    flex: 0 0 auto;
    padding: 18px 0 24px;
    border-top: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-text-muted);
    font-size: 0.86rem;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
}

.site-footer-inner a {
    color: inherit;
}

.page-grid {
    display: grid;
    gap: var(--grid-gap);
}

.hero {
    margin: 0;
}

.hero-panel,
.card {
    width: 100%;
    padding: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(15, 23, 40, 0.04);
}

.hero-panel {
    text-align: center;
}

h1,
h2,
h3 {
    margin: 0 0 16px;
    font-family: var(--font-serif);
    color: var(--color-heading);
    line-height: 1.15;
}

h1 {
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
}

h2 {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

p {
    margin: 0 0 16px;
}

.lead {
    font-size: 1rem;
    color: var(--color-text-muted);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.button,
button,
select,
input {
    min-height: 42px;
    border-radius: 999px;
}

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid transparent;
    background: var(--color-link);
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible {
    background: var(--color-link-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.button-secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-heading);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    background: var(--color-highlight);
    color: var(--color-link-hover);
}

.section-grid {
    display: grid;
    gap: var(--grid-gap);
}

.section-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.muted {
    color: var(--color-text-muted);
}

ul {
    margin: 0;
    padding-left: 20px;
}

li + li {
    margin-top: 8px;
}

.filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-heading);
}

input,
select {
    width: 100%;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text);
}

input:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(31, 111, 235, 0.2);
    border-color: var(--color-link);
}

.material-item {
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.material-item:first-of-type {
    padding-top: 8px;
    border-top: none;
}

.material-item-link,
.material-card-link {
    display: block;
    color: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.material-item-link {
    padding: 10px 12px;
    margin: 0;
    border-radius: 12px;
}

.material-item-link p,
.material-card-link p {
    margin: 0;
}

.material-item-link p + p,
.material-card-link p + p {
    margin-top: 8px;
}

.material-item-link h2,
.material-card-link h2 {
    margin-bottom: 0;
}

.material-item-link:hover,
.material-item-link:focus-visible,
.material-card-link:hover,
.material-card-link:focus-visible {
    background: var(--color-surface-muted);
    border-color: var(--color-link);
    color: inherit;
}

.material-card-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.book-frame {
    width: 100%;
    min-height: 680px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.stack-page {
    display: grid;
    gap: 18px;
}

.auth-grid .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.auth-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: flex-start;
}

.profile-card,
.profile-theme-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-summary-tile {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.profile-summary-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.level-scale-list {
    display: grid;
    gap: 8px;
}

.level-scale-list p {
    margin: 0;
}

.profile-levels-header {
    margin-bottom: 18px;
}

.profile-theme-grid {
    gap: 16px;
}

.profile-theme-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.profile-level-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.profile-level-table th,
.profile-level-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.profile-level-table th:last-child,
.profile-level-table td:last-child {
    width: 110px;
    text-align: right;
    white-space: nowrap;
}

.learning-tree-card {
    display: grid;
    gap: 20px;
    height: calc(100dvh - 122px);
    min-height: 640px;
}

.learning-tree-layout {
    display: grid;
    gap: 16px;
    align-items: stretch;
    min-height: 0;
    height: 100%;
    grid-template-areas:
        "details"
        "tree"
        "legend";
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.learning-tree-app {
    display: grid;
    gap: 14px;
    grid-area: tree;
    min-height: 0;
    height: 100%;
}

.learning-tree-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    grid-area: legend;
    align-self: end;
}

.learning-tree-legend-item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-heading);
    font-size: 0.84rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.learning-tree-legend-item:hover,
.learning-tree-legend-item:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.learning-tree-legend-item.is-active {
    border-color: rgba(23, 32, 51, 0.16);
    box-shadow: 0 10px 18px rgba(15, 23, 40, 0.08);
}

.learning-tree-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
}

.learning-tree-legend-item-introduction {
    color: #8b5cf6;
}

.learning-tree-legend-item-mechanics {
    color: #2f9e44;
}

.learning-tree-legend-item-heat {
    color: #d94841;
}

.learning-tree-legend-item-electricity {
    color: #1f6feb;
}

.learning-tree-legend-item-other {
    color: #d38b18;
}

.learning-tree-legend-item-exam-ege {
    color: #c2410c;
}

.learning-tree-legend-item-exam-oge {
    color: #0f766e;
}

.learning-tree-legend-note {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.learning-tree-stage {
    order: 1;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    contain: inline-size;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius-md) + 2px);
    background:
        radial-gradient(circle at top left, rgba(31, 111, 235, 0.08), transparent 34%),
        radial-gradient(circle at bottom right, rgba(15, 139, 104, 0.08), transparent 30%),
        linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
    cursor: grab;
    user-select: none;
}

.learning-tree-stage.is-dragging {
    cursor: grabbing;
}

.learning-tree-layer-labels {
    position: absolute;
    inset: 0 auto 0 0;
    width: 206px;
    pointer-events: none;
    z-index: 1;
}

.learning-tree-level-label {
    position: absolute;
    left: 52px;
    width: 136px;
    display: block;
    transform: translateY(-50%);
    padding: 0;
    color: var(--color-heading);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}

.learning-tree-layer-label {
    position: absolute;
    left: 14px;
    width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(23, 32, 51, 0.08);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transform: translateY(-50%);
}

.learning-tree-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.learning-tree-svg,
.learning-tree-nodes {
    position: absolute;
    inset: 0;
}

.learning-tree-svg {
    overflow: visible;
    z-index: 0;
}

.learning-tree-edge {
    fill: none;
    stroke: rgba(95, 111, 134, 0.32);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke 0.2s ease, opacity 0.2s ease, stroke-width 0.2s ease;
}

.learning-tree-edge.is-muted {
    opacity: 0.2;
}

.learning-tree-edge.is-secondary {
    stroke: rgba(95, 111, 134, 0.52);
    stroke-width: 2.8;
    opacity: 0.82;
}

.learning-tree-edge.is-active {
    stroke: var(--color-link);
    stroke-width: 3.2;
    opacity: 1;
}

.learning-tree-edge.is-warning {
    stroke: rgba(217, 72, 65, 0.9);
    stroke-width: 2.8;
    opacity: 1;
}

.learning-tree-edge.is-warning.is-active {
    stroke: #d94841;
    stroke-width: 3.4;
}

.learning-tree-nodes {
    pointer-events: none;
    z-index: 1;
}

.learning-tree-node {
    position: absolute;
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 12px 12px 10px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 26px rgba(15, 23, 40, 0.08);
    color: var(--color-heading);
    text-align: left;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.learning-tree-node-ai-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 10px rgba(15, 23, 40, 0.14);
}

.learning-tree-node-end-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(23, 32, 51, 0.52);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 10px rgba(15, 23, 40, 0.1);
}

.learning-tree-node-end-badge::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: rgba(23, 32, 51, 0.72);
}

.learning-tree-node-ai-badge-AI-item {
    background: #d94841;
}

.learning-tree-node-ai-badge-AI-card {
    background: #d38b18;
}

.learning-tree-node-ai-badge-AI-content {
    background: #2f9e44;
}

.learning-tree-node-ai-badge-AI-corrected {
    background: #1f6feb;
}

.learning-tree-node-kind-theory {
    border-color: rgba(23, 32, 51, 0.08);
    border-radius: 20px;
}

.learning-tree-node-kind-practice {
    border-width: 2px;
    border-style: solid;
    border-color: rgba(23, 32, 51, 0.26);
    border-radius: 10px;
    box-shadow:
        0 10px 26px rgba(15, 23, 40, 0.08),
        inset 0 0 0 1px rgba(23, 32, 51, 0.05);
}

.learning-tree-node:hover,
.learning-tree-node:focus-visible {
    background-color: rgba(255, 255, 255, 0.98);
    color: var(--color-heading);
    transform: translate(-50%, calc(-50% - 2px));
    z-index: 20;
}

.learning-tree-node.is-muted {
    opacity: 0.35;
}

.learning-tree-node.is-selected {
    border-color: var(--color-link);
    box-shadow: 0 16px 34px rgba(31, 111, 235, 0.18);
}

.learning-tree-node.is-filter-primary {
    opacity: 1;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.14);
}

.learning-tree-node.is-external-target {
    opacity: 1;
    border-color: var(--color-link);
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.16), 0 16px 34px rgba(31, 111, 235, 0.24);
    animation: learning-tree-node-external-pulse 1.15s ease-in-out infinite;
}

.learning-tree-node.is-filter-secondary {
    opacity: 0.72;
    box-shadow: 0 10px 22px rgba(15, 23, 40, 0.1);
}

@keyframes learning-tree-node-external-pulse {
    0% {
        box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.14), 0 14px 30px rgba(31, 111, 235, 0.22);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.28), 0 20px 42px rgba(31, 111, 235, 0.34);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.14), 0 14px 30px rgba(31, 111, 235, 0.22);
    }
}

.learning-tree-node-exam-tags {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.learning-tree-node.is-selected .learning-tree-node-exam-tags,
.learning-tree-node.is-filter-primary .learning-tree-node-exam-tags {
    display: flex;
}

.learning-tree-exam-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.learning-tree-exam-tag-ege {
    background: rgba(194, 65, 12, 0.14);
    color: #c2410c;
}

.learning-tree-exam-tag-oge {
    background: rgba(15, 118, 110, 0.14);
    color: #0f766e;
}

.learning-tree-details-warning {
    color: #d94841;
    font-weight: 700;
}

.learning-tree-details-inline-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-link);
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    min-height: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    appearance: none;
}

.learning-tree-details-inline-link:hover,
.learning-tree-details-inline-link:focus-visible {
    color: var(--color-link-hover);
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    outline: none;
}

.learning-tree-node-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px;
}

.learning-tree-node-level-badge,
.learning-tree-node-level-number,
.learning-tree-node-kind-badge,
.learning-tree-node-kind-short-badge,
.learning-tree-node-connection-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.learning-tree-node-level-badge {
    text-transform: uppercase;
}

.learning-tree-node-level-number {
    min-width: 26px;
    padding: 0;
}

.learning-tree-node-kind-short-badge {
    min-width: 26px;
    padding: 0;
}

.learning-tree-node-kind-badge,
.learning-tree-node-kind-short-badge {
    background: rgba(23, 32, 51, 0.08);
    color: var(--color-heading);
}

.learning-tree-node-connection-badge {
    min-width: 28px;
}

.learning-tree-node-title {
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.learning-tree-node-meta {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.learning-tree-node-summary {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.42;
}

.learning-tree-node-level-badge-introduction,
.learning-tree-node-level-number-introduction,
.learning-tree-node-level-introduction {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.learning-tree-node-topic-introduction {
    --learning-tree-node-topic-border: rgba(128, 103, 189, 0.95);
    --learning-tree-node-topic-fill-pale: rgba(224, 214, 247, 0.88);
    --learning-tree-node-topic-fill-solid: rgba(166, 138, 232, 0.96);
}

.learning-tree-node-level-badge-mechanics,
.learning-tree-node-level-number-mechanics,
.learning-tree-node-level-mechanics {
    background: rgba(47, 158, 68, 0.12);
    color: #2f9e44;
}

.learning-tree-node-topic-mechanics {
    --learning-tree-node-topic-border: rgba(84, 153, 98, 0.95);
    --learning-tree-node-topic-fill-pale: rgba(214, 240, 220, 0.9);
    --learning-tree-node-topic-fill-solid: rgba(86, 173, 104, 0.96);
}

.learning-tree-node-level-badge-heat,
.learning-tree-node-level-number-heat,
.learning-tree-node-level-heat {
    background: rgba(217, 72, 65, 0.12);
    color: #d94841;
}

.learning-tree-node-topic-heat {
    --learning-tree-node-topic-border: rgba(199, 98, 90, 0.95);
    --learning-tree-node-topic-fill-pale: rgba(247, 218, 215, 0.9);
    --learning-tree-node-topic-fill-solid: rgba(217, 95, 84, 0.96);
}

.learning-tree-node-level-badge-electricity,
.learning-tree-node-level-number-electricity,
.learning-tree-node-level-electricity {
    background: rgba(31, 111, 235, 0.12);
    color: #1f6feb;
}

.learning-tree-node-topic-electricity {
    --learning-tree-node-topic-border: rgba(92, 136, 204, 0.95);
    --learning-tree-node-topic-fill-pale: rgba(214, 229, 248, 0.9);
    --learning-tree-node-topic-fill-solid: rgba(88, 139, 219, 0.96);
}

.learning-tree-node-level-badge-other,
.learning-tree-node-level-number-other,
.learning-tree-node-level-other {
    background: rgba(211, 139, 24, 0.14);
    color: #d38b18;
}

.learning-tree-node-topic-other {
    --learning-tree-node-topic-border: rgba(196, 146, 70, 0.95);
    --learning-tree-node-topic-fill-pale: rgba(246, 228, 204, 0.9);
    --learning-tree-node-topic-fill-solid: rgba(210, 159, 80, 0.96);
}

.learning-tree-node-connection-badge {
    background: rgba(23, 32, 51, 0.08);
    color: var(--color-heading);
}

.learning-tree-node.is-compact {
    --learning-tree-node-progress-color: var(--learning-tree-node-topic-fill-pale, rgba(214, 229, 248, 0.9));
    gap: 6px;
    justify-items: stretch;
    align-content: center;
    padding: 10px 12px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--learning-tree-node-topic-border, rgba(123, 162, 219, 0.9));
    background-color: rgba(255, 255, 255, 0.98);
    background-image: linear-gradient(
        to top,
        var(--learning-tree-node-progress-color) 0%,
        var(--learning-tree-node-progress-color) calc(var(--learning-tree-node-progress-ratio, 0) * 100%),
        transparent calc(var(--learning-tree-node-progress-ratio, 0) * 100%),
        transparent 100%
    );
    overflow: visible;
    isolation: isolate;
}

.learning-tree-node.is-compact.is-lesson-complete {
    --learning-tree-node-progress-color: var(--learning-tree-node-topic-fill-solid, rgba(88, 139, 219, 0.96));
}

.learning-tree-node.is-compact > * {
    position: relative;
    z-index: 1;
}

.learning-tree-node.is-compact.learning-tree-node-kind-theory {
    border-radius: 999px;
}

.learning-tree-node.is-compact.learning-tree-node-kind-practice {
    border-radius: 8px;
    border-width: 2px;
}

.learning-tree-node.is-compact .learning-tree-node-ai-badge {
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    font-size: 0.5rem;
}

.learning-tree-node.is-compact .learning-tree-node-end-badge {
    top: auto;
    bottom: 6px;
    left: 10px;
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

.learning-tree-node.is-compact .learning-tree-node-end-badge::after {
    inset: 2px;
}

.learning-tree-node.is-compact .learning-tree-node-title {
    display: -webkit-box;
    width: auto;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    align-self: start;
    font-size: 0.82rem;
    line-height: 1.22;
    text-align: center;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.learning-tree-node.is-compact .learning-tree-node-exam-tags {
    gap: 4px;
    justify-content: center;
    align-self: end;
    margin-top: 2px;
}

.learning-tree-node.is-compact .learning-tree-exam-tag {
    min-height: 16px;
    padding: 0 6px;
    font-size: 0.56rem;
}

.learning-tree-node.is-medium {
    gap: 8px;
}

.learning-tree-node.is-medium .learning-tree-node-title {
    display: -webkit-box;
    width: auto;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    font-size: 0.94rem;
    line-height: 1.24;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.learning-tree-node.is-medium .learning-tree-node-meta {
    font-size: 0.74rem;
}

.learning-tree-node.is-medium .learning-tree-node-header {
    gap: 6px;
}

.learning-tree-node.is-medium .learning-tree-node-exam-tags {
    justify-content: center;
}

.learning-tree-node.is-detailed {
    gap: 10px;
    padding: 14px;
}

.learning-tree-node.is-detailed .learning-tree-node-title {
    font-size: 1rem;
    font-weight: 700;
}

.learning-tree-node.is-detailed .learning-tree-node-summary {
    display: block;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 0.8rem;
    font-weight: 400;
}

.learning-tree-node.is-detailed .learning-tree-node-meta {
    font-size: 0.76rem;
    font-weight: 500;
}

.learning-tree-node-progress {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 7px;
    margin-top: 1px;
    overflow: hidden;
    border: 1px solid rgba(23, 32, 51, 0.16);
    border-radius: 999px;
    background: rgba(23, 32, 51, 0.07);
}

.learning-tree-node-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--learning-tree-node-topic-fill-pale, rgba(214, 229, 248, 0.9));
    transition: width 0.28s ease, background-color 0.28s ease;
}

.learning-tree-node.is-lesson-complete .learning-tree-node-progress-fill {
    background: var(--learning-tree-node-topic-fill-solid, rgba(88, 139, 219, 0.96));
}

.learning-tree-final-test-status {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(15, 23, 40, 0.12);
}

.learning-tree-final-test-status.is-passed {
    color: #2f9e44;
}

.learning-tree-final-test-status.is-failed_blocked {
    color: #c92a2a;
}

.learning-tree-final-test-status.is-passed_refresh,
.learning-tree-final-test-status.is-failed_available {
    color: #d38b18;
}

.learning-tree-final-test-status::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.learning-tree-final-test-status:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.learning-tree-node-markers {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: block;
    pointer-events: none;
}

.learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node-markers .learning-tree-readiness-warning,
.learning-tree-node-markers .learning-tree-final-test-status {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin: 0;
    pointer-events: auto;
}

.learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node-markers .learning-tree-readiness-warning,
.learning-tree-node-markers .learning-tree-final-test-status {
    position: absolute;
    top: 6px;
}

.learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node-markers .learning-tree-readiness-warning {
    right: auto;
    left: 6px;
}

.learning-tree-node-markers .learning-tree-node-ai-badge
    + .learning-tree-readiness-warning {
    left: 32px;
}

.learning-tree-node-markers .learning-tree-final-test-status {
    right: 6px;
    left: auto;
}

.learning-tree-node-markers .learning-tree-node-ai-badge {
    font-size: 0.56rem;
}

.learning-tree-node-markers .learning-tree-readiness-warning {
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #fffaf0;
    font-size: 0.78rem;
    box-shadow: 0 3px 9px rgba(15, 23, 40, 0.1);
}

.learning-tree-node.has-corner-markers {
    padding-top: 38px;
}

.learning-tree-node.has-corner-markers .learning-tree-node-end-badge {
    top: auto;
    bottom: 6px;
    left: 6px;
}

.learning-tree-node.is-medium > .learning-tree-node-markers {
    inset: 0;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-readiness-warning,
.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-final-test-status {
    top: auto;
    right: auto;
    width: 18px;
    height: 18px;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-readiness-warning,
.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-final-test-status {
    top: 5px;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-readiness-warning {
    right: auto;
    left: 7px;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-node-ai-badge
    + .learning-tree-readiness-warning {
    left: 28px;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-final-test-status {
    right: 7px;
    left: auto;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-final-test-status {
    font-size: 0.82rem;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-node-ai-badge {
    font-size: 0.48rem;
}

.learning-tree-node.is-medium .learning-tree-node-markers .learning-tree-readiness-warning {
    font-size: 0.66rem;
}

.learning-tree-node.is-medium.has-corner-markers {
    padding-top: 31px;
}

.learning-tree-node.is-compact > .learning-tree-node-markers {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: block;
    pointer-events: none;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-readiness-warning,
.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-final-test-status {
    top: auto;
    right: auto;
    width: 14px;
    height: 14px;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-readiness-warning,
.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-final-test-status {
    position: absolute;
    top: 6px;
    pointer-events: auto;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-node-ai-badge,
.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-readiness-warning {
    right: auto;
    left: 10px;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-node-ai-badge
    + .learning-tree-readiness-warning {
    left: 28px;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-final-test-status {
    right: 10px;
    left: auto;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-final-test-status {
    font-size: 0.66rem;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-node-ai-badge {
    font-size: 0.4rem;
}

.learning-tree-node.is-compact .learning-tree-node-markers .learning-tree-readiness-warning {
    font-size: 0.52rem;
}

.learning-tree-node.is-compact.has-corner-markers {
    padding-top: 24px;
}

@media (max-width: 759px) {
    .learning-tree-layer-labels {
        width: 126px;
    }

    .learning-tree-level-label {
        left: 40px;
        width: 82px;
        padding: 0;
        font-size: 0.58rem;
    }

    .learning-tree-layer-label {
        left: 8px;
        width: 24px;
        min-width: 24px;
        min-height: 22px;
        padding: 0 5px;
        font-size: 0.72rem;
    }
}

.learning-tree-details {
    display: grid;
    gap: 12px;
    min-height: 0;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    grid-area: details;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.learning-tree-details::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.learning-tree-details-kicker {
    margin: 0;
    color: var(--color-link-hover);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.learning-tree-details-title,
.learning-tree-details-section h4 {
    margin: 0;
}

.learning-tree-details-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
}

.learning-tree-details-dev {
    display: grid;
    gap: 4px;
}

.learning-tree-details-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.learning-tree-details-level {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(23, 32, 51, 0.08);
    color: var(--color-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.learning-tree-details-level[hidden],
.learning-tree-details-exam-tags[hidden] {
    display: none !important;
}

.learning-tree-details-topic {
    margin: 6px 0 0;
    font-size: 0.86rem;
    line-height: 1.35;
}

.learning-tree-details-slug {
    margin: 4px 0 0;
    font-size: 0.82rem;
    font-family: Consolas, "Courier New", monospace;
    overflow-wrap: anywhere;
}

.learning-tree-details-attributes {
    margin: 4px 0 0;
    font-size: 0.82rem;
    font-family: Consolas, "Courier New", monospace;
    overflow-wrap: anywhere;
}

.learning-tree-details-exam-tags {
    margin: 0;
}

.learning-tree-details-exam-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.learning-tree-details-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.learning-tree-details-step-stats {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(102, 126, 156, 0.2);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.3;
}

.learning-tree-details-step-stats[hidden] {
    display: none;
}

.learning-tree-details-step-stats-title {
    flex-basis: 100%;
    color: var(--color-text);
    font-weight: 600;
}

.learning-tree-details-step-stats strong {
    color: var(--color-text);
    font-weight: 600;
}

.learning-tree-details-section {
    display: grid;
    gap: 5px;
}

.learning-tree-details-list {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text);
    font-size: 0.84rem;
    line-height: 1.32;
}

.learning-tree-details-list li {
    margin-top: 0;
}

.learning-tree-mini-tree-section {
    display: grid;
    gap: 10px;
}

.learning-tree-mini-tree-note,
.learning-tree-mini-tree-selection-title,
.learning-tree-mini-tree-selection-meta {
    margin: 0;
}

.learning-tree-mini-tree-canvas {
    position: relative;
    min-height: 0;
    background: transparent;
    overflow: visible;
    margin-bottom: 15px;
    margin-top: 10px;
}

.learning-tree-mini-tree-thermometer {
    --learning-tree-mini-stem-thickness: 4px;
    --learning-tree-mini-tick-thickness: 4px;
    --learning-tree-mini-short-tick-length: 10px;
    --learning-tree-mini-long-tick-length: 15px;
    --learning-tree-mini-text-x: 30px;
    --learning-tree-mini-row-height: 18px;
    position: relative;
    height: 100%;
    min-height: 0;
}

.learning-tree-mini-tree-track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--learning-tree-mini-stem-thickness);
    border-radius: 0;
    background: rgb(150, 167, 192);
    box-shadow: none;
    overflow: hidden;
    contain: inline-size;
    z-index: 2;
    pointer-events: none;
}

.learning-tree-mini-tree-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-radius: 0;
    background: rgb(18, 84, 186);
    box-shadow: none;
    transition: height 0.24s ease;
}

.learning-tree-mini-tree-lessons {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
}

.learning-tree-mini-lesson-row {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--learning-tree-mini-row-height);
    overflow: visible;
    display: block;
}

.learning-tree-mini-lesson {
    position: absolute;
    left: calc(var(--learning-tree-mini-stem-thickness) / 2);
    top: calc((var(--learning-tree-mini-row-height) - var(--learning-tree-mini-tick-thickness)) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    width: var(--learning-tree-mini-short-tick-length);
    height: var(--learning-tree-mini-tick-thickness);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(150, 167, 192);
    box-shadow: none;
    color: var(--color-heading);
    cursor: pointer;
    appearance: none;
    text-align: center;
    overflow: hidden;
    contain: inline-size;
    transition: background 0.18s ease;
    z-index: 1;
}

.learning-tree-mini-lesson-kind-theory {
    background: rgb(150, 167, 192);
}

.learning-tree-mini-lesson-kind-practice {
    background: rgb(150, 167, 192);
}

.learning-tree-mini-lesson.is-control {
    background: rgb(150, 167, 192);
}

.learning-tree-mini-lesson.is-edge {
    width: var(--learning-tree-mini-long-tick-length);
    height: var(--learning-tree-mini-tick-thickness);
}

.learning-tree-mini-lesson:hover,
.learning-tree-mini-lesson:focus-visible {
    background: rgb(150, 167, 192);
    box-shadow: none;
    outline: none;
}

.learning-tree-mini-lesson.is-selected {
    background: rgba(18, 84, 186, 1);
    box-shadow: none;
}

.learning-tree-mini-lesson-caption {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: var(--learning-tree-mini-text-x);
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center center;
    width: auto;
    min-width: 0;
    max-width: calc(100% - var(--learning-tree-mini-text-x) - 8px);
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(41, 51, 72, 0.88);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    z-index: 3;
}

.learning-tree-mini-lesson-caption-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.18;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.learning-tree-mini-lesson-progress-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 0.66rem;
    font-weight: 800;
    flex-shrink: 0;
}

.learning-tree-mini-lesson-progress-mark.is-solved {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #1d9f58;
    color: #ffffff;
    font-size: 0.68rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(13, 96, 48, 0.28);
}

.learning-tree-mini-lesson-ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(15, 23, 40, 0.16);
    flex-shrink: 0;
}

.learning-tree-mini-lesson-row.is-announced .learning-tree-mini-lesson-caption {
    animation: learning-tree-mini-lesson-caption-blink 0.5s 1 both;
}

.learning-tree-mini-lesson-caption:hover,
.learning-tree-mini-lesson-caption:focus-visible {
    color: rgba(26, 35, 55, 0.98);
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    transform: translateY(-50%) scale(1.04);
}

.learning-tree-mini-lesson-row.is-announced .learning-tree-mini-lesson-caption:hover,
.learning-tree-mini-lesson-row.is-announced .learning-tree-mini-lesson-caption:focus-visible {
    animation: none;
    opacity: 1;
    color: rgba(26, 35, 55, 0.98);
    transform: translateY(-50%) scale(1.04);
}

.learning-tree-mini-tree-selection {
    display: grid;
    gap: 6px;
}

.learning-tree-mini-tree-selection-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
}

.learning-tree-mini-tree-selection-meta {
    font-size: 0.78rem;
    line-height: 1.3;
}

.learning-tree-mini-tree-actions {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: 10px;
    row-gap: 4px;
}

.learning-tree-mini-tree-action {
    min-width: 0;
    width: 100%;
    height: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84rem;
    white-space: nowrap;
}

.learning-tree-mini-tree-action-secondary {
    background: rgba(31, 111, 235, 0.1);
    color: var(--color-link);
}

.learning-tree-mini-lesson-row.is-selected .learning-tree-mini-lesson-caption {
    color: var(--color-heading);
    font-weight: 600;
}

@keyframes learning-tree-mini-lesson-caption-blink {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 0.7;
    }
    38% {
        transform: translateY(-50%) scale(1.06);
        opacity: 1;
    }
    72% {
        transform: translateY(-50%) scale(0.99);
        opacity: 0.9;
    }
    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

.learning-tree-link[hidden] {
    display: none;
}

@media (min-width: 1024px) {
    .learning-tree-layout {
        grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);
        grid-template-areas:
            "tree details"
            "legend legend";
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .learning-tree-app {
        min-width: 0;
    }

    .learning-tree-details {
        min-width: 0;
        min-height: 100%;
    }

    .learning-tree-details-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199px) {
    .learning-tree-details {
        gap: 10px;
        padding: 14px 16px;
    }

    .learning-tree-details-top {
        gap: 12px;
    }

    .learning-tree-details-columns {
        gap: 12px;
    }

    .learning-tree-details-section {
        gap: 6px;
    }
}

@media (max-width: 759px) {
    .learning-tree-details-top {
        grid-template-columns: 1fr;
    }
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-form button {
    width: 100%;
}

.auth-secondary-action {
    margin: -2px 0 0;
    text-align: center;
}

.privacy-consent-box {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.privacy-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.privacy-consent-label input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.privacy-consent-box .field-note {
    margin: 0 0 0 28px;
}

.auth-single-page {
    width: min(100%, 620px);
    margin: 0 auto;
}

.legal-document {
    display: grid;
    gap: 10px;
    line-height: 1.65;
}

.legal-document h2 {
    margin: 18px 0 0;
    font-size: 1.2rem;
}

.legal-document p,
.legal-document ul {
    margin: 0;
}

.privacy-data-list {
    display: grid;
    gap: 0;
    margin: 14px 0 18px;
}

.privacy-data-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.7fr) 1fr;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
}

.privacy-data-list dt {
    color: var(--color-text-muted);
}

.privacy-data-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.privacy-request-history ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.privacy-request-history li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 18px;
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.field-asterisk {
    color: #b42318;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.field-note {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.45;
}

.form-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.form-notes .field-note {
    margin: 0;
}

.field-error {
    color: #b42318;
    font-size: 0.9rem;
    font-weight: 600;
}

.rating-form {
    display: grid;
    gap: 10px;
}

.rating-form-inline {
    display: flex;
    align-items: center;
}

.rating-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.rating-button {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #c5cfde;
    font-size: 1.2rem;
    line-height: 1;
}

.rating-button.is-active {
    color: #f4b63d;
}

.rating-button.is-preview {
    color: #f6cf7a;
}

.rating-button:hover,
.rating-button:focus-visible {
    background: transparent;
    color: #f0a91f;
    transform: scale(1.05);
}

.practice-card {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.practice-card.is-correct {
    background: #edf9ef;
    border-color: #abd3b2;
}

.practice-card.is-uncounted {
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.38) 0,
            rgba(255, 255, 255, 0.38) 8px,
            rgba(255, 255, 255, 0.06) 8px,
            rgba(255, 255, 255, 0.06) 16px
        );
}

.practice-card.is-uncounted.is-correct {
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.38) 0,
            rgba(255, 255, 255, 0.38) 8px,
            rgba(255, 255, 255, 0.06) 8px,
            rgba(255, 255, 255, 0.06) 16px
        ),
        linear-gradient(#edf9ef, #edf9ef);
}

.practice-card.is-wrong {
    animation: practice-error-flash 1s ease;
}

.practice-card.is-wrong.is-quality-partial {
    animation-name: practice-partial-flash;
}

.practice-card.is-wrong.is-quality-almost {
    animation-name: practice-almost-flash;
}

@keyframes practice-error-flash {
    0% {
        background: var(--color-surface-muted);
    }
    20% {
        background: #fce9ea;
        border-color: #efb6bb;
    }
    100% {
        background: var(--color-surface-muted);
        border-color: var(--color-border);
    }
}

@keyframes practice-partial-flash {
    0% {
        background: var(--color-surface-muted);
    }
    20% {
        background: #fcece6;
        border-color: #e5aaa3;
    }
    100% {
        background: var(--color-surface-muted);
        border-color: var(--color-border);
    }
}

@keyframes practice-almost-flash {
    0% {
        background: var(--color-surface-muted);
    }
    20% {
        background: #fff8de;
        border-color: #e5d27e;
    }
    100% {
        background: var(--color-surface-muted);
        border-color: var(--color-border);
    }
}

.practice-description {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    position: relative;
    pointer-events: auto;
}

.learning-tree-mini-tree-summary-action {
    grid-column: 1 / -1;
    justify-self: center;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--color-link);
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
}

.learning-tree-mini-tree-summary-action:hover,
.learning-tree-mini-tree-summary-action:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.material-card-footer {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.material-card-summary-link {
    appearance: none;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-link);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.3;
    cursor: pointer;
}

.material-card-summary-link:hover,
.material-card-summary-link:focus-visible {
    color: var(--color-link-hover);
    text-decoration: none;
}

.practice-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.practice-input-row-inline {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0.2rem;
}

.practice-inline-segments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
}

.practice-inline-segments-multiple {
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

.practice-inline-text {
    white-space: normal;
}

.practice-input-row-formatted {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.practice-format-expression {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: nowrap;
    color: var(--color-heading);
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.2;
}

.practice-format-text {
    white-space: nowrap;
}

.practice-format-superscript {
    display: inline-flex;
    align-items: flex-start;
    align-self: flex-start;
    margin-left: -2px;
    transform: translateY(-0.52em);
}

.practice-format-text-superscript {
    font-size: 0.82em;
    line-height: 1;
}

.practice-input {
    flex: 1 1 160px;
    min-width: 100px;
}

.practice-input::placeholder,
.inline-gaps-input::placeholder {
    color: rgba(95, 111, 134, 0.72);
    font-style: italic;
    font-weight: 400;
    opacity: 1;
}

.value-missing-units-host {
    position: relative;
}

.value-missing-units-marker {
    position: absolute;
    z-index: 18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 18px;
    padding: 0;
    transform: translateY(-50%);
    color: #d6423a;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1;
    font-style: normal;
    font-weight: 800;
    pointer-events: none;
    animation: valueMissingUnitsBlink 0.72s ease-in-out infinite alternate;
}

.value-missing-units-marker[hidden] {
    display: none;
}

@keyframes valueMissingUnitsBlink {
    from {
        opacity: 0.35;
        transform: translateY(-50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .value-missing-units-marker {
        animation: none;
        opacity: 1;
    }
}

.practice-format-slot {
    flex: 0 0 auto;
    width: clamp(52px, 8ch, 112px);
    min-width: 0;
    padding: 6px 8px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    line-height: 1.2;
}

.practice-format-slot-superscript {
    width: clamp(24px, 3.2ch, 48px);
    min-height: 0;
    height: auto;
    padding: 1.5px 3px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.practice-units {
    flex: 0 0 auto;
    color: var(--color-heading);
    font-weight: 700;
    white-space: nowrap;
}

.practice-numeric-multiple-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(95, 111, 134, 0.18);
}

.practice-numeric-multiple-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(95, 111, 134, 0.18);
}

.practice-numeric-multiple-prompt {
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.35;
}

.practice-input-row-multiple {
    width: fit-content;
    max-width: 100%;
    margin-left: 0;
    flex: 0 0 auto;
}

.practice-input-row-after-statement {
    margin-left: 1.25em;
}

.practice-multiple-input {
    width: 100%;
}

.practice-multiple-input.is-numeric-slot-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18);
}

.practice-multiple-input.is-numeric-slot-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18);
}

.user-category-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 10px;
    border: 1px solid rgba(95, 111, 134, 0.22);
    border-radius: 12px;
    background: var(--color-surface-muted);
}

.user-category-preview label {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.user-category-preview select,
.user-category-preview .button {
    min-height: 34px;
    border-radius: 10px;
}

.user-category-preview select {
    padding: 5px 30px 5px 9px;
    border: 1px solid rgba(95, 111, 134, 0.3);
    background: var(--color-surface);
    color: var(--color-text);
}

.user-category-preview .button {
    padding: 5px 11px;
}

.practice-numeric-multiple-list.is-tabular {
    grid-template-columns: repeat(var(--multiple-alignment-columns, 2), max-content) minmax(0, 1fr);
    column-gap: 0.25em;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
}

.practice-numeric-multiple-list.is-tabular .practice-numeric-multiple-item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 0.25em;
    align-items: center;
}

.practice-numeric-multiple-list.is-tabular .practice-inline-segments-multiple {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    row-gap: 0;
    column-gap: 0.25em;
}

.practice-numeric-multiple-list.is-tabular .practice-input-row-inline,
.practice-numeric-multiple-list.is-tabular .practice-input-row-after-statement {
    margin-left: 0;
    margin-right: 0;
}

.practice-numeric-multiple-list.is-tabular .practice-input-row-after-statement {
    margin-left: 1em;
}

.practice-numeric-multiple-list.is-tabular.tabular-columns-2 {
    grid-template-columns: max-content minmax(8rem, 1fr);
}

.practice-numeric-multiple-list.is-tabular.tabular-columns-3 {
    grid-template-columns: max-content fit-content(23rem) minmax(0, 1fr);
}

[data-practice="multiple"][data-multiple-subkind="equation"] .practice-numeric-multiple-list.is-tabular.tabular-columns-2 {
    grid-template-columns: max-content minmax(8rem, 1fr) auto;
}

[data-practice="multiple"][data-multiple-subkind="equation"] .practice-numeric-multiple-list.is-tabular.tabular-columns-3 {
    grid-template-columns: max-content minmax(8rem, 23rem) minmax(0, 1fr) auto;
}

[data-practice="multiple"][data-multiple-subkind="equation"] .practice-inline-segments-multiple > .equation-field-controls {
    justify-self: start;
    margin-left: 0;
}

[data-practice="multiple"][data-multiple-subkind="equation"] .practice-numeric-multiple-item > .equation-field-controls {
    margin-left: 0;
}

.practice-inline-segments-multiple .equation-entry.practice-input-row-multiple {
    flex: 1 1 18rem;
    width: auto;
    min-width: min(8rem, 100%);
    max-width: 23rem;
    flex-wrap: nowrap;
}

.practice-inline-segments-multiple .equation-entry.practice-input-row-multiple .equation-field-frame {
    min-width: 0;
    flex-wrap: nowrap;
}

.practice-numeric-multiple-list.is-tabular .equation-entry.practice-input-row-multiple {
    width: 100%;
    max-width: none;
}

.practice-numeric-multiple-list.is-tabular .equation-field-frame > math-field.equation-input {
    width: 100%;
    min-width: min(8rem, 100%);
    max-width: 100%;
}

.practice-multiple-input.is-numeric-slot-typo {
    border-color: rgba(211, 139, 24, 0.9);
    box-shadow: 0 0 0 4px rgba(211, 139, 24, 0.18);
}

.find-mistakes-description {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.find-mistakes-counter {
    flex: 0 0 auto;
    min-width: 3.25rem;
    padding: 3px 9px;
    border: 1px solid rgba(95, 111, 134, 0.28);
    border-radius: 999px;
    background: rgba(245, 248, 252, 0.92);
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

.find-mistakes-block {
    padding: 14px 16px;
    border: 1px solid rgba(95, 111, 134, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--color-text);
    line-height: 1.65;
}

.find-mistakes-review {
    position: relative;
    min-width: 0;
}

.find-mistakes-review.has-explanations {
    display: grid;
    grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    transition: grid-template-columns 0.3s cubic-bezier(0.22, 0.75, 0.28, 1), column-gap 0.3s ease;
}

.find-mistakes-review.is-revealed {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
    column-gap: 22px;
}

.find-mistakes-review.is-unassigned {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.find-mistakes-review.is-unassigned .find-mistakes-explanations {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    gap: 7px;
}

.find-mistakes-review.is-unassigned .find-mistakes-explanations::before {
    content: "Возможные объяснения:";
    flex: 0 0 100%;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.find-mistakes-review.is-unassigned .find-mistakes-explanation {
    position: static;
    width: auto;
    border-color: rgba(95, 111, 134, 0.28);
    background: var(--color-surface-muted);
    opacity: 1;
    transform: none;
}

.find-mistakes-review.is-unassigned .find-mistakes-connectors {
    display: none;
}

.find-mistakes-review.has-explanations > .find-mistakes-explanations {
    grid-column: 1;
    grid-row: 1;
}

.find-mistakes-review.has-explanations > .find-mistakes-block {
    grid-column: 2;
    grid-row: 1;
}

.find-mistakes-explanations {
    position: relative;
    align-self: stretch;
    height: 100%;
    min-width: 0;
    z-index: 4;
}

.find-mistakes-explanations[hidden] {
    display: none;
}

.find-mistakes-explanation {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--find-explanation-color, #2e62cc);
    border-radius: 10px;
    background: var(--find-explanation-surface, #eaf2ff);
    color: var(--color-text);
    font-size: 0.8rem;
    line-height: 1.3;
    box-shadow: 0 3px 10px rgba(27, 49, 88, 0.06);
    opacity: 0;
    transform: translateX(-7px);
    transition: opacity 0.16s ease var(--find-explanation-delay, 0ms), transform 0.18s ease var(--find-explanation-delay, 0ms);
}

.find-mistakes-review.is-explanations-visible .find-mistakes-explanation {
    opacity: 1;
    transform: translateX(0);
}

.find-mistakes-explanation > :first-child {
    margin-top: 0;
}

.find-mistakes-explanation > :last-child {
    margin-bottom: 0;
}

.find-mistakes-connectors {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease 0.12s;
}

.find-mistakes-review.is-explanations-visible .find-mistakes-connectors {
    opacity: 1;
}

.find-mistakes-connector-line {
    fill: none;
    stroke: var(--find-explanation-color, #607da8);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.72;
}

.find-mistakes-connector-dot {
    fill: var(--find-explanation-color, #607da8);
    opacity: 0.82;
}

.practice-item-explanations-review {
    position: relative;
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
    transition: grid-template-columns 0.24s ease, column-gap 0.24s ease;
}

.practice-item-explanations-review.is-revealed {
    grid-template-columns: minmax(150px, 25%) minmax(0, 1fr);
    column-gap: 14px;
}

.practice-item-explanations {
    position: relative;
    min-width: 0;
    z-index: 4;
}

.practice-item-explanations[hidden],
.practice-item-explanation[hidden],
.connection-item-explanations[hidden] {
    display: none;
}

.practice-item-explanation {
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--item-explanation-color, #2e62cc);
    border-radius: 10px;
    background: var(--item-explanation-surface, #eaf2ff);
    color: var(--color-text);
    font-size: 0.8rem;
    line-height: 1.3;
    box-shadow: 0 3px 10px rgba(27, 49, 88, 0.06);
    opacity: 0;
    transform: translateX(-7px);
    transition: opacity 0.16s ease var(--item-explanation-delay, 0ms), transform 0.18s ease var(--item-explanation-delay, 0ms);
}

.practice-item-explanations > .practice-item-explanation {
    position: absolute;
    left: 0;
    width: 100%;
}

.practice-item-explanations-review.is-revealed .practice-item-explanation,
.practice-item-explanation.is-revealed,
.connection-item-explanations.is-revealed .practice-item-explanation {
    opacity: 1;
    transform: translateX(0);
}

.practice-item-explanation-connectors {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease 0.12s;
}

.practice-item-explanations-review.is-revealed .practice-item-explanation-connectors {
    opacity: 1;
}

.practice-item-explanation-line {
    fill: none;
    stroke: var(--item-explanation-color, #607da8);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.72;
}

.matching-slot > .practice-item-explanation {
    width: 100%;
    margin-top: 7px;
}

.matching-slot.explanation-slot-host {
    min-width: 0;
}

.connection-item-explanations {
    display: grid;
    grid-template-columns: repeat(var(--connection-explanation-count), minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.connection-item-explanation-cell {
    min-width: 0;
}

.connection-item-explanation-cell .practice-item-explanation {
    height: 100%;
}

@media (max-width: 720px) {
    .practice-item-explanations-review,
    .practice-item-explanations-review.is-revealed {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 9px;
        column-gap: 0;
    }

    .practice-item-explanations {
        display: grid;
        gap: 7px;
    }

    .practice-item-explanations > .practice-item-explanation {
        position: static;
    }

    .practice-item-explanation-connectors {
        display: none;
    }

    .connection-item-explanations {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .practice-item-explanations-review,
    .practice-item-explanation,
    .practice-item-explanation-connectors {
        transition: none;
    }
}

.find-mistakes-review.is-revealed .find-mistakes-block {
    min-width: 0;
}

.find-mistakes-line {
    margin: 0;
}

.find-mistakes-line + .find-mistakes-line {
    margin-top: 0.45rem;
}

.find-mistakes-word-equation {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.25rem 0;
}

.find-mistakes-word-equation .find-mistakes-segment {
    display: inline-flex;
    align-items: baseline;
}

.find-mistakes-word-equation mjx-container[jax="CHTML"]:not([display="true"]) {
    margin: 0 !important;
}

.find-mistakes-line:is(h1, h2, h3) {
    color: var(--color-heading);
    font-family: var(--font-serif);
    line-height: 1.3;
}

.find-mistakes-spacer {
    height: 0.65rem;
}

.find-mistakes-segment {
    border-radius: 4px;
    cursor: pointer;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.find-mistakes-segment:hover,
.find-mistakes-segment:focus-visible {
    background: rgba(31, 111, 235, 0.11);
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.09);
}

.practice-card[data-find-mode="symbols"] .find-mistakes-symbol-equation {
    font-size: 2em;
    line-height: 1.35;
}

.find-mistakes-symbol {
    border-radius: 0.12em;
    cursor: pointer;
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.find-mistakes-symbol:hover,
.find-mistakes-symbol:focus-visible {
    background: rgba(31, 111, 235, 0.14);
    outline: none;
    box-shadow: 0 0 0 0.12em rgba(31, 111, 235, 0.1);
}

.find-mistakes-symbol.is-selected {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 2 Q2 0 4 2 T8 2' fill='none' stroke='%23c63f3f' stroke-width='1.4'/%3E%3C/svg%3E");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 8px 4px;
    padding-bottom: 3px;
}

.find-mistakes-symbol.is-find-correct {
    background-color: rgba(61, 145, 72, 0.16);
    box-shadow: inset 0 0 0 1px rgba(61, 145, 72, 0.35);
}

.find-mistakes-symbol.is-find-incorrect {
    background-color: rgba(191, 78, 72, 0.15);
    box-shadow: inset 0 0 0 1px rgba(191, 78, 72, 0.34);
}

.find-mistakes-symbol.is-find-missed {
    background-color: rgba(211, 139, 24, 0.16);
    box-shadow: inset 0 0 0 1px rgba(211, 139, 24, 0.38);
}

.find-mistakes-segment mjx-container[display="true"] mjx-math {
    border-radius: 5px;
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.find-mistakes-segment:hover mjx-container[display="true"] mjx-math,
.find-mistakes-segment:focus-visible mjx-container[display="true"] mjx-math {
    background: rgba(31, 111, 235, 0.11);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.09);
}

.find-mistakes-segment.is-selected {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #c63f3f;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

.find-mistakes-segment.is-selected:has(mjx-container),
.find-mistakes-segment.is-selected:has(.MathJax) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 2 Q2 0 4 2 T8 2' fill='none' stroke='%23c63f3f' stroke-width='1.4'/%3E%3C/svg%3E");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 8px 4px;
    padding-bottom: 3px;
}

.find-mistakes-segment.is-selected:has(mjx-container[display="true"]) {
    background-image: none;
    padding-bottom: 0;
}

.find-mistakes-segment.is-selected mjx-container[display="true"] mjx-math {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 2 Q2 0 4 2 T8 2' fill='none' stroke='%23c63f3f' stroke-width='1.4'/%3E%3C/svg%3E");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 8px 4px;
    padding-bottom: 3px;
}

.find-mistakes-segment.is-selected mjx-container,
.find-mistakes-segment.is-selected .MathJax {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #c63f3f;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

.find-mistakes-segment.is-find-correct {
    background-color: rgba(61, 145, 72, 0.16);
    box-shadow: inset 0 0 0 1px rgba(61, 145, 72, 0.35);
}

.find-mistakes-segment.is-find-incorrect {
    background-color: rgba(191, 78, 72, 0.15);
    box-shadow: inset 0 0 0 1px rgba(191, 78, 72, 0.34);
}

.find-mistakes-segment.is-find-missed {
    background-color: rgba(211, 139, 24, 0.16);
    box-shadow: inset 0 0 0 1px rgba(211, 139, 24, 0.38);
}

.attempt-history-find-mistakes .find-mistakes-segment {
    cursor: default;
    pointer-events: none;
}

@media (max-width: 720px) {
    .find-mistakes-review.has-explanations,
    .find-mistakes-review.is-revealed {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 10px;
        column-gap: 0;
    }

    .find-mistakes-explanations {
        grid-column: 1 !important;
        grid-row: 1;
        display: grid;
        gap: 7px;
    }

    .find-mistakes-review.has-explanations > .find-mistakes-block {
        grid-column: 1;
        grid-row: 2;
    }

    .find-mistakes-explanation {
        position: static !important;
    }

    .find-mistakes-connectors {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .find-mistakes-review.has-explanations,
    .find-mistakes-explanation,
    .find-mistakes-connectors {
        transition: none;
    }
}

@media (max-width: 640px) {
    .practice-numeric-multiple-item {
        gap: 8px;
    }

    .practice-input-row-multiple {
        margin-left: 0;
    }
}

.practice-actions {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.practice-actions [hidden] {
    display: none !important;
}

.practice-actions.no-hint {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.practice-actions.is-theory-complete {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.practice-actions.is-theory-complete.no-hint {
    grid-template-columns: auto minmax(0, 1fr);
}

.theory-lesson-complete-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.theory-lesson-complete-actions[hidden] {
    display: none !important;
}

.theory-lesson-complete-action {
    position: relative;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    padding: 0 14px;
}

.theory-lesson-complete-action-next {
    border: 3px solid var(--color-link);
    background: #ffffff;
    color: var(--color-heading);
    font-weight: 700;
}

.theory-lesson-complete-action-next:hover,
.theory-lesson-complete-action-next:focus-visible,
.theory-lesson-complete-action-next:visited {
    border-color: var(--color-link-hover);
    background: #f8fbff;
    color: var(--color-heading);
}

.practice-hint-button,
.practice-side-link,
.practice-check,
.practice-report-button,
.theory-lesson-complete-action {
    min-height: 38px;
    font-size: 0.86rem;
}

.practice-hint-button,
.practice-side-link,
.practice-report-button {
    padding: 0 14px;
}

.practice-hint-button,
.practice-side-link {
    position: relative;
}

.practice-hint-button::after,
.practice-side-link::after,
.practice-report-button::after,
.theory-lesson-complete-action::after,
.material-chip-link::after,
.material-status-badge::after,
.practice-question-button::after,
.exercise-link-copy::after,
.practice-hint-tooltip {
    border: 1px solid rgba(214, 223, 235, 0.18);
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    z-index: 90;
}

.practice-hint-button::after,
.practice-side-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: 192px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.practice-hint-button:hover::after,
.practice-hint-button:focus-visible::after,
.practice-side-link:hover::after,
.practice-side-link:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.theory-lesson-complete-action::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(340px, calc(100vw - 32px));
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 40;
}

.theory-lesson-complete-action[data-tooltip=""]::after {
    display: none;
}

.theory-lesson-complete-action:hover::after,
.theory-lesson-complete-action:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.practice-side-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--color-link);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.practice-side-link.is-force-hidden {
    display: none !important;
}

.practice-side-link:hover,
.practice-side-link:focus-visible {
    background: var(--color-link-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.practice-check {
    width: 100%;
    position: relative;
}

.practice-check:disabled {
    cursor: not-allowed;
    background: #dce4f0;
    border-color: #bfcbdd;
    color: #5c6b83;
    box-shadow: none;
}

.practice-check:disabled[data-disabled-tooltip]::after {
    content: attr(data-disabled-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(320px, 85vw);
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
}

.practice-check:disabled[data-disabled-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.practice-check:disabled[data-disabled-tooltip].is-tooltip-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.practice-check.is-next-mode,
.practice-check[data-mode="next"] {
    border: 3px solid var(--color-link);
    background: #ffffff;
    color: var(--color-heading);
}

.practice-check.is-next-mode:hover,
.practice-check.is-next-mode:focus-visible,
.practice-check[data-mode="next"]:hover,
.practice-check[data-mode="next"]:focus-visible {
    border-color: var(--color-link-hover);
    background: #f8fbff;
    color: var(--color-heading);
}

.practice-report-button {
    position: relative;
}

.practice-report-button.is-force-compact {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-self: end;
}

.practice-report-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28.5px;
    height: 100%;
}

.practice-report-arrow svg {
    width: 100%;
    height: 15px;
    overflow: visible;
}

.practice-report-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.practice-report-button::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    white-space: normal;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 40;
}

.practice-report-button[data-tooltip=""]::after {
    display: none;
}

.practice-report-button:hover::after,
.practice-report-button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.practice-hint-button:disabled {
    cursor: default;
    opacity: 0.7;
}

.practice-hints {
    display: grid;
    gap: 8px;
}

.practice-feedback {
    margin: 0;
    transition: color 0.24s ease, opacity 0.24s ease, transform 0.24s ease, font-weight 0.24s ease;
    position: relative;
    z-index: 8;
    isolation: isolate;
    pointer-events: auto;
}

.practice-feedback-action {
    display: inline;
    min-height: 0;
    margin-left: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-link);
    appearance: none;
    box-shadow: none;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
    line-height: inherit;
    cursor: pointer;
    position: relative;
    z-index: 12;
    pointer-events: auto !important;
}

.practice-feedback-action:hover,
.practice-feedback-action:focus-visible {
    background: transparent;
    color: var(--color-link-hover);
    text-decoration-thickness: 1px;
    transform: none;
}

.practice-feedback-action:focus-visible {
    outline: none;
}

.practice-feedback.is-emphasized {
    color: var(--color-heading);
    opacity: 1;
    font-weight: 700;
    letter-spacing: 0.01em;
    animation: practice-feedback-appear 0.42s ease both;
}

.practice-feedback-explanation {
    white-space: pre-line;
}

.practice-feedback-explanation.is-emphasized {
    display: inline-block;
    color: var(--color-heading);
    font-weight: 700;
    letter-spacing: 0.01em;
    animation: practice-feedback-appear 0.42s ease both;
}

.practice-feedback:empty {
    display: none;
}

.practice-skill-updates {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.practice-skill-update-tag {
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.57rem;
    line-height: 1;
    transform-origin: 50% 50%;
    animation: practiceSkillUpdateFall 4s ease-in forwards;
    animation-delay: var(--skill-fall-delay, 0ms);
}

.practice-skill-update-tag strong {
    font-weight: 800;
}

.practice-skill-update-tag.is-positive {
    border-color: rgba(61, 145, 72, 0.44);
    background: rgba(232, 246, 235, 0.96);
    color: #276735;
}

.practice-skill-update-tag.is-neutral {
    border-color: rgba(95, 111, 134, 0.3);
    background: rgba(239, 243, 247, 0.96);
    color: var(--color-text-muted);
}

@keyframes practiceSkillUpdateFall {
    0%,
    50% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--skill-fall-x, 0), 34px) rotate(var(--skill-fall-rotate, 0deg));
    }
}

@keyframes practice-feedback-appear {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .theory-lesson-complete-action {
        padding: 0 10px;
        font-size: 0.8rem;
    }
}

@media (max-width: 520px) {
    .theory-lesson-complete-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

.practice-hint-item {
    padding: 10px 12px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.practice-hint-item mjx-container[jax="CHTML"]:not([display="true"]) {
    display: inline-block !important;
    vertical-align: baseline;
}

.practice-report {
    display: grid;
    position: relative;
}

.practice-report[hidden] {
    display: none;
}

.practice-report textarea {
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 16px;
    resize: vertical;
}

.practice-options {
    display: grid;
    gap: 10px;
    --practice-option-gap: 10px;
}

.practice-options.is-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--practice-option-gap);
}

.practice-options.is-inline .choice-card {
    flex: 0 0 var(--choice-basis, auto);
    max-width: 100%;
}

.practice-options.is-stacked {
    display: grid;
    grid-template-columns: 1fr;
}

.practice-options:has(.exercise-image-option) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 176px));
    justify-content: center;
}

.choice-card {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 14px 42px 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #ffffff;
    color: var(--color-heading);
    text-align: left;
    font-weight: 600;
    white-space: normal;
}

.choice-card-content {
    display: inline;
    width: auto;
    line-height: 1.55;
}

.choice-card-content mjx-container[jax="CHTML"]:not([display="true"]) {
    display: inline-block;
    vertical-align: baseline;
}

.choice-hotkey-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    color: rgba(23, 32, 51, 0.3);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.choice-card:hover,
.choice-card:focus-visible {
    background: #ffffff;
    border-color: var(--color-link);
    color: var(--color-heading);
    outline: none;
    box-shadow: none;
}

.choice-card.is-selected {
    background: var(--color-highlight);
    border-color: var(--color-link);
    color: var(--color-link-hover);
}

.choice-card.is-choice-limit-inactive {
    border-color: rgba(95, 111, 134, 0.2);
    background: rgba(244, 246, 249, 0.72);
    color: rgba(23, 32, 51, 0.42);
    opacity: 0.68;
}

.choice-card.is-choice-limit-inactive:hover,
.choice-card.is-choice-limit-inactive:focus-visible {
    border-color: rgba(63, 102, 151, 0.45);
    background: rgba(240, 244, 249, 0.9);
    color: rgba(23, 32, 51, 0.58);
}

.choice-card.is-unused-muted,
.matching-card.is-unused-muted,
.ordering-card.is-unused-muted,
.connection-card.is-unused-muted,
.gaps-option-card.is-unused-muted {
    color: rgba(23, 32, 51, 0.48);
}

.choice-card.is-unused-muted,
.matching-card.is-unused-muted,
.ordering-card.is-unused-muted,
.gaps-option-card.is-unused-muted {
    border-color: rgba(95, 111, 134, 0.22);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 1px 3px rgba(15, 23, 40, 0.08);
}

.choice-card.is-choice-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18);
}

.practice-format-slot.is-numeric-slot-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18);
}

.practice-input.is-numeric-slot-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18);
}

.choice-card.is-choice-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18);
}

.practice-format-slot.is-numeric-slot-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18);
}

.practice-input.is-numeric-slot-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18);
}

.practice-format-slot.is-numeric-slot-typo,
.practice-input.is-numeric-slot-typo {
    border-color: rgba(211, 139, 24, 0.9);
    box-shadow: 0 0 0 4px rgba(211, 139, 24, 0.18);
}

.practice-options-gaps {
    gap: 8px;
}

.gaps-option-card {
    min-height: 0;
    padding: 10px 34px 10px 12px;
    border-radius: 14px;
    font-size: 0.94rem;
}

.gaps-option-card[hidden],
.gaps-option-card.is-used {
    display: none;
}

.material-body .gaps-slot {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    vertical-align: baseline;
    width: var(--gap-matching-slot-width, 5.2em);
    min-width: var(--gap-matching-slot-width, 5.2em);
    max-width: var(--gap-matching-slot-width, 5.2em);
    flex: 0 0 var(--gap-matching-slot-width, 5.2em);
    min-height: 1.78em;
    margin: 0 0.18em;
    padding: 0.06em 0.52em 0.03em;
    border: 1px solid rgba(158, 170, 189, 0.9);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08);
    color: var(--color-heading);
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    position: relative;
    top: -0.02em;
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.material-body .gaps-slot:hover,
.material-body .gaps-slot:focus-visible {
    outline: none;
    border-color: rgba(31, 111, 235, 0.7);
}

.material-body .gaps-slot.is-active {
    border-color: rgba(31, 111, 235, 0.92);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 2px rgba(31, 111, 235, 0.16);
}

.material-body .gaps-slot.is-filled {
    background: #ffffff;
}

.material-body .gaps-slot-placeholder {
    display: inline-block;
    width: 3.7em;
    height: 1.1em;
    opacity: 0;
}

.material-body .gaps-slot-placeholder[hidden] {
    display: none;
}

.material-body .gaps-slot-value {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    line-height: inherit;
    white-space: nowrap;
    text-align: center;
    vertical-align: baseline;
}

.material-body .gaps-slot-value mjx-container[jax="CHTML"]:not([display="true"]) {
    display: inline-block;
    vertical-align: baseline;
}

.material-body .gaps-slot.is-drop-target {
    border-color: rgba(31, 111, 235, 0.88);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 2px rgba(31, 111, 235, 0.18);
    transform: translateY(-1px);
}

.material-body .gaps-slot.is-swap-preview {
    border-color: rgba(211, 139, 24, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 2px rgba(211, 139, 24, 0.16);
}

.material-body .gaps-slot.is-dragging,
.gaps-option-card.is-dragging {
    opacity: 0.75;
}

.material-body .gaps-slot.is-dragging {
    border-color: rgba(158, 170, 189, 0.9);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08);
}

.material-body .gaps-slot.is-gap-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(61, 145, 72, 0.18);
}

.material-body .gaps-slot.is-gap-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(191, 78, 72, 0.18);
}

.material-body .inline-gaps-slot {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    min-width: var(--inline-gap-width, 6ch);
    margin: 0 0.18em;
    border: 1px solid rgba(158, 170, 189, 0.9);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.material-body .inline-gaps-slot-choice {
    position: relative;
}

.material-body .inline-gaps-slot-choice::after {
    content: "";
    position: absolute;
    right: 0.72em;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 0.28em solid transparent;
    border-right: 0.28em solid transparent;
    border-top: 0.38em solid rgba(88, 112, 143, 0.95);
    transform: translateY(-35%);
    pointer-events: none;
}

.material-body .inline-gaps-slot.is-active {
    border-color: rgba(31, 111, 235, 0.92);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 2px rgba(31, 111, 235, 0.16);
}

.material-body .inline-gaps-slot.is-gap-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(61, 145, 72, 0.18);
}

.material-body .inline-gaps-slot.is-gap-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(191, 78, 72, 0.18);
}

.material-body .inline-gaps-slot.is-gap-almost {
    border-color: rgba(211, 139, 24, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(211, 139, 24, 0.18);
}

.material-body .gaps-slot.is-drop-content-preview .gaps-slot-value {
    opacity: 0.56;
}

.material-body .inline-gaps-slot.is-gap-typo {
    border-color: rgba(211, 139, 24, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(211, 139, 24, 0.18);
}

.material-body .inline-gaps-control {
    width: 100%;
    min-width: var(--inline-gap-width, 6ch);
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--color-heading);
    font: inherit;
    line-height: inherit;
    padding: 0.08em 0.52em 0.1em;
    outline: none;
}

.material-body .inline-gaps-input {
    text-align: center;
}

.letter-slots-input {
    position: relative;
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    max-width: 100%;
    padding: 3px 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 8px;
    vertical-align: middle;
    scrollbar-width: thin;
}

.letter-slots-display {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    min-width: max-content;
    white-space: nowrap;
}

.letter-slot-cell {
    display: inline-grid;
    place-items: center;
    width: 1.2em;
    height: 1.5em;
    flex: 0 0 1.2em;
    border: 1px solid rgba(139, 154, 176, 0.9);
    border-radius: 5px;
    background: #ffffff;
    color: var(--color-heading);
    font: 600 1rem/1 var(--font-sans);
    box-shadow: inset 0 1px 2px rgba(15, 23, 40, 0.06);
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.letter-slot-literal {
    display: inline-block;
    min-width: 0.32ch;
    color: var(--color-heading);
    font: 500 1rem/1 var(--font-sans);
    text-align: center;
    white-space: pre;
}

.practice-feedback-panel-close {
    position: absolute;
    top: -2px;
    right: 0;
    z-index: 2;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.practice-feedback-panel-close:hover,
.practice-feedback-panel-close:focus-visible {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-heading);
}

.practice-feedback-panel-close:focus-visible {
    outline: 2px solid rgba(31, 111, 235, 0.28);
    outline-offset: 2px;
}

.letter-slot-literal.is-space {
    width: 0.5em;
    min-width: 0.5em;
}

.letter-slots-native-input,
.material-body .inline-gaps-control.letter-slots-native-input,
.choose-correct-slot .inline-gaps-control.letter-slots-native-input,
.tabular-input-slot .inline-gaps-control.letter-slots-native-input {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    clip-path: inset(50%) !important;
    box-shadow: none !important;
}

.letter-slots-input:focus-within .letter-slot-cell.is-caret {
    border-color: rgba(31, 111, 235, 0.96);
    box-shadow: inset 0 0 0 2px rgba(31, 111, 235, 0.22);
}

.letter-slot-cell.is-letter-correct,
.letter-slots-input.is-letter-slots-correct .letter-slot-cell {
    border-color: rgba(61, 145, 72, 0.92);
    background: rgba(236, 250, 238, 0.98);
    box-shadow: 0 0 0 2px rgba(61, 145, 72, 0.12);
}

.letter-slot-cell.is-letter-incorrect,
.letter-slots-input.is-letter-slots-incorrect .letter-slot-cell {
    border-color: rgba(191, 78, 72, 0.92);
    background: rgba(255, 239, 238, 0.98);
    box-shadow: 0 0 0 2px rgba(191, 78, 72, 0.12);
}

.letter-slot-cell.is-letter-typo,
.letter-slots-input.is-letter-slots-typo .letter-slot-cell {
    border-color: rgba(211, 139, 24, 0.92);
    background: rgba(255, 248, 230, 0.98);
    box-shadow: 0 0 0 2px rgba(211, 139, 24, 0.12);
}

.practice-input-row.has-letter-slots {
    min-width: 0;
    max-width: 100%;
}

.practice-inline-segments.has-letter-slots {
    display: block;
    gap: 0;
}

.practice-inline-segments.has-letter-slots > .practice-inline-text,
.practice-inline-segments.has-letter-slots > .letter-slots-source-space {
    display: inline;
}

.practice-inline-segments.has-letter-slots > .practice-input-row-inline.has-letter-slots {
    margin-right: 0;
    margin-left: 0;
}

.material-body .inline-gaps-slot.has-letter-slots,
.choose-correct-slot.has-letter-slots,
.tabular-input-slot.inline-gaps-slot.has-letter-slots {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.material-body .inline-gaps-slot.has-letter-slots.is-active,
.material-body .inline-gaps-slot.has-letter-slots.is-gap-correct,
.material-body .inline-gaps-slot.has-letter-slots.is-gap-incorrect,
.material-body .inline-gaps-slot.has-letter-slots.is-gap-almost,
.material-body .inline-gaps-slot.has-letter-slots.is-gap-typo,
.choose-correct-slot.has-letter-slots.is-gap-correct,
.choose-correct-slot.has-letter-slots.is-gap-incorrect,
.choose-correct-slot.has-letter-slots.is-gap-almost,
.choose-correct-slot.has-letter-slots.is-gap-typo {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.material-body .inline-gaps-select {
    cursor: pointer;
    appearance: none;
    padding-right: 1.6em;
}

.matching-layout {
    display: grid;
    gap: 12px;
}

.matching-slot {
    display: grid;
    grid-template-rows: var(--matching-slot-head-height, auto) auto;
    gap: 0;
    align-self: start;
}

.matching-slot-head {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding-left: 8px;
    min-height: 0;
}

.matching-slot-title {
    position: relative;
    margin: 0 0 0 10px;
    padding: 5px 18px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(23, 32, 51, 0.86);
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
    isolation: isolate;
    overflow-wrap: anywhere;
}

.matching-slot-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(95, 111, 134, 0.42);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, calc(100% - 10px) 4px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 10px 4px);
    z-index: -2;
}

.matching-slot-title::after {
    content: "";
    position: absolute;
    inset: 1px 1px -1px 1px;
    background: #f7fafe;
    clip-path: polygon(13px 1px, calc(100% - 13px) 1px, calc(100% - 9px) 4px, 100% 100%, 0 100%, 9px 4px);
    z-index: -1;
}

.matching-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    align-items: start;
}

.matching-slot-label {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-right: 34px;
    color: rgba(23, 32, 51, 0.78);
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.matching-slot-index {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    color: rgba(23, 32, 51, 0.3);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.matching-slot-dropzone {
    position: relative;
    min-height: 48px;
    padding: 12px 10px 12px 14px;
    border: 1px solid rgba(95, 111, 134, 0.42);
    border-radius: 15px;
    background: #f7fafe;
    display: flex;
    align-items: center;
    box-shadow: inset 0 1px 1px rgba(15, 23, 40, 0.14), inset 0 4px 8px rgba(15, 23, 40, 0.11);
}

.matching-slot-dropzone.is-filled {
    border-color: rgba(31, 111, 235, 0.44);
    background: #f5f9ff;
}

.matching-slot-dropzone.is-filled .matching-slot-label {
    display: none;
}

.matching-slot-dropzone.is-drag-preview {
    border-color: rgba(31, 111, 235, 0.52);
    background: #f1f7ff;
    transform: none;
}

.matching-slot-dropzone.is-drag-swap-preview {
    border-color: rgba(211, 139, 24, 0.58);
    background: #fff8e9;
}

.matching-slot-dropzone.is-drag-preview .matching-slot-label {
    display: none;
}

.matching-slot-dropzone.is-filled,
.matching-slot-dropzone.is-drag-preview {
    padding: 4px;
}

.matching-layout.is-multiple .matching-slot-dropzone {
    min-height: var(--multi-stack-height, 72px);
}

.matching-slot-dropzone-multi {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
    padding: 4px;
}

.matching-slot-dropzone-multi .matching-card + .matching-card {
    margin-top: 0;
}

.matching-slot-dropzone-multi .matching-card {
    position: relative;
    top: var(--stack-shift, 0px);
    transition: top 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.matching-pool-wrap {
    display: grid;
    gap: 8px;
}

.matching-pool-title {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.matching-pool {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-content: start;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(95, 111, 134, 0.34);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 2px rgba(15, 23, 40, 0.06);
}

.matching-pool.is-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.matching-pool.is-inline .matching-card {
    flex: 0 0 var(--matching-basis, auto);
    max-width: 100%;
}

.matching-pool.is-inline:has(.exercise-image-option-visual[data-image-option-raster="true"]) {
    flex-wrap: nowrap;
}

.matching-pool.is-stacked {
    display: grid;
    grid-template-columns: 1fr;
}

.matching-card {
    display: block;
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    padding: 10px 12px;
    border: 1px solid rgba(95, 111, 134, 0.34);
    border-radius: 11px;
    background: #ffffff;
    color: var(--color-heading);
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: grab;
    white-space: normal;
    user-select: none;
    box-shadow: 0 3px 7px rgba(15, 23, 40, 0.2);
}

.matching-card mjx-container[jax="CHTML"]:not([display="true"]) {
    display: inline-block;
    vertical-align: baseline;
}

.matching-card:hover,
.matching-card:focus-visible {
    background: #ffffff;
    border-color: var(--color-link);
    color: var(--color-heading);
    box-shadow: 0 5px 11px rgba(15, 23, 40, 0.26);
}

.matching-card.is-active {
    border-color: var(--color-link);
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.18), 0 5px 11px rgba(15, 23, 40, 0.26);
}

.matching-card.is-keyboard-candidate {
    border-color: var(--color-link);
    box-shadow: 0 5px 11px rgba(15, 23, 40, 0.26);
}

.matching-card.is-dragging {
    opacity: 0.75;
    cursor: grabbing;
    background: #ffffff;
    border-color: rgba(95, 111, 134, 0.34);
    box-shadow: 0 3px 7px rgba(15, 23, 40, 0.2);
}

.matching-card.is-preview {
    opacity: 0.56;
    border-color: rgba(31, 111, 235, 0.52);
    box-shadow: 0 6px 14px rgba(15, 23, 40, 0.18);
    transform: none;
}

.matching-card.is-preview-swap {
    display: none !important;
}

.matching-card.is-match-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18), 0 3px 7px rgba(15, 23, 40, 0.2);
}

.matching-card.is-match-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18), 0 3px 7px rgba(15, 23, 40, 0.2);
}

@keyframes practiceHighlightGlowGreen {
    0% {
        box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18), 0 0 0 0 rgba(61, 145, 72, 0.48);
    }
    45% {
        box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.24), 0 0 0 8px rgba(61, 145, 72, 0.24);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18), 0 0 0 0 rgba(61, 145, 72, 0);
    }
}

@keyframes practiceHighlightGlowRed {
    0% {
        box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18), 0 0 0 0 rgba(191, 78, 72, 0.48);
    }
    45% {
        box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.24), 0 0 0 8px rgba(191, 78, 72, 0.24);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18), 0 0 0 0 rgba(191, 78, 72, 0);
    }
}

@keyframes practiceHighlightGlowAmber {
    0% {
        box-shadow: 0 0 0 4px rgba(211, 139, 24, 0.18), 0 0 0 0 rgba(211, 139, 24, 0.48);
    }
    45% {
        box-shadow: 0 0 0 4px rgba(211, 139, 24, 0.24), 0 0 0 8px rgba(211, 139, 24, 0.24);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(211, 139, 24, 0.18), 0 0 0 0 rgba(211, 139, 24, 0);
    }
}

@keyframes practiceHighlightGlowGreenInset {
    0% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(61, 145, 72, 0.18), 0 0 0 0 rgba(61, 145, 72, 0.48);
    }
    45% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(61, 145, 72, 0.24), 0 0 0 8px rgba(61, 145, 72, 0.24);
    }
    100% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(61, 145, 72, 0.18), 0 0 0 0 rgba(61, 145, 72, 0);
    }
}

@keyframes practiceHighlightGlowRedInset {
    0% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(191, 78, 72, 0.18), 0 0 0 0 rgba(191, 78, 72, 0.48);
    }
    45% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(191, 78, 72, 0.24), 0 0 0 8px rgba(191, 78, 72, 0.24);
    }
    100% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(191, 78, 72, 0.18), 0 0 0 0 rgba(191, 78, 72, 0);
    }
}

@keyframes practiceHighlightGlowAmberInset {
    0% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(211, 139, 24, 0.18), 0 0 0 0 rgba(211, 139, 24, 0.48);
    }
    45% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(211, 139, 24, 0.24), 0 0 0 8px rgba(211, 139, 24, 0.24);
    }
    100% {
        box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 4px rgba(211, 139, 24, 0.18), 0 0 0 0 rgba(211, 139, 24, 0);
    }
}

.choice-card.is-choice-correct.is-highlight-flash,
.matching-card.is-match-correct.is-highlight-flash,
.ordering-card.is-ordering-correct.is-highlight-flash,
.practice-format-slot.is-numeric-slot-correct.is-highlight-flash,
.practice-multiple-input.is-numeric-slot-correct.is-highlight-flash,
.practice-input.is-numeric-slot-correct.is-highlight-flash {
    animation: practiceHighlightGlowGreen 0.52s ease-out;
}

.choice-card.is-choice-incorrect.is-highlight-flash,
.matching-card.is-match-incorrect.is-highlight-flash,
.ordering-card.is-ordering-incorrect.is-highlight-flash,
.practice-format-slot.is-numeric-slot-incorrect.is-highlight-flash,
.practice-multiple-input.is-numeric-slot-incorrect.is-highlight-flash,
.practice-input.is-numeric-slot-incorrect.is-highlight-flash {
    animation: practiceHighlightGlowRed 0.52s ease-out;
}

.practice-format-slot.is-numeric-slot-typo.is-highlight-flash,
.practice-multiple-input.is-numeric-slot-typo.is-highlight-flash,
.practice-input.is-numeric-slot-typo.is-highlight-flash {
    animation: practiceHighlightGlowAmber 0.52s ease-out;
}

.material-body .gaps-slot.is-gap-correct.is-highlight-flash {
    animation: practiceHighlightGlowGreenInset 0.52s ease-out;
}

.material-body .inline-gaps-slot.is-gap-typo.is-highlight-flash,
.material-body .inline-gaps-slot.is-gap-almost.is-highlight-flash {
    animation: practiceHighlightGlowAmberInset 0.52s ease-out;
}

.material-body .gaps-slot.is-gap-incorrect.is-highlight-flash {
    animation: practiceHighlightGlowRedInset 0.52s ease-out;
}

@keyframes practiceOrderingMarkerGlowRed {
    0% {
        opacity: 0.28;
        transform: scale(0.9);
    }
    45% {
        opacity: 0.68;
        transform: scale(1.14);
    }
    100% {
        opacity: 0.36;
        transform: scale(1);
    }
}

.matching-slot-dropzone .matching-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.matching-layout.is-multiple .matching-slot-dropzone-multi .matching-card.is-preview {
    opacity: 0.56;
}

.is-matching-disabled .matching-card {
    cursor: default;
}

.is-matching-disabled .matching-slot-dropzone,
.is-matching-disabled .matching-pool {
    border-color: rgba(95, 111, 134, 0.3);
    box-shadow: inset 0 1px 1px rgba(15, 23, 40, 0.08);
}

.ordering-board {
    display: grid;
    gap: 0;
    align-items: start;
    min-width: 0;
}

.ordering-anchor-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: -1px;
    z-index: 1;
}

.ordering-anchor {
    position: relative;
    justify-self: start;
    margin-left: 14px;
    padding: 5px 18px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(23, 32, 51, 0.86);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
    pointer-events: none;
    isolation: isolate;
}

.ordering-anchor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(95, 111, 134, 0.42);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, calc(100% - 10px) 4px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 10px 4px);
    z-index: -2;
}

.ordering-anchor::after {
    content: "";
    position: absolute;
    inset: 1px 1px -1px 1px;
    background: #f9fbff;
    clip-path: polygon(13px 1px, calc(100% - 13px) 1px, calc(100% - 9px) 4px, 100% 100%, 0 100%, 9px 4px);
    z-index: -1;
}

.ordering-anchor-top {
    margin-bottom: -1px;
}

.ordering-reverse-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-highlight);
    color: var(--color-link-hover);
    box-shadow: none;
    cursor: pointer !important;
    vertical-align: middle;
    transform: none;
}

.ordering-reverse-button,
.ordering-reverse-button * {
    cursor: pointer !important;
}

.ordering-reverse-symbol {
    display: inline-block;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 900;
    color: inherit;
    transform: none;
    text-shadow: 0 0 0 currentColor;
}

.ordering-anchor-bottom {
    margin-top: -1px;
    border-radius: 0;
    background: transparent;
}

.ordering-anchor-bottom::before {
    background: rgba(95, 111, 134, 0.42);
    clip-path: polygon(1px 1px, calc(100% - 1px) 1px, calc(100% - 10px) calc(100% - 4px), calc(100% - 14px) calc(100% - 1px), 14px calc(100% - 1px), 10px calc(100% - 4px));
    z-index: -2;
}

.ordering-anchor-bottom::after {
    inset: -1px 1px 1px 1px;
    background: #f9fbff;
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) calc(100% - 4px), calc(100% - 13px) 100%, 13px 100%, 9px calc(100% - 4px));
    z-index: -1;
}

.ordering-list {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 8px;
    border: 1px solid rgba(95, 111, 134, 0.34);
    border-radius: 12px;
    background: #f9fbff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 40, 0.08);
}

.ordering-list.is-drag-active {
    gap: 18px;
    padding: 18px;
    border-color: rgba(31, 111, 235, 0.52);
    background: #f1f7ff;
}

.ordering-list.is-drag-active .ordering-card {
    min-height: 29px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.ordering-card {
    position: relative;
    display: block;
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    padding: 10px 34px 10px 12px;
    border: 1px solid rgba(95, 111, 134, 0.34);
    border-radius: 11px;
    background: #ffffff;
    color: var(--color-heading);
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: grab;
    white-space: normal;
    user-select: none;
    box-shadow: 0 3px 7px rgba(15, 23, 40, 0.2);
    transition: transform 0.18s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.ordering-card mjx-container[jax="CHTML"]:not([display="true"]) {
    display: inline-block;
    vertical-align: baseline;
}

.ordering-hotkey-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    color: rgba(23, 32, 51, 0.3);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.ordering-card:hover,
.ordering-card:focus-visible {
    background: #ffffff;
    border-color: var(--color-link);
    color: var(--color-heading);
    box-shadow: 0 5px 11px rgba(15, 23, 40, 0.26);
}

.ordering-card.is-keyboard-selected {
    background: #ffffff;
    border-color: var(--color-link);
    color: var(--color-heading);
    box-shadow: 0 5px 11px rgba(15, 23, 40, 0.26);
}

.ordering-card.is-dragging {
    opacity: 0.9;
    cursor: grabbing;
}

.ordering-card.is-ordering-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(61, 145, 72, 0.18), 0 3px 7px rgba(15, 23, 40, 0.2);
}

.ordering-card.is-ordering-incorrect {
    border-color: rgba(191, 78, 72, 0.9);
    box-shadow: 0 0 0 4px rgba(191, 78, 72, 0.18), 0 3px 7px rgba(15, 23, 40, 0.2);
}

.ordering-pair-marker {
    position: absolute;
    left: 50%;
    top: 0;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.ordering-list.is-drag-active .ordering-row::before,
.ordering-list.is-drag-active::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: rgba(31, 111, 235, 0.28);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4;
}

.ordering-list.is-drag-active .ordering-row::before {
    top: -9px;
}

.ordering-list.is-drag-active::after {
    bottom: 9px;
    transform: translate(-50%, 50%);
}

.ordering-list.is-drag-active .ordering-row.is-separate-drop-target::before,
.ordering-list.is-drag-active.is-end-drop-target::after {
    width: 52px;
    height: 6px;
    background: var(--color-link);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.12);
}

[data-equal-cards="true"] .ordering-list.is-drag-active .ordering-row::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px dashed rgba(31, 111, 235, 0.48);
    border-radius: 50%;
    background: rgba(241, 247, 255, 0.9);
    color: rgba(31, 111, 235, 0.7);
    font-size: 0.8rem;
    font-family: Arial, sans-serif;
    line-height: 1;
    padding-bottom: 1px;
    box-sizing: border-box;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 4;
}

.ordering-list.is-drag-active .ordering-row.is-drag-source-single::before,
[data-equal-cards="true"] .ordering-list.is-drag-active .ordering-row.is-drag-source::after {
    content: none;
}

.ordering-list.is-drag-active:has(> .ordering-row.is-drag-source-single:last-child)::after {
    content: none;
}

[data-equal-cards="true"] .ordering-list.is-drag-active .ordering-row.is-equal-drop-target::after {
    border-style: solid;
    background: var(--color-link);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.12);
}

.ordering-pair-marker.is-inline {
    left: -4px;
    top: 50%;
}

.ordering-pair-marker-aura {
    fill: none;
    stroke: rgba(191, 78, 72, 0.18);
    stroke-width: 6;
    transform-box: fill-box;
    transform-origin: center;
}

.ordering-pair-marker-circle {
    fill: rgba(255, 255, 255, 0.98);
    stroke: rgba(170, 48, 43, 0.96);
    stroke-width: 1.5;
}

.ordering-pair-marker-line {
    fill: none;
    stroke: rgba(170, 48, 43, 0.98);
    stroke-width: 1.2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.ordering-pair-marker-symbol {
    fill: rgba(170, 48, 43, 0.98);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 750;
}

.ordering-pair-marker.is-not-equal .ordering-pair-marker-symbol {
    font-size: 17px;
}

.ordering-pair-marker.is-highlight-flash .ordering-pair-marker-aura {
    animation: practiceOrderingMarkerGlowRed 0.52s ease-out;
}

.is-matching-disabled .ordering-card {
    cursor: default;
}

.is-matching-disabled .ordering-list {
    border-color: rgba(95, 111, 134, 0.3);
    box-shadow: inset 0 1px 1px rgba(15, 23, 40, 0.08);
}

.connection-layout {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: visible;
}

.connection-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

.connection-link {
    fill: none;
    stroke: rgba(var(--connection-accent-rgb, 31, 111, 235), 0.82);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(var(--connection-accent-rgb, 31, 111, 235), 0.26));
}

.connection-link.is-finished {
    stroke: rgba(var(--connection-accent-rgb, 31, 111, 235), 0.5);
    stroke-width: 4.5;
    filter: none;
}

.connection-decks {
    position: relative;
    z-index: 0;
    display: grid;
    gap: 14px;
}

.connection-deck {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    z-index: 0;
}

.connection-deck::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(95, 111, 134, 0.34);
    border-radius: 16px;
    background: #f7fafe;
    box-shadow: inset 0 1px 1px rgba(15, 23, 40, 0.12), inset 0 4px 8px rgba(15, 23, 40, 0.08);
    z-index: 0;
}

.connection-deck-head {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2px;
}

.connection-deck-title {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(23, 32, 51, 0.86);
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
}

.connection-card-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
    position: relative;
    z-index: 3;
    isolation: isolate;
}

.connection-card {
    display: block;
    flex: 0 0 calc((100% - (var(--connection-card-count, 1) - 1) * 10px) / var(--connection-card-count, 1));
    max-width: calc((100% - (var(--connection-card-count, 1) - 1) * 10px) / var(--connection-card-count, 1));
    position: relative;
    z-index: 4;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--color-heading);
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    white-space: normal;
    user-select: none;
    overflow: hidden;
    contain: inline-size;
    box-shadow: none;
    transition: transform 0.16s ease;
}

.connection-card,
.connection-card:focus,
.connection-card:focus-visible {
    outline: none;
}

.is-drag-follower {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 2147483647 !important;
    box-sizing: border-box;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
    margin: 0 !important;
    opacity: 1;
    transform: scale(0.82);
    transform-origin: 0 0;
    pointer-events: none !important;
    cursor: grabbing;
}

.matching-slot-dropzone:not(.matching-slot-dropzone-multi) > .matching-card.is-preview {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: stretch;
    margin: 0 !important;
    transform: none !important;
}

.gap-matching-width-measure {
    position: fixed;
    top: -10000px;
    left: -10000px;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
}

body.is-practice-dragging,
body.is-practice-dragging * {
    cursor: grabbing !important;
}


.connection-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(95, 111, 134, 0.34);
    border-radius: inherit;
    background: #ffffff;
    box-shadow: 0 3px 7px rgba(15, 23, 40, 0.18);
    transition: box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    z-index: -1;
    pointer-events: none;
}

.connection-card mjx-container[jax="CHTML"]:not([display="true"]) {
    display: inline-block;
    vertical-align: baseline;
}

.connection-hotkey-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    color: rgba(23, 32, 51, 0.3);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.connection-card:hover,
.connection-card:focus-visible {
    color: var(--color-heading);
}

.connection-card:hover::before,
.connection-card:focus-visible::before {
    border-color: var(--color-link);
    box-shadow: 0 5px 11px rgba(15, 23, 40, 0.24);
}

.connection-card.is-connection-active {
    color: var(--color-heading);
}

.connection-card.is-connection-active::before {
    border-color: rgba(var(--connection-accent-rgb, 31, 111, 235), 0.96);
    box-shadow: inset 0 0 0 2px rgba(var(--connection-accent-rgb, 31, 111, 235), 0.96), 0 0 10px rgba(var(--connection-accent-rgb, 31, 111, 235), 0.26), 0 6px 12px rgba(15, 23, 40, 0.24);
}

.connection-card.is-connection-finished {
    color: var(--color-heading);
}

.connection-card.is-connection-finished::before {
    border-color: rgba(var(--connection-accent-rgb, 31, 111, 235), 0.62);
    box-shadow: inset 0 0 0 1px rgba(var(--connection-accent-rgb, 31, 111, 235), 0.62), 0 3px 7px rgba(15, 23, 40, 0.16);
}

.connection-card.is-connection-finished:hover,
.connection-card.is-connection-finished:focus-visible {
    color: var(--color-heading);
}

.connection-card.is-connection-finished:hover::before,
.connection-card.is-connection-finished:focus-visible::before {
    border-color: rgba(var(--connection-accent-rgb, 31, 111, 235), 0.82);
    box-shadow: inset 0 0 0 1px rgba(var(--connection-accent-rgb, 31, 111, 235), 0.82), 0 5px 11px rgba(15, 23, 40, 0.22);
}

.connection-card.is-connection-muted,
.connection-card.is-unused-muted {
    color: rgba(23, 32, 51, 0.48);
}

.connection-card.is-connection-muted::before,
.connection-card.is-unused-muted::before {
    border-color: rgba(95, 111, 134, 0.22);
    box-shadow: inset 0 0 0 1px rgba(95, 111, 134, 0.16), 0 1px 3px rgba(15, 23, 40, 0.08);
}

.connection-card.is-connection-muted:hover,
.connection-card.is-connection-muted:focus-visible,
.connection-card.is-unused-muted:hover,
.connection-card.is-unused-muted:focus-visible {
    color: rgba(23, 32, 51, 0.58);
}

.is-matching-disabled .connection-card {
    cursor: default;
}

.practice-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--color-highlight);
    color: var(--color-link-hover);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.practice-hint:hover,
.practice-hint:focus-visible,
.practice-hint:focus-within,
.practice-hint.is-open {
    z-index: 1000;
}

.practice-hint.value-help-toggle {
    cursor: pointer;
    position: relative;
    top: 0;
    z-index: 12;
    pointer-events: auto !important;
}

.practice-hint.value-help-toggle,
.practice-hint.value-help-toggle * {
    cursor: pointer;
}

.practice-hint.value-help-toggle:hover,
.practice-hint.value-help-toggle:focus-visible {
    background: var(--color-link-hover);
    color: var(--color-highlight);
    transform: none;
}

.practice-hint-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 120;
    width: min(280px, calc(100vw - 48px));
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--color-heading);
    color: #ffffff;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.practice-hint:hover .practice-hint-tooltip,
.practice-hint:focus-visible .practice-hint-tooltip,
.practice-hint.is-open .practice-hint-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.value-help-reference {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin: 0;
    pointer-events: auto !important;
    z-index: 121;
}

.value-help-panel {
    position: fixed;
    top: clamp(74px, 8vh, 112px);
    left: 50%;
    z-index: 122;
    width: min(780px, calc(100vw - 32px));
    max-width: min(780px, calc(100vw - 32px));
    max-height: calc(100vh - clamp(74px, 8vh, 112px) - 20px);
    margin-top: 0;
    transform: translateX(-50%);
}

.value-help-card {
    background: rgba(248, 251, 255, 0.98);
    max-height: calc(100vh - clamp(74px, 8vh, 112px) - 20px);
    overflow: auto;
    position: relative;
}

.value-help-body {
    display: grid;
    gap: 14px;
}

.value-help-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    aspect-ratio: 1;
    border: 0;
    border-radius: 999px;
    background: rgba(95, 111, 134, 0.12);
    color: var(--color-heading);
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.value-help-close:hover,
.value-help-close:focus-visible {
    background: var(--color-link-hover);
    color: #fff;
}

.value-help-lead,
.value-help-examples,
.value-help-rules p {
    margin: 0;
}

.value-help-rules {
    display: grid;
    gap: 8px;
}

.value-help-rule {
    display: grid;
    grid-template-columns: minmax(220px, max-content) minmax(0, 1fr);
    gap: 10px 16px;
    align-items: baseline;
}

.value-help-rule-main {
    color: var(--color-heading);
    font-weight: 600;
}

.value-help-rule-example {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: left;
}

.value-help-details {
    border: 1px solid rgba(95, 111, 134, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.value-help-details summary {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--color-heading);
    font-weight: 700;
}

.value-help-details[open] summary {
    border-bottom: 1px solid rgba(95, 111, 134, 0.14);
}

.value-help-table-wrap {
    overflow: auto;
    padding: 8px 10px 10px;
}

.value-help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.value-help-table th,
.value-help-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(95, 111, 134, 0.12);
    text-align: left;
    vertical-align: top;
}

.value-help-table tbody tr:last-child td {
    border-bottom: 0;
}

.value-help-name-ru {
    display: block;
    color: var(--color-heading);
    font-weight: 600;
}

.value-help-name-en {
    display: block;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.practice-description-text {
    display: inline;
}

.logic-mechanics-hint-inline {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 10px;
    transform: translateY(-0.12em);
}

.logic-mechanics-display-row {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
}

.logic-mechanics-display-row > mjx-container[display="true"] {
    margin: 0 !important;
}

.logic-mechanics-hint-inline.is-display-equation {
    margin-left: 0;
    transform: none;
    vertical-align: baseline;
}

.material-body {
    color: var(--color-text);
}

.material-body h2,
.material-body h3 {
    margin-top: 26px;
    margin-bottom: 12px;
    font-family: var(--font-serif);
    color: var(--color-heading);
}

.material-body h2:first-child,
.material-body h3:first-child {
    margin-top: 0;
}

.material-body ul {
    margin: 0 0 18px;
    padding-left: 24px;
}

.material-body li + li {
    margin-top: 6px;
}

.material-body strong {
    color: var(--color-heading);
}

.material-body code {
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(220, 233, 255, 0.6);
    font-family: "Consolas", "SFMono-Regular", monospace;
    font-size: 0.92em;
}

.lesson-body {
    max-width: 72ch;
    font-size: 1.03rem;
    margin: 0 auto;
    transition: max-width 0.3s ease, padding 0.3s ease;
}

.lesson-body h2,
.lesson-body h3 {
    margin-top: 26px;
    margin-bottom: 12px;
    font-family: var(--font-serif);
    color: var(--color-heading);
}

.lesson-body h2:first-child,
.lesson-body h3:first-child {
    margin-top: 0;
}

.lesson-body p {
    margin-bottom: 18px;
}

.lesson-body ul {
    margin: 0 0 18px;
    padding-left: 24px;
}

.lesson-body li + li {
    margin-top: 6px;
}

.lesson-figure {
    margin: 22px 0;
}

.exercise-image-option {
    display: grid;
    place-items: center;
    width: 100%;
    row-gap: 7px;
}

.exercise-image-option-visual {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
    pointer-events: none;
}

.choice-card .exercise-image-option-visual,
.matching-card .exercise-image-option-visual,
.ordering-card .exercise-image-option-visual,
.connection-card .exercise-image-option-visual {
    width: var(--image-option-relative-width, 100%);
}

.choice-card:has(.exercise-image-option-caption) {
    display: flex;
    align-items: stretch;
}

.choice-card .exercise-image-option:has(.exercise-image-option-caption) {
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 100%;
}

.exercise-image-option-caption {
    display: block;
    width: 100%;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}

.choice-card:has(.exercise-image-option) {
    width: 176px;
    max-width: 100%;
    padding: 8px;
    justify-self: center;
}

.matching-card:has(.exercise-image-option),
.ordering-card:has(.exercise-image-option),
.connection-card:has(.exercise-image-option) {
    padding: 6px;
}

.choice-card:has(.exercise-image-option-visual[data-image-option-raster="true"]),
.matching-card:has(.exercise-image-option-visual[data-image-option-raster="true"]),
.ordering-card:has(.exercise-image-option-visual[data-image-option-raster="true"]),
.connection-card:has(.exercise-image-option-visual[data-image-option-raster="true"]) {
    padding: 0;
    overflow: hidden;
}

.choice-card:has(.exercise-image-option-visual[data-image-option-raster="true"]) .exercise-image-option,
.matching-card:has(.exercise-image-option-visual[data-image-option-raster="true"]) .exercise-image-option,
.ordering-card:has(.exercise-image-option-visual[data-image-option-raster="true"]) .exercise-image-option,
.connection-card:has(.exercise-image-option-visual[data-image-option-raster="true"]) .exercise-image-option {
    margin: 0;
    border-radius: inherit;
    overflow: hidden;
    line-height: 0;
}

.choice-card .exercise-image-option-visual[data-image-option-raster="true"],
.matching-card .exercise-image-option-visual[data-image-option-raster="true"],
.ordering-card .exercise-image-option-visual[data-image-option-raster="true"],
.connection-card .exercise-image-option-visual[data-image-option-raster="true"] {
    margin: 0;
    border-radius: inherit;
}

.material-body > .lesson-figure {
    display: grid;
    justify-items: center;
}

.material-body > .lesson-animation {
    margin-right: auto;
    margin-left: auto;
}

.lesson-graphics-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 16px;
    width: 100%;
    margin: 22px auto;
}

.lesson-graphics-row > .lesson-figure {
    display: grid;
    flex: 1 1 260px;
    justify-items: center;
    align-content: start;
    max-width: calc((100% - 16px) / 2);
    min-width: 0;
    margin: 0;
}

.lesson-graphics-row > .lesson-figure .lesson-figure-caption {
    font-size: 0.78rem;
}

.lesson-graphics-row > .lesson-figure:has(.lesson-figure-image) .lesson-figure-image {
    width: auto;
    height: var(--graphics-row-image-height, auto);
    max-width: 100%;
    max-height: var(--graphics-row-image-height, 40vh);
    object-fit: contain;
}

.lesson-graphics-row.has-image-width-disparity > .lesson-figure:has(.lesson-figure-image) .lesson-figure-image {
    width: 100%;
}

.lesson-graphics-row.has-balanced-image-widths {
    justify-content: center;
}

.lesson-graphics-row.has-balanced-image-widths > .lesson-figure:has(.lesson-figure-image) {
    flex: 0 1 var(--graphics-row-figure-width, 260px);
    max-width: 100%;
}

.lesson-graphics-row-group {
    display: grid;
    width: 100%;
}

.lesson-graphics-row-caption {
    margin: 10px 0 0;
    width: 100%;
    text-align: center;
}

.lesson-graphics-row > .lesson-animation,
.lesson-graphics-row > .lesson-figure-svg-container {
    justify-self: center;
}

.lesson-graphics-row > .elastic-deformation-animation {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}

.lesson-figure-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 40vh;
    height: auto;
    margin: 0 auto;
    border: 1px solid rgba(95, 111, 134, 0.2);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 40, 0.08);
}

.lesson-figure-image.is-zoomable {
    cursor: zoom-in;
}

.lesson-figure-svg-container {
    display: grid;
    justify-items: center;
}

.lesson-figure-svg-container.is-display-scaled {
    width: 100%;
}

.lesson-figure-svg-container.is-display-scaled .lesson-figure-svg-shell {
    width: min(calc(var(--lesson-svg-display-width, 0px) + 26px), 100%);
}

.lesson-figure-svg-container.is-display-scaled .lesson-figure-svg {
    width: 100%;
}

.lesson-figure-svg-shell {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 12px;
    border: 1px solid rgba(95, 111, 134, 0.2);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 40, 0.08);
    box-sizing: border-box;
}

.lesson-figure-svg {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    max-height: 40vh;
    height: auto;
    overflow: visible;
    color: var(--color-heading);
    cursor: zoom-in;
}

.lesson-figure-svg .site-svg-text {
    fill: var(--site-svg-text-color, var(--color-text));
    font-family: var(--font-sans);
    font-size: 1em;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0;
}

.lesson-figure-svg .site-svg-anchor-reference {
    opacity: 0;
    pointer-events: none;
}

.lesson-animation {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.image-exercise-stage {
    display: grid;
    justify-items: center;
    width: 100%;
}

.image-exercise-figure {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(100%, var(--image-exercise-max-width, 100%));
    margin-right: auto;
    margin-left: auto;
}

.image-exercise-figure .lesson-figure-svg-shell {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--image-exercise-aspect, 1);
    padding: 0;
    overflow: hidden;
}

.image-exercise-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: fill;
}

.image-exercise-figure .lesson-figure-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: 100%;
    cursor: crosshair;
}

.image-exercise-statement {
    margin-bottom: 12px;
}

.image-exercise-statement > :first-child {
    margin-top: 0;
}

.image-exercise-statement > :last-child {
    margin-bottom: 0;
}

.image-exercise-figure.is-image-exercise-zoomed {
    z-index: 3;
    transform: scale(1.5);
    transform-origin: center;
}

.image-exercise-figure [data-cite-answer-group] {
    opacity: 0 !important;
}

.image-exercise-figure.is-answer-revealed [data-cite-answer-group] {
    opacity: .5 !important;
}

.lesson-image-viewer-svg[data-image-exercise-visual] [data-cite-answer-group] {
    opacity: 0 !important;
}

.lesson-image-viewer-svg[data-image-exercise-visual].is-answer-revealed [data-cite-answer-group] {
    opacity: .5 !important;
}

.image-exercise-mark {
    --image-exercise-mark-color: #3d6f9c;
    --image-exercise-mark-fill: #b9d2ea;
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 4px #3d6f9c;
    pointer-events: none;
}

.image-exercise-mark.is-correct { --image-exercise-mark-color: #2f8c4c; --image-exercise-mark-fill: #afe5c0; box-shadow: inset 0 0 0 4px #2f8c4c; }
.image-exercise-mark.is-incorrect { --image-exercise-mark-color: #c23d3d; --image-exercise-mark-fill: #f4bbbb; box-shadow: inset 0 0 0 4px #c23d3d; }
.image-exercise-mark.is-duplicate { --image-exercise-mark-color: #bf8a15; --image-exercise-mark-fill: #f1d48b; box-shadow: inset 0 0 0 4px #bf8a15; }

.image-exercise-mark.is-highlighted {
    background: var(--image-exercise-mark-fill);
}

.image-exercise-mark.is-highlighted::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--image-exercise-mark-color);
    content: "";
    opacity: .13;
    transform: translate(-50%, -50%) scale(2);
}

.image-exercise-mark.is-flashing::after {
    animation: image-exercise-mark-aura 680ms ease-out both;
}

@keyframes image-exercise-mark-aura {
    0% { opacity: .34; transform: translate(-50%, -50%) scale(6); }
    100% { opacity: .13; transform: translate(-50%, -50%) scale(2); }
}

.image-exercise-figure > .image-exercise-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #b8c3d1;
    border-radius: 50%;
    background: #f5f7fa;
    color: #3d5166;
    cursor: pointer;
    display: none;
}

.image-exercise-description .image-exercise-zoom {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
    display: inline-grid;
    place-items: center;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #b8c3d1;
    border-radius: 50%;
    background: #f5f7fa;
    color: #3d5166;
    cursor: pointer;
}

.image-exercise-description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.image-exercise-description-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.image-exercise-description-main {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.image-exercise-help {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    margin-left: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

.image-exercise-help .practice-hint-tooltip {
    right: 0;
    left: auto;
    width: min(360px, calc(100vw - 48px));
    transform: translateY(4px);
}

.image-exercise-help:hover .practice-hint-tooltip,
.image-exercise-help:focus-visible .practice-hint-tooltip,
.image-exercise-help.is-open .practice-hint-tooltip {
    transform: translateY(0);
}

.image-exercise-solution-button {
    margin-top: 12px;
}

.lesson-animation-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: max-content;
    max-width: calc(100% - 12px);
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(61, 66, 72, 0.75);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    font-size: 1rem;
    line-height: 1.35;
    opacity: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transform-origin: center;
    text-align: center;
    animation: lesson-animation-hint-pulse 10s ease-in-out 10s infinite;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.elastic-deformation-stage {
    position: relative;
    display: grid;
    place-items: center;
}

.elastic-deformation-stage > .elastic-deformation-svg {
    display: block;
}

.lesson-animation-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 24px);
    max-width: none;
    gap: 6px;
    text-align: center;
}

.lesson-animation-caption > span {
    min-width: 0;
}

.lesson-animation-reset-progress {
    width: 23px;
    min-width: 23px;
    height: 23px;
    min-height: 23px;
}

.lesson-animation-reset-progress::before {
    font-size: 0.81rem;
}

.lesson-animation.is-hint-dismissed .lesson-animation-hint {
    visibility: hidden;
    opacity: 0;
}

@keyframes lesson-animation-hint-pulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    5% {
        transform: translate(-50%, -50%) scale(1.04);
    }

    10% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.lesson-animation-controls {
    display: grid;
    grid-template-columns: 32px minmax(180px, 520px) 32px 32px;
    align-items: center;
    gap: 10px;
    width: min(100%, 620px);
}

.lesson-animation-controls.is-autoplay-fixed {
    grid-template-columns: 32px minmax(180px, 520px) 32px;
}

.lesson-animation-control {
    position: relative;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50% !important;
    border-color: var(--color-border);
    background: #eef1f5;
    color: var(--color-text-muted);
    line-height: 1;
    box-sizing: border-box;
}

.lesson-animation-control:hover,
.lesson-animation-control:focus-visible {
    background: #e2e7ed;
    color: var(--color-heading);
}

.lesson-animation-control[data-tooltip]::after,
.lesson-animation-autoplay[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 90;
    width: max-content;
    max-width: 190px;
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lesson-animation-control[data-tooltip]:hover::after,
.lesson-animation-control[data-tooltip]:focus-visible::after,
.lesson-animation-autoplay[data-tooltip]:hover::after,
.lesson-animation-autoplay[data-tooltip]:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lesson-animation-progress {
    --animation-progress: 0%;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background:
        linear-gradient(
            to right,
            #287fb8 0 var(--animation-progress),
            #d8dee7 var(--animation-progress) 100%
        )
        center / calc(100% - 14px) 4px no-repeat;
    cursor: pointer;
}

.lesson-animation-progress::-webkit-slider-runnable-track {
    height: 4px;
    border: 0;
    background: transparent;
}

.lesson-animation-progress::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #9aa8b8;
    border-radius: 50%;
    background: #f5f7fa;
    box-shadow: 0 1px 3px rgba(15, 23, 40, 0.18);
}

.lesson-animation-progress::-moz-range-track,
.lesson-animation-progress::-moz-range-progress {
    height: 4px;
    border: 0;
    background: transparent;
}

.lesson-animation-progress::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 1px solid #9aa8b8;
    border-radius: 50%;
    background: #f5f7fa;
    box-shadow: 0 1px 3px rgba(15, 23, 40, 0.18);
}

.lesson-animation-autoplay {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #eef1f5;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
}

.lesson-animation-autoplay input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lesson-animation-autoplay:has(input:checked) {
    background: #dce9f5;
    color: #315f7d;
}

.lesson-figure-svg .site-svg-text .logic-mark {
    fill: var(--site-svg-text-color, var(--color-text));
}

.lesson-figure-svg .site-svg-text .logic-mark:hover,
.lesson-figure-svg .site-svg-text .logic-mark.is-logic-active {
    fill: var(--logic-accent, currentColor);
}

.lesson-figure-svg .site-svg-highlight {
    cursor: default;
}

.lesson-figure-svg .site-svg-text-frame {
    fill: #ffffff;
    stroke: var(--logic-accent, currentColor);
    stroke-width: var(--site-svg-border-width, 1px);
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

@keyframes siteSvgTextFrameGlow {
    0% {
        filter: drop-shadow(0 0 0 var(--logic-accent-glow, transparent));
    }
    38% {
        filter:
            drop-shadow(0 0 3px var(--logic-accent, currentColor))
            drop-shadow(0 0 7px var(--logic-accent-glow-strong, transparent));
    }
    100% {
        filter: drop-shadow(0 0 3px var(--logic-accent-glow-soft, transparent));
    }
}

.lesson-figure-svg .site-svg-text-frame.is-logic-active {
    fill: var(--logic-surface, #ffffff);
    animation: siteSvgTextFrameGlow 0.52s ease-out both;
}

@keyframes siteSvgHighlightGlow {
    0% {
        filter:
            drop-shadow(0 0 0 var(--logic-accent-glow-strong, transparent))
            drop-shadow(0 0 0 var(--logic-accent-glow, transparent));
    }
    42% {
        filter:
            drop-shadow(0 0 calc(6 * var(--site-svg-border-width, 1px)) var(--logic-accent, currentColor))
            drop-shadow(0 0 calc(14 * var(--site-svg-border-width, 1px)) var(--logic-accent-glow-strong, transparent));
    }
    100% {
        filter:
            drop-shadow(0 0 calc(3 * var(--site-svg-border-width, 1px)) var(--logic-accent-glow-strong, transparent))
            drop-shadow(0 0 calc(7 * var(--site-svg-border-width, 1px)) var(--logic-accent-glow, transparent));
    }
}

.lesson-figure-svg .site-svg-highlight.is-logic-active:is(line, path, polyline, rect, circle, ellipse, polygon),
.lesson-figure-svg .site-svg-highlight.is-logic-active :is(line, path, polyline, rect, circle, ellipse, polygon) {
    animation: siteSvgHighlightGlow 0.68s ease-out both;
}

.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="both"].is-logic-active:is(line, path, polyline, rect, circle, ellipse, polygon)[data-site-svg-has-stroke="true"],
.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="stroke"].is-logic-active:is(line, path, polyline, rect, circle, ellipse, polygon)[data-site-svg-has-stroke="true"],
.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="both"].is-logic-active :is(line, path, polyline, rect, circle, ellipse, polygon)[data-site-svg-has-stroke="true"],
.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="stroke"].is-logic-active :is(line, path, polyline, rect, circle, ellipse, polygon)[data-site-svg-has-stroke="true"] {
    stroke: var(--logic-accent, currentColor) !important;
    stroke-width: var(--site-svg-active-stroke-width, calc(2 * var(--site-svg-border-width, 1px))) !important;
}

.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="both"].is-logic-active:is(path, rect, circle, ellipse, polygon)[data-site-svg-has-fill="true"],
.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="fill"].is-logic-active:is(path, rect, circle, ellipse, polygon)[data-site-svg-has-fill="true"],
.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="both"].is-logic-active :is(path, rect, circle, ellipse, polygon)[data-site-svg-has-fill="true"],
.lesson-figure-svg .site-svg-highlight[data-site-highlight-mode="fill"].is-logic-active :is(path, rect, circle, ellipse, polygon)[data-site-svg-has-fill="true"] {
    fill: var(--logic-accent, currentColor) !important;
}

.lesson-figure-svg .site-svg-formula {
    fill: var(--color-heading);
    font-family: var(--font-serif);
    font-size: 1em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
}

.lesson-figure-svg .site-svg-latex-slot {
    overflow: visible;
}

.lesson-figure-svg .site-svg-latex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-heading);
    font-family: var(--font-serif);
    font-size: 1em;
    line-height: 1;
    text-align: center;
}

.lesson-figure-svg .site-svg-latex-slot[data-site-text-anchor="start"] .site-svg-latex {
    justify-content: flex-start;
}

.lesson-figure-svg .site-svg-latex-slot[data-site-text-anchor="end"] .site-svg-latex {
    justify-content: flex-end;
}

.lesson-figure-svg .site-svg-latex mjx-container {
    display: inline-block !important;
    width: max-content;
    max-width: none;
    margin: 0 !important;
    color: inherit;
    font-size: 1em !important;
}

.lesson-figure-svg .site-svg-latex .logic-mark,
.lesson-figure-svg .site-svg-latex .logic-fill,
.lesson-figure-svg .site-svg-latex .logic-frame {
    box-shadow: inset 0 0 0 var(--site-svg-border-width, 1px) var(--logic-accent, currentColor);
}

.lesson-figure-svg .site-svg-latex .logic-mark:hover,
.lesson-figure-svg .site-svg-latex .logic-mark.is-logic-active {
    animation: none;
    box-shadow: inset 0 0 0 var(--site-svg-border-width, 1px) var(--logic-accent, currentColor);
}

.lesson-figure-svg:focus-visible {
    outline: 2px solid rgba(31, 111, 235, 0.35);
    outline-offset: 4px;
}

.lesson-image-viewer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(14, 19, 30, 0.7);
    backdrop-filter: blur(4px);
}

.lesson-image-viewer-backdrop[hidden] {
    display: none;
}

.lesson-image-viewer-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    width: min(97vw, 1440px);
    max-width: 97vw;
    max-height: min(92vh, 980px);
    padding: 18px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(254, 254, 255, 0.98) 0%, rgba(243, 247, 253, 0.98) 100%);
    box-shadow: 0 22px 54px rgba(15, 23, 40, 0.28);
    overflow: hidden;
    contain: inline-size;
}

.applet-viewer-dialog {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    width: min(96vw, 1280px);
    max-width: 96vw;
    height: min(94vh, 1000px);
    max-height: 94vh;
    padding: 12px;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.lesson-image-viewer-backdrop.is-exercise-success {
    background: rgba(28, 91, 52, 0.72);
}

.applet-viewer-dialog.is-exercise-success {
    border-color: rgba(47, 140, 76, 0.78);
    background: #ccefd6;
    box-shadow: 0 22px 54px rgba(18, 92, 48, 0.34), inset 0 0 0 3px rgba(47, 140, 76, 0.32);
}

.lesson-image-viewer-close.applet-viewer-close {
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1;
}

.lesson-image-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lesson-image-viewer-title {
    margin: 0;
    color: var(--color-heading);
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
}

.lesson-image-viewer-meta {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
}

.lesson-image-viewer-stage {
    overflow: auto;
    min-width: 0;
    min-height: 0;
    padding: 6px;
    border: 1px solid rgba(95, 111, 134, 0.22);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 40, 0.08);
}

.lesson-image-viewer-inner {
    display: grid;
    place-items: center;
    min-width: 100%;
    min-height: 100%;
}

.lesson-image-viewer-image {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(15, 23, 40, 0.12);
}

.lesson-image-viewer-svg {
    display: block;
    max-width: none;
    max-height: none;
    overflow: visible;
    color: var(--color-heading);
}

.lesson-image-viewer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.lesson-image-viewer-exercise-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

.lesson-image-viewer-exercise-controls[hidden] {
    display: none !important;
}

.lesson-image-viewer-exercise-counter {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.lesson-image-viewer-exercise-submit {
    min-width: 118px;
}

.lesson-image-viewer-close {
    min-width: 124px;
}

.lesson-figure-caption {
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

.lesson-body strong {
    color: var(--color-heading);
}

.lesson-body code {
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(220, 233, 255, 0.6);
    font-family: "Consolas", "SFMono-Regular", monospace;
    font-size: 0.92em;
}

.lesson-table-wrap {
    margin: 1rem 0 1.25rem;
    overflow-x: auto;
}

.lesson-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(27, 49, 88, 0.16);
    border-radius: 14px;
    overflow: hidden;
    contain: inline-size;
    box-shadow: 0 10px 28px rgba(27, 49, 88, 0.08);
}

.lesson-table th,
.lesson-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(27, 49, 88, 0.12);
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}

.lesson-table th {
    background: rgba(27, 49, 88, 0.08);
    font-weight: 700;
}

.lesson-table tbody tr:last-child td {
    border-bottom: 0;
}

table tbody tr td,
table tbody tr th {
    transition: background-color 0.16s ease;
}

table tbody tr:hover td,
table tbody tr:hover th {
    background: rgba(198, 225, 255, 0.42);
}

.logic-mark {
    border-radius: 0.28em;
    padding: 0.12em 0.22em;
    color: inherit;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.logic-mark.logic-tight-left {
    padding-left: 0.08em;
}

.logic-mark.logic-tight-right {
    padding-right: 0.08em;
}

.logic-mark-ending {
    white-space: nowrap;
}

@keyframes logicMarkHoverGlow {
    0% {
        box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor), 0 0 0 0 var(--logic-accent-glow, rgba(31, 111, 235, 0));
    }
    38% {
        box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor), 0 0 0 5px var(--logic-accent-glow-strong, rgba(31, 111, 235, 0.26));
    }
    100% {
        box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor), 0 0 0 2px var(--logic-accent-glow-soft, rgba(31, 111, 235, 0.1));
    }
}

.logic-fill {
    box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor);
}

.logic-frame {
    box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor);
    background: #ffffff;
}

.logic-color-1 {
    --logic-accent: #c23d3d;
    --logic-surface: #ffecec;
    --logic-accent-glow: rgba(194, 61, 61, 0.18);
    --logic-accent-glow-strong: rgba(194, 61, 61, 0.26);
    --logic-accent-glow-soft: rgba(194, 61, 61, 0.12);
}

.logic-color-1:hover,
.logic-color-1.is-logic-active {
    color: var(--logic-accent);
    background: #ffecec;
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-2 {
    --logic-accent: #2e62cc;
    --logic-surface: #eaf2ff;
    --logic-accent-glow: rgba(46, 98, 204, 0.18);
    --logic-accent-glow-strong: rgba(46, 98, 204, 0.26);
    --logic-accent-glow-soft: rgba(46, 98, 204, 0.12);
}

.logic-color-2:hover,
.logic-color-2.is-logic-active {
    color: var(--logic-accent);
    background: #eaf2ff;
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-3 {
    --logic-accent: #2f8c4c;
    --logic-surface: #e9f8ed;
    --logic-accent-glow: rgba(47, 140, 76, 0.18);
    --logic-accent-glow-strong: rgba(47, 140, 76, 0.26);
    --logic-accent-glow-soft: rgba(47, 140, 76, 0.12);
}

.logic-color-3:hover,
.logic-color-3.is-logic-active {
    color: var(--logic-accent);
    background: #e9f8ed;
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-4 {
    --logic-accent: #bf8a15;
    --logic-surface: #fbf3de;
    --logic-accent-glow: rgba(191, 138, 21, 0.18);
    --logic-accent-glow-strong: rgba(191, 138, 21, 0.26);
    --logic-accent-glow-soft: rgba(191, 138, 21, 0.12);
}

.logic-color-4:hover,
.logic-color-4.is-logic-active {
    color: var(--logic-accent);
    background: #fbf3de;
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-5 {
    --logic-accent: #8d47b8;
    --logic-surface: #f3e9fb;
    --logic-accent-glow: rgba(141, 71, 184, 0.18);
    --logic-accent-glow-strong: rgba(141, 71, 184, 0.26);
    --logic-accent-glow-soft: rgba(141, 71, 184, 0.12);
}

.logic-color-5:hover,
.logic-color-5.is-logic-active {
    color: var(--logic-accent);
    background: #f3e9fb;
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-6 {
    --logic-accent: #1f8f97;
    --logic-surface: #e5f8fa;
    --logic-accent-glow: rgba(31, 143, 151, 0.18);
    --logic-accent-glow-strong: rgba(31, 143, 151, 0.26);
    --logic-accent-glow-soft: rgba(31, 143, 151, 0.12);
}

.logic-color-6:hover,
.logic-color-6.is-logic-active {
    color: var(--logic-accent);
    background: #e5f8fa;
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.lesson-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.material-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lesson-meta-row-inline {
    min-width: 44px;
    margin-top: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow: visible;
}

.material-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    background-clip: padding-box;
    color: var(--color-heading);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

.material-chip-special {
    border-color: #71839a;
    background: #71839a;
    color: #f2f5f8;
}

.material-chip-special.material-chip-link {
    color: #f2f5f8;
}

.material-card-meta .material-chip-special,
.lesson-card-topline .material-chip-special {
    border-color: #71839a;
    background: #71839a;
    color: #f2f5f8;
}

.material-chip-button {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    transform: none;
    border-radius: 999px;
    background-clip: padding-box;
}

.material-chip-button:hover,
.material-chip-button:focus-visible {
    border-color: #c4d0df;
    background: #e5edf6;
    color: var(--color-heading);
    box-shadow: none;
    transform: none;
}

.material-chip-button.material-chip-special:hover,
.material-chip-button.material-chip-special:focus-visible {
    border-color: #71839a;
    background: #71839a;
    color: #f2f5f8;
}

.material-chip-link {
    position: relative;
    border-radius: 999px;
    background-clip: padding-box;
    color: var(--color-heading);
    overflow: visible;
}

.material-chip-link:hover,
.material-chip-link:focus-visible {
    border-color: #c4d0df;
    background: #e5edf6;
    color: var(--color-heading);
    box-shadow: none;
    transform: none;
}

.material-chip-link.material-chip-special:hover,
.material-chip-link.material-chip-special:focus-visible {
    border-color: #71839a;
    background: #71839a;
    color: #f2f5f8;
}

.material-chip-compact {
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 9px;
    font-size: 0.76rem;
    font-weight: 600;
}

.lesson-meta-row-inline .material-chip {
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 9px;
    font-size: 0.76rem;
    font-weight: 600;
}

.lesson-meta-row-inline .material-chip-link::after {
    font-size: 0.7rem;
}

.material-step-tags {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 44px;
    overflow: hidden;
}

.material-step-tag.is-hidden-overflow {
    display: none;
}

.material-step-tags-toggle[hidden] {
    display: none;
}

.material-step-tags.is-expanded .material-step-tag.is-hidden-overflow {
    display: inline-flex;
}

.material-step-tags.is-expanded {
    flex-wrap: wrap;
    overflow: visible;
}

.material-step-tags.is-expanded .material-step-tags-toggle {
    display: inline-flex;
}

.material-title-line.has-expanded-step-tags .exercise-title {
    width: 100%;
}

.material-title-line.has-expanded-step-tags {
    flex-wrap: wrap;
}

.material-title-line.has-expanded-step-tags .lesson-meta-row-inline {
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
}

.material-title-line.has-expanded-step-tags .material-step-tags {
    overflow: visible;
}

.lesson-meta-row-inline .material-step-tags {
    gap: 4px;
}

.lesson-meta-row-inline .material-step-tags-toggle {
    flex: 0 0 auto;
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0;
    font-size: 0.76rem;
    font-weight: 700;
}

.material-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.material-card-meta-inline {
    margin: 4px 0 2px;
}

.lesson-overview-card {
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}

.lesson-overview-card p {
    margin-bottom: 10px;
}

.lesson-image-viewer-exercise-shell {
    position: relative;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(15, 23, 40, 0.12);
    cursor: crosshair;
}

.lesson-image-viewer-exercise-shell > .lesson-image-viewer-image,
.lesson-image-viewer-exercise-shell > .lesson-image-viewer-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    box-shadow: none;
}

.lesson-image-viewer-exercise-shell > .lesson-image-viewer-image {
    z-index: 0;
}

.lesson-image-viewer-exercise-shell > .lesson-image-viewer-svg {
    z-index: 1;
    cursor: crosshair;
}

.lesson-image-viewer-exercise-shell > .image-exercise-mark {
    z-index: 2;
}

.tabular-practice-card {
    overflow: visible;
}

.tabular-exercise-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(95, 111, 134, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.tabular-exercise-table {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.tabular-exercise-table th,
.tabular-exercise-table td {
    min-width: 8.5rem;
    padding: 9px 12px;
    border-right: 1px solid rgba(95, 111, 134, 0.2);
    border-bottom: 1px solid rgba(95, 111, 134, 0.2);
    vertical-align: middle;
    text-align: center;
}

.tabular-exercise-table tr > :last-child {
    border-right: 0;
}

.tabular-exercise-table tbody tr:last-child > * {
    border-bottom: 0;
}

.tabular-exercise-table thead th {
    background: rgba(236, 241, 247, 0.88);
    color: var(--color-heading);
    font-size: 0.9rem;
    font-weight: 650;
}

.tabular-exercise-table .tabular-row-heading {
    min-width: 10rem;
    max-width: 18rem;
    background: rgba(241, 244, 248, 0.72);
    color: var(--color-heading);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
}

.tabular-exercise-table tbody tr:hover > .tabular-row-heading {
    background: rgba(198, 225, 255, 0.42);
}

.tabular-exercise-table td.is-tabular-interactive {
    padding: 6px 8px;
}

.tabular-choice-cell {
    display: grid;
    width: 100%;
    min-width: 5.5rem;
    min-height: 38px;
    place-items: center;
    padding: 5px;
    border: 1px solid rgba(95, 111, 134, 0.28);
    border-radius: 9px;
    background: rgba(244, 247, 250, 0.92);
    color: var(--color-heading);
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.tabular-choice-cell > span {
    width: 17px;
    height: 17px;
    border: 1.5px solid rgba(74, 91, 116, 0.62);
    border-radius: 5px;
    background: var(--color-surface);
}

.tabular-choice-cell:hover {
    border-color: rgba(46, 98, 204, 0.52);
    background: rgba(231, 239, 251, 0.9);
}

.tabular-choice-cell.is-selected {
    border-color: rgba(46, 98, 204, 0.72);
    background: rgba(218, 231, 251, 0.95);
    box-shadow: 0 0 0 3px rgba(46, 98, 204, 0.1);
}

.tabular-choice-cell.is-selected > span {
    border-color: #174a8b;
    background: #174a8b;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.96);
}

.tabular-choice-cell.is-selected:hover {
    border-color: #174a8b;
}

.tabular-choice-cell.is-selected:hover > span {
    border-color: #174a8b;
    background: #174a8b;
}

.tabular-choice-cell.is-choice-correct {
    border-color: rgba(44, 139, 77, 0.72);
    background: rgba(225, 245, 232, 0.92);
}

.tabular-choice-cell.is-choice-incorrect {
    border-color: rgba(194, 61, 61, 0.76);
    background: rgba(255, 232, 232, 0.94);
}

.tabular-input-slot.inline-gaps-slot {
    display: inline-flex;
    width: min(var(--inline-gap-width, 12ch), 100%);
    min-width: min(5rem, 100%);
    max-width: 100%;
    vertical-align: middle;
}

.tabular-input-slot .inline-gaps-control,
.tabular-input-slot .equation-field-frame,
.tabular-input-slot math-field {
    width: 100%;
    min-width: 0;
}

.tabular-matching-slot.gaps-slot {
    width: 100%;
    min-width: max(7rem, var(--gap-matching-slot-width, 7rem));
    max-width: none;
    margin: 0;
}

.tabular-card-pool {
    margin-top: 12px;
}

@media (max-width: 680px) {
    .tabular-exercise-table th,
    .tabular-exercise-table td {
        min-width: 7rem;
        padding: 7px 9px;
    }

    .tabular-exercise-table .tabular-row-heading {
        min-width: 8.5rem;
    }
}

.lesson-overview-card.is-answer-gated {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition:
        height 0.28s ease,
        margin 0.28s ease,
        padding 0.28s ease,
        border-width 0.28s ease,
        opacity 0.22s ease,
        transform 0.28s ease;
}

.lesson-overview-card.is-answer-gated.is-revealed {
    height: var(--answer-gated-height, auto);
    margin-top: 18px;
    margin-bottom: 0;
    padding-top: 18px;
    padding-bottom: 18px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    opacity: 1;
    transform: translateY(0);
}

.lesson-overview-card.is-answer-gated.is-reveal-complete {
    height: auto;
    overflow: visible;
}

.lesson-grade-section {
    gap: 18px;
}

.lesson-grade-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.lesson-grade-heading h2,
.lesson-grade-heading p {
    margin-bottom: 0;
}

.lesson-grade-kicker {
    margin-bottom: 6px;
    color: var(--color-link-hover);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-card-link {
    gap: 12px;
}

.lesson-card-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.material-status-stack {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    width: 132px;
    min-width: 132px;
    gap: 8px;
}

.material-status-badge {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 60px;
    flex: 0 0 auto;
}

.material-status-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-link-hover);
}

.material-status-circle svg {
    width: 20px;
    height: 20px;
}

.material-status-circle svg circle,
.material-status-circle svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.material-status-circle svg rect {
    fill: currentColor;
    stroke: none;
}

.material-status-value {
    color: var(--color-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.material-status-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 180px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.material-status-badge:hover::after,
.material-status-badge:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}

.lesson-layout-controls {
    display: flex;
    justify-content: flex-end;
}

.lesson-layout-menu {
    position: relative;
    z-index: 8;
}

.lesson-layout-menu > summary {
    list-style: none;
}

.lesson-layout-menu > summary::-webkit-details-marker {
    display: none;
}

.lesson-layout-menu-toggle {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: #526074;
}

.lesson-layout-menu-toggle:hover,
.lesson-layout-menu-toggle:focus-visible,
.lesson-layout-menu[open] .lesson-layout-menu-toggle {
    border-color: #9bb6d6;
    background: var(--color-highlight);
    color: var(--color-link-hover);
}

.lesson-layout-menu-toggle svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    stroke: none;
}

.lesson-layout-menu-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: auto;
    display: grid;
    min-width: 17rem;
    gap: 8px;
    padding: 11px;
    transform: none;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    background: var(--color-surface);
    box-shadow: 0 12px 28px var(--color-shadow);
}

.lesson-layout-menu-panel > span {
    color: #526074;
    font-size: 0.78rem;
    font-weight: 650;
}

.lesson-step-layout {
    display: grid;
    gap: 18px;
}

.lesson-step-layout .lesson-overview-card,
.lesson-step-layout .lesson-reading-shell {
    width: 100%;
    max-width: 72ch;
    margin: 0 auto;
    transition: max-width 0.3s ease;
}

.lesson-step-layout .lesson-overview-card.is-answer-gated {
    transition:
        max-width 0.3s ease,
        height 0.28s ease,
        margin 0.28s ease,
        padding 0.28s ease,
        border-width 0.28s ease,
        opacity 0.22s ease,
        transform 0.28s ease;
}

.lesson-step-layout .lesson-overview-card.is-answer-gated.is-revealed {
    margin-top: 18px;
    margin-bottom: 0;
}

.lesson-step-layout.is-wide .lesson-overview-card,
.lesson-step-layout.is-wide .lesson-reading-shell {
    max-width: 100%;
}

.lesson-step-layout.is-applet-forced-wide .lesson-layout-controls,
.lesson-step-layout.is-environment-forced-wide .lesson-layout-controls {
    display: none;
}

.ordering-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    border-radius: 12px;
    transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.ordering-row.is-equal-drop-target {
    background: rgba(31, 111, 235, 0.09);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.09);
}

.ordering-row > .ordering-card {
    flex: 1 1 0;
    min-width: 0;
}

.ordering-row.is-compact-image-row {
    justify-content: center;
}

.ordering-row.is-compact-image-row > .ordering-card:has(.exercise-image-option) {
    flex: 1 1 0;
    width: auto;
    max-width: none;
}

.multiple-ordering-layout {
    display: grid;
    grid-template-columns: repeat(var(--multiple-ordering-columns, 2), minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.multiple-ordering-layout > .ordering-board:only-child {
    grid-column: 1 / -1;
}

.multiple-ordering-layout:has(> .ordering-board:nth-child(3)) {
    --multiple-ordering-columns: 3;
}

@media (min-width: 760px) {
    .ordering-board.is-horizontal-requested {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        grid-template-rows: auto auto;
        align-items: stretch;
        gap: 0;
    }

    .ordering-board.is-horizontal-requested .ordering-anchor-row {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        justify-self: center;
        display: flex;
        margin: 0;
        transform: rotate(-90deg);
        z-index: 1;
    }

    .ordering-board.is-horizontal-requested .ordering-anchor-start {
        margin: 0;
        white-space: nowrap;
        transform: none;
    }

    .ordering-board.is-horizontal-requested .ordering-anchor-end {
        grid-column: 3;
        grid-row: 2;
        align-self: center;
        justify-self: center;
        margin: 0;
        white-space: nowrap;
        transform: rotate(-90deg);
        z-index: 1;
    }

    .ordering-board.is-horizontal-requested .ordering-reverse-button {
        margin: 0;
        transform: rotate(90deg);
        z-index: 2;
    }

    .ordering-board.is-horizontal-requested .ordering-list {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        align-items: stretch;
        min-width: 0;
        min-height: 0;
    }

    .ordering-board.is-horizontal-requested .ordering-row {
        flex: 1 1 0;
        flex-direction: column;
        min-width: 0;
    }

    .ordering-board.is-horizontal-requested .ordering-row > .ordering-card {
        flex: 1 1 auto;
        width: 100%;
    }

    .ordering-board.is-horizontal-requested .ordering-reverse-symbol {
        transform: rotate(-90deg);
    }

    .ordering-board.is-horizontal-requested .ordering-pair-marker:not(.is-inline) {
        left: 0;
        top: 50%;
    }

    .ordering-board.is-horizontal-requested .ordering-list.is-drag-active .ordering-row::before,
    .ordering-board.is-horizontal-requested .ordering-list.is-drag-active::after {
        top: 50%;
        bottom: auto;
        left: -9px;
        width: 4px;
        height: 34px;
        transform: translate(-50%, -50%);
    }

    .ordering-board.is-horizontal-requested .ordering-list.is-drag-active::after {
        right: 9px;
        left: auto;
        transform: translate(50%, -50%);
    }

    .ordering-board.is-horizontal-requested .ordering-list.is-drag-active .ordering-row.is-separate-drop-target::before,
    .ordering-board.is-horizontal-requested .ordering-list.is-drag-active.is-end-drop-target::after {
        width: 6px;
        height: 52px;
    }

    [data-equal-cards="true"] .ordering-board.is-horizontal-requested .ordering-list.is-drag-active .ordering-row::after {
        top: auto;
        right: 50%;
        bottom: 8px;
        transform: translateX(50%);
    }

    .ordering-board.is-horizontal-requested .ordering-list.is-drag-active {
        gap: 18px;
    }

    .multiple-ordering-layout.is-horizontal-requested {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 759px) {
    .multiple-ordering-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ordering-equal-help {
    margin-left: 0.25rem;
    vertical-align: 0.08em;
}

.lesson-environment-force-narrow {
    width: 100%;
    max-width: 72ch;
    margin-right: auto;
    margin-left: auto;
}

.lesson-layout-toggle {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none;
}

.lesson-layout-toggle:hover,
.lesson-layout-toggle:focus-visible {
    background: rgba(220, 233, 255, 0.55);
    color: var(--color-link-hover);
    transform: none;
}

.lesson-layout-toggle.is-active {
    border-color: var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
}

.lesson-layout-toggle.is-active:hover,
.lesson-layout-toggle.is-active:focus-visible {
    background: rgba(220, 233, 255, 0.55);
    color: var(--color-link-hover);
}

.lesson-reading-shell {
    width: 100%;
}

.lesson-reading-shell .lesson-body {
    width: 100%;
}

.lesson-reading-shell .material-body p,
.lesson-reading-shell .material-body li {
    text-align: justify;
    text-justify: inter-word;
}

.lesson-reading-shell .material-body p.has-inline-cyrillic-subscript,
.lesson-reading-shell .material-body li.has-inline-cyrillic-subscript {
    text-align: left;
    text-justify: auto;
}

.lesson-reading-shell .material-body .has-inline-cyrillic-subscript mjx-container {
    word-spacing: normal;
}

.lesson-reading-shell .material-body p.has-display-logic-equation {
    text-align-last: left;
}

.lesson-step-layout.is-wide .lesson-body,
.lesson-reading-shell.is-wide .lesson-body {
    max-width: 100%;
}

.lesson-actions-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.lesson-actions-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-actions-row.is-theory-step {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.lesson-actions-row.is-theory-step .practice-question-button,
.lesson-actions-row.is-theory-step .practice-report-button {
    width: max-content;
    min-width: max-content;
    white-space: nowrap;
}

.theory-step-next-button {
    width: 100%;
}

.theory-reminder-reference {
    margin: 0;
    display: grid;
    gap: 10px;
}

.material-detail-content > .theory-reminder-reference {
    margin-top: 0;
}

.theory-reminder-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.theory-reminder-toggle {
    min-width: 0;
}

.theory-shortcuts-toggle {
    position: relative;
    min-width: 42px;
    width: 42px;
    padding: 0;
}

.theory-shortcuts-toggle-label {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.theory-shortcuts-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(260px, calc(100vw - 48px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
}

.theory-shortcuts-toggle:hover::after,
.theory-shortcuts-toggle:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.theory-reminder-panel {
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}

.theory-reminder-panel[hidden] {
    display: none;
}

.theory-reminder-list {
    margin: 0;
    padding-left: 22px;
}

.theory-shortcuts-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 40, 0.42);
}

.theory-shortcuts-backdrop[hidden] {
    display: none;
}

.theory-shortcuts-dialog {
    width: min(560px, 100%);
    padding: 18px 18px 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 40, 0.2);
    display: grid;
    gap: 12px;
}

.theory-shortcuts-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--color-heading);
}

.theory-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.theory-shortcuts-table th,
.theory-shortcuts-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(91, 109, 138, 0.2);
    text-align: left;
    vertical-align: top;
}

.theory-shortcuts-table th {
    width: 120px;
    font-family: "Consolas", "Courier New", monospace;
    color: rgba(23, 32, 51, 0.82);
    font-size: 0.82rem;
    font-weight: 700;
}

.theory-shortcuts-actions {
    display: flex;
    justify-content: flex-end;
}

.theory-shortcuts-close {
    min-height: 34px;
    padding: 0 16px;
    font-size: 0.86rem;
}

.practice-question-button {
    position: relative;
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.86rem;
}

.practice-question-button::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: 220px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.practice-question-button[data-tooltip=""]::after {
    display: none;
}

.practice-question-button:hover::after,
.practice-question-button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.practice-question {
    display: grid;
    position: relative;
}

.practice-question[hidden] {
    display: none;
}

.practice-question textarea {
    min-height: 88px;
    padding: 12px 14px;
    border-radius: 16px;
    resize: vertical;
}

.exercise-flow-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: -2px;
}

.text-link-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
}

.text-link-button::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: min(260px, calc(100vw - 48px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.text-link-button:not([data-tooltip])::after,
.text-link-button[data-tooltip=""]::after {
    display: none;
}

.text-link-button:hover,
.text-link-button:focus-visible {
    background: none;
    color: var(--color-link-hover);
    transform: none;
}

.text-link-button:hover::after,
.text-link-button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.text-link-button.is-disabled {
    color: rgba(91, 109, 138, 0.55);
    cursor: help;
}

.text-link-button.is-disabled:hover,
.text-link-button.is-disabled:focus-visible {
    color: rgba(91, 109, 138, 0.55);
}

.lesson-summary-card {
    display: grid;
    gap: 18px;
}

.exam-constants-reference {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.exam-constants-panel {
    border: 1px solid rgba(91, 109, 138, 0.18);
    border-radius: 16px;
    background: rgba(245, 248, 252, 0.92);
    padding: 16px 18px;
    display: grid;
    gap: 16px;
}

.exam-constants-panel[hidden] {
    display: none;
}

.exam-constants-sections-primary {
    display: grid;
    gap: 14px;
    margin-bottom: 0;
}

.exam-constants-sections-secondary {
    columns: 2 320px;
    column-gap: 14px;
}

.exam-constants-section {
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(91, 109, 138, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    break-inside: avoid;
    margin-bottom: 0;
}

.exam-constants-section-toggle {
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-heading);
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

.exam-constants-section-toggle::before {
    content: "\25BE";
    display: inline-block;
    margin-right: 8px;
    color: var(--color-link-hover);
    transform: translateY(-1px);
}

.exam-constants-section-toggle[aria-expanded="false"]::before {
    content: "\25B8";
}

.exam-constants-section-toggle:hover,
.exam-constants-section-toggle:focus-visible {
    background: none;
    color: var(--color-link-hover);
    transform: none;
}

.exam-constants-section-panel[hidden] {
    display: none;
}

.exam-constants-section-panel {
    margin-top: 10px;
}

.exam-constants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.exam-constants-table th,
.exam-constants-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(91, 109, 138, 0.16);
    text-align: left;
    vertical-align: top;
}

.exam-constants-table th {
    color: var(--color-heading);
}

.inline-minipage {
    display: block;
}

.lesson-details {
    margin: 0.75rem 0;
    border: 1px solid rgba(91, 109, 138, 0.22);
    border-radius: 8px;
    background: rgba(247, 250, 254, 0.92);
}

.lesson-details-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    color: var(--color-heading);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.lesson-details-summary::-webkit-details-marker {
    display: none;
}

.lesson-details-summary::before {
    content: "\25B8";
    flex: 0 0 auto;
    color: var(--color-link-hover);
    transition: transform 0.16s ease;
}

.lesson-details[open] > .lesson-details-summary::before {
    transform: rotate(90deg);
}

.lesson-details-summary:hover,
.lesson-details-summary:focus-visible {
    color: var(--color-link-hover);
}

.lesson-details-body {
    padding: 4px 13px 13px 34px;
}

.lesson-details-body > :first-child {
    margin-top: 0;
}

.lesson-details-body > :last-child {
    margin-bottom: 0;
}

.lesson-answer-body {
    display: flow-root;
}

.lesson-answer.is-answer-animated > .lesson-answer-body {
    display: grid;
    grid-template-rows: 0fr;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition:
        grid-template-rows 0.3s ease,
        padding 0.3s ease;
}

.lesson-answer.is-answer-animated.is-answer-expanded > .lesson-answer-body {
    grid-template-rows: 1fr;
    padding-top: 4px;
    padding-bottom: 13px;
}

.lesson-answer-body-inner {
    min-height: 0;
    overflow: hidden;
}

.lesson-answer-result {
    width: fit-content;
    max-width: 100%;
    margin: 16px 0 0 auto;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-heading);
    font: inherit;
    font-weight: 700;
    text-align: right;
    box-shadow: none;
}

.lesson-answer-result strong {
    color: inherit;
    font-weight: inherit;
}

.lesson-exercise-example {
    margin: 1.2rem 0;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid rgba(91, 109, 138, 0.24);
    border-left: 3px solid rgba(46, 98, 204, 0.72);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(247, 250, 254, 0.96), rgba(255, 255, 255, 0.9));
    box-shadow: 0 8px 24px rgba(41, 58, 88, 0.055);
}

.lesson-exercise-example.lesson-environment-force-narrow {
    margin-right: auto;
    margin-left: auto;
}

.exercise-example-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.exercise-example-header.has-title {
    justify-content: space-between;
    margin-bottom: 14px;
}

.exercise-example-title {
    min-width: 0;
    margin: 0;
    color: var(--color-heading);
    font-size: clamp(1.08rem, 1.5vw, 1.24rem);
    line-height: 1.25;
}

.exercise-example-equation-help {
    flex: 0 0 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    transform: none;
}

.exercise-example-equation-help:hover,
.exercise-example-equation-help:focus-visible {
    transform: none;
}

.exercise-example-equation-help .practice-hint-tooltip {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(340px, calc(100vw - 48px));
    transform: translateY(-4px);
}

.exercise-example-equation-help:hover .practice-hint-tooltip,
.exercise-example-equation-help:focus-visible .practice-hint-tooltip,
.exercise-example-equation-help.is-open .practice-hint-tooltip {
    transform: translateY(0);
}

.exercise-example-conditions {
    padding: 12px 14px;
    border: 1px solid rgba(91, 109, 138, 0.2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
}

.exercise-example-conditions h3 {
    margin: 0 0 7px;
    color: var(--color-heading);
    font-size: 1rem;
}

.exercise-example-conditions-content > :first-child {
    margin-top: 0;
}

.exercise-example-conditions-content > :last-child {
    margin-bottom: 0;
}

.exercise-example-solution {
    margin-top: 18px;
}

.exercise-example-layout {
    display: flow-root;
    min-width: 0;
}

.lesson-exercise-example.has-example-meta .exercise-example-layout {
    display: flow-root;
}

.exercise-example-meta {
    --exercise-example-meta-padding-right: clamp(12px, 1.8vw, 20px);
    float: left;
    width: min(27%, 15rem);
    min-width: 0;
    padding-right: var(--exercise-example-meta-padding-right);
    margin: 0 clamp(16px, 2.4vw, 28px) 14px 0;
    border-right: 2px solid rgba(74, 91, 119, 0.48);
}

.exercise-example-meta-section {
    min-width: 0;
    padding: 2px 0 10px;
}

.exercise-example-meta-section + .exercise-example-meta-section {
    position: relative;
    padding-top: 12px;
}

.exercise-example-meta-section + .exercise-example-meta-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(-1 * var(--exercise-example-meta-padding-right));
    left: 0;
    border-top: 2px solid rgba(74, 91, 119, 0.48);
}

.exercise-example-meta-section h3 {
    margin: 0 0 7px;
    color: var(--color-heading);
    font-size: 0.86rem;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.exercise-example-meta-section p {
    margin: 0;
    text-align: left;
}

.exercise-example-meta-section mjx-container[display="true"] {
    margin: 0.42rem 0 !important;
    text-align: left !important;
}

.exercise-example-content {
    min-width: 0;
}

.exercise-example-content > :first-child {
    margin-top: 0;
}

.exercise-example-content > :last-child {
    margin-bottom: 0;
}

.exercise-example-content > h3 {
    margin: 1.05rem 0 0.55rem;
    color: var(--color-heading);
    font-size: 1rem;
}

.exercise-example-content > h3:first-child {
    margin-top: 0;
}

.exercise-example-answer {
    clear: both;
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    margin-top: 18px;
}

.exercise-example-answer-content,
.exercise-example-answer-content > p {
    display: inline;
    margin: 0;
}

.exercise-example-equation-group {
    position: relative;
    min-width: 0;
    margin: 1rem 0;
}

.exercise-example-equation-group.has-comments {
    display: block;
}

.exercise-example-equation-comments {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
    width: min(31%, 15rem);
    min-width: 0;
}

.exercise-example-equation-illustrations {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 3;
    width: min(31%, 15rem);
    min-width: 0;
}

.exercise-example-equation-comment,
.exercise-example-equation-illustration {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--exercise-example-explanation-color, #2e62cc);
    border-radius: 9px;
    background: var(--exercise-example-explanation-surface, #eaf2ff);
    color: var(--color-text);
    font-size: 0.82rem;
    line-height: 1.38;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.exercise-example-equation-comment {
    right: 0;
    transform: translateX(-5px);
}

.exercise-example-equation-illustration {
    left: 0;
    padding: 6px;
    transform: translateX(5px);
}

.exercise-example-equation-comment.is-visible,
.exercise-example-equation-illustration.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
}

.exercise-example-equation-comment.is-locked,
.exercise-example-equation-illustration.is-locked {
    border-color: var(--exercise-example-explanation-color, #244f9f);
    box-shadow: 0 0 0 2px color-mix(
        in srgb,
        var(--exercise-example-explanation-color, #2e62cc) 14%,
        transparent
    );
}

.exercise-example-equation-comment > :first-child {
    margin-top: 0;
}

.exercise-example-equation-comment > :last-child {
    margin-bottom: 0;
}

.exercise-example-equation-illustration .lesson-figure {
    display: block;
    width: 100%;
    margin: 0;
}

.exercise-example-equation-illustration .lesson-figure-svg-shell {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
}

.exercise-example-equation-illustration .lesson-figure-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 13rem;
    margin: 0;
}

.exercise-example-equation-math {
    position: relative;
    z-index: 2;
    min-width: 0;
    transition: padding-left 0.18s ease, padding-right 0.18s ease;
}

.exercise-example-equation-group.has-visible-comment .exercise-example-equation-math {
    padding-left: min(31%, 15rem);
}

.exercise-example-equation-group.has-visible-illustration .exercise-example-equation-math {
    padding-right: min(31%, 15rem);
}

.exercise-example-equation-math mjx-container[display="true"] {
    margin: 0.6rem 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
}

.exercise-example-equation-anchor {
    position: absolute;
    right: 0;
    width: 1px;
    height: 1px;
    scroll-margin-top: 7rem;
    pointer-events: none;
}

.exercise-example-equation-hitbox {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 4;
    display: block;
    min-height: 1.8rem;
    border-radius: 7px;
    pointer-events: none;
}

.lesson-step-layout.is-wide .exercise-example-equation-hitbox {
    cursor: pointer;
    pointer-events: auto;
}

.exercise-example-equation-connectors {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.exercise-example-equation-connector-line {
    fill: none;
    stroke: var(--exercise-example-explanation-color, #607da8);
    stroke-width: 1.45;
    stroke-linecap: round;
    opacity: 0.82;
}

.exercise-example-equation-connector-dot {
    fill: var(--exercise-example-explanation-color, #607da8);
    opacity: 0.9;
}

.exercise-example-equation-target {
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.exercise-example-equation-target.is-reference-highlighted,
.exercise-example-equation-target.is-reference-pulsed {
    background: rgba(255, 213, 79, 0.28);
    box-shadow: 0 0 0 4px rgba(255, 213, 79, 0.18);
}

.exercise-example-equation-target.is-comment-locked {
    background: rgba(46, 98, 204, 0.08);
}

.exercise-example-equation-ref {
    display: inline-block;
    padding: 0 0.08em;
    border-radius: 4px;
    color: var(--color-link);
    font-weight: 650;
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.exercise-example-equation-ref:hover,
.exercise-example-equation-ref:focus-visible {
    color: var(--color-link-hover);
    background: rgba(46, 98, 204, 0.09);
}

.lesson-exercise-example.has-external-comment-lane .exercise-example-equation-comments {
    right: calc(100% + var(--exercise-example-column-comment-offset, 32px));
    left: auto;
    width: var(--exercise-example-column-comment-width, 12rem);
}

.lesson-exercise-example.has-external-comment-lane .exercise-example-equation-group.has-visible-comment .exercise-example-equation-math {
    padding-left: 0;
}

.lesson-exercise-example.has-external-illustration-lane .exercise-example-equation-illustrations {
    right: auto;
    left: calc(100% + var(--exercise-example-column-illustration-offset, 32px));
    width: var(--exercise-example-column-illustration-width, 12rem);
}

.lesson-exercise-example.has-external-illustration-lane .exercise-example-equation-group.has-visible-illustration .exercise-example-equation-math {
    padding-right: 0;
}

@media (max-width: 720px) {
    .lesson-exercise-example.has-example-meta .exercise-example-layout {
        display: block;
    }

    .exercise-example-meta {
        float: none;
        width: min(18rem, 100%);
        margin: 0 0 16px;
    }

    .exercise-example-equation-group.has-comments {
        display: block;
    }

    .exercise-example-equation-comments,
    .exercise-example-equation-illustrations {
        display: block;
        position: relative;
        inset: auto;
        width: 100%;
        margin-bottom: 8px;
    }

    .exercise-example-equation-connectors {
        display: none;
    }

    .exercise-example-equation-group.has-visible-comment .exercise-example-equation-math {
        padding-left: 0;
    }

    .exercise-example-equation-group.has-visible-illustration .exercise-example-equation-math {
        padding-right: 0;
    }

    .exercise-example-equation-comment,
    .exercise-example-equation-illustration {
        display: none;
        position: relative;
        width: 100%;
        transform: translateY(-4px);
    }

    .exercise-example-equation-comment.is-visible,
    .exercise-example-equation-illustration.is-visible {
        display: block;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .exercise-example-equation-comment,
    .exercise-example-equation-illustration,
    .exercise-example-equation-math,
    .exercise-example-equation-target,
    .exercise-example-equation-ref {
        transition: none;
    }
}

.readiness-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    margin-left: 0.35em;
    color: #b45309;
    font-size: 0.9em;
    line-height: 1;
    vertical-align: 0.08em;
}

.readiness-warning-unfinished,
.readiness-warning-empty {
    color: #b42318;
}

.readiness-warning-step {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 1px 2px 0 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: #fff8ed;
    font-size: 17px;
}

.learning-tree-readiness-warning {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    margin: 0;
}

.learning-tree-mini-readiness-warning {
    flex: 0 0 auto;
    margin-left: 4px;
}

.mobile-unavailable {
    display: none;
}

@media (max-width: 760px), (max-width: 900px) and (pointer: coarse) {
    body > .site-header,
    body > .site-main,
    body > .site-footer,
    body > .applet-top-edge-sensor {
        display: none !important;
    }

    .mobile-unavailable {
        box-sizing: border-box;
        display: grid;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 24px;
        place-items: center;
        background: #eef3f9;
    }

    .mobile-unavailable-card {
        width: min(100%, 430px);
        padding: 28px 24px;
        border: 1px solid #cbd8e8;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 36px rgba(35, 57, 87, 0.12);
        color: #26384f;
        text-align: center;
    }

    .mobile-unavailable-mark {
        margin-bottom: 12px;
        font-size: 42px;
        line-height: 1;
    }

    .mobile-unavailable-card h1 {
        margin: 0 0 12px;
        font-size: clamp(1.35rem, 6vw, 1.75rem);
        line-height: 1.18;
    }

    .mobile-unavailable-card p {
        margin: 0;
        color: #5a6c82;
        line-height: 1.55;
    }
}

.exercise-solution {
    margin: 0.85rem 0 1rem;
}

.exercise-solution-summary {
    position: relative;
}

.exercise-solution-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: min(360px, calc(100vw - 48px));
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.exercise-solution-summary:hover .exercise-solution-tooltip,
.exercise-solution-summary:focus-visible .exercise-solution-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.exercise-solution-body {
    display: flow-root;
}

.exercise-solution-meta {
    float: left;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: min(33%, 22rem);
    min-width: 15rem;
    max-width: 100%;
    margin: 0 16px 12px 0;
}

.exercise-solution-meta-card {
    padding: 10px 12px;
    border: 1px solid rgba(91, 109, 138, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.exercise-solution-meta-title {
    margin-bottom: 6px;
    color: var(--color-heading);
    font-size: 0.82rem;
    font-weight: 700;
}

.exercise-solution-meta-values {
    display: grid;
    gap: 4px;
}

.exercise-solution-meta-value {
    min-width: 0;
}

.exercise-solution-content {
    display: block;
}

.exercise-solution-content > .lesson-figure:first-child,
.exercise-solution-content > p:first-child > img:only-child {
    float: right;
    width: min(18rem, 42%);
    margin: 0 0 12px 16px;
}

.exercise-solution-content > p:first-child > img:only-child {
    display: block;
    height: auto;
}

.exercise-solution-content > :first-child {
    margin-top: 0;
}

.exercise-solution-content > :last-child {
    margin-bottom: 0;
}

.exercise-solution-result {
    clear: both;
}

@media (max-width: 640px) {
    .exercise-solution-meta {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .exercise-solution-content > .lesson-figure:first-child,
    .exercise-solution-content > p:first-child > img:only-child {
        float: none;
        width: auto;
        margin-left: 0;
    }
}

.inline-minipage-reference {
    margin: 0.4rem 0;
}

.inline-minipage-reference-inline {
    display: inline;
    margin: 0;
}

.inline-minipage-toggle {
    font: inherit;
}

.inline-lesson-reference-preview {
    position: fixed;
    z-index: 96;
    width: fit-content;
    max-width: min(340px, calc(100vw - 32px));
    padding: 12px 14px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 12px;
    background: var(--color-heading);
    box-shadow: 0 16px 34px rgba(15, 23, 40, 0.22);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.inline-lesson-reference-preview[hidden] {
    display: none;
}

.inline-lesson-reference-preview.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.inline-lesson-reference-preview-content > :first-child {
    margin-top: 0;
}

.inline-lesson-reference-preview-content > :last-child {
    margin-bottom: 0;
}

.inline-lesson-reference-preview-content ul,
.inline-lesson-reference-preview-content ol {
    margin: 0;
    padding-left: 18px;
}

.inline-lesson-reference-preview-content li + li {
    margin-top: 6px;
}

.inline-lesson-reference-preview-content p {
    margin: 0;
}

.inline-minipage-panel {
    display: block;
    margin-top: 10px;
    overflow: hidden;
    contain: inline-size;
    max-height: 0;
    opacity: 0;
    transition: max-height 250ms ease, opacity 250ms ease;
}

.inline-minipage-panel[hidden] {
    display: none;
}

.inline-minipage-embedded {
    margin: 0.75rem 0;
}

.inline-minipage-embedded > .inline-minipage-panel {
    max-height: none;
    margin-top: 0;
    overflow: visible;
    opacity: 1;
    transition: none;
}

.inline-minipage-card {
    display: block;
    border: 1px solid rgba(91, 109, 138, 0.18);
    border-radius: 16px;
    background: rgba(245, 248, 252, 0.92);
    padding: 16px 18px;
    box-shadow: 0 10px 24px rgba(27, 49, 88, 0.08);
}

.inline-minipage-title {
    display: block;
    margin-bottom: 10px;
    color: var(--color-heading);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
}

.inline-minipage-body {
    display: block;
}

.inline-minipage-body > :first-child {
    margin-top: 0;
}

.inline-minipage-body > :last-child {
    margin-bottom: 0;
}

.exam-prefix-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.attenuated {
    color: #7e8aa2;
    font-weight: 500;
}

@media (max-width: 860px) {
    .exam-constants-sections-secondary {
        columns: 1;
    }

    .exam-prefix-grid {
        grid-template-columns: 1fr;
    }
}

.exam-constants-sections-secondary .exam-constants-section {
    margin-bottom: 14px;
}

.lesson-summary-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.lesson-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lesson-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lesson-queue-debug {
    min-width: 0;
    max-width: 100%;
    padding: 14px 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: #fbfcfe;
}

.lesson-queue-debug p:last-child {
    margin-bottom: 0;
}

.debug-card {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    contain: inline-size;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px dashed rgba(95, 111, 134, 0.42);
    border-radius: var(--radius-sm);
    background: #fbfcfe;
}

.debug-card > :last-child {
    margin-bottom: 0;
}

.debug-step-progress {
    margin: 10px 0 14px;
}

.debug-card-pre {
    max-width: 100%;
    overflow: auto;
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(95, 111, 134, 0.18);
    color: var(--color-text);
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.practice-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 18px 0 0;
}

.practice-footer-links .inline-minipage-reference {
    margin: 0;
}

.top-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    text-align: left;
}

.top-panel-main {
    min-width: 0;
}

.top-panel-actions {
    display: grid;
    gap: 8px;
}

.top-panel-actions-4 {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    width: 292px;
}

.top-panel-actions-5 {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
}

.section-link-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-heading);
    font-weight: 600;
    text-align: center;
}

.material-detail-card {
    display: grid;
    gap: 14px;
}

.material-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.material-detail-title {
    flex: 1 1 auto;
    min-width: 0;
}

.theory-step-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.practice-progress-reset-form {
    margin: 0;
}

.practice-feed-progress {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}

.practice-feed-total {
    --progress: 0%;
    --last-progress: 0%;
    display: grid;
    grid-template-columns: minmax(120px, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.practice-feed-goals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 6px;
}

.practice-feed-goal {
    --progress: 0%;
    --last-progress: 0%;
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 30px;
    padding: 4px 8px 4px 5px;
    border: 1px solid #c6d0ca;
    border-radius: 999px;
    background: #fbfcfb;
    color: #33493a;
}

.practice-feed-goal-gauge {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: conic-gradient(
        #6cae7d 0 var(--progress),
        #e2e8e4 var(--progress) 100%
    );
}

.practice-feed-goal.is-last-solved .practice-feed-goal-gauge {
    background: conic-gradient(
        #6cae7d 0 calc(var(--progress) - var(--last-progress)),
        #30ff20 calc(var(--progress) - var(--last-progress)) var(--progress),
        #e2e8e4 var(--progress) 100%
    );
}

.practice-feed-goal.is-last-skip .practice-feed-goal-gauge {
    background: conic-gradient(
        #6cae7d 0 var(--progress),
        #db7777 var(--progress) calc(var(--progress) + var(--last-progress)),
        #e2e8e4 calc(var(--progress) + var(--last-progress)) 100%
    );
}

.practice-feed-goal-gauge::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fbfcfb;
}

.practice-feed-goal.is-complete .practice-feed-goal-gauge,
.practice-feed-goal.is-failed .practice-feed-goal-gauge {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
}

.practice-feed-goal.is-complete .practice-feed-goal-gauge {
    background: #4e9b65;
}

.practice-feed-goal.is-failed .practice-feed-goal-gauge {
    background: #c84f57;
}

.practice-feed-goal.is-complete .practice-feed-goal-gauge::before,
.practice-feed-goal.is-failed .practice-feed-goal-gauge::before {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ffffff;
    line-height: 1;
}

.practice-feed-goal.is-complete .practice-feed-goal-gauge::before {
    content: "\2713";
}

.practice-feed-goal.is-failed .practice-feed-goal-gauge::before {
    content: "\00D7";
    font-size: 1rem;
}

.practice-feed-goal.is-negative {
    border-color: #d68b8b;
    background: #fffafa;
    color: #8a3737;
}

.practice-feed-goal.is-negative.is-last-skip .practice-feed-goal-gauge {
    background: conic-gradient(
        #db7777 0 var(--last-progress),
        #eadede var(--last-progress) 100%
    );
}

.practice-feed-goal.is-failed .practice-feed-goal-gauge {
    background: #c84f57;
}

.practice-feed-goal-label {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.practice-feed-progress-track {
    position: relative;
    display: block;
    height: 6px;
    overflow: hidden;
    border: 1px solid rgba(72, 133, 91, 0.32);
    border-radius: 999px;
    background: #edf5ef;
}

.practice-feed-progress-fill,
.practice-feed-progress-last {
    position: absolute;
    top: 0;
    bottom: 0;
}

.practice-feed-progress-fill {
    left: 0;
    width: var(--progress);
    background: #6cae7d;
}

.practice-feed-progress-last {
    width: var(--last-progress);
}

.is-last-solved .practice-feed-progress-last {
    left: max(0%, calc(var(--progress) - var(--last-progress)));
    background: #30ff20;
}

.is-last-skip .practice-feed-progress-last {
    left: var(--progress);
    background: #db7777;
}

.practice-feed-goal.is-negative .practice-feed-progress-track {
    border-color: rgba(181, 73, 73, 0.5);
    background: #fbeeee;
}
.theory-step-reset-progress {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid #bac6d8;
    border-radius: 999px;
    background: #f8fbff;
    color: #2d3a53;
    font-size: 0;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(15, 23, 40, 0.08);
}

.theory-step-reset-progress::before {
    content: "\27F2";
    font-size: 1.08rem;
    line-height: 1;
    color: currentColor;
    transform: translateX(-1px);
}

.theory-step-reset-progress::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 2;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 6px 9px;
    border: 1px solid #5b0000;
    border-radius: 8px;
    background: #8b0000;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.theory-step-reset-progress:hover,
.theory-step-reset-progress:focus-visible {
    border-color: #8aa0bf;
    background: #eef4ff;
    color: #18243a;
    transform: none;
}

.theory-step-reset-progress:hover::after,
.theory-step-reset-progress:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.theory-step-summary-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    border: 1px solid #bac6d8;
    border-radius: 999px;
    background: #f8fbff;
    color: #2d3a53;
    box-shadow: 0 1px 3px rgba(15, 23, 40, 0.08);
}

.theory-step-summary-link::before {
    content: "\270E";
    font-size: 1rem;
    line-height: 1;
    transform: rotate(-12deg);
}

.theory-step-summary-link::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 96;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.theory-step-summary-link:hover,
.theory-step-summary-link:focus-visible {
    border-color: #8aa0bf;
    background: #eef4ff;
    color: #18243a;
}

.theory-step-summary-link:hover::after,
.theory-step-summary-link:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.theory-summary-page {
    max-width: 1040px;
    margin: 0 auto;
    gap: 12px;
}

.theory-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    border-top: 4px solid var(--color-link);
}

.theory-summary-kicker,
.theory-summary-step-kicker {
    margin: 0 0 5px;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.theory-summary-header h1,
.theory-summary-step h2 {
    margin: 0;
}

.theory-summary-header .lead {
    max-width: 76ch;
    margin-bottom: 0;
}

.theory-summary-open-lesson {
    flex: 0 0 auto;
    min-height: 44px;
    padding-right: 22px;
    padding-left: 22px;
    font-weight: 400;
    box-shadow: 0 6px 16px rgba(31, 111, 235, 0.2);
}

.theory-summary-contents h2 {
    margin: 0 0 9px;
    font-size: 1.05rem;
    font-family: var(--font-sans);
    font-weight: 600;
}

.theory-summary-contents {
    padding: 15px 18px;
}

.theory-summary-contents-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
}

.theory-summary-contents h3 {
    margin: 0 0 3px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.theory-summary-contents ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.theory-summary-contents-rows {
    display: grid;
}

.theory-summary-contents-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    min-height: 25px;
}

.theory-summary-contents-row > div {
    min-width: 0;
}

.theory-summary-contents-row.is-control-heading {
    min-height: 0;
}

.theory-summary-contents-row.is-control-heading > div:last-child {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(95, 111, 134, 0.2);
}

.theory-summary-control-heading {
    display: block;
    padding: 0 4px 2px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.025em;
}

.theory-summary-content-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    min-height: 25px;
    padding: 1px 4px;
    border-radius: 6px;
    color: var(--color-heading);
    font-size: 0.89rem;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
}

.theory-summary-content-link:hover,
.theory-summary-content-link:focus-visible {
    background: var(--color-surface-muted);
}

.theory-summary-step-number {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(31, 111, 235, 0.11);
    color: var(--color-link);
    font-size: 0.69rem;
    font-weight: 650;
}

.theory-summary-steps {
    display: grid;
    gap: 9px;
}

.theory-summary-step {
    display: grid;
    gap: 7px;
    padding: 15px 18px;
}

.theory-summary-step-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.theory-summary-step-heading h2 a {
    color: inherit;
}

.theory-summary-step-heading h2 {
    font-size: 1.12rem;
    font-weight: 650;
}

.theory-summary-step .theory-summary-step-kicker {
    margin-bottom: 2px;
    font-size: 0.69rem;
    font-weight: 650;
}

.theory-summary-step-text {
    font-size: 0.93rem;
    line-height: 1.42;
}

.theory-summary-step-text > :first-child,
.theory-summary-step-text > :last-child {
    margin-top: 0;
    margin-bottom: 0;
}

.theory-summary-media,
.theory-summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.theory-summary-media-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(95, 111, 134, 0.28);
    border-radius: 7px;
    background: #f5f8fc;
    color: #2d3a53;
    font-size: 0.8rem;
    font-weight: 700;
}

.theory-summary-media-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    z-index: 98;
    width: max-content;
    max-width: min(240px, calc(100vw - 32px));
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--color-heading);
    box-shadow: 0 10px 24px rgba(15, 23, 40, 0.2);
    color: #ffffff;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.theory-summary-media-icon:hover::after,
.theory-summary-media-icon:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.theory-summary-media-icon.is-animation {
    color: #2d3a53;
}

.theory-summary-media-icon.is-applet {
    color: #2d3a53;
    font-size: 0.92rem;
}

.theory-summary-step-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 18px;
    min-width: 0;
}

.theory-summary-bound-exercises,
.theory-summary-lesson-exercises {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 10px;
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.3;
}

.theory-summary-bound-exercises a,
.theory-summary-lesson-exercises a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
}

.theory-summary-bound-exercises a:hover,
.theory-summary-bound-exercises a:focus-visible,
.theory-summary-lesson-exercises a:hover,
.theory-summary-lesson-exercises a:focus-visible {
    color: var(--color-link-hover);
}

.theory-summary-bound-number {
    color: var(--color-link);
    font-size: 0.68rem;
    font-weight: 650;
}

.theory-summary-lesson-exercises {
    padding: 2px 18px 4px;
}

.theory-summary-lesson-exercises > span:first-child {
    font-weight: 600;
}

.theory-summary-footer-action {
    display: flex;
    justify-content: center;
    padding: 4px 0 14px;
}

@media (max-width: 720px) {
    .theory-summary-header {
        display: grid;
    }

    .theory-summary-open-lesson {
        justify-self: stretch;
        text-align: center;
    }

    .theory-summary-step-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .theory-summary-bound-exercises {
        margin-left: 0;
        justify-content: flex-start;
    }
}

.theory-reset-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 40, 0.44);
}

.theory-reset-confirm-dialog {
    width: min(100%, 560px);
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 38px rgba(15, 23, 40, 0.24);
    display: grid;
    gap: 12px;
}

.theory-reset-confirm-text {
    margin: 0;
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.35;
}

.theory-reset-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.theory-reset-confirm-actions .button {
    min-height: 38px;
    min-width: 240px;
    padding: 0 14px;
    font-size: 0.86rem;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.theory-reset-confirm-cancel {
    border-color: transparent;
    background: var(--color-link);
    color: #ffffff;
}

.theory-reset-confirm-cancel:hover,
.theory-reset-confirm-cancel:focus-visible {
    border-color: transparent;
    background: var(--color-link-hover);
    color: #ffffff;
}

.theory-reset-confirm-accept {
    border-color: var(--color-border);
    background: #ffffff;
    color: var(--color-heading);
}

.theory-reset-confirm-accept:hover,
.theory-reset-confirm-accept:focus-visible {
    border-color: #a5312b;
    background: #c33a34;
    color: #ffffff;
}

.theory-reset-confirm-shortcut {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(86, 96, 118, 0.66);
}

.theory-reset-confirm-cancel .theory-reset-confirm-shortcut {
    color: rgba(232, 239, 252, 0.92);
}

.theory-reset-confirm-accept:hover .theory-reset-confirm-shortcut,
.theory-reset-confirm-accept:focus-visible .theory-reset-confirm-shortcut {
    color: rgba(248, 240, 240, 0.9);
}

.theory-step-markers {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.theory-step-marker {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background: transparent;
    position: relative;
    text-indent: -9999px;
    overflow: visible;
    outline: none;
}

.theory-step-marker-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(420px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-indent: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 90;
}

.theory-step-marker-tooltip mjx-container {
    display: inline-block !important;
    margin: 0 0.08em !important;
    color: inherit;
    font-size: 1em !important;
}

.theory-step-marker.is-current {
    flex: 1 1 0;
    height: 18px;
}

.theory-step-marker.is-current::before {
    height: 9px;
}

.theory-step-marker::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    box-sizing: border-box;
    border: 0 solid transparent;
    border-radius: 999px;
    background-color: #c4d8fb;
    transform: translateY(-50%);
    transform-origin: center;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.theory-step-marker.is-theory {
    border: none;
}

.theory-step-marker.is-theory::before {
    border-width: 2px;
    border-color: #8eaee6;
}

.theory-step-marker.is-exercise {
    border: none;
}

.theory-step-marker.is-lesson-control {
    border: none;
}

.theory-step-marker.is-lesson-control::before {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(20, 29, 47, 0.18) 0 3px,
        rgba(20, 29, 47, 0.04) 3px 6px
    );
}

.theory-step-marker:hover,
.theory-step-marker:focus-visible {
    outline: none;
}

.theory-step-marker:hover::before,
.theory-step-marker:focus-visible::before {
    transform: translateY(-50%) scale(1.08);
    filter: brightness(1.1) saturate(1.1);
}

.theory-step-marker:hover .theory-step-marker-tooltip,
.theory-step-marker:focus-visible .theory-step-marker-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.theory-step-marker.is-status-other {
    background-color: transparent;
}

.theory-step-marker.is-status-solved {
    background-color: transparent;
}

.theory-step-marker.is-status-failed {
    background-color: transparent;
}

.theory-step-marker.is-status-other::before {
    background-color: #c4d8fb;
}

.theory-step-marker.is-status-solved::before {
    background-color: #c8eecf;
}

.theory-step-marker.is-status-failed::before {
    background-color: #f7c8c2;
}

.theory-step-marker.is-theory.is-status-other {
    border-color: transparent;
}

.theory-step-marker.is-theory.is-status-solved {
    border-color: transparent;
}

.theory-step-marker.is-theory.is-status-failed {
    border-color: transparent;
}

.theory-step-marker.is-theory.is-status-other::before {
    border-color: #8eaee6;
}

.theory-step-marker.is-theory.is-status-solved::before {
    border-color: #86c793;
}

.theory-step-marker.is-theory.is-status-failed::before {
    border-color: #dc9188;
}

.theory-step-marker.is-current.is-status-other {
    background-color: transparent;
}

.theory-step-marker.is-current.is-status-solved {
    background-color: transparent;
}

.theory-step-marker.is-current.is-status-failed {
    background-color: transparent;
}

.theory-step-marker.is-current.is-status-other::before {
    background-color: #185cc6;
}

.theory-step-marker.is-current.is-status-solved::before {
    background-color: #287f39;
}

.theory-step-marker.is-current.is-status-failed::before {
    background-color: #c33a34;
}

.theory-step-marker.is-current.is-theory.is-status-other {
    border-color: transparent;
}

.theory-step-marker.is-current.is-theory.is-status-solved {
    border-color: transparent;
}

.theory-step-marker.is-current.is-theory.is-status-failed {
    border-color: transparent;
}

.theory-step-marker.is-current.is-theory.is-status-other::before {
    border-color: #0f4cae;
}

.theory-step-marker.is-current.is-theory.is-status-solved::before {
    border-color: #216f31;
}

.theory-step-marker.is-current.is-theory.is-status-failed::before {
    border-color: #a5312b;
}

.exercise-title {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
    transform: translateY(2px);
}

.exercise-link-copy {
    position: relative;
    min-height: auto;
    display: inline;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-link);
    font: inherit;
    font-weight: 800;
    transform: none;
    white-space: nowrap;
}

.exercise-title-text {
    display: inline;
}

.exercise-link-copy::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: 230px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.exercise-link-copy:hover,
.exercise-link-copy:focus-visible {
    background: none;
    color: var(--color-link-hover);
    transform: none;
}

.exercise-link-copy:hover::after,
.exercise-link-copy:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-link-hover);
    padding: 0 10px;
}

.level-badge-icon {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.level-badge-bar {
    width: 16px;
    height: 6px;
    background: currentColor;
}

.level-badge-plate-group {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.level-badge-plate {
    width: 2.4px;
    height: 14px;
    border-radius: 999px;
    background: currentColor;
}

.level-badge-plate-group.is-left .level-badge-plate:first-child,
.level-badge-plate-group.is-right .level-badge-plate:last-child {
    transform: scaleY(0.85);
}

.level-badge.is-1 .level-badge-plate {
    width: 2.4px;
    height: 14px;
}

.level-badge.is-2 .level-badge-plate {
    width: 3px;
    height: 18px;
}

.level-badge.is-3 .level-badge-plate {
    width: 3.6px;
    height: 20px;
}

.level-badge.is-4 .level-badge-plate {
    width: 4.2px;
    height: 26px;
}

.level-badge.is-5 .level-badge-plate {
    width: 4.8px;
    height: 30px;
}

.level-badge.is-6 .level-badge-plate {
    width: 5.4px;
    height: 34px;
}

.material-detail-content {
    display: grid;
    gap: 12px;
}

.material-detail-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.applet-report-panel {
    margin-top: 10px;
}

.applet-report-feedback:empty {
    display: none;
}

.material-rating-summary {
    font-size: 0.92rem;
}

.section-link {
    color: inherit;
}

.section-link.is-active,
.section-link:hover,
.section-link:focus-visible {
    border-color: var(--color-link);
}

.section-link.is-active {
    background: var(--color-highlight);
    color: var(--color-link-hover);
    box-shadow: inset 0 0 0 1px rgba(47, 114, 185, 0.08);
}

.inline-copy {
    display: inline;
    min-height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-link);
    font-weight: 700;
}

.inline-copy:hover,
.inline-copy:focus-visible {
    background: none;
    color: var(--color-link-hover);
    transform: none;
}

@media (max-width: 960px) {
    .site-header-inner {
        justify-items: start;
        gap: 12px;
        min-height: auto;
        padding: 12px 0;
    }

    .nav,
    .account-slot {
        justify-content: flex-start;
    }

    .nav {
        gap: 4px;
    }

    .nav-link,
    .account-pill {
        min-height: 30px;
        padding: 5px 8px;
        font-size: 0.8rem;
    }

    .nav-dropdown {
        width: fit-content;
        min-width: 0;
        max-width: calc(100vw - 32px);
        padding: 8px;
    }

    .nav-dropdown a {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .section-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-panel {
        grid-template-columns: 3fr 2fr;
    }

}

@media (max-width: 760px) {
    .brand {
        display: none;
    }

    .account-slot-anon {
        display: none;
    }

    .site-main {
        padding-top: 28px;
    }

    .hero-panel,
    .card {
        padding: 18px;
    }

    .section-grid-2,
    .section-grid-3,
    .section-grid-4,
    .filters,
    .auth-grid .form-grid,
    .form-notes,
    .top-panel-actions-4,
    .top-panel-actions-5 {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .book-frame {
        min-height: 420px;
    }

    .profile-summary-grid {
        grid-template-columns: 1fr;
    }

    .learning-tree-details-top {
        grid-template-columns: 1fr;
    }

    .learning-tree-node {
        width: 152px;
        min-height: 96px;
        padding: 12px;
    }

    .practice-input-row {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .practice-input {
        flex: 1 1 100px;
        min-width: 100px;
    }

    .practice-actions {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .practice-actions.no-hint {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .matching-slot-dropzone {
        min-height: 46px;
    }

    .lesson-actions-row.is-theory-step {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .lesson-actions-row.is-theory-step .practice-question-button,
    .lesson-actions-row.is-theory-step .practice-report-button {
        width: auto;
        min-width: 38px;
    }

    .practice-hint-button,
    .practice-side-link,
    .practice-report-button {
        min-width: 38px;
        padding: 0;
    }

    .material-title-line {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .lesson-meta-row-inline {
        width: 100%;
        max-width: none;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow: visible;
    }

    .nav-dropdown {
        position: absolute;
        top: calc(100% + 2px);
        left: 0;
        display: none;
        width: fit-content;
        min-width: 0;
        max-width: calc(100vw - 32px);
        padding: 6px;
        margin-top: 8px;
        box-shadow: 0 16px 32px var(--color-shadow);
    }

    .nav-dropdown a {
        padding: 6px 8px;
        font-size: 0.74rem;
    }

    .nav {
        flex-wrap: wrap;
    }

    .nav-item-dropdown.is-open .nav-dropdown,
    .nav-item-dropdown:focus-within .nav-dropdown {
        display: inline-grid;
    }
}

@media (max-width: 720px) {
    .material-status-stack {
        flex-direction: column;
        align-items: center;
        width: 60px;
        min-width: 60px;
        gap: 8px;
    }

    .material-status-badge {
        min-width: 60px;
        gap: 4px;
    }

    .material-status-circle {
        width: 44px;
        height: 44px;
    }

    .material-status-circle svg {
        width: 20px;
        height: 20px;
    }

    .material-status-value {
        font-size: 0.72rem;
    }

    .theory-step-markers {
        gap: 6px;
    }
}


.attempt-history-page {
    max-width: 980px;
    margin: 0 auto;
}

.attempt-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.attempt-history-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.attempt-history-list {
    display: grid;
    gap: 1rem;
}

.attempt-history-item {
    border: 1px solid rgba(32, 61, 104, 0.14);
    border-radius: 18px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.94);
}

.attempt-history-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.attempt-history-item-head h2 {
    margin: 0.2rem 0 0;
    font-size: 1.1rem;
}

.attempt-history-meta,
.attempt-history-label {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7c96;
}

.attempt-history-side {
    text-align: right;
}

.attempt-history-side p {
    margin: 0;
}

.attempt-history-verdict {
    margin-top: 0.3rem !important;
    font-weight: 700;
    color: #203d68;
}

.attempt-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem 1.1rem;
}

.attempt-history-grid p {
    margin: 0.18rem 0 0;
}

.attempt-history-feedback {
    margin: 1rem 0 0;
    font-weight: 600;
}

.attempt-history-fields {
    margin-top: 1rem;
}

.attempt-history-fields-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.6rem;
}

.attempt-history-fields-list .attempt-history-field {
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
    background: rgba(240, 245, 252, 0.9);
}

.attempt-history-fields-list .attempt-history-field p {
    margin: 0.2rem 0;
}

.attempt-history-raw {
    margin-top: 1rem;
}

.attempt-history-raw pre {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 760px) {
    .attempt-history-header,
    .attempt-history-item-head {
        flex-direction: column;
    }

    .attempt-history-side {
        text-align: left;
    }
}


.debug-card .lesson-debug-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
}

.debug-card .lesson-debug-metrics p {
    margin: 0;
}

.attempt-history-page {
    max-width: 1040px;
    margin: 0 auto;
}

.attempt-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.4rem;
}

.attempt-history-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.attempt-history-actions > * {
    flex: 0 1 auto;
}

.attempt-history-highlight-switch {
    display: inline-flex;
    align-items: center;
}

.attempt-history-mode-switch,
.attempt-history-highlight-switch {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: rgba(233, 240, 250, 0.96);
    border: 1px solid rgba(32, 61, 104, 0.12);
    gap: 4px;
}

.attempt-history-mode-button {
    border: none;
    background: transparent;
    color: #58708f;
    padding: 8px 14px;
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.attempt-history-mode-switch .attempt-history-mode-button,
.attempt-history-highlight-switch .attempt-history-mode-button {
    min-width: 8.75rem;
    justify-content: center;
}

.attempt-history-mode-button.is-active {
    background: #ffffff;
    color: #183f73;
    box-shadow: 0 1px 3px rgba(20, 37, 64, 0.12);
}

.attempt-history-list {
    display: grid;
    gap: 0.95rem;
}

.attempt-history-item {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 36px rgba(26, 44, 79, 0.08);
    overflow: hidden;
    border: 2px solid transparent;
}

.attempt-history-tone-correct {
    border-color: #4da96a;
}

.attempt-history-tone-almost {
    border-color: #e28b2f;
}

.attempt-history-tone-partial {
    border-color: #e2c13a;
}

.attempt-history-tone-wrong {
    border-color: #d5564e;
}

.attempt-history-tone-neutral {
    border-color: #91a6bf;
}

.attempt-history-item.is-uncounted {
    border-style: dashed;
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.42) 0,
            rgba(255, 255, 255, 0.42) 10px,
            rgba(255, 255, 255, 0.1) 10px,
            rgba(255, 255, 255, 0.1) 20px
        );
}

.attempt-history-item.attempt-history-tone-correct.is-uncounted {
    border-color: #4da96a;
}

.attempt-history-item.attempt-history-tone-almost.is-uncounted {
    border-color: #e28b2f;
}

.attempt-history-item.attempt-history-tone-partial.is-uncounted {
    border-color: #e2c13a;
}

.attempt-history-item.attempt-history-tone-wrong.is-uncounted {
    border-color: #d5564e;
}

.attempt-history-item.attempt-history-tone-neutral.is-uncounted {
    border-color: #91a6bf;
}

.attempt-history-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    background: rgba(247, 250, 254, 0.98);
}

.attempt-history-summary::-webkit-details-marker {
    display: none;
}

.attempt-history-summary-main,
.attempt-history-summary-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 0.9rem;
    min-width: 0;
}

.attempt-history-summary-user {
    font-weight: 700;
    color: #172f55;
}

.attempt-history-summary-time {
    color: #6b7c96;
}

.attempt-history-summary-verdict {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #183f73;
    font-weight: 700;
}

.attempt-history-summary-meta {
    justify-content: flex-end;
    font-size: 0.92rem;
    color: #4f627f;
}

.attempt-history-body {
    padding: 1rem 1.1rem 1.1rem;
}

.attempt-history-body-main {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(260px, 1fr);
    gap: 1rem;
    align-items: start;
}

.attempt-history-primary,
.attempt-history-preview-card {
    border-radius: 18px;
    background: rgba(248, 251, 255, 0.9);
    padding: 0.95rem 1rem;
}

.attempt-history-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7085a3;
}

.attempt-history-answer {
    font-size: 1.08rem;
    line-height: 1.45;
    color: #162c4d;
    word-break: break-word;
}

.attempt-history-feedback {
    margin: 0.7rem 0 0;
    color: #304663;
    font-weight: 600;
}

.attempt-history-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 0.7rem;
}

.attempt-history-preview-grid.is-single {
    grid-template-columns: 1fr;
}

.attempt-history-preview-item {
    position: relative;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(32, 61, 104, 0.1);
    background: #ffffff;
    color: #18304f;
}

.attempt-history-preview-item-correct {
    background: rgba(210, 242, 216, 0.96);
    border-color: rgba(67, 143, 86, 0.42);
}

.attempt-history-preview-item-almost {
    background: rgba(255, 227, 196, 0.96);
    border-color: rgba(203, 122, 36, 0.4);
}

.attempt-history-preview-item-partial {
    background: rgba(252, 245, 184, 0.96);
    border-color: rgba(188, 160, 26, 0.42);
}

.attempt-history-preview-item-wrong {
    background: rgba(251, 214, 208, 0.96);
    border-color: rgba(198, 67, 57, 0.4);
}

.attempt-history-preview-item-neutral {
    background: rgba(228, 236, 246, 0.96);
    border-color: rgba(110, 132, 164, 0.38);
}

.attempt-history-preview-index {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: #4f627f;
    font-size: 0.76rem;
    font-weight: 700;
}

.attempt-history-preview-answer {
    font-size: 0.98rem;
    line-height: 1.35;
    word-break: break-word;
}

.attempt-history-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.95rem;
    font-size: 0.88rem;
    color: #5b6f8c;
}

.attempt-history-raw {
    margin-top: 0.9rem;
}

.attempt-history-raw summary {
    cursor: pointer;
    color: #5f7798;
}

.attempt-history-raw pre {
    margin: 0.7rem 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    background: rgba(242, 247, 252, 0.95);
    border: 1px solid rgba(32, 61, 104, 0.08);
}

[data-view-mode="compact"] .attempt-history-body {
    display: none;
}

[data-view-mode="compact"] .attempt-history-item[open] .attempt-history-body {
    display: block;
}

@media (max-width: 860px) {
    .attempt-history-header,
    .attempt-history-summary,
    .attempt-history-body-main {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .attempt-history-actions,
    .attempt-history-summary-meta {
        justify-content: flex-start;
    }
}


.attempt-history-sort-switch {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.attempt-history-sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 8.75rem;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(32, 61, 104, 0.12);
    background: rgba(247, 250, 254, 0.98);
    color: #5a7190;
    font-size: 0.9rem;
    font-weight: 700;
}

.attempt-history-sort-button:hover,
.attempt-history-sort-button:focus-visible,
.attempt-history-sort-button.is-active {
    color: #183f73;
    background: #ffffff;
    border-color: rgba(24, 63, 115, 0.18);
}

.attempt-history-actions > .button {
    min-width: 8.75rem;
    justify-content: center;
}

.attempt-history-summary {
    cursor: pointer;
}

.attempt-history-summary-kind {
    color: #7488a3;
    font-size: 0.85rem;
    font-weight: 600;
}

.attempt-history-quality-badge,
.attempt-history-skill-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
}

.attempt-history-quality-badge {
    background: rgba(255, 255, 255, 0.9);
    font-weight: 800;
}

.attempt-history-skill-badge {
    gap: 0.32rem;
    background: rgba(236, 242, 250, 0.95);
    color: #173457;
}

.skill-metric {
    position: relative;
    cursor: help;
}

.skill-metric[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: min(340px, calc(100vw - 32px));
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--color-heading);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.skill-metric[data-tooltip]:hover::after,
.skill-metric[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.attempt-history-skill-label {
    font-weight: 500;
    color: #4f6888;
}

.attempt-history-skill-value,
.attempt-history-skill-delta {
    font-weight: 800;
}

.attempt-history-skill-value {
    color: #173457;
}

.attempt-history-skill-delta.is-positive {
    color: #287f39;
}

.attempt-history-skill-delta.is-negative {
    color: #c33a34;
}

.attempt-history-skill-delta.is-neutral {
    color: #6d8099;
}

.attempt-history-tone-pill-correct {
    color: #287f39;
}

.attempt-history-tone-pill-almost {
    color: #be6f18;
}

.attempt-history-tone-pill-partial {
    color: #a08d1a;
}

.attempt-history-tone-pill-wrong {
    color: #c33a34;
}

.attempt-history-tone-pill-neutral {
    color: #64809f;
}

.attempt-history-item.is-uncounted .attempt-history-quality-badge {
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.5) 0,
            rgba(255, 255, 255, 0.5) 8px,
            rgba(255, 255, 255, 0.2) 8px,
            rgba(255, 255, 255, 0.2) 16px
        );
}

.attempt-history-summary-main {
    gap: 0.48rem 0.72rem;
}

.attempt-history-summary-meta {
    gap: 0.4rem 0.7rem;
}

.attempt-history-body {
    padding-top: 0.95rem;
}

.attempt-history-preview-card {
    padding: 0.7rem 0.75rem;
}

.attempt-history-miniature {
    width: 100%;
}

.attempt-history-miniature .practice-card {
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    box-shadow: none;
}

.attempt-history-miniature .practice-options,
.attempt-history-miniature .practice-inline-segments,
.attempt-history-miniature .practice-numeric-multiple-list,
.attempt-history-miniature .matching-layout,
.attempt-history-miniature .connection-layout {
    gap: 0.55rem;
}

.attempt-history-miniature .choice-card,
.attempt-history-miniature .matching-card,
.attempt-history-miniature .ordering-card,
.attempt-history-miniature .connection-card,
.attempt-history-miniature .gaps-slot {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
}

.attempt-history-miniature .practice-input {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.95rem;
}

.attempt-history-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
}

.attempt-history-field-correct {
    border-color: rgba(40, 127, 57, 0.72);
    box-shadow: inset 0 0 0 1px rgba(40, 127, 57, 0.2);
}

.attempt-history-field-wrong,
.attempt-history-field-almost,
.attempt-history-field-partial {
    border-color: rgba(195, 58, 52, 0.72);
    box-shadow: inset 0 0 0 1px rgba(195, 58, 52, 0.16);
}

.attempt-history-expected-answer {
    display: none;
    align-items: center;
    margin-left: 0.38rem;
    color: #7a8798;
    font-size: 0.86rem;
    line-height: 1.25;
    vertical-align: middle;
}

.attempt-history-expected-answer mjx-container[jax="CHTML"]:not([display="true"]) {
    margin: 0 0.04em;
    vertical-align: middle;
}

.attempt-history-miniature .practice-units,
.attempt-history-miniature .practice-format-text,
.attempt-history-miniature .practice-inline-text,
.attempt-history-miniature .matching-slot-label,
.attempt-history-miniature .matching-slot-title,
.attempt-history-miniature .ordering-anchor,
.attempt-history-miniature .connection-deck-title,
.attempt-history-miniature .practice-numeric-multiple-prompt {
    font-size: 0.92rem;
}

.attempt-history-miniature .practice-input[readonly],
.attempt-history-miniature .choice-card[disabled],
.attempt-history-miniature .matching-card[disabled],
.attempt-history-miniature .ordering-card[disabled],
.attempt-history-miniature .connection-card[disabled],
.attempt-history-miniature .gaps-slot[disabled] {
    opacity: 1;
    cursor: default;
}

.attempt-history-miniature mjx-container[jax="CHTML"]:not([display="true"]),
.attempt-history-expected-answer mjx-container[jax="CHTML"]:not([display="true"]) {
    vertical-align: middle !important;
}

.attempt-history-miniature mjx-mtext,
.attempt-history-miniature mjx-text,
.attempt-history-expected-answer mjx-mtext,
.attempt-history-expected-answer mjx-text {
    vertical-align: baseline;
}

.attempt-history-miniature .matching-slot-dropzone,
.attempt-history-miniature .matching-slot-dropzone-multi {
    min-height: 54px;
}

.attempt-history-gaps-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.attempt-history-gaps-slots .gaps-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.attempt-history-gaps-slots .gaps-slot-content {
    display: inline-flex;
    align-items: center;
}

.attempt-history-gaps-body {
    margin-bottom: 0.75rem;
}

.attempt-history-gaps-body .gaps-slot,
.attempt-history-gaps-body .inline-gaps-slot {
    opacity: 1;
    vertical-align: middle;
    pointer-events: none;
}

.attempt-history-gaps-body .inline-gaps-slot {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0 0.18em;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.attempt-history-gaps-body .inline-gaps-slot-choice::after {
    display: none;
}


.attempt-history-connection-preview .connection-links {
    display: block;
}

.attempt-history-connection-preview {
    position: relative;
}

.attempt-history-connection-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
}

.attempt-history-connection-preview .connection-decks {
    position: relative;
    z-index: 0;
}

.attempt-history-connection-links .connection-link {
    fill: none;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.94;
}

.attempt-history-connection-links .connection-link.is-correct {
    stroke: rgba(40, 127, 57, 0.84);
    filter: drop-shadow(0 0 4px rgba(40, 127, 57, 0.18));
}

.attempt-history-connection-links .connection-link.is-wrong {
    stroke: rgba(195, 58, 52, 0.84);
    filter: drop-shadow(0 0 4px rgba(195, 58, 52, 0.18));
}

.attempt-history-connection-links .connection-link.is-expected {
    stroke: rgba(124, 132, 145, 0.7);
    stroke-dasharray: 5 5;
    filter: none;
}

.attempt-history-connection-card-group-0 {
    box-shadow: inset 0 0 0 1px rgba(217, 72, 65, 0.16);
}

.attempt-history-connection-card-group-1 {
    box-shadow: inset 0 0 0 1px rgba(31, 111, 235, 0.16);
}

.attempt-history-connection-card-group-2 {
    box-shadow: inset 0 0 0 1px rgba(47, 158, 68, 0.16);
}

.attempt-history-connection-card-group-3 {
    box-shadow: inset 0 0 0 1px rgba(211, 139, 24, 0.16);
}

.attempt-history-connection-card-group-4 {
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.16);
}

.attempt-history-connection-card-group-5 {
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16);
}

.attempt-history-connection-preview .connection-card {
    position: relative;
    z-index: 4;
    isolation: isolate;
}

.attempt-history-connection-preview .connection-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(95, 111, 134, 0.34);
    border-radius: inherit;
    background: #ffffff;
    box-shadow: 0 3px 7px rgba(15, 23, 40, 0.18);
    z-index: -1;
    pointer-events: none;
}

.attempt-history-connection-preview .connection-card.is-choice-correct::before,
.attempt-history-connection-preview .connection-card.is-choice-incorrect::before {
    border-width: 1px;
}

.attempt-history-connection-preview .connection-card.is-choice-correct::before {
    border-color: rgba(40, 127, 57, 0.72);
    box-shadow: inset 0 0 0 1px rgba(40, 127, 57, 0.58), 0 0 8px rgba(40, 127, 57, 0.16), 0 3px 7px rgba(15, 23, 40, 0.18);
}

.attempt-history-connection-preview .connection-card.is-choice-incorrect::before {
    border-color: rgba(195, 58, 52, 0.72);
    box-shadow: inset 0 0 0 1px rgba(195, 58, 52, 0.58), 0 0 8px rgba(195, 58, 52, 0.16), 0 3px 7px rgba(15, 23, 40, 0.18);
}

.attempt-history-meta-line {
    margin-top: 0.8rem;
    gap: 0.45rem 0.85rem;
}

.attempt-history-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.attempt-history-meta-item-label {
    color: #6a7f99;
    font-size: 0.86rem;
}

.attempt-history-meta-item-value {
    font-weight: 800;
}

.attempt-history-meta-item-value.is-positive {
    color: #287f39;
}

.attempt-history-meta-item-value.is-negative {
    color: #c33a34;
}

.attempt-history-meta-item-value.is-warning {
    color: #c33a34;
}

.attempt-history-meta-item-value.is-neutral {
    color: #24476f;
}

.attempt-history-order-expected {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(128, 137, 150, 0.55);
    color: #788595;
    font-size: 0.78rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.attempt-history-choose-correct {
    gap: 0.45rem;
}

.attempt-history-choose-correct-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
    margin-top: 0.3rem;
}

[data-highlight-mode="answer"] .attempt-history-choose-correct .choose-correct-option {
    display: block;
}

[data-highlight-mode="answer"] .attempt-history-choose-correct-state {
    min-width: 0;
    width: 100%;
}

[data-highlight-mode="answer"] .attempt-history-choose-correct-state .attempt-history-expected-answer {
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

[data-view-mode="compact"] .attempt-history-list {
    gap: 0.4rem;
}

[data-view-mode="compact"] .attempt-history-item {
    border-radius: 14px;
}

[data-view-mode="compact"] .attempt-history-summary {
    padding: 0.46rem 0.62rem;
}

[data-view-mode="compact"] .attempt-history-body {
    padding: 0.5rem 0.62rem 0.62rem;
}

[data-view-mode="compact"] .attempt-history-preview-card {
    padding: 0.35rem 0.4rem;
}

[data-view-mode="compact"] .attempt-history-miniature .practice-card {
    padding: 0.5rem 0.56rem;
}

[data-view-mode="compact"] .attempt-history-feedback {
    margin-top: 0.38rem;
    font-size: 0.9rem;
}

[data-view-mode="compact"] .attempt-history-meta-line {
    margin-top: 0.38rem;
    font-size: 0.84rem;
    gap: 0.32rem 0.62rem;
}

[data-view-mode="compact"] .attempt-history-raw {
    margin-top: 0.5rem;
}

[data-view-mode="compact"] .attempt-history-raw pre {
    margin-top: 0.4rem;
    padding: 0.6rem 0.68rem;
}

[data-view-mode="compact"] .attempt-history-list {
    gap: 0.7rem;
}

[data-view-mode="compact"] .attempt-history-summary {
    padding: 0.72rem 0.84rem;
}

[data-view-mode="compact"] .attempt-history-body {
    padding: 0.72rem 0.84rem 0.82rem;
}

[data-view-mode="compact"] .attempt-history-preview-card {
    padding: 0.5rem 0.58rem;
}

[data-view-mode="compact"] .attempt-history-feedback {
    margin-top: 0.48rem;
}

[data-view-mode="compact"] .attempt-history-meta-line {
    margin-top: 0.46rem;
    gap: 0.32rem 0.58rem;
}

[data-view-mode="compact"] .attempt-history-summary-main {
    gap: 0.34rem 0.55rem;
}

[data-view-mode="compact"] .attempt-history-summary-meta {
    gap: 0.28rem 0.5rem;
}

[data-view-mode="compact"] .attempt-history-quality-badge,
[data-view-mode="compact"] .attempt-history-skill-badge,
[data-view-mode="compact"] .attempt-history-sort-button,
[data-view-mode="compact"] .attempt-history-mode-button {
    min-height: 28px;
}

[data-view-mode="compact"] .attempt-history-sort-button,
[data-view-mode="compact"] .attempt-history-mode-switch .attempt-history-mode-button,
[data-view-mode="compact"] .attempt-history-highlight-switch .attempt-history-mode-button,
[data-view-mode="compact"] .attempt-history-actions > .button {
    min-width: 7.7rem;
}

[data-view-mode="compact"] .attempt-history-miniature .choice-card,
[data-view-mode="compact"] .attempt-history-miniature .matching-card,
[data-view-mode="compact"] .attempt-history-miniature .ordering-card,
[data-view-mode="compact"] .attempt-history-miniature .connection-card,
[data-view-mode="compact"] .attempt-history-miniature .gaps-slot {
    min-height: 34px;
    padding: 0.34rem 0.58rem;
}

[data-view-mode="compact"] .attempt-history-miniature .practice-input {
    min-height: 30px;
    padding: 0 8px;
}

[data-view-mode="compact"] .attempt-history-field {
    min-height: 30px;
    padding: 0 8px;
}

[data-highlight-mode="off"] .attempt-history-miniature .choice-card.is-choice-correct,
[data-highlight-mode="off"] .attempt-history-miniature .choice-card.is-choice-incorrect,
[data-highlight-mode="off"] .attempt-history-miniature .matching-card.is-match-correct,
[data-highlight-mode="off"] .attempt-history-miniature .matching-card.is-match-incorrect,
[data-highlight-mode="off"] .attempt-history-miniature .ordering-card.is-ordering-correct,
[data-highlight-mode="off"] .attempt-history-miniature .ordering-card.is-ordering-incorrect,
[data-highlight-mode="off"] .attempt-history-miniature .connection-card.is-choice-correct,
[data-highlight-mode="off"] .attempt-history-miniature .connection-card.is-choice-incorrect,
[data-highlight-mode="off"] .attempt-history-miniature .gaps-slot.is-gap-correct,
[data-highlight-mode="off"] .attempt-history-miniature .gaps-slot.is-gap-incorrect,
[data-highlight-mode="off"] .attempt-history-miniature .practice-input.is-numeric-slot-correct,
[data-highlight-mode="off"] .attempt-history-miniature .practice-input.is-numeric-slot-incorrect,
[data-highlight-mode="off"] .attempt-history-miniature .practice-format-slot.is-numeric-slot-correct,
[data-highlight-mode="off"] .attempt-history-miniature .practice-format-slot.is-numeric-slot-incorrect {
    border-color: var(--color-border);
    background: #ffffff;
    box-shadow: none;
    color: inherit;
}

[data-highlight-mode="off"] .attempt-history-field-correct,
[data-highlight-mode="off"] .attempt-history-field-wrong,
[data-highlight-mode="off"] .attempt-history-field-almost,
[data-highlight-mode="off"] .attempt-history-field-partial {
    border-color: var(--color-border);
    box-shadow: none;
}

[data-highlight-mode="off"] .attempt-history-find-mistakes .find-mistakes-segment.is-find-correct,
[data-highlight-mode="off"] .attempt-history-find-mistakes .find-mistakes-segment.is-find-incorrect,
[data-highlight-mode="off"] .attempt-history-find-mistakes .find-mistakes-segment.is-find-missed,
[data-highlight-mode="errors"] .attempt-history-find-mistakes .find-mistakes-segment.is-find-correct,
[data-highlight-mode="errors"] .attempt-history-find-mistakes .find-mistakes-segment.is-find-missed {
    background-color: transparent;
    box-shadow: none;
}

[data-highlight-mode="off"] .attempt-history-connection-links .connection-link {
    display: none;
}

[data-highlight-mode="off"] .attempt-history-expected-answer,
[data-highlight-mode="errors"] .attempt-history-expected-answer {
    display: none;
}

[data-highlight-mode="answer"] .attempt-history-expected-answer {
    display: inline-flex;
}

[data-highlight-mode="off"] .attempt-history-order-expected,
[data-highlight-mode="errors"] .attempt-history-order-expected {
    display: none;
}

[data-highlight-mode="answer"] .attempt-history-order-expected {
    display: inline-flex;
}

[data-highlight-mode="off"] .attempt-history-miniature .matching-card[data-tooltip]::after,
[data-highlight-mode="errors"] .attempt-history-miniature .matching-card[data-tooltip]::after {
    display: none;
}

[data-highlight-mode="answer"] .attempt-history-miniature .matching-card[data-tooltip] {
    position: relative;
}

[data-highlight-mode="answer"] .attempt-history-miniature .matching-card[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    font-size: 0.76rem;
    line-height: 1.35;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 12;
}

[data-highlight-mode="answer"] .attempt-history-miniature .matching-card[data-tooltip]:hover::after,
[data-highlight-mode="answer"] .attempt-history-miniature .matching-card[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 860px) {
    .attempt-history-sort-switch {
        justify-content: flex-start;
    }

    .attempt-history-sort-button,
    .attempt-history-mode-switch .attempt-history-mode-button,
    .attempt-history-highlight-switch .attempt-history-mode-button,
    .attempt-history-actions > .button {
        min-width: 0;
    }
}

/* Shared control vocabulary: contextual actions, compact pills, and segmented switches. */
.contextual-action {
    min-height: 38px;
    height: 38px;
    padding: 0 14px;
    font-size: 0.86rem;
    line-height: 1;
    white-space: nowrap;
}

.compact-control,
.control-pill {
    min-height: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(32, 61, 104, 0.12);
    border-radius: 999px;
    background: rgba(247, 250, 254, 0.98);
    color: #58708f;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    white-space: nowrap;
}

.compact-control:hover,
.compact-control:focus-visible,
.control-pill:hover,
.control-pill:focus-visible {
    border-color: rgba(24, 63, 115, 0.18);
    background: #ffffff;
    color: #183f73;
    transform: none;
}

.attempt-history-actions > .compact-control {
    border-color: transparent;
    background: var(--color-link);
    color: #ffffff;
}

.attempt-history-actions > .compact-control:hover,
.attempt-history-actions > .compact-control:focus-visible {
    border-color: transparent;
    background: var(--color-link-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

.attempt-history-actions > [data-attempt-history-counted-only-toggle],
.attempt-history-actions > [data-attempt-history-counted-only-toggle]:hover,
.attempt-history-actions > [data-attempt-history-counted-only-toggle]:focus-visible {
    border-color: rgba(32, 61, 104, 0.12);
    background: rgba(247, 250, 254, 0.98);
    color: #58708f;
    transform: none;
}

.attempt-history-navigation-row .attempt-history-minor-navigation,
.attempt-history-navigation-row .attempt-history-minor-navigation:hover,
.attempt-history-navigation-row .attempt-history-minor-navigation:focus-visible {
    transform: none;
}

.control-segmented {
    --segment-count: 2;
    --segment-index: 0;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(var(--segment-count), minmax(0, 1fr));
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    height: 36px;
    min-height: 36px;
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(32, 61, 104, 0.12);
    border-radius: 999px;
    background: rgba(233, 240, 250, 0.96);
}

.control-segmented[data-active-index="1"] {
    --segment-index: 1;
}

.control-segmented[data-active-index="2"] {
    --segment-index: 2;
}

.control-segmented::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--segment-count));
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(20, 37, 64, 0.12);
    transform: translateX(calc(var(--segment-index) * 100%));
    transition: transform 0.2s ease;
}

.control-segmented > button,
.control-segmented > a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 28px;
    height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #58708f;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
}

.control-segmented > button:hover,
.control-segmented > button:focus-visible,
.control-segmented > a:hover,
.control-segmented > a:focus-visible,
.control-segmented > .is-active {
    border: 0;
    background: transparent;
    color: #183f73;
    transform: none;
}

.material-eyebrow-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.material-eyebrow-actions .contextual-action {
    flex: 0 0 auto;
    text-transform: none;
    letter-spacing: normal;
}

.attempt-history-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.skills-page-header,
.skills-page-header .attempt-history-heading {
    width: 100%;
}

.skills-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0.7rem;
}

.skills-page-title-row h1 {
    margin: 0;
}

.skills-page-title-row .contextual-action-group {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.attempt-history-actions {
    gap: 0.5rem;
}

.attempt-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.attempt-history-header > .attempt-history-actions {
    margin-top: 0.8rem;
}

.attempt-history-controls-row,
.attempt-history-navigation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.attempt-history-navigation-row {
    justify-content: flex-start;
    gap: 0.6rem 0.75rem;
    padding-top: 0.12rem;
}

.attempt-history-step-navigation,
.attempt-history-block-navigation {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.attempt-history-step-navigation {
    margin-left: auto;
}

.attempt-history-block-navigation {
    width: 100%;
    justify-content: flex-end;
    gap: 0.55rem 0.8rem;
}

.attempt-history-minor-navigation {
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    border-color: rgba(32, 61, 104, 0.12);
    background: rgba(247, 250, 254, 0.98);
    color: #58708f;
    font-size: 0.78rem;
    font-weight: 700;
}

.attempt-history-minor-navigation:hover,
.attempt-history-minor-navigation:focus-visible {
    border-color: rgba(24, 63, 115, 0.18);
    background: #ffffff;
    color: #183f73;
    transform: none;
}

.attempt-history-mode-switch {
    width: 15rem;
}

.attempt-history-highlight-switch {
    width: 27.5rem;
}

.attempt-history-mode-switch .attempt-history-mode-button,
.attempt-history-highlight-switch .attempt-history-mode-button {
    min-width: 0;
}

.attempt-history-counted-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 36px;
    height: 36px;
    padding: 0 12px 0 10px;
    border: 1px solid rgba(32, 61, 104, 0.12);
    border-radius: 999px;
    background: rgba(247, 250, 254, 0.98);
    color: #58708f;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    white-space: nowrap;
    transform: none;
}

.attempt-history-counted-switch:hover,
.attempt-history-counted-switch:focus-visible {
    border-color: rgba(24, 63, 115, 0.18);
    background: #ffffff;
    color: #183f73;
}

.attempt-history-counted-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 18px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(128, 145, 168, 0.34);
    transition: background-color 0.18s ease;
    pointer-events: none;
}

.attempt-history-counted-switch-thumb {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(20, 37, 64, 0.16);
    transition: transform 0.18s ease;
}

.attempt-history-counted-switch[aria-pressed="true"] .attempt-history-counted-switch-track {
    background: rgba(31, 111, 235, 0.42);
}

.attempt-history-counted-switch[aria-pressed="true"] .attempt-history-counted-switch-thumb {
    transform: translateX(12px);
}

.attempt-history-block-navigation > a {
    display: inline;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6a7f98;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
}

.attempt-history-block-navigation > a:hover,
.attempt-history-block-navigation > a:focus-visible {
    background: transparent;
    color: #1f6feb;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transform: none;
}

.attempt-history-sort-switch {
    --segment-count: 3;
    width: 25rem;
}

.attempt-history-return-button {
    flex: 0 0 auto;
}

.attempt-history-navigation-row > .compact-navigation-control {
    display: none;
}

.attempt-history-actions > .button {
    min-width: 0;
}

[data-view-mode="compact"] .attempt-history-sort-button,
[data-view-mode="compact"] .attempt-history-mode-button {
    min-height: 28px;
}

[data-view-mode="compact"] .attempt-history-mode-switch .attempt-history-mode-button,
[data-view-mode="compact"] .attempt-history-highlight-switch .attempt-history-mode-button {
    min-width: 0;
}

.lesson-layout-switch {
    width: 15rem;
}

.lesson-layout-switch .lesson-layout-toggle,
.lesson-layout-switch .lesson-layout-toggle.is-active,
.lesson-layout-switch .lesson-layout-toggle:hover,
.lesson-layout-switch .lesson-layout-toggle:focus-visible,
.lesson-layout-switch .lesson-layout-toggle.is-active:hover,
.lesson-layout-switch .lesson-layout-toggle.is-active:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.practice-hint-button,
.practice-side-link,
.practice-check,
.practice-report-button,
.practice-question-button,
.theory-lesson-complete-action,
.theory-step-next-button {
    min-height: 38px;
    height: 38px;
    font-size: 0.86rem;
    line-height: 1;
}

@media (max-width: 860px) {
    .attempt-history-header {
        align-items: stretch;
        flex-direction: column;
    }

    .attempt-history-mode-switch,
    .attempt-history-highlight-switch,
    .attempt-history-sort-switch {
        width: min(100%, 25rem);
    }

    .attempt-history-navigation-row {
        justify-content: flex-start;
        align-items: stretch;
    }

    .attempt-history-step-navigation,
    .attempt-history-block-navigation {
        width: 100%;
    }

    .attempt-history-step-navigation {
        margin-left: 0;
        justify-content: flex-start;
    }

    .attempt-history-block-navigation {
        justify-content: flex-start;
    }

    .material-eyebrow-actions {
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .attempt-history-controls-row,
    .attempt-history-navigation-row {
        align-items: stretch;
    }

    .attempt-history-navigation-row > * {
        width: 100%;
    }

    .attempt-history-step-navigation,
    .attempt-history-block-navigation {
        justify-content: stretch;
    }

    .attempt-history-step-navigation > a,
    .attempt-history-block-navigation > a {
        flex: 1 1 auto;
    }

    .material-eyebrow-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .material-eyebrow-actions .contextual-action {
        align-self: flex-start;
    }

    .attempt-history-sort-switch > a {
        padding: 0 7px;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .control-segmented::before {
        transition: none;
    }
}

/* Dense skills overview: one table-like row per tag. */
.block-skills-overview {
    margin-bottom: 28px;
}

.contextual-action-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-similarity-page {
    overflow: visible;
}

.tag-graph-stat-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 10px;
    color: #65758a;
    font-size: 0.82rem;
}

.tag-graph-stat-line strong {
    color: #263f5e;
}

.tag-similarity-method {
    margin: 0 0 12px;
    padding: 8px 11px;
    border: 1px solid rgba(39, 78, 128, 0.12);
    border-radius: 10px;
    background: #fafcff;
    color: #596c84;
    font-size: 0.76rem;
}

.tag-similarity-method summary {
    color: #365574;
    font-weight: 700;
    cursor: pointer;
}

.tag-similarity-method p {
    margin: 8px 0 0;
    line-height: 1.5;
}

.tag-similarity-method code {
    color: #173f73;
}

.tag-graph-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 10px;
}

.tag-graph-threshold-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0;
    color: #4c6079;
    font-size: 0.78rem;
    font-weight: 650;
}

.tag-graph-toolbar input[type="range"] {
    width: 150px;
}

.tag-graph-toolbar output {
    min-width: 30px;
    color: #173f73;
    font-variant-numeric: tabular-nums;
}

.tag-graph-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    min-height: 610px;
    border: 1px solid rgba(37, 74, 122, 0.18);
    border-radius: 16px;
    background: #fbfcff;
    overflow: hidden;
}

.tag-graph-canvas-wrap {
    position: relative;
    min-width: 0;
    min-height: 610px;
}

.tag-graph-canvas {
    display: block;
    width: 100%;
    height: 610px;
    touch-action: none;
}

.tag-graph-legend {
    position: absolute;
    right: 10px;
    bottom: 9px;
    left: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    width: max-content;
    max-width: calc(100% - 20px);
    padding: 6px 9px;
    border: 1px solid rgba(40, 75, 119, 0.1);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.88);
    color: #758399;
    font-size: 0.66rem;
    backdrop-filter: blur(5px);
}

.tag-graph-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tag-graph-legend i {
    display: inline-block;
    width: 24px;
    border-top: 2px solid rgba(55, 103, 162, 0.75);
}

.tag-graph-legend i.is-weak {
    border-top-width: 1px;
    border-top-color: rgba(75, 112, 157, 0.28);
}

.tag-graph-inspector {
    padding: 16px;
    border-left: 1px solid rgba(37, 74, 122, 0.14);
    background: #f7faff;
}

.tag-graph-inspector h2 {
    margin: 0 0 7px;
    font-size: 1rem;
}

.tag-graph-inspector h3 {
    margin: 17px 0 6px;
    color: #405673;
    font-size: 0.78rem;
}

.tag-graph-inspector p {
    margin: 0;
    color: #65758a;
    font-size: 0.75rem;
    line-height: 1.45;
}

.tag-graph-inspector-meta {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(37, 74, 122, 0.1);
}

.tag-graph-relation-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-graph-relation-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    color: #4d6079;
    font-size: 0.7rem;
}

.tag-graph-relation-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-graph-relation-list strong {
    font-variant-numeric: tabular-nums;
}

.tag-graph-relation-list strong.is-positive {
    color: #2769ad;
}

.tag-graph-relation-list strong.is-negative {
    color: #b84c47;
}

.tag-similarity-matrix {
    margin-top: 16px;
    border: 1px solid rgba(37, 74, 122, 0.14);
    border-radius: 12px;
    background: #fbfcff;
}

.tag-similarity-matrix > summary {
    padding: 11px 14px;
    color: #315172;
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
}

.tag-similarity-matrix > p {
    margin: 0;
    padding: 0 14px 10px;
    font-size: 0.75rem;
}

.tag-similarity-matrix-scroll {
    max-height: 68vh;
    overflow: auto;
    border-top: 1px solid rgba(37, 74, 122, 0.12);
}

.tag-similarity-matrix table {
    border-collapse: separate;
    border-spacing: 1px;
    min-width: max-content;
    background: #e9eef5;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.tag-similarity-matrix th,
.tag-similarity-matrix td {
    min-width: 34px;
    height: 28px;
    padding: 3px 4px;
    border: 0;
    text-align: center;
}

.tag-similarity-matrix thead th {
    position: sticky;
    z-index: 3;
    top: 0;
    background: #f2f6fb;
    color: #53677f;
}

.tag-similarity-matrix thead th:first-child {
    z-index: 5;
    left: 0;
    min-width: 220px;
    text-align: left;
}

.tag-similarity-matrix tbody th {
    position: sticky;
    z-index: 2;
    left: 0;
    max-width: 260px;
    padding-left: 8px;
    background: #f8faff;
    color: #465a73;
    font-weight: 600;
    text-align: left;
}

.tag-similarity-matrix tbody th span {
    display: inline-block;
    min-width: 20px;
    color: #8794a5;
}

.tag-similarity-matrix td {
    background: #fff;
    color: #607089;
}

.tag-similarity-matrix td.is-positive {
    background: rgba(55, 126, 193, calc(0.08 + var(--matrix-intensity) * 0.62));
    color: #153e6e;
}

.tag-similarity-matrix td.is-negative {
    background: rgba(205, 91, 83, calc(0.07 + var(--matrix-intensity) * 0.56));
    color: #732b28;
}

.tag-similarity-matrix td.is-neutral {
    background: #fff;
    color: #98a2b1;
}

.block-skills-heading {
    margin: 22px 0 12px;
}

.block-skills-heading h2,
.skills-tag-details-heading h2 {
    margin-bottom: 4px;
    font-size: 1.18rem;
}

.block-skills-heading p,
.skills-tag-details-heading p {
    margin: 0;
    font-size: 0.85rem;
}

.block-skill-diagrams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.block-skill-diagram {
    min-width: 0;
    padding: 13px 14px 14px;
    border-radius: 12px;
    box-shadow: none;
}

.block-skill-diagram.has-no-history {
    background: #fafbfd;
}

.block-skill-diagram-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.block-skill-diagram-header h3 {
    margin: 0 0 3px;
    font-size: 0.98rem;
}

.block-skill-diagram-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.block-skill-diagram-value {
    flex: 0 0 auto;
    min-width: 54px;
    padding: 5px 9px;
    border: 1px solid rgba(32, 78, 137, 0.2);
    border-radius: 999px;
    background: #edf4fd;
    color: #173f73;
    font-size: 0.9rem;
    text-align: center;
}

.block-skill-spider-wrap {
    display: flex;
    justify-content: center;
    min-height: 270px;
}

.block-skill-spider {
    display: block;
    width: min(100%, 420px);
    height: auto;
    overflow: visible;
}

.block-skill-spider-outer {
    fill: rgba(240, 245, 252, 0.5);
    stroke: var(--spider-color, #8996a7);
    stroke-opacity: 0.32;
    stroke-width: 1;
}

.block-skill-spider-grid {
    fill: none;
    stroke: var(--spider-color, #8996a7);
    stroke-opacity: 0.28;
    stroke-width: 1;
}

.block-skill-spider-zero {
    fill: rgba(255, 255, 255, 0.88);
    stroke: var(--spider-color, #8996a7);
    stroke-opacity: 0.48;
    stroke-width: 1.2;
}

.block-skill-spider-axis {
    stroke: var(--spider-color, #8996a7);
    stroke-opacity: 0.24;
    stroke-width: 1;
}

.block-skill-spider-value-shape {
    fill: var(--spider-color, #8996a7);
    fill-opacity: 0.17;
    stroke: var(--spider-color, #8996a7);
    stroke-linejoin: round;
    stroke-width: 2;
}

.block-skill-spider-point {
    fill: var(--spider-point-color, #8996a7);
    stroke: #fff;
    stroke-width: 1.5;
    pointer-events: none;
    transition: fill 0.14s ease, stroke 0.14s ease, stroke-width 0.14s ease;
}

.block-skill-spider-point.is-negative {
    fill: #c5524c;
}

.block-skill-spider-point.is-zero {
    fill: #8996a7;
}

.block-skill-spider-point-hit {
    fill: transparent;
    cursor: pointer;
    outline: none;
}

.block-skill-spider-point-hit:hover + .block-skill-spider-point,
.block-skill-spider-point-hit:focus-visible + .block-skill-spider-point,
.block-skill-spider-point-hit[aria-expanded="true"] + .block-skill-spider-point {
    fill: #fff;
    stroke: var(--spider-point-color, #8996a7);
    stroke-width: 2.5;
}

.block-skill-spider-center-value {
    fill: var(--spider-color, #34475f);
    font-size: 11px;
    font-weight: 750;
    text-anchor: middle;
    dominant-baseline: central;
}

.block-skill-spider-details {
    min-height: 34px;
    margin-top: -14px;
}

.block-skill-spider-detail {
    align-items: center;
    grid-template-columns: minmax(120px, 1fr) auto auto auto auto;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid rgba(49, 74, 105, 0.14);
    border-radius: 9px;
    background: #f8fafc;
    font-size: 0.76rem;
}

.block-skill-spider-detail[hidden] {
    display: none;
}

.block-skill-spider-detail-metric {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.block-skill-spider-detail-metric strong {
    color: var(--color-heading);
}

.teacher-panel,.teacher-assignment-page{display:grid;gap:16px}
.teacher-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.teacher-panel-header h1{margin:0 0 5px}
.teacher-panel-header p,.teacher-panel-generated{margin:0;color:var(--color-text-muted)}
.teacher-panel-generated{padding-top:8px;font-size:.78rem;white-space:nowrap}
.teacher-student-list{display:grid;gap:12px}
.teacher-student-card{padding:15px 17px}
.teacher-student-header,.teacher-student-counters,.teacher-student-brief,.teacher-detailed-summary,.teacher-work-lists{display:flex;align-items:center;justify-content:space-between;gap:12px}
.teacher-student-header h2,.teacher-student-header p{margin:0}
.teacher-student-header p{margin-top:3px;color:var(--color-text-muted);font-size:.76rem}
.teacher-student-counters{justify-content:flex-start;margin:10px 0;color:var(--color-text-muted);font-size:.78rem}
.teacher-student-counters span{padding:3px 8px;border-radius:999px;background:#f0f4f9}
.teacher-brief-blocks,.teacher-worst-tags,.teacher-detailed-summary>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.teacher-section-label{color:var(--color-text-muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.teacher-block-peek{position:relative}
.teacher-block-peek-trigger{padding:5px 9px;border:1px solid var(--spider-point-color,#8996a7);border-radius:999px;background:#fff;color:var(--color-heading);font:inherit;font-size:.76rem;cursor:help}
.teacher-block-peek-chart{position:absolute;z-index:1200;top:calc(100% + 7px);left:0;width:min(390px,calc(100vw - 40px));padding:8px 10px;border:1px solid rgba(43,63,88,.16);border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(31,49,72,.2);visibility:hidden;opacity:0;transform:translateY(3px);transition:opacity .15s ease,transform .15s ease,visibility .15s}
.teacher-block-peek:hover .teacher-block-peek-chart,.teacher-block-peek:focus-within .teacher-block-peek-chart{visibility:visible;opacity:1;transform:translateY(0)}
.teacher-block-peek-chart .block-skill-spider-wrap{min-height:245px}
.teacher-student-detailed{display:none;margin-top:12px}
[data-skills-view-mode="detailed"] .teacher-student-brief{display:none}
[data-skills-view-mode="detailed"] .teacher-student-detailed{display:block}
.teacher-detailed-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.teacher-detailed-chart{min-width:0;padding:8px;border:1px solid rgba(43,63,88,.12);border-radius:10px}
.teacher-detailed-chart h3{display:flex;justify-content:space-between;margin:0;font-size:.84rem}
.teacher-detailed-chart .block-skill-spider-wrap{min-height:225px}
.teacher-detailed-summary,.teacher-work-lists{align-items:flex-start;margin-top:10px}
.teacher-work-lists>div{flex:1 1 0;padding:9px 11px;border-radius:9px;background:#f7f9fc}
.teacher-work-lists h3,.teacher-work-lists p{margin:0 0 5px;font-size:.78rem}
.teacher-student-full{margin-top:11px;border-top:1px solid rgba(43,63,88,.1);padding-top:8px}
.teacher-student-full summary{color:#315f94;font-size:.78rem;cursor:pointer}
.teacher-full-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:9px}
.teacher-full-skills .skills-table-identity{display:grid;grid-template-columns:minmax(110px,1fr) auto auto auto;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;background:#f7f9fc;font-size:.72rem}
.teacher-assignment-form{display:grid;gap:14px;padding:18px}
.teacher-assignment-form>label,.teacher-assignment-form fieldset label,.teacher-assignment-grid label{display:grid;gap:5px;color:var(--color-heading);font-size:.8rem;font-weight:650}
.teacher-assignment-form fieldset{display:grid;gap:9px;margin:0;padding:12px;border:1px solid rgba(43,63,88,.14);border-radius:10px}
.teacher-assignment-form fieldset[hidden]{display:none}
.teacher-assignment-form select,.teacher-assignment-form input{min-height:38px;padding:7px 9px;border:1px solid rgba(43,63,88,.24);border-radius:8px;background:#fff;font:inherit}
.teacher-lesson-sort{display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem}
.teacher-lesson-sort a.is-active{color:var(--color-heading);font-weight:750}
.teacher-tag-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:270px;overflow:auto}
.teacher-tag-options label{display:flex!important;align-items:center;font-weight:500!important}
.teacher-tag-options input{min-height:0}
.teacher-assignment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:820px){.teacher-detailed-charts,.teacher-full-skills,.teacher-assignment-grid{grid-template-columns:1fr}.teacher-tag-options{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-student-brief,.teacher-detailed-summary,.teacher-work-lists,.teacher-panel-header{align-items:flex-start;flex-direction:column}}

.block-skill-spider-point-hit:focus-visible {
    fill: rgba(47, 114, 185, 0.12);
    stroke: rgba(47, 114, 185, 0.45);
    stroke-width: 1;
}

.block-skill-spider-label {
    fill: #425974;
    font-size: 8px;
    font-weight: 650;
}

.block-skill-spider-scale {
    fill: #8290a1;
    font-size: 8px;
}

.block-skill-spider-scale.is-positive {
    fill: #3b6fa9;
}

.block-skill-axis,
.block-skill-tag-row {
    display: grid;
    grid-template-columns: minmax(105px, 0.8fr) minmax(140px, 1.4fr) 42px 32px;
    gap: 7px;
}

.block-skill-axis-track {
    position: relative;
    display: flex;
    grid-column: 2;
    justify-content: space-between;
    height: 20px;
    color: #8390a3;
    font-size: 0.64rem;
}

.block-skill-axis-track::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    border-bottom: 1px solid rgba(42, 73, 113, 0.18);
}

.block-skill-result-marker {
    position: absolute;
    z-index: 2;
    bottom: -2px;
    left: var(--block-skill-position);
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    background: #173f73;
    box-shadow: 0 0 0 1px rgba(23, 63, 115, 0.34);
    transform: translate(-50%, 50%) rotate(45deg);
}

.block-skill-tag-list {
    display: grid;
    gap: 5px;
}

.block-skill-tag-row {
    align-items: center;
    min-height: 24px;
}

.block-skill-tag-row > a {
    min-width: 0;
    overflow: hidden;
    color: #3f536d;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-skill-tag-row > a:hover,
.block-skill-tag-row > a:focus-visible {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.block-skill-tag-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(223, 230, 240, 0.7);
}

.block-skill-zero-axis {
    position: absolute;
    z-index: 2;
    top: -2px;
    bottom: -2px;
    left: 50%;
    border-left: 1px solid rgba(45, 65, 94, 0.38);
}

.block-skill-tag-bar {
    position: absolute;
    top: 2px;
    left: var(--skill-bar-start);
    width: var(--skill-bar-width);
    height: 6px;
    border-radius: 999px;
    background: #3d78bf;
}

.block-skill-tag-bar.is-negative {
    background: #cf625c;
}

.block-skill-tag-point {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: var(--skill-point-position);
    width: 7px;
    height: 7px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #2f67aa;
    box-shadow: 0 0 0 1px rgba(37, 78, 129, 0.28);
    transform: translate(-50%, -50%);
}

.block-skill-tag-point.is-negative {
    background: #c54e49;
    box-shadow: 0 0 0 1px rgba(151, 48, 43, 0.28);
}

.block-skill-tag-point.is-zero {
    background: #8a97a8;
}

.block-skill-tag-row > strong {
    color: #273e5b;
    font-size: 0.75rem;
    text-align: right;
}

.block-skill-tag-weight {
    color: #8793a2;
    font-size: 0.65rem;
    text-align: right;
}

.skills-tag-details-heading {
    margin: 4px 0 10px;
}

.skill-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: -0.25rem 0 0.7rem;
}

.skills-setting-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skills-settings-label {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.skills-sort-switch {
    --segment-count: 3;
    width: 23rem;
}

.skills-detail-switch {
    --segment-count: 2;
    width: 13rem;
}

.skills-table {
    gap: 4px;
}

.skills-table-row {
    padding: 7px 10px;
    border-radius: 10px;
    box-shadow: none;
}

.skills-table-row-main {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(470px, 2fr) 28px;
    align-items: center;
    gap: 10px;
}

.skills-table-identity {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.skills-table-identity .material-chip {
    min-width: 0;
    max-width: min(220px, 100%);
    overflow: hidden;
    justify-content: flex-start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skills-proficiency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    height: 24px;
    min-height: 24px;
    min-width: 42px;
    padding: 0 8px;
    border: 1px solid rgba(32, 61, 104, 0.14);
    border-radius: 999px;
    background: rgba(236, 242, 250, 0.95);
    font-size: 0.76rem;
    line-height: 1;
}

.skills-table-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
    margin: 0;
    font-size: 0.8rem;
    white-space: nowrap;
}

.skills-table-metrics .attempt-history-meta-item {
    gap: 4px;
}

.skills-table-metrics .attempt-history-meta-item-label {
    font-size: 0.78rem;
}

.skills-history {
    width: 28px;
    margin: 0;
}

.skills-history-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 1px solid rgba(32, 61, 104, 0.12);
    border-radius: 999px;
    background: rgba(247, 250, 254, 0.98);
    color: #58708f;
    cursor: pointer;
    list-style: none;
}

.skills-history-toggle::-webkit-details-marker {
    display: none;
}

.skills-history-toggle::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform 0.18s ease;
}

.skills-history[open] .skills-history-toggle::before {
    transform: rotate(90deg);
}

.skills-history-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-heading);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.skills-history-toggle:hover,
.skills-history-toggle:focus-visible {
    border-color: rgba(24, 63, 115, 0.18);
    background: #ffffff;
    color: #183f73;
}

.skills-history-toggle:hover::after,
.skills-history-toggle:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.skills-history-toggle::after {
    display: none;
    content: none;
}

.skills-history-content {
    display: none;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(32, 61, 104, 0.1);
}

.skills-table-row:has(.skills-history[open]) .skills-history-content,
.skills-table-row.is-history-open .skills-history-content {
    display: block;
}

.skills-history-content .attempt-history-list {
    gap: 4px;
}

.skills-history-content .attempt-history-item {
    position: relative;
    border-width: 1px;
    border-radius: 9px;
    box-shadow: none;
    overflow: visible;
}

.skills-history-content .attempt-history-item:hover,
.skills-history-content .attempt-history-item:focus-within {
    z-index: 20;
}

.skills-history-content .attempt-history-body {
    padding: 7px 9px;
}

.skills-attempt-summary-line {
    display: flex;
    align-items: center;
    gap: 5px 9px;
    min-width: 0;
    overflow: hidden;
    color: #65758a;
    font-size: 0.76rem;
    line-height: 1.25;
    white-space: nowrap;
}

.skills-attempt-number {
    flex: 0 0 auto;
    color: #324f72;
    font-weight: 750;
}

.skills-attempt-title {
    min-width: 4rem;
    overflow: hidden;
    color: #173f73;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skills-attempt-fact,
.skills-attempt-delta {
    flex: 0 0 auto;
}

.skills-attempt-delta {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.skills-attempt-statement {
    display: none;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(32, 61, 104, 0.08);
    color: #273e5b;
    font-size: 0.86rem;
    line-height: 1.45;
}

[data-skills-view-mode="detailed"] .skills-attempt-statement {
    display: block;
}

.skills-attempt-statement > :first-child {
    margin-top: 0;
}

.skills-attempt-statement > :last-child {
    margin-bottom: 0;
}

.skills-attempt-ellipsis {
    margin-left: 0.16em;
    color: #70819a;
    font-weight: 800;
}

[data-skill-tooltip] {
    cursor: help;
}

.site-floating-tooltip {
    position: fixed;
    z-index: 100000;
    width: max-content;
    max-width: min(340px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    white-space: pre-line;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-floating-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 960px) {
    .tag-graph-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .block-skill-diagrams {
        grid-template-columns: 1fr;
    }

    .skills-table-row-main {
        grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.7fr) 28px;
    }

    .skills-table-metrics {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 5px 10px;
    }
}

@media (max-width: 700px) {
    .tag-graph-layout {
        grid-template-columns: 1fr;
    }

    .tag-graph-inspector {
        border-top: 1px solid rgba(37, 74, 122, 0.14);
        border-left: 0;
    }

    .block-skill-axis,
    .block-skill-tag-row {
        grid-template-columns: minmax(90px, 0.8fr) minmax(100px, 1.4fr) 38px 28px;
        gap: 5px;
    }

    .skill-settings-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .skills-setting-group,
    .skills-sort-switch,
    .skills-detail-switch {
        width: min(100%, 23rem);
    }

    .skills-setting-group {
        align-items: flex-start;
        flex-direction: column;
    }

    .skills-page-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .skills-page-title-row .contextual-action-group {
        justify-content: flex-start;
    }

    .skills-attempt-summary-line {
        flex-wrap: wrap;
        white-space: normal;
    }

    .skills-table-row-main {
        grid-template-columns: minmax(0, 1fr) 28px;
    }

    .skills-table-identity {
        grid-column: 1;
    }

    .skills-table-metrics {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .skills-history {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skills-history-toggle::before {
        transition: none;
    }
}

.path-skill-summary {
    position: relative;
    gap: 6px;
}

.path-skill-proficiency-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.path-skill-proficiency {
    min-width: 42px;
    color: #173457;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.path-skill-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 40;
    width: max-content;
    max-width: min(520px, calc(100vw - 32px));
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--color-heading);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.path-skill-proficiency-wrap:hover .path-skill-tooltip,
.path-skill-proficiency-wrap:focus-visible .path-skill-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.path-skill-tooltip .is-positive {
    color: #62d37a;
}

.path-skill-tooltip .is-negative {
    color: #ff7770;
}

.path-skill-tooltip .is-neutral {
    color: #91a6bf;
}

.skill-weekly-delta {
    position: relative;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: help;
}

.skill-current-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.skill-weekly-delta.is-positive {
    color: #287f39;
}

.skill-weekly-delta.is-negative {
    color: #c33a34;
}

.skill-weekly-delta.is-neutral {
    color: #6d8099;
}

.skill-weekly-delta[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 45;
    width: max-content;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-heading);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.skills-table-metrics .skill-metric[data-tooltip]::after {
    right: 0;
    left: auto;
    width: min(340px, calc(100vw - 32px));
    white-space: normal;
    transform: translateY(4px);
}

.skills-table-metrics .skill-metric[data-tooltip]:hover::after,
.skills-table-metrics .skill-metric[data-tooltip]:focus-visible::after {
    transform: translateY(0);
}

.skill-weekly-delta[data-tooltip]:hover::after,
.skill-weekly-delta[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 700px) {
    .path-skill-tooltip {
        width: min(320px, calc(100vw - 32px));
        white-space: normal;
    }

    .path-skill-tooltip > span {
        display: block;
    }
}

/* Attempt rows share the dense skills-table shell while retaining result borders. */
.attempt-history-page .attempt-history-list {
    gap: 4px;
}

.attempt-history-page .attempt-history-item {
    position: relative;
    border-width: 2px;
    border-radius: 10px;
    box-shadow: none;
    overflow: visible;
}

.attempt-history-page .attempt-history-item:hover,
.attempt-history-page .attempt-history-item:focus-within {
    z-index: 20;
}

.attempt-history-page .attempt-history-summary {
    gap: 10px;
    min-height: 40px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.96);
    font-size: 0.8rem;
    border-radius: 8px;
}

.attempt-history-page .attempt-history-item[open] > .attempt-history-summary {
    border-radius: 8px 8px 0 0;
}

.attempt-history-page .attempt-history-summary-main {
    gap: 5px 9px;
}

.attempt-history-page .attempt-history-summary-meta {
    gap: 5px;
    font-size: 0.78rem;
}

.attempt-history-page .attempt-history-summary-user {
    font-size: 0.82rem;
}

.attempt-history-page .attempt-history-summary-time,
.attempt-history-page .attempt-history-summary-kind {
    font-size: 0.76rem;
}

.attempt-history-page .attempt-history-quality-badge,
.attempt-history-page .attempt-history-skill-badge {
    min-height: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: 0.76rem;
    line-height: 1;
}

.attempt-history-page .attempt-history-skill-badge {
    gap: 4px;
}

.attempt-history-page .attempt-history-skill-label {
    font-size: 0.74rem;
}

.attempt-history-page .attempt-history-body {
    padding: 7px 9px 9px;
    border-top: 1px solid rgba(32, 61, 104, 0.1);
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.96);
}

.attempt-history-page .attempt-history-preview-card {
    padding: 6px 7px;
    border-radius: 9px;
}

.attempt-history-page .attempt-history-miniature .practice-card {
    padding: 8px 9px;
    border-radius: 10px;
}

.attempt-history-page .attempt-history-feedback {
    margin-top: 6px;
    font-size: 0.86rem;
}

.attempt-history-page .attempt-history-meta-line {
    margin-top: 6px;
    gap: 4px 10px;
    font-size: 0.8rem;
}

.attempt-history-page .attempt-history-meta-item {
    gap: 4px;
}

.attempt-history-page .attempt-history-meta-item-label {
    font-size: 0.78rem;
}

.attempt-history-page .attempt-history-raw {
    margin-top: 7px;
    font-size: 0.8rem;
}

.attempt-history-page .attempt-history-raw pre {
    margin-top: 5px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 0.78rem;
}

[data-view-mode="compact"].attempt-history-page .attempt-history-list {
    gap: 4px;
}

[data-view-mode="compact"].attempt-history-page .attempt-history-item {
    border-radius: 10px;
}

[data-view-mode="compact"].attempt-history-page .attempt-history-summary {
    min-height: 40px;
    padding: 6px 9px;
}

[data-view-mode="compact"].attempt-history-page .attempt-history-body {
    padding: 7px 9px 9px;
}

[data-view-mode="compact"].attempt-history-page .attempt-history-preview-card {
    padding: 6px 7px;
}

@media (max-width: 860px) {
    .attempt-history-page .attempt-history-summary {
        gap: 5px;
    }

    .attempt-history-page .attempt-history-summary-meta {
        justify-content: flex-start;
    }
}

.choose-correct-options {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.choose-correct-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #ffffff;
}

.choose-correct-controls {
    display: grid;
    grid-template-columns: 18px 11.5rem;
    align-items: center;
    justify-content: flex-end;
    column-gap: 6px;
    min-width: calc(18px + 6px + 11.5rem);
}

.choose-correct-switch {
    width: 11.5rem;
    min-width: 11.5rem;
    grid-column: 2;
}

.choose-correct-switch[data-active-index="-1"]::before {
    opacity: 0;
}

.choose-correct-switch.is-correct-selected {
    background: rgba(218, 243, 223, 0.96);
}

.choose-correct-switch.is-incorrect-selected {
    background: rgba(251, 230, 226, 0.96);
}

.choose-correct-hint {
    grid-column: 1;
    justify-self: center;
    flex: 0 0 auto;
    margin-left: 0;
}

.choose-correct-hint[hidden] {
    display: none;
}

.choose-correct-content {
    display: block;
    min-width: 0;
    line-height: 1.5;
}

.choose-correct-target {
    position: relative;
    display: inline;
}

.choose-correct-boundary-space {
    white-space: normal;
}

.choose-correct-option.is-marked-incorrect .choose-correct-target {
    color: #a83c37;
    text-decoration-line: line-through;
    text-decoration-color: #d5564e;
    text-decoration-thickness: 2px;
}

/* Main page */
.home-dashboard {
    display: grid;
    gap: 24px;
}

.home-category-preview {
    justify-self: end;
    margin-bottom: -8px;
}

.home-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(28px, 4vw, 54px);
    border: 1px solid rgba(129, 153, 188, 0.34);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 14%, rgba(117, 159, 224, 0.2), transparent 34%),
        linear-gradient(145deg, #f8fbff 0%, #eef4fd 100%);
    box-shadow: 0 18px 44px rgba(15, 23, 40, 0.08);
}

.home-hero h1 {
    max-width: 830px;
    margin: 4px 0 12px;
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 1.05;
}

.home-user-hero h1 {
    font-size: clamp(1.7rem, 2.7vw, 2.55rem);
    line-height: 1.12;
}

.home-hero .lead {
    max-width: 810px;
    margin: 0;
}

.home-eyebrow {
    margin: 0 0 5px;
    color: #526b91;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.home-hero-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}

.home-card-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.home-card-heading h2,
.home-dashboard-card h2,
.home-feature-card h2,
.home-notice h2 {
    margin: 0;
}

.home-guidance-card,
.home-demo-card,
.home-dashboard-card,
.home-feature-card {
    padding: 22px;
}

.home-guidance-card {
    border-color: rgba(90, 132, 193, 0.26);
    background: #fbfdff;
}

.home-plan-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 0;
    padding: 24px 26px;
}

.home-plan-featured > :not(.home-card-link) {
    grid-column: 1;
}

.home-plan-featured .home-card-link {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-left: 28px;
    padding: 0;
}

.home-plan-list {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.home-plan-item {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(92, 126, 171, 0.22);
    border-radius: 12px;
    background: rgba(245, 249, 255, 0.76);
}

.home-plan-card-link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 2px 10px;
    width: 100%;
    min-height: 100%;
    padding: 9px 12px;
    color: inherit;
    text-decoration: none;
}

.home-plan-item-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.schedule-task-icon {
    display: block;
    width: 34px;
    height: 34px;
    overflow: visible;
    flex: 0 0 auto;
}

.home-plan-card-link strong {
    color: var(--priority-color, var(--color-link));
    font-size: 0.9rem;
}

.home-plan-card-link span {
    color: #68758a;
    font-size: 0.78rem;
}

.home-plan-card-link:hover,
.home-plan-card-link:focus-visible {
    background: rgba(238, 244, 252, 0.72);
}

.home-plan-importance {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 2.35rem;
    padding: 4px 7px;
    border-radius: 999px;
    background: #e8eef8;
    color: #2d4f7e;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
}

.home-guidance-card-compact {
    padding: 16px;
}

.home-guidance-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.home-guidance-card-compact .home-guidance-list {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 9px;
}

.home-guidance-card-compact .home-guidance-item {
    padding: 9px 10px;
    border-radius: 10px;
}

.home-guidance-card-compact .home-guidance-item h3 {
    margin-bottom: 3px;
    font-size: 0.86rem;
}

.home-guidance-card-compact .home-guidance-item p {
    margin-bottom: 4px;
    font-size: 0.76rem;
    line-height: 1.35;
}

.home-guidance-copy > :first-child {
    margin-top: 0;
}

.home-guidance-copy > :last-child {
    margin-bottom: 4px;
}

.home-guidance-card-compact .home-guidance-item a {
    font-size: 0.74rem;
}

.home-guidance-item {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(129, 153, 188, 0.24);
    border-radius: 14px;
    background: rgba(240, 246, 255, 0.62);
}

.home-guidance-item h3 {
    margin: 0 0 7px;
    font-size: 1rem;
}

.home-guidance-item p {
    margin: 0 0 9px;
    color: #526074;
    font-size: 0.88rem;
    line-height: 1.48;
}

.home-guidance-item a,
.home-card-link {
    color: var(--color-link);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.home-guidance-item a:hover,
.home-guidance-item a:focus-visible,
.home-card-link:hover,
.home-card-link:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
    gap: 18px;
    align-items: stretch;
}

.home-dashboard-grid > * {
    min-height: 0;
}

.home-guidance-fact-stack {
    display: grid;
    min-width: 0;
    gap: 18px;
    height: 100%;
    grid-auto-rows: 1fr;
}

.home-dashboard-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.home-dashboard-card > p:not(.home-eyebrow),
.home-fact-body {
    font-size: 0.88rem;
    line-height: 1.5;
}

.home-dashboard-card .home-card-link {
    margin-top: auto;
    padding-top: 10px;
}

.compact-skills-card {
    overflow: visible;
    align-items: stretch;
}

.compact-skills-card > h2 {
    margin-bottom: 4px;
}

.compact-skills-section {
    min-width: 0;
    margin-top: 14px;
}

.compact-skills-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.compact-skills-section-heading h3 {
    margin: 0;
    color: #314867;
    font-size: 0.88rem;
    font-weight: 700;
}

.compact-skills-section-heading > span {
    color: #708096;
    font-size: 0.75rem;
    font-weight: 700;
}

.compact-block-skills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.compact-block-skills.has-2-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-block-skill-chart {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(58, 102, 158, 0.24);
    border-radius: 10px;
    background: #f7faff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.compact-block-skill-chart:hover,
.compact-block-skill-chart:focus-visible {
    border-color: rgba(39, 91, 157, 0.48);
    background: #f1f6ff;
    box-shadow: 0 7px 18px rgba(30, 62, 102, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.compact-block-skill-chart header {
    min-height: 44px;
}

.compact-block-skill-chart header span {
    color: #718096;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compact-block-skill-chart h4 {
    margin: 4px 0 0;
    color: #334b69;
    font-size: 0.82rem;
    line-height: 1.25;
}

.compact-block-skill-chart .block-skill-spider-wrap {
    min-height: 0;
}

.compact-block-skill-chart .block-skill-spider {
    width: min(100%, 270px);
}

.compact-block-skill-chart .block-skill-spider-wrap {
    min-height: 126px;
}

.compact-block-skill-chart .block-skill-spider-details {
    display: none;
}

.compact-skills-card.is-tree-layout .compact-block-skill-chart {
    align-content: start;
}

.compact-tag-skill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.compact-skills-card .attempt-history-meta-line {
    margin-top: 0;
}

.compact-skills-card .home-card-link {
    align-self: flex-start;
}

.home-stat-value {
    margin: 15px 0 -3px !important;
    color: #245fae;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
}

.home-fact-card {
    border-color: rgba(79, 145, 96, 0.28);
    background: linear-gradient(150deg, #fbfffc, #f1f9f3);
}

.home-fact-body > :first-child {
    margin-top: 12px;
}

.home-fact-body > :last-child {
    margin-bottom: 0;
}

.home-guest-notices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.home-notice {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
    border: 1px solid;
    border-radius: 18px;
}

.home-notice-warning {
    border-color: rgba(190, 126, 23, 0.34);
    background: #fffaf0;
}

.home-notice-invite {
    border-color: rgba(66, 116, 188, 0.3);
    background: #f5f9ff;
}

.home-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: #9a5d0a;
    font-weight: 850;
}

.home-notice-invite .home-notice-icon {
    color: #2f67b3;
}

.home-notice p {
    margin: 7px 0 9px;
    line-height: 1.5;
}

.home-guest-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-feature-number {
    display: block;
    margin-bottom: 18px;
    color: rgba(48, 94, 157, 0.52);
    font-size: 1.8rem;
    font-weight: 800;
}

.home-feature-card p {
    margin-bottom: 0;
    color: #526074;
    line-height: 1.55;
}

.home-demo-card {
    overflow: visible;
}

.home-demo-heading {
    align-items: center;
}

.home-demo-summary {
    max-width: 880px;
    margin: 12px 0 18px;
    color: #526074;
}

.home-demo-embed {
    width: min(100%, 920px);
    margin: 18px auto 0;
}

.home-demo-embed .applet-figure {
    margin: 0;
}

.home-demo-embed .applet-frame.is-embedded {
    height: clamp(300px, 44vw, 430px);
}

@media (max-width: 980px) {
    .home-hero {
        align-items: start;
        flex-direction: column;
    }

    .home-guidance-list,
    .home-dashboard-grid,
    .home-guest-features {
        grid-template-columns: 1fr 1fr;
    }

    .home-plan-featured {
        grid-template-columns: 1fr;
    }

    .top-panel-actions-4 {
        grid-column: 2;
    }

    .home-plan-featured .home-card-link {
        grid-column: 1;
        grid-row: auto;
        margin-left: 0;
        padding-top: 10px;
    }

    .home-guest-features .home-feature-card:last-child {
        grid-column: 1 / -1;
    }
}

.settings-page {
    display: grid;
    gap: 18px;
}

.settings-page-header h1 {
    margin: 0;
}

.settings-page-header p {
    margin: 6px 0 0;
    color: #647286;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.settings-card {
    display: grid;
    gap: 13px;
    height: 100%;
}

.settings-card h2,
.settings-card p {
    margin: 0;
}

.settings-card label,
.settings-card form p {
    display: grid;
    gap: 5px;
    color: #526074;
    font-size: 0.86rem;
    font-weight: 650;
}

.settings-card input:not([type="checkbox"]),
.settings-card select,
.settings-card textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-weight: 400;
}

.settings-card input:disabled {
    background: var(--color-surface-muted);
    color: #69788c;
}

.settings-card .helptext,
.settings-card ul {
    margin: 0;
    color: #718095;
    font-size: 0.76rem;
    font-weight: 400;
}

.settings-checkbox {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
}

.settings-checkbox input {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    flex: 0 0 16px;
    margin: 0;
}

.settings-card > .button:last-child,
.settings-card-bottom-action,
.settings-inner-form > .button:last-child {
    align-self: end;
    justify-self: start;
    margin-top: auto;
}

.settings-inner-form {
    display: grid;
    gap: 11px;
    height: 100%;
}

.settings-privacy-card {
    height: auto;
}

.learning-tree-details-dev,
.learning-tree-details-dev * {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
}

.priority-green { --priority-color: #487b5c; --priority-border: rgba(72, 123, 92, 0.48); }
.priority-yellow { --priority-color: #8a741e; --priority-border: rgba(164, 137, 35, 0.5); }
.priority-orange { --priority-color: #a45a20; --priority-border: rgba(180, 93, 31, 0.54); }
.priority-red { --priority-color: #a43d3d; --priority-border: rgba(177, 61, 61, 0.58); }

.home-plan-item[class*="priority-"],
.schedule-item[class*="priority-"] {
    border-color: var(--priority-border);
}

.schedule-item[class*="priority-"] h2,
.schedule-item[class*="priority-"] .schedule-item-importance {
    color: var(--priority-color);
}

.schedule-item[class*="priority-"] .schedule-item-importance {
    border-color: var(--priority-border);
    background: color-mix(in srgb, var(--priority-color) 8%, white);
}

.settings-saved {
    margin: 0;
    color: #25743c;
}

@media (max-width: 760px) {
    .settings-grid,
    .home-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .lesson-layout-menu-panel {
        right: 0;
        left: auto;
        transform: none;
    }

    .compact-block-skills {
        grid-template-columns: 1fr;
    }

    .top-panel-actions-4 {
        grid-column: auto;
    }
}

/* MathJax content does not inherit a useful text-decoration line from its host. */
.choose-correct-option.is-marked-incorrect .choose-correct-target mjx-container {
    position: relative;
}

.choose-correct-option.is-marked-incorrect .choose-correct-target mjx-container::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 2px solid #d5564e;
    transform: translateY(-50%);
    pointer-events: none;
}

.choose-correct-slot {
    display: inline-flex;
    flex: 0 0 var(--inline-gap-width, 6ch);
    align-items: center;
    width: var(--inline-gap-width, 6ch);
    min-width: var(--inline-gap-width, 6ch);
    max-width: var(--inline-gap-width, 6ch);
    margin-left: 4px;
    border: 1px solid rgba(158, 170, 189, 0.9);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08);
    vertical-align: middle;
}

.choose-correct-slot[hidden] {
    display: none;
}

.choose-correct-slot .inline-gaps-control {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--color-heading);
    font: inherit;
    line-height: inherit;
    padding: 0.08em 0.52em 0.1em;
    outline: none;
}

.choose-correct-slot .inline-gaps-input {
    text-align: center;
}

.choose-correct-slot .inline-gaps-select {
    cursor: pointer;
}

.choose-correct-inline-choice-picker {
    position: relative;
    overflow: visible;
}

.choose-correct-inline-choice-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 34px;
    padding: 0.18em 0.52em 0.2em;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--color-heading);
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
    text-align: left;
}

.choose-correct-inline-choice-trigger::after {
    content: "▾";
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-muted);
    font-size: 0.82em;
}

.choose-correct-inline-choice-trigger[aria-expanded="true"]::after {
    content: "▴";
}

.choose-correct-inline-choice-trigger > span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
}

.choose-correct-inline-choice-trigger:focus-visible {
    outline: 2px solid rgba(31, 111, 235, 0.2);
}

.choose-correct-inline-choice-trigger:hover,
.choose-correct-inline-choice-trigger:focus-visible {
    background: var(--color-highlight);
    color: var(--color-heading);
    transform: none;
}

.choose-correct-inline-choice-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    gap: 6px;
    width: max-content;
    min-width: 100%;
    max-width: min(34rem, calc(100vw - 2rem));
    max-height: min(19rem, 45vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 40, 0.18);
}

.choose-correct-inline-choice-menu[hidden] {
    display: none;
}

.choose-correct-inline-choice-menu .choice-card {
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.9rem;
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
}

.choose-correct-inline-choice-menu .choice-card:hover,
.choose-correct-inline-choice-menu .choice-card:focus-visible {
    transform: none;
}

.choose-correct-inline-choice-menu .choice-card.is-selected {
    background: var(--color-highlight);
    border-color: var(--color-link);
}

.choose-correct-choice-list {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    padding-top: 2px;
}

.choose-correct-choice-list[hidden] {
    display: none;
}

.choose-correct-choice-list .choice-card {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.86rem;
    text-align: left;
}

.choose-correct-slot.is-gap-correct {
    border-color: rgba(61, 145, 72, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 3px rgba(61, 145, 72, 0.16);
}

.choose-correct-slot.is-gap-almost {
    border-color: rgba(211, 139, 24, 0.9);
    box-shadow: inset 0 2px 5px rgba(15, 23, 40, 0.08), 0 0 0 3px rgba(211, 139, 24, 0.16);
}

.choose-correct-option.is-option-correct {
    border-color: rgba(61, 145, 72, 0.78);
    background: rgba(232, 248, 235, 0.72);
}

.choose-correct-option.is-option-almost {
    border-color: rgba(226, 139, 47, 0.88);
    background: rgba(255, 238, 218, 0.78);
}

.choose-correct-option.is-option-wrong {
    border-color: rgba(213, 86, 78, 0.82);
    background: rgba(252, 232, 229, 0.72);
}

@media (max-width: 700px) {
    .choose-correct-option {
        grid-template-columns: 1fr;
    }

    .choose-correct-controls {
        justify-content: start;
    }

    .choose-correct-switch {
        width: 11.5rem;
    }
}

.applet-material-body {
    width: 100%;
}

.applet-figure {
    position: relative;
    margin: 18px 0 1.25rem;
}

.applet-exercise-stage {
    min-width: 0;
}

.applet-exercise-stage .applet-figure {
    margin: 0;
}

.applet-figure.is-full {
    margin: 0;
}

.applet-frame-shell {
    width: 100%;
    border: 1px solid rgba(190, 199, 213, 0.92);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

.applet-frame-shell.is-embedded {
    margin: 0;
}

.applet-frame-shell.is-full {
    margin-top: 0;
}

.applet-frame {
    display: block;
    width: 100%;
    border: 0;
    background: #ffffff;
}

.applet-frame.is-embedded {
    min-height: 0;
}

.applet-frame.is-full {
    min-height: 0;
}

.applet-frame-caption {
    margin-top: 10px;
}

.applet-frame-expand {
    position: absolute;
    top: -10px;
    right: 10px;
    left: auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 6px;
    border: 1px solid rgba(32, 61, 104, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: #58708f;
    box-shadow: 0 6px 18px rgba(26, 44, 79, 0.12);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.applet-frame-expand:hover,
.applet-frame-expand:focus-visible {
    background: #ffffff;
    color: #183f73;
    box-shadow: 0 10px 22px rgba(26, 44, 79, 0.16);
    transform: none;
}

.applet-frame-expand svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.applet-viewer-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    background: #ffffff;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.applet-viewer-dialog.is-exercise-success .applet-viewer-stage {
    background: #afe5c0;
    box-shadow: inset 0 0 0 6px #2f8c4c;
}

.applet-viewer-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100% !important;
    min-height: 0;
    max-height: none;
    border: 0;
    background: #ffffff;
    border-radius: 16px;
    opacity: 1;
    transition: opacity 0.12s ease;
}

.applet-viewer-frame.is-live-viewer-frame {
    position: fixed;
    top: var(--applet-viewer-live-top) !important;
    left: var(--applet-viewer-live-left) !important;
    z-index: 1202;
    width: var(--applet-viewer-live-width) !important;
    max-width: none;
    height: var(--applet-viewer-live-height) !important;
    border-radius: 16px;
}
math-field.equation-input {
    display: inline-flex;
    align-items: center;
    min-width: min(100%, 14rem);
    min-height: 42px;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #172034;
    font-size: 1.05rem;
    box-sizing: border-box;
    --caret-color: #2563eb;
    --selection-background-color: #dbeafe;
    --contains-highlight-background-color: transparent;
}

math-field.equation-input:focus-within,
math-field.equation-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    outline: none;
}

math-field.equation-input::part(menu-toggle) {
    display: none;
}

math-field.equation-input.has-external-equation-controls::part(virtual-keyboard-toggle) {
    display: none;
}

.equation-keyboard-edit-strip {
    position: fixed;
    z-index: 10020;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    padding: 0;
}

.equation-keyboard-edit-strip[hidden] {
    display: none;
}

.equation-keyboard-edit-button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    min-width: 0;
    min-height: 0;
    padding: 3px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-muted);
    box-shadow: none;
    opacity: 0.62;
    cursor: pointer;
}

.equation-keyboard-edit-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.equation-keyboard-edit-button:hover,
.equation-keyboard-edit-button:focus-visible {
    border: 0;
    background: rgba(220, 233, 255, 0.65);
    color: var(--color-link-hover);
    box-shadow: none;
    opacity: 1;
    outline: none;
    transform: none;
}

.equation-help-card {
    width: min(760px, calc(100vw - 32px));
}

.equation-help-title,
.equation-help-subtitle {
    margin: 0 0 10px;
    color: var(--color-heading);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.25;
}

.equation-help-subtitle {
    margin-top: 18px;
    font-size: 0.92rem;
    white-space: pre-line;
}

.equation-help-table code {
    padding: 1px 5px;
    border-radius: 6px;
    background: #eef2f7;
    color: #27364d;
    font-size: 0.86em;
}

.equation-help-table td:nth-child(2) {
    white-space: nowrap;
}

.equation-help-note {
    margin: 12px 0 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
}

@media (max-width: 620px) {
    .equation-help-card {
        width: calc(100vw - 20px);
    }

    .equation-help-table {
        font-size: 0.78rem;
    }
}

.equation-entry {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
}

.equation-affix {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 1.2;
}

.equation-field-frame {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
}

.equation-field-frame > math-field.equation-input {
    flex: 1 1 14rem;
    width: 100%;
    min-width: 8rem;
}

.equation-entry.has-equation-right .equation-field-frame {
    flex: 0 1 auto;
    max-width: none;
}

.equation-entry.has-equation-right .equation-field-frame > math-field.equation-input {
    flex: 0 1 23rem;
    width: min(23rem, 100%);
    max-width: 23rem;
}

.equation-field-controls {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
}

.equation-field-controls:not(.is-compact) {
    margin-left: auto;
}

.equation-keyboard-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.equation-keyboard-button:hover,
.equation-keyboard-button:focus-visible {
    border-color: var(--color-border);
    background: rgba(220, 233, 255, 0.55);
    color: var(--color-link-hover);
    outline: none;
}

.equation-keyboard-button::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 90;
}

.equation-keyboard-button:hover::after,
.equation-keyboard-button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.equation-keyboard-preference {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    max-width: 172px;
    color: #526074;
    font-size: 0.69rem;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    user-select: none;
}

.equation-keyboard-preference::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(214, 223, 235, 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 90;
}

.equation-keyboard-preference:hover::after,
.equation-keyboard-preference:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}

.equation-keyboard-preference input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.equation-keyboard-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border: 1px solid #bdc8d8;
    border-radius: 999px;
    background: #e8ecf2;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.equation-keyboard-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
    transition: transform 0.16s ease;
}

.equation-keyboard-preference.is-active .equation-keyboard-switch {
    border-color: #7793be;
    background: #9cb2d2;
}

.equation-keyboard-preference.is-active .equation-keyboard-switch::after {
    transform: translateX(14px);
}

.equation-keyboard-preference-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.equation-keyboard-preference input:focus-visible + .equation-keyboard-switch {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.inline-gaps-slot-equation {
    width: auto;
    min-width: 0;
    vertical-align: middle;
}

.choose-correct-slot.inline-gaps-slot-equation {
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    min-width: 0;
    max-width: none;
}

.equation-field-frame-compact {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
}

.inline-gaps-slot-equation .equation-field-frame-compact math-field.equation-input {
    flex: 0 0 min(var(--inline-gap-width, 14ch), 24ch);
    width: min(var(--inline-gap-width, 14ch), 24ch);
    min-width: min(var(--inline-gap-width, 14ch), 24ch);
    min-height: 34px;
    padding: 2px 7px;
}

.equation-field-controls.is-compact {
    gap: 4px;
}

.equation-field-controls.is-compact .equation-keyboard-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
}

@media (max-width: 720px) {
    .equation-entry,
    .equation-field-frame {
        flex-wrap: wrap;
    }

    .equation-keyboard-preference-label {
        max-width: 128px;
    }
}

math-field.equation-input.is-numeric-slot-incorrect {
    border-color: #dc2626;
    background: #fef2f2;
}

math-field.equation-input.is-numeric-slot-typo {
    border-color: #d97706;
    background: #fffbeb;
}

math-field.equation-input.is-numeric-slot-correct {
    border-color: #16a34a;
    background: #f0fdf4;
}

.equation-field-frame:has(.equation-cyrillic-warning:not([hidden])) {
    position: relative;
}

math-field.equation-input.has-disallowed-cyrillic,
math-field.equation-input.has-disallowed-cyrillic:focus,
math-field.equation-input.has-disallowed-cyrillic:focus-within {
    border-color: #d6a21c;
    background: #fff8d8;
    box-shadow: 0 0 0 3px rgba(214, 162, 28, 0.16);
}

.equation-cyrillic-warning {
    position: absolute;
    z-index: 120;
    top: calc(100% + 5px);
    left: 8px;
    width: max-content;
    max-width: min(19rem, calc(100vw - 32px));
    padding: 5px 9px;
    border: 1px solid rgba(180, 126, 7, 0.32);
    border-radius: 8px;
    background: #fff8d8;
    color: #755208;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.25;
    box-shadow: 0 5px 14px rgba(84, 64, 20, 0.12);
    pointer-events: none;
}

.equation-cyrillic-warning[hidden] {
    display: none;
}

.material-detail-card.has-applet-theory {
    --applet-theory-width: 300px;
    --applet-theory-effective-width: var(--applet-theory-width);
    --applet-frame-height: 520px;
    transition: width 0.2s ease, margin 0.2s ease;
}

.material-detail-card.has-applet-devices {
    --applet-device-width: 280px;
    --applet-device-effective-width: var(--applet-device-width);
    --applet-device-stacked-width: 50%;
    transition: width 0.2s ease, margin 0.2s ease;
}

.applet-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.applet-detail-layout.has-theory-panel {
    grid-template-columns: minmax(0, 1fr) 8px var(--applet-theory-effective-width);
    grid-template-areas: "main theory-resizer theory";
}

.applet-detail-main {
    grid-area: main;
    min-width: 0;
    height: fit-content;
    align-self: start;
}

.applet-theory-resizer {
    grid-area: theory-resizer;
    position: relative;
    align-self: stretch;
    min-height: 180px;
    padding: 0;
    cursor: col-resize;
    touch-action: none;
}

.applet-theory-resizer::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 2px;
    border-radius: 2px;
    background: #d8e0eb;
    transform: translateX(-50%);
    transition: width 0.16s ease, background 0.16s ease;
}

.applet-theory-resizer:hover::before,
.applet-theory-resizer:focus-visible::before,
.applet-theory-resizer.is-resizing::before {
    width: 4px;
    background: #7c96b8;
}

.applet-theory-resizer:focus-visible {
    outline: none;
}

.applet-theory-panel {
    grid-area: theory;
    position: sticky;
    top: 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--applet-frame-height);
    max-height: none;
    overflow: hidden;
    border: 1px solid rgba(190, 199, 213, 0.92);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.applet-theory-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 11px 16px;
    border-bottom: 1px solid #dfe6ef;
    background: #f2f5f9;
    border-radius: 21px 21px 0 0;
}

.applet-theory-header h2 {
    margin: 2px 0 0;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.applet-theory-eyebrow {
    color: #66758b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.applet-theory-collapse,
.applet-theory-reopen {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid #c4cfde;
    border-radius: 9px;
    background: #f7f9fc;
    color: #40536d;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: none;
}

.applet-theory-arrow-stacked {
    display: none;
}

.applet-theory-arrow-side,
.applet-theory-arrow-stacked {
    position: absolute;
    inset: 0;
    place-items: center;
    color: inherit;
}

.applet-theory-arrow-side {
    display: grid;
}

.applet-theory-arrow-side svg,
.applet-theory-arrow-stacked svg {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50% 50%;
}

.applet-theory-collapse .applet-theory-arrow-side svg {
    transform: rotate(0deg);
}

.applet-theory-reopen .applet-theory-arrow-side svg {
    transform: rotate(180deg);
}

.applet-theory-collapse,
.applet-theory-reopen {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.applet-theory-collapse:hover,
.applet-theory-collapse:focus-visible,
.applet-theory-reopen:hover,
.applet-theory-reopen:focus-visible {
    border-color: #8ea3bf;
    background: #e9eef5;
    color: #263b57;
    transform: none;
}

.applet-theory-collapse:hover,
.applet-theory-collapse:focus-visible,
.applet-theory-reopen:hover,
.applet-theory-reopen:focus-visible {
    transform: translate(-50%, -50%);
}

.applet-theory-body {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    overflow: auto;
    padding: 12px 16px 28px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.applet-theory-body > :first-child {
    margin-top: 0;
}

.applet-theory-body h1 {
    margin: 2px 0 12px;
    font-size: 1.16rem;
    line-height: 1.28;
    letter-spacing: 0;
}

.applet-theory-body h2 {
    margin: 22px -6px 8px;
    padding: 7px 6px;
    border-left: 3px solid #b5c4d8;
    border-radius: 3px;
    font-size: 0.98rem;
    line-height: 1.3;
    letter-spacing: 0;
    scroll-margin-top: 12px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.applet-theory-body h3 {
    margin: 15px 0 6px;
    color: #344966;
    font-size: 0.9rem;
    line-height: 1.3;
    letter-spacing: 0;
}

.applet-theory-body p,
.applet-theory-body li {
    font-size: 0.86rem;
    line-height: 1.52;
}

.applet-theory-body ul,
.applet-theory-body ol {
    padding-left: 20px;
}

.applet-theory-body h1.is-applet-theory-target,
.applet-theory-body h2.is-applet-theory-target,
.applet-theory-body h3.is-applet-theory-target {
    border-color: #3774b9;
    background: #eaf2fb;
    box-shadow: 0 0 0 3px rgba(55, 116, 185, 0.13);
}

.applet-detail-layout.has-device-panel.has-theory-panel {
    grid-template-columns:
        var(--applet-device-effective-width)
        8px
        minmax(0, 1fr)
        8px
        var(--applet-theory-effective-width);
    grid-template-areas: "devices device-resizer main theory-resizer theory";
}

.applet-detail-layout.has-device-panel:not(.has-theory-panel) {
    grid-template-columns: var(--applet-device-effective-width) 8px minmax(0, 1fr);
    grid-template-areas: "devices device-resizer main";
}

.applet-device-resizer {
    grid-area: device-resizer;
    position: relative;
    align-self: stretch;
    min-height: 180px;
    padding: 0;
    cursor: col-resize;
    touch-action: none;
}

.applet-device-resizer[hidden],
.applet-device-panel[hidden] {
    display: none !important;
}

.applet-device-resizer::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 2px;
    border-radius: 2px;
    background: #d8e0eb;
    transform: translateX(-50%);
    transition: width 0.16s ease, background 0.16s ease;
}

.applet-device-resizer:hover::before,
.applet-device-resizer:focus-visible::before,
.applet-device-resizer.is-resizing::before {
    width: 4px;
    background: #7c96b8;
}

.applet-device-resizer:focus-visible {
    outline: none;
}

.applet-device-panel {
    grid-area: devices;
    position: sticky;
    top: 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--applet-frame-height);
    overflow: hidden;
    border: 1px solid rgba(190, 199, 213, 0.92);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.applet-device-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 22px;
    min-width: 22px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid #c4cfde;
    border-radius: 9px;
    background: #f7f9fc;
    color: #40536d;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.applet-device-toggle:hover,
.applet-device-toggle:focus-visible {
    border-color: #8ea3bf;
    background: #e9eef5;
    color: #263b57;
    transform: translate(-50%, -50%);
}

.applet-device-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(180deg);
    transition: transform 0.16s ease;
}

.applet-detail-layout.is-device-collapsed .applet-device-toggle svg,
.applet-detail-layout.is-stacked-theory-collapsed .applet-device-toggle svg {
    transform: rotate(0deg);
}

.applet-detail-layout.is-device-collapsed .applet-device-panel {
    display: none;
}

.applet-device-panel-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 58px;
    padding: 9px 12px 9px 16px;
    border-bottom: 1px solid #dfe6ef;
    border-radius: 21px 21px 0 0;
    background: #f2f5f9;
}

.applet-device-panel-header > div:not(.applet-device-plot-options) {
    min-width: 0;
}

.applet-device-panel-header h2 {
    margin: 2px 0 0;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.applet-device-add-plot {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 30px;
    margin-left: auto;
    padding: 5px;
    border: 1px solid #c8d3e1;
    border-radius: 7px;
    background: #ffffff;
    color: #344a67;
    box-shadow: none;
}

.applet-device-add-plot svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.applet-device-add-plot:hover,
.applet-device-add-plot:focus-visible {
    border-color: #8ea3bf;
    background: #e9eef5;
    color: #263b57;
    transform: none;
}

.applet-device-add-plot:disabled {
    cursor: default;
    opacity: 0.48;
}

.applet-device-plot-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    flex: 0 0 100%;
    gap: 4px;
    max-height: 111px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 2px;
    scrollbar-width: thin;
}

.applet-device-plot-options[hidden] {
    display: none;
}

.applet-device-workspace {
    display: none !important;
}

.applet-device-plot-options.is-floating-picker {
    position: fixed;
    z-index: 10040;
    width: min(280px, calc(100vw - 16px));
    max-height: 111px;
    padding: 7px;
    border: 1px solid #b9c7d8;
    border-radius: 8px;
    background: rgba(248, 250, 253, 0.96);
    box-shadow: 0 12px 30px rgba(24, 43, 67, 0.22);
    backdrop-filter: blur(8px);
}

.applet-device-plot-option {
    display: inline-grid;
    place-items: center;
    min-width: 0;
    min-height: 33px;
    padding: 5px 7px;
    border: 1px solid #c8d3e1;
    border-radius: 6px;
    background: #ffffff;
    color: #344a67;
    font-family: "Bahnschrift", "Arial Narrow", var(--font-sans);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.applet-device-plot-option:hover,
.applet-device-plot-option:focus-visible {
    border-color: #8ea3bf;
    background: #e3edf8;
    color: #193b61;
    transform: none;
}

.applet-device-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 9px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
}

.applet-device-card {
    container-type: inline-size;
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
    background: #fbfcfe;
}

.applet-device-card.is-dragging {
    opacity: 0.62;
}

.applet-device-floating-window {
    --applet-detached-reading-width: 200px;
    --applet-detached-reading-height: 50px;
    position: fixed;
    z-index: 10020;
    display: flex;
    min-width: 0;
    min-height: 0;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
    border: 1px solid #aebdce;
    border-radius: 9px;
    background: #fbfcfe;
    box-shadow: 0 12px 30px rgba(24, 43, 67, 0.24);
}

.applet-device-floating-window > .applet-device-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    border: 0;
    border-radius: 8px;
}

.applet-device-floating-window.is-digital {
    width: 200px;
    height: auto;
}

.applet-device-floating-window.is-digital > .applet-device-card {
    width: 100%;
    min-height: 0;
}

.applet-device-floating-window.is-analog {
    min-width: 220px;
    min-height: 180px;
    max-width: min(500px, calc(100vw - 16px));
    max-height: min(500px, calc(100vh - 16px));
}

.applet-device-floating-window.is-plot {
    min-width: 280px;
    min-height: 240px;
    max-width: min(800px, calc(100vw - 16px));
    max-height: min(600px, calc(100vh - 16px));
}

.applet-device-floating-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
}

.applet-device-floating-resize::before {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #8799ae;
    border-bottom: 2px solid #8799ae;
}

.applet-device-card.is-detached .applet-device-card-header {
    grid-template-areas: "title close";
    grid-template-columns: minmax(0, 1fr) 28px;
}

.applet-device-card.is-digital.is-detached .applet-device-card-header {
    grid-template-areas:
        "title close"
        "reading reading";
    grid-template-columns: minmax(0, 1fr) 28px;
}

.applet-device-plot-card.is-detached .applet-device-card-header {
    grid-template-areas: "title swap download close";
    grid-template-columns: minmax(0, 1fr) 28px 28px 28px;
}

.applet-device-fixed-plot-card.is-detached .applet-device-card-header {
    grid-template-areas: "title download close";
    grid-template-columns: minmax(0, 1fr) 28px 28px;
}

.applet-device-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 28px;
    align-items: center;
    min-height: 34px;
    border-bottom: 1px solid #e1e7ef;
    background: #f2f5f9;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.applet-device-card-header:active {
    cursor: grabbing;
}

.applet-device-card-header:focus-visible {
    outline: 2px solid #7796bd;
    outline-offset: -2px;
}

.applet-device-card-title {
    grid-area: title;
    overflow: hidden;
    color: #263b57;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.applet-device-card:not(.applet-device-plot-card):not(.is-detached) .applet-device-card-header {
    grid-template-areas: "title reading plot close";
}

.applet-device-close,
.applet-device-return,
.applet-device-plot-create,
.applet-device-plot-download {
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #607088;
    box-shadow: none;
}

.applet-device-close:hover,
.applet-device-close:focus-visible,
.applet-device-return:hover,
.applet-device-return:focus-visible,
.applet-device-plot-create:hover,
.applet-device-plot-create:focus-visible,
.applet-device-plot-download:hover,
.applet-device-plot-download:focus-visible {
    background: #e6ecf4;
    color: #263b57;
    transform: none;
}

.applet-device-close svg,
.applet-device-return svg,
.applet-device-plot-create svg,
.applet-device-plot-download svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.applet-device-preview {
    display: grid;
    place-items: center;
    min-height: 112px;
    overflow: hidden;
    padding: 10px;
    background: #ffffff;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.applet-device-preview.is-panning {
    cursor: grabbing;
}

.applet-device-preview-viewport {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: inherit;
    transform-origin: center;
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.applet-device-preview.is-panning .applet-device-preview-viewport {
    transition: none;
}

.applet-device-preview-viewport > svg,
.applet-device-preview-viewport > .applet-device-html-snapshot {
    display: block;
    width: min(100%, var(--applet-device-natural-width, 100%));
    max-width: 100%;
    height: auto;
    max-height: min(360px, calc(var(--applet-frame-height) - 120px));
}

.applet-device-preview-viewport > svg {
    aspect-ratio: var(--applet-device-aspect, 1);
}

.applet-device-floating-window.is-analog .applet-device-preview {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.applet-device-floating-window.is-analog .applet-device-preview-viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.applet-device-floating-window.is-analog .applet-device-preview-viewport > svg,
.applet-device-floating-window.is-analog .applet-device-preview-viewport > .applet-device-html-snapshot {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
}

.applet-device-card.is-digital .applet-device-card-header {
    grid-template-areas: "title reading plot close";
    grid-template-columns: minmax(72px, 1fr) auto 28px 28px;
    min-height: 40px;
    border-bottom: 0;
}

.applet-device-card.is-digital .applet-device-card-title {
    grid-area: title;
    padding-inline: 6px 6px;
    font-size: 0.76rem;
    text-align: left;
}

.applet-device-card.is-digital .applet-device-preview {
    display: none;
}

.applet-device-compact-reading {
    grid-area: reading;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    padding-inline: 6px;
    color: #20334d;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}

.applet-device-plot-create {
    grid-area: plot;
}

.applet-device-close {
    grid-area: close;
}

.applet-device-return {
    grid-area: return;
}

.applet-device-compact-reading[hidden],
.applet-device-plot-create[hidden] {
    display: none !important;
}

.applet-device-compact-reading strong {
    min-width: 2ch;
    color: #162b44;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1;
}

.applet-device-reading-symbol {
    color: #263b57;
    font-family: "Bahnschrift", "Arial Narrow", var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
}

.applet-device-compact-reading [data-applet-device-reading-unit] {
    color: #65758b;
    font-size: 0.72rem;
    font-weight: 700;
}

.applet-device-card.is-digital .applet-device-plot-create {
    grid-area: plot;
}

.applet-device-card.is-digital .applet-device-close {
    grid-area: close;
}

.applet-device-card.is-digital .applet-device-return {
    grid-area: return;
}

.applet-device-card.is-digital.is-detached .applet-device-card-title {
    padding-inline: 10px 6px;
    font-size: 0.9rem;
}

.applet-device-card.is-digital.is-detached .applet-device-plot-create {
    display: none !important;
}

.applet-device-card.is-digital.is-detached .applet-device-compact-reading {
    display: inline-flex;
    justify-content: center;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: min(var(--applet-detached-reading-height), 100px);
    min-height: 0;
    max-height: 100px;
    padding: 6px 10px;
    border-top: 1px solid #e1e7ef;
    background: #ffffff;
}

.applet-device-card.is-digital.is-detached .applet-device-reading-symbol {
    font-size: 1.25rem;
}

.applet-device-card.is-digital.is-detached .applet-device-compact-reading strong {
    font-size: 2rem;
    font-weight: 750;
}

.applet-device-card.is-digital.is-detached .applet-device-compact-reading [data-applet-device-reading-unit] {
    font-size: 0.92rem;
}

.applet-device-detached-options {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-self: stretch;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: none;
    padding: 9px 24px 9px 9px;
    border-top: 1px solid #dfe6ef;
    background: #f2f5f9;
}

.applet-device-detached-options .applet-device-plot-option {
    flex: 0 0 auto;
    min-width: 62px;
}

.applet-device-detached-options[hidden] {
    display: none;
}

.applet-device-plot-card {
    background: #f6f8fb;
}

.applet-device-plot-card .applet-device-card-header {
    grid-template-areas: "title swap download close";
    grid-template-columns: minmax(0, 1fr) 28px 28px 28px;
}

.applet-device-plot-card .applet-device-plot-swap {
    grid-area: swap;
}

.applet-device-plot-card .applet-device-plot-download {
    grid-area: download;
}

.applet-device-plot-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    padding-inline: 4px;
    text-overflow: clip;
    white-space: nowrap;
}

.applet-device-plot-title-prefix {
    flex: 0 0 auto;
}

.applet-device-plot-title.is-compact .applet-device-plot-title-prefix {
    display: none;
}

.applet-device-plot-slot {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 1.5em;
    padding: 1px 4px;
    border-bottom: 1px dashed currentColor;
    border-radius: 3px;
    color: #174f88;
    cursor: pointer;
}

.applet-device-plot-slot:hover,
.applet-device-plot-slot:focus-within,
.applet-device-plot-slot.is-drop-target {
    background: #dce9f8;
    color: #103f70;
}

.applet-device-plot-slot.is-empty {
    min-width: 1.7em;
    color: #65758b;
}

.applet-device-plot-slot select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.applet-device-plot-swap {
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #607088;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}

.applet-device-plot-swap:hover,
.applet-device-plot-swap:focus-visible {
    background: #e6ecf4;
    color: #263b57;
    transform: none;
}

.applet-device-plot-controls {
    display: grid;
    grid-template-columns: auto minmax(56px, 1fr) 30px;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid #27303b;
    background: #1b222b;
    color: #dce3ec;
}

.applet-device-plot-timeframe {
    display: contents;
    color: #dce3ec;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
}

.applet-device-plot-timeframe > span {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 4px;
    color: inherit;
}

.applet-device-plot-timeframe output {
    color: #9fb0c3;
    font-variant-numeric: tabular-nums;
}

.applet-device-plot-timeframe input {
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: #55d6ff;
}

.applet-device-plot-timeframe input::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: #526171;
}

.applet-device-plot-timeframe input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    border: 1px solid #d9f5ff;
    border-radius: 50%;
    appearance: none;
    background: #55d6ff;
}

.applet-device-plot-timeframe input::-moz-range-track {
    width: 100%;
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: #526171;
}

.applet-device-plot-timeframe input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 1px solid #d9f5ff;
    border-radius: 50%;
    background: #55d6ff;
}

.applet-device-plot-play {
    display: inline-grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e7edf4;
    box-shadow: none;
}

.applet-device-floating-tooltip {
    position: fixed;
    z-index: 10050;
    max-width: min(280px, calc(100vw - 16px));
    padding: 6px 9px;
    border: 1px solid rgba(220, 228, 238, 0.24);
    border-radius: 6px;
    background: rgba(31, 39, 49, 0.96);
    color: #f6f8fb;
    box-shadow: 0 5px 16px rgba(15, 23, 35, 0.24);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.applet-device-floating-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.applet-device-plot-play:hover,
.applet-device-plot-play:focus-visible {
    background: transparent;
    color: #ffffff;
    transform: none;
}

.applet-device-plot-play svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.applet-device-plot-play svg path[d$="Z"] {
    fill: currentColor;
    stroke: currentColor;
}

.applet-device-plot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    background: #11151b;
}

.applet-device-floating-window.is-plot .applet-device-plot-card {
    height: 100%;
    min-height: 0;
}

.applet-device-floating-window.is-plot .applet-device-plot {
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

.applet-device-floating-window.is-plot .applet-device-plot-controls {
    flex: 0 0 auto;
    margin-top: auto;
    padding-right: 24px;
}

@container (max-width: 230px) {
    .applet-device-card.is-digital .applet-device-card-header {
        grid-template-areas:
            "title plot close"
            "reading reading reading";
        grid-template-columns: minmax(0, 1fr) 28px 28px;
        padding-bottom: 4px;
    }

    .applet-device-card.is-digital .applet-device-compact-reading {
        justify-self: center;
        padding-block: 2px;
    }
}

.applet-theory-reopen {
    display: none;
    font-size: 1.25rem;
    font-weight: 700;
}

.applet-detail-layout.is-theory-collapsed.has-theory-panel {
    grid-template-columns: minmax(0, 1fr) 26px;
    grid-template-areas: "main theory-resizer";
}

.applet-detail-layout.is-theory-collapsed .applet-theory-panel {
    display: none;
}

.applet-detail-layout.is-theory-collapsed .applet-theory-reopen {
    display: inline-flex;
}

.applet-detail-layout.is-theory-collapsed .applet-theory-collapse {
    display: none;
}

@media (min-width: 1280px) {
    .material-detail-card.has-applet-theory:not(.is-applet-theory-collapsed) {
        --applet-detail-expanded-width: min(
            calc(100% + var(--applet-theory-width) + 18px),
            calc(100vw - 32px)
        );
        width: var(--applet-detail-expanded-width);
        margin-left: calc((100% - var(--applet-detail-expanded-width)) / 2);
    }
}

@media (min-width: 1280px) and (max-width: 1479px) {
    .material-detail-card.has-applet-theory {
        --applet-theory-effective-width: min(var(--applet-theory-width), 21vw);
    }
}

@media (max-width: 1279px) {
    .material-detail-card.has-applet-theory,
    .material-detail-card.has-applet-devices {
        width: 100%;
        margin-left: 0;
    }

    .applet-detail-layout {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .applet-detail-layout.has-theory-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "theory-resizer"
            "theory";
    }

    .applet-theory-resizer {
        display: block;
        width: 100%;
        height: 10px;
        min-height: 10px;
        cursor: row-resize;
        touch-action: none;
    }

    .applet-theory-resizer::before {
        top: 50%;
        right: 8px;
        bottom: auto;
        left: 8px;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
    }

    .applet-theory-resizer:hover::before,
    .applet-theory-resizer:focus-visible::before,
    .applet-theory-resizer.is-resizing::before {
        width: auto;
        height: 2px;
        background: #d8e0eb;
    }

    .applet-theory-collapse,
    .applet-theory-reopen {
        width: 38px;
        min-width: 38px;
        height: 22px;
        min-height: 22px;
        border-radius: 9px;
        font-size: 1.25rem;
    }

    .applet-theory-arrow-side {
        display: none;
    }

    .applet-theory-arrow-stacked {
        display: grid;
    }

    .applet-theory-collapse .applet-theory-arrow-stacked svg {
        transform: rotate(-90deg);
    }

    .applet-theory-reopen .applet-theory-arrow-stacked svg {
        transform: rotate(90deg);
    }

    .applet-theory-panel {
        position: relative;
        top: auto;
        width: 100%;
        height: var(--applet-theory-stacked-height, clamp(180px, 24vh, 240px));
        max-height: min(70vh, 640px);
    }

    .applet-theory-header {
        align-items: center;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .applet-theory-header > div {
        display: flex;
        align-items: baseline;
        gap: 9px;
        min-width: 0;
    }

    .applet-theory-header h2 {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .applet-detail-layout.is-theory-collapsed:not(.has-device-panel) {
        grid-template-columns: minmax(0, 1fr);
    }

    .applet-detail-layout.is-theory-collapsed:not(.has-device-panel) {
        grid-template-areas:
            "main"
            "theory-resizer";
    }
}

@media (min-width: 1280px) {
    .applet-detail-layout.has-device-panel.is-theory-collapsed {
        grid-template-columns:
            var(--applet-device-effective-width)
            8px
            minmax(0, 1fr)
            26px;
        grid-template-areas: "devices device-resizer main theory-resizer";
    }

    .applet-detail-layout.has-device-panel.is-device-collapsed.has-theory-panel {
        grid-template-columns:
            26px
            minmax(0, 1fr)
            8px
            var(--applet-theory-effective-width);
        grid-template-areas: "device-resizer main theory-resizer theory";
    }

    .applet-detail-layout.has-device-panel.is-device-collapsed.is-theory-collapsed {
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        grid-template-areas: "device-resizer main theory-resizer";
    }

    .applet-detail-layout.has-device-panel.is-device-collapsed:not(.has-theory-panel) {
        grid-template-columns: 26px minmax(0, 1fr);
        grid-template-areas: "device-resizer main";
    }
}

@media (min-width: 1280px) {
    .material-detail-card.has-applet-devices:not(.is-applet-device-collapsed) {
        --applet-detail-expanded-width: min(
            calc(100% + var(--applet-device-width) + 18px),
            calc(100vw - 32px)
        );
        width: var(--applet-detail-expanded-width);
        margin-left: calc((100% - var(--applet-detail-expanded-width)) / 2);
    }

    .material-detail-card.has-applet-theory.has-applet-devices:not(.is-applet-theory-collapsed):not(.is-applet-device-collapsed) {
        --applet-detail-expanded-width: min(
            calc(100% + var(--applet-theory-width) + var(--applet-device-width) + 36px),
            calc(100vw - 32px)
        );
    }
}

@media (min-width: 1280px) and (max-width: 1479px) {
    .material-detail-card.has-applet-devices {
        --applet-device-effective-width: min(var(--applet-device-width), 20vw);
    }
}

@media (max-width: 1279px) {
    .applet-detail-layout.has-device-panel.has-theory-panel {
        grid-template-columns:
            minmax(0, calc(100% - var(--applet-device-stacked-width) - 8px))
            8px
            minmax(0, var(--applet-device-stacked-width));
        grid-template-areas:
            "main main main"
            "theory-resizer theory-resizer theory-resizer"
            "theory device-resizer devices";
        gap: 0;
    }

    .applet-detail-layout.has-device-panel.has-theory-panel > .applet-detail-main {
        grid-area: main;
    }

    .applet-detail-layout.has-device-panel.has-theory-panel > .applet-theory-resizer {
        grid-area: theory-resizer;
    }

    .applet-detail-layout.has-device-panel.has-theory-panel > .applet-theory-panel {
        grid-area: theory;
    }

    .applet-detail-layout.has-device-panel.has-theory-panel > .applet-device-resizer {
        grid-area: device-resizer;
    }

    .applet-detail-layout.has-device-panel.has-theory-panel > .applet-device-panel {
        grid-area: devices;
    }

    .applet-detail-layout.has-device-panel:not(.has-theory-panel) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "device-resizer"
            "devices";
        gap: 0;
    }

    .applet-detail-layout.has-device-panel:not(.has-theory-panel) .applet-device-resizer {
        width: 100%;
        height: 10px;
        min-height: 10px;
    }

    .applet-device-panel {
        position: relative;
        top: auto;
        width: 100%;
        height: var(--applet-theory-stacked-height, clamp(180px, 24vh, 240px));
        max-height: min(70vh, 640px);
    }

    .applet-device-panel-header {
        min-height: 48px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .applet-device-panel-header > div {
        display: flex;
        align-items: baseline;
        gap: 9px;
        min-width: 0;
    }

    .applet-device-panel-header h2 {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .applet-device-list {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .applet-device-card {
        width: min(240px, 100%);
        flex-basis: min(240px, 100%);
    }

    .applet-detail-layout.has-device-panel.is-stacked-theory-collapsed {
        grid-template-columns: 26px minmax(0, 1fr);
        grid-template-areas:
            "main main"
            "theory-resizer theory-resizer"
            "device-resizer devices";
    }

    .applet-detail-layout.has-device-panel.is-stacked-theory-collapsed > .applet-theory-panel {
        display: none;
    }

    .applet-detail-layout.has-device-panel.is-stacked-theory-collapsed > .applet-device-resizer {
        display: block;
    }

    .applet-detail-layout.has-device-panel.is-lower-panels-collapsed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "theory-resizer";
    }

    .applet-detail-layout.has-device-panel.is-lower-panels-collapsed > .applet-theory-panel,
    .applet-detail-layout.has-device-panel.is-lower-panels-collapsed > .applet-device-panel,
    .applet-detail-layout.has-device-panel.is-lower-panels-collapsed > .applet-device-resizer {
        display: none;
    }

    .applet-detail-layout.has-device-panel.is-lower-panels-collapsed .applet-theory-collapse {
        display: none;
    }

    .applet-detail-layout.has-device-panel.is-lower-panels-collapsed .applet-theory-reopen {
        display: inline-flex;
    }
}

.material-detail-header.is-applet-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    align-items: center;
    gap: 12px;
}

.material-detail-title.is-applet-detail-title {
    display: grid;
    grid-template-columns: max-content minmax(280px, 1fr);
    grid-template-areas:
        "title lead"
        "title meta";
    align-items: center;
    column-gap: 36px;
    row-gap: 4px;
}

.material-detail-title.is-applet-detail-title > h1 {
    grid-area: title;
    margin: 0;
    white-space: nowrap;
}

.material-detail-title.is-applet-detail-title > .lead {
    grid-area: lead;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.material-detail-title.is-applet-detail-title > .lesson-meta-row {
    grid-area: meta;
    margin: 0;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.material-detail-title.is-applet-detail-title > .lesson-meta-row .material-step-tags {
    width: 100%;
}

.material-detail-header.is-applet-detail-header > .material-status-stack {
    width: 70px;
    min-width: 70px;
    gap: 4px;
}

.applet-theory-navigation {
    margin: 0 0 10px;
    padding: 7px 9px;
    border: 1px solid #d7e0eb;
    border-radius: 9px;
    background: #f6f8fb;
}

.applet-theory-navigation > strong {
    display: block;
    margin-bottom: 4px;
    color: #344966;
    font-size: 0.82rem;
}

.applet-theory-navigation ul {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.applet-theory-navigation a {
    display: block;
    padding: 2px 4px;
    border-radius: 4px;
    color: #315e9c;
    font-size: 0.8rem;
    line-height: 1.3;
}

.applet-theory-navigation a:hover,
.applet-theory-navigation a:focus-visible {
    background: #e5edf8;
    color: #214f88;
}

.applet-theory-usage {
    margin: 12px 0 10px;
    padding: 10px 11px 8px;
    border: 1px solid #91a8c5;
    border-radius: 9px;
    background: #f2f7fd;
    box-shadow: 0 0 0 0 rgba(55, 116, 185, 0);
}

.applet-theory-usage.is-attention-ready {
    animation: applet-theory-usage-attention 1.15s ease-out 1 both;
}

.applet-theory-body .applet-theory-usage h2 {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 0.94rem;
}

.applet-theory-usage > :last-child {
    margin-bottom: 0;
}

.applet-theory-breakable-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 5px 8px;
    max-width: 100%;
    margin: 8px 0 16px;
    overflow: visible;
}

.applet-theory-formula-step {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.applet-theory-formula-part,
.applet-theory-formula-step {
    max-width: 100%;
}

.applet-theory-formula-part mjx-container,
.applet-theory-formula-step mjx-container {
    max-width: 100%;
}

.applet-theory-formula-part {
    display: inline-block;
    min-width: 0;
    overflow: visible;
}

.applet-theory-formula-step > .applet-theory-formula-part {
    flex: 1 1 auto;
}

@keyframes applet-theory-usage-attention {
    0%, 100% {
        border-color: #91a8c5;
        background: #f2f7fd;
        box-shadow: 0 0 0 0 rgba(55, 116, 185, 0);
    }
    28%, 66% {
        border-color: #d97706;
        background: #fff7ed;
        box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
    }
}

body:has(.material-detail-card.has-applet-theory) .site-main {
    padding-top: 14px;
    padding-bottom: 18px;
}

.applet-top-edge-sensor {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 25;
    height: 10px;
}

body.is-applet-header-auto-hide .site-header {
    position: fixed;
    right: 0;
    left: 0;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}

body.is-applet-header-auto-hide.is-applet-header-visible .site-header,
body.is-applet-header-auto-hide .site-header:focus-within,
body.is-applet-header-auto-hide .site-header:hover {
    transform: translateY(0);
}

@media (max-width: 760px) {
    .material-detail-title.is-applet-detail-title {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "lead"
            "meta";
    }

    .material-detail-title.is-applet-detail-title > h1 {
        white-space: normal;
    }
}

@media (min-width: 761px) and (max-width: 1120px) {
    .material-detail-title.is-applet-detail-title {
        grid-template-columns: minmax(300px, 0.85fr) minmax(260px, 1.15fr);
    }


    .material-detail-title.is-applet-detail-title > h1 {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .applet-theory-usage.is-attention-ready {
        animation: none;
    }
}
.experience-help-rail {
    --help-rail-width: 316px;
    position: fixed;
    z-index: 12000;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    color: #17324f;
    pointer-events: none;
}

.fast-edit-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid rgba(29, 58, 92, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: #24476d;
    font: 600 16px/1 system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(21, 45, 74, 0.08);
}

.fast-edit-button:hover,
.fast-edit-button:focus-visible {
    border-color: #4778aa;
    background: #eef6ff;
    color: #123b65;
}

.fast-edit-button[hidden] {
    display: none !important;
}

.fast-edit-open {
    overflow: hidden;
}

.fast-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(18, 31, 47, 0.42);
    backdrop-filter: blur(2px);
}

.fast-edit-backdrop[hidden] {
    display: none;
}

.fast-edit-dialog {
    display: grid;
    grid-template-rows: auto minmax(260px, 1fr) auto;
    width: min(940px, calc(100vw - 56px));
    height: min(78vh, 760px);
    overflow: hidden;
    border: 1px solid rgba(30, 57, 87, 0.28);
    border-radius: 18px;
    background: #fbfcfe;
    box-shadow: 0 24px 70px rgba(14, 32, 54, 0.28);
}

.fast-edit-dialog-header,
.fast-edit-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
}

.fast-edit-dialog-header {
    border-bottom: 1px solid rgba(30, 57, 87, 0.12);
}

.fast-edit-dialog-header h2,
.fast-edit-dialog-header p,
.fast-edit-dialog-footer p {
    margin: 0;
}

.fast-edit-source {
    color: #708090;
    font: 500 0.76rem/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.fast-edit-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #40536a;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.fast-edit-close:hover,
.fast-edit-close:focus-visible {
    background: #edf2f7;
}

.fast-edit-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    resize: none;
    border: 0;
    border-radius: 0;
    outline: none;
    padding: 18px 20px;
    background: #fff;
    color: #17283b;
    font: 500 14px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    tab-size: 4;
}

.fast-edit-textarea:focus {
    box-shadow: inset 0 0 0 2px rgba(52, 115, 178, 0.22);
}

.fast-edit-dialog-footer {
    border-top: 1px solid rgba(30, 57, 87, 0.12);
}

.fast-edit-status {
    min-height: 1.2em;
    color: #526477;
    font-size: 0.88rem;
}

.fast-edit-status.is-error {
    color: #a82a2a;
}

.fast-edit-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.home-guidance-item,
.home-fact-card {
    position: relative;
}

.home-guidance-item > .fast-edit-button,
.home-fact-card > .fast-edit-button {
    position: absolute;
    top: 8px;
    right: 8px;
}

.learning-tree-details-top {
    align-items: flex-start;
}

.learning-tree-mini-tree-selection-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.learning-tree-mini-tree-selection-heading p {
    margin: 0;
}

.experience-help-head .fast-edit-button {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    margin-left: auto;
}

.experience-help-rail[hidden] {
    display: none;
}

.experience-help-connectors {
    position: fixed;
    z-index: 11999;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
}

.experience-help-connector-line {
    fill: none;
    stroke: #607da8;
    stroke-width: 1.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.experience-help-connector-dot {
    fill: #607da8;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.is-experience-help-pointed {
    outline: 2px solid rgba(96, 125, 168, 0.5);
    outline-offset: 4px;
}

.experience-help-rail.is-open {
    top: 50%;
    right: 0;
    width: var(--help-rail-width);
    height: auto;
    transform: translateY(-50%);
}

.experience-help-tab {
    position: absolute;
    inset: 0;
    width: 38px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #b8cadc;
    border-radius: 50%;
    background: #edf5fc;
    color: #174d78;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 13px rgba(25, 59, 91, 0.18);
    transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.experience-help-tab:hover,
.experience-help-tab:focus-visible {
    border-color: #7ca5c5;
    background: #dcecf8;
    box-shadow: 0 5px 16px rgba(25, 59, 91, 0.24);
}

.experience-help-rail.is-open .experience-help-tab {
    display: none;
}

.experience-help-panel {
    width: 100%;
    min-height: 230px;
    padding: 20px 22px 18px;
    border: 1px solid #b8cadc;
    border-right: 0;
    border-radius: 18px 0 0 18px;
    background: rgba(250, 253, 255, 0.98);
    box-shadow: -9px 12px 28px rgba(25, 59, 91, 0.16);
    /* The rail may overlap the edge of an exercise on narrower desktop
       viewports.  Its background and copy must not make cards underneath
       impossible to drag; only the panel's real controls capture input. */
    pointer-events: none;
}

.experience-help-panel button,
.experience-help-panel select {
    pointer-events: auto;
}

.experience-help-head,
.experience-help-nav,
.experience-help-setting {
    display: flex;
    align-items: center;
}

.experience-help-head {
    justify-content: space-between;
    margin-bottom: 8px;
}

.experience-help-kicker {
    color: #668199;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.experience-help-head button,
.experience-help-nav button {
    border: 0;
    background: transparent;
    color: #315c7d;
    cursor: pointer;
}

.experience-help-head button {
    padding: 0 2px;
    font-size: 24px;
}

.experience-help-panel h2 {
    margin: 0 0 8px;
    font-size: 19px;
}

.experience-help-panel p {
    margin: 0 0 16px;
    color: #415b70;
    font-size: 14px;
    line-height: 1.48;
    white-space: pre-line;
}

.experience-help-nav {
    gap: 8px;
    min-height: 34px;
}

.experience-help-nav > span {
    min-width: 40px;
    color: #6b8193;
    font-size: 12px;
    text-align: center;
}

.experience-help-nav button:disabled {
    opacity: 0.3;
    cursor: default;
}

.experience-help-nav .experience-help-ok {
    margin-left: auto;
    padding: 7px 13px;
    border: 1px solid #9db8ce;
    border-radius: 9px;
    background: #e6f1fa;
    font-weight: 650;
}

.experience-help-setting {
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #dce7ef;
    color: #61798d;
    font-size: 12px;
}

.experience-help-setting select {
    min-width: 142px;
    max-width: 170px;
    padding: 5px 7px;
    border: 1px solid #c4d3df;
    border-radius: 7px;
    background: #fff;
    color: #28475f;
    font: inherit;
}

@media (max-width: 900px) {
    .experience-help-rail {
        --help-rail-width: min(316px, calc(100vw - 44px));
    }
}
.practice-mode-switch {
    width: fit-content;
    margin: 0.55rem 0 0.85rem;
}

.practice-feed-debug-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
    font-size: 0.82rem;
}

.practice-feed-debug-lessons,
.practice-feed-debug-choice {
    margin: 0.45rem 0;
}

.practice-feed-coverage-warnings {
    margin: 0.55rem 0;
    padding: 0.38rem 0.6rem;
    border: 1px solid rgba(179, 101, 21, 0.34);
    border-radius: var(--radius-sm);
    background: #fff9ef;
    color: #70420d;
    font-size: 0.82rem;
}

.practice-feed-coverage-warnings summary {
    cursor: pointer;
    font-weight: 600;
}

.practice-feed-coverage-warnings ul {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
}

.practice-feed-coverage-warnings strong {
    color: #bd1e2d;
    font-weight: 800;
}
.practice-feed-debug-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.practice-feed-debug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.practice-feed-debug-table th,
.practice-feed-debug-table td {
    padding: 0.24rem 0.35rem;
    border-bottom: 1px solid rgba(28, 56, 88, 0.13);
    text-align: left;
    white-space: nowrap;
}

.practice-feed-debug-table tr.is-rare {
    opacity: 0.56;
}

[data-practice-debug-tooltip] {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(38, 73, 109, 0.38);
    text-underline-offset: 0.16em;
}

.practice-debug-floating-tooltip {
    position: fixed;
    z-index: 100000;
    width: max-content;
    max-width: min(340px, calc(100vw - 24px));
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--color-heading);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(14, 35, 58, 0.2);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.practice-debug-floating-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.debug-value-outlier {
    color: #bd1e2d;
    font-weight: 800;
}

.debug-value-satisfied {
    color: #237a3b;
    font-weight: 800;
}

.debug-value-change {
    margin-left: 0.14em;
    font-size: 0.68rem;
    font-weight: 800;
}

.debug-value-change.is-positive {
    color: #26833f;
}

.debug-value-change.is-negative {
    color: #c12b3b;
}

/* Adaptive practice controls and goal indicators. */
.practice-actions {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.practice-actions.no-hint {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.practice-skip-button {
    position: relative;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #afbdcc;
    border-radius: 999px;
    background: #f7fafc;
    color: #4d6175;
    font-size: 0.86rem;
    font-weight: 650;
}

.practice-skip-button:hover,
.practice-skip-button:focus-visible {
    border-color: #8da1b5;
    background: #edf3f8;
    color: #263b51;
}

@media (max-width: 760px) {
    .practice-actions {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .practice-actions.is-theory-complete,
    .practice-actions.is-theory-complete.no-hint {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .practice-actions .practice-hint-button,
    .practice-actions .practice-side-link {
        display: none;
    }

    .practice-feed-goals {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    }
}
.home-lesson-deadlines {
    display: grid;
    grid-template-columns: repeat(var(--home-notification-count, 1), minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0;
}

.home-lesson-deadline {
    position: relative;
    min-width: 0;
    min-height: 84px;
    overflow: visible;
    border: 1px solid var(--priority-border, rgba(160, 120, 35, 0.3));
    border-radius: 12px;
    background: color-mix(in srgb, var(--priority-color, #8a741e) 7%, white);
    color: var(--priority-color, #604b21);
    transition: box-shadow 0.14s ease, transform 0.14s ease;
}

.home-lesson-deadline:hover,
.home-lesson-deadline:focus-visible {
    box-shadow: 0 8px 20px rgba(45, 55, 73, 0.1);
    transform: translateY(-1px);
}

.home-lesson-deadline-link {
    display: grid;
    align-content: center;
    gap: 0.18rem;
    min-height: 100%;
    padding: 0.72rem 2.15rem 0.72rem 0.85rem;
    color: inherit;
    text-decoration: none;
}

.home-lesson-deadline-link strong {
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.25;
}

.home-lesson-deadline-link span {
    display: -webkit-box;
    overflow: hidden;
    color: color-mix(in srgb, currentColor 82%, #516173);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-lesson-deadline[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 8px;
    bottom: calc(100% + 8px);
    z-index: 90;
    width: min(360px, calc(100vw - 32px));
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-heading);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 40, 0.16);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.home-lesson-deadline[data-tooltip]:hover::after,
.home-lesson-deadline[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

@keyframes practice-progress-lime-aura {
    0%, 100% { box-shadow: 0 0 0 0 rgba(48, 255, 32, 0); }
    35% { box-shadow: 0 0 0 5px rgba(48, 255, 32, 0.24), 0 0 18px rgba(48, 255, 32, 0.52); }
}

.practice-feed-goal.is-progress-flash .practice-feed-goal-gauge {
    animation: practice-progress-lime-aura 0.72s ease-out;
}

.home-lesson-deadline form {
    position: absolute;
    top: 6px;
    right: 6px;
}

.home-notification-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1;
    opacity: 0.58;
}

.home-notification-close:hover,
.home-notification-close:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: currentColor;
    opacity: 1;
    transform: none;
}

.home-lesson-deadline.is-urgent {
    border-color: rgba(180, 46, 54, 0.55);
    background: #fff0f1;
    color: #8d2029;
}

.schedule-page {
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 64px;
}

.schedule-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.schedule-page-header h1,
.schedule-page-header p,
.schedule-item h2,
.schedule-item h3,
.schedule-item p {
    margin-top: 0;
}

.schedule-list,
.schedule-suspended-list {
    display: grid;
    gap: 14px;
}

.schedule-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px 24px;
    padding: 20px 22px;
}

.schedule-item-hitbox {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
}

.schedule-item-hitbox:focus-visible {
    outline: 3px solid rgba(47, 114, 185, 0.34);
    outline-offset: 2px;
}

.schedule-item-main,
.schedule-sequence,
.schedule-item > .schedule-task-icon {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.schedule-item > .schedule-task-icon {
    align-self: start;
    width: 42px;
    height: 42px;
}

.schedule-item-importance,
.schedule-sequence a {
    pointer-events: auto;
}

.schedule-item:not(.is-suspended):hover {
    box-shadow: 0 12px 28px rgba(34, 51, 75, 0.11);
}

.schedule-item-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.schedule-item-heading h2,
.schedule-item-heading h3 {
    margin-bottom: 7px;
    font-size: 1.08rem;
}

.schedule-item-heading a {
    color: inherit;
    text-decoration: none;
}

.schedule-item-heading a:hover,
.schedule-item-heading a:focus-visible {
    color: var(--color-link, #174f83);
}

.schedule-item-main > p {
    max-width: 72ch;
    margin-bottom: 5px;
    color: var(--color-text-muted, #667085);
}

.schedule-item-importance {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 46px;
    height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(23, 79, 131, 0.28);
    border-radius: 999px;
    background: rgba(23, 79, 131, 0.08);
    color: #174f83;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.schedule-item-deadline {
    font-size: 0.88rem;
}

.schedule-item-action {
    align-self: end;
    white-space: nowrap;
}

.schedule-sequence {
    grid-column: 2;
    padding-top: 13px;
    border-top: 1px solid rgba(95, 111, 134, 0.17);
}

.schedule-sequence h3 {
    margin-bottom: 9px;
    color: var(--color-text-muted, #667085);
    font-size: 0.86rem;
    font-weight: 600;
}

.schedule-sequence ol {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 24px;
}

.schedule-sequence li {
    padding-left: 3px;
}

.schedule-sequence li.is-complete {
    color: #697586;
}

.schedule-sequence li.is-complete a {
    color: inherit;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.schedule-sequence li.is-current {
    font-weight: 650;
}

.schedule-sequence small {
    margin-left: 7px;
    color: #174f83;
    font-weight: 500;
}

.schedule-suspended {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(95, 111, 134, 0.2);
}

.schedule-suspended > h2 {
    margin-bottom: 6px;
    font-size: 1.15rem;
}

.schedule-item.is-suspended {
    grid-template-columns: 42px minmax(0, 1fr);
    border-style: dashed;
    background: rgba(241, 244, 248, 0.72);
    box-shadow: none;
    opacity: 0.78;
}

.schedule-empty {
    padding: 24px;
}

@media (max-width: 700px) {
    .schedule-page {
        width: min(100% - 20px, 980px);
        padding-top: 20px;
    }

    .schedule-page-header,
    .schedule-item-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-item {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 17px;
    }

    .schedule-item > .schedule-task-icon {
        width: 36px;
        height: 36px;
    }

    .schedule-sequence {
        grid-column: 1 / -1;
    }

    .schedule-item-importance {
        align-self: flex-start;
    }

    .schedule-item-action {
        justify-self: start;
    }
}