.visual-atlas{container:visuals / inline-size;border:1px solid #39424b;border-radius:12px;margin:32px 0 48px;background:#151b20;overflow:hidden}.visual-heading{padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}.visual-heading h2{font-size:28px;letter-spacing:-.7px;line-height:1.35;font-weight:500;margin:10px 0}.visual-heading p{color:#b8c1ca;font-size:14px;line-height:1.8;margin:0;max-width:65ch}.visual-count{color:#a9c9de;font:10px ui-monospace,monospace;letter-spacing:1px;white-space:nowrap}.visual-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid #39424b;background:#11171c}.visual-tabs button{min-width:0;padding:18px 16px;text-align:left;border-right:1px solid #39424b;color:#b8c1ca;display:flex;flex-direction:column;gap:10px;line-height:1.6}.visual-tabs button:last-child{border-right:0}.visual-tabs button>span{font:9px/1.7 ui-monospace,monospace;letter-spacing:.7px;color:#a1b5c5}.visual-tabs strong{font-size:12px;font-weight:500}.visual-tabs button[aria-selected=true]{background:#22313c;color:#e2eff9;box-shadow:inset 0 -2px #a9c9de}.visual-tabs button[aria-selected=true]>span{color:#d0e2ee}.visual-tabs button:focus-visible{outline-offset:-4px}.visual-panel{padding:28px 32px}.visual-description h3{font-size:25px;font-weight:500;line-height:1.4;letter-spacing:-.5px;margin:0 0 10px}.visual-description>p{color:#b8c1ca;font-size:14px;line-height:1.85;margin:0 0 24px;max-width:85ch}.visual-renderer{min-width:0}.visual-renderer .diagram{margin:0;border-color:#39424b}.visual-renderer .diagram-viewport{max-height:640px}.visual-renderer .diagram-stage{min-height:210px;align-items:center}.visual-renderer .diagram-toolbar{padding:10px 14px;flex-wrap:wrap;gap:8px}.visual-renderer .diagram-actions{flex-wrap:wrap;gap:4px}.visual-tools{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:16px 0 24px;color:#aab5be;font-size:11px}.visual-motion{min-height:44px;border-color:#4b6679;color:#bcd5e5;flex-shrink:0}.visual-walkthrough h4{font-size:16px;font-weight:500;color:#e2eff9;margin:0 0 16px}.visual-walkthrough ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;counter-reset:visual-step;padding:0;margin:0}.visual-walkthrough li{counter-increment:visual-step;background:#11171c;border:1px solid #39424b;border-radius:6px;padding:18px;font-size:13px;line-height:1.8;color:#bac6cf}.visual-walkthrough li:before{content:'0' counter(visual-step);display:block;color:#a9c9de;font:12px ui-monospace,monospace;margin-bottom:12px}.visual-pitfall{margin-top:22px;border-left:2px solid #c9b490;background:#c9b49008;padding:16px 20px}.visual-pitfall .studio-kicker{color:#dac2a2}.visual-pitfall p{font-size:13px;line-height:1.8;color:#c6c6c9;margin:8px 0 0}.visual-references{margin-top:20px;border-top:1px solid #39424b;padding-top:8px}.visual-references>summary{min-height:44px;padding:10px 0;cursor:pointer;font-size:12px;color:#adc7db}.visual-references>div{display:grid;gap:8px;padding:8px 0}.visual-references a{font-size:12px;line-height:1.8;color:#adc7db;overflow-wrap:anywhere;padding-block:4px}.visual-references a:hover{color:#e2eff9;text-decoration:underline}.visual-atlas.is-animated svg .flowchart-link,.visual-atlas.is-animated svg .messageLine0,.visual-atlas.is-animated svg .messageLine1,.visual-atlas.is-animated svg .transition{stroke-dasharray:8 5!important;animation:visual-path-motion 1.2s linear infinite}@keyframes visual-path-motion{to{stroke-dashoffset:-26}}@container visuals (max-width:900px){.visual-tabs{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin}.visual-tabs button{flex:0 0 190px;scroll-snap-align:start;min-height:114px}.visual-heading{align-items:flex-start}.visual-count{white-space:normal;text-align:right}.visual-walkthrough ol{grid-template-columns:1fr}.visual-walkthrough li{padding:16px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px}.visual-walkthrough li:before{margin:4px 0 0}.visual-tools{flex-wrap:wrap}}
@container visuals (max-width:560px){.visual-heading{display:block;padding:24px 20px}.visual-heading h2{font-size:25px}.visual-count{display:block;text-align:left;margin-top:14px}.visual-tabs button{flex-basis:170px;padding:16px 14px}.visual-panel{padding:22px 16px}.visual-description h3{font-size:23px}.visual-description>p{font-size:14px}.visual-tools{gap:12px;padding-bottom:22px}.visual-tools>span{max-width:30ch}.visual-pitfall{padding:14px 16px}.visual-renderer .diagram-stage{padding:16px;min-height:180px}.visual-walkthrough li{font-size:14px}.visual-references a{min-height:40px}}
@media(prefers-reduced-motion:reduce){.visual-atlas.is-animated svg *{animation:none!important}}