/* =================================================================
   tools/stl-associative.css
   Auto-extracted from math.css (2026-05-11).
   Loaded via config/js-manifest.php → templates/partials/head-styles.php.
   ================================================================= */

/* ============================================================================
 * STL Associative — redesign (set / map on Red-Black Tree)
 * Все стили под локальным префиксом .math-ds-asc-*; node-modifier классы
 * (.seq-landing, .seq-found, .seq-scanning, .seq-targeting) переиспользуем
 * по имени, но скоплены через .math-ds-asc-tree чтобы не пересекаться с
 * stl-sequence cells.
 * ========================================================================= */

.math-ds-asc-panel {
    --asc-grad-a: #818cf8;
    --asc-grad-b: #4f46e5;
    --asc-grad-found-a: #34d399;
    --asc-grad-found-b: #059669;
    --asc-grad-targeting-a: #fb7185;
    --asc-grad-targeting-b: #e11d48;
    --asc-grad-scanning-a: #fbbf24;
    --asc-grad-scanning-b: #d97706;
    --asc-rbt-red: #ef4444;
    --asc-rbt-red-dark: #b91c1c;
    --asc-rbt-black: #1f2937;
    --asc-rbt-black-dark: #0f172a;
    --asc-node-r: 26px;
    --asc-level-h: 76px;
    --asc-h-spacing: 58px;
    --asc-ease: cubic-bezier(.4,.0,.2,1);
    /* asc-specific tween — kept smaller than --ds-speed so transitions always
       complete inside one animation phase. Tied to the speed segment. */
    --asc-tween: 0.55s;
}
/* --asc-tween is set inline by JS (MathDsCore.applySpeed), baseline 0.55s @ ×1.0. */

/* Type segment with subtitle under each button */
.math-ds-asc-type-segment .math-mode-segment-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    line-height: 1.15;
}
.math-ds-asc-type-segment .asc-seg-title {
    font-weight: 600;
    font-size: 14px;
    font-family: ui-monospace, "SF Mono", monospace;
}
.math-ds-asc-type-segment .asc-seg-sub {
    font-size: 11px;
    opacity: 0.75;
    font-weight: 500;
}

/* Info card per container type */
.math-ds-asc-info-wrap {
    margin: 14px 0 4px;
}
.math-ds-asc-info {
    display: none;
    background: linear-gradient(180deg, rgba(129,140,248,0.06), rgba(79,70,229,0.03));
    border: 1px solid rgba(129,140,248,0.18);
    border-radius: 10px;
    padding: 14px 16px;
}
.math-ds-asc-info.active { display: block; }

