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

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --container-width: 1120px;
    --grid-gap: 10px;
}

/* MathJax estimates inherited-font text widths before the browser finishes
   rendering them. Cyrillic labels can consequently reserve much more space
   than their visible glyphs (or even be assigned zero width). Let the actual
   glyphs determine the width in every formula, not only in selected cards. */
mjx-container[jax="CHTML"] mjx-utext {
    width: auto !important;
}

* {
    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: var(--palette-canvas);
    --keycap-background-hover: var(--palette-surface-hover);
    --keycap-background-active: var(--palette-primary-highlight);
    --keycap-background-pressed: var(--palette-border);
    --keycap-border: 1px solid var(--palette-border);
    --keycap-border-bottom: 1px solid var(--palette-border-strong);
    --keycap-text: var(--palette-ink);
    --keycap-text-hover: var(--palette-primary-hover);
    --keyboard-toolbar-background: transparent;
}

.MLK__backdrop {
    background: rgba(var(--palette-canvas-rgb), 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(var(--palette-canvas-rgb), 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 {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
    white-space: nowrap;
}

.brand-logo {
    display: block;
    width: 158px;
    height: auto;
}

.brand:hover,
.brand:focus-visible {
    opacity: 0.84;
}

.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-logout-form {
    display: inline-flex;
    margin: 0;
}

.account-logout-form .account-pill {
    font: inherit;
    cursor: pointer;
}

.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: var(--palette-border-strong);
    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(var(--palette-slate-rgb), 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(var(--palette-white-rgb), 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(var(--palette-white-rgb), 0.96);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(var(--palette-shadow-rgb), 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: var(--palette-white);
    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: var(--palette-white);
    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));
}

.material-bank-column {
    align-content: start;
}

.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: var(--palette-white);
    color: var(--color-text);
}

input:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(var(--palette-primary-rgb), 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: var(--palette-white);
}

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

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

.auth-grid .registration-invite-field {
    grid-column: 1 / -1;
}

.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(var(--palette-ink-rgb), 0.16);
    box-shadow: 0 10px 18px rgba(var(--palette-shadow-rgb), 0.08);
}

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

.learning-tree-legend-item-introduction {
    color: var(--palette-violet);
}

.learning-tree-legend-item-mechanics {
    color: var(--palette-success);
}

.learning-tree-legend-item-heat {
    color: var(--palette-danger);
}

.learning-tree-legend-item-electricity {
    color: var(--palette-primary);
}

.learning-tree-legend-item-other {
    color: var(--palette-warning);
}

.learning-tree-legend-item-exam-ege {
    color: var(--palette-warning);
}

.learning-tree-legend-item-exam-oge {
    color: var(--palette-teal);
}

.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(var(--palette-primary-rgb), 0.08), transparent 34%),
        radial-gradient(circle at bottom right, rgba(var(--palette-success-rgb), 0.08), transparent 30%),
        linear-gradient(180deg, var(--palette-surface-soft) 0%, var(--palette-canvas) 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(var(--palette-ink-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-danger-rgb), 0.9);
    stroke-width: 2.8;
    opacity: 1;
}

.learning-tree-edge.is-warning.is-active {
    stroke: var(--palette-danger);
    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(var(--palette-white-rgb), 0.95);
    box-shadow: 0 10px 26px rgba(var(--palette-shadow-rgb), 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: var(--palette-white);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 10px rgba(var(--palette-shadow-rgb), 0.14);
}

.learning-tree-node-end-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--palette-ink-rgb), 0.52);
    border-radius: 999px;
    background: rgba(var(--palette-white-rgb), 0.92);
    box-shadow: 0 4px 10px rgba(var(--palette-shadow-rgb), 0.1);
}

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

.learning-tree-node-ai-badge-AI-item {
    background: var(--palette-danger);
}

.learning-tree-node-ai-badge-AI-card {
    background: var(--palette-warning);
}

.learning-tree-node-ai-badge-AI-content {
    background: var(--palette-success);
}

.learning-tree-node-ai-badge-AI-corrected {
    background: var(--palette-primary);
}

.learning-tree-node-kind-theory {
    border-color: rgba(var(--palette-ink-rgb), 0.08);
    border-radius: 20px;
}

.learning-tree-node-kind-practice {
    border-width: 2px;
    border-style: solid;
    border-color: rgba(var(--palette-ink-rgb), 0.26);
    border-radius: 10px;
    box-shadow:
        0 10px 26px rgba(var(--palette-shadow-rgb), 0.08),
        inset 0 0 0 1px rgba(var(--palette-ink-rgb), 0.05);
}

.learning-tree-node:hover,
.learning-tree-node:focus-visible {
    background-color: rgba(var(--palette-white-rgb), 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(var(--palette-primary-rgb), 0.18);
}

.learning-tree-node.is-filter-primary {
    opacity: 1;
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 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(var(--palette-primary-rgb), 0.16), 0 16px 34px rgba(var(--palette-primary-rgb), 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(var(--palette-shadow-rgb), 0.1);
}

@keyframes learning-tree-node-external-pulse {
    0% {
        box-shadow: 0 0 0 2px rgba(var(--palette-primary-rgb), 0.14), 0 14px 30px rgba(var(--palette-primary-rgb), 0.22);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(var(--palette-primary-rgb), 0.28), 0 20px 42px rgba(var(--palette-primary-rgb), 0.34);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(var(--palette-primary-rgb), 0.14), 0 14px 30px rgba(var(--palette-primary-rgb), 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(var(--palette-danger-deep-rgb), 0.14);
    color: var(--palette-warning);
}

.learning-tree-exam-tag-oge {
    background: rgba(var(--palette-teal-rgb), 0.14);
    color: var(--palette-teal);
}

.learning-tree-details-warning {
    color: var(--palette-danger);
    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(var(--palette-ink-rgb), 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(var(--palette-violet-rgb), 0.12);
    color: var(--palette-violet);
}

.learning-tree-node-topic-introduction {
    --learning-tree-node-topic-border: rgba(var(--palette-violet-rgb), 0.95);
    --learning-tree-node-topic-fill-pale: rgba(var(--palette-border-rgb), 0.88);
    --learning-tree-node-topic-fill-solid: rgba(var(--palette-slate-light-rgb), 0.96);
}

.learning-tree-node-level-badge-mechanics,
.learning-tree-node-level-number-mechanics,
.learning-tree-node-level-mechanics {
    background: rgba(var(--palette-success-rgb), 0.12);
    color: var(--palette-success);
}

.learning-tree-node-topic-mechanics {
    --learning-tree-node-topic-border: rgba(var(--palette-success-rgb), 0.95);
    --learning-tree-node-topic-fill-pale: rgba(var(--palette-border-rgb), 0.9);
    --learning-tree-node-topic-fill-solid: rgba(var(--palette-success-rgb), 0.96);
}

.learning-tree-node-level-badge-heat,
.learning-tree-node-level-number-heat,
.learning-tree-node-level-heat {
    background: rgba(var(--palette-danger-rgb), 0.12);
    color: var(--palette-danger);
}

.learning-tree-node-topic-heat {
    --learning-tree-node-topic-border: rgba(var(--palette-danger-rgb), 0.95);
    --learning-tree-node-topic-fill-pale: rgba(var(--palette-warning-soft-rgb), 0.9);
    --learning-tree-node-topic-fill-solid: rgba(var(--palette-danger-rgb), 0.96);
}

.learning-tree-node-level-badge-electricity,
.learning-tree-node-level-number-electricity,
.learning-tree-node-level-electricity {
    background: rgba(var(--palette-primary-rgb), 0.12);
    color: var(--palette-primary);
}

.learning-tree-node-topic-electricity {
    --learning-tree-node-topic-border: rgba(var(--palette-slate-mid-rgb), 0.95);
    --learning-tree-node-topic-fill-pale: rgba(var(--palette-primary-rgb), 0.9);
    --learning-tree-node-topic-fill-solid: rgba(var(--palette-primary-rgb), 0.96);
}

.learning-tree-node-level-badge-other,
.learning-tree-node-level-number-other,
.learning-tree-node-level-other {
    background: rgba(var(--palette-warning-rgb), 0.14);
    color: var(--palette-warning);
}

.learning-tree-node-topic-other {
    --learning-tree-node-topic-border: rgba(var(--palette-warning-rgb), 0.95);
    --learning-tree-node-topic-fill-pale: rgba(var(--palette-warning-soft-rgb), 0.9);
    --learning-tree-node-topic-fill-solid: rgba(var(--palette-warning-rgb), 0.96);
}

.learning-tree-node-connection-badge {
    background: rgba(var(--palette-ink-rgb), 0.08);
    color: var(--color-heading);
}

.learning-tree-node.is-compact {
    --learning-tree-node-progress-color: var(--learning-tree-node-topic-fill-pale, rgba(var(--palette-primary-rgb), 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(var(--palette-slate-light-rgb), 0.9));
    background-color: rgba(var(--palette-white-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-ink-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--palette-ink-rgb), 0.07);
}

.learning-tree-node-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--learning-tree-node-topic-fill-pale, rgba(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-white-rgb), 0.96);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(var(--palette-shadow-rgb), 0.12);
}

.learning-tree-final-test-status.is-passed {
    color: var(--palette-success);
}

.learning-tree-final-test-status.is-failed_blocked {
    color: var(--palette-danger);
}

.learning-tree-final-test-status.is-passed_refresh,
.learning-tree-final-test-status.is-failed_available {
    color: var(--palette-warning);
}

.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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: var(--palette-white);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 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: var(--palette-warning-soft);
    font-size: 0.78rem;
    box-shadow: 0 3px 9px rgba(var(--palette-shadow-rgb), 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, var(--palette-surface-soft) 0%, var(--palette-surface-muted) 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(var(--palette-ink-rgb), 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(var(--palette-slate-mid-rgb), 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: var(--palette-slate-light);
    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: var(--palette-primary-hover);
    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: var(--palette-slate-light);
    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: var(--palette-slate-light);
}

.learning-tree-mini-lesson-kind-practice {
    background: var(--palette-slate-light);
}

.learning-tree-mini-lesson.is-control {
    background: var(--palette-slate-light);
}

.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: var(--palette-slate-light);
    box-shadow: none;
    outline: none;
}

.learning-tree-mini-lesson.is-selected {
    background: rgba(var(--palette-primary-hover-rgb), 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(var(--palette-ink-rgb), 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: var(--palette-success);
    color: var(--palette-white);
    font-size: 0.68rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(var(--palette-success-deep-rgb), 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: var(--palette-white);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(var(--palette-shadow-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-primary-rgb), 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%;
}

.learning-tree-new-lesson-button {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 22px;
}

.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: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    line-height: 1.45;
}

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

.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: var(--palette-danger-deep);
    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: var(--palette-danger-deep);
    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: var(--palette-border-strong);
    font-size: 1.2rem;
    line-height: 1;
}

.rating-button.is-active {
    color: var(--palette-warning);
}

.rating-button.is-preview {
    color: var(--palette-warning-fill);
}

.rating-button:hover,
.rating-button:focus-visible {
    background: transparent;
    color: var(--palette-warning);
    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: var(--palette-success-soft);
    border-color: var(--palette-success-fill);
}

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

.practice-card.is-uncounted.is-correct {
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(var(--palette-white-rgb), 0.38) 0,
            rgba(var(--palette-white-rgb), 0.38) 8px,
            rgba(var(--palette-white-rgb), 0.06) 8px,
            rgba(var(--palette-white-rgb), 0.06) 16px
        ),
        linear-gradient(var(--palette-success-soft), var(--palette-success-soft));
}

.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: var(--palette-danger-soft);
        border-color: var(--palette-danger-fill);
    }
    100% {
        background: var(--color-surface-muted);
        border-color: var(--color-border);
    }
}

@keyframes practice-partial-flash {
    0% {
        background: var(--color-surface-muted);
    }
    20% {
        background: var(--palette-danger-soft);
        border-color: var(--palette-danger-fill);
    }
    100% {
        background: var(--color-surface-muted);
        border-color: var(--color-border);
    }
}

@keyframes practice-almost-flash {
    0% {
        background: var(--color-surface-muted);
    }
    20% {
        background: var(--palette-warning-soft);
        border-color: var(--palette-warning-fill);
    }
    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(var(--palette-slate-rgb), 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: var(--palette-danger);
    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(var(--palette-slate-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-success-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18);
}

.practice-multiple-input.is-numeric-slot-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-warning-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-warning-rgb), 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(var(--palette-slate-rgb), 0.28);
    border-radius: 999px;
    background: rgba(var(--palette-canvas-rgb), 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(var(--palette-slate-rgb), 0.22);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 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(var(--palette-slate-rgb), 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 {
    font-weight: 400;
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--find-explanation-color, var(--palette-primary));
    border-radius: 10px;
    background: var(--find-explanation-surface, var(--palette-primary-soft));
    color: var(--color-text);
    font-size: 0.8rem;
    line-height: 1.3;
    box-shadow: 0 3px 10px rgba(var(--palette-primary-deep-rgb), 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, var(--palette-slate-mid));
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.72;
}

.find-mistakes-connector-dot {
    fill: var(--find-explanation-color, var(--palette-slate-mid));
    opacity: 0.82;
}

.practice-item-explanations-review {
    position: relative;
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    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 {
    font-weight: 400;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--item-explanation-color, var(--palette-primary));
    border-radius: 10px;
    background: var(--item-explanation-surface, var(--palette-primary-soft));
    color: var(--color-text);
    font-size: 0.8rem;
    line-height: 1.3;
    box-shadow: 0 3px 10px rgba(var(--palette-primary-deep-rgb), 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, var(--palette-slate-mid));
    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(var(--palette-primary-rgb), 0.11);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 0.14);
    outline: none;
    box-shadow: 0 0 0 0.12em rgba(var(--palette-primary-rgb), 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(var(--palette-success-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-success-rgb), 0.35);
}

.find-mistakes-symbol.is-find-incorrect {
    background-color: rgba(var(--palette-danger-rgb), 0.15);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-danger-rgb), 0.34);
}

.find-mistakes-symbol.is-find-missed {
    background-color: rgba(var(--palette-warning-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-warning-rgb), 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(var(--palette-primary-rgb), 0.11);
    box-shadow: 0 0 0 4px rgba(var(--palette-primary-rgb), 0.09);
}

.find-mistakes-segment.is-selected {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--palette-danger);
    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: var(--palette-danger);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

.find-mistakes-segment.is-find-correct {
    background-color: rgba(var(--palette-success-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-success-rgb), 0.35);
}

.find-mistakes-segment.is-find-incorrect {
    background-color: rgba(var(--palette-danger-rgb), 0.15);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-danger-rgb), 0.34);
}

.find-mistakes-segment.is-find-missed {
    background-color: rgba(var(--palette-warning-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-warning-rgb), 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: var(--palette-white);
    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: var(--palette-surface-soft);
    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(var(--palette-border-rgb), 0.18);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 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: var(--palette-white);
    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: var(--palette-white);
    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: var(--palette-white);
    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: var(--palette-white);
    transform: translateY(-1px);
}

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

.practice-check:disabled {
    cursor: not-allowed;
    background: var(--palette-border);
    border-color: var(--palette-border-strong);
    color: var(--palette-slate);
    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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: var(--palette-white);
    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(var(--palette-shadow-rgb), 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: var(--palette-white);
    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: var(--palette-surface-soft);
    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: var(--palette-white);
    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;
    /* Keep exhausted hints readable without fading their hover tooltip. */
    opacity: 1;
    color: var(--palette-white);
    background: var(--palette-primary);
    border-color: var(--palette-primary);
}

.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-save-error-report {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 0.9em;
}

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

.practice-save-error-report button:disabled {
    cursor: default;
    text-decoration: none;
}

.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 {
    font-weight: 400;
    white-space: pre-line;
}

.practice-feedback-explanation.is-emphasized {
    display: inline-block;
    color: var(--color-heading);
    font-weight: 400;
    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(var(--palette-success-rgb), 0.44);
    background: rgba(var(--palette-success-soft-rgb), 0.96);
    color: var(--palette-success-deep);
}

.practice-skill-update-tag.is-neutral {
    border-color: rgba(var(--palette-slate-rgb), 0.3);
    background: rgba(var(--palette-surface-muted-rgb), 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 solid var(--palette-primary);
    border-inline-start-width: 3px;
    border-radius: 12px;
    background: var(--palette-primary-soft);
    color: var(--color-text);
    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;
    align-content: start;
    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: var(--palette-white);
    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(var(--palette-ink-rgb), 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: var(--palette-white);
    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(var(--palette-slate-rgb), 0.2);
    background: rgba(var(--palette-canvas-rgb), 0.72);
    color: rgba(var(--palette-ink-rgb), 0.42);
    opacity: 0.68;
}

.choice-card.is-choice-limit-inactive:hover,
.choice-card.is-choice-limit-inactive:focus-visible {
    border-color: rgba(var(--palette-slate-rgb), 0.45);
    background: rgba(var(--palette-surface-muted-rgb), 0.9);
    color: rgba(var(--palette-ink-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-slate-rgb), 0.22);
    background: rgba(var(--palette-white-rgb), 0.58);
    box-shadow: 0 1px 3px rgba(var(--palette-shadow-rgb), 0.08);
}

.choice-card.is-choice-correct {
    border-color: rgba(var(--palette-success-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18);
}

.practice-format-slot.is-numeric-slot-correct {
    border-color: rgba(var(--palette-success-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18);
}

.practice-input.is-numeric-slot-correct {
    border-color: rgba(var(--palette-success-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18);
}

.choice-card.is-choice-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18);
}

.practice-format-slot.is-numeric-slot-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18);
}

.practice-input.is-numeric-slot-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18);
}

.practice-format-slot.is-numeric-slot-typo,
.practice-input.is-numeric-slot-typo {
    border-color: rgba(var(--palette-warning-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-warning-rgb), 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(var(--palette-slate-light-rgb), 0.9);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 0.96);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 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(var(--palette-primary-rgb), 0.7);
}

.material-body .gaps-slot.is-active {
    border-color: rgba(var(--palette-primary-rgb), 0.92);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 2px rgba(var(--palette-primary-rgb), 0.16);
}

.material-body .gaps-slot.is-filled {
    background: var(--palette-white);
}

.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(var(--palette-primary-rgb), 0.88);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 2px rgba(var(--palette-primary-rgb), 0.18);
    transform: translateY(-1px);
}

.material-body .gaps-slot.is-swap-preview {
    border-color: rgba(var(--palette-warning-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 2px rgba(var(--palette-warning-rgb), 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(var(--palette-slate-light-rgb), 0.9);
    background: rgba(var(--palette-white-rgb), 0.96);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08);
}

.material-body .gaps-slot.is-gap-correct {
    border-color: rgba(var(--palette-success-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-success-rgb), 0.18);
}

.material-body .gaps-slot.is-gap-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-danger-rgb), 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(var(--palette-slate-light-rgb), 0.9);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 0.96);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.material-body .inline-gaps-slot.is-bound {
    border-color: color-mix(in srgb, var(--logic-accent) 55%, var(--palette-slate-light));
    background: var(--palette-white);
    box-shadow: none;
}

.material-body .inline-gaps-slot.is-bound:is(:hover, .is-logic-active):not(.is-gap-correct):not(.is-gap-incorrect):not(.is-gap-almost):not(.is-gap-typo) {
    border-color: var(--logic-accent);
    background: var(--palette-white);
    box-shadow: none;
    animation: none;
}

.material-body .inline-gaps-slot.is-bound.is-bound-hovered:not(.is-gap-correct):not(.is-gap-incorrect):not(.is-gap-almost):not(.is-gap-typo) {
    animation: boundGapBackgroundPulse 0.62s ease-out 1;
}

@keyframes boundGapBackgroundPulse {
    0%, 100% { background-color: var(--palette-white); box-shadow: 0 0 0 0 var(--logic-accent-glow); }
    42% { background-color: color-mix(in srgb, var(--logic-accent) 20%, var(--palette-white)); box-shadow: 0 0 0 3px var(--logic-accent-glow-soft); }
}

@media (prefers-reduced-motion: reduce) {
    .material-body .inline-gaps-slot.is-bound.is-bound-hovered { animation: none; }
}

.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(var(--palette-slate-rgb), 0.95);
    transform: translateY(-35%);
    pointer-events: none;
}

.material-body .inline-gaps-slot.is-active {
    border-color: rgba(var(--palette-primary-rgb), 0.92);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 2px rgba(var(--palette-primary-rgb), 0.16);
}

.material-body .inline-gaps-slot.is-gap-correct {
    border-color: rgba(var(--palette-success-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-success-rgb), 0.18);
}

.material-body .inline-gaps-slot.is-gap-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18);
}

