.phn{--phn-rim-hi:#8a8b90;--phn-rim:#4a4b50;--phn-rim-lo:#222326;--phn-edge:#ffffff47;--phn-sheen:#ffffff0f;--phn-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");--phn-ratio:71.5 / 147.6;--phn-radius:18.5cqw;--phn-rim-width:1.7cqw;--phn-bezel:2.6cqw;--phn-depth:11cqw;transform-style:preserve-3d;position:relative;container-type:inline-size}html:not(.dark) .phn{--phn-rim-hi:#f6f6f8;--phn-rim:#d3d4d8;--phn-rim-lo:#a6a8ae;--phn-edge:#ffffffe6;--phn-sheen:#ffffff59}.phn[data-variant=android]{--phn-ratio:72 / 152;--phn-radius:12.5cqw;--phn-rim-width:1.4cqw;--phn-bezel:1.9cqw;--phn-depth:10.5cqw}.phn-body{aspect-ratio:var(--phn-ratio);padding:var(--phn-rim-width);border-radius:var(--phn-radius);background:var(--phn-grain), linear-gradient(90deg, #0000004d, transparent 10%, transparent 90%, #0000004d), linear-gradient(160deg, var(--phn-rim-hi), var(--phn-rim) 30%, var(--phn-rim-lo));background-blend-mode:overlay, normal, normal;box-shadow:inset 0 .35cqw 0 var(--phn-edge), inset 0 -.25cqw 0 #00000059, 0 0 0 .2cqw #00000059, 0 10cqw 18cqw -6cqw #0000008c;position:relative}.phn-bezel{height:100%;padding:var(--phn-bezel);border-radius:calc(var(--phn-radius) - var(--phn-rim-width));background:#050506;position:relative;box-shadow:inset 0 0 0 .25cqw #ffffff0f}.phn-screen{border-radius:calc(var(--phn-radius) - var(--phn-rim-width) - var(--phn-bezel));background:var(--background);height:100%;position:relative;overflow:hidden}.phn-screen:after{content:"";border-radius:inherit;background:linear-gradient(180deg, #ffffff0f, transparent 3%), linear-gradient(125deg, var(--phn-sheen) 0%, transparent 32%, transparent 62%, #ffffff08 70%, transparent 78%);pointer-events:none;position:absolute;inset:0}.phn-island{top:calc(var(--phn-bezel) + 2.8cqw);z-index:2;background:#000;border-radius:999px;width:30cqw;height:8.6cqw;position:absolute;left:50%;translate:-50%}.phn-hole{top:calc(var(--phn-bezel) + 2.6cqw);z-index:2;background:radial-gradient(circle at 40% 35%,#1b2433 0 30%,#000 45%);border-radius:50%;width:4.6cqw;height:4.6cqw;position:absolute;left:50%;translate:-50%}.phn-button{background:linear-gradient(90deg, var(--phn-rim-lo), var(--phn-rim-hi) 45%, var(--phn-rim-lo));border-radius:.6cqw;width:1.1cqw;position:absolute}.phn-button[data-side=left]{left:-.8cqw}.phn-button[data-side=right]{right:-.8cqw}.phn-side{top:var(--phn-radius);bottom:var(--phn-radius);width:var(--phn-depth);background:var(--phn-grain), linear-gradient(90deg, var(--phn-rim-hi), var(--phn-rim) 50%, var(--phn-rim-lo));background-blend-mode:overlay, normal;position:absolute}.phn-side[data-side=left]{transform-origin:100%;right:100%;rotate:y -90deg}.phn-side[data-side=right]{transform-origin:0;left:100%;rotate:y 90deg}.mstill{--m-bg:#f4f4f8;--m-el:#fff;--m-sel:#eaebf0;--m-text:#070711;--m-sec:#666;letter-spacing:-.01em;width:100%;height:100%}html.dark .mstill{--m-bg:#070811;--m-el:#0d0f18;--m-sel:#1f2233;--m-text:#e8eaed;--m-sec:#9fa3ab}