.math-ds-asc-info .asc-info-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.math-ds-asc-info .asc-info-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--asc-grad-a), var(--asc-grad-b));
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
}
.math-ds-asc-info .asc-info-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--math-text-strong, #1f2937);
}
.math-ds-asc-info .asc-info-sub {
    font-size: 12.5px;
    color: var(--math-text-muted, #6b7280);
    margin-top: 2px;
    line-height: 1.5;
}
.math-ds-asc-info .asc-info-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}
.math-ds-asc-info .asc-info-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12.5px;
    color: var(--math-text-muted, #4b5563);
}
.math-ds-asc-info .asc-info-list li { line-height: 1.4; }
.math-ds-asc-info .asc-info-list li strong { color: var(--math-text-strong, #1f2937); font-weight: 600; }

.math-ds-asc-info .asc-info-memory {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 200px;
}
.math-ds-asc-info .asc-mini-tree {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.math-ds-asc-info .rbt-mini-row {
    display: flex; gap: 8px;
}
.math-ds-asc-info .rbt-mini-node {
    min-width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 10px; font-weight: 700; color: #fff;
    padding: 0 6px;
    font-family: ui-monospace, monospace;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.math-ds-asc-info .rbt-mini-node.rbt-red {
    background: linear-gradient(135deg, var(--asc-rbt-red), var(--asc-rbt-red-dark));
}
.math-ds-asc-info .rbt-mini-node.rbt-black {
    background: linear-gradient(135deg, var(--asc-rbt-black), var(--asc-rbt-black-dark));
}
.math-ds-asc-info .asc-info-legend {
    font-size: 10.5px;
    color: var(--math-text-muted, #6b7280);
    text-align: center;
}

/* Stats chip bar */
.math-ds-asc-stats {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 0 10px;
    align-items: center;
}
.math-ds-asc-stats:empty { display: none; }
.math-ds-asc-stats .asc-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--math-surface-2, #f3f4f6);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
    font-size: 11.5px;
    font-family: ui-monospace, monospace;
    line-height: 1.2;
    white-space: nowrap;
}
.math-ds-asc-stats .asc-chip .chip-k {
    color: var(--math-text-muted, #6b7280);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.math-ds-asc-stats .asc-chip .chip-v {
    font-weight: 600;
    color: var(--math-text-strong, #111827);
}
.math-ds-asc-stats .asc-chip.asc-chip-accent {
    background: linear-gradient(135deg, rgba(129,140,248,0.15), rgba(79,70,229,0.10));
    border-color: rgba(79,70,229,0.25);
}
.math-ds-asc-stats .asc-chip.asc-chip-accent .chip-v {
    color: #4338ca;
}
.math-ds-asc-stats .asc-chip.asc-chip-warn {
    background: linear-gradient(135deg, rgba(251,113,133,0.15), rgba(225,29,72,0.10));
    border-color: rgba(225,29,72,0.25);
}
.math-ds-asc-stats .asc-chip.asc-chip-warn .chip-v {
    color: #be123c;
}

/* Tree viz container */
.math-ds-asc-viz {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    min-height: 240px;
    background: linear-gradient(180deg, rgba(99,102,241,.025), rgba(99,102,241,0));
    border-radius: 10px;
    padding: 12px 0;
}
.math-ds-asc-tree-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 8px 14px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.math-ds-asc-tree {
    position: relative;
    margin: 0 auto;
}
.math-ds-asc-tree-svg {
    position: absolute; top: 0; left: 0;
    pointer-events: none;
    overflow: visible;
}
.math-ds-asc-edge {
    stroke: rgba(99,102,241,0.45);
    stroke-width: 2;
    transition:
        stroke .25s var(--asc-ease),
        stroke-width .25s var(--asc-ease),
        x1 var(--asc-tween) var(--asc-ease),
        y1 var(--asc-tween) var(--asc-ease),
        x2 var(--asc-tween) var(--asc-ease),
        y2 var(--asc-tween) var(--asc-ease);
}
.math-ds-asc-edge.rotating {
    stroke: var(--asc-grad-scanning-a);
    stroke-width: 3.4;
    filter: drop-shadow(0 0 4px rgba(251,191,36,.55));
}
.math-ds-asc-edge.rotating-detach {
    stroke: rgba(244,63,94,.95);
    stroke-width: 3.5;
    stroke-dasharray: 7 5;
    opacity: 0.7;
    filter: drop-shadow(0 0 6px rgba(244,63,94,.7));
    animation: asc-edge-detach-pulse 0.55s ease-in-out infinite alternate;
}
@keyframes asc-edge-detach-pulse {
    from { opacity: 0.55; transform: none; }
    to   { opacity: 0.95; }
}
/* Rotation arrow overlay */
.math-ds-asc-rotation-arrow {
    pointer-events: none;
    fill: none;
    stroke: rgba(217,119,6,.95);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    filter: drop-shadow(0 0 6px rgba(251,191,36,.75));
    animation: asc-arrow-draw 0.55s var(--asc-ease) forwards;
}
.math-ds-asc-rotation-arrow.leaving {
    animation: asc-arrow-fade 0.35s var(--asc-ease) forwards;
}
@keyframes asc-arrow-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes asc-arrow-fade {
    to { opacity: 0; }
}
.math-ds-asc-edge.edge-entering {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: asc-edge-draw var(--ds-speed) var(--asc-ease) forwards;
}
.math-ds-asc-edge.edge-leaving {
    animation: asc-edge-fade var(--ds-speed) var(--asc-ease) forwards;
    pointer-events: none;
}
@keyframes asc-edge-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes asc-edge-fade {
    to { opacity: 0; }
}

/* Node */
.math-ds-asc-node {
    position: absolute;
    width: calc(var(--asc-node-r) * 2);
    height: calc(var(--asc-node-r) * 2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 12px; font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--asc-grad-a), var(--asc-grad-b));
    box-shadow: 0 2px 6px rgba(79,70,229,.28), inset 0 1px 0 rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.5);
    transition:
        left var(--asc-tween) var(--asc-ease),
        top var(--asc-tween) var(--asc-ease),
        transform var(--asc-tween) var(--asc-ease),
        background var(--asc-tween) var(--asc-ease),
        box-shadow var(--asc-tween) var(--asc-ease),
        border-color var(--asc-tween) var(--asc-ease);
    z-index: 2;
    cursor: default;
    user-select: none;
}
.math-ds-asc-node .kv-sep {
    font-weight: 400;
    opacity: .6;
    margin: 0 1px;
}
.math-ds-asc-node:hover {
    box-shadow: 0 4px 12px rgba(79,70,229,.42), 0 0 0 4px rgba(129,140,248,.18);
}
/* RBT colors */
.math-ds-asc-node.rbt-red {
    background: linear-gradient(135deg, var(--asc-rbt-red), var(--asc-rbt-red-dark));
    box-shadow: 0 2px 6px rgba(239,68,68,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.math-ds-asc-node.rbt-black {
    background: linear-gradient(135deg, var(--asc-rbt-black), var(--asc-rbt-black-dark));
    box-shadow: 0 2px 6px rgba(15,23,42,.42), inset 0 1px 0 rgba(255,255,255,.10);
}

/* Modifier classes scoped to asc tree (reuse seq-* names but separate keyframes) */
.math-ds-asc-tree .seq-scanning {
    background: linear-gradient(135deg, var(--asc-grad-scanning-a), var(--asc-grad-scanning-b)) !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,.32), 0 4px 12px rgba(217,119,6,.36);
    animation: asc-scan-pulse 0.9s ease-in-out infinite;
    z-index: 4;
}
.math-ds-asc-tree .seq-found {
    background: linear-gradient(135deg, var(--asc-grad-found-a), var(--asc-grad-found-b)) !important;
    box-shadow: 0 0 0 4px rgba(52,211,153,.34), 0 6px 16px rgba(5,150,105,.44);
    animation: asc-found-pulse 1.4s ease-in-out;
    z-index: 5;
}
.math-ds-asc-tree .seq-targeting {
    background: linear-gradient(135deg, var(--asc-grad-targeting-a), var(--asc-grad-targeting-b)) !important;
    box-shadow: 0 0 0 4px rgba(251,113,133,.32), 0 4px 12px rgba(225,29,72,.42);
    animation: asc-targeting-pulse 0.7s ease-in-out infinite;
    z-index: 5;
}
.math-ds-asc-tree .seq-targeting::after {
    content: '✕';
    position: absolute;
    top: -10px; right: -10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #be123c;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.math-ds-asc-tree .seq-just-copied {
    animation: asc-just-copied 1s ease-out;
    box-shadow: 0 0 0 3px rgba(34,211,238,.42), 0 4px 12px rgba(8,145,178,.32);
}
.math-ds-asc-tree .asc-recolor-ring {
    box-shadow:
        0 0 0 4px rgba(167,139,250,.55),
        0 0 16px 2px rgba(124,58,237,.45),
        0 4px 12px rgba(124,58,237,.32) !important;
    z-index: 5;
}
.math-ds-asc-tree .asc-rotate-ring {
    /* "Around" — the node being rotated AROUND (will descend). ORANGE. */
    box-shadow:
        0 0 0 4px rgba(245,158,11,.7),
        0 0 22px 4px rgba(217,119,6,.55),
        0 4px 14px rgba(217,119,6,.45) !important;
    z-index: 5;
    animation: asc-around-pulse 1.0s ease-in-out infinite alternate;
}
.math-ds-asc-tree .asc-pivot-ring {
    /* "Pivot" — the node that RISES to take over. BLUE so the role is unmistakably distinct from the orange "around". */
    box-shadow:
        0 0 0 5px rgba(59,130,246,.78),
        0 0 22px 4px rgba(37,99,235,.55),
        0 4px 14px rgba(29,78,216,.5) !important;
    z-index: 6;
    animation: asc-pivot-pulse 1.0s ease-in-out infinite alternate;
}
@keyframes asc-pivot-pulse {
    from { filter: brightness(1); }
    to   { filter: brightness(1.18); }
}
@keyframes asc-around-pulse {
    from { filter: brightness(1); }
    to   { filter: brightness(1.15); }
}

/* Descent cursor — chevron that hops between nodes while comparing */
.asc-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--asc-node-r) * 2 + 10px);
    height: calc(var(--asc-node-r) * 2 + 10px);
    pointer-events: none;
    z-index: 7;
    transform: translate(-50%, -50%);
    transition:
        left var(--asc-tween) var(--asc-ease),
        top var(--asc-tween) var(--asc-ease),
        opacity .25s var(--asc-ease);
    opacity: 0;
}
.asc-cursor::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px dashed rgba(99,102,241,.85);
    animation: asc-cursor-spin 4s linear infinite;
    box-shadow: 0 0 14px rgba(99,102,241,.45);
}
.asc-cursor::after {
    content: '▾';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: #4338ca;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(255,255,255,.8);
    animation: asc-cursor-bob 1s ease-in-out infinite;
}
.asc-cursor.visible { opacity: 1; }
@keyframes asc-cursor-spin {
    to { transform: rotate(360deg); }
}
@keyframes asc-cursor-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -3px); }
}

