/*
 * Pros Cam: phone.css — the 3D phone and the app's screens drawn on it.
 *
 *   1. The device (titanium body, glass, buttons, shadow)
 *   2. Screen basics: status bar, glass, icons
 *   3. Drawn footage: rooms, skies, hills, silhouettes, a web page
 *   4. Home
 *   5. Camera
 *   6. Studio lights
 *   7. Photo editor
 *   8. Video editor
 *
 * Every screen is drawn at the iPhone's own 402 x 874 points; the phone scales them with --k.
 */

@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }

/* 1. The device ------------------------------------------------------------------------------- */

.phone {
  --k: 0.72;
  --rx: 0deg;
  --ry: -14deg;
  --rz: 0deg;
  --gx: 22;
  /* The device model (phone.js sets these from DEVICES; these are the iPhone's). */
  --dw: 426px;
  --dh: 898px;
  --scw: 402px;
  --sch: 874px;
  --bz: 12px;
  --srad: 54px;
  --brad: 72px;
  --depth: 28px;
  position: relative;
  width: calc(var(--dw) * var(--k));
  height: calc(var(--dh) * var(--k));
  flex: none;
  /* Light on the phone's edge comes from the room: the theme's own colour tints the titanium. */
  --ti-a: color-mix(in srgb, var(--titanium-a) 90%, var(--mark));
  --ti-b: color-mix(in srgb, var(--titanium-b) 88%, var(--mark));
}
.phone-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dw);
  height: var(--dh);
  transform: scale(var(--k));
  transform-origin: 0 0;
  perspective: 2200px;
  perspective-origin: 50% 42%;
}
.phone-turn {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-in-out);
}
.phone-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
.phone-slices, .phone-btns { position: absolute; inset: 0; transform-style: preserve-3d; }
.phone.is-live .phone-body { will-change: transform; }

.slice {
  position: absolute;
  inset: 0;
  border-radius: var(--brad);
  transform: translateZ(var(--z));
  background:
    linear-gradient(rgba(0, 0, 0, var(--sh)), rgba(0, 0, 0, var(--sh))),
    linear-gradient(100deg, var(--titanium-c) 0%, var(--ti-a) 11%, var(--ti-b) 44%, var(--ti-a) 76%, var(--titanium-c) 100%);
}

.face {
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(var(--dw) - 6px);
  height: calc(var(--dh) - 6px);
  border-radius: calc(var(--brad) - 3px);
  background: #000;
  transform: translateZ(calc(var(--depth) / 2 + 0.6px));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.7);
}
.screen {
  position: absolute;
  left: calc(var(--bz) - 3px);
  top: calc(var(--bz) - 3px);
  width: var(--scw);
  height: var(--sch);
  border-radius: var(--srad);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.room { position: absolute; left: 0; top: 0; width: var(--scw); height: var(--sch); overflow: hidden; }
.glare {
  position: absolute;
  inset: calc(var(--bz) - 3px);
  border-radius: var(--srad);
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.11) 43%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%;
  background-position: calc(50% + var(--gx) * 1%) 0;
  background-repeat: no-repeat;
}
/* The iPad's camera sits in the glass, on the long edge. */
.phone[data-device^="ipad"] .face::after { content: ""; position: absolute; top: 50%; right: 13px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2c3a5c, #090b11 70%); }

.pbtn {
  position: absolute;
  width: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--titanium-c), var(--ti-b), var(--titanium-c));
}
.pbtn.l { left: -10px; transform: translateX(-1.5px) rotateY(90deg); }
.pbtn.r { left: calc(var(--dw) - 10px); transform: translateX(1.5px) rotateY(90deg); }

.phone-glow {
  position: absolute;
  inset: -12% -34%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mark) 24%, transparent), transparent 72%);
  opacity: 0.7;
  pointer-events: none;
}
.phone-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -3.5%;
  height: 6%;
  background: radial-gradient(closest-side, rgba(var(--shade), 0.62), transparent);
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
.phone.is-sideways .phone-shadow { opacity: 0; }
.phone:not(.is-live) *,
.phone:not(.is-live) *::before,
.phone:not(.is-live) *::after { animation-play-state: paused !important; }

/* The hand that holds it (hand.js): palm and fingers behind the body, the thumb in front of the glass. */
.hand { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; transition: transform 0.9s var(--spring); }
.hand.is-left { transform: scaleX(-1); }
.hand-l { position: absolute; display: block; max-width: none; overflow: visible; }
.hand-l.back { transform: translateZ(calc(var(--depth) / -2 - 3px)); }
.hand-l.front { transform: translateZ(calc(var(--depth) / 2 + 5px)); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }

