/* Hero: one framed iPhone (15 Pro proportions: 393x852 screen, titanium rim + black bezel), fading out toward the bottom. */
body{margin:0;background:transparent}
#canvas{position:relative;width:1000px;height:1000px;overflow:hidden;background:transparent}
.device{position:absolute;transform-origin:0 0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 var(--fade-start,52%),rgba(0,0,0,0) var(--fade-end,72%));
  mask-image:linear-gradient(180deg,#000 0%,#000 var(--fade-start,52%),rgba(0,0,0,0) var(--fade-end,72%))}
.device .body{position:relative;width:425rem;height:884rem;border-radius:70rem;padding:4rem;
  background:linear-gradient(160deg,#e3e3e6 0%,#9a9a9f 28%,#d2d2d6 52%,#8b8b90 78%,#c9c9cd 100%);
  box-shadow:inset 0 0 0 .5rem rgba(255,255,255,.55)}
.device .bezel{width:417rem;height:876rem;border-radius:66rem;background:#0b0b0c;padding:12rem;box-shadow:inset 0 0 0 1rem #2a2a2c}
.device .screenwrap{width:393rem;height:852rem;border-radius:55rem;overflow:hidden;background:#000}
.device .screenwrap .screen{border-radius:55rem}
.device .k{position:absolute;width:4rem;border-radius:2rem;background:linear-gradient(90deg,#7b7b80,#b9b9be)}
.device .k.mute{left:-3rem;top:186rem;height:30rem}
.device .k.vup{left:-3rem;top:252rem;height:62rem}
.device .k.vdn{left:-3rem;top:330rem;height:62rem}
.device .k.pwr{right:-3rem;top:270rem;height:100rem}
/* Compact frames (index.html sets html.compact when the frame is < 420px wide) and short ones (html.short:
   the frame's height, not its width, sized the phone — a 1366x768 laptop, an iPhone SE): the unselected tab
   is scaled .87 instead of the app's .7 so its caption ("Real Chat") stays legible (>= 7px) even when the
   device has shrunk to its K_MIN floor. */
html.compact .cell.off, html.short .cell.off{transform:scale(.87)}