/* Progressive enhancement: content is complete and visible without JavaScript. */
.example .motion-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:12px 5vw;border-bottom:1px solid var(--line,#ddd);font:12px/1.5 var(--sans,Arial,sans-serif);background:var(--paper,#fff);color:var(--ink,#222)}
.example .motion-tools p{margin:0;font:inherit;flex:1;min-width:160px;color:inherit}
.example .motion-tools button{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:8px 14px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:600 11px/1.4 var(--sans,Arial,sans-serif);cursor:pointer;transition:background .2s,box-shadow .2s}
.example .motion-tools button:hover{box-shadow:0 2px 0 currentColor}
.example .motion-tools button:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.example .motion-tools button:active{box-shadow:none}
.example .motion-tools button[disabled]{opacity:.65;cursor:default}
.motion-surface{isolation:isolate}
.motion-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2;opacity:0;mix-blend-mode:screen}
.motion-beam{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 34%,#fff2 42%,#fff9 49%,#fff3 54%,transparent 63%);transform:translateX(-65%)}
.motion-holo .motion-beam{background:linear-gradient(115deg,transparent 25%,#f8b4ff44 35%,#b6e8ff99 42%,#fff9 48%,#ffe5a366 54%,transparent 66%)}
.motion-grain{mix-blend-mode:soft-light;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h120v120H0z'/%3E%3C/svg%3E")}
.motion-grain .motion-beam{background:radial-gradient(ellipse at 25% 20%,#e9c1a8aa,transparent 65%);transform:none}
.motion-vapor .motion-beam{background:linear-gradient(120deg,transparent,#ac60b166,#f3ae8c66,transparent);transform:none}
.motion-flow{position:absolute;inset:0;width:100%!important;height:100%!important;pointer-events:none;color:#368e9d;z-index:1}
.motion-dot-mask{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle,transparent 2px,var(--paper,#fff) 2.6px);background-size:9px 9px;opacity:0}
.motion-liquid{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.motion-liquid path{vector-effect:non-scaling-stroke}
.example .motion-type{display:inline-block;position:relative}
.example .motion-type-clip{display:inline-block;vertical-align:top;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.example .motion-word{display:inline-block}
.motion-section-heading{position:relative}
.motion-rule{display:block;position:absolute;left:0;bottom:-6px;width:clamp(44px,9vw,112px);height:2px;background:currentColor;opacity:.45;margin:0;transform-origin:left center;pointer-events:none}
.motion-scramble{display:inline-block;min-width:3ch;font-variant-numeric:tabular-nums}
.motion-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.example .motion-tools{padding:10px 20px;gap:8px}.example .motion-tools p{font-size:10px;min-width:140px}.example .motion-tools button{min-height:40px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){.motion-light,.motion-dot-mask{display:none!important}.example .motion-tools button{transition:none}.motion-word{transform:none!important;opacity:1!important}}