/* 2. Screen basics ---------------------------------------------------------------------------- */

.sprite { position: absolute; }
.scr {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.25 var(--font);
  font-synthesis: none;
  -webkit-user-select: none;
  user-select: none;
  --sil-skin: color-mix(in srgb, var(--f-room1) 52%, #16100e);
  --sil-hair: #120e0d;
  --sil-body: color-mix(in srgb, var(--f-body) 62%, #0a0c10);
}
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr i, .scr b, .scr s, .scr em { font-style: normal; text-decoration: none; }
.scr-bg::before, .scr-bg::after { content: ""; position: absolute; border-radius: 50%; }
.scr-bg::before { width: 600px; height: 600px; left: -250px; top: -170px; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow-a) 78%, transparent), transparent); }
.scr-bg::after { width: 600px; height: 600px; left: 80px; top: 330px; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow-b) 74%, transparent), transparent); }

.scr .ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.scr .ic .f { fill: currentColor; stroke: none; }
.scr .wm { font-size: 38px; line-height: 1; padding: 0.02em 0.06em 0.1em 0.1em; }

.glass {
  background: var(--glass);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}
.glass-card { background: var(--glass); box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 28px rgba(0, 0, 0, 0.16); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }

.s-status {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 54px;
  padding: 16px 38px 0 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 17px/1 var(--font);
  letter-spacing: -0.01em;
  z-index: 40;
  color: var(--text);
}
.s-icons { display: flex; align-items: center; gap: 6px; }
.s-icons svg { fill: currentColor; }
.s-island {
  position: absolute;
  top: 11px;
  left: 50%;
  margin-left: -63px;
  width: 126px;
  height: 37px;
  border-radius: 99px;
  background: #000;
  z-index: 41;
}
.s-island i { position: absolute; right: 13px; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2c3a5c, #090b11 70%); }
.s-ind { position: absolute; left: 50%; bottom: 8px; margin-left: -69px; width: 138px; height: 5px; border-radius: 99px; background: var(--text); opacity: 0.92; z-index: 40; }

/* 3. Drawn footage ---------------------------------------------------------------------------- */

.art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  background: var(--f-ground);
  --sil-skin: color-mix(in srgb, var(--f-room1) 52%, #16100e);
  --sil-hair: #120e0d;
  --sil-body: color-mix(in srgb, var(--f-body) 62%, #0a0c10);
}
.a-room { position: absolute; inset: 0; background: linear-gradient(155deg, var(--f-room1), var(--f-room2) 60%, var(--f-ground)); }
.a-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--f-sky1) 0%, color-mix(in srgb, var(--f-sky1) 55%, #9fb0c4) 46%, var(--f-sky2) 62%, color-mix(in srgb, var(--f-sky2) 60%, #2a1a10) 100%); }
.a-sun { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff7e0, var(--f-sun) 62%); box-shadow: 0 0 6cqw 2cqw color-mix(in srgb, var(--f-sun) 55%, transparent); }
.a-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 44%; }
.a-bk { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--f-sun) 70%, transparent), transparent 68%); opacity: 0.8; }
.a-cloud { position: absolute; width: 30%; height: 4.4%; border-radius: 99px; background: rgba(255, 255, 255, 0.34); }
.a-sil { position: absolute; display: block; height: auto; aspect-ratio: 200 / 240; overflow: visible; }
.a-pip {
  position: absolute;
  aspect-ratio: 9 / 16;
  border-radius: 16% / 9%;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--accent), 0 8px 18px rgba(0, 0, 0, 0.45);
  background: var(--f-ground);
}
.a-pip .pip-sil { left: 10%; width: 80%; bottom: -4%; }
.a-lines { position: absolute; display: flex; flex-direction: column; justify-content: space-between; left: 10%; top: 6%; width: 80%; height: 26%; }
.a-lines i { display: block; height: 15%; border-radius: 99px; background: #fff; }
.a-lines.dk i { background: #9a9aa6; }
.a-dark { position: absolute; inset: 0; background: linear-gradient(155deg, color-mix(in srgb, var(--bg) 40%, #2e2e33), #131315); }
.a-print { position: absolute; aspect-ratio: 0.72; background: #f4f1ea; border-radius: 6%/4.4%; overflow: hidden; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); }
.a-print .a-sky { inset: 4.6% 4.6% 15%; border-radius: 3px; }
.a-print .a-hills { left: 4.6%; width: 90.8%; bottom: 15%; height: 28%; }
.a-print .a-sun { margin-top: 5%; }
.a-clip { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.card .a-clip { left: 9%; right: 9%; }
.a-film { position: absolute; top: 0; bottom: 0; width: 9%; background: #0c0c0e; }
.a-film.l { left: 0; } .a-film.r { right: 0; }
.a-film::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #2f2f33 0 7px, transparent 7px 17px) center / 54% 100% no-repeat; }
.card .a-sky.vid { left: 9%; right: 9%; }

.a-web { position: absolute; inset: 0; background: #f6f6f8; overflow: hidden; }
.a-web-in { position: absolute; inset: 0 0 -60% 0; }
.a-web-in.scroll { animation: webscroll 16s var(--ease-in-out) infinite alternate; }
@keyframes webscroll { from { transform: translateY(0); } to { transform: translateY(-38%); } }
.a-web-in .hero1, .a-web-in .hero2, .a-web-in .hero3 { position: absolute; left: 8%; width: 84%; border-radius: 3.4cqw; }
.a-web-in .hero1 { top: 14%; height: 12%; background: linear-gradient(135deg, #3b5bdb, #8ab4ff); }
.a-web-in .hero2 { top: 52%; height: 12%; background: linear-gradient(135deg, #f08c3b, #ffd08a); }
.a-web-in .hero3 { top: 90%; height: 12%; background: linear-gradient(135deg, #1fa971, #8fe3b9); }
.a-web-in .a-lines { top: auto; }
.a-web-bar { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: #e9e9ee; display: flex; align-items: center; gap: 2.4cqw; padding: 0 5cqw; z-index: 2; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.a-web-bar b { width: 3cqw; height: 3cqw; border-radius: 50%; flex: none; }
.a-web-bar span { flex: 1; height: 52%; max-height: 8cqw; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px #d9d9e0; margin-left: 2cqw; }
.a-chip .a-web-bar { display: none; }
.a-half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.a-half.top { top: 0; } .a-half.bot { bottom: 0; }
.a-seam { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--accent); }
.a-handle { position: absolute; left: 37%; width: 26%; top: calc(50% - 4px); height: 8px; border-radius: 99px; background: var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation: handle 3.6s var(--ease-in-out) infinite alternate; }
@keyframes handle { to { transform: translateY(5px); } }
.a-fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.55)); }
.a-chips { position: absolute; left: 0; right: 0; top: 68%; display: flex; justify-content: center; gap: 5cqw; }
.a-chip { position: relative; width: 22cqw; aspect-ratio: 1; border-radius: 5cqw; overflow: hidden; box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.35); }
.a-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.35); }
.a-chip.on { transform: scale(1.08); }
.a-chip.on::after { box-shadow: 0 0 0 1.5px var(--accent); }
.a-vf { position: absolute; inset: 0; pointer-events: none; }
.a-vf i { position: absolute; background: rgba(255, 255, 255, 0.15); }
.a-vf .t1 { left: 33.3%; top: 0; bottom: 0; width: 1px; } .a-vf .t2 { left: 66.6%; top: 0; bottom: 0; width: 1px; }
.a-vf .t3 { top: 33.3%; left: 0; right: 0; height: 1px; } .a-vf .t4 { top: 66.6%; left: 0; right: 0; height: 1px; }
.a-vf b { position: absolute; width: 9cqw; height: 9cqw; border: 0 solid rgba(255, 255, 255, 0.88); }
.a-vf .c1 { left: 7cqw; top: 7cqw; border-width: 1.6px 0 0 1.6px; border-top-left-radius: 2px; }
.a-vf .c2 { right: 7cqw; top: 7cqw; border-width: 1.6px 1.6px 0 0; border-top-right-radius: 2px; }
.a-vf .c3 { left: 7cqw; bottom: 7cqw; border-width: 0 0 1.6px 1.6px; border-bottom-left-radius: 2px; }
.a-vf .c4 { right: 7cqw; bottom: 7cqw; border-width: 0 1.6px 1.6px 0; border-bottom-right-radius: 2px; }
.a-vf em { position: absolute; left: 31%; top: 20%; width: 38%; aspect-ratio: 1; border: 1.5px solid var(--accent); border-radius: 2cqw; animation: focus 3.4s var(--ease-out) infinite; }
@keyframes focus { 0% { transform: scale(1.35); opacity: 0.4; } 18% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.a-seam.thin { height: 1px; top: 50%; background: rgba(255, 255, 255, 0.5); }
.a-strip3 { position: absolute; top: 0; bottom: 0; left: 0; width: 33.4%; overflow: hidden; }
.a-strip3.m { left: 33.3%; } .a-strip3.r { left: 66.6%; }
.a-sky.dusk { background: linear-gradient(180deg, #2a2350 0%, #7a4a7a 45%, #e08a6a 70%, #f2c08a 100%); }
.a-join { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--mark) 70%, transparent); }

/* 4. Home ------------------------------------------------------------------------------------- */

.h-top { position: absolute; left: 0; right: 0; top: 58px; height: 56px; padding: 0 20px 0 22px; display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.h-plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; }
.h-cards { position: absolute; left: 0; right: 0; top: 122px; height: 450px; perspective: 800px; perspective-origin: 50% 46%; }
.card {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 256px;
  height: 420px;
  margin-left: -128px;
  border-radius: 30px;
  overflow: hidden;
  background: #141416;
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px var(--glass-edge);
  transition: transform 0.9s var(--spring), opacity 0.5s var(--ease-out);
}
.card-sheen { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%); }
.card-fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.78)); }
.card-text { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: flex-end; gap: 12px; color: #fff; }
.card-text > div { flex: 1; min-width: 0; }
.card-text b { display: block; font: 700 21px/1.15 var(--font); letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-text span { display: block; margin-top: 2px; font: 400 14px/1.25 var(--font); color: rgba(255, 255, 255, 0.78); }
.card-go { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 20px; }
.card-go .ic { stroke-width: 2.2; }
.scr[dir="rtl"] .card-go .ic { transform: scaleX(-1); }
.card-last { position: absolute; left: 14px; top: 14px; height: 26px; padding: 0 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.55); color: #fff; font: 600 12px/1 var(--font); display: flex; align-items: center; gap: 6px; }
.card-last i { width: 6px; height: 6px; border-radius: 50%; background: #30d158; }
.scr[dir="rtl"] .card-last { left: auto; right: 14px; }
.h-dots { position: absolute; top: 566px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.h-dots i { width: 6px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text-3) 50%, transparent); transition: width 0.4s var(--spring), background 0.3s; }
.h-dots i.on { width: 18px; background: var(--accent); }
.h-script { position: absolute; left: 16px; right: 16px; top: 626px; padding: 14px 16px 12px; border-radius: 22px; }
.hs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hs-row b { font: 600 17px/1.2 var(--font); }
.badge { font: 600 12px/1 var(--font); padding: 4px 9px; border-radius: 99px; color: var(--accent); background: var(--accent-soft); }
.badge:empty { display: none; }
.h-script p { margin: 6px 0 8px; font-size: 14px; line-height: 1.3; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-foot small { font-size: 13px; color: var(--text-3); }
.mini-rec { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--fill); font: 600 13px/1 var(--font); }
.mini-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff453a; }
.h-rows { position: absolute; left: 16px; right: 16px; top: 590px; padding: 2px 0; border-radius: 24px; }
.hr { position: relative; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px 0 12px; font-size: 15px; }
.hr + .hr::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 0.5px; background: var(--line); }
.hr-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--fill); display: grid; place-items: center; font-size: 17px; color: var(--text); flex: none; }
.hr b { font-weight: 500; flex: 1; white-space: nowrap; }
.hr span { color: var(--text-2); white-space: nowrap; }
.hr-ud { font-size: 13px; color: var(--text-3); }
.hr-ud .ic { stroke-width: 2.2; }
.card.is-mid { box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.6), 0 0 0 2.5px #fff; }
.card.is-mid .card-go { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; transform: rotate(90deg); }
.scr[dir="rtl"] .card.is-mid .card-go { transform: rotate(90deg); }
.h-bar { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); height: 64px; padding: 4px; display: flex; align-items: center; gap: 6px; border-radius: 99px; z-index: 6; white-space: nowrap; }
.h-side { width: 74px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-2); font-size: 19px; }
.h-side span { font: 600 11px/1.1 var(--font); max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.h-pill { height: 56px; padding: 0 22px; border-radius: 99px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; gap: 9px; font: 600 17px/1 var(--font); letter-spacing: -0.01em; }
.h-pill i { width: 16px; height: 16px; border-radius: 50%; background: var(--mark); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-primary) 85%, transparent); }

/* 5. Camera ----------------------------------------------------------------------------------- */
/* Laid out from the room (--w, --h and the safe insets --st, --sb, --sl, --sr), so one drawing serves every screen.
   .land: held sideways. .lefty: the left hand, so the thumb's column and the foot change sides, gliding across. */

.scr.cam {
  background: #000;
  --text: #fff;
  --text-2: rgba(255, 255, 255, 0.76);
  --text-3: rgba(255, 255, 255, 0.62);
  --glass: rgba(14, 14, 16, 0.5);
  --glass-edge: rgba(255, 255, 255, 0.18);
  --accent: var(--cam);
  --fill: rgba(255, 255, 255, 0.14);
  --w: 402px; --h: 874px; --st: 54px; --sb: 34px; --sl: 0px; --sr: 0px;
  --glide: 0.7s var(--spring);
}
.c-scrim { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--st) + 300px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.32) 58%, transparent); }
.t-web .s-status { color: #101014; }
.t-web .a-web-bar { top: 52px; height: 6.4%; }
.t-web .a-web-in { top: 52px; }
.t-web .a-web-bar b { display: none; }
.t-web .a-web-bar span { margin-left: 56px; }
.t-web .c-scrim { top: 104px; height: 300px; }
.t-pic .c-scrim, .t-web .c-scrim { height: 380px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.6) 60%, transparent); }
.prompt { position: absolute; left: calc(var(--sl) + 26px); right: calc(var(--sr) + 26px); top: calc(var(--st) + 82px); max-width: 560px; font: 800 27px/1.24 var(--font); letter-spacing: -0.02em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); animation: read 15s linear infinite; }
.prompt .w { opacity: clamp(0.36, calc(0.36 + (var(--t) - var(--on)) * 44), 1); }
@keyframes read { 0% { --t: 0; } 82% { --t: 1; } 100% { --t: 1; } }
.close { position: absolute; left: calc(var(--sl) + 16px); top: calc(var(--st) + 21px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; z-index: 8; }
.c-pill { position: absolute; left: 50%; top: calc(var(--st) + 21px); transform: translateX(-50%); height: 44px; max-width: 190px; padding: 0 16px 0 18px; border-radius: 99px; display: flex; align-items: center; gap: 6px; font: 600 14px/1 var(--font); color: #fff; white-space: nowrap; z-index: 8; }
.c-pill .ic { font-size: 13px; stroke-width: 2.4; }
.c-pill.rolling { height: 36px; top: calc(var(--st) + 25px); font: 600 15px/1 var(--font); font-variant-numeric: tabular-nums; }
.c-pill.rolling i { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; }
.rail { position: absolute; top: 50%; left: calc(100% - var(--sr) - 63px); width: 50px; padding: 6px 0; border-radius: 25px; display: flex; flex-direction: column; align-items: center; transform: translateY(-50%); z-index: 8; transition: left var(--glide); }
.rb { position: relative; width: 50px; height: 50px; display: grid; place-items: center; font-size: 20px; color: #fff; }
.rb > * { position: relative; z-index: 1; }
.rb b { font: 600 16px/1 var(--font); letter-spacing: -0.02em; }
.rb b.lens { font: 600 13px/1 var(--font); }
.rb.on { color: #000; }
.rb.on::before { content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); }
.chev { position: absolute; left: 50%; bottom: calc(var(--sb) + 112px); width: 32px; height: 18px; margin-left: -16px; display: grid; place-items: center; font-size: 22px; color: rgba(255, 255, 255, 0.82); z-index: 8; }
.chev .ic { stroke-width: 2.4; }
.c-foot { position: absolute; left: calc(var(--sl) + 28px); right: calc(var(--sr) + 29px); bottom: calc(var(--sb) + 25px); height: 80px; z-index: 8; }
.c-foot > * { position: absolute; top: 14px; transition: left var(--glide), top var(--glide); }
.thumb { left: 0; width: 52px; height: 52px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, 0.7); overflow: hidden; }
.thumb s { position: absolute; inset: 0; background: radial-gradient(circle at 70% 28%, var(--f-sun), transparent 42%), linear-gradient(160deg, var(--f-sky1), var(--f-room1)); }
.shutter { left: calc(50% - 40px); top: 0 !important; width: 80px; height: 80px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; }
.shutter b { width: 62px; height: 62px; border-radius: 31px; background: #ff453a; }
.shutter.photo b { background: #fff; }
.round { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: #fff; }
.c-foot .flip { left: calc(100% - 52px); }
.lefty .c-foot .thumb { left: calc(100% - 52px); }
.lefty .c-foot .flip { left: 0; }
.lefty .rail { left: calc(var(--sl) + 13px); }
.t-photo .c-foot .round { color: #fff; }

/* All-in-one: the layouts to switch between, in a strip over the foot. */
.lay-strip { position: absolute; left: calc(var(--sl) + 14px); right: calc(var(--sr) + 0px); bottom: calc(var(--sb) + 140px); display: flex; gap: 8px; overflow: hidden; z-index: 8; }
.lay { position: relative; flex: none; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.lay.on { box-shadow: 0 0 0 2px #fff; }
.lay b { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 700 10px/1 var(--font); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); z-index: 2; }
.t-all .chev { bottom: calc(var(--sb) + 214px); }
.t-all .rail { top: 42%; }

/* Split: two windows and the handle between. The top is the smaller half; it shows its camera whole, wide or filled. */
.a-split { background: #0e0e10; }
.sp-win { position: absolute; left: 12px; right: 12px; overflow: hidden; border-radius: 26px; background: #1a1a1d; transition: border-radius 0.5s var(--ease-out); }
.sp-win.top { top: calc(var(--st) + 8px); height: calc((var(--h) - var(--st) - var(--sb)) * 0.36); }
.sp-win.bot { top: calc(var(--st) + 30px + (var(--h) - var(--st) - var(--sb)) * 0.36); bottom: calc(var(--sb) - 20px); }
.sp-handle { position: absolute; left: 50%; width: 46px; height: 5px; margin-left: -23px; border-radius: 99px; background: rgba(255, 255, 255, 0.85); top: calc(var(--st) + 17px + (var(--h) - var(--st) - var(--sb)) * 0.36); z-index: 6; }
.sp-blur, .sp-pic { position: absolute; inset: 0; overflow: hidden; transition: inset 0.6s var(--ease-out), border-radius 0.5s var(--ease-out), opacity 0.4s; }
.sp-blur { filter: blur(14px) brightness(0.75); transform: scale(1.2); }
[data-small="fill"] .sp-blur { opacity: 0; }
[data-small="whole"] .sp-pic { inset: 0 calc(50% - (var(--h) - var(--st) - var(--sb)) * 0.36 * 0.28); border-radius: 14px; }
[data-small="wide"] .sp-pic { inset: 0 calc(50% - (var(--h) - var(--st) - var(--sb)) * 0.36 * 0.68); border-radius: 14px; }
[data-corners="sharp"] .sp-win.top, [data-corners="sharp"] .sp-pic { border-radius: 0; }
[data-corners="smooth"] .sp-win.top { border-radius: 44px; }
[data-corners="smooth"] .sp-pic { border-radius: 28px; }
.t-split .c-scrim { display: none; }
.t-split .prompt { top: calc(var(--st) + 82px); font-size: 22px; right: calc(var(--sr) + 80px); }

/* Held sideways: the shutter's column at the thumb's edge, the thumb column beside it; the script above. */
.land .close { top: 12px; }
.land .c-pill { top: 12px; }
.land .prompt { top: 70px; right: calc(var(--sr) + 200px); font-size: 24px; }
.land .lefty .prompt, .land.lefty .prompt { left: calc(var(--sl) + 200px); right: calc(var(--sr) + 26px); }
.land .c-scrim { height: 220px; }
.land .c-foot { left: calc(100% - var(--sr) - 92px); right: auto; top: 50%; bottom: auto; width: 80px; height: 236px; transform: translateY(-50%); transition: left var(--glide); }
.land .c-foot > * { left: 14px !important; }
.land .c-foot .flip { top: 0; }
.land .c-foot .shutter { top: 78px !important; left: 0 !important; }
.land .c-foot .thumb { top: 184px; }
.land .rail { left: calc(100% - var(--sr) - 168px); }
.land.lefty .c-foot { left: calc(var(--sl) + 12px); }
.land.lefty .rail { left: calc(var(--sl) + 118px); }
.land .chev { bottom: calc(var(--sb) + 16px); }

/* 6. Studio lights, 7. Photo editor, 8. Video editor: appended by studio.css (loaded after this file). */

/* Right to left (the language wall) */
.scr[dir="rtl"] .h-bar { direction: rtl; }

@media (prefers-reduced-motion: reduce) {
  .prompt { animation: none; --t: 0.3; }
  .a-web-in.scroll, .a-handle, .a-vf em { animation: none; }
  .phone-turn { transition: none; }
}