.motion-showcase{max-width:1420px;margin:auto;padding:90px 28px;scroll-margin-top:100px}.motion-showcase>header{max-width:1000px;margin-bottom:80px}.motion-showcase h2{font-size:clamp(36px,5vw,66px);font-weight:850;line-height:1.05;letter-spacing:-.04em}.motion-showcase>header>p{font-size:16px;color:#b1a8c5;max-width:780px;line-height:1.8;margin:25px 0}.motion-showcase>header nav{display:flex;gap:10px 20px;flex-wrap:wrap}.motion-showcase>header nav a{color:#c2a4ff;font-size:13px;text-decoration:underline;text-underline-offset:4px}.motion-showcase-card{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,2fr);gap:34px;padding:55px 0;border-top:1px solid #ffffff12;align-items:center;scroll-margin-top:100px}.motion-showcase-copy>span{font-size:13px;letter-spacing:.12em;color:#b59acb}.motion-showcase-copy h3{font-size:clamp(24px,3vw,36px);font-weight:750;letter-spacing:-.03em;margin:14px 0}.motion-showcase-copy p{font-size:14px;line-height:1.8;color:#b5acc5}.motion-showcase-copy>a{display:inline-flex;gap:12px;margin-top:25px;color:#d4bbff;font-weight:650;font-size:13px}.motion-demo{min-width:0}.motion-demo-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:10px;color:#aa9db9}.motion-demo-controls>span{margin-right:auto}.motion-demo button{border:1px solid #665077;border-radius:8px;padding:7px 11px;font-size:11px;color:#e6d5fa;background:#21162e}.motion-demo button:focus-visible,.motion-demo-svg [tabindex]:focus-visible{outline:2px solid #79e4cf;outline-offset:3px}.motion-demo-svg{width:100%;min-height:160px;aspect-ratio:16/9}.motion-demo-svg svg{width:100%;height:auto;overflow:visible}.motion-demo-svg [data-demo-action],.motion-demo-svg [data-demo-field]{cursor:pointer;transition:filter .15s}.motion-demo-svg .demo-clicked,.motion-demo-svg [data-demo-action]:hover{filter:brightness(1.45)}.motion-demo-svg .motion-cursor{pointer-events:none;opacity:0}.motion-demo-status{min-height:44px;font-size:12px;line-height:1.6;color:#b4a1c5}.motion-demo-inspector{border:1px solid #4f355f;background:#1c1327;padding:18px;border-radius:14px;display:flex;gap:12px;flex-wrap:wrap}.motion-demo-inspector label{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}.motion-demo-inspector input:not([type=checkbox]){background:#0f0b18;border:1px solid #6d4c86;color:#fff;border-radius:8px;padding:9px;max-width:100%}.motion-demo-inspector ol{flex-basis:100%;list-style:decimal;padding-left:22px}.motion-demo-inspector li{padding:6px}.motion-demo-inspector li button{margin-left:8px}.motion-demo-dialog{width:min(1500px,95vw);max-height:90vh;background:#100b18;color:#f1e8ff;border:1px solid #755193;border-radius:18px;padding:20px;overflow:auto}.motion-demo-dialog::backdrop{background:#030207cf}.motion-demo-dialog h3{font-size:22px;margin:15px 0}.motion-demo-dialog img{width:100%}.motion-demo-dialog p{font-size:13px;color:#b8a6c8}@media(max-width:900px){.motion-showcase-card{grid-template-columns:1fr;gap:25px}.motion-showcase{padding:60px 18px}.motion-showcase>header{margin-bottom:45px}}@media(prefers-reduced-motion:reduce){.motion-showcase-card{opacity:1!important;transform:none!important}.motion-demo-svg .motion-cursor{display:none}}.motion-demo-dialog{position:fixed;inset:0;margin:auto;width:min(1440px,calc(100vw - 32px));height:min(940px,calc(100dvh - 32px));max-width:none;max-height:none;padding:0;overflow:hidden;box-sizing:border-box}.motion-demo-dialog:not([open]){display:none}.motion-demo-dialog[open]{display:flex;flex-direction:column}.motion-demo-dialog-heading{display:flex;align-items:center;justify-content:space-between;flex:none;gap:16px;padding:16px 20px;border-bottom:1px solid #ffffff16;background:#191020}.motion-demo-dialog-heading h3{margin:0;font-size:20px;font-weight:700;line-height:1.3}.motion-demo-dialog-heading button{flex:none;border:1px solid #775889;border-radius:9px;background:#32203f;color:#eee0f9;padding:9px 12px;font-size:12px;cursor:pointer}.motion-demo-dialog-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px;scrollbar-width:thin}.motion-demo-dialog .motion-demo-svg{height:min(calc((100vw - 80px)*.5625),calc(100dvh - 250px),660px);min-height:0;aspect-ratio:auto}.motion-demo-dialog .motion-demo-svg svg{display:block;width:100%;height:100%;overflow:hidden}.motion-demo-dialog .motion-demo-status{margin:12px 0;min-height:0}.motion-demo-dialog .motion-demo-inspector{margin-top:14px}@media(max-width:600px){.motion-demo-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:12px}.motion-demo-dialog-heading{gap:10px;padding:13px}.motion-demo-dialog-heading h3{font-size:16px}.motion-demo-dialog-body{padding:12px}.motion-demo-dialog .motion-demo-svg{height:min(calc((100vw - 40px)*.5625),calc(100dvh - 230px))}}