/* A real 3D Android phone in CSS (phone3d.js builds it): a body with thickness made of stacked rounded slices (the metal edge),
   side keys, a back with the camera, and the front glass with the live app inside. Only the rig's transform changes per frame. */
.p3{position:relative;width:var(--pw);height:var(--ph);perspective:1800px;perspective-origin:50% 42%;--el:30%;--er:24%;--bk:13%}
.p3-rig,.p3-body{position:absolute;inset:0;transform-style:preserve-3d}
.p3-rig{will-change:transform}
.p3-sl,.p3-front,.p3-back{position:absolute;inset:0;border-radius:var(--pr)}
/* the side, as in his film: matte grey layers between two polished rim layers, all lit from the upper left */
.p3-sl{background:var(--side,rgb(70,70,74))}
.p3-sl--rim{background:var(--rim,rgb(150,150,154))}
/* the front: one sheet of glass over a thin black border, a fine light rim where the glass meets the frame */
.p3-front{transform:translateZ(calc(var(--pt) / 2 + .6px));padding:var(--bz);background:#060607;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px #8d8d93,inset 0 0 0 2.5px #1a1a1d}
.p3-scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--pr) - var(--bz));background:#000;transform:translateZ(0)}
.p3-scr iframe{position:absolute;left:0;top:0;width:412px;height:892px;border:0;transform-origin:0 0;transform:scale(var(--k,.75));pointer-events:none;background:#000}
.p3-mk{position:absolute;left:0;top:0;width:2px;height:2px;margin:-1px 0 0 -1px;pointer-events:none}
/* the glass: a faint reflection band that slides as the phone turns, and a soft sheen on the upper part */
.p3-glare{position:absolute;inset:0;border-radius:var(--pr);pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 36%,rgba(255,255,255,var(--ga,.06)) 47%,rgba(255,255,255,0) 58%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 22%);
  background-size:280% 100%,100% 100%;background-position:var(--gx,50%) 0,0 0;mix-blend-mode:screen}
/* the back: matte glass in the frame's colour, with the Android camera bar running across it */
.p3-back{transform:rotateY(180deg) translateZ(calc(var(--pt) / 2 + .6px));backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(160deg,hsl(205 6% calc(var(--bk) + 6%)),hsl(205 6% var(--bk)) 55%,hsl(205 6% calc(var(--bk) + 3%)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 2px rgba(0,0,0,.6)}
.p3-bar{position:absolute;left:-1px;right:-1px;top:9%;height:9.5%;display:flex;align-items:center;gap:6%;padding:0 9%;
  background:linear-gradient(180deg,hsl(205 6% 24%),hsl(205 6% 15%) 55%,hsl(205 6% 19%));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 6px 12px rgba(0,0,0,.55),0 -2px 6px rgba(0,0,0,.35)}
.p3-pill{display:flex;align-items:center;gap:8%;height:74%;padding:0 4%;flex:0 0 46%;border-radius:999px;background:#07090b;box-shadow:inset 0 0 0 1.5px hsl(205 6% 30%),inset 0 2px 4px rgba(0,0,0,.8)}
.p3-bar i{display:block;height:84%;aspect-ratio:1;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 34%,rgba(170,200,255,.55) 0 4%,transparent 9%),radial-gradient(circle at 50% 50%,#05070a 0 30%,#0e1a26 38%,#05070a 46%,#111 52%,hsl(205 6% 40%) 58%,hsl(205 5% 14%) 70%);box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.p3-bar>.l3{height:58%}
.p3-bar .fl{display:block;height:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fbf6e4 0 32%,#c9c2ad 50%,#55574f 66%,#25282a 74%)}
/* keys: power and volume on the right side, as on Android phones; small metal bars standing out of the band */
.p3-key{position:absolute;width:calc(var(--pt) * .5);border-radius:3px;background:#4a4a50}
.p3-key--pwr{left:calc(100% - var(--pt) * .23);top:22%;height:7.5%;transform:rotateY(90deg) translateZ(1.8px)}
.p3-key--vol{left:calc(100% - var(--pt) * .23);top:32%;height:15%;transform:rotateY(90deg) translateZ(1.8px)}
/* shadow on the "floor": a wide soft one and a tight dark one under the phone when it sits low */
.p3-floor{position:absolute;left:50%;bottom:-5%;width:78%;height:7%;margin-left:-39%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));filter:blur(9px);pointer-events:none;will-change:transform,opacity}
.p3-floor--near{bottom:-2.4%;width:56%;height:3.4%;margin-left:-28%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0));filter:blur(4px)}

/* notes beside the phone: a short line to the exact place on the screen */
.p3n-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.p3n-lines path{fill:none;stroke:rgba(143,227,157,.75);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.p3n-lines circle{fill:#8fe39d}
.p3n-lines .ring{fill:none;stroke:rgba(143,227,157,.6);stroke-width:1.2}
.p3n{position:absolute;left:0;top:0;z-index:4;max-width:230px;padding:12px 15px 13px;border:1px solid rgba(143,227,157,.28);border-radius:12px;background:#202326;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);color:#f0f3f1;font:600 15px/1.35 var(--f,system-ui);letter-spacing:.003em;opacity:0;pointer-events:none;will-change:transform,opacity}
.p3n small{display:block;margin-top:3px;color:#a7b0ab;font-weight:400;font-size:13.5px}