/* Numerical surfaces, connection geometry and the responsive teaching demonstration. */
body.v3 .v24-board{background:linear-gradient(140deg,#fffdf9,#f5effa);box-shadow:0 16px 36px #65437812,inset 0 1px 1px #fff;border-radius:28px}
body.v3 .v24-board [data-v24-tone='violet'] .v24-face{background:linear-gradient(140deg,var(--source-light),var(--source-dark));color:#fff;border-color:#ab87ed}
body.v3 .v24-board [data-v24-kind='target'] .v24-face{background:linear-gradient(145deg,var(--target-light),var(--target-base));color:var(--target-ink);border-color:#d6efe2;box-shadow:0 6px 14px #477d5f12,inset 0 1px 1px #fff}
body.v3 .v24-board [data-v24-kind='target'] .v24-track{background:#36776222}
body.v3 .v24-board [data-v24-kind='target'] .v24-fill{background:var(--target-fill)}
body.v3 .v24-board [data-v24-kind='empty'] .v24-face{color:#736282;background:#f9f6fa;border-color:#e6ddec;box-shadow:inset 0 1px 3px #71528508}
body.v3 .v24-face{inset:6%;border-radius:clamp(12px,2.8vw,25px);box-shadow:0 6px 14px #63487713;transition:box-shadow var(--duration-release),outline-color var(--duration-release)}
body.v3 .v24-board [data-v24-kind='target'] .v24-face::before{inset:7px;border:1px solid #47847126;border-radius:inherit;pointer-events:none}
body.v3 .v24-role,body.v3 .v24-note{display:none!important}
body.v3.v3-labels .v24-role{display:block!important;font-weight:700;letter-spacing:.04em;font-size:clamp(10px,calc(11cqw / var(--v24-size)),12px);top:9%}
body.v3 .v24-amount{margin:0!important;gap:3px;max-width:94%;transform:none;letter-spacing:0}
body.v3 .v24-value{font-size:clamp(24px,calc(35cqw / var(--v24-size)),48px);font-weight:800;line-height:1.12}
body.v3 .v24-goal{font-size:clamp(13px,calc(18cqw / var(--v24-size)),25px);font-weight:700;line-height:1.2}
body.v3 [data-v24-digits='3'] .v24-value,body.v3 [data-v24-digits='4'] .v24-value{font-size:clamp(18px,calc(26cqw / var(--v24-size)),38px)}
body.v3.larger-text .v24-value{font-size:clamp(26px,calc(38cqw / var(--v24-size)),52px)}
body.v3.larger-text [data-v24-digits='3'] .v24-value,body.v3.larger-text [data-v24-digits='4'] .v24-value{font-size:clamp(18px,calc(26cqw / var(--v24-size)),40px)}
body.v3 .v24-board #a11y-board>button .v24-preview{font-size:clamp(10px,calc(11cqw / var(--v24-size)),14px);font-weight:700;color:#52319b;background:#fffe}
body.v3 .v24-board #a11y-board>button.eligible .v24-face::after{border:1.5px dashed #7750b1;inset:-3px}
body.v3 .v24-board #a11y-board>button.selected .v24-face::after{border:2px solid #5f30c5;box-shadow:0 0 0 2px #fff9;inset:-3px}
body.v3 .v24-board #a11y-board>button.destination .v24-face::after{border:2px solid #5f30c5;inset:-3px}
.v3-source-mark{position:absolute;right:10%;top:9%;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
body.v3.v3-labels .v3-source-mark{display:none}
.v3-connections{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none!important;overflow:visible}
.v3-arrow-underlay{stroke:#fff;stroke-width:5;fill:none;stroke-linecap:round}
.v3-arrow-line,.v3-arrow-tip{stroke:#7450b6;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.v3-arrow-line{stroke-dasharray:2 3}.v3-connections [data-chosen='true'] .v3-arrow-line{stroke:#5730b3;stroke-dasharray:none;stroke-width:2.5}.v3-connections [data-chosen='true'] .v3-arrow-tip{stroke:#5730b3;stroke-width:2.5}
html[data-presentation='v3'] body.v2 .v2-hero-art,body.v3 .v2-hero-art{display:flex;min-width:0;justify-content:center;align-items:center;padding:18px 0;margin:0!important;height:auto!important;min-height:260px}
html[data-presentation='v3'] body.v2 .v2-demo,body.v3 .v2-demo{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;flex:0 0 auto;max-width:calc(100% - 32px);transform-origin:center; width:min(100%,320px);height:auto;aspect-ratio:1;transform:rotate(-4deg)!important;border-radius:34px;background:linear-gradient(140deg,#fffefb,#f5ecfc);margin:0 auto;box-shadow:0 20px 46px #72528e1b}
body.v3 .v2-demo-tile{width:37%;height:37%;border-radius:23%;font-size:clamp(32px,5vw,44px);font-weight:800;letter-spacing:0}
body.v3 .v2-demo-source{left:8%;top:8%;background:linear-gradient(140deg,var(--source-light),var(--source-dark))}
body.v3 .v2-demo-right{left:56%;top:8%;background:linear-gradient(145deg,var(--target-light),var(--target-base));color:var(--target-ink)}
body.v3 .v2-demo-below{left:8%;top:56%;background:linear-gradient(145deg,var(--target-light),var(--target-base));color:var(--target-ink)}
body.v3 .v2-demo-tile small{font-size:.52em;font-weight:700;opacity:1}
body.v3 .v2-demo-tile .v2-tile-kicker{top:12%;font-size:10px;letter-spacing:.04em;font-weight:700;opacity:1}
body.v3 :is(.v2-demo-four,.v2-demo-zero,.v2-target-empty,.v2-target-filled){top:31%;animation-duration:3s;animation-iteration-count:2;animation-fill-mode:forwards;animation-play-state:paused}
body.v3 :is(.v2-demo-four,.v2-target-empty){animation-name:v3-demo-before}
body.v3 :is(.v2-demo-zero,.v2-target-filled){animation-name:v3-demo-after}
body.v3 .v2-demo-tile i{left:24%;right:24%;bottom:13%;height:4px;animation:v3-demo-fill 3s var(--ease-soft) 2 forwards paused}
body.v3 .v2-demo-arrow{font-size:26px;animation:none;opacity:.75}.v2-demo-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.v3 .v2-arrow-right{left:47%;top:22%}body.v3 .v2-arrow-down{left:23%;top:46%}
body.v3 .v2-demo-equation{left:56%;top:67%;font-size:20px;font-weight:700;letter-spacing:0;transform:rotate(4deg)}
body.v3 .v2-demo-equation span,body.v3 .v2-demo-caption{display:none}
body.v3 .v2-spark{animation:none;font-size:26px;opacity:.45}
body.v3 .v3-demo-active :is(.v2-demo-four,.v2-demo-zero,.v2-target-empty,.v2-target-filled,.v2-demo-tile i){animation-play-state:running}
body.v3.v2-still :is(.v2-demo-four,.v2-target-empty){opacity:0}body.v3.v2-still :is(.v2-demo-zero,.v2-target-filled){opacity:1}
@keyframes v3-demo-before{0%,28%{opacity:1;transform:translateY(0)}42%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes v3-demo-after{0%,28%{opacity:0;transform:translateY(3px)}45%,100%{opacity:1;transform:translateY(0)}}
@keyframes v3-demo-fill{0%,28%{transform:scaleX(0);opacity:.2}48%,100%{transform:scaleX(1);opacity:.65}}
@media(max-width:700px){body.v3 .v2-hero-art{min-height:240px;margin-top:14px!important}html[data-presentation='v3'] body.v2 .v2-demo,body.v3 .v2-demo{width:230px;border-radius:28px}body.v3 .v2-demo-tile{font-size:34px}body.v3 .v2-demo-equation{font-size:16px}body.v3 .v2-spark-one{right:14%;top:20px}body.v3 .v2-spark-two{left:12%;bottom:20px}body.v3 .v24-board{border-radius:25px}}
@container(max-width:400px){body.v3 .v24-board[data-board-size='4'] .v24-value{font-size:clamp(24px,calc(35cqw / var(--v24-size)),34px)}body.v3 .v24-board[data-board-size='4'] .v24-goal{font-size:clamp(13px,calc(18cqw / var(--v24-size)),20px)}body.v3.v3-labels .v24-board[data-board-size='4'] .v24-role{font-size:10px;top:8%;letter-spacing:0}body.v3.v3-labels .v24-amount{margin-top:10%!important}body.v3.larger-text .v24-board[data-board-size='4'] .v24-value{font-size:clamp(25px,calc(37cqw / var(--v24-size)),36px)}body.v3 .v24-board[data-board-size='4'] [data-v24-digits='4'] .v24-value{font-size:clamp(17px,calc(24cqw / var(--v24-size)),24px)}}
@media(prefers-reduced-motion:reduce){body.v3 :is(.v2-demo-four,.v2-target-empty){opacity:0}body.v3 :is(.v2-demo-zero,.v2-target-filled){opacity:1}body.v3 .v2-demo-tile i{transform:scaleX(1)}}
@media(forced-colors:active){.v3-arrow-line,.v3-arrow-tip{stroke:Highlight}.v3-arrow-underlay{stroke:Canvas}.v3-source-mark{stroke:CanvasText}}

/* v3.3 board labels remain secondary without becoming miniature. */
body.v3.v3-labels .v24-role{font-size:clamp(12px,calc(12cqw / var(--v24-size)),13px);line-height:1.15}
body.v3 .v24-board #a11y-board>button .v24-preview{font-size:clamp(12px,calc(12cqw / var(--v24-size)),14px);line-height:1.2}
body.v3 .v2-demo-tile .v2-tile-kicker{font-size:12px}
@container(max-width:400px){body.v3.v3-labels .v24-board[data-board-size='4'] .v24-role{font-size:12px}}