.material-body .inline-gaps-slot.is-gap-almost {
    border-color: rgba(var(--palette-warning-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-warning-rgb), 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(var(--palette-warning-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-warning-rgb), 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(var(--palette-slate-light-rgb), 0.9);
    border-radius: 5px;
    background: var(--palette-white);
    color: var(--color-heading);
    font: 600 1rem/1 var(--font-sans);
    box-shadow: inset 0 1px 2px rgba(var(--palette-shadow-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 0.96);
    box-shadow: inset 0 0 0 2px rgba(var(--palette-primary-rgb), 0.22);
}

.letter-slot-cell.is-letter-correct,
.letter-slots-input.is-letter-slots-correct .letter-slot-cell {
    border-color: rgba(var(--palette-success-rgb), 0.92);
    background: rgba(var(--palette-success-soft-rgb), 0.98);
    box-shadow: 0 0 0 2px rgba(var(--palette-success-rgb), 0.12);
}

.letter-slot-cell.is-letter-incorrect,
.letter-slots-input.is-letter-slots-incorrect .letter-slot-cell {
    border-color: rgba(var(--palette-danger-rgb), 0.92);
    background: rgba(var(--palette-danger-soft-rgb), 0.98);
    box-shadow: 0 0 0 2px rgba(var(--palette-danger-rgb), 0.12);
}

.letter-slot-cell.is-letter-typo,
.letter-slots-input.is-letter-slots-typo .letter-slot-cell {
    border-color: rgba(var(--palette-warning-rgb), 0.92);
    background: rgba(var(--palette-warning-soft-rgb), 0.98);
    box-shadow: 0 0 0 2px rgba(var(--palette-warning-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-slate-rgb), 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: var(--palette-surface-soft);
    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(var(--palette-ink-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-slate-rgb), 0.42);
    border-radius: 15px;
    background: var(--palette-surface-soft);
    display: flex;
    align-items: center;
    box-shadow: inset 0 1px 1px rgba(var(--palette-shadow-rgb), 0.14), inset 0 4px 8px rgba(var(--palette-shadow-rgb), 0.11);
}

.matching-slot-dropzone.is-filled {
    border-color: rgba(var(--palette-primary-rgb), 0.44);
    background: var(--palette-surface-soft);
}

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

.matching-slot-dropzone.is-drag-preview {
    border-color: rgba(var(--palette-primary-rgb), 0.52);
    background: var(--palette-surface-soft);
    transform: none;
}

.matching-slot-dropzone.is-drag-swap-preview {
    border-color: rgba(var(--palette-warning-rgb), 0.58);
    background: var(--palette-danger-soft);
}

.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(var(--palette-slate-rgb), 0.34);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 0.72);
    box-shadow: inset 0 1px 2px rgba(var(--palette-shadow-rgb), 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(var(--palette-slate-rgb), 0.34);
    border-radius: 11px;
    background: var(--palette-white);
    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(var(--palette-shadow-rgb), 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: var(--palette-white);
    border-color: var(--color-link);
    color: var(--color-heading);
    box-shadow: 0 5px 11px rgba(var(--palette-shadow-rgb), 0.26);
}

.matching-card.is-active {
    border-color: var(--color-link);
    box-shadow: 0 0 0 2px rgba(var(--palette-primary-rgb), 0.18), 0 5px 11px rgba(var(--palette-shadow-rgb), 0.26);
}

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

.matching-card.is-dragging {
    opacity: 0.75;
    cursor: grabbing;
    background: var(--palette-white);
    border-color: rgba(var(--palette-slate-rgb), 0.34);
    box-shadow: 0 3px 7px rgba(var(--palette-shadow-rgb), 0.2);
}

.matching-card.is-preview {
    opacity: 0.56;
    border-color: rgba(var(--palette-primary-rgb), 0.52);
    box-shadow: 0 6px 14px rgba(var(--palette-shadow-rgb), 0.18);
    transform: none;
}

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

.matching-card.is-match-correct {
    border-color: rgba(var(--palette-success-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18), 0 3px 7px rgba(var(--palette-shadow-rgb), 0.2);
}

.matching-card.is-match-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18), 0 3px 7px rgba(var(--palette-shadow-rgb), 0.2);
}

@keyframes practiceHighlightGlowGreen {
    0% {
        box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18), 0 0 0 0 rgba(var(--palette-success-rgb), 0.48);
    }
    45% {
        box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.24), 0 0 0 8px rgba(var(--palette-success-rgb), 0.24);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18), 0 0 0 0 rgba(var(--palette-success-rgb), 0);
    }
}

@keyframes practiceHighlightGlowRed {
    0% {
        box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18), 0 0 0 0 rgba(var(--palette-danger-rgb), 0.48);
    }
    45% {
        box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.24), 0 0 0 8px rgba(var(--palette-danger-rgb), 0.24);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18), 0 0 0 0 rgba(var(--palette-danger-rgb), 0);
    }
}

@keyframes practiceHighlightGlowAmber {
    0% {
        box-shadow: 0 0 0 4px rgba(var(--palette-warning-rgb), 0.18), 0 0 0 0 rgba(var(--palette-warning-rgb), 0.48);
    }
    45% {
        box-shadow: 0 0 0 4px rgba(var(--palette-warning-rgb), 0.24), 0 0 0 8px rgba(var(--palette-warning-rgb), 0.24);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(var(--palette-warning-rgb), 0.18), 0 0 0 0 rgba(var(--palette-warning-rgb), 0);
    }
}

@keyframes practiceHighlightGlowGreenInset {
    0% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-success-rgb), 0.18), 0 0 0 0 rgba(var(--palette-success-rgb), 0.48);
    }
    45% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-success-rgb), 0.24), 0 0 0 8px rgba(var(--palette-success-rgb), 0.24);
    }
    100% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-success-rgb), 0.18), 0 0 0 0 rgba(var(--palette-success-rgb), 0);
    }
}

@keyframes practiceHighlightGlowRedInset {
    0% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18), 0 0 0 0 rgba(var(--palette-danger-rgb), 0.48);
    }
    45% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-danger-rgb), 0.24), 0 0 0 8px rgba(var(--palette-danger-rgb), 0.24);
    }
    100% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18), 0 0 0 0 rgba(var(--palette-danger-rgb), 0);
    }
}

