/* Optional educational illustration; independent of tool answers and navigation. */
.state-demo-section{max-width:1320px;margin:0 auto;padding:64px clamp(22px,6vw,88px);scroll-margin-top:90px}.state-demo-intro{max-width:760px}.state-demo-intro h2{font:400 clamp(2.15rem,4.5vw,3.8rem)/1.05 Georgia,serif;letter-spacing:-.025em;margin:0 0 20px;color:var(--ink,#f2f5f1)}.state-demo-intro>p:last-child{color:var(--muted,#a4aea6);max-width:65ch;line-height:1.7}.state-demo{border:1px solid #3f5543;border-radius:18px;background:#101710;margin-top:28px;color:#f2f5f1}.state-demo summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;min-height:72px;padding:20px 25px;font-size:1.1rem;font-weight:700;color:#b9f3aa}.state-demo summary::-webkit-details-marker{display:none}.state-demo summary:hover{background:#172218;border-radius:18px}.state-demo summary:focus-visible,.state-demo button:focus-visible{outline:3px solid #a1f591;outline-offset:5px}.state-demo-chevron{font-size:1.4rem;line-height:1}.state-demo[open] .state-demo-chevron{transform:rotate(45deg)}.state-demo-panel{border-top:1px solid #2b3e2d;padding:24px}.state-demo-disclosure{font-size:.88rem;color:#bdc9bf;line-height:1.6;margin:0 0 20px}.state-demo-controls{display:flex;flex-wrap:wrap;gap:12px}.state-demo-controls button,.state-demo-movement button{font:600 .93rem/1.35 ui-sans-serif,system-ui,sans-serif;font-family:inherit;min-height:44px;padding:11px 16px;border:1px solid #71836f;border-radius:999px;background:#101710;color:#e6eee5;cursor:pointer}.state-demo-controls button[aria-pressed="true"]{background:#a1f591;border-color:#a1f591;color:#0a1708}.state-demo-controls button:disabled,.state-demo-movement button:disabled{cursor:default}.state-demo-status{min-height:3.2em;color:#cfdbce;font-size:.93rem;line-height:1.55;margin:20px 0 0;max-width:70ch}.state-demo-stage{position:relative;height:340px;border:1px solid #293d2c;border-radius:16px;margin-top:12px;isolation:isolate;background:radial-gradient(ellipse at center,#1c2b1c 0,#101710 73%)}.state-demo-connections{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.state-demo-connections path{fill:none;stroke:#8abf7b;stroke-width:1.25;vector-effect:non-scaling-stroke}.state-demo-pressure-lines{opacity:.28;transition:opacity .55s ease}.state-demo-room-lines{opacity:0;transition:opacity .55s ease}.state-demo-mobile-connections{display:none}.state-demo-thoughts{position:relative;height:100%;list-style:none;padding:0;margin:0}.state-demo-thought{--dx:0px;--dy:0px;--turn:0deg;position:absolute;left:var(--x);top:var(--y);width:27%;max-width:255px;margin:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--turn));transition:transform .65s ease;--float:5px}.state-demo-thought>span{display:flex;align-items:center;justify-content:center;min-height:84px;padding:16px 12px;text-align:center;color:#e4eae2;background:#182119;border:1px solid #6a7866;border-radius:13px;font-size:clamp(.86rem,1.25vw,1rem);line-height:1.45;box-shadow:0 5px 14px #0003}.state-demo-thought:nth-child(1){--x:18%;--y:30%;--dx:-8px;--dy:-10px;--turn:-6deg}.state-demo-thought:nth-child(2){--x:50%;--y:30%;--dx:9px;--dy:9px;--turn:5deg}.state-demo-thought:nth-child(3){--x:82%;--y:30%;--dx:0px;--dy:-6px;--turn:-4deg}.state-demo-thought:nth-child(4){--x:18%;--y:72%;--dx:3px;--dy:8px;--turn:5deg}.state-demo-thought:nth-child(5){--x:50%;--y:72%;--dx:-8px;--dy:0px;--turn:-5deg}.state-demo-thought:nth-child(6){--x:82%;--y:72%;--dx:5px;--dy:8px;--turn:4deg}.state-demo[data-view="room"] .state-demo-thought{--dx:0px;--dy:0px;--turn:0deg;--float:1.5px}.state-demo[data-view="room"] .state-demo-key>span{border-color:#b6e99f;background:#233420;color:#effbe9}.state-demo[data-view="room"] .state-demo-pressure-lines{opacity:0}.state-demo[data-view="room"] .state-demo-room-lines{opacity:.75}.state-demo[open][data-motion="running"] .state-demo-thought>span{animation:state-demo-drift 5.5s ease-in-out infinite alternate}.state-demo-thought:nth-child(2n)>span{animation-delay:-2s!important}.state-demo-thought:nth-child(3n)>span{animation-delay:-4s!important}.state-demo-connection-note{color:#c7e5b9;font-size:.92rem;line-height:1.6;min-height:3em;margin:16px 0}.state-demo-movement{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.state-demo-movement button{font-size:.84rem;color:#d0dbcc}.state-demo-movement [hidden]{display:none}.state-demo-movement span{font-size:.83rem;color:#bdc9bf}.state-demo-takeaway{border-top:1px solid #304632;padding-top:20px;margin:24px 0 12px;font-size:1rem;line-height:1.7;color:#e6eee2;max-width:72ch}.state-demo-framework{display:inline-flex;align-items:center;min-height:44px;color:#a1f591;font-size:.9rem;text-underline-offset:4px}@keyframes state-demo-drift{from{transform:translateY(calc(-1 * var(--float)))}to{transform:translateY(var(--float))}}@media(max-width:600px){.state-demo-section{padding:44px 22px}.state-demo summary{padding:18px;font-size:1rem;gap:10px}.state-demo-panel{padding:18px 12px}.state-demo-controls{gap:8px}.state-demo-controls button{font-size:.85rem;padding:11px 13px}.state-demo-status{min-height:4.5em;font-size:.86rem}.state-demo-stage{height:480px}.state-demo-connections{display:none}.state-demo-mobile-connections{display:block}.state-demo-thought{width:42%;max-width:none}.state-demo-thought>span{min-height:99px;padding:13px 8px;font-size:.85rem}.state-demo-thought:nth-child(1){--x:27%;--y:17%;--dx:-2px;--dy:-4px;--turn:-4deg}.state-demo-thought:nth-child(2){--x:73%;--y:17%;--dx:2px;--dy:5px;--turn:3deg}.state-demo-thought:nth-child(3){--x:27%;--y:50%;--dx:0px;--dy:0px;--turn:4deg}.state-demo-thought:nth-child(4){--x:73%;--y:50%;--dx:2px;--dy:6px;--turn:-3deg}.state-demo-thought:nth-child(5){--x:27%;--y:83%;--dx:0px;--dy:-1px;--turn:-3deg}.state-demo-thought:nth-child(6){--x:73%;--y:83%;--dx:0px;--dy:2px;--turn:4deg}.state-demo-takeaway{font-size:.94rem}}@media(prefers-reduced-motion:reduce){.state-demo *, .state-demo *::before,.state-demo *::after{animation:none!important;transition:none!important}}@media print{.state-demo-section{display:none}}

.state-demo-invitation{font:400 clamp(1.15rem,2.3vw,1.45rem)/1.5 Georgia,serif;color:#edf6e8;margin:0 0 18px}