.motion-examples{--mp-bg:#19121f;--mp-surface:#21172a;--mp-text:#eee2f7;--mp-muted:#8d729e;--mp-line:#b58bc019;--mp-accent:#c6a2ef;color:var(--mp-text)}.motion-examples[data-appearance=light]{--mp-bg:#f6f2f9;--mp-surface:#fff;--mp-text:#30213b;--mp-muted:#8b739c;--mp-line:#693a871b}.mp-controls{border-top:1px solid #ffffff0d;justify-content:space-between;align-items:center;gap:25px;padding:21px 0;display:flex}.mp-controls>div:first-child{align-items:center;gap:14px;display:flex}.mp-controls>div:first-child>button{color:#b894d0;background:#c6a2ef12;border:1px solid #c6a2ef16;border-radius:8px;padding:10px 13px;font-size:10px}.mp-controls>div:first-child>span{color:#a18ab2;font-size:8px}.mp-settings{align-items:center;gap:20px;display:flex}.mp-settings>label{color:#8c709c;align-items:center;gap:8px;font-size:8px;display:flex}.mp-settings select{color:#c7a8dd;background:#201629;border:1px solid #ffffff0b;border-radius:5px;padding:5px;font:9px Arial,sans-serif}.mp-swatches{gap:8px;display:flex}.mp-swatches button{cursor:pointer;border:0;border-radius:50%;width:12px;height:12px;padding:0}.mp-swatches button[aria-pressed=true]{outline-offset:3px;outline:1px solid #a38aad}.mp-theme{background:#21162b;border:1px solid #ffffff08;border-radius:7px;gap:3px;padding:3px;display:flex}.mp-theme button{color:#8e6ba3;text-transform:capitalize;background:0 0;border:0;border-radius:5px;padding:6px 9px;font-size:8px}.mp-theme button.active{color:#d9c1ea;background:#ffffff0b}.mp-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 16px;display:grid}.mp-demo{background:var(--mp-bg);border:1px solid var(--mp-line);border-radius:14px;grid-column:span 4;min-width:0;overflow:hidden}.mp-demo-text-loop,.mp-demo-transition-panel{grid-column:span 8}.mp-demo-top{border-bottom:1px solid var(--mp-line);height:39px;color:var(--mp-muted);letter-spacing:.7px;justify-content:space-between;align-items:center;padding:0 19px;font:6px monospace;display:flex}.mp-demo-top button{color:var(--mp-muted);cursor:pointer;background:0 0;border:0;padding:4px;font:10px monospace}.mp-demo-stage{justify-content:center;align-items:center;min-height:275px;padding:30px;display:flex;position:relative}.mp-demo-caption{border-top:1px solid var(--mp-line);padding:18px 20px 20px;position:relative}.mp-demo-caption h2{letter-spacing:-.3px;color:var(--mp-text);margin:0 0 7px;font:500 15px/1.4 Arial,sans-serif}.mp-demo-caption p{color:var(--mp-muted);max-width:82%;margin:0;font-size:9px;line-height:1.8}.mp-demo-caption>button{color:var(--mp-muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:8px;position:absolute;top:22px;right:18px}.mp-text-scene{width:100%;padding:15px 10px}.mp-scene-kicker{letter-spacing:1.1px;color:var(--mp-muted);font:7px monospace}.mp-text-scene>div{letter-spacing:-2px;white-space:nowrap;margin:21px 0;font-size:clamp(29px,3.2vw,49px);font-weight:450;line-height:1.2}.mp-loop-word{color:var(--mp-accent);vertical-align:bottom;font-family:Georgia,serif;font-style:italic}.mp-text-scene>p,.mp-background-scene>p,.mp-magnetic-scene>p{color:var(--mp-muted);margin:0;font-size:10px;line-height:1.8}.mp-accessible{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.mp-background-scene{text-align:center;width:100%}.mp-segmented{background:var(--mp-surface);border:1px solid var(--mp-line);border-radius:10px;justify-content:center;gap:3px;width:fit-content;margin:auto;padding:5px;display:flex}.mp-segmented button{color:var(--mp-muted);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:10px 13px;font-size:10px;display:inline-flex;position:relative}.mp-segmented button[aria-pressed=true]{color:var(--mp-text)}.mp-active-background{background:color-mix(in srgb,var(--mp-accent) 20%,transparent);border:1px solid color-mix(in srgb,var(--mp-accent) 12%,transparent);border-radius:7px}.mp-selection-symbol{color:var(--mp-accent);margin:24px 0 21px;font-size:58px;line-height:1}.mp-background-scene>p{font-size:9px}.mp-panel-scene{width:100%;max-width:500px}.mp-panel-steps{gap:8px;margin-bottom:25px;display:flex}.mp-panel-steps button{color:var(--mp-muted);border:1px solid var(--mp-line);cursor:pointer;background:0 0;border-radius:6px;padding:7px 11px;font:8px monospace}.mp-panel-steps button[aria-pressed=true]{color:var(--mp-text);background:color-mix(in srgb,var(--mp-accent) 10%,transparent);border-color:color-mix(in srgb,var(--mp-accent) 25%,transparent)}.mp-panel{min-height:95px;padding-right:90px;position:relative}.mp-panel>span{color:var(--mp-accent);font-size:70px;font-weight:300;line-height:1;position:absolute;top:0;right:0}.mp-panel h3{letter-spacing:-.9px;margin:0 0 13px;font-size:25px;font-weight:450;line-height:1.25}.mp-panel p{color:var(--mp-muted);max-width:300px;margin:0;font-size:11px;line-height:1.9}.mp-trail-card{border:1px solid var(--mp-line);background:var(--mp-surface);isolation:isolate;border-radius:17px;width:100%;max-width:250px;padding:25px;position:relative;overflow:hidden}.mp-trail-light{filter:blur(5px);opacity:.9;background:var(--mp-accent)!important}.mp-trail-icon{color:var(--mp-accent);margin-bottom:22px;font-size:37px;line-height:1;display:block}.mp-trail-card>.mp-scene-kicker{letter-spacing:.8px;font-size:5px}.mp-trail-card h3{letter-spacing:-.8px;margin:11px 0 20px;font-size:23px;font-weight:450;line-height:1.15}.mp-trail-footer{color:var(--mp-muted);border-top:1px solid var(--mp-line);justify-content:space-between;align-items:center;gap:20px;padding-top:15px;font-size:7px;display:flex}.mp-trail-footer>span{color:var(--mp-accent);font-size:13px}.mp-demo-border-trail .mp-demo-stage{padding:22px}.mp-magnetic-scene{text-align:center;flex-direction:column;align-items:center;gap:32px;display:flex}.mp-magnetic-button{border:1px solid color-mix(in srgb,var(--mp-accent) 40%,transparent);background:var(--mp-accent);color:#302039;cursor:pointer;border-radius:40px;align-items:center;gap:25px;padding:17px 23px;font:500 12px Arial,sans-serif;display:flex;box-shadow:0 8px 30px #0001}.mp-magnetic-button>span{font-size:18px}.mp-magnetic-scene>p{font-size:8px}.mp-group-scene{width:100%;max-width:290px}.mp-group-items{flex-direction:column;gap:8px;display:flex}.mp-group-item{background:var(--mp-surface);border:1px solid var(--mp-line);border-radius:8px;align-items:center;gap:15px;padding:11px 13px;font-size:10px;display:flex}.mp-group-item>span{color:var(--mp-muted);font:7px monospace}.mp-group-item>i{color:var(--mp-accent);margin-left:auto;font-size:12px;font-style:normal}.mp-replay{color:var(--mp-muted);cursor:pointer;background:0 0;border:0;margin:20px auto 0;padding:2px;font-size:9px;display:block}.mp-motion-note{color:#8b6b9d;border:1px solid #ffffff0b;border-radius:9px;margin-top:25px;padding:18px 20px;font-size:9px;line-height:1.9}.motion-examples button:focus-visible,.motion-examples select:focus-visible{outline:2px solid var(--mp-accent);outline-offset:4px}@media (max-width:1000px){.mp-demo,.mp-demo-text-loop,.mp-demo-transition-panel{grid-column:span 6}.mp-text-scene>div{letter-spacing:-1.5px;font-size:32px}.mp-panel{padding-right:60px}.mp-panel>span{font-size:55px}.mp-panel h3{font-size:23px}.mp-panel p{font-size:10px}}@media (max-width:760px){.mp-controls{flex-wrap:wrap;align-items:flex-start;gap:15px;padding:20px 0}.mp-controls>div:first-child{flex-wrap:wrap;gap:8px}.mp-controls>div:first-child>button{padding:9px 11px;font-size:9px}.mp-controls>div:first-child>span{font-size:7px}.mp-settings{justify-content:space-between;gap:15px;width:100%}.mp-settings>label{gap:7px;font-size:7px}.mp-settings select{font-size:8px}.mp-theme button{padding:6px 8px;font-size:7px}.mp-swatches{gap:7px}.mp-swatches button{width:11px;height:11px}.mp-grid{gap:16px}.mp-grid>.mp-demo{grid-column:span 12}.mp-demo-stage{min-height:250px;padding:25px}.mp-demo-text-loop .mp-demo-stage{min-height:225px}.mp-text-scene{padding:0}.mp-text-scene>div{letter-spacing:-1.5px;margin:20px 0;font-size:clamp(26px,7vw,38px)}.mp-text-scene>p{font-size:9px}.mp-scene-kicker{font-size:6px}.mp-demo-caption{padding:17px 18px}.mp-demo-caption h2{font-size:14px}.mp-demo-caption p{font-size:8px}.mp-demo-caption>button{font-size:7px;top:21px;right:16px}.mp-panel h3{font-size:24px}.mp-panel p{font-size:10px}.mp-trail-card{max-width:260px}.mp-demo-top{padding:0 17px;font-size:5px}.mp-motion-note{padding:15px 17px;font-size:8px}.mp-demo-magnetic .mp-demo-stage{min-height:245px}.mp-magnetic-scene>p{font-size:9px}.mp-magnetic-button{gap:22px;font-size:11px}}@media (prefers-reduced-motion:reduce){.motion-examples *{transition:none!important;animation:none!important}}