@keyframes practiceHighlightGlowAmberInset {
    0% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-warning-rgb), 0.18), 0 0 0 0 rgba(var(--palette-warning-rgb), 0.48);
    }
    45% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-warning-rgb), 0.24), 0 0 0 8px rgba(var(--palette-warning-rgb), 0.24);
    }
    100% {
        box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 4px rgba(var(--palette-warning-rgb), 0.18), 0 0 0 0 rgba(var(--palette-warning-rgb), 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(var(--palette-slate-rgb), 0.3);
    box-shadow: inset 0 1px 1px rgba(var(--palette-shadow-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-slate-rgb), 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: var(--palette-surface-soft);
    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(var(--palette-slate-rgb), 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: var(--palette-surface-soft);
    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(var(--palette-slate-rgb), 0.34);
    border-radius: 12px;
    background: var(--palette-surface-soft);
    box-shadow: inset 0 1px 2px rgba(var(--palette-shadow-rgb), 0.08);
}

.ordering-list.is-drag-active {
    gap: 18px;
    padding: 18px;
    border-color: rgba(var(--palette-primary-rgb), 0.52);
    background: var(--palette-surface-soft);
}

.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(var(--palette-slate-rgb), 0.34);
    border-radius: 11px;
    background: var(--palette-white);
    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(var(--palette-shadow-rgb), 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(var(--palette-ink-rgb), 0.3);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.ordering-card:hover,
.ordering-card:focus-visible {
    background: var(--palette-white);
    border-color: var(--color-link);
    color: var(--color-heading);
    box-shadow: 0 5px 11px rgba(var(--palette-shadow-rgb), 0.26);
}

.ordering-card.is-keyboard-selected {
    background: var(--palette-white);
    border-color: var(--color-link);
    color: var(--color-heading);
    box-shadow: 0 5px 11px rgba(var(--palette-shadow-rgb), 0.26);
}

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

.ordering-card.is-ordering-correct {
    border-color: rgba(var(--palette-success-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-success-rgb), 0.18), 0 3px 7px rgba(var(--palette-shadow-rgb), 0.2);
}

.ordering-card.is-ordering-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.9);
    box-shadow: 0 0 0 4px rgba(var(--palette-danger-rgb), 0.18), 0 3px 7px rgba(var(--palette-shadow-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 0.48);
    border-radius: 50%;
    background: rgba(var(--palette-canvas-rgb), 0.9);
    color: rgba(var(--palette-primary-rgb), 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: var(--palette-white);
    box-shadow: 0 0 0 4px rgba(var(--palette-primary-rgb), 0.12);
}

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

.ordering-pair-marker-aura {
    fill: none;
    stroke: rgba(var(--palette-danger-rgb), 0.18);
    stroke-width: 6;
    transform-box: fill-box;
    transform-origin: center;
}

.ordering-pair-marker-circle {
    fill: rgba(var(--palette-white-rgb), 0.98);
    stroke: rgba(var(--palette-danger-deep-rgb), 0.96);
    stroke-width: 1.5;
}

.ordering-pair-marker-line {
    fill: none;
    stroke: rgba(var(--palette-danger-deep-rgb), 0.98);
    stroke-width: 1.2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.ordering-pair-marker-symbol {
    fill: rgba(var(--palette-danger-deep-rgb), 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(var(--palette-slate-rgb), 0.3);
    box-shadow: inset 0 1px 1px rgba(var(--palette-shadow-rgb), 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, 0, 113, 188), 0.82);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(var(--connection-accent-rgb, 0, 113, 188), 0.26));
}

.connection-link.is-finished {
    stroke: rgba(var(--connection-accent-rgb, 0, 113, 188), 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(var(--palette-slate-rgb), 0.34);
    border-radius: 16px;
    background: var(--palette-surface-soft);
    box-shadow: inset 0 1px 1px rgba(var(--palette-shadow-rgb), 0.12), inset 0 4px 8px rgba(var(--palette-shadow-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-slate-rgb), 0.34);
    border-radius: inherit;
    background: var(--palette-white);
    box-shadow: 0 3px 7px rgba(var(--palette-shadow-rgb), 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(var(--palette-ink-rgb), 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(var(--palette-shadow-rgb), 0.24);
}

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

.connection-card.is-connection-active::before {
    border-color: rgba(var(--connection-accent-rgb, 0, 113, 188), 0.96);
    box-shadow: inset 0 0 0 2px rgba(var(--connection-accent-rgb, 0, 113, 188), 0.96), 0 0 10px rgba(var(--connection-accent-rgb, 0, 113, 188), 0.26), 0 6px 12px rgba(var(--palette-shadow-rgb), 0.24);
}

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

.connection-card.is-connection-finished::before {
    border-color: rgba(var(--connection-accent-rgb, 0, 113, 188), 0.62);
    box-shadow: inset 0 0 0 1px rgba(var(--connection-accent-rgb, 0, 113, 188), 0.62), 0 3px 7px rgba(var(--palette-shadow-rgb), 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, 0, 113, 188), 0.82);
    box-shadow: inset 0 0 0 1px rgba(var(--connection-accent-rgb, 0, 113, 188), 0.82), 0 5px 11px rgba(var(--palette-shadow-rgb), 0.22);
}

.connection-card.is-connection-muted,
.connection-card.is-unused-muted {
    color: rgba(var(--palette-ink-rgb), 0.48);
}

.connection-card.is-connection-muted::before,
.connection-card.is-unused-muted::before {
    border-color: rgba(var(--palette-slate-rgb), 0.22);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-slate-rgb), 0.16), 0 1px 3px rgba(var(--palette-shadow-rgb), 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(var(--palette-ink-rgb), 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: var(--palette-white);
    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(var(--palette-surface-soft-rgb), 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(var(--palette-slate-rgb), 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: var(--palette-white);
}

.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(var(--palette-slate-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-slate-rgb), 0.2);
    border-radius: 16px;
    background: var(--palette-white);
    box-shadow: 0 10px 24px rgba(var(--palette-shadow-rgb), 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(var(--palette-slate-rgb), 0.2);
    border-radius: 16px;
    background: var(--palette-white);
    box-shadow: 0 10px 24px rgba(var(--palette-shadow-rgb), 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: var(--palette-primary-hover);
    --image-exercise-mark-fill: var(--palette-border-strong);
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--palette-white);
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 4px var(--palette-primary-hover);
    pointer-events: none;
}

.image-exercise-mark.is-correct { --image-exercise-mark-color: var(--palette-success); --image-exercise-mark-fill: var(--palette-success-fill); box-shadow: inset 0 0 0 4px var(--palette-success); }
.image-exercise-mark.is-incorrect { --image-exercise-mark-color: var(--palette-danger); --image-exercise-mark-fill: var(--palette-danger-fill); box-shadow: inset 0 0 0 4px var(--palette-danger); }
.image-exercise-mark.is-duplicate { --image-exercise-mark-color: var(--palette-warning-deep); --image-exercise-mark-fill: var(--palette-warning-fill); box-shadow: inset 0 0 0 4px var(--palette-warning-deep); }

.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 var(--palette-border-strong);
    border-radius: 50%;
    background: var(--palette-canvas);
    color: var(--palette-slate);
    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 var(--palette-border-strong);
    border-radius: 50%;
    background: var(--palette-canvas);
    color: var(--palette-slate);
    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(var(--palette-white-rgb), 0.14);
    border-radius: 4px;
    color: rgba(var(--palette-white-rgb), 0.9);
    background: rgba(var(--palette-ink-rgb), 0.75);
    box-shadow: 0 1px 3px rgba(var(--palette-ink-strong-rgb), 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: 36px minmax(0, 1fr) 36px 36px;
    align-items: center;
    gap: 8px;
    width: min(100%, 620px);
    margin: 10px auto 0;
}

.lesson-animation-controls.is-autoplay-fixed {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
}

.lesson-animation-controls .lesson-animation-control {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 8px !important;
    border-color: rgba(var(--palette-primary-deep-rgb), 0.14);
    background: var(--palette-surface-muted);
    color: var(--palette-slate);
    line-height: 1;
    box-sizing: border-box;
    box-shadow: none;
}

.lesson-animation-controls .lesson-animation-control:hover,
.lesson-animation-controls .lesson-animation-control:focus-visible {
    border-color: rgba(var(--palette-slate-rgb), 0.38);
    background: var(--palette-surface-hover);
    color: var(--palette-primary-deep);
}

.lesson-animation-controls .lesson-animation-control:focus-visible,
.lesson-animation-autoplay:focus-within {
    outline: 2px solid var(--palette-primary);
    outline-offset: 2px;
}

.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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: var(--palette-white);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 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,
            var(--palette-primary) 0 var(--animation-progress),
            var(--palette-border) var(--animation-progress) 100%
        )
        center / calc(100% - 14px) 4px no-repeat;
    cursor: pointer;
}

.lesson-animation-progress:focus-visible {
    outline: 2px solid var(--palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.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 var(--palette-primary);
    border-radius: 50%;
    background: var(--palette-canvas);
    box-shadow: 0 1px 3px rgba(var(--palette-shadow-rgb), 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 var(--palette-primary);
    border-radius: 50%;
    background: var(--palette-canvas);
    box-shadow: 0 1px 3px rgba(var(--palette-shadow-rgb), 0.18);
}

.lesson-animation-autoplay {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(var(--palette-primary-deep-rgb), 0.14);
    border-radius: 8px;
    background: var(--palette-surface-muted);
    color: var(--palette-slate);
    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: var(--palette-surface-hover);
    color: var(--palette-primary-deep);
}

.lesson-animation-autoplay:hover {
    border-color: rgba(var(--palette-slate-rgb), 0.38);
    background: var(--palette-surface-hover);
}

.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: var(--palette-white);
    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, var(--palette-white));
    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(var(--palette-primary-rgb), 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(var(--palette-ink-strong-rgb), 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(var(--palette-border-rgb), 0.18);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(var(--palette-white-rgb), 0.98) 0%, rgba(var(--palette-canvas-rgb), 0.98) 100%);
    box-shadow: 0 22px 54px rgba(var(--palette-shadow-rgb), 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(var(--palette-success-deep-rgb), 0.72);
}

.applet-viewer-dialog.is-exercise-success {
    border-color: rgba(var(--palette-success-rgb), 0.78);
    background: var(--palette-border);
    box-shadow: 0 22px 54px rgba(var(--palette-success-deep-rgb), 0.34), inset 0 0 0 3px rgba(var(--palette-success-rgb), 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(var(--palette-slate-rgb), 0.22);
    border-radius: 18px;
    background: var(--palette-white);
    box-shadow: inset 0 1px 2px rgba(var(--palette-shadow-rgb), 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(var(--palette-shadow-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-white-rgb), 0.96);
    border: 1px solid rgba(var(--palette-primary-deep-rgb), 0.16);
    border-radius: 14px;
    overflow: hidden;
    contain: inline-size;
    box-shadow: none;
}

.lesson-table th,
.lesson-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(var(--palette-primary-deep-rgb), 0.12);
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}

.lesson-table th {
    background: rgba(var(--palette-primary-deep-rgb), 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(var(--palette-primary-highlight-rgb), 0.42);
}

.logic-mark {
    border-radius: 0.28em;
    padding: 0.12em 0.22em;
    color: inherit;
    background: var(--palette-white);
    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(var(--palette-primary-rgb), 0));
    }
    38% {
        box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor), 0 0 0 5px var(--logic-accent-glow-strong, rgba(var(--palette-primary-rgb), 0.26));
    }
    100% {
        box-shadow: inset 0 0 0 1px var(--logic-accent, currentColor), 0 0 0 2px var(--logic-accent-glow-soft, rgba(var(--palette-primary-rgb), 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: var(--palette-white);
}

.logic-color-1 {
    --logic-accent: var(--palette-danger);
    --logic-surface: var(--palette-danger-soft);
    --logic-accent-glow: rgba(var(--palette-danger-rgb), 0.18);
    --logic-accent-glow-strong: rgba(var(--palette-danger-rgb), 0.26);
    --logic-accent-glow-soft: rgba(var(--palette-danger-rgb), 0.12);
}

.logic-color-1:hover,
.logic-color-1.is-logic-active {
    color: var(--logic-accent);
    background: var(--palette-danger-soft);
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-2 {
    --logic-accent: var(--palette-primary);
    --logic-surface: var(--palette-primary-soft);
    --logic-accent-glow: rgba(var(--palette-primary-rgb), 0.18);
    --logic-accent-glow-strong: rgba(var(--palette-primary-rgb), 0.26);
    --logic-accent-glow-soft: rgba(var(--palette-primary-rgb), 0.12);
}

.logic-color-2:hover,
.logic-color-2.is-logic-active {
    color: var(--logic-accent);
    background: var(--palette-primary-soft);
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-3 {
    --logic-accent: var(--palette-success);
    --logic-surface: var(--palette-success-soft);
    --logic-accent-glow: rgba(var(--palette-success-rgb), 0.18);
    --logic-accent-glow-strong: rgba(var(--palette-success-rgb), 0.26);
    --logic-accent-glow-soft: rgba(var(--palette-success-rgb), 0.12);
}

.logic-color-3:hover,
.logic-color-3.is-logic-active {
    color: var(--logic-accent);
    background: var(--palette-success-soft);
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-4 {
    --logic-accent: var(--palette-warning-deep);
    --logic-surface: var(--palette-warning-soft);
    --logic-accent-glow: rgba(var(--palette-warning-deep-rgb), 0.18);
    --logic-accent-glow-strong: rgba(var(--palette-warning-deep-rgb), 0.26);
    --logic-accent-glow-soft: rgba(var(--palette-warning-deep-rgb), 0.12);
}

.logic-color-4:hover,
.logic-color-4.is-logic-active {
    color: var(--logic-accent);
    background: var(--palette-warning-soft);
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-5 {
    --logic-accent: var(--palette-violet);
    --logic-surface: var(--palette-violet-soft);
    --logic-accent-glow: rgba(var(--palette-violet-rgb), 0.18);
    --logic-accent-glow-strong: rgba(var(--palette-violet-rgb), 0.26);
    --logic-accent-glow-soft: rgba(var(--palette-violet-rgb), 0.12);
}

.logic-color-5:hover,
.logic-color-5.is-logic-active {
    color: var(--logic-accent);
    background: var(--palette-violet-soft);
    animation: logicMarkHoverGlow 0.52s ease-out;
}

.logic-color-6 {
    --logic-accent: var(--palette-teal);
    --logic-surface: var(--palette-teal-soft);
    --logic-accent-glow: rgba(var(--palette-teal-rgb), 0.18);
    --logic-accent-glow-strong: rgba(var(--palette-teal-rgb), 0.26);
    --logic-accent-glow-soft: rgba(var(--palette-teal-rgb), 0.12);
}

.logic-color-6:hover,
.logic-color-6.is-logic-active {
    color: var(--logic-accent);
    background: var(--palette-teal-soft);
    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: var(--palette-slate-mid);
    background: var(--palette-slate-mid);
    color: var(--palette-canvas);
}

.material-chip-special.material-chip-link {
    color: var(--palette-canvas);
}

.material-card-meta .material-chip-special,
.lesson-card-topline .material-chip-special {
    border-color: var(--palette-slate-mid);
    background: var(--palette-slate-mid);
    color: var(--palette-canvas);
}

.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: var(--palette-border-strong);
    background: var(--palette-surface-hover);
    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: var(--palette-slate-mid);
    background: var(--palette-slate-mid);
    color: var(--palette-canvas);
}

.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: var(--palette-border-strong);
    background: var(--palette-surface-hover);
    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: var(--palette-slate-mid);
    background: var(--palette-slate-mid);
    color: var(--palette-canvas);
}

.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-left: 6px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.lesson-overview-card p {
    margin-bottom: 10px;
}

.lesson-mistake {
    border: 2px solid var(--palette-danger);
    background: transparent;
    color: var(--color-text);
}

.lesson-mistake-block {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin: 1rem 0;
    padding: 7px 9px;
    border-radius: 0;
}

.lesson-mistake-block.is-display-math-only {
    margin-inline: auto;
}

.lesson-mistake-mark {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--palette-danger);
    color: var(--palette-white);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}

.lesson-mistake-mark:focus-visible {
    outline: 2px solid var(--palette-danger-deep);
    outline-offset: 2px;
}

.lesson-mistake-content > :first-child {
    margin-top: 0;
}

.lesson-mistake-content > :last-child {
    margin-bottom: 0;
}

.lesson-mistake-inline {
    display: inline;
    margin-inline: 0.12em;
    padding: 0.04em 0.28em 0.06em 0.18em;
    border-width: 2px;
    border-radius: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.lesson-mistake-inline .lesson-mistake-mark {
    width: 18px;
    height: 18px;
    margin-right: 0.24em;
    font-size: 0.78em;
    vertical-align: -0.08em;
}

.lesson-mistake-inline .lesson-mistake-content {
    display: inline;
}

.lesson-correction {
    border: 2px solid var(--palette-success);
    background: transparent;
    color: var(--color-text);
}

.lesson-correction-block {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 1rem 0;
    padding: 7px 9px;
    border-radius: 0;
}

.lesson-correction-block.is-display-math-only {
    margin-inline: auto;
}

.lesson-correction-content > :first-child {
    margin-top: 0;
}

.lesson-correction-content > :last-child {
    margin-bottom: 0;
}

.lesson-correction-inline {
    display: inline;
    margin-inline: 0.12em;
    padding: 0.04em 0.28em 0.06em;
    border-radius: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.lesson-correction-inline .lesson-correction-content {
    display: inline;
}

.lesson-image-viewer-exercise-shell {
    position: relative;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(var(--palette-shadow-rgb), 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(var(--palette-slate-rgb), 0.25);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 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(var(--palette-slate-rgb), 0.2);
    border-bottom: 1px solid rgba(var(--palette-slate-rgb), 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(var(--palette-surface-muted-rgb), 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(var(--palette-surface-muted-rgb), 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(var(--palette-primary-highlight-rgb), 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(var(--palette-slate-rgb), 0.28);
    border-radius: 9px;
    background: rgba(var(--palette-canvas-rgb), 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(var(--palette-slate-rgb), 0.62);
    border-radius: 5px;
    background: var(--color-surface);
}

.tabular-choice-cell:hover {
    border-color: rgba(var(--palette-primary-rgb), 0.52);
    background: rgba(var(--palette-primary-soft-rgb), 0.9);
}

.tabular-choice-cell.is-selected {
    border-color: rgba(var(--palette-primary-rgb), 0.72);
    background: rgba(var(--palette-primary-highlight-rgb), 0.95);
    box-shadow: 0 0 0 3px rgba(var(--palette-primary-rgb), 0.1);
}

.tabular-choice-cell.is-selected > span {
    border-color: var(--palette-primary-deep);
    background: var(--palette-primary-deep);
    box-shadow: inset 0 0 0 4px rgba(var(--palette-white-rgb), 0.96);
}

.tabular-choice-cell.is-selected:hover {
    border-color: var(--palette-primary-deep);
}

.tabular-choice-cell.is-selected:hover > span {
    border-color: var(--palette-primary-deep);
    background: var(--palette-primary-deep);
}

.tabular-choice-cell.is-choice-correct {
    border-color: rgba(var(--palette-success-rgb), 0.72);
    background: rgba(var(--palette-success-soft-rgb), 0.92);
}

.tabular-choice-cell.is-choice-incorrect {
    border-color: rgba(var(--palette-danger-rgb), 0.76);
    background: rgba(var(--palette-danger-soft-rgb), 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: 0;
    border-bottom-width: 0;
    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: var(--palette-white);
    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: var(--palette-slate);
}

.lesson-layout-menu-toggle:hover,
.lesson-layout-menu-toggle:focus-visible,
.lesson-layout-menu[open] .lesson-layout-menu-toggle {
    border-color: var(--palette-border-strong);
    background: var(--color-highlight);
    color: var(--color-link-hover);
}

.lesson-layout-menu-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lesson-layout-menu-toggle svg path,
.lesson-layout-menu-toggle svg circle {
    fill: var(--color-surface);
    stroke: currentColor;
}

.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: var(--palette-slate);
    font-size: 0.78rem;
    font-weight: 650;
}

.lesson-layout-menu-panel .lesson-visual-preference {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
}

.lesson-layout-menu-panel .lesson-visual-preference input {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin: 0;
    padding: 0;
    accent-color: var(--palette-primary);
}

.lesson-layout-menu-panel .lesson-visual-preference + .lesson-visual-preference {
    margin-block-start: -4px;
}

.lesson-layout-menu-panel [data-visual-preference-status] {
    color: var(--palette-danger);
    font-size: 0.78rem;
    font-weight: 400;
}

.lesson-layout-menu-panel [data-visual-preference-status]:empty {
    display: none;
}

.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(var(--palette-primary-rgb), 0.09);
    box-shadow: 0 0 0 4px rgba(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 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-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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: var(--palette-white);
    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.lesson-overview-card {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

.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(var(--palette-shadow-rgb), 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, var(--palette-surface-soft) 0%, var(--palette-surface-muted) 100%);
    box-shadow: 0 20px 40px rgba(var(--palette-shadow-rgb), 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(var(--palette-slate-rgb), 0.2);
    text-align: left;
    vertical-align: top;
}

.theory-shortcuts-table th {
    width: 120px;
    font-family: "Consolas", "Courier New", monospace;
    color: rgba(var(--palette-ink-rgb), 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: var(--palette-white);
    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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 0.16);
    color: var(--palette-white);
    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(var(--palette-slate-rgb), 0.55);
    cursor: help;
}

.text-link-button.is-disabled:hover,
.text-link-button.is-disabled:focus-visible {
    color: rgba(var(--palette-slate-rgb), 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(var(--palette-slate-rgb), 0.18);
    border-radius: 16px;
    background: rgba(var(--palette-canvas-rgb), 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(var(--palette-slate-rgb), 0.16);
    border-radius: 14px;
    background: rgba(var(--palette-white-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-slate-rgb), 0.22);
    border-radius: 8px;
    background: rgba(var(--palette-surface-soft-rgb), 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(var(--palette-white-rgb), 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 {
    --example-padding: clamp(14px, 2vw, 22px);
    margin: 1.2rem 0;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid rgba(var(--palette-slate-rgb), 0.24);
    border-left: 3px solid rgba(var(--palette-primary-rgb), 0.72);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--palette-surface-soft-rgb), 0.96), rgba(var(--palette-white-rgb), 0.9));
    box-shadow: none;
}

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

.lesson-exercise-example.has-adaptive-annotation-width {
    width: calc(100% - var(--example-left-gutter, 0px) - var(--example-right-gutter, 0px));
    margin-left: var(--example-left-gutter, 0px);
    margin-right: var(--example-right-gutter, 0px);
    transform: translateX(var(--example-idle-offset, 0px));
    transition: transform .22s ease;
}

@media (prefers-reduced-motion: reduce) {
    .lesson-exercise-example.has-adaptive-annotation-width {transition:none}
}

/* Embedded media belongs to the example, not to a second framed card.
   Equation-side illustrations retain their own annotation sizing. */
.exercise-example-conditions-content .lesson-figure,
.exercise-example-content .lesson-figure:not(.exercise-example-equation-illustration .lesson-figure) {
    clear: both;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.lesson-exercise-example :is(.lesson-figure-svg-shell, .lesson-figure-image) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.lesson-exercise-example .lesson-figure:not(.exercise-example-equation-illustration .lesson-figure) :is(.lesson-figure-svg-shell, .lesson-figure-svg, .lesson-figure-image) {
    width: 100%;
    max-height: none;
}

@media (min-width: 721px) {
    .practice-item-explanations-review.is-fill-in-review.is-revealed {
        grid-template-columns: minmax(100px, 20%) minmax(0, 1fr) minmax(100px, 20%);
    }
    .practice-item-explanations-review.is-fill-in-review > .lesson-exercise-example {
        grid-column: 2;
        min-width: 0;
    }
}

.exercise-example-header.has-title {
    justify-content: space-between;
    margin-bottom: 14px;
}

.lesson-exercise-example .applet-frame-shell.is-embedded {
    clear: both;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.lesson-exercise-example .applet-frame {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.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 {
    margin-inline: calc(-1 * var(--example-padding));
    padding: 12px var(--example-padding);
    border: 0;
    border-block: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--palette-white);
}

.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(var(--palette-slate-rgb), 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(var(--palette-slate-rgb), 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, var(--palette-primary));
    border-radius: 9px;
    background: var(--exercise-example-explanation-surface, var(--palette-primary-soft));
    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 {
    font-weight: 400;
    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, var(--palette-primary-hover));
    box-shadow: 0 0 0 2px color-mix(
        in srgb,
        var(--exercise-example-explanation-color, var(--palette-primary)) 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: auto;
}

.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, var(--palette-slate-mid));
    stroke-width: 1.45;
    stroke-linecap: round;
    opacity: 0.82;
}

.exercise-example-equation-connector-dot {
    fill: var(--exercise-example-explanation-color, var(--palette-slate-mid));
    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(var(--palette-warning-fill-rgb), 0.28);
    box-shadow: 0 0 0 4px rgba(var(--palette-warning-fill-rgb), 0.18);
}

.exercise-example-equation-target.is-comment-locked {
    background: rgba(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 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: var(--palette-danger-deep);
    font-size: 0.9em;
    line-height: 1;
    vertical-align: 0.08em;
}

.readiness-warning-unfinished,
.readiness-warning-empty {
    color: var(--palette-danger-deep);
}

.readiness-warning-step {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 1px 2px 0 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--palette-danger-soft);
    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: var(--palette-surface-muted);
    }

    .mobile-unavailable-card {
        width: min(100%, 430px);
        padding: 28px 24px;
        border: 1px solid var(--palette-border-strong);
        border-radius: 18px;
        background: var(--palette-white);
        box-shadow: 0 14px 36px rgba(var(--palette-primary-deep-rgb), 0.12);
        color: var(--palette-primary-deep);
        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: var(--palette-slate);
        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: var(--palette-white);
    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(var(--palette-slate-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 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(var(--palette-border-rgb), 0.18);
    border-radius: 12px;
    background: var(--color-heading);
    box-shadow: 0 16px 34px rgba(var(--palette-shadow-rgb), 0.22);
    color: var(--palette-white);
    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(var(--palette-slate-rgb), 0.18);
    border-radius: 16px;
    background: rgba(var(--palette-canvas-rgb), 0.92);
    padding: 16px 18px;
    box-shadow: none;
}

.refresh-completion-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: var(--palette-success);
    color: var(--palette-white);
    animation: refresh-completion-appear 650ms ease-out both;
}

@keyframes refresh-completion-appear {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .refresh-completion-check { animation: none; }
}

.inline-minipage-card:has(> .inline-minipage-body) {
    overflow: hidden;
    padding: 0;
}

.inline-minipage-title {
    display: block;
    margin: 0;
    padding: 15px 18px 13px;
    border-bottom: 1px solid rgba(var(--palette-slate-rgb), 0.16);
    background: rgba(var(--palette-surface-soft-rgb), 0.56);
    color: var(--color-heading);
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}

.inline-minipage-caption {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.77rem;
    font-weight: 400;
    line-height: 1.45;
}

.inline-minipage-body {
    display: block;
    padding: 14px 18px 16px;
}

.inline-minipage-body > :first-child {
    margin-top: 0;
}

.inline-minipage-body > :last-child {
    margin-bottom: 0;
}

.inline-minipage-body > .lesson-table-wrap {
    width: calc(100% + 36px);
    margin-right: -18px;
    margin-left: -18px;
}

.inline-minipage-body > .lesson-table-wrap:first-child {
    margin-top: -14px;
}

.inline-minipage-body > .lesson-table-wrap:last-child {
    margin-bottom: -16px;
}

.inline-minipage-body > .lesson-table-wrap > .lesson-table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.inline-minipage-body > .lesson-table-wrap > .lesson-table th {
    font-size: 0.92rem;
    font-weight: 600;
}

.inline-minipage-inner-scroll .inline-minipage-body > .lesson-table-wrap {
    max-height: 66.667vh;
    overflow: auto;
}

.inline-minipage-inner-scroll .inline-minipage-body > .lesson-table-wrap > .lesson-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
    contain: none;
}

.inline-minipage-inner-scroll .lesson-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--palette-surface-muted);
    box-shadow: 0 1px 0 rgba(var(--palette-primary-deep-rgb), 0.16);
}

.inline-minipage-tight .lesson-table th,
.inline-minipage-tight .lesson-table td {
    padding: 0.27rem 0.68rem;
    border-bottom: 0;
    line-height: 1.25;
}

.inline-minipage-tight .lesson-table thead th {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    box-shadow: none;
}

.inline-minipage-tight-columns {
    display: none;
}

.inline-minipage-tight-columns .lesson-table {
    min-width: 0;
    border: 0;
    border-radius: 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
    contain: none;
}

.lesson-step-layout.is-wide .inline-minipage-tight .lesson-table[data-tight-original],
.material-detail-content.is-exercise-step .inline-minipage-tight .lesson-table[data-tight-original] {
    display: none;
}

.lesson-step-layout.is-wide .inline-minipage-tight .inline-minipage-tight-columns,
.material-detail-content.is-exercise-step .inline-minipage-tight .inline-minipage-tight-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(340px, 1fr));
    align-items: start;
    gap: 16px;
}

.exam-prefix-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.attenuated {
    color: var(--palette-slate-mid);
    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: var(--palette-surface-soft);
}

.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(var(--palette-slate-rgb), 0.42);
    border-radius: var(--radius-sm);
    background: var(--palette-surface-soft);
}

.debug-card:not([open]) {
    padding-block: 10px;
}

.debug-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -6px -8px 8px;
    padding: 6px 8px;
    cursor: pointer;
    list-style: none;
    border-radius: 4px;
}

.debug-card-toggle::-webkit-details-marker {
    display: none;
}

.debug-card:not([open]) .debug-card-toggle {
    margin-bottom: -6px;
}

.debug-card-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-135deg);
    transition: transform 0.18s ease;
}

.debug-card:not([open]) .debug-card-toggle::after {
    transform: rotate(45deg);
}

.debug-card-toggle:hover {
    background: var(--palette-primary-soft);
}

.debug-card-toggle:focus-visible {
    outline: 2px solid var(--palette-primary);
    outline-offset: 2px;
}

.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(var(--palette-white-rgb), 0.78);
    border: 1px solid rgba(var(--palette-slate-rgb), 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: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 18px 0 0;
}

.practice-footer-links .inline-minipage-reference {
    min-width: 0;
    width: 100%;
    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;
}

.theory-lesson-boundary-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 1px solid var(--palette-border);
    border-radius: 50%;
    background: var(--palette-surface-muted);
    color: var(--palette-slate);
    box-shadow: none;
}

.theory-lesson-boundary-link::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
}

.theory-lesson-boundary-link.is-previous::before {
    transform: translateX(1px) rotate(135deg);
}

.theory-lesson-boundary-link.is-next::before {
    transform: translateX(-1px) rotate(-45deg);
}

a.theory-lesson-boundary-link:hover,
a.theory-lesson-boundary-link:focus-visible {
    background: var(--palette-surface-hover);
    color: var(--palette-ink);
    box-shadow: var(--shadow-circular-control-hover);
}

.theory-lesson-boundary-link.is-disabled {
    opacity: 0.35;
}

a.theory-lesson-boundary-link::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    z-index: 96;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
    border: 1px solid rgba(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 0.16);
    color: var(--palette-white);
    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.2s ease, transform 0.2s ease;
}

.theory-lesson-boundary-link.is-previous::after {
    left: 0;
}

.theory-lesson-boundary-link.is-next::after {
    right: 0;
}

a.theory-lesson-boundary-link:hover::after,
a.theory-lesson-boundary-link:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.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 var(--palette-border-strong);
    border-radius: 999px;
    background: var(--palette-surface-soft);
    color: var(--palette-ink);
}

.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(
        var(--palette-success) 0 var(--progress),
        var(--palette-success-soft) var(--progress) 100%
    );
}

.practice-feed-goal.is-last-solved .practice-feed-goal-gauge {
    background: conic-gradient(
        var(--palette-success) 0 calc(var(--progress) - var(--last-progress)),
        var(--palette-progress-new) calc(var(--progress) - var(--last-progress)) var(--progress),
        var(--palette-success-soft) var(--progress) 100%
    );
}

.practice-feed-goal.is-last-skip .practice-feed-goal-gauge {
    background: conic-gradient(
        var(--palette-success) 0 var(--progress),
        var(--palette-danger) var(--progress) calc(var(--progress) + var(--last-progress)),
        var(--palette-success-soft) calc(var(--progress) + var(--last-progress)) 100%
    );
}

.practice-feed-goal-gauge::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--palette-surface-soft);
}

.practice-feed-goal.is-complete .practice-feed-goal-gauge,
.practice-feed-goal.is-failed .practice-feed-goal-gauge {
    color: var(--palette-white);
    font-size: 0.78rem;
    font-weight: 800;
}

.practice-feed-goal.is-complete .practice-feed-goal-gauge {
    background: var(--palette-success);
}

.practice-feed-goal.is-failed .practice-feed-goal-gauge {
    background: var(--palette-danger);
}

.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: var(--palette-white);
    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: var(--palette-danger-fill);
    background: var(--palette-white);
    color: var(--palette-danger-deep);
}

.practice-feed-goal.is-negative.is-last-skip .practice-feed-goal-gauge {
    background: conic-gradient(
        var(--palette-danger) 0 var(--last-progress),
        var(--palette-border) var(--last-progress) 100%
    );
}

.practice-feed-goal.is-failed .practice-feed-goal-gauge {
    background: var(--palette-danger);
}

.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(var(--palette-success-rgb), 0.32);
    border-radius: 999px;
    background: var(--palette-success-soft);
}

.practice-feed-progress-fill,
.practice-feed-progress-last {
    position: absolute;
    top: 0;
    bottom: 0;
}

.practice-feed-progress-fill {
    left: 0;
    width: var(--progress);
    background: var(--palette-success);
}

.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: var(--palette-progress-new);
}

.is-last-skip .practice-feed-progress-last {
    left: var(--progress);
    background: var(--palette-danger);
}

.practice-feed-goal.is-negative .practice-feed-progress-track {
    border-color: rgba(var(--palette-danger-rgb), 0.5);
    background: var(--palette-danger-soft);
}
.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 var(--palette-border-strong);
    border-radius: 999px;
    background: var(--palette-surface-soft);
    color: var(--palette-ink);
    font-size: 0;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(var(--palette-shadow-rgb), 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 var(--palette-ink-strong);
    border-radius: 8px;
    background: var(--palette-danger-deep);
    color: var(--palette-white);
    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: var(--palette-slate-light);
    background: var(--palette-primary-soft);
    color: var(--palette-ink);
    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 var(--palette-border-strong);
    border-radius: 999px;
    background: var(--palette-surface-soft);
    color: var(--palette-ink);
    box-shadow: 0 1px 3px rgba(var(--palette-shadow-rgb), 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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 0.16);
    color: var(--palette-white);
    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: var(--palette-slate-light);
    background: var(--palette-primary-soft);
    color: var(--palette-ink);
}

.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(var(--palette-primary-rgb), 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(var(--palette-slate-rgb), 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(var(--palette-primary-rgb), 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(var(--palette-slate-rgb), 0.28);
    border-radius: 7px;
    background: var(--palette-canvas);
    color: var(--palette-ink);
    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(var(--palette-shadow-rgb), 0.2);
    color: var(--palette-white);
    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: var(--palette-ink);
}

.theory-summary-media-icon.is-applet {
    color: var(--palette-ink);
    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(var(--palette-shadow-rgb), 0.44);
}

.theory-reset-confirm-dialog {
    width: min(100%, 560px);
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--palette-white);
    box-shadow: 0 20px 38px rgba(var(--palette-shadow-rgb), 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: var(--palette-white);
}

.theory-reset-confirm-cancel:hover,
.theory-reset-confirm-cancel:focus-visible {
    border-color: transparent;
    background: var(--color-link-hover);
    color: var(--palette-white);
}

.theory-reset-confirm-accept {
    border-color: var(--color-border);
    background: var(--palette-white);
    color: var(--color-heading);
}

.theory-reset-confirm-accept:hover,
.theory-reset-confirm-accept:focus-visible {
    border-color: var(--palette-danger-deep);
    background: var(--palette-danger);
    color: var(--palette-white);
}

.theory-reset-confirm-shortcut {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(var(--palette-slate-rgb), 0.66);
}

.theory-reset-confirm-cancel .theory-reset-confirm-shortcut {
    color: rgba(var(--palette-primary-soft-rgb), 0.92);
}

.theory-reset-confirm-accept:hover .theory-reset-confirm-shortcut,
.theory-reset-confirm-accept:focus-visible .theory-reset-confirm-shortcut {
    color: rgba(var(--palette-danger-soft-rgb), 0.9);
}

.theory-step-markers {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 6px;
    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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: var(--palette-white);
    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(var(--palette-shadow-rgb), 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: var(--palette-primary-highlight);
    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;
}

/* Laboratory ticks retain the normal completion colours and tick width. */
.theory-step-marker.is-virtual-lab::before {
    border-radius: 3px;
}
.theory-step-marker.is-virtual-lab {
    --lab-tick-fill: var(--palette-primary-highlight);
}
.theory-step-marker.is-virtual-lab.is-status-solved {
    --lab-tick-fill: var(--palette-success-fill);
}
.theory-step-marker.is-virtual-lab.is-status-failed {
    --lab-tick-fill: var(--palette-danger-fill);
}
.theory-step-marker.is-virtual-lab.is-current {
    --lab-tick-fill: var(--palette-primary-hover);
}
.theory-step-marker.is-virtual-lab.is-current.is-status-solved {
    --lab-tick-fill: var(--palette-success-deep);
}
.theory-step-marker.is-virtual-lab.is-current.is-status-failed {
    --lab-tick-fill: var(--palette-danger);
}
.theory-step-marker.is-virtual-lab::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(10px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--lab-tick-fill);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: background-color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
.theory-step-marker.is-virtual-lab.is-current::after {
    width: min(12px, 100%);
}
.theory-step-marker.is-virtual-lab:hover::after,
.theory-step-marker.is-virtual-lab:focus-visible::after {
    transform: translate(-50%, -50%) scaleY(1.2);
    filter: brightness(1.1) saturate(1.1);
}
.virtual-lab-icon {
    display: inline-flex;
    vertical-align: middle;
    flex: 0 0 auto;
    margin-inline-start: 0.3em;
    color: #0f1728;
}

.theory-step-marker.is-theory {
    border: none;
}

.theory-step-marker.is-theory::before {
    border-width: 2px;
    border-color: var(--palette-border-strong);
}

.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(var(--palette-ink-rgb), 0.18) 0 3px,
        rgba(var(--palette-ink-rgb), 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%) scaleY(1.2);
    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: var(--palette-primary-highlight);
}

.theory-step-marker.is-status-solved::before {
    background-color: var(--palette-success-fill);
}

.theory-step-marker.is-status-failed::before {
    background-color: var(--palette-danger-fill);
}

.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: var(--palette-border-strong);
}

.theory-step-marker.is-theory.is-status-solved::before {
    border-color: var(--palette-slate-light);
}

.theory-step-marker.is-theory.is-status-failed::before {
    border-color: var(--palette-warning-fill);
}

.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: var(--palette-primary-hover);
}

.theory-step-marker.is-current.is-status-solved::before {
    background-color: var(--palette-success-deep);
}

.theory-step-marker.is-current.is-status-failed::before {
    background-color: var(--palette-danger);
}

.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: var(--palette-primary-hover);
}

.theory-step-marker.is-current.is-theory.is-status-solved::before {
    border-color: var(--palette-success-deep);
}

.theory-step-marker.is-current.is-theory.is-status-failed::before {
    border-color: var(--palette-danger-deep);
}

.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: var(--palette-white);
    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;
}

.material-detail-footer .applet-report-button {
    margin-inline-start: auto;
}

.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(var(--palette-primary-hover-rgb), 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: 4px;
    }
}


.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(var(--palette-primary-deep-rgb), 0.14);
    border-radius: 18px;
    padding: 5px 8px;
    background: rgba(var(--palette-white-rgb), 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: var(--palette-slate-mid);
}

.attempt-history-side {
    text-align: right;
}

.attempt-history-side p {
    margin: 0;
}

.attempt-history-verdict {
    margin-top: 0.3rem !important;
    font-weight: 700;
    color: var(--palette-primary-deep);
}

.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(var(--palette-surface-muted-rgb), 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(var(--palette-primary-soft-rgb), 0.96);
    border: 1px solid rgba(var(--palette-primary-deep-rgb), 0.12);
    gap: 4px;
}

.attempt-history-mode-button {
    border: none;
    background: transparent;
    color: var(--palette-slate);
    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: var(--palette-white);
    color: var(--palette-primary-deep);
    box-shadow: 0 1px 3px rgba(var(--palette-ink-rgb), 0.12);
}

.attempt-history-list {
    display: grid;
    gap: 0.95rem;
}

.attempt-history-item {
    border-radius: 20px;
    background: rgba(var(--palette-white-rgb), 0.96);
    box-shadow: 0 14px 36px rgba(var(--palette-ink-rgb), 0.08);
    overflow: hidden;
    border: 2px solid transparent;
}

.attempt-history-tone-correct {
    border-color: var(--palette-success);
}

.attempt-history-tone-almost {
    border-color: var(--palette-warning);
}

.attempt-history-tone-partial {
    border-color: var(--palette-warning);
}

.attempt-history-tone-wrong {
    border-color: var(--palette-danger);
}

.attempt-history-tone-neutral {
    border-color: var(--palette-slate-light);
}

.attempt-history-item.is-uncounted {
    border-style: dashed;
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(var(--palette-white-rgb), 0.42) 0,
            rgba(var(--palette-white-rgb), 0.42) 10px,
            rgba(var(--palette-white-rgb), 0.1) 10px,
            rgba(var(--palette-white-rgb), 0.1) 20px
        );
}

.attempt-history-item.attempt-history-tone-correct.is-uncounted {
    border-color: var(--palette-success);
}

.attempt-history-item.attempt-history-tone-almost.is-uncounted {
    border-color: var(--palette-warning);
}

.attempt-history-item.attempt-history-tone-partial.is-uncounted {
    border-color: var(--palette-warning);
}

.attempt-history-item.attempt-history-tone-wrong.is-uncounted {
    border-color: var(--palette-danger);
}

.attempt-history-item.attempt-history-tone-neutral.is-uncounted {
    border-color: var(--palette-slate-light);
}

.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(var(--palette-surface-soft-rgb), 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: var(--palette-primary-deep);
}

.attempt-history-summary-time {
    color: var(--palette-slate-mid);
}

.attempt-history-summary-verdict {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(var(--palette-white-rgb), 0.84);
    color: var(--palette-primary-deep);
    font-weight: 700;
}

.attempt-history-summary-meta {
    justify-content: flex-end;
    font-size: 0.92rem;
    color: var(--palette-slate);
}

.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(var(--palette-surface-soft-rgb), 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: var(--palette-slate-mid);
}

.attempt-history-answer {
    font-size: 1.08rem;
    line-height: 1.45;
    color: var(--palette-ink);
    word-break: break-word;
}

.attempt-history-feedback {
    margin: 0.7rem 0 0;
    color: var(--palette-primary-deep);
    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(var(--palette-primary-deep-rgb), 0.1);
    background: var(--palette-white);
    color: var(--palette-ink);
}

.attempt-history-preview-item-correct {
    background: rgba(var(--palette-border-rgb), 0.96);
    border-color: rgba(var(--palette-success-rgb), 0.42);
}

.attempt-history-preview-item-almost {
    background: rgba(var(--palette-warning-soft-rgb), 0.96);
    border-color: rgba(var(--palette-warning-rgb), 0.4);
}

.attempt-history-preview-item-partial {
    background: rgba(var(--palette-warning-soft-rgb), 0.96);
    border-color: rgba(var(--palette-warning-deep-rgb), 0.42);
}

.attempt-history-preview-item-wrong {
    background: rgba(var(--palette-warning-soft-rgb), 0.96);
    border-color: rgba(var(--palette-danger-rgb), 0.4);
}

.attempt-history-preview-item-neutral {
    background: rgba(var(--palette-surface-hover-rgb), 0.96);
    border-color: rgba(var(--palette-slate-mid-rgb), 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(var(--palette-white-rgb), 0.9);
    color: var(--palette-slate);
    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: var(--palette-slate);
}

.attempt-history-raw {
    margin-top: 0.9rem;
}

.attempt-history-raw summary {
    cursor: pointer;
    color: var(--palette-slate);
}

.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(var(--palette-canvas-rgb), 0.95);
    border: 1px solid rgba(var(--palette-primary-deep-rgb), 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(var(--palette-primary-deep-rgb), 0.12);
    background: rgba(var(--palette-surface-soft-rgb), 0.98);
    color: var(--palette-slate);
    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: var(--palette-primary-deep);
    background: var(--palette-white);
    border-color: rgba(var(--palette-primary-deep-rgb), 0.18);
}

.attempt-history-actions > .button {
    min-width: 8.75rem;
    justify-content: center;
}

.attempt-history-summary {
    cursor: pointer;
}

.attempt-history-summary-kind {
    color: var(--palette-slate-mid);
    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(var(--palette-white-rgb), 0.9);
    font-weight: 800;
}

.attempt-history-skill-badge {
    gap: 0.32rem;
    background: rgba(var(--palette-surface-muted-rgb), 0.95);
    color: var(--palette-primary-deep);
}

.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: var(--palette-white);
    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: var(--palette-slate);
}

.attempt-history-skill-value,
.attempt-history-skill-delta {
    font-weight: 800;
}

.attempt-history-skill-value {
    color: var(--palette-primary-deep);
}

.attempt-history-skill-delta.is-positive {
    color: var(--palette-success-deep);
}

.attempt-history-skill-delta.is-negative {
    color: var(--palette-danger);
}

.attempt-history-skill-delta.is-neutral {
    color: var(--palette-slate-mid);
}

.attempt-history-tone-pill-correct {
    color: var(--palette-success-deep);
}

.attempt-history-tone-pill-almost {
    color: var(--palette-warning-deep);
}

.attempt-history-tone-pill-partial {
    color: var(--palette-warning-deep);
}

.attempt-history-tone-pill-wrong {
    color: var(--palette-danger);
}

.attempt-history-tone-pill-neutral {
    color: var(--palette-slate-mid);
}

.attempt-history-item.is-uncounted .attempt-history-quality-badge {
    background-image:
        repeating-linear-gradient(
            -45deg,
            rgba(var(--palette-white-rgb), 0.5) 0,
            rgba(var(--palette-white-rgb), 0.5) 8px,
            rgba(var(--palette-white-rgb), 0.2) 8px,
            rgba(var(--palette-white-rgb), 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: var(--palette-white);
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
}

.attempt-history-field-correct {
    border-color: rgba(var(--palette-success-rgb), 0.72);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-success-rgb), 0.2);
}

.attempt-history-field-wrong,
.attempt-history-field-almost,
.attempt-history-field-partial {
    border-color: rgba(var(--palette-danger-rgb), 0.72);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-danger-rgb), 0.16);
}

