/* Optional visual explanations stay inside the existing Tipp disclosure. */
:is(#visual-aids,.visual-aids) {--va-first:#1757a5;--va-second:#77519b;max-width:360px;width:100%;min-width:0;margin:16px auto 0;text-align:left;}
:is(#visual-aids,.visual-aids) .va-section {min-width:0;padding:16px;border:1px solid var(--line,#d5e4f3);border-radius:16px;background:#fff;}
:is(#visual-aids,.visual-aids) .va-section+.va-section {margin-top:16px;}
:is(#visual-aids,.visual-aids) .va-heading {margin:0 0 12px;font-size:20px;line-height:1.4;letter-spacing:0;}
:is(#visual-aids,.visual-aids) .va-equation {margin:0 0 12px;font-size:18px;line-height:1.65;font-weight:600;color:var(--ink,#17324d);overflow-wrap:anywhere;}
:is(#visual-aids,.visual-aids) .va-equation-line {display:block;}
:is(#visual-aids,.visual-aids) .va-color-0 {color:var(--va-first);}
:is(#visual-aids,.visual-aids) .va-color-1 {color:var(--va-second);}
:is(#visual-aids,.visual-aids) .va-term {white-space:nowrap;}
:is(#visual-aids,.visual-aids) .va-decomposition-field {display:grid;gap:9px;min-width:0;}
:is(#visual-aids,.visual-aids) .va-part {min-width:0;border-left:4px solid currentColor;border-radius:0 12px 12px 0;padding:10px 12px;background:#edf4fd;}
:is(#visual-aids,.visual-aids) .va-part.va-color-1 {background:#f3eef9;}
:is(#visual-aids,.visual-aids) .va-part-label {margin:0 0 7px;font-size:16px;line-height:1.5;color:inherit;font-weight:600;}
:is(#visual-aids,.visual-aids) .va-part-equation {margin:8px 0 0;font-size:18px;font-weight:600;line-height:1.5;color:inherit;}
:is(#visual-aids,.visual-aids) .va-part-points {display:grid;gap:6px;width:fit-content;max-width:100%;}
:is(#visual-aids,.visual-aids) .va-point-row {display:grid;grid-template-columns:repeat(var(--va-row),12px);gap:6px;}
:is(#visual-aids,.visual-aids) .va-decomposition-dot {display:block;width:12px;height:12px;border-radius:50%;background:currentColor;}
:is(#visual-aids,.visual-aids) .va-together {margin:14px 0 2px;font-size:16px;line-height:1.5;color:var(--ink,#17324d);}
:is(#visual-aids,.visual-aids) .va-total {margin:0;font-size:23px;line-height:1.5;}
:is(#visual-aids,.visual-aids) .va-landing {margin:8px 0 0;font-size:18px;font-weight:600;line-height:1.5;color:var(--va-first);}
:is(#visual-aids,.visual-aids) .va-number-groups {display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:6px;}
:is(#visual-aids,.visual-aids) .va-number-group {display:flex;align-items:center;justify-content:center;min-width:0;min-height:34px;border:1px solid currentColor;border-radius:4px;background:#fff;font-size:16px;font-weight:600;}
:is(#visual-aids,.visual-aids) .va-note {margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted,#506780);}
:is(#visual-aids,.visual-aids) .va-swap-view {display:flex;justify-content:center;align-items:center;min-width:0;min-height:84px;padding:14px 6px;}
:is(#visual-aids,.visual-aids) .va-swap-grid {position:relative;flex:none;max-width:100%;transition:width .55s ease,aspect-ratio .55s ease;}
:is(#visual-aids,.visual-aids) .va-swap-dot {position:absolute;display:block;width:min(10px,calc(80% / var(--va-columns)));aspect-ratio:1;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);transition:left .55s ease,top .55s ease;}
:is(#visual-aids,.visual-aids) .va-caption {margin:6px 0 10px;font-size:16px;line-height:1.5;color:var(--ink,#17324d);}
:is(#visual-aids,.visual-aids) .va-swap-button {display:block;min-width:44px;min-height:44px;margin:0 auto;padding:9px 18px;border:1px solid #a7c4e7;border-radius:8px;background:#f0f6fd;color:var(--blue,#175cd3);font-size:16px;font-weight:600;}
:is(#visual-aids,.visual-aids) .va-swap-button:hover {background:#e2edfb;}
:is(#visual-aids,.visual-aids) .va-swap-button:focus-visible,:is(#visual-aids,.visual-aids) .va-number-line-scroll:focus-visible {outline:3px solid #077ea4;outline-offset:3px;}
:is(#visual-aids,.visual-aids) .va-swap-area {position:relative;display:flex;align-items:center;justify-content:center;width:180px;height:96px;max-width:calc(100% - 30px);margin:16px 0 8px 20px;border:2px solid var(--va-first);border-radius:3px;background:#edf4fd;transition:width .55s ease,height .55s ease;}
:is(#visual-aids,.visual-aids) .va-swap-area.va-area-turned {width:96px;height:180px;}
:is(#visual-aids,.visual-aids) .va-area-top {position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);font-size:16px;font-weight:600;color:var(--va-first);}
:is(#visual-aids,.visual-aids) .va-area-side {position:absolute;right:calc(100% + 7px);top:50%;transform:translateY(-50%);font-size:16px;font-weight:600;color:var(--va-first);}
:is(#visual-aids,.visual-aids) .va-area-total {font-size:21px;font-weight:700;color:var(--va-first);}
:is(#visual-aids,.visual-aids) .va-number-line-scroll {display:block;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:8px;}
:is(#visual-aids,.visual-aids) .va-number-line-scroll svg {display:block;max-width:none;overflow:visible;height:126px;}
:is(#visual-aids,.visual-aids) .va-axis,:is(#visual-aids,.visual-aids) .va-tick {stroke:#506780;stroke-width:1.5;fill:none;}
:is(#visual-aids,.visual-aids) .va-axis-arrow {stroke:#506780;stroke-width:1.5;fill:none;}
:is(#visual-aids,.visual-aids) .va-jump,:is(#visual-aids,.visual-aids) .va-jump-arrow {stroke:var(--va-first);stroke-width:2;fill:none;}
:is(#visual-aids,.visual-aids) .va-jump-label {fill:var(--va-first);font:600 15px Arial,Helvetica,sans-serif;}
:is(#visual-aids,.visual-aids) .va-tick-label {fill:var(--ink,#17324d);font:16px Arial,Helvetica,sans-serif;}
@media(prefers-reduced-motion:reduce) {:is(#visual-aids,.visual-aids) [class*="va-"] {transition-duration:0s;animation-duration:0s;scroll-behavior:auto;}}
@media(max-width:400px) {:is(#visual-aids,.visual-aids) .va-section {padding:12px;} :is(#visual-aids,.visual-aids) .va-part {padding:10px;} :is(#visual-aids,.visual-aids) .va-point-row {grid-template-columns:repeat(var(--va-row),10px);gap:5px;} :is(#visual-aids,.visual-aids) .va-decomposition-dot {width:10px;height:10px;}}