/* .math-ds-carrier (carrier pill + ::after pointer + .visible/.dropping/
   .carrier-{label,value,insert,erase,found,pulsing} + @keyframes
   ds-carrier-pulse) — moved to ds/ds-core.css.
   It's emitted by assets/js/ds/ds-core.js for ALL 5 DS tools
   (sequence/associative/unordered/adapters/ds-advanced), so it must live
   in the DS-shared stylesheet, not in any single tool's CSS.
   Note: it still uses `--asc-ease` as a transition-easing fallback,
   defined inside .math-ds-asc-panel — that's harmless: the var()
   gracefully falls back to the literal cubic-bezier on non-associative
   pages. */
.math-ds-asc-tree .seq-landing {
    animation: asc-node-land 0.6s var(--asc-ease);
}
.math-ds-asc-tree .seq-leaving {
    animation: asc-node-leave 0.5s var(--asc-ease) forwards;
    pointer-events: none;
    z-index: 1;
}

@keyframes asc-node-land {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    60%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes asc-node-leave {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
}
@keyframes asc-scan-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(251,191,36,.32), 0 4px 12px rgba(217,119,6,.36); }
    50%      { box-shadow: 0 0 0 6px rgba(251,191,36,.52), 0 4px 16px rgba(217,119,6,.5); }
}
@keyframes asc-found-pulse {
    0%   { transform: translate(-50%, -50%) scale(1); }
    30%  { transform: translate(-50%, -50%) scale(1.18); }
    60%  { transform: translate(-50%, -50%) scale(0.96); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes asc-targeting-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(251,113,133,.32), 0 4px 12px rgba(225,29,72,.42); }
    50%      { box-shadow: 0 0 0 7px rgba(251,113,133,.52), 0 4px 14px rgba(225,29,72,.62); }
}
@keyframes asc-just-copied {
    0%   { box-shadow: 0 0 0 3px rgba(34,211,238,.6), 0 4px 12px rgba(8,145,178,.5); }
    100% { box-shadow: 0 2px 6px rgba(79,70,229,.28); }
}