.attempt-history-expected-answer {
    display: none;
    align-items: center;
    margin-left: 0.38rem;
    color: var(--palette-slate-mid);
    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-miniature .attempt-history-ordering-board {
    min-width: 0;
    width: 100%;
}

.attempt-history-multiple-ordering {
    display: grid;
    gap: 18px;
}

.attempt-history-ordering-group + .attempt-history-ordering-group {
    padding-top: 14px;
    border-top: 1px solid rgba(var(--palette-primary-deep-rgb), 0.12);
}

.attempt-history-ordering-group h4 {
    margin: 0 0 8px;
    font-size: 0.86rem;
}

.attempt-history-unplaced-cards {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.attempt-history-unplaced-cards .ordering-card {
    flex: 0 1 auto;
    width: auto;
    max-width: 220px;
}

.attempt-history-miniature :is(.ordering-card,.matching-card,.connection-card) .exercise-image-option-visual {
    width: min(100%, calc(var(--image-option-relative-width, 100%) * 3)) !important;
    max-height: 180px;
}

.attempt-history-image-preview .image-exercise-zoom {
    display: none;
}

.attempt-history-image-preview .image-exercise-figure .lesson-figure-svg {
    cursor: default;
}

.attempt-history-image-marks {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.attempt-history-image-preview > p,
.attempt-history-applet-event {
    margin: 8px 0 0;
    font-size: 0.82rem;
}

.attempt-history-legacy-note {
    margin: 0 0 8px;
    color: var(--palette-warning-deep);
    font-size: 0.78rem;
}

.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(var(--palette-success-rgb), 0.84);
    filter: drop-shadow(0 0 4px rgba(var(--palette-success-rgb), 0.18));
}

.attempt-history-connection-links .connection-link.is-wrong {
    stroke: rgba(var(--palette-danger-rgb), 0.84);
    filter: drop-shadow(0 0 4px rgba(var(--palette-danger-rgb), 0.18));
}

.attempt-history-connection-links .connection-link.is-expected {
    stroke: rgba(var(--palette-slate-mid-rgb), 0.7);
    stroke-dasharray: 5 5;
    filter: none;
}

.attempt-history-connection-card-group-0 {
    box-shadow: inset 0 0 0 1px rgba(var(--palette-danger-rgb), 0.16);
}

.attempt-history-connection-card-group-1 {
    box-shadow: inset 0 0 0 1px rgba(var(--palette-primary-rgb), 0.16);
}

.attempt-history-connection-card-group-2 {
    box-shadow: inset 0 0 0 1px rgba(var(--palette-success-rgb), 0.16);
}

.attempt-history-connection-card-group-3 {
    box-shadow: inset 0 0 0 1px rgba(var(--palette-warning-rgb), 0.16);
}

.attempt-history-connection-card-group-4 {
    box-shadow: inset 0 0 0 1px rgba(var(--palette-violet-rgb), 0.16);
}

.attempt-history-connection-card-group-5 {
    box-shadow: inset 0 0 0 1px rgba(var(--palette-teal-rgb), 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(var(--palette-slate-rgb), 0.34);
    border-radius: inherit;
    background: var(--palette-white);
    box-shadow: 0 3px 7px rgba(var(--palette-shadow-rgb), 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(var(--palette-success-rgb), 0.72);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-success-rgb), 0.58), 0 0 8px rgba(var(--palette-success-rgb), 0.16), 0 3px 7px rgba(var(--palette-shadow-rgb), 0.18);
}

.attempt-history-connection-preview .connection-card.is-choice-incorrect::before {
    border-color: rgba(var(--palette-danger-rgb), 0.72);
    box-shadow: inset 0 0 0 1px rgba(var(--palette-danger-rgb), 0.58), 0 0 8px rgba(var(--palette-danger-rgb), 0.16), 0 3px 7px rgba(var(--palette-shadow-rgb), 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: var(--palette-slate-mid);
    font-size: 0.86rem;
}

.attempt-history-meta-item-value {
    font-weight: 800;
}

.attempt-history-meta-item-value.is-positive {
    color: var(--palette-success-deep);
}

.attempt-history-meta-item-value.is-negative {
    color: var(--palette-danger);
}

.attempt-history-meta-item-value.is-warning {
    color: var(--palette-danger);
}

.attempt-history-meta-item-value.is-neutral {
    color: var(--palette-primary-deep);
}

.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(var(--palette-slate-mid-rgb), 0.55);
    color: var(--palette-slate-mid);
    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: var(--palette-white);
    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: var(--palette-white);
    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(var(--palette-primary-deep-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--palette-surface-soft-rgb), 0.98);
    color: var(--palette-slate);
    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(var(--palette-primary-deep-rgb), 0.18);
    background: var(--palette-white);
    color: var(--palette-primary-deep);
    transform: none;
}

.attempt-history-actions > .compact-control {
    border-color: transparent;
    background: var(--color-link);
    color: var(--palette-white);
}

.attempt-history-actions > .compact-control:hover,
.attempt-history-actions > .compact-control:focus-visible {
    border-color: transparent;
    background: var(--color-link-hover);
    color: var(--palette-white);
    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(var(--palette-primary-deep-rgb), 0.12);
    background: rgba(var(--palette-surface-soft-rgb), 0.98);
    color: var(--palette-slate);
    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(var(--palette-primary-deep-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--palette-primary-soft-rgb), 0.96);
}

.control-segmented[data-active-index="1"] {
    --segment-index: 1;
}

.control-segmented[data-active-index="2"] {
    --segment-index: 2;
}

.control-segmented[data-active-index="3"] {
    --segment-index: 3;
}

.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: var(--palette-white);
    box-shadow: 0 1px 3px rgba(var(--palette-ink-rgb), 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: var(--palette-slate);
    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: var(--palette-primary-deep);
    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(var(--palette-primary-deep-rgb), 0.12);
    background: rgba(var(--palette-surface-soft-rgb), 0.98);
    color: var(--palette-slate);
    font-size: 0.78rem;
    font-weight: 700;
}

.attempt-history-minor-navigation:hover,
.attempt-history-minor-navigation:focus-visible {
    border-color: rgba(var(--palette-primary-deep-rgb), 0.18);
    background: var(--palette-white);
    color: var(--palette-primary-deep);
    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(var(--palette-primary-deep-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--palette-surface-soft-rgb), 0.98);
    color: var(--palette-slate);
    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(var(--palette-primary-deep-rgb), 0.18);
    background: var(--palette-white);
    color: var(--palette-primary-deep);
}

.attempt-history-counted-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 18px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(var(--palette-slate-light-rgb), 0.34);
    transition: background-color 0.18s ease;
    pointer-events: none;
}

.attempt-history-counted-switch-thumb {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--palette-white);
    box-shadow: 0 1px 3px rgba(var(--palette-ink-rgb), 0.16);
    transition: transform 0.18s ease;
}

