.iphone [data-button=action]{--btn-top:.17;--btn-bottom:.215}.iphone [data-button=volume-up]{--btn-top:.26;--btn-bottom:.325}.iphone [data-button=volume-down]{--btn-top:.36;--btn-bottom:.425}.iphone [data-button=side]{--btn-top:.27;--btn-bottom:.385}.iphone [data-button=camera]{--btn-top:.55;--btn-bottom:.62}.iphone-button{--btn-in:1;--btn-out:270deg;z-index:-1;top:calc(var(--btn-top) * 100%);width:calc(5.5 * var(--u));height:calc((var(--btn-bottom) - var(--btn-top)) * 100%);border-radius:calc(1.25 * var(--u)) / calc(3 * var(--u));background:linear-gradient(180deg, #ffffff1a, transparent 14%, transparent 86%, #00000073), linear-gradient(var(--btn-out), #2c2c30, #151517 55%, #0c0c0d);cursor:pointer;touch-action:none;border:0;padding:0;transition:translate .2s cubic-bezier(.22,.61,.36,1),filter .2s;position:absolute;box-shadow:inset 0 0 0 .5px #ffffff29,0 0 0 .5px #0009}.iphone-button:before{content:"";top:calc(-6 * var(--u));bottom:calc(-6 * var(--u));width:calc(14 * var(--u));position:absolute}.iphone-button:hover{filter:brightness(1.18)}.iphone-button[data-held]{translate:calc(var(--btn-in) * .75 * var(--u)) 0;filter:brightness(.92);transition:translate 70ms ease-out,filter 70ms ease-out}.iphone-button:focus-visible{outline-offset:2px;outline:1px solid #fff6}.iphone-button:is([data-button=action],[data-button=volume-up],[data-button=volume-down]){left:calc(-3.75 * var(--u))}.iphone-button:is([data-button=action],[data-button=volume-up],[data-button=volume-down]):before{right:0}.iphone-button:is([data-button=side],[data-button=camera]){--btn-in:-1;--btn-out:90deg;right:calc(-3.75 * var(--u))}.iphone-button:is([data-button=side],[data-button=camera]):before{left:0}.iphone-button[data-button=camera]{background:linear-gradient(180deg, #ffffff14, transparent 16%, transparent 84%, #00000073), linear-gradient(var(--btn-out), #28292e, #131316 55%, #0a0a0c);box-shadow:inset 0 0 0 .5px #ffffff21,0 0 0 .5px #0009}.iphone-press{--press-depth:calc(4 * var(--u));--press-slant:calc(10 * var(--u));--press-phone-h:calc(100% + 2 * var(--phone-bezel));top:calc(var(--btn-top) * var(--press-phone-h) - var(--phone-bezel) - var(--press-slant));width:var(--press-depth);height:calc((var(--btn-bottom) - var(--btn-top)) * var(--press-phone-h) + 2 * var(--press-slant));background:var(--phone-bg);pointer-events:none;transition:scale .42s cubic-bezier(.22,.61,.36,1);position:absolute;scale:0 1}.iphone-press[data-held]{transition:scale .16s cubic-bezier(.3,1.35,.5,1);scale:1}.iphone-press:is([data-button=action],[data-button=volume-up],[data-button=volume-down]){transform-origin:0;border-radius:0 999px 999px 0;left:0}.iphone-press:is([data-button=side],[data-button=camera]){transform-origin:100%;border-radius:999px 0 0 999px;right:0}@supports (clip-path:shape(from 0 0, line to 1px 1px)){.iphone-press{--s:var(--press-slant);--h:calc(var(--press-slant) / 2);border-radius:0}.iphone-press:is([data-button=action],[data-button=volume-up],[data-button=volume-down]){clip-path:shape(from 0 0, curve to 100% var(--s) with 0 var(--h) / 100% var(--h), vline to calc(100% - var(--s)), curve to 0 100% with 100% calc(100% - var(--h)) / 0 calc(100% - var(--h)), close)}.iphone-press:is([data-button=side],[data-button=camera]){clip-path:shape(from 100% 0, curve to 0 var(--s) with 100% var(--h) / 0 var(--h), vline to calc(100% - var(--s)), curve to 100% 100% with 0 calc(100% - var(--h)) / 100% calc(100% - var(--h)), close)}}@media (hover:hover) and (min-width:721px){.iphone-button:after{content:attr(aria-label);background:var(--color-bg-raised,#1c1c1ee6);border:1px solid var(--color-border,#ffffff14);color:var(--color-text-1,#fff);white-space:nowrap;pointer-events:none;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:500;line-height:1.4;animation:.16s ease-out both iphone-button-label-in;display:none;position:absolute;top:50%;translate:0 -50%}.iphone-button:is(:hover,:focus-visible):after{display:block}.iphone-button:is([data-button=action],[data-button=volume-up],[data-button=volume-down]):after{right:calc(100% + 18px)}.iphone-button:is([data-button=side],[data-button=camera]):after{left:calc(100% + 18px)}}@keyframes iphone-button-label-in{0%{opacity:0;filter:blur(2px)}}@media (prefers-reduced-motion:reduce){.iphone-button{transition:none}.iphone-press,.iphone-press[data-held]{transition-duration:1ms}}