/* Finite, purposeful motion. Every effect honors the app and OS motion preferences. */
html:has(dialog[open]){overflow:hidden}
@keyframes enter-view{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fill-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bar-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes modal-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes set-success{0%{box-shadow:0 0 0 0 #04dfb845}70%{box-shadow:0 0 0 6px #04dfb800}100%{box-shadow:none}}
@keyframes confetti{0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),260px,0) rotate(var(--rotation))}}
@keyframes stage-in{from{opacity:0;filter:drop-shadow(0 0 24px var(--avatar-accent));translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes ring-pop{0%{transform:scale(.8);opacity:0}65%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
#main>.page-heading,.dashboard-columns,.two-columns,.goals-grid,.locker-layout,.settings-grid{animation:enter-view .4s ease-out both}
.routine-card{animation:enter-view .42s ease-out both;animation-delay:var(--reveal-delay,0ms)}
.progress-track>span{transform-origin:left;animation:fill-in .65s cubic-bezier(.22,1,.36,1);transition:width .35s ease}
.bar{transform-origin:bottom;animation:bar-in .6s cubic-bezier(.22,1,.36,1)}
dialog[open]{animation:modal-in .24s ease-out}
button,a,input,select{-webkit-tap-highlight-color:transparent}
.btn,.icon-button,.watch-form,.day,.outfit,.nav-button,.tab,.rest-preset{transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s}
.btn:active:not(:disabled),.icon-button:active:not(:disabled),.watch-form:active,.day:active,.outfit:active:not(:disabled){transform:scale(.96)}
.workout-photo{transition:transform .55s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.routine-card:hover{border-color:#33736a;box-shadow:0 10px 28px #0004}.routine-card:hover .workout-photo{transform:scale(1.035)}.btn-primary:hover{box-shadow:0 0 23px #04dfb824;transform:translateY(-2px)}.outfit:not(:disabled):hover{transform:translateY(-4px)}}
.avatar-stage img.character{animation:stage-in .55s ease-out both}
.avatar-stage:after{animation:ring-pop .6s ease-out}
.library-search{display:flex;gap:14px;align-items:end;margin-bottom:20px}
.search-field{flex:1}.search-field>span,.time-filter{font-size:9px;font-weight:600;letter-spacing:1.4px;color:#90b5bb}
.search-field input,.time-filter select{display:block;width:100%;margin-top:9px;min-height:45px;background:#101c21;border:1px solid #2b4349;border-radius:8px;padding:11px 14px;color:var(--text);font:400 12px var(--body)}
.search-field input:focus,.time-filter select:focus{outline:2px solid var(--teal);outline-offset:2px}
.time-filter{min-width:175px}.routine-card[hidden]{display:none}
.routine-tools .tab{flex:0 0 auto;white-space:nowrap}.routine-tools .tabs{scrollbar-width:thin;scrollbar-color:#30574f transparent;padding-bottom:5px}
.video-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:13px}.video-toolbar [role=status]{flex:1;min-width:190px;font-size:11px;line-height:1.6;color:var(--muted)}
.video-toolbar .btn{font-size:10px;padding:9px 12px}.video-toolbar .text-button{font-size:11px}.guide-video{min-height:202px}
.guide-links{margin-top:13px;margin-bottom:20px}.guide-steps li::before{display:none}.guide-steps li{display:block;margin:9px 0}
.form-cue{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;background:#0b191e;color:#c5d4d8;font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.cue-number{display:grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:#163c36;color:var(--teal);font-size:11px}.form-cue>span:nth-child(2){flex:1}.form-cue>.icon{opacity:.15;flex-shrink:0;width:16px}.form-cue[aria-pressed=true]{background:#0c302a;border-color:#287b69}.form-cue[aria-pressed=true]>.icon{opacity:1;color:var(--teal)}
#cue-progress{margin:0 0 17px}.video-placeholder strong{font:600 24px var(--heading)}
.session-focus{display:flex;align-items:center;gap:17px;background:radial-gradient(ellipse at top left,#123e37,#0b191e 75%);border:1px solid #28574e;border-radius:12px;padding:19px;margin-bottom:25px}
.session-ring{width:84px;height:84px;position:relative;flex:0 0 84px}.session-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.session-ring circle{fill:none;stroke:#25463f;stroke-width:4}.session-ring #session-ring-fill{stroke:var(--teal);stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .55s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 3px #04dfb840)}.session-ring strong{position:absolute;inset:0;display:grid;place-items:center;font:600 26px var(--heading);color:var(--teal)}
.focus-copy{flex:1;min-width:0}.focus-copy .eyebrow{font-size:8px}.focus-copy h3{font:600 25px var(--heading);margin:5px 0}.focus-copy p{font-size:11px;color:#b4cec9;margin:0 0 7px}.focus-copy>span:last-child{font-size:10px;color:#789c94}.session-focus .icon-button{flex-shrink:0}
.rest-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 25px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.rest-controls>span{font-size:9px;letter-spacing:1px;color:var(--muted)}.rest-controls>div{display:flex;gap:6px}.rest-preset{border:1px solid #2c4746;border-radius:5px;background:#111f22;color:#9dbbb7;font-size:10px;padding:6px 9px;cursor:pointer}.rest-preset[aria-pressed=true]{background:#114036;border-color:#24876e;color:var(--teal)}
.rest-timer{position:relative;min-height:57px;gap:12px;padding-bottom:14px}.rest-actions{display:flex;gap:18px}.rest-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:#173a31}.rest-track>span{display:block;height:100%;background:var(--teal);transition:width .25s linear}.set-row{border-radius:6px;transition:background .25s}.set-row.completed{background:#0d30271f}.set-check i{transition:background .2s,transform .2s}.set-check input:checked+i{transform:scale(1.08)}.set-pop{animation:set-success .55s ease-out}
.summary-ring{animation:ring-pop .5s ease-out}.xp-earned{animation:enter-view .45s .2s both}.celebration{position:absolute;inset:80px 0 0;pointer-events:none;overflow:hidden}.celebration i{position:absolute;left:var(--x);top:0;width:6px;height:11px;background:var(--teal);opacity:0;animation:confetti 1.8s ease-out var(--delay) both}.celebration i:nth-child(3n){background:#e8bd65}.celebration i:nth-child(3n+1){background:#71c8f2}
.motion-setting{display:flex;align-items:center;gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);cursor:pointer}.motion-setting strong{font-size:12px}.motion-setting small{display:block;margin-top:7px;font-size:10px;line-height:1.7;color:var(--muted)}.motion-setting input{width:19px;height:19px;accent-color:var(--teal);flex-shrink:0}
.activity-chart button.bar-column{background:none;border:0;cursor:pointer;color:inherit;font:inherit;padding:0 4px;border-radius:5px;position:relative}.activity-chart button.bar-column:hover,.activity-chart button.bar-column[aria-pressed=true]{background:#0acfa811}.activity-chart button.bar-column:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.activity-chart button.bar-column[aria-pressed=true] .bar{box-shadow:0 0 14px #04dfb838}.chart-detail{border-top:1px solid var(--border);padding:13px 20px;color:#9abcb5;font-size:11px;min-height:42px}.bar-value{font-size:10px}
@media(max-width:580px){.library-search{gap:10px;align-items:stretch}.time-filter{min-width:125px;max-width:130px}.search-field>span,.time-filter{font-size:8px;letter-spacing:.8px}.search-field input{padding:11px 10px;min-width:0}.search-field{min-width:0}.time-filter select{font-size:11px;padding:11px 7px}.session-focus{gap:12px;padding:14px}.session-ring{width:65px;height:65px;flex-basis:65px}.session-ring strong{font-size:23px}.focus-copy h3{font-size:23px}.session-focus>.icon-button{width:29px;height:32px}.rest-controls{padding:12px 20px}.rest-controls>span{font-size:8px;letter-spacing:.5px}.rest-preset{padding:6px 7px}.rest-timer{padding-left:20px;padding-right:20px}.form-cue{font-size:12px;gap:9px;padding:10px}.video-toolbar [role=status]{flex-basis:100%;min-width:0}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}