/* A single JS clock supplies the fill amount. No separate CSS timer can drift. */
.lifecycle-section{overflow-anchor:none}
.lifecycle-tabs .step-progress,.lifecycle-tabs [data-active=true] .step-progress{height:100%;transform:scaleY(var(--cycle-progress,0));transform-origin:top;animation:none!important}
.lifecycle-tabs [data-active=false] .step-progress{transform:scaleY(0)}
.lifecycle-tabs>[data-cycle-tab]:focus-visible{outline-offset:7px}
body.demo-open{overflow:hidden}
.demo-dialog{width:min(980px,calc(100% - 40px));max-height:calc(100svh - 40px);margin:auto;padding:0;border:1px solid #dedbe5;border-radius:18px;background:#faf9fc;color:#19171e;box-shadow:0 30px 100px #16102155;overscroll-behavior:contain}
.demo-dialog::backdrop{background:#17132288;backdrop-filter:blur(7px)}
.demo-dialog[open]{animation:demoEnter .25s var(--ease)}
.demo-topbar{position:sticky;top:0;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #e8e5ed;background:#fff}
.demo-topbar>span{display:flex;align-items:center;gap:3px}
.demo-topbar strong{font-size:20px;font-weight:650;letter-spacing:-.06em}
.demo-topbar>span>span:last-child{border-left:1px solid #e0dce7;margin-left:15px;padding-left:17px;color:#8a8393;font-size:12px;letter-spacing:-.02em}
.demo-close{width:32px;height:32px;border:1px solid #e7e3eb;background:#fcfbfd;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.demo-close:hover{background:#f1edf6}.demo-close .icon{width:16px;height:16px}
.demo-layout{display:grid;grid-template-columns:34% 66%;min-height:550px}
.demo-narrative{padding:35px 27px 25px;display:flex;flex-direction:column;min-width:0}
.demo-narrative>.eyebrow{font-size:10px;color:#997ca8}
.demo-narrative h2{font-size:30px;line-height:1.12;letter-spacing:-.04em;margin-top:18px;min-height:101px}
.demo-narrative>p{font-size:13px;line-height:1.65;letter-spacing:-.015em;color:#847c8f;min-height:111px;margin-top:15px}
.demo-steps{display:grid;gap:12px;margin-top:auto;padding-top:25px}
.demo-steps>button{position:relative;display:flex;align-items:center;gap:10px;border:0;text-align:left;font-size:13px;padding:9px 0 11px;color:#a39ba9}
.demo-step-number{font-size:11px;min-width:18px;color:#b0a6ba}
.demo-steps [aria-selected=true]{color:#30213c}.demo-steps [aria-selected=true] .demo-step-number{color:var(--plum)}
.demo-step-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#e7e1ec;overflow:hidden}
.demo-step-track>span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--plum)}
.demo-steps [aria-selected=true] .demo-step-track>span{transform:scaleX(var(--demo-progress,0))}
.demo-stage-art{padding:30px;display:flex;align-items:center;min-width:0}
.demo-stage-panel{width:100%;margin:auto;max-width:510px}
.demo-stage-panel .build-cards{width:100%}.demo-stage-panel .ui-card{box-shadow:0 8px 25px #240e3210}
.demo-stage-panel .source-row{padding-block:14px}.demo-stage-panel .build-mini{gap:12px}
.demo-stage-panel .build-mini .ui-card{padding:17px}.demo-stage-panel .build-mini p{font-size:11px}
.demo-stage-panel .analytics-demo{width:100%;max-width:430px;margin:auto}
.demo-stage-panel .bar-chart{height:145px}
.demo-player-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 22px;border-top:1px solid #e6e0ed;background:#fff;font-size:10px;color:#9a8ca5}
.demo-player-controls>div{display:flex;align-items:center;gap:12px}
.demo-player-controls button{border:1px solid #e8e2ed;border-radius:6px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;transition:background .2s;color:#715a82}
.demo-player-controls button:hover{background:#f2edf7}
.demo-player-controls button .icon{width:12px;height:12px}
.demo-player-controls [data-demo-previous] .icon{transform:rotate(180deg)}
.demo-player-controls [data-demo-play]{width:76px;gap:7px;font-size:11px}
.demo-now-playing{min-width:90px;text-align:right;font-variant-numeric:tabular-nums}
.demo-paused *{animation-play-state:paused!important}
.demo-paused .demo-stage-panel,.motion-paused .lifecycle-panel{animation:none!important;opacity:1;transform:none}
@keyframes demoEnter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .lifecycle-tabs .step-progress,.lifecycle-tabs [data-active=true] .step-progress{height:2px;transform:scaleX(var(--cycle-progress,0));transform-origin:left;animation:none!important}
 .lifecycle-tabs [data-active=false] .step-progress{transform:scaleX(0)}
 .demo-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px);border-radius:15px}
 .demo-topbar{padding:12px 14px}.demo-topbar .brand-mark{width:25px;height:25px}.demo-topbar .brand-mark img{width:37px;height:26px}.demo-topbar strong{font-size:18px}
 .demo-topbar>span>span:last-child{font-size:9px;margin-left:9px;padding-left:10px}.demo-close{width:29px;height:29px}
 .demo-layout{grid-template-columns:1fr;min-height:0}
 .demo-narrative{padding:22px 23px 19px}.demo-narrative>.eyebrow{font-size:9px}
 .demo-narrative h2{font-size:27px;min-height:61px;margin-top:12px;max-width:370px}
 .demo-narrative>p{font-size:12px;line-height:1.6;min-height:77px;max-width:450px;margin-top:8px}
 .demo-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;padding-top:16px;margin-top:0}
 .demo-steps>button{font-size:11px;gap:4px;padding:4px 0 11px;justify-content:center}.demo-step-number{display:none}
 .demo-stage-art{padding:23px;min-height:495px;align-items:center}
 .demo-stage-panel .ui-heading{padding:15px}.demo-stage-panel .ui-heading strong{font-size:12px}
 .demo-stage-panel .source-row{font-size:11px;gap:10px;padding-block:12px;margin-inline:15px}.demo-stage-panel .source-row small{font-size:9px}
 .demo-stage-panel .source-foot{font-size:9px;padding:14px}.demo-stage-panel .build-mini{grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
 .demo-stage-panel .build-mini .ui-card{padding:13px}.demo-stage-panel .build-mini strong{font-size:11px}.demo-stage-panel .build-mini p{font-size:10px;line-height:1.55;margin-top:7px}
 .demo-stage-panel .test-question,.demo-stage-panel .test-answer{font-size:12px}.demo-stage-panel .test-answer{margin:18px 0}.demo-stage-panel .test-checks{font-size:10px}
 .demo-stage-panel .test-demo{padding-inline:16px}.demo-stage-panel .source-tag{font-size:9px}.demo-stage-panel .metric>strong{font-size:29px}
 .demo-stage-panel .analytics-demo .bar-chart{height:115px}.demo-stage-panel .topic-row{font-size:10px}
 .demo-player-controls{position:sticky;bottom:0;z-index:6;padding:12px 14px;gap:8px}.demo-example-label{font-size:8px;max-width:80px}.demo-player-controls>div{gap:7px}.demo-now-playing{font-size:9px;min-width:65px}
}
@media(max-width:380px){
 .demo-narrative{padding:20px 19px 17px}.demo-narrative h2{font-size:25px}.demo-narrative>p{font-size:11px}.demo-stage-art{padding:20px 16px;min-height:505px}
 .demo-topbar>span>span:last-child{font-size:8px;padding-left:8px;margin-left:7px}.demo-example-label{max-width:63px;font-size:7px}.demo-now-playing{min-width:50px;font-size:8px}.demo-player-controls [data-demo-play]{width:62px}
 .demo-player-controls>div{gap:5px}.demo-player-controls button{width:27px}.demo-stage-panel .build-mini .ui-card{padding:11px}
}
@media(prefers-reduced-motion:reduce){.demo-dialog[open],.demo-stage-panel{animation:none}.demo-dialog::backdrop{backdrop-filter:none}}