@property --p{syntax:"<number>";inherits:true;initial-value:1}.demo-module__mQMsUq__stage{view-timeline-name:--demo;view-timeline-axis:block;position:relative}.demo-module__mQMsUq__pinned{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100svh;padding:1.5rem 1.25rem;display:flex;position:sticky;top:0}.demo-module__mQMsUq__screen{background:#000;border-radius:2.25rem;width:100%;max-width:24rem;height:min(40rem,100svh - 9rem);font-size:1rem;position:relative;overflow:hidden;box-shadow:0 0 0 1px #ffffff24,0 30px 80px #0009}.demo-module__mQMsUq__beat{--in:-1;--out:2;--k:30;opacity:calc(clamp(0, (var(--p) - var(--in)) * var(--k), 1) * clamp(0, (var(--out) - var(--p)) * var(--k), 1))}.demo-module__mQMsUq__drawer{--in:-1;--out:2;--k:30;--h:0;--on:calc(clamp(0, (var(--p) - var(--in)) * var(--k), 1) * clamp(0, (var(--out) - var(--p)) * var(--k), 1));max-height:calc(var(--on) * var(--h));opacity:var(--on);display:block;overflow:hidden}.demo-module__mQMsUq__lift{translate:0 calc((1 - clamp(0, (var(--p) - var(--in)) * var(--k), 1)) * .6rem)}.demo-module__mQMsUq__tap{--at:2;--down:clamp(0, (var(--p) - (var(--at) - .02)) * 70, 1);--up:clamp(0, ((var(--at) + .012) - var(--p)) * 90, 1);background:color-mix(in srgb, currentColor 22%, transparent);width:2.5rem;height:2.5rem;box-shadow:0 0 0 2px color-mix(in srgb, currentColor 35%, transparent);opacity:calc(var(--down) * var(--up));scale:calc(1.5 - var(--down) * .5);pointer-events:none;border-radius:9999px;margin:-1.25rem 0 0 -1.25rem;position:absolute;top:50%;left:50%}.demo-module__mQMsUq__paper{--tear:7px;color:#14140f;-webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--tear)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tear)) var(--tear) repeat-x;mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--tear)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tear)) var(--tear) repeat-x;background:#fbfbf9}.demo-module__mQMsUq__frame{pointer-events:none;border:3px solid #fffc;border-radius:1.5rem;position:absolute;inset:8% 4%;-webkit-mask:linear-gradient(#000 0 0) 0 0/2.5rem 2.5rem no-repeat,linear-gradient(#000 0 0) 100% 0/2.5rem 2.5rem no-repeat,linear-gradient(#000 0 0) 0 100%/2.5rem 2.5rem no-repeat,linear-gradient(#000 0 0) 100% 100%/2.5rem 2.5rem no-repeat;mask:linear-gradient(#000 0 0) 0 0/2.5rem 2.5rem no-repeat,linear-gradient(#000 0 0) 100% 0/2.5rem 2.5rem no-repeat,linear-gradient(#000 0 0) 0 100%/2.5rem 2.5rem no-repeat,linear-gradient(#000 0 0) 100% 100%/2.5rem 2.5rem no-repeat}.demo-module__mQMsUq__land{--row:0;--from:calc(var(--land-at,0) + var(--row) * .012);opacity:clamp(0, (var(--p) - var(--from)) * 40, 1);translate:0 calc((1 - clamp(0, (var(--p) - var(--from)) * 40, 1)) * 1rem)}@supports (animation-timeline:view()){@media not (prefers-reduced-motion:reduce){.demo-module__mQMsUq__stage{height:500svh}.demo-module__mQMsUq__pinned{height:100svh;animation:linear both demo-module__mQMsUq__progress;animation-timeline:--demo;animation-range:contain}.demo-module__mQMsUq__awayDuringDemo{animation:linear both demo-module__mQMsUq__away;animation-timeline:--demo;animation-range:contain}}}.demo-module__mQMsUq__scope{timeline-scope:--demo}@keyframes demo-module__mQMsUq__away{0%,to{opacity:1;visibility:visible}3%,97%{opacity:0;visibility:hidden}}@keyframes demo-module__mQMsUq__progress{0%{--p:0}to{--p:1}}.demo-module__mQMsUq__row{--row-surface:color-mix(in srgb, var(--island-on) 7%, var(--island-surface));background:var(--row-surface)}.demo-module__mQMsUq__flat{--row-surface:var(--island-surface)}.demo-module__mQMsUq__press{--a1:2;--a2:2;scale:calc(1 - .03 * ( clamp(0, (var(--p) - (var(--a1) - .02)) * 70, 1) * clamp(0, ((var(--a1) + .012) - var(--p)) * 90, 1) + clamp(0, (var(--p) - (var(--a2) - .02)) * 70, 1) * clamp(0, ((var(--a2) + .012) - var(--p)) * 90, 1) ))}