.phone{--screen-ratio: 2.168;--phone-max-w: 76vw;--screen-h: min( calc(var(--phone-room, 70vh) / (1 + .072 / var(--screen-ratio))), calc(var(--phone-max-w) / 1.072 * var(--screen-ratio)) );--screen-w: calc(var(--screen-h) / var(--screen-ratio));--radius: calc(var(--screen-w) * .14);--rail: calc(var(--screen-w) * .036);--btn: calc(var(--screen-w) * .011)}.phone-body{position:relative;isolation:isolate;padding:var(--rail);border-radius:calc(var(--radius) + var(--rail));background:linear-gradient(145deg,#e3e3e1,#8d8e91 12%,#f4f4f2 26%,#74757a 44%,#d5d6d3 58%,#6f7074 74%,#c8c9c6 88%,#ecece9);box-shadow:inset 0 0 0 1px #ffffff73,inset 0 0 2px 1px #00000040,0 1px 2px #0000004d,0 28px 56px -22px #00000080}.phone-bezel{position:absolute;inset:calc(var(--rail) - 4px);border-radius:calc(var(--radius) + 4px);background:#08080a}.phone-screen{position:relative;z-index:1;width:var(--screen-w);height:var(--screen-h);border-radius:var(--radius);overflow:hidden;background:#000}.phone-island{position:absolute;z-index:2;top:calc(var(--rail) + var(--screen-w) * .038);left:50%;transform:translate(-50%);width:27%;height:calc(var(--screen-w) * .088);border-radius:999px;background:#08080a;pointer-events:none}.phone-glass{position:absolute;z-index:3;inset:var(--rail);border-radius:var(--radius);pointer-events:none;background:linear-gradient(112deg,#ffffff24,#ffffff0d,#fff0 32%)}.phone-btn{position:absolute;width:var(--btn);border-radius:1px;background:linear-gradient(180deg,#8e8f92,#cfd0cd 40%,#7c7d80);pointer-events:none}.phone-btn-power{right:calc(-1 * var(--btn));top:27%;height:11%}.phone-btn-action{left:calc(-1 * var(--btn));top:17%;height:5%}.phone-btn-up{left:calc(-1 * var(--btn));top:26%;height:7.5%}.phone-btn-down{left:calc(-1 * var(--btn));top:36%;height:7.5%}