.attempt-history-counted-switch[aria-pressed="true"] .attempt-history-counted-switch-track {
    background: rgba(var(--palette-primary-rgb), 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: var(--palette-slate-mid);
    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: var(--palette-primary);
    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: var(--palette-slate-mid);
    font-size: 0.82rem;
}

.tag-graph-stat-line strong {
    color: var(--palette-primary-deep);
}

.tag-similarity-method {
    margin: 0 0 12px;
    padding: 8px 11px;
    border: 1px solid rgba(var(--palette-primary-deep-rgb), 0.12);
    border-radius: 10px;
    background: var(--palette-surface-soft);
    color: var(--palette-slate);
    font-size: 0.76rem;
}

.tag-similarity-method summary {
    color: var(--palette-primary-deep);
    font-weight: 700;
    cursor: pointer;
}

.tag-similarity-method p {
    margin: 8px 0 0;
    line-height: 1.5;
}

.tag-similarity-method code {
    color: var(--palette-primary-deep);
}

.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: var(--palette-slate);
    font-size: 0.78rem;
    font-weight: 650;
}

.tag-graph-toolbar input[type="range"] {
    width: 150px;
}

.tag-graph-toolbar output {
    min-width: 30px;
    color: var(--palette-primary-deep);
    font-variant-numeric: tabular-nums;
}

.tag-graph-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    min-height: 610px;
    border: 1px solid rgba(var(--palette-primary-deep-rgb), 0.18);
    border-radius: 16px;
    background: var(--palette-surface-soft);
    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(var(--palette-primary-deep-rgb), 0.1);
    border-radius: 9px;
    background: rgba(var(--palette-white-rgb), 0.88);
    color: var(--palette-slate-mid);
    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(var(--palette-primary-hover-rgb), 0.75);
}

.tag-graph-legend i.is-weak {
    border-top-width: 1px;
    border-top-color: rgba(var(--palette-slate-rgb), 0.28);
}

.tag-graph-inspector {
    padding: 16px;
    border-left: 1px solid rgba(var(--palette-primary-deep-rgb), 0.14);
    background: var(--palette-surface-soft);
}

.tag-graph-inspector h2 {
    margin: 0 0 7px;
    font-size: 1rem;
}

.tag-graph-inspector h3 {
    margin: 17px 0 6px;
    color: var(--palette-slate);
    font-size: 0.78rem;
}

.tag-graph-inspector p {
    margin: 0;
    color: var(--palette-slate-mid);
    font-size: 0.75rem;
    line-height: 1.45;
}

.tag-graph-inspector-meta {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--palette-primary-deep-rgb), 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: var(--palette-slate);
    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: var(--palette-primary-hover);
}

.tag-graph-relation-list strong.is-negative {
    color: var(--palette-danger);
}

.tag-similarity-matrix {
    margin-top: 16px;
    border: 1px solid rgba(var(--palette-primary-deep-rgb), 0.14);
    border-radius: 12px;
    background: var(--palette-surface-soft);
}

.tag-similarity-matrix > summary {
    padding: 11px 14px;
    color: var(--palette-primary-deep);
    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(var(--palette-primary-deep-rgb), 0.12);
}

.tag-similarity-matrix table {
    border-collapse: separate;
    border-spacing: 1px;
    min-width: max-content;
    background: var(--palette-surface-muted);
    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: var(--palette-canvas);
    color: var(--palette-slate);
}

.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: var(--palette-surface-soft);
    color: var(--palette-slate);
    font-weight: 600;
    text-align: left;
}

.tag-similarity-matrix tbody th span {
    display: inline-block;
    min-width: 20px;
    color: var(--palette-slate-light);
}

.tag-similarity-matrix td {
    background: var(--palette-white);
    color: var(--palette-slate);
}

.tag-similarity-matrix td.is-positive {
    background: rgba(var(--palette-primary-rgb), calc(0.08 + var(--matrix-intensity) * 0.62));
    color: var(--palette-primary-deep);
}

.tag-similarity-matrix td.is-negative {
    background: rgba(var(--palette-danger-rgb), calc(0.07 + var(--matrix-intensity) * 0.56));
    color: var(--palette-danger-deep);
}

.tag-similarity-matrix td.is-neutral {
    background: var(--palette-white);
    color: var(--palette-slate-light);
}

.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: var(--palette-surface-soft);
}

.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(var(--palette-primary-deep-rgb), 0.2);
    border-radius: 999px;
    background: var(--palette-primary-soft);
    color: var(--palette-primary-deep);
    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(var(--palette-surface-muted-rgb), 0.5);
    stroke: var(--spider-color, var(--palette-slate-light));
    stroke-opacity: 0.32;
    stroke-width: 1;
}

.block-skill-spider-grid {
    fill: none;
    stroke: var(--spider-color, var(--palette-slate-light));
    stroke-opacity: 0.28;
    stroke-width: 1;
}

.block-skill-spider-zero {
    fill: rgba(var(--palette-white-rgb), 0.88);
    stroke: var(--spider-color, var(--palette-slate-light));
    stroke-opacity: 0.48;
    stroke-width: 1.2;
}

.block-skill-spider-axis {
    stroke: var(--spider-color, var(--palette-slate-light));
    stroke-opacity: 0.24;
    stroke-width: 1;
}

.block-skill-spider-value-shape {
    fill: var(--spider-color, var(--palette-slate-light));
    fill-opacity: 0.17;
    stroke: var(--spider-color, var(--palette-slate-light));
    stroke-linejoin: round;
    stroke-width: 2;
}

.block-skill-spider-point {
    fill: var(--spider-point-color, var(--palette-slate-light));
    stroke: var(--palette-white);
    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: var(--palette-danger);
}

.block-skill-spider-point.is-zero {
    fill: var(--palette-slate-light);
}

.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: var(--palette-white);
    stroke: var(--spider-point-color, var(--palette-slate-light));
    stroke-width: 2.5;
}

.block-skill-spider-center-value {
    fill: var(--spider-color, var(--palette-primary-deep));
    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(var(--palette-primary-deep-rgb), 0.14);
    border-radius: 9px;
    background: var(--palette-surface-soft);
    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:var(--palette-surface-muted)}
.teacher-student-tab-row{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px;margin-top:12px;border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.16)}
.teacher-student-tab{position:relative;bottom:-1px;padding:7px 11px;border:1px solid transparent;border-radius:7px 7px 0 0;background:transparent;color:var(--palette-primary-deep);font:inherit;font-size:.78rem;cursor:pointer}
.teacher-student-tab:hover,.teacher-student-tab:focus-visible{background:var(--palette-surface-soft);color:var(--palette-primary-hover)}
.teacher-student-tab[aria-expanded="true"]{border-color:rgba(var(--palette-primary-deep-rgb),.16);border-bottom-color:var(--palette-white);background:var(--palette-white);font-weight:650}
.teacher-student-review-link{margin-left:auto;padding:7px 4px;color:var(--palette-primary);font-size:.78rem}
.teacher-student-review-link+.teacher-student-review-link{margin-left:0}
.teacher-student-review-link:hover,.teacher-student-review-link:focus-visible{color:var(--palette-primary-hover);text-decoration:underline}
.teacher-student-tab-panel{padding:9px 3px 2px}
.teacher-student-tab-panel[hidden]{display:none}
.teacher-recent-attempts ol{list-style:none;margin:0;padding:0}
.teacher-recent-attempts>p{margin:0;font-size:.78rem}
.teacher-recent-attempt{display:grid;grid-template-columns:minmax(0,1fr) minmax(95px,auto) auto;align-items:center;gap:6px 12px;padding:6px 0;border-top:1px solid rgba(var(--palette-primary-deep-rgb),.08);font-size:.77rem}
.teacher-recent-attempt a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--palette-primary)}
.teacher-recent-attempt a:hover,.teacher-recent-attempt a:focus-visible{color:var(--palette-primary-hover);text-decoration:underline}
.teacher-recent-attempt>span{color:var(--color-text-muted)}
.teacher-recent-attempt-correct>span{color:var(--palette-success)}
.teacher-recent-attempt-wrong>span{color:var(--palette-danger)}
.teacher-recent-attempt-partial>span,.teacher-recent-attempt-almost>span{color:var(--palette-warning)}
.teacher-recent-attempt time{color:var(--color-text-muted);white-space:nowrap}
@media(max-width:700px){.teacher-recent-attempt{grid-template-columns:minmax(0,1fr) auto}.teacher-recent-attempt>span{grid-column:1}.teacher-recent-attempt time{grid-column:2;grid-row:1}}
.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,var(--palette-slate-light));border-radius:999px;background:var(--palette-white);color:var(--color-heading);font:inherit;font-size:.76rem;cursor:help}
.teacher-student-brief{margin-top:10px}
.teacher-student-brief .teacher-block-peek-trigger{display:block;cursor:help}
.teacher-block-peek-chart{position:absolute;z-index:2147483646;top:calc(100% + 7px);left:0;width:min(390px,calc(100vw - 40px));padding:8px 10px;border:var(--tooltip-border);border-radius:var(--tooltip-radius);background:var(--palette-white);color:var(--color-heading);box-shadow:var(--tooltip-shadow);visibility:hidden;opacity:0;transform:translateY(3px);transition:opacity .15s ease,transform .15s ease,visibility .15s}
.teacher-block-peek-chart::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.teacher-block-peek:last-child .teacher-block-peek-chart{left:auto;right:0}
.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-block-peek-chart .block-skill-spider-details{min-height:28px}
.teacher-block-peek-chart .block-skill-spider-detail{color:var(--color-heading)}
.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:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);grid-template-areas:"counters chart" "summary chart" "previews chart";column-gap:18px;align-items:start}
.teacher-student-detailed>.teacher-student-counters{grid-area:counters}
.teacher-student-detailed>.teacher-detailed-summary{grid-area:summary}
.teacher-student-detailed>.teacher-detailed-previews{grid-area:previews}
.teacher-student-detailed>.teacher-detailed-charts{grid-area:chart;align-self:start}
.teacher-detailed-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.teacher-student-detailed>.teacher-detailed-charts{grid-template-columns:minmax(0,1fr)}
.teacher-detailed-chart{min-width:0;padding:8px;border:1px solid rgba(var(--palette-primary-deep-rgb), .12);border-radius:10px}
.teacher-detailed-chart h3{display:flex;justify-content:space-between;margin:0;font-size:.84rem}
.teacher-block-lessons{display:grid;gap:0;margin-top:10px;border-top:1px solid rgba(var(--palette-primary-deep-rgb),.1)}
.teacher-block-lesson-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.08)}
.teacher-block-lesson-row .teacher-block-lesson{border-bottom:0}
.teacher-block-lesson-row form{margin:0}
.teacher-lesson-credit{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--palette-border-strong);border-radius:50%;background:transparent;color:var(--palette-primary);font-size:.8rem;cursor:pointer}
.teacher-lesson-credit:hover,.teacher-lesson-credit:focus-visible{border-color:var(--palette-primary);background:var(--palette-primary-soft);box-shadow:0 2px 8px rgba(var(--palette-primary-deep-rgb),.14)}
.teacher-lesson-credit.is-credited{border-color:var(--palette-success);color:var(--palette-success)}
.teacher-refresh-overview{margin:2px 0 10px;color:var(--color-heading);font-size:.82rem}
.teacher-refresh-session{padding:9px 3px;border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.1);font-size:.78rem}
.teacher-refresh-session header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.teacher-refresh-session header a{font-weight:650}
.teacher-refresh-session p{margin:5px 0;color:var(--color-text-muted)}
.teacher-refresh-themes{display:flex;flex-wrap:wrap;gap:5px 14px;color:var(--color-heading);font-variant-numeric:tabular-nums}
.teacher-block-lesson{display:grid;grid-template-columns:minmax(0,1fr) minmax(56px,90px) 35px;align-items:center;gap:9px;min-height:32px;padding:5px 3px;border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.08);color:var(--color-heading);font-size:.74rem;text-decoration:none}
.teacher-block-lesson:not(.is-unavailable):hover,.teacher-block-lesson:not(.is-unavailable):focus-visible{background:var(--palette-primary-soft);color:var(--palette-primary-hover)}
.teacher-block-lesson.is-unavailable{opacity:.65}
.teacher-block-lesson-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teacher-block-lesson-progress{height:5px;overflow:hidden;border-radius:999px;background:var(--palette-surface-muted)}
.teacher-block-lesson-progress>span{display:block;height:100%;border-radius:inherit;background:var(--palette-primary)}
.teacher-block-lesson strong{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.teacher-student-detailed .teacher-detailed-chart .block-skill-spider-wrap{min-height:0}
.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:var(--palette-surface-soft)}
.teacher-detailed-previews{flex-wrap:wrap}
.teacher-detailed-previews>div{flex:1 1 190px;min-width:0}
.teacher-detailed-previews p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teacher-tab-footer{margin:10px 0 0;font-size:.77rem}
.teacher-recommendations-tab{display:grid;gap:0}
.teacher-recommendation-row{position:relative;display:grid;grid-template-columns:50px minmax(125px,220px) 130px minmax(0,1fr);align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.09);color:var(--palette-primary);font-size:.78rem;text-decoration:none}
.teacher-recommendation-row:hover,.teacher-recommendation-row:focus-visible{background:var(--palette-surface-soft);color:var(--palette-primary-hover)}
.teacher-recommendation-row>span{min-width:0}
.teacher-recommendation-detail,.teacher-recommendation-deadline{overflow:hidden;color:var(--color-text-muted);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}
.teacher-recommendation-title{line-height:1.35}
.teacher-recommendation-row .teacher-recommendation-importance{justify-self:start;padding:3px 8px;border:1px solid var(--priority-border);border-radius:999px;background:color-mix(in srgb,var(--priority-color) 8%,var(--palette-white));color:var(--priority-color);font-size:.72rem}
.teacher-recommendation-expand{border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.09)}
.teacher-recommendation-expand>.teacher-recommendation-row{list-style:none;cursor:pointer;border-bottom:0;padding-right:22px}
.teacher-recommendation-expand>.teacher-recommendation-row::-webkit-details-marker{display:none}
.teacher-recommendation-expand>.teacher-recommendation-row::after{content:"▸";position:absolute;right:5px;color:var(--color-text-muted)}
.teacher-recommendation-expand[open]>.teacher-recommendation-row::after{content:"▾"}
.teacher-refresh-tag-list{display:grid;gap:5px;padding:2px 12px 11px 23px}
.teacher-refresh-tag-list>div{display:flex;justify-content:space-between;gap:12px;font-size:.76rem}
.teacher-refresh-tag-list>div>span:last-child{color:var(--color-text-muted);white-space:nowrap}
@media(max-width:720px){.teacher-recommendation-row{grid-template-columns:50px minmax(0,1fr);gap:3px 10px}.teacher-recommendation-importance{grid-column:1;grid-row:1}.teacher-recommendation-title{grid-column:2;grid-row:1}.teacher-recommendation-detail{grid-column:2;grid-row:2}.teacher-recommendation-deadline{grid-column:2;grid-row:3}}
.teacher-work-lists h3,.teacher-work-lists p{margin:0 0 5px;font-size:.78rem}
.teacher-student-full{min-width:0}
.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:var(--palette-surface-soft);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(var(--palette-primary-deep-rgb), .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(var(--palette-primary-deep-rgb), .24);border-radius:8px;background:var(--palette-white);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){[data-skills-view-mode="detailed"] .teacher-student-detailed{grid-template-columns:minmax(0,1fr);grid-template-areas:"counters" "chart" "summary" "previews"}.teacher-student-detailed>.teacher-detailed-charts{width:min(100%,300px)}.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}}