/* Step banner pill */
.math-ds-asc-step-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(129,140,248,.22), rgba(79,70,229,.16));
    border: 1.5px solid rgba(79,70,229,.36);
    color: #4338ca;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-family: ui-monospace, monospace;
    font-weight: 600;
    margin: 0 0 10px 12px;
    box-shadow: 0 4px 12px rgba(79,70,229,.18);
    animation: asc-banner-fade .25s var(--asc-ease);
}
.math-ds-asc-step-banner code {
    background: rgba(255,255,255,.6);
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 700;
    margin: 0 1px;
}
.math-ds-asc-step-banner.asc-step-rotation {
    background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(217,119,6,.14));
    border-color: rgba(217,119,6,.32);
    color: #b45309;
}
.math-ds-asc-step-banner.asc-step-recolor {
    background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(124,58,237,.14));
    border-color: rgba(124,58,237,.32);
    color: #6d28d9;
}
@keyframes asc-banner-fade {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Empty state */
.math-ds-asc-empty {
    color: var(--math-text-muted, #6b7280);
    font-size: 13px;
    padding: 28px 20px;
    text-align: center;
}
.math-ds-asc-empty strong { color: var(--math-text-strong, #1f2937); }

/* Narrator panel */
.math-ds-asc-narrator {
    margin-top: 10px;
    padding: 10px 14px 12px;
    border-left: 3px solid #6366f1;
    background: linear-gradient(180deg, rgba(99,102,241,.05), rgba(99,102,241,0));
    border-radius: 0 8px 8px 0;
    font-size: 12.5px;
    line-height: 1.5;
}
.math-ds-asc-narrator:empty { display: none; }
.math-ds-asc-narrator .asc-narr-title {
    font-family: ui-monospace, "SF Mono", monospace;
    font-weight: 600;
    color: #4338ca;
    font-size: 12px;
    margin-bottom: 4px;
}
.math-ds-asc-narrator .asc-narr-body {
    color: var(--math-text-default, #374151);
    margin-bottom: 4px;
}
.math-ds-asc-narrator .asc-narr-body strong {
    color: var(--math-text-strong, #1f2937);
}
.math-ds-asc-narrator .asc-narr-impact {
    color: var(--math-text-muted, #6b7280);
    font-size: 11.5px;
    display: flex; align-items: center; gap: 6px;
}
.math-ds-asc-narrator .asc-narr-impact i {
    color: #6366f1;
}

/* Random progress chip */
.math-ds-asc-progress {
    margin-top: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(129,140,248,.10), rgba(79,70,229,.05));
    border: 1px solid rgba(79,70,229,.18);
    border-radius: 8px;
    transition: opacity .42s var(--asc-ease);
}
.math-ds-asc-progress[hidden] { display: none; }
.math-ds-asc-progress .asc-progress-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px;
    font-family: ui-monospace, monospace;
    margin-bottom: 5px;
}
.math-ds-asc-progress .asc-progress-label {
    color: #4338ca;
    font-weight: 600;
}
.math-ds-asc-progress .asc-progress-counter {
    color: var(--math-text-muted, #6b7280);
}
.math-ds-asc-progress .asc-progress-track {
    height: 4px;
    background: rgba(79,70,229,.12);
    border-radius: 999px;
    overflow: hidden;
}
.math-ds-asc-progress .asc-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--asc-grad-a), var(--asc-grad-b));
    transition: width .3s var(--asc-ease);
    border-radius: 999px;
}

/* Busy state — disable interactive controls during stagger */
.math-ds-asc-panel.is-busy .math-ds-asc-actions,
.math-ds-asc-panel.is-busy #ascRandomBtn,
.math-ds-asc-panel.is-busy .math-ds-asc-type-segment {
    pointer-events: none;
    opacity: .55;
}

/* Action buttons (asc-specific — primary gets gradient like seq) */
.math-ds-asc-actions .math-btn-primary {
    background: linear-gradient(135deg, var(--asc-grad-a), var(--asc-grad-b));
    border: none;
    color: #fff;
}
.math-ds-asc-actions .math-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Big O chip on asc action buttons inherits .math-ds-bigo-chip global */

/* Mobile (<=640px) */
@media (max-width: 640px) {
    .math-ds-asc-panel {
        --asc-node-r: 22px;
        --asc-level-h: 64px;
        --asc-h-spacing: 48px;
    }
    .math-ds-asc-info .asc-info-body {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .math-ds-asc-info .asc-info-memory {
        min-width: 0;
        order: 2;
    }
    .math-ds-asc-stats {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    }
    .math-ds-asc-type-segment .math-mode-segment-btn {
        min-height: 44px;
        padding: 6px 10px;
    }
    .math-ds-asc-type-segment .asc-seg-sub {
        font-size: 10px;
    }
    .math-ds-asc-node {
        font-size: 11px;
    }
}
@media (max-width: 380px) {
    .asc-rand-text-long { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .math-ds-asc-node,
    .math-ds-asc-edge,
    .math-ds-asc-tree .seq-scanning,
    .math-ds-asc-tree .seq-found,
    .math-ds-asc-tree .seq-targeting,
    .math-ds-asc-tree .seq-just-copied,
    .math-ds-asc-tree .seq-landing,
    .math-ds-asc-tree .seq-leaving,
    .math-ds-asc-tree .asc-recolor-ring,
    .math-ds-asc-tree .asc-rotate-ring,
    .math-ds-asc-tree .asc-pivot-ring,
    .asc-cursor,
    .asc-cursor::before,
    .asc-cursor::after,
    .math-ds-asc-step-banner,
    .math-ds-asc-progress .asc-progress-fill {
        animation: none !important;
        transition-duration: 0ms !important;
    }
}