/* GENERATED by src/gen_device.py : do not edit by hand. Original titanium-style device (no Apple artwork). */
.dev-wrap{--s:.9;position:relative;width:calc(428px*var(--s));height:calc(900px*var(--s));flex:none}
.dev{position:absolute;left:0;top:0;width:428px;height:900px;transform-origin:0 0;transform:scale(var(--s));contain:layout style;--ang:100deg}
.dev-tilt{position:absolute;inset:0;transform-style:flat;will-change:transform}/* flat, not preserve-3d: preserve-3d gives every frame layer its own composited, clip-path-masked surface and doubled software frame time */
/* grounding: lit glow, ambient bounce, contact shadow */
.dev-glow{position:absolute;inset:-120px;border-radius:200px;background:radial-gradient(closest-side,rgba(76,140,255,.38),rgba(76,140,255,.12) 55%,transparent 75%);opacity:var(--lit,0);pointer-events:none}
.dev-shadow{position:absolute;inset:0;pointer-events:none}
.dev-shadow i{position:absolute;left:50%;border-radius:50%;pointer-events:none}
.dev-shadow i:nth-child(1){width:118%;height:90px;bottom:-62px;margin-left:-59%;background:radial-gradient(closest-side,rgba(34,60,120,.36),rgba(34,60,120,.12) 60%,rgba(34,60,120,0))}
.dev-shadow i:nth-child(2){width:74%;height:26px;bottom:-22px;margin-left:-37%;background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,0))}
/* titanium frame: edge light, brushed band, chamfer, black inner bezel, lip */
.dev-edge,.dev-body,.dev-chamfer,.dev-bezel,.dev-lip{position:absolute;pointer-events:none}
.dev-edge{inset:0;clip-path:path('M120 0L308 0c42.004 0 63.006 0 79.049 8.175a75 75 0 0 1 32.776 32.776c8.175 16.043 8.175 37.045 8.175 79.049L428 780c0 42.004 0 63.006 -8.175 79.049a75 75 0 0 1 -32.776 32.776c-16.043 8.175 -37.045 8.175 -79.049 8.175L120 900c-42.004 0 -63.006 0 -79.049 -8.175a75 75 0 0 1 -32.776 -32.776c-8.175 -16.043 -8.175 -37.045 -8.175 -79.049L0 120c0 -42.004 0 -63.006 8.175 -79.049a75 75 0 0 1 32.776 -32.776c16.043 -8.175 37.045 -8.175 79.049 -8.175Z');background:conic-gradient(from calc(var(--ang) + 20deg) at 50% 50%,rgba(255,255,255,.62),rgba(255,255,255,.12) 70deg,rgba(255,255,255,.04) 150deg,rgba(255,255,255,.34) 230deg,rgba(255,255,255,.08) 300deg,rgba(255,255,255,.62))}
.dev-body{inset:0;clip-path:path('M119.46 0.9L308.54 0.9c41.5 0 62.25 0 78.101 8.076a74.1 74.1 0 0 1 32.383 32.383c8.076 15.851 8.076 36.601 8.076 78.101L427.1 780.54c0 41.5 0 62.25 -8.076 78.101a74.1 74.1 0 0 1 -32.383 32.383c-15.851 8.076 -36.601 8.076 -78.101 8.076L119.46 899.1c-41.5 0 -62.25 0 -78.101 -8.076a74.1 74.1 0 0 1 -32.383 -32.383c-8.076 -15.851 -8.076 -36.601 -8.076 -78.101L0.9 119.46c0 -41.5 0 -62.25 8.076 -78.101a74.1 74.1 0 0 1 32.383 -32.383c15.851 -8.076 36.601 -8.076 78.101 -8.076Z')}
.dev-body{background:
 linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 6%,rgba(0,0,0,0) 94%,rgba(0,0,0,.22)),
 conic-gradient(from var(--ang) at 50% 50%,#a4a7ae 0deg,#eceef2 16deg,#9a9da5 42deg,#585a60 84deg,#34363a 134deg,#6a6d74 186deg,#d6d9de 212deg,#8a8d94 240deg,#45474c 290deg,#8c8f96 330deg,#a4a7ae 360deg)}
.dev-chamfer{inset:0;clip-path:path('M117.48 4.2L310.52 4.2c39.652 0 59.478 0 74.623 7.717a70.8 70.8 0 0 1 30.941 30.941c7.717 15.145 7.717 34.971 7.717 74.623L423.8 782.52c0 39.652 0 59.478 -7.717 74.623a70.8 70.8 0 0 1 -30.941 30.941c-15.145 7.717 -34.971 7.717 -74.623 7.717L117.48 895.8c-39.652 0 -59.478 0 -74.623 -7.717a70.8 70.8 0 0 1 -30.941 -30.941c-7.717 -15.145 -7.717 -34.971 -7.717 -74.623L4.2 117.48c0 -39.652 0 -59.478 7.717 -74.623a70.8 70.8 0 0 1 30.941 -30.941c15.145 -7.717 34.971 -7.717 74.623 -7.717Z');background:linear-gradient(135deg,#0d0e10,#2a2b2f 40%,#08090a 60%,#1c1d20)}
.dev-bezel{inset:0;clip-path:path('M116.88 5.2L311.12 5.2c39.092 0 58.637 0 73.569 7.608a69.8 69.8 0 0 1 30.504 30.504c7.608 14.931 7.608 34.477 7.608 73.569L422.8 783.12c0 39.092 0 58.637 -7.608 73.569a69.8 69.8 0 0 1 -30.504 30.504c-14.931 7.608 -34.477 7.608 -73.569 7.608L116.88 894.8c-39.092 0 -58.637 0 -73.569 -7.608a69.8 69.8 0 0 1 -30.504 -30.504c-7.608 -14.931 -7.608 -34.477 -7.608 -73.569L5.2 116.88c0 -39.092 0 -58.637 7.608 -73.569a69.8 69.8 0 0 1 30.504 -30.504c14.931 -7.608 34.477 -7.608 73.569 -7.608Z');background:#000}
.dev-lip{inset:0;clip-path:path('M112.8 12L315.2 12c35.283 0 52.925 0 66.401 6.867a63 63 0 0 1 27.532 27.532c6.867 13.476 6.867 31.118 6.867 66.401L416 787.2c0 35.283 0 52.925 -6.867 66.401a63 63 0 0 1 -27.532 27.532c-13.476 6.867 -31.118 6.867 -66.401 6.867L112.8 888c-35.283 0 -52.925 0 -66.401 -6.867a63 63 0 0 1 -27.532 -27.532c-6.867 -13.476 -6.867 -31.118 -6.867 -66.401L12 112.8c0 -35.283 0 -52.925 6.867 -66.401a63 63 0 0 1 27.532 -27.532c13.476 -6.867 31.118 -6.867 66.401 -6.867Z');background:linear-gradient(160deg,#1c1d20,#0a0a0b 50%,#17181a)}
/* antenna bands: thin slits across the titanium on the long sides */
.dev-ant{position:absolute;width:5.2px;height:1.5px;background:#0a0b0d;box-shadow:0 1.5px 0 rgba(255,255,255,.22);pointer-events:none}
.dev-ant.l{left:0}.dev-ant.r{right:0}.dev-ant.t{top:74px}.dev-ant.b{top:824px}
/* hardware buttons: brushed, anisotropic */
.dev-btn{position:absolute;width:3.5px;border-radius:1.6px;background:linear-gradient(90deg,#17181a,#62656b 38%,#2d2e32 72%,#141517);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.6);transform:translateZ(-2px)}
.dev-btn.l{left:-3px}.dev-btn.r{right:-3px;background:linear-gradient(270deg,#17181a,#62656b 38%,#2d2e32 72%,#141517)}
.dev-btn.a{top:112px;height:30px}.dev-btn.u{top:166px;height:56px}.dev-btn.d{top:236px;height:56px}.dev-btn.p{top:206px;height:92px}
/* screen: continuous-corner clip. THE SLOT: .device-screen (alias .dev-screen) is exactly 402x874 css px = 1206x2622 px @3x */
.dev-screen{position:absolute;left:13px;top:13px;width:402px;height:874px;clip-path:path('M99.2 0L302.8 0c34.723 0 52.085 0 65.347 6.758a62 62 0 0 1 27.095 27.095c6.758 13.263 6.758 30.624 6.758 65.347L402 774.8c0 34.723 0 52.085 -6.758 65.347a62 62 0 0 1 -27.095 27.095c-13.263 6.758 -30.624 6.758 -65.347 6.758L99.2 874c-34.723 0 -52.085 0 -65.347 -6.758a62 62 0 0 1 -27.095 -27.095c-6.758 -13.263 -6.758 -30.624 -6.758 -65.347L0 99.2c0 -34.723 0 -52.085 6.758 -65.347a62 62 0 0 1 27.095 -27.095c13.263 -6.758 30.624 -6.758 65.347 -6.758Z');overflow:hidden;background:#000;isolation:isolate;transform:translateZ(0)}
.dev-island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:18px;background:#000;z-index:90}
.dev-island::before{content:"";position:absolute;right:15px;top:11px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#34456e 0,#0d1426 46%,#000 72%);box-shadow:0 0 0 2.5px #07080a}
.dev-island::after{content:"";position:absolute;right:20px;top:15px;width:3px;height:3px;border-radius:50%;background:rgba(140,170,255,.55);filter:blur(.6px)}
.dev-gloss{position:absolute;inset:0;z-index:95;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 66%,rgba(255,255,255,.05) 100%);background-size:220% 100%;background-position:var(--gx,40%) 0;mix-blend-mode:screen}
.dev-spec{position:absolute;inset:0;z-index:96;pointer-events:none;background:radial-gradient(260px 260px at var(--mx,70%) var(--my,10%),rgba(255,255,255,.12),transparent 70%);mix-blend-mode:screen;opacity:var(--spec,.8)}
.dev-dim{position:absolute;inset:0;z-index:92;background:#000;opacity:var(--dim,0);pointer-events:none}
.dev.small .dev-island{transform:none}
/* official bezel swap (off by default, see bezel.css) */
.dev-official{display:none}