.site-main>.container:has(>.teacher-error-review,>.teacher-lesson-review){--container-width:1580px}
.teacher-error-review{display:grid;gap:16px;padding:20px;background:transparent}
.teacher-error-review-modes.control-segmented{flex:none;width:min(320px,100%);font-size:.78rem}
.teacher-error-review-modes.control-segmented>button{font-size:.74rem;cursor:pointer}
.teacher-error-review-header,.teacher-error-review-item-head,.teacher-error-review-prev-next{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.teacher-error-review-header h1,.teacher-error-review-item-head h2{margin:0}
.teacher-error-review-header .material-summary{max-width:80ch;margin:8px 0 0}
.teacher-error-review-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0}
.teacher-error-review-toolbar label{display:inline-flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap;color:var(--color-heading);font-size:.78rem}
.teacher-error-review-toolbar .teacher-error-review-error-limit input{width:52px}
.teacher-error-review-toolbar input{flex:none;width:auto;min-height:36px;padding:5px 7px;border:1px solid rgba(var(--palette-primary-deep-rgb),.25);border-radius:6px;background:var(--palette-white);font:inherit}
.teacher-error-review-toolbar>button{min-height:36px;margin-left:auto;white-space:nowrap}
.teacher-error-review-error{margin:0;color:var(--palette-danger);font-size:.8rem}
.teacher-error-review-layout{display:grid;grid-template-columns:minmax(210px,240px) minmax(0,1fr);gap:24px;align-items:start}
.teacher-error-review-queue{position:sticky;top:86px;min-width:0;max-height:calc(100vh - 104px);overflow-y:auto;padding-right:14px}
.teacher-error-review-queue h2{margin:0 0 8px;font-size:.9rem}
.teacher-error-review-queue ol{list-style:none;margin:0;padding:0}
.teacher-error-review-queue li+li{border-top:1px solid rgba(var(--palette-primary-deep-rgb),.08)}
.teacher-error-review-queue a{display:grid;gap:3px;padding:8px;color:var(--color-heading);font-size:.76rem;text-decoration:none}
.teacher-error-review-queue a:hover,.teacher-error-review-queue a:focus-visible{background:var(--palette-surface-soft)}
.teacher-error-review-queue a.is-active{background:var(--palette-primary-soft);color:var(--palette-primary-deep);font-weight:650}
.teacher-error-review-queue a.is-unresolved{border-inline-start:3px solid var(--palette-danger);background:var(--palette-danger-soft)}
.teacher-error-review-queue a.is-many-errors{border-inline-start:3px solid var(--palette-warning);background:var(--palette-warning-soft)}
.teacher-error-review-queue a.is-unresolved.is-active,.teacher-error-review-queue a.is-many-errors.is-active{font-weight:650}
.teacher-error-review-queue small{color:var(--color-text-muted);font-size:.7rem;font-weight:400}
.teacher-error-review-item{width:100%;min-width:0}
.teacher-error-review-item-head{align-items:end;padding-bottom:9px}
.teacher-error-review-item-head h2{font-size:1.1rem}
.teacher-error-review-item-links{display:flex;gap:12px;white-space:nowrap;font-size:.76rem}
.teacher-error-review-statement{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:16px 18px;border:1px solid rgba(var(--palette-primary-deep-rgb),.13);border-radius:8px;background:var(--palette-white)}
.teacher-error-review-statement h3,.teacher-error-review-attempts h3{margin:0 0 9px;font-size:.86rem}
.teacher-error-review-statement .material-body{margin:0}
.teacher-lesson-review{display:grid;gap:16px;width:100%;max-width:none;margin-inline:auto;padding:20px;background:transparent}
.teacher-lesson-review-header,.teacher-lesson-step-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.teacher-lesson-review-header h1,.teacher-lesson-step-heading h2{margin:0}
.teacher-lesson-review-header .material-summary{margin:7px 0 0}
.teacher-lesson-progress{display:flex;gap:6px;align-items:center;padding:5px 0}
.teacher-lesson-review-layout{display:grid;gap:24px;align-items:start;min-width:0}
.teacher-lesson-review-layout.has-attempts{grid-template-columns:minmax(0,1fr) minmax(310px,360px)}
.teacher-lesson-review-main{display:grid;gap:14px;min-width:0}
.teacher-lesson-review-layout:not(.has-attempts) .teacher-lesson-review-main{width:min(100%,1120px);margin-inline:auto}
.teacher-lesson-review .teacher-lesson-review-attempts{position:sticky;top:86px;min-width:0;max-height:calc(100vh - 104px);overflow:auto;padding:0 0 0 18px;border-top:0;border-left:1px solid rgba(var(--palette-primary-deep-rgb),.12)}
.teacher-lesson-reading-time{flex:none;color:var(--color-text-muted);font-size:.78rem}
.teacher-lesson-review .teacher-error-review-statement{min-height:130px}
@media(max-width:1280px){.teacher-lesson-review-layout.has-attempts{grid-template-columns:minmax(0,1fr)}.teacher-lesson-review .teacher-lesson-review-attempts{position:static;max-height:none;overflow:visible;padding:13px 0 0;border-top:1px solid rgba(var(--palette-primary-deep-rgb),.12);border-left:0}}
@media(max-width:680px){.teacher-lesson-review-header,.teacher-lesson-step-heading{flex-direction:column}.teacher-refresh-tag-list>div{flex-direction:column;gap:2px}.teacher-refresh-tag-list>div>span:last-child{white-space:normal}}
.teacher-error-review-options{display:grid;gap:6px;margin:12px 0 0;padding-left:22px;font-size:.82rem}
.teacher-error-review-attempts{padding-top:13px;border-top:1px solid rgba(var(--palette-primary-deep-rgb),.12)}
.teacher-error-review .teacher-error-review-attempts{border-top:0}
.teacher-error-review-attempt{padding:12px 0;border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.1)}
.teacher-error-review-attempt header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:8px;font-size:.78rem}
.teacher-error-review-attempt header strong{color:var(--color-heading)}
.teacher-error-review-attempt.attempt-history-tone-wrong header strong{color:var(--palette-danger)}
.teacher-error-review-attempt.attempt-history-tone-partial header strong,.teacher-error-review-attempt.attempt-history-tone-almost header strong{color:var(--palette-warning-deep)}
.teacher-error-review-attempt .attempt-history-preview-card{margin:0}
.teacher-error-review-attempt .attempt-history-feedback{margin:8px 0 0}
.attempt-history-variant-label,
.attempt-history-variant-note{margin:0 0 8px;font-size:.78rem;line-height:1.4}
.attempt-history-variant-label{color:var(--palette-slate-mid)}
.attempt-history-variant-note{color:var(--palette-warning-deep)}
.teacher-error-review-prev-next{margin-top:16px}
.teacher-error-review-empty{padding:16px 0}
.teacher-error-review-empty h2{margin:0 0 5px;font-size:1rem}
.teacher-error-review-empty p{margin:0}
@media(max-width:1350px){.teacher-error-review-layout{grid-template-columns:minmax(0,1fr)}.teacher-error-review-queue{position:static;max-height:none;overflow:visible;padding:0 0 10px}.teacher-error-review-queue ol{display:flex;gap:6px;overflow-x:auto}.teacher-error-review-queue li{flex:0 0 220px}.teacher-error-review-queue li+li{border-top:0}}
@media(max-width:820px){.teacher-error-review-header,.teacher-error-review-item-head{flex-wrap:wrap}}

.block-skill-spider-point-hit:focus-visible {
    fill: rgba(var(--palette-primary-hover-rgb), 0.12);
    stroke: rgba(var(--palette-primary-hover-rgb), 0.45);
    stroke-width: 1;
}

.block-skill-spider-label {
    fill: var(--palette-slate);
    font-size: 8px;
    font-weight: 650;
}

.block-skill-spider-scale {
    fill: var(--palette-slate-light);
    font-size: 8px;
}

.block-skill-spider-scale.is-positive {
    fill: var(--palette-primary-hover);
}

.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: var(--palette-slate-light);
    font-size: 0.64rem;
}

.block-skill-axis-track::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    border-bottom: 1px solid rgba(var(--palette-primary-deep-rgb), 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 var(--palette-white);
    background: var(--palette-primary-deep);
    box-shadow: 0 0 0 1px rgba(var(--palette-primary-deep-rgb), 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: var(--palette-primary-deep);
    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(var(--palette-surface-hover-rgb), 0.7);
}

.block-skill-zero-axis {
    position: absolute;
    z-index: 2;
    top: -2px;
    bottom: -2px;
    left: 50%;
    border-left: 1px solid rgba(var(--palette-primary-deep-rgb), 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: var(--palette-primary);
}

.block-skill-tag-bar.is-negative {
    background: var(--palette-danger);
}

.block-skill-tag-point {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: var(--skill-point-position);
    width: 7px;
    height: 7px;
    border: 1px solid var(--palette-white);
    border-radius: 50%;
    background: var(--palette-primary-hover);
    box-shadow: 0 0 0 1px rgba(var(--palette-primary-deep-rgb), 0.28);
    transform: translate(-50%, -50%);
}

.block-skill-tag-point.is-negative {
    background: var(--palette-danger);
    box-shadow: 0 0 0 1px rgba(var(--palette-danger-deep-rgb), 0.28);
}

.block-skill-tag-point.is-zero {
    background: var(--palette-slate-light);
}

.block-skill-tag-row > strong {
    color: var(--palette-primary-deep);
    font-size: 0.75rem;
    text-align: right;
}

.block-skill-tag-weight {
    color: var(--palette-slate-light);
    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(var(--palette-primary-deep-rgb), 0.14);
    border-radius: 999px;
    background: rgba(var(--palette-surface-muted-rgb), 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(var(--palette-primary-deep-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--palette-surface-soft-rgb), 0.98);
    color: var(--palette-slate);
    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: var(--palette-white);
    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(var(--palette-primary-deep-rgb), 0.18);
    background: var(--palette-white);
    color: var(--palette-primary-deep);
}

.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(var(--palette-primary-deep-rgb), 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: var(--palette-slate-mid);
    font-size: 0.76rem;
    line-height: 1.25;
    white-space: nowrap;
}

.skills-attempt-number {
    flex: 0 0 auto;
    color: var(--palette-primary-deep);
    font-weight: 750;
}

.skills-attempt-title {
    min-width: 4rem;
    overflow: hidden;
    color: var(--palette-primary-deep);
    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(var(--palette-primary-deep-rgb), 0.08);
    color: var(--palette-primary-deep);
    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: var(--palette-slate-mid);
    font-weight: 800;
}

[data-skill-tooltip] {
    cursor: help;
}

.site-floating-tooltip {
    position: fixed;
    z-index: 2147483647;
    width: max-content;
    max-width: min(340px, calc(100vw - 24px));
    padding: 8px 10px;
    border: var(--tooltip-border);
    border-radius: var(--tooltip-radius);
    background: var(--tooltip-background);
    color: var(--tooltip-color);
    box-shadow: var(--tooltip-shadow);
    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(var(--palette-primary-deep-rgb), 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: var(--palette-primary-deep);
    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: var(--palette-white);
    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: var(--palette-slate-light);
}

.path-skill-tooltip .is-negative {
    color: var(--palette-warning-fill);
}

.path-skill-tooltip .is-neutral {
    color: var(--palette-slate-light);
}

.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: var(--palette-success-deep);
}

.skill-weekly-delta.is-negative {
    color: var(--palette-danger);
}

.skill-weekly-delta.is-neutral {
    color: var(--palette-slate-mid);
}

.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: var(--palette-white);
    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;
    scroll-margin-top: 80px;
    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(var(--palette-white-rgb), 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-active-user-filter,
.attempt-history-archived-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--palette-primary-deep);
    font-size: 0.82rem;
}

.attempt-history-active-user-filter a,
.attempt-history-archived-links a,
.attempt-history-page .attempt-history-user-filter {
    color: var(--palette-primary);
    font-size: 0.76rem;
    font-weight: 500;
    text-decoration: none;
}

.attempt-history-active-user-filter a:hover,
.attempt-history-active-user-filter a:focus-visible,
.attempt-history-archived-links a:hover,
.attempt-history-archived-links a:focus-visible,
.attempt-history-page .attempt-history-user-filter:hover,
.attempt-history-page .attempt-history-user-filter:focus-visible {
    color: var(--palette-primary-deep);
    text-decoration: underline;
}

.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(var(--palette-primary-deep-rgb), 0.1);
    border-radius: 0 0 8px 8px;
    background: rgba(var(--palette-white-rgb), 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: var(--palette-white);
}

.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(var(--palette-success-soft-rgb), 0.96);
}

.choose-correct-switch.is-incorrect-selected {
    background: rgba(var(--palette-danger-soft-rgb), 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: var(--palette-danger);
    text-decoration-line: line-through;
    text-decoration-color: var(--palette-danger);
    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(var(--palette-slate-light-rgb), 0.34);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 14%, rgba(var(--palette-slate-light-rgb), 0.2), transparent 34%),
        linear-gradient(145deg, var(--palette-surface-soft) 0%, var(--palette-surface-muted) 100%);
    box-shadow: 0 18px 44px rgba(var(--palette-shadow-rgb), 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: var(--palette-slate);
    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(var(--palette-slate-mid-rgb), 0.26);
    background: var(--palette-surface-soft);
}

.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(var(--palette-slate-mid-rgb), 0.22);
    border-radius: 12px;
    background: rgba(var(--palette-surface-soft-rgb), 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;
    color: var(--priority-color, var(--palette-slate));
}

.home-plan-card-link strong {
    color: var(--priority-color, var(--color-link));
    font-size: 0.9rem;
}

.home-plan-card-link span {
    color: var(--palette-slate);
    font-size: 0.78rem;
}

.home-plan-card-link:hover,
.home-plan-card-link:focus-visible {
    background: rgba(var(--palette-surface-muted-rgb), 0.72);
}

.home-plan-importance {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 2.35rem;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--palette-surface-hover);
    color: var(--palette-primary-deep);
    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(var(--palette-slate-light-rgb), 0.24);
    border-radius: 14px;
    background: rgba(var(--palette-canvas-rgb), 0.62);
}

.home-guidance-item h3 {
    margin: 0 0 7px;
    font-size: 1rem;
}

.home-guidance-item p {
    margin: 0 0 9px;
    color: var(--palette-slate);
    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: auto;
    grid-auto-rows: max-content;
    align-content: end;
}

.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: var(--palette-primary-deep);
    font-size: 0.88rem;
    font-weight: 700;
}

.compact-skills-section-heading > span {
    color: var(--palette-slate-mid);
    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(var(--palette-primary-hover-rgb), 0.24);
    border-radius: 10px;
    background: var(--palette-surface-soft);
    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(var(--palette-primary-hover-rgb), 0.48);
    background: var(--palette-canvas);
    box-shadow: 0 7px 18px rgba(var(--palette-primary-deep-rgb), 0.1);
    outline: none;
    transform: translateY(-1px);
}

.teacher-detailed-chart.compact-block-skill-chart:hover {
    border-color: rgba(var(--palette-primary-hover-rgb), 0.24);
    background: var(--palette-surface-soft);
    box-shadow: none;
    transform: none;
}

