/* Animated explanatory panels: visible conditions, actions and outcomes. */
.sl-panel{display:flex;flex-direction:column;background:#f5f8fd;border:1px solid #dfe7f3;border-radius:12px;overflow:hidden;text-align:left;min-width:0;color:#213953;font-family:Onest,sans-serif}.sl-top{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid #e0e8f4;font-size:9px;color:#526780}.sl-top>span:last-child{font-variant-numeric:tabular-nums;color:#2857df}.sl-scene{display:block;padding:5px 8px 0;background:#fff}.sl-scene svg{width:100%;height:155px;display:block;overflow:visible}.sl-scene text{font:10px Onest,sans-serif;fill:#4a617d}.sl-guide{stroke:#e4ebf4;stroke-width:1;fill:none}.sl-level{stroke:#93ace0;stroke-width:1.2;stroke-dasharray:4 4;fill:none}.sl-up{fill:#168263;stroke:#168263}.sl-down{fill:#c73c52;stroke:#c73c52}.sl-up path,.sl-down path{stroke-width:1}.sl-up rect,.sl-down rect{stroke:none}.sl-average{fill:none;stroke:#2857df;stroke-width:2}.sl-stop{stroke:#c73c52;stroke-width:1.5;stroke-dasharray:5 4;fill:none}.sl-target{stroke:#168263;stroke-width:1.5;stroke-dasharray:5 4;fill:none}.sl-buy{fill:#2857df;stroke:#fff;stroke-width:2}.sl-sell{fill:#168263;stroke:#fff;stroke-width:2}.sl-ring{fill:#fff;stroke:#2857df;stroke-width:2}.sl-outside{fill:#eaf0ff;stroke:#93ace0;stroke-width:1}.sl-calendar,.sl-node{fill:#edf3ff;stroke:#cbdafa;stroke-width:1}.sl-share{fill:#a6bef2}.sl-share-other{fill:#e2eaf8}.sl-steps{display:grid;grid-template-columns:1fr;gap:5px;padding:10px 12px}.sl-steps>span{display:flex;align-items:center;gap:8px;font-size:10px;line-height:1.3;color:#60728b}.sl-steps b{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#e4ebf6;font-size:9px;font-weight:550;flex:none}.sl-steps .is-current{color:#214bb5;font-weight:600}.sl-steps .is-current b{background:#2857df;color:#fff}.sl-receipt{display:flex;align-items:center;gap:7px;padding:10px 12px;background:#eaf1ff;border-top:1px solid #d8e4fa;min-height:39px;font-size:10px;line-height:1.5;color:#24466e}.sl-receipt:before{content:'';width:5px;height:5px;border-radius:50%;background:#2857df;flex:none}.sl-scene [data-lesson-cue]{opacity:.16;transition:opacity .25s ease}.sl-panel[data-phase="0"] [data-lesson-cue="0"],.sl-panel[data-phase="1"] [data-lesson-cue="0"],.sl-panel[data-phase="1"] [data-lesson-cue="1"],.sl-panel[data-phase="2"] [data-lesson-cue]{opacity:1}
.strategy-drum{height:534px}.sd-orbit{height:456px;top:30px}.sd-card{width:314px;height:464px;left:-157px;padding:18px;border-radius:19px}.sd-card>strong{font-size:24px;line-height:1.1;min-height:27px;margin-top:15px}.sd-rule{font-size:10px;margin:7px 0 14px}.sd-live-panel{display:block;min-height:0;flex:1}.sd-live-panel .sl-scene svg{height:149px}.sd-card-bottom{margin-top:10px;padding-top:9px;font-size:10px}.sd-comment .landing-button[aria-disabled=true]{background:#e1e8f4;color:#526780;pointer-events:none}.sd-card[data-soon=true] .sd-card-bottom{color:#61718a}
.studio-cards.lesson-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.lesson-catalog .studio-card{padding:22px;border:1px solid #dce5f3;border-radius:18px;background:#fff;min-width:0;display:flex;flex-direction:column}.lesson-catalog .studio-card>header{display:flex;justify-content:space-between;gap:12px;margin:0 0 14px;color:#526780;font-size:10px}.lesson-catalog .studio-card>h3{font-size:23px;margin:0 0 9px;line-height:1.2}.lesson-catalog .studio-card>p{font-size:13px;line-height:1.6;color:#536780;margin:0 0 14px;min-height:42px}.lesson-catalog .studio-card .sl-panel{margin-top:0;flex:none}.lesson-catalog .studio-card>footer{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:16px;font-size:12px}.lesson-catalog .studio-card>footer a{color:#2857df}.lesson-catalog .studio-card>footer button{border:1px solid #d1def5;background:#fff;color:#2857df;border-radius:6px;min-height:34px;padding:6px 10px;font:500 10px Onest,sans-serif;cursor:pointer}.lesson-catalog .sl-scene svg{height:176px}.lesson-catalog [data-status=soon]{color:#61718a}.studio-section-title span{max-width:37ch;text-align:right}
@media(max-width:1100px){.studio-cards.lesson-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.strategy-drum{height:494px}.sd-card{width:278px;height:433px;left:-139px;padding:15px}.sd-card>strong{font-size:22px;min-height:25px;margin-top:13px}.sd-rule{font-size:9px;margin-bottom:10px}.sd-live-panel .sl-scene svg{height:134px}.sl-steps{padding:8px 10px}.sl-steps>span{font-size:9px;min-height:17px}.sl-receipt{font-size:9px;min-height:36px;padding:8px 10px}.sl-top{padding:8px 10px;font-size:8px}.sd-card-bottom{margin-top:8px;font-size:9px}.studio-cards.lesson-catalog{grid-template-columns:1fr}.lesson-catalog .studio-card{padding:20px}.lesson-catalog .studio-card>p{min-height:0}.lesson-catalog .sl-steps>span{font-size:11px}.lesson-catalog .sl-receipt{font-size:10px}.lesson-catalog .sl-top{font-size:9px}.studio-section-title{align-items:start;gap:12px}.studio-section-title span{font-size:10px;max-width:22ch}}
@media(prefers-reduced-motion:reduce){.sl-scene [data-lesson-cue]{transition:none;opacity:1}}

/* Existing catalogue icon rules must not shrink explanatory SVGs into icons. */
.studio-catalog .lesson-catalog .sl-scene svg{width:100%;height:176px;fill:none;stroke:none;stroke-width:1}.lesson-catalog .studio-card>header{padding:0}.lesson-catalog .studio-card>footer{padding:14px 0 0}.lesson-catalog .studio-card>h3{font-weight:700}.sd-live-panel .sl-panel{height:100%}.sd-live-panel .sl-scene{flex:1;min-height:110px}.sd-card .sl-scene svg{height:100%;min-height:100px}.sd-live-panel .sl-top,.sd-live-panel .sl-steps,.sd-live-panel .sl-receipt{flex:none}.sl-scene [data-bar-phase]{opacity:0;transition:opacity .4s ease}.sl-panel[data-phase="0"] [data-bar-phase="0"],.sl-panel[data-phase="1"] [data-bar-phase="0"],.sl-panel[data-phase="1"] [data-bar-phase="1"],.sl-panel[data-phase="2"] [data-bar-phase]{opacity:1}@media(prefers-reduced-motion:reduce){.sl-scene [data-bar-phase]{opacity:1;transition:none}}

.studio-example-controls{display:flex;align-items:center;gap:14px}.studio-example-controls button{border:1px solid #cbd9f2;background:#fff;border-radius:7px;padding:8px 12px;min-height:36px;font:500 11px Onest,sans-serif;color:#2857df;cursor:pointer;white-space:nowrap}@media(max-width:760px){.studio-section-title{display:block}.studio-example-controls{margin:12px 0 0;justify-content:space-between;align-items:start}.studio-example-controls span{text-align:left;max-width:24ch}.studio-example-controls button{font-size:10px}}

/* Legible inactive context; only the current rule branch is emphasized. */
.sl-scene [data-lesson-cue]{opacity:1;transition:none}.sl-scene [data-lesson-cue] text{fill:#526780}.sl-node,.sl-calendar{fill:#f5f8fc;stroke:#cbd7e9}.sl-branch{fill:none;stroke:#c6d3e8;stroke-width:1.5}.sl-panel[data-phase="0"] [data-lesson-cue="0"] .sl-node,.sl-panel[data-phase="1"] [data-lesson-cue="1"] .sl-node,.sl-panel[data-phase="2"] [data-lesson-cue="2"] .sl-node,.sl-panel[data-phase="0"] [data-lesson-cue="0"] .sl-calendar,.sl-panel[data-phase="1"] [data-lesson-cue="1"] .sl-calendar,.sl-panel[data-phase="2"] [data-lesson-cue="2"] .sl-calendar{fill:#dfeaff;stroke:#2857df}.sl-panel[data-phase="0"] [data-lesson-cue="0"] text,.sl-panel[data-phase="1"] [data-lesson-cue="1"] text,.sl-panel[data-phase="2"] [data-lesson-cue="2"] text{fill:#214bb5;font-weight:600}.sl-panel[data-phase="1"] [data-lesson-cue="1"] .sl-branch,.sl-panel[data-phase="2"] [data-lesson-cue="2"] .sl-branch{stroke:#2857df;stroke-width:2.5}.sl-share{fill:#b5c9ef}.sl-panel[data-phase="0"] [data-lesson-cue="0"] .sl-share,.sl-panel[data-phase="1"] [data-lesson-cue="1"] .sl-share,.sl-panel[data-phase="2"] [data-lesson-cue="2"] .sl-share{fill:#6c97ed}.sl-scene text{font-size:12px}.sl-steps>span{font-size:12px;line-height:1.4;color:#526780}.sl-steps b{width:19px;height:19px;font-size:10px}.sl-top{font-size:10px}.sl-receipt{font-size:12px;line-height:1.45;min-height:42px}.sd-rule{font-size:11px}.sd-card-bottom{font-size:11px}.sd-card>strong{margin-top:2px}.sl-scene .sl-buy,.sl-scene .sl-sell,.sl-scene .sl-ring{opacity:.18}.sl-panel[data-phase="0"] [data-lesson-cue="0"] .sl-buy,.sl-panel[data-phase="0"] [data-lesson-cue="0"] .sl-sell,.sl-panel[data-phase="0"] [data-lesson-cue="0"] .sl-ring,.sl-panel[data-phase="1"] [data-lesson-cue="0"] .sl-buy,.sl-panel[data-phase="1"] [data-lesson-cue="1"] .sl-buy,.sl-panel[data-phase="1"] [data-lesson-cue="1"] .sl-sell,.sl-panel[data-phase="1"] [data-lesson-cue="1"] .sl-ring,.sl-panel[data-phase="2"] .sl-buy,.sl-panel[data-phase="2"] .sl-sell,.sl-panel[data-phase="2"] .sl-ring{opacity:1}@media(max-width:760px){.sl-top{font-size:10px}.sl-steps>span,.lesson-catalog .sl-steps>span{font-size:11px;line-height:1.4}.sl-receipt,.lesson-catalog .sl-receipt{font-size:11px;min-height:40px}.sd-rule{font-size:11px}.sd-card-bottom{font-size:11px}.sd-card>strong{margin-top:2px}}

/* Price notes are metadata, not another full description row. */
.lesson-catalog .studio-card>p.coin-card-price{min-height:0;margin:10px 0 0;font-size:12px;line-height:1.5;flex:none}
.lesson-catalog .studio-card>footer{margin-top:auto;padding-top:14px}
/* Fibonacci reveals only geometry known at the current lesson step. */
.sl-panel[data-lesson^="fibonacci_"] [data-lesson-cue]{opacity:0}
.sl-panel[data-lesson^="fibonacci_"][data-phase="0"] [data-lesson-cue="0"],.sl-panel[data-lesson^="fibonacci_"][data-phase="1"] [data-lesson-cue="0"],.sl-panel[data-lesson^="fibonacci_"][data-phase="1"] [data-lesson-cue="1"],.sl-panel[data-lesson^="fibonacci_"][data-phase="2"] [data-lesson-cue]{opacity:1}
@media(max-width:760px){.lesson-catalog .studio-card>p:not(.coin-card-price){min-height:0}}
@media(prefers-reduced-motion:reduce){.sl-panel[data-lesson^="fibonacci_"] [data-lesson-cue]{opacity:1}}
