/* Only explicitly chosen alternatives override the original motion. */
html[data-motion-style=soft] body.ui-motion-v2 .page{animation:personal-soft 360ms ease-out backwards!important}
html[data-motion-style=slide] body.ui-motion-v2 .page{animation:personal-soft 240ms ease-out backwards!important}
/* Headings and menu entries are animated by the shared, previewable motion engine. */
html[data-motion-style=minimal] body.ui-motion-v2 .page{animation:personal-soft 120ms ease-out backwards!important}
html[data-motion-style=minimal] body.ui-motion-v2 .menu-card:hover,
html[data-motion-style=minimal] body.ui-motion-v2 .menu-icon{translate:none!important;rotate:none!important}
@keyframes personal-soft{from{opacity:.72}to{opacity:1}}
@keyframes personal-slide{from{opacity:.3;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes personal-cascade{from{opacity:.3;translate:0 5px}to{opacity:1;translate:0 0}}
.app-startup[data-motion-variant=soft] .app-startup-content{animation:personal-soft 380ms ease-out backwards}
.app-startup[data-motion-variant=slide] .app-startup-content{animation:personal-slide 440ms cubic-bezier(.2,.8,.2,1) backwards}
.app-startup[data-motion-variant=cascade] .app-startup-content > *{animation:personal-cascade 360ms ease-out backwards}
.app-startup[data-motion-variant=cascade] .app-startup-content > :nth-child(2){animation-delay:60ms}
.app-startup[data-motion-variant=cascade] .app-startup-content > :nth-child(3){animation-delay:120ms}
.app-startup[data-motion-variant=cascade] .app-startup-content > :nth-child(4){animation-delay:180ms}
.app-startup[data-motion-variant=minimal] .app-startup-content{gap:12px}
.app-startup[data-motion-variant=minimal] .app-startup-content img{display:none}
.app-startup[data-motion-variant=minimal] .app-startup-progress span{animation:none;transform:scaleX(1)}
.header-animation-dialog .animation-options{display:grid;gap:8px;padding:14px 16px;overflow:auto;min-height:0;overscroll-behavior:contain}
.animation-option{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;min-height:70px;padding:6px 8px;gap:8px}
.animation-option:has(input:checked){border-color:var(--primary);background:var(--theme-selected,#eef5fb)}
.animation-option label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;font-size:13px;font-weight:600}
.animation-option input{width:16px;height:16px;flex:0 0 16px;margin:0}
.animation-option small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}
.animation-sample{width:64px;height:44px;flex:0 0 64px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:5px;background:var(--bg);overflow:hidden}
.animation-sample i{width:10px;height:22px;border-radius:2px;background:#438c7e}
.animation-sample i:nth-child(2){background:#6b98bb;height:30px}
.animation-sample i:nth-child(3){background:#ba9461;height:16px}
.sample-classic{background:#173347}
.sample-classic i{transform:skewY(-10deg)}
.sample-soft i{border-radius:5px}
.sample-slide i{transform:translateX(4px)}
.sample-cascade i:nth-child(2){transform:translateY(-3px)}
.sample-minimal i{height:3px!important}
.animation-preview-button{color:var(--text);flex:0 0 36px;width:36px;height:36px;border:0;background:transparent;border-radius:5px;cursor:pointer;display:grid;place-items:center;padding:8px}
.animation-preview-button:hover{background:var(--bg)}
.header-animation-dialog :is(button,input):focus-visible,.motion-preview-dialog button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
body .motion-preview-dialog{position:fixed;inset:0;width:min(720px,calc(100vw - 24px));max-width:100%;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid var(--line);border-radius:8px;overflow:auto;background:var(--surface);color:var(--text)}
.motion-preview-dialog::backdrop{background:#11182190}
.motion-preview-dialog .app-intro{position:absolute;inset:0;display:grid;opacity:1;transform:none;pointer-events:none}
.motion-preview-dialog :is(.app-intro,.app-startup).is-leaving{opacity:0;transform:none;pointer-events:none;transition:opacity 240ms ease}
.motion-preview-dialog .app-startup{display:grid;position:absolute;inset:0;place-items:center;padding:24px;background:var(--surface);color:var(--text)}
.motion-preview-dialog .app-startup-content p{color:var(--muted)}
.motion-preview-dialog .motion-demo-close{position:absolute;z-index:10001;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:6px}
.motion-demo-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line);gap:12px}
.motion-demo-head h2{font-size:18px;margin:0}.motion-demo-head button{position:static!important;flex-shrink:0}
.motion-demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px}
.motion-demo-tabs{display:flex;gap:4px}.motion-demo-tabs button{padding:8px 12px;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--muted);cursor:pointer;font:inherit;font-size:13px}
.motion-demo-tabs button[aria-pressed=true]{background:var(--theme-selected,#e7f0f7);color:var(--text);border-color:var(--primary)}
.motion-demo-scene{position:relative;height:330px;overflow:hidden;border-top:1px solid var(--line);background:var(--bg)}
.motion-demo-workspace{padding:24px;display:grid;gap:12px}.motion-demo-workspace h3{margin:0 0 4px;font-size:19px;color:var(--text)}
.motion-demo-row{padding:14px 0;display:flex;gap:16px;justify-content:space-between;border-bottom:1px solid var(--line);color:var(--text);font-size:14px}
.motion-demo-row span{font-size:12px;color:var(--primary)}.motion-demo-state{margin:8px 16px;color:var(--muted);font-size:12px}
.motion-preview-dialog .app-intro{transform-origin:top left}
@media(max-width:540px){.motion-demo-workspace{padding:18px}.motion-demo-scene{height:310px}.motion-demo-row{display:grid;gap:5px}}
html.app-intro-arrival body.ui-motion-v2 .page,html.app-restored-page body.ui-motion-v2 .page,
html.app-motion-disabled body.ui-motion-v2 .page,html body.ui-motion-v2.ui-motion-off .page{animation:none!important}
@media(prefers-reduced-motion:reduce){
  html[data-motion-style] body.ui-motion-v2 .page,
  html[data-motion-style] .page > h1,.app-startup .app-startup-content,.app-startup .app-startup-content > *{animation:none!important}
}
@media print{.header-animation-dialog,.motion-preview-dialog{display:none!important}}