.compact-block-skill-chart header {
    min-height: 44px;
}

.compact-block-skill-chart header span {
    color: var(--palette-slate-mid);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compact-block-skill-chart h4 {
    margin: 4px 0 0;
    color: var(--palette-primary-deep);
    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: var(--palette-primary-hover);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
}

.home-fact-card {
    border-color: rgba(var(--palette-success-rgb), 0.28);
    background: linear-gradient(150deg, var(--palette-white), var(--palette-canvas));
}

.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(var(--palette-warning-deep-rgb), 0.34);
    background: var(--palette-warning-soft);
}

.home-notice-invite {
    border-color: rgba(var(--palette-primary-hover-rgb), 0.3);
    background: var(--palette-surface-soft);
}

.home-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--palette-warning-deep);
    font-weight: 850;
}

.home-notice-invite .home-notice-icon {
    color: var(--palette-primary-hover);
}

.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(var(--palette-primary-hover-rgb), 0.52);
    font-size: 1.8rem;
    font-weight: 800;
}

.home-feature-card p {
    margin-bottom: 0;
    color: var(--palette-slate);
    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: var(--palette-slate);
}

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

    .top-panel-actions-4 {
        grid-column: 2;
    }

    .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: var(--palette-slate);
}

.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: var(--palette-slate);
    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: var(--palette-white);
    color: var(--color-text);
    font: inherit;
    font-weight: 400;
}

.settings-card input:disabled {
    background: var(--color-surface-muted);
    color: var(--palette-slate);
}

.settings-card .helptext,
.settings-card ul {
    margin: 0;
    color: var(--palette-slate-mid);
    font-size: 0.76rem;
    font-weight: 400;
}

.settings-checkbox {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8px !important;
    white-space: nowrap;
}

.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: var(--palette-success); --priority-border: rgba(var(--palette-success-rgb), 0.48); }
.priority-yellow { --priority-color: var(--palette-warning-deep); --priority-border: rgba(var(--palette-warning-deep-rgb), 0.5); }
.priority-orange { --priority-color: var(--palette-danger); --priority-border: rgba(var(--palette-danger-rgb), 0.54); }
.priority-red { --priority-color: var(--palette-danger); --priority-border: rgba(var(--palette-danger-rgb), 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%, var(--palette-white));
}

.settings-saved {
    margin: 0;
    color: var(--palette-success-deep);
}

