/* Small UI stories use the site's own palette. They are illustrations, not controls. */
.feature-display--motion{background:var(--site-tint);border:1px solid var(--line)}
.feature-motion{position:relative;max-inline-size:456px;min-block-size:235px;margin-inline:auto;padding:12px 0;color:var(--ink);font:500 13px/1.45 Inter,Arial,sans-serif}
.feature-motion .icon{width:16px;height:16px}
.motion-mail,.motion-menu,.motion-theme-panel{border:1px solid var(--line);background:var(--site-panel);border-radius:11px;box-shadow:0 8px 24px rgb(33 17 58 / .09)}
.motion-mail{display:flex;align-items:center;gap:11px;padding:12px 14px;min-inline-size:0}
.motion-avatar{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:8px;color:var(--purple);background:var(--site-tint)}
.motion-copy{display:grid;flex:1;min-inline-size:0;gap:2px;overflow-wrap:anywhere}
.motion-copy>span{color:var(--muted);font-size:12px}
.motion-status{display:inline-flex;align-items:center;gap:5px;max-inline-size:40%;font-size:11px;color:var(--purple);overflow-wrap:anywhere}
.motion-menu{position:relative;width:min(86%,264px);margin:-2px 5% 0 auto;padding:9px}
[dir=rtl] .motion-menu{margin:-2px auto 0 5%}
.motion-menu>strong{display:flex;align-items:center;gap:7px;padding:5px 8px 8px;color:var(--purple)}
.motion-menu>div{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:7px 8px;border-radius:5px;font-size:12px}
.motion-menu time{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.motion-menu .motion-choice{background:var(--site-tint);color:var(--purple)}
.motion-pointer{position:absolute;width:23px;height:23px;pointer-events:none;fill:#f9f6ff;stroke:#563a9c;stroke-width:1.4;filter:drop-shadow(0 2px 2px rgb(30 15 50 / .25));opacity:0;z-index:1}
.motion-menu>.motion-pointer{inset-block-start:55%;inset-inline-start:54%}
.motion-window{display:flex;border:1px solid #4e4260;border-radius:12px;background:#211a2d;color:#f5effd;overflow:hidden;box-shadow:0 8px 24px rgb(33 17 58 / .12)}
.motion-window-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding:13px 10px;background:#563a9c;color:#fff}
.motion-window-main{flex:1;min-inline-size:0;padding:12px 15px}
.motion-window-main>strong{display:block;margin-bottom:6px}
.motion-window-main>div{display:flex;align-items:center;gap:8px;min-inline-size:0;padding:4px 0;font-size:12px}
.motion-window-main>div>i{flex:none;width:8px;height:8px;border-radius:50%;background:#ac84ff}
.motion-window-main>div>span{min-width:0;overflow-wrap:anywhere}
.motion-theme-panel{position:relative;width:min(89%,288px);margin:12px auto 0;padding:11px 12px}
.motion-segment{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;min-height:33px;border-radius:7px;background:var(--site-tint);color:var(--muted)}
.motion-segment>span{display:flex;justify-content:center;align-items:center;gap:5px;padding:5px;line-height:1.2;overflow-wrap:anywhere;text-align:center}
.motion-segment>span:last-child{color:var(--purple)}
.motion-segment>i{position:absolute;z-index:-1;inset:3px 3px 3px 50%;border-radius:5px;background:var(--site-panel);box-shadow:0 1px 4px rgb(33 17 58 / .14);--motion-slide:-100%}
[dir=rtl] .motion-segment>i{inset:3px 50% 3px 3px;--motion-slide:100%}
.motion-swatches{display:flex;justify-content:space-between;gap:6px;margin-top:11px}
.motion-swatches>i{width:clamp(15px,5vw,23px);height:clamp(15px,5vw,23px);border-radius:6px;border:1px solid rgb(0 0 0 / .14);background:#563a9c}
.motion-swatches>i:first-child{outline:1px solid var(--purple);outline-offset:3px}
.motion-swatches>i:nth-child(2){background:#fafafa}
.motion-swatches>i:nth-child(3){background:#2457af}
.motion-swatches>i:nth-child(4){background:#22232a}
.motion-swatches>i:nth-child(5){background:#a6283c}
.motion-swatches>i:nth-child(6){background:#b45221}
.motion-swatches>i:nth-child(7){background:#f6d268}
.motion-theme-panel>.motion-pointer{inset-block-start:23px;inset-inline-start:68%}
.motion-route{max-inline-size:360px;margin:8px auto}
.motion-route-line{width:2px;height:33px;margin-inline-start:30px;background:var(--line);position:relative}
.motion-route-line>i{position:absolute;inset:0;background:var(--purple);transform-origin:top}
.motion-outcome{border-color:var(--purple)}
.motion-outcome .motion-avatar{color:var(--site-on-action);background:var(--purple)}
@media(max-width:480px){
    .feature-motion{font-size:12px;min-block-size:210px}
    .motion-mail{padding:10px;gap:8px}
    .motion-avatar{flex-basis:27px;height:27px}
    .motion-window-rail{padding-inline:8px}
    .motion-segment>span{font-size:11px}
    .motion-swatches{gap:4px}
}
@media(prefers-reduced-motion:no-preference){
    .feature-motion.is-animating .motion-menu{animation:motion-menu-in .55s .4s both}
    .feature-motion.is-animating .motion-choice{animation:motion-highlight 2.6s both}
    .feature-motion.is-animating .motion-snoozed{animation:motion-menu-in .4s 2.05s both}
    .feature-motion.is-animating .motion-pointer{animation:motion-cursor 2.7s both}
    .feature-motion.is-animating .motion-window{animation:motion-dark 2.4s both}
    .feature-motion.is-animating .motion-segment>i{animation:motion-toggle 2.4s both}
    .feature-motion.is-animating .motion-route-line>i{animation:motion-route-fill .6s .5s both}
    .feature-motion.is-animating .motion-outcome{animation:motion-menu-in .52s 1.05s both}
    @keyframes motion-menu-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
    @keyframes motion-highlight{0%,59%{background:transparent;color:inherit}75%,100%{background:var(--site-tint);color:var(--purple)}}
    @keyframes motion-cursor{0%,15%{opacity:0;transform:translate(-24px,26px)}28%{opacity:1}58%,70%{opacity:1;transform:translate(0,0)}64%{transform:scale(.85)}100%{opacity:0;transform:translate(0,0)}}
    @keyframes motion-dark{0%,58%{background:#fff;color:#291e3f;border-color:#d8cce7}76%,100%{background:#211a2d;color:#f5effd;border-color:#4e4260}}
    @keyframes motion-toggle{0%,58%{transform:translateX(var(--motion-slide))}76%,100%{transform:none}}
    @keyframes motion-route-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}