@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 var(--palette-danger);
    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(var(--palette-slate-light-rgb), 0.9);
    border-radius: 12px;
    background: rgba(var(--palette-white-rgb), 0.96);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 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(var(--palette-primary-rgb), 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: var(--palette-white);
    box-shadow: 0 10px 24px rgba(var(--palette-shadow-rgb), 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(var(--palette-success-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 3px rgba(var(--palette-success-rgb), 0.16);
}

.choose-correct-slot.is-gap-almost {
    border-color: rgba(var(--palette-warning-rgb), 0.9);
    box-shadow: inset 0 2px 5px rgba(var(--palette-shadow-rgb), 0.08), 0 0 0 3px rgba(var(--palette-warning-rgb), 0.16);
}

.choose-correct-option.is-option-correct {
    border-color: rgba(var(--palette-success-rgb), 0.78);
    background: rgba(var(--palette-success-soft-rgb), 0.72);
}

.choose-correct-option.is-option-almost {
    border-color: rgba(var(--palette-warning-rgb), 0.88);
    background: rgba(var(--palette-warning-soft-rgb), 0.78);
}

.choose-correct-option.is-option-wrong {
    border-color: rgba(var(--palette-danger-rgb), 0.82);
    background: rgba(var(--palette-danger-soft-rgb), 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(var(--palette-border-strong-rgb), 0.92);
    border-radius: 22px;
    background: var(--palette-white);
    box-shadow: inset 0 1px 0 rgba(var(--palette-white-rgb), 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: var(--palette-white);
}

.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: 64px;
    right: -12px;
    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(var(--palette-primary-deep-rgb), 0.12);
    border-radius: 999px;
    background: var(--palette-white);
    color: var(--palette-slate);
    box-shadow: 0 6px 18px rgba(var(--palette-ink-rgb), 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: var(--palette-white);
    color: var(--palette-primary-deep);
    box-shadow: 0 10px 22px rgba(var(--palette-ink-rgb), 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: var(--palette-white);
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.applet-viewer-dialog.is-exercise-success .applet-viewer-stage {
    background: var(--palette-success-fill);
    box-shadow: inset 0 0 0 6px var(--palette-success);
}

.applet-viewer-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100% !important;
    min-height: 0;
    max-height: none;
    border: 0;
    background: var(--palette-white);
    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 var(--palette-border-strong);
    border-radius: 999px;
    background: var(--palette-white);
    color: var(--palette-ink);
    font-size: 1.05rem;
    box-sizing: border-box;
    --caret-color: var(--palette-primary);
    --selection-background-color: var(--palette-primary-soft);
    --contains-highlight-background-color: transparent;
}

math-field.equation-input:focus-within,
math-field.equation-input:focus {
    border-color: var(--palette-primary);
    box-shadow: 0 0 0 3px rgba(var(--palette-primary-rgb), 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(var(--palette-primary-rgb), 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: var(--palette-surface-muted);
    color: var(--palette-ink);
    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(var(--palette-primary-rgb), 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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: var(--palette-white);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 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: var(--palette-slate);
    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(var(--palette-border-rgb), 0.18);
    border-radius: 10px;
    background: var(--color-heading);
    color: var(--palette-white);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 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 var(--palette-border-strong);
    border-radius: 999px;
    background: var(--palette-surface-muted);
    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: var(--palette-white);
    box-shadow: 0 1px 3px rgba(var(--palette-ink-strong-rgb), 0.24);
    transition: transform 0.16s ease;
}

.equation-keyboard-preference.is-active .equation-keyboard-switch {
    border-color: var(--palette-slate-light);
    background: var(--palette-slate-light);
}

.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(var(--palette-primary-rgb), 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: var(--palette-danger);
    background: var(--palette-danger-soft);
}

math-field.equation-input.is-numeric-slot-typo {
    border-color: var(--palette-warning);
    background: var(--palette-danger-soft);
}

math-field.equation-input.is-numeric-slot-correct {
    border-color: var(--palette-success);
    background: var(--palette-canvas);
}

.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: var(--palette-warning);
    background: var(--palette-warning-soft);
    box-shadow: 0 0 0 3px rgba(var(--palette-warning-rgb), 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(var(--palette-warning-deep-rgb), 0.32);
    border-radius: 8px;
    background: var(--palette-warning-soft);
    color: var(--palette-danger-deep);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.25;
    box-shadow: 0 5px 14px rgba(var(--palette-ink-rgb), 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: var(--palette-border);
    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: var(--palette-slate-light);
}

.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(var(--palette-border-strong-rgb), 0.92);
    border-radius: 22px;
    background: var(--palette-white);
    box-shadow: inset 0 1px 0 rgba(var(--palette-white-rgb), 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 var(--palette-border);
    background: var(--palette-canvas);
    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: var(--palette-slate);
    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 var(--palette-border-strong);
    border-radius: 9px;
    background: var(--palette-surface-soft);
    color: var(--palette-slate);
    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: var(--palette-slate-light);
    background: var(--palette-surface-muted);
    color: var(--palette-primary-deep);
    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 var(--palette-border-strong);
    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: var(--palette-slate);
    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: var(--palette-primary-hover);
    background: var(--palette-primary-soft);
    box-shadow: 0 0 0 3px rgba(var(--palette-primary-hover-rgb), 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: var(--palette-border);
    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: var(--palette-slate-light);
}

.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(var(--palette-border-strong-rgb), 0.92);
    border-radius: 22px;
    background: var(--palette-white);
    box-shadow: inset 0 1px 0 rgba(var(--palette-white-rgb), 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 var(--palette-border-strong);
    border-radius: 9px;
    background: var(--palette-surface-soft);
    color: var(--palette-slate);
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.applet-device-toggle:hover,
.applet-device-toggle:focus-visible {
    border-color: var(--palette-slate-light);
    background: var(--palette-surface-muted);
    color: var(--palette-primary-deep);
    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 var(--palette-border);
    border-radius: 21px 21px 0 0;
    background: var(--palette-canvas);
}

.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 var(--palette-border-strong);
    border-radius: 7px;
    background: var(--palette-white);
    color: var(--palette-slate);
    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: var(--palette-slate-light);
    background: var(--palette-surface-muted);
    color: var(--palette-primary-deep);
    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 var(--palette-border-strong);
    border-radius: 8px;
    background: rgba(var(--palette-surface-soft-rgb), 0.96);
    box-shadow: 0 12px 30px rgba(var(--palette-ink-rgb), 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 var(--palette-border-strong);
    border-radius: 6px;
    background: var(--palette-white);
    color: var(--palette-slate);
    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: var(--palette-slate-light);
    background: var(--palette-surface-hover);
    color: var(--palette-primary-deep);
    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 var(--palette-border);
    border-radius: 8px;
    background: var(--palette-surface-soft);
}

.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 var(--palette-border-strong);
    border-radius: 9px;
    background: var(--palette-surface-soft);
    box-shadow: 0 12px 30px rgba(var(--palette-ink-rgb), 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 var(--palette-slate-light);
    border-bottom: 2px solid var(--palette-slate-light);
}

.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 var(--palette-border);
    background: var(--palette-canvas);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.applet-device-card-header:active {
    cursor: grabbing;
}

.applet-device-card-header:focus-visible {
    outline: 2px solid var(--palette-slate-light);
    outline-offset: -2px;
}

.applet-device-card-title {
    grid-area: title;
    overflow: hidden;
    color: var(--palette-primary-deep);
    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: var(--palette-slate-mid);
    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: var(--palette-surface-muted);
    color: var(--palette-primary-deep);
    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: var(--palette-white);
    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: var(--palette-ink);
    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: var(--palette-ink);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1;
}

.applet-device-reading-symbol {
    color: var(--palette-primary-deep);
    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: var(--palette-slate-mid);
    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 var(--palette-border);
    background: var(--palette-white);
}

.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 var(--palette-border);
    background: var(--palette-canvas);
}

.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: var(--palette-canvas);
}

.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: var(--palette-primary-deep);
    cursor: pointer;
}

.applet-device-plot-slot:hover,
.applet-device-plot-slot:focus-within,
.applet-device-plot-slot.is-drop-target {
    background: var(--palette-primary-highlight);
    color: var(--palette-primary-deep);
}

.applet-device-plot-slot.is-empty {
    min-width: 1.7em;
    color: var(--palette-slate-mid);
}

.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: var(--palette-slate-mid);
    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: var(--palette-surface-muted);
    color: var(--palette-primary-deep);
    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 var(--palette-ink);
    background: var(--palette-ink);
    color: var(--palette-chart-text);
}

.applet-device-plot-timeframe {
    display: contents;
    color: var(--palette-chart-text);
    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: var(--palette-slate-light);
    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: var(--palette-chart-cyan);
}

.applet-device-plot-timeframe input::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: var(--palette-slate);
}

.applet-device-plot-timeframe input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    border: 1px solid var(--palette-primary-highlight);
    border-radius: 50%;
    appearance: none;
    background: var(--palette-chart-cyan);
}

.applet-device-plot-timeframe input::-moz-range-track {
    width: 100%;
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: var(--palette-slate);
}

.applet-device-plot-timeframe input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 1px solid var(--palette-primary-highlight);
    border-radius: 50%;
    background: var(--palette-chart-cyan);
}

.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: var(--palette-surface-hover);
    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(var(--palette-border-rgb), 0.24);
    border-radius: 6px;
    background: rgba(var(--palette-ink-rgb), 0.96);
    color: var(--palette-canvas);
    box-shadow: 0 5px 16px rgba(var(--palette-ink-strong-rgb), 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: var(--palette-white);
    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: var(--palette-chart-background);
}

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

.material-detail-card[data-applet-panel-layout="stacked"].has-applet-theory,
.material-detail-card[data-applet-panel-layout="stacked"].has-applet-devices {
    width: 100%;
    margin-left: 0;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-theory-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "theory-resizer"
        "theory";
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-resizer {
    display: block;
    width: 100%;
    height: 10px;
    min-height: 10px;
    cursor: row-resize;
    touch-action: none;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-resizer::before {
    top: 50%;
    right: 8px;
    bottom: auto;
    left: 8px;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-resizer:hover::before,
.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-resizer:focus-visible::before,
.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-resizer.is-resizing::before {
    width: auto;
    height: 2px;
    background: var(--palette-border);
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-collapse,
.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-reopen {
    width: 38px;
    min-width: 38px;
    height: 22px;
    min-height: 22px;
    border-radius: 9px;
    font-size: 1.25rem;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-arrow-side {
    display: none;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-arrow-stacked {
    display: grid;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-collapse .applet-theory-arrow-stacked svg {
    transform: rotate(-90deg);
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-reopen .applet-theory-arrow-stacked svg {
    transform: rotate(90deg);
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-panel {
    position: relative;
    top: auto;
    width: 100%;
    height: var(--applet-theory-stacked-height, clamp(180px, 24vh, 240px));
    max-height: min(70vh, 640px);
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-header {
    align-items: center;
    padding-top: 9px;
    padding-bottom: 9px;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-header > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-theory-header h2 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.is-theory-collapsed:not(.has-device-panel) {
    grid-template-columns: minmax(0, 1fr);
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.is-theory-collapsed:not(.has-device-panel) {
    grid-template-areas:
        "main"
        "theory-resizer";
}

.material-detail-card[data-applet-panel-layout="side"] .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";
}

.material-detail-card[data-applet-panel-layout="side"] .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";
}

.material-detail-card[data-applet-panel-layout="side"] .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";
}

.material-detail-card[data-applet-panel-layout="side"] .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);
    }
}

.material-detail-card[data-applet-panel-layout="stacked"] .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;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.has-theory-panel > .applet-detail-main {
    grid-area: main;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.has-theory-panel > .applet-theory-resizer {
    grid-area: theory-resizer;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.has-theory-panel > .applet-theory-panel {
    grid-area: theory;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.has-theory-panel > .applet-device-resizer {
    grid-area: device-resizer;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.has-theory-panel > .applet-device-panel {
    grid-area: devices;
}

.material-detail-card[data-applet-panel-layout="stacked"] .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;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel:not(.has-theory-panel) .applet-device-resizer {
    width: 100%;
    height: 10px;
    min-height: 10px;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-device-panel {
    position: relative;
    top: auto;
    width: 100%;
    height: var(--applet-theory-stacked-height, clamp(180px, 24vh, 240px));
    max-height: min(70vh, 640px);
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-device-panel-header {
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-device-panel-header > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-device-panel-header h2 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-device-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-device-card {
    width: min(240px, 100%);
    flex-basis: min(240px, 100%);
}

.material-detail-card[data-applet-panel-layout="stacked"] .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";
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.is-stacked-theory-collapsed > .applet-theory-panel {
    display: none;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.is-stacked-theory-collapsed > .applet-device-resizer {
    display: block;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.is-lower-panels-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "theory-resizer";
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.is-lower-panels-collapsed > .applet-theory-panel,
.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.is-lower-panels-collapsed > .applet-device-panel,
.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.is-lower-panels-collapsed > .applet-device-resizer {
    display: none;
}

.material-detail-card[data-applet-panel-layout="stacked"] .applet-detail-layout.has-device-panel.is-lower-panels-collapsed .applet-theory-collapse {
    display: none;
}

.material-detail-card[data-applet-panel-layout="stacked"] .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 var(--palette-border);
    border-radius: 9px;
    background: var(--palette-canvas);
}

.applet-theory-navigation > strong {
    display: block;
    margin-bottom: 4px;
    color: var(--palette-slate);
    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: var(--palette-primary-hover);
    font-size: 0.8rem;
    line-height: 1.3;
}

.applet-theory-navigation a:hover,
.applet-theory-navigation a:focus-visible {
    background: var(--palette-surface-hover);
    color: var(--palette-primary-deep);
}

.applet-theory-usage {
    margin: 12px 0 10px;
    padding: 10px 11px 8px;
    border: 1px solid var(--palette-slate-light);
    border-radius: 9px;
    background: var(--palette-surface-soft);
    box-shadow: 0 0 0 0 rgba(var(--palette-primary-hover-rgb), 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: var(--palette-slate-light);
        background: var(--palette-surface-soft);
        box-shadow: 0 0 0 0 rgba(var(--palette-primary-hover-rgb), 0);
    }
    28%, 66% {
        border-color: var(--palette-warning);
        background: var(--palette-danger-soft);
        box-shadow: 0 0 0 4px rgba(var(--palette-warning-rgb), 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: var(--palette-ink);
    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(var(--palette-primary-deep-rgb), 0.22);
    border-radius: 50%;
    background: rgba(var(--palette-white-rgb), 0.86);
    color: var(--palette-primary-deep);
    font: 600 16px/1 system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--palette-ink-rgb), 0.08);
}

.fast-edit-button:hover,
.fast-edit-button:focus-visible {
    border-color: var(--palette-slate);
    background: var(--palette-primary-soft);
    color: var(--palette-primary-deep);
}

.fast-edit-button[hidden] {
    display: none !important;
}

.lesson-readiness-editor {
    position: relative;
    z-index: 12;
    flex: 0 0 auto;
}

.lesson-readiness-editor > summary {
    list-style: none;
}

.lesson-readiness-editor > summary::-webkit-details-marker {
    display: none;
}

.lesson-readiness-editor-toggle {
    color: var(--palette-success);
    font-size: 0.92rem;
}

.lesson-readiness-editor-toggle.readiness-warning {
    margin: 0;
}

.lesson-readiness-editor-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    display: grid;
    width: max-content;
    min-width: 205px;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgba(var(--palette-ink-rgb), 0.16);
}

.lesson-readiness-editor-menu strong {
    padding: 2px 5px 5px;
    color: var(--palette-slate);
    font-size: 0.78rem;
}

.lesson-readiness-choice {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--palette-primary-deep);
    text-align: left;
    font-size: 0.84rem;
    font-weight: 600;
}

.lesson-readiness-choice:hover,
.lesson-readiness-choice:focus-visible,
.lesson-readiness-choice.is-active {
    border-color: var(--palette-border-strong);
    background: var(--color-highlight);
    color: var(--color-link-hover);
}

.lesson-readiness-editor-status {
    min-height: 1em;
    color: var(--palette-slate);
    font-size: 0.74rem;
}

.lesson-readiness-editor-status.is-error {
    color: var(--palette-danger);
}

.fast-edit-open {
    overflow: hidden;
}

.fast-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(var(--palette-ink-rgb), 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(var(--palette-primary-deep-rgb), 0.28);
    border-radius: 18px;
    background: var(--palette-surface-soft);
    box-shadow: 0 24px 70px rgba(var(--palette-ink-rgb), 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(var(--palette-primary-deep-rgb), 0.12);
}

.fast-edit-dialog-header h2,
.fast-edit-dialog-header p,
.fast-edit-dialog-footer p {
    margin: 0;
}

.fast-edit-source {
    color: var(--palette-slate-mid);
    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: var(--palette-primary-deep);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.fast-edit-close:hover,
.fast-edit-close:focus-visible {
    background: var(--palette-surface-muted);
}

.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: var(--palette-white);
    color: var(--palette-ink);
    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(var(--palette-primary-hover-rgb), 0.22);
}

.fast-edit-dialog-footer {
    border-top: 1px solid rgba(var(--palette-primary-deep-rgb), 0.12);
}

.fast-edit-status {
    min-height: 1.2em;
    color: var(--palette-slate);
    font-size: 0.88rem;
}

.fast-edit-status.is-error {
    color: var(--palette-danger-deep);
}

.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: var(--palette-slate-mid);
    stroke-width: 1.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.experience-help-connector-dot {
    fill: var(--palette-slate-mid);
    stroke: rgba(var(--palette-white-rgb), 0.92);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.is-experience-help-pointed {
    outline: 2px solid rgba(var(--palette-slate-mid-rgb), 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 var(--palette-border-strong);
    border-radius: 50%;
    background: var(--palette-surface-muted);
    color: var(--palette-primary-deep);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 13px rgba(var(--palette-primary-deep-rgb), 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: var(--palette-slate-light);
    background: var(--palette-primary-highlight);
    box-shadow: 0 5px 16px rgba(var(--palette-primary-deep-rgb), 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 var(--palette-border-strong);
    border-right: 0;
    border-radius: 18px 0 0 18px;
    background: rgba(var(--palette-surface-soft-rgb), 0.98);
    box-shadow: -9px 12px 28px rgba(var(--palette-primary-deep-rgb), 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: var(--palette-slate-mid);
    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: var(--palette-primary-deep);
    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: var(--palette-slate);
    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: var(--palette-slate-mid);
    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 var(--palette-success-fill);
    border-radius: 9px;
    background: var(--palette-primary-soft);
    font-weight: 650;
}

.experience-help-setting {
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--palette-surface-hover);
    color: var(--palette-slate);
    font-size: 12px;
}

.experience-help-setting select {
    min-width: 142px;
    max-width: 170px;
    padding: 5px 7px;
    border: 1px solid var(--palette-border-strong);
    border-radius: 7px;
    background: var(--palette-white);
    color: var(--palette-primary-deep);
    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(var(--palette-warning-deep-rgb), 0.34);
    border-radius: var(--radius-sm);
    background: var(--palette-danger-soft);
    color: var(--palette-danger-deep);
    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: var(--palette-danger-deep);
    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(var(--palette-primary-deep-rgb), 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(var(--palette-primary-deep-rgb), 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: var(--palette-white);
    box-shadow: 0 8px 24px rgba(var(--palette-ink-rgb), 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: var(--palette-danger-deep);
    font-weight: 800;
}

.debug-value-satisfied {
    color: var(--palette-success-deep);
    font-weight: 800;
}

.debug-value-change {
    margin-left: 0.14em;
    font-size: 0.68rem;
    font-weight: 800;
}

.debug-value-change.is-positive {
    color: var(--palette-success-deep);
}

.debug-value-change.is-negative {
    color: var(--palette-danger);
}

/* 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 var(--palette-border-strong);
    border-radius: 999px;
    background: var(--palette-surface-soft);
    color: var(--palette-slate);
    font-size: 0.86rem;
    font-weight: 650;
}

.practice-skip-button:hover,
.practice-skip-button:focus-visible {
    border-color: var(--palette-slate-light);
    background: var(--palette-surface-muted);
    color: var(--palette-primary-deep);
}

@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(var(--palette-warning-deep-rgb), 0.3));
    border-radius: 12px;
    background: color-mix(in srgb, var(--priority-color, var(--palette-warning-deep)) 7%, var(--palette-white));
    color: var(--priority-color, var(--palette-success-deep));
    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(var(--palette-ink-rgb), 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%, var(--palette-slate));
    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: var(--palette-white);
    box-shadow: 0 14px 30px rgba(var(--palette-shadow-rgb), 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);
}

.has-floating-tooltip::after {
    display: none !important;
}

@keyframes practice-progress-lime-aura {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--palette-progress-new-rgb), 0); }
    35% { box-shadow: 0 0 0 5px rgba(var(--palette-progress-new-rgb), 0.24), 0 0 18px rgba(var(--palette-progress-new-rgb), 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(var(--palette-danger-rgb), 0.55);
    background: var(--palette-danger-soft);
    color: var(--palette-danger-deep);
}

.home-update-notification {
    border-color: rgba(var(--palette-primary-hover-rgb), 0.34);
    background: rgba(var(--palette-primary-soft-rgb), 0.92);
    color: var(--palette-primary-deep);
}

.home-update-notification-content {
    display: grid;
    align-content: center;
    gap: 0.18rem;
    min-height: 100%;
    padding: 0.72rem 2.15rem 0.72rem 0.85rem;
}

.home-update-notification-content > strong {
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.25;
}

.home-update-notification-content > div {
    color: color-mix(in srgb, currentColor 82%, var(--palette-slate));
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.3;
}

.home-update-notification-content p {
    margin: 0;
}

.home-update-notification > .home-notification-close {
    position: absolute;
    top: 6px;
    right: 6px;
}

.schedule-page {
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 64px;
}

/* The activity view belongs to its page, not to another nested card. */
.activity-calendar{min-width:0;padding:0;border:0;border-radius:0;background:transparent}
.schedule-page>.activity-calendar{margin-bottom:20px;padding-bottom:17px;border-bottom:1px solid rgba(var(--palette-primary-deep-rgb),.13)}
.activity-calendar-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.activity-calendar-header h2,.activity-calendar-header h3{margin:0;color:var(--color-heading);font-size:1.02rem}
.activity-calendar-modes.control-segmented{--segment-count:2;flex:none;width:205px}
.activity-calendar-modes.control-segmented>button{padding:0 7px;font-family:inherit;font-size:.75rem;cursor:pointer}
.activity-calendar-controls{display:flex;align-items:end;flex-wrap:wrap;gap:8px 12px;margin:11px 0 5px}
.activity-calendar-controls[hidden]{display:none}
.activity-calendar-controls label{display:grid;gap:3px;color:var(--color-text-muted);font-size:.7rem}
.activity-calendar-controls input,.activity-calendar-controls select{min-height:32px;padding:4px 7px;border:1px solid rgba(var(--palette-primary-deep-rgb),.23);border-radius:6px;background:var(--palette-white);color:var(--color-heading);font:inherit;font-size:.77rem}
.activity-calendar-status{min-height:1.3em;margin:7px 0 10px;color:var(--color-text-muted);font-size:.77rem}
.activity-calendar-grid-scroll{max-width:100%;overflow-x:auto;padding:3px 0 10px}
.activity-calendar-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,14px);grid-auto-columns:14px;gap:4px;width:max-content}
.activity-calendar-weekday{align-self:center;color:var(--color-text-muted);font-size:.57rem;line-height:1;text-align:center}
.activity-calendar-day,.activity-calendar-legend i{display:block;width:14px;height:14px;border-radius:3px;background:var(--palette-surface-muted)}
.activity-calendar-day:not(.is-blank){position:relative;border:1px solid rgba(var(--palette-primary-deep-rgb),.07);cursor:help}
.activity-calendar-day:not(.is-blank):hover,.activity-calendar-day:not(.is-blank):focus-visible{border-color:var(--palette-primary-deep);outline:1px solid var(--palette-primary-deep);outline-offset:1px}
.activity-calendar-day.is-blank{background:transparent}
.activity-level-1{background:rgba(var(--palette-success-rgb),.25)!important}
.activity-level-2{background:rgba(var(--palette-success-rgb),.42)!important}
.activity-level-3{background:rgba(var(--palette-success-rgb),.65)!important}
.activity-level-4{background:var(--palette-success)!important}
.activity-calendar-legend{display:flex;align-items:center;justify-content:flex-end;gap:4px;color:var(--color-text-muted);font-size:.68rem}
.activity-calendar-legend span:first-child{margin-right:4px}
.activity-calendar-legend span:last-child{margin-left:4px}
.activity-calendar-plot-view[hidden],.activity-calendar-grid-view[hidden]{display:none}
.activity-calendar-plot{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:14px;min-width:0}
.activity-calendar-plot-chart{min-width:0}
.activity-calendar-plot-dates{display:flex;justify-content:space-between;gap:8px}
.activity-calendar-plot-legend{display:grid;align-content:center;gap:10px;font-size:.75rem;font-weight:650}
.activity-calendar-plot-legend span{display:inline-flex;align-items:center;gap:6px}
.activity-calendar-plot-legend span::before{content:"";width:16px;border-top:3px solid currentColor}
.activity-calendar-plot-legend .is-attempts{color:var(--palette-primary)}
.activity-calendar-plot-legend .is-skill{color:var(--palette-warning-deep)}
.activity-calendar-plot-dates{color:var(--color-text-muted);font-size:.65rem}
.activity-calendar-plot svg{display:block;width:100%;height:180px;margin:4px 0 3px;overflow:visible}
.activity-calendar-plot-baseline{stroke:rgba(var(--palette-primary-deep-rgb),.18);stroke-width:1}
.activity-calendar-plot-axis{stroke:rgba(var(--palette-primary-deep-rgb),.55);stroke-width:1.2}
.activity-calendar-axis-label{fill:var(--color-text-muted);font-family:var(--font-sans);font-size:11px}
.activity-calendar-plot-line{fill:none;stroke-width:2.8;vector-effect:non-scaling-stroke}
.activity-calendar-plot-line.is-attempts{stroke:var(--palette-primary)}
.activity-calendar-plot-line.is-skill{stroke:var(--palette-warning-deep)}
.activity-calendar-plot-hit{fill:transparent;cursor:help}
.activity-calendar-hover-markers{opacity:0;pointer-events:none}
.activity-calendar-hover-markers.is-visible{opacity:1}
.activity-calendar-hover-markers circle{fill:var(--palette-white);stroke-width:2.6;vector-effect:non-scaling-stroke}
.activity-calendar-hover-markers .is-attempts{stroke:var(--palette-primary)}
.activity-calendar-hover-markers .is-skill{stroke:var(--palette-warning-deep)}
@media(max-width:850px){.activity-calendar-header{flex-wrap:wrap}}
@media(max-width:600px){.activity-calendar-plot{grid-template-columns:minmax(0,1fr)}.activity-calendar-plot-legend{display:flex;justify-content:center;flex-wrap:wrap}}

.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(var(--palette-primary-hover-rgb), 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(var(--palette-ink-rgb), 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, var(--palette-primary-deep));
}

.schedule-item-main > p {
    max-width: 72ch;
    margin-bottom: 5px;
    color: var(--color-text-muted, var(--palette-slate-mid));
}

.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(var(--palette-primary-deep-rgb), 0.28);
    border-radius: 999px;
    background: rgba(var(--palette-primary-deep-rgb), 0.08);
    color: var(--palette-primary-deep);
    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(var(--palette-slate-rgb), 0.17);
}

.schedule-sequence h3 {
    margin-bottom: 9px;
    color: var(--color-text-muted, var(--palette-slate-mid));
    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: var(--palette-slate);
}

.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: var(--palette-primary-deep);
    font-weight: 500;
}

.schedule-suspended {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(var(--palette-slate-rgb), 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(var(--palette-surface-muted-rgb), 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;
    }
}

/* Shared illustrated actions from task-icons.svg. */
.task-action-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.task-action-icon.is-edit {
    width: 100%;
    height: 100%;
}

.theory-step-reset-progress,
.theory-step-summary-link,
.fast-edit-button:has(> .task-action-icon) {
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.theory-step-reset-progress::before,
.theory-step-summary-link::before {
    content: none;
}

.theory-step-reset-progress:hover,
.theory-step-reset-progress:focus-visible,
.theory-step-summary-link:hover,
.theory-step-summary-link:focus-visible,
.fast-edit-button:has(> .task-action-icon):hover,
.fast-edit-button:has(> .task-action-icon):focus-visible {
    background: transparent;
    color: inherit;
}

.theory-step-summary-link:hover .task-action-icon,
.theory-step-summary-link:focus-visible .task-action-icon,
.theory-step-reset-progress:hover .task-action-icon,
.theory-step-reset-progress:focus-visible .task-action-icon,
.fast-edit-button:hover .task-action-icon,
.fast-edit-button:focus-visible .task-action-icon {
    filter: drop-shadow(0 2px 3px rgba(var(--palette-primary-hover-rgb), 0.2));
}

.fast-edit-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    padding: 0;
}

.exercise-choice-inline-control{display:inline;min-height:0;margin:0;padding:0 .1em;border:0;border-radius:.3em;background:transparent;color:var(--color-link);font:inherit;font-weight:inherit;line-height:inherit;text-align:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;vertical-align:baseline;box-shadow:none;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:color .16s ease,background-color .16s ease,opacity .16s ease}
.exercise-choice-inline-control:is(:hover,:focus-visible,.is-choice-proxy-hover){background:rgba(var(--palette-primary-highlight-rgb),.42);color:var(--color-link-hover);outline:none;transform:none}
.exercise-choice-inline-control.is-selected{background:var(--color-highlight);color:var(--color-link-hover);text-decoration-thickness:2px}
.exercise-choice-inline-control:is(.is-choice-limit-inactive,.is-unused-muted),.exercise-choice-table-control:is(.is-choice-limit-inactive,.is-unused-muted){opacity:.56}
.exercise-choice-inline-control.is-choice-proxy-unavailable{color:var(--color-text-muted);cursor:not-allowed;text-decoration-style:dashed}
.exercise-choice-table-control{cursor:pointer}
.lesson-table tr.exercise-choice-row>* , .lesson-table :is(th,td).exercise-choice-column{transition:background-color .16s ease,box-shadow .16s ease,opacity .16s ease}
.lesson-table tr.exercise-choice-row:is(:hover,:focus-visible,.is-choice-proxy-hover)>*,.lesson-table :is(th,td).exercise-choice-column:is(:hover,:focus-visible,.is-choice-proxy-hover){background:rgba(var(--palette-primary-highlight-rgb),.58)}
.lesson-table tr.exercise-choice-row.is-selected>*,.lesson-table :is(th,td).exercise-choice-column.is-selected{background:var(--color-highlight);box-shadow:inset 0 0 0 1px rgba(var(--palette-primary-rgb),.44)}
.lesson-table tr.exercise-choice-row.is-choice-correct>*,.lesson-table :is(th,td).exercise-choice-column.is-choice-correct{background:var(--palette-success-soft)}
.lesson-table tr.exercise-choice-row.is-choice-incorrect>*,.lesson-table :is(th,td).exercise-choice-column.is-choice-incorrect{background:var(--palette-danger-soft)}
.lesson-table tr.exercise-choice-row:focus-visible>*,.lesson-table :is(th,td).exercise-choice-column:focus-visible{outline:2px solid var(--color-link);outline-offset:-3px}
.choice-card.is-choice-proxy-hover{border-color:var(--color-link)}
.choice-card.is-selected.is-choice-proxy-hover{background:var(--color-highlight);color:var(--color-link-hover)}
/* Unified circular controls and notification signs. */
:is(
    .account-settings-button,
    .practice-feedback-panel-close,
    .ordering-reverse-button,
    .practice-hint,
    .value-help-close,
    .image-exercise-zoom,
    .lesson-layout-menu-toggle,
    .theory-step-reset-progress,
    .theory-step-summary-link,
    .skills-history-toggle,
    .applet-frame-expand,
    .equation-keyboard-button,
    .fast-edit-button,
    .fast-edit-close,
    .experience-help-tab,
    .home-notification-close,
    .learning-tree-node-ai-badge,
    .learning-tree-node-end-badge,
    .learning-tree-final-test-status,
    .learning-tree-readiness-warning,
    .learning-tree-mini-lesson-progress-mark.is-solved,
    .learning-tree-mini-lesson-ai-badge,
    .learning-tree-mini-readiness-warning,
    .readiness-warning-step,
    .material-status-circle,
    .home-notice-icon
) {
    box-shadow: none !important;
}

:is(
    .account-settings-button,
    .practice-feedback-panel-close,
    .ordering-reverse-button,
    .practice-hint,
    .value-help-close,
    .image-exercise-zoom,
    .lesson-layout-menu-toggle,
    .theory-step-reset-progress,
    .theory-step-summary-link,
    .skills-history-toggle,
    .applet-frame-expand,
    .equation-keyboard-button,
    .fast-edit-button,
    .fast-edit-close,
    .experience-help-tab,
    .home-notification-close,
    .learning-tree-node-ai-badge,
    .learning-tree-node-end-badge,
    .learning-tree-final-test-status,
    .learning-tree-readiness-warning,
    .learning-tree-mini-lesson-progress-mark.is-solved,
    .learning-tree-mini-lesson-ai-badge,
    .learning-tree-mini-readiness-warning,
    .readiness-warning-step,
    .material-status-circle,
    .home-notice-icon
):is(:hover, :focus-visible) {
    box-shadow: var(--shadow-circular-control-hover) !important;
}

.theory-step-reset-progress .task-action-icon,
.theory-step-summary-link .task-action-icon {
    color: var(--control-button-ink);
}

:is(.account-settings-button, .practice-feedback-panel-close, .ordering-reverse-button,
    .practice-hint,
    .value-help-close, .image-exercise-zoom, .lesson-layout-menu-toggle,
    .skills-history-toggle, .applet-frame-expand, .equation-keyboard-button,
    .fast-edit-close, .experience-help-tab, .home-notification-close) {
    background: var(--control-button-surface);
    border-color: var(--control-button-border);
    color: var(--control-button-ink);
}

.task-action-icon {
    color: var(--control-button-ink);
}

:is(.theory-step-reset-progress, .theory-step-summary-link, .fast-edit-button):is(:hover, :focus-visible) {
    --control-button-surface: var(--color-surface-hover);
}

.theory-step-summary-link:hover .task-action-icon,
.theory-step-summary-link:focus-visible .task-action-icon,
.theory-step-reset-progress:hover .task-action-icon,
.theory-step-reset-progress:focus-visible .task-action-icon,
.fast-edit-button:hover .task-action-icon,
.fast-edit-button:focus-visible .task-action-icon {
    filter: none;
}