/* built from src/hud.src.css by tools/build_css.py: do not edit here */
/* Style e of the main HUD (D178). Units: <n>u = one frame unit (Windows 1/1600 of the frame, iPhone 1 pt of 844),
   <n>su = one unit of the tablet's screen (1/1000). Built into css/hud.css by tools/build_css.py.
   One light for everything: warm, from the upper left; shadows fall down-right, layered, tinted plum (never grey). */

:root { --ink: #2a1245; --plum: #5b2a86; --violet: #7c3aed; --lav: #c4b5fd; --gold: #ffc53d; --gold-d: #e09a12;
  --cream: #fff8ec; --rose: #ff8fb8; --teal: #2bb5a8;
  --sh-1: 0 1px 1px rgba(60, 20, 90, .18), 0 2px 2px rgba(60, 20, 90, .16), 0 4px 4px rgba(60, 20, 90, .14), 0 8px 8px rgba(60, 20, 90, .12), 0 16px 16px rgba(60, 20, 90, .10);
  --sh-2: 0 2px 2px rgba(50, 15, 80, .2), 0 4px 4px rgba(50, 15, 80, .18), 0 8px 8px rgba(50, 15, 80, .16), 0 16px 16px rgba(50, 15, 80, .14), 0 32px 32px rgba(50, 15, 80, .12); }

/* ------------------------------------------------------------------------------------------------ frames */
.frame { position: relative; width: 100%; container-type: inline-size; overflow: hidden; isolation: isolate; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font-family: "Nunito", system-ui, sans-serif; }
.f-win { aspect-ratio: 16 / 9; border-radius: 18px; background: #1d1230; --u: calc(100cqw / 1600);
  box-shadow: 0 30px 80px rgba(5, 0, 15, .55), 0 0 0 1px rgba(255, 255, 255, .06); }
.f-win.active { box-shadow: 0 30px 80px rgba(5, 0, 15, .55), 0 0 0 2px rgba(255, 197, 61, .6); }
.f-ios { --u: calc(100cqw / 844); }
.phone { position: relative; width: 100%; max-width: 1180px; padding: 2.1% 2.4%; border-radius: 9% / 19.5%;
  background: linear-gradient(145deg, #2b2733, #0d0b12 60%, #24202c);
  box-shadow: 0 30px 70px rgba(4, 0, 12, .6), inset 0 0 0 2px rgba(255, 255, 255, .10), inset 0 0 0 7px #08070b; }
.phone .scrn { aspect-ratio: 844 / 390; border-radius: calc(var(--u) * 47); background: #1d1230; }
.island { position: absolute; left: calc(var(--u) * 11); top: 50%; width: calc(var(--u) * 37); height: calc(var(--u) * 126); translate: 0 -50%; border-radius: 999px; background: #050407;
  z-index: 30; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); pointer-events: none; }
.home-ind { position: absolute; left: 50%; bottom: calc(var(--u) * 8); width: calc(var(--u) * 134); height: calc(var(--u) * 5); translate: -50% 0; border-radius: 99px;
  background: rgba(255, 255, 255, .85); z-index: 30; pointer-events: none; mix-blend-mode: difference; }
/* the iOS safe areas (landscape, Face ID): 59 pt each side (the Dynamic Island may be on either), 21 pt at the bottom */
.safe-guides { position: absolute; inset: 0; z-index: 29; pointer-events: none; opacity: 0; transition: opacity .35s; }
.frame.safe-on .safe-guides { opacity: 1; }
.safe-guides i { position: absolute; background: repeating-linear-gradient(135deg, rgba(255, 70, 120, .30) 0 calc(var(--u) * 6), rgba(255, 70, 120, .14) calc(var(--u) * 6) calc(var(--u) * 12)); }
.safe-guides .sg-l { left: 0; top: 0; bottom: 0; width: calc(var(--u) * 59); border-right: 2px dashed #ff5c8f; }
.safe-guides .sg-r { right: 0; top: 0; bottom: 0; width: calc(var(--u) * 59); border-left: 2px dashed #ff5c8f; }
.safe-guides .sg-b { left: calc(var(--u) * 59); right: calc(var(--u) * 59); bottom: 0; height: calc(var(--u) * 21); border-top: 2px dashed #ff5c8f; }
.safe-guides i::after { position: absolute; font: 1000 calc(var(--u) * 11)/1 "Nunito", sans-serif; color: #fff; background: #ff5c8f; padding: calc(var(--u) * 3) calc(var(--u) * 6); border-radius: 99px; white-space: nowrap; }
.safe-guides .sg-l::after { content: "59 pt"; left: 50%; top: 22%; translate: -50% 0; }
.safe-guides .sg-r::after { content: "59 pt"; left: 50%; top: 22%; translate: -50% 0; }
.safe-guides .sg-b::after { content: "21 pt"; left: 50%; top: 50%; translate: -50% -50%; }

/* ------------------------------------------------------------------------------------------------ the world */
.world { position: absolute; inset: 0; overflow: hidden; background: #2a1d3c; z-index: 0; }
.world .still, .world .live { position: absolute; left: 0; top: 0; border: 0; }
.world .still { transform-origin: 0 0; }
.world .live { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; pointer-events: none; transform-origin: 50% 50%; }
.world .live.on { opacity: 1; }
.world .catch { position: absolute; inset: 0; z-index: 3;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 100 100'><g fill='%237c3aed' stroke='%23fff8ec' stroke-width='6'><path d='M50 50C38.5 50 28 59.4 28 70.6C28 78.9 34.4 83.4 41.2 83.4C44.8 83.4 47.2 81.7 50 81.7C52.8 81.7 55.2 83.4 58.8 83.4C65.6 83.4 72 78.9 72 70.6C72 59.4 61.5 50 50 50z'/><ellipse cx='30.5' cy='32' rx='7' ry='9' transform='rotate(-30 30.5 32)'/><ellipse cx='50' cy='25.5' rx='7' ry='9'/><ellipse cx='69.5' cy='32' rx='7' ry='9' transform='rotate(30 69.5 32)'/><ellipse cx='19.5' cy='47.5' rx='7' ry='9' transform='rotate(-58 19.5 47.5)'/></g></svg>") 15 15, pointer; }
.f-ios .world .catch { cursor: default; }
.sprites { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sprites > * { position: absolute; left: 0; top: 0; will-change: transform; }
.sprites canvas.hero { transform-origin: 0 0; }
.sprites .npc { transform-origin: 50% 100%; }
.sprites .npc img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sprites .npc .npc-b { opacity: 0; }
.sprites .npc-sh { border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 20, 10, .42), rgba(40, 20, 10, 0)); }
.sprites .ring { opacity: 0; transition: opacity .5s; }
.sprites .ring i { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid rgba(255, 220, 140, .9);
  box-shadow: 0 0 14px rgba(255, 200, 90, .7), inset 0 0 14px rgba(255, 200, 90, .45); animation: ring 2.6s ease-in-out infinite; }
.sprites .ring i + i { animation-delay: -1.3s; border-color: rgba(255, 255, 255, .5); box-shadow: none; }
@keyframes ring { 0% { transform: scale(.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }
.sprites .ring.on { opacity: 1; }
.sprites .marker { opacity: 0; transition: opacity .3s; }
.sprites .marker.on { opacity: 1; }
.sprites .mk-in { position: absolute; left: calc(var(--u) * -32); top: calc(var(--u) * -64); width: calc(var(--u) * 64); height: calc(var(--u) * 64); animation: bob 2.2s ease-in-out infinite; }
.sprites .mk-in img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(50, 15, 80, .35)); }
.sprites .mk-in kbd { position: absolute; right: calc(var(--u) * -10); bottom: calc(var(--u) * -2); }
.f-ios .sprites .mk-in kbd { display: none; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -5); } }
.world .vig { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(30, 10, 50, .3) 100%); }

kbd { display: inline-grid; place-items: center; min-width: calc(var(--u) * 30); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 9); font: 900 calc(var(--u) * 15)/1 "Nunito", sans-serif;
  color: var(--ink); background: linear-gradient(180deg, #fffdf8, #f1e7d6); box-shadow: 0 calc(var(--u) * 2.5) 0 #cdbda1, 0 calc(var(--u) * 5) calc(var(--u) * 9) rgba(50, 15, 80, .28), inset 0 1px 0 #fff; }

/* ------------------------------------------------------------------------------------------------ the HUD layer */
.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .hud-fly, .hud .hud-goal, .hud .hud-thought { pointer-events: none; }
.tab-open .hud-avatar { opacity: 0; translate: calc(var(--u) * -40) calc(var(--u) * -60); scale: .7; }
.tab-open .hud-tab { opacity: 0; translate: calc(var(--u) * 40) calc(var(--u) * -60); scale: .7; }
.tab-open .hud-keys, .tab-open .paw-joy, .tab-open .paw-act { opacity: 0; translate: 0 calc(var(--u) * 40); }
.hud-avatar, .hud-tab, .hud-keys, .paw-joy, .paw-act { transition: opacity .32s cubic-bezier(.55,0,.78,.2), translate .4s cubic-bezier(.55,0,.78,.2), scale .4s cubic-bezier(.55,0,.78,.2); }

/* the avatar: a bust rising out of a small disc of light; the head leaves the disc (frameless above) */
.hud-avatar { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 12); width: calc(var(--u) * 150); height: calc(var(--u) * 162); cursor: pointer; outline: none; }
.av-in { position: absolute; inset: 0; transform-origin: 50% 100%; }
.av-plate { position: absolute; left: calc(var(--u) * 12); top: calc(var(--u) * 36); width: calc(var(--u) * 126); height: calc(var(--u) * 126); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .72), rgba(255, 246, 230, .32) 38%, rgba(196, 181, 253, .30) 70%, rgba(124, 58, 237, .38));
  backdrop-filter: blur(7px) saturate(1.25); -webkit-backdrop-filter: blur(7px) saturate(1.25);
  box-shadow: inset 0 calc(var(--u) * 2) calc(var(--u) * 1) rgba(255, 255, 255, .75), inset 0 calc(var(--u) * -10) calc(var(--u) * 18) rgba(70, 25, 120, .28), 0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(50, 15, 80, .22), 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(50, 15, 80, .2), 0 calc(var(--u) * 22) calc(var(--u) * 36) rgba(50, 15, 80, .14); }
.av-rim { position: absolute; inset: calc(var(--u) * -2); border-radius: 50%; padding: calc(var(--u) * 2.5);
  background: conic-gradient(from 200deg, rgba(196, 181, 253, .95), rgba(255, 255, 255, .2) 25%, rgba(255, 197, 61, .95) 55%, rgba(255, 255, 255, .15) 80%, rgba(196, 181, 253, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.av-shine { position: absolute; left: 16%; top: 9%; width: 42%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(calc(var(--u) * 3)); rotate: -24deg; }
.av-shadowbox { position: absolute; inset: 0; filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 3) rgba(50, 15, 80, .28)) drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 12) rgba(50, 15, 80, .18)); transform-origin: 50% 100%; }
.av-bust { position: absolute; left: 0; bottom: 0; width: calc(var(--u) * 150); height: calc(var(--u) * 163); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(var(--u) * 101) no-repeat, radial-gradient(circle calc(var(--u) * 63) at calc(var(--u) * 75) calc(var(--u) * 101), #000 98.5%, transparent 100%);
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(var(--u) * 101) no-repeat, radial-gradient(circle calc(var(--u) * 63) at calc(var(--u) * 75) calc(var(--u) * 101), #000 98.5%, transparent 100%); }
.av-rise { position: absolute; inset: 0; transform-origin: 50% 100%; }
/* one element per motion (no move ever cancels or snaps another): .av-rise the entrance and costume rise, .av-breath
   the idle breath, .av-head the entrance head turn, .av-sway the idle sway, .av-face the face's life */
.av-breath { position: absolute; inset: 0; transform-origin: 50% 100%; }
.av-head { position: absolute; inset: 0; transform-origin: 50% 82%; }
.av-sway { position: absolute; inset: 0; transform-origin: 50% 82%; }
.av-face { position: absolute; inset: 0; transform-origin: 50% 80%; }
.av-head img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; }
.av-head .av-half, .av-head .av-closed, .av-head .av-look, .av-head .av-react, .av-head .av-smile, .av-head .av-wink,
.av-head .av-joy { opacity: 0; }
.hud-avatar { transform-origin: 40% 70%; }
.av-bust.wide .av-head img { width: calc(var(--u) * 192); left: calc(var(--u) * -22); bottom: calc(var(--u) * -14); }
.av-burst { position: absolute; left: 50%; top: 58%; width: calc(var(--u) * 180); height: calc(var(--u) * 180); margin: calc(var(--u) * -90) 0 0 calc(var(--u) * -90); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 230, 160, .9), rgba(255, 197, 61, .35) 55%, transparent); }
.hud-avatar:focus-visible .av-plate { box-shadow: 0 0 0 calc(var(--u) * 3) var(--gold), 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(50, 15, 80, .2); }

/* the tablet button: the Glass tablet in miniature, floating */
.hud-tab { position: absolute; right: calc(var(--u) * 22); top: calc(var(--u) * 14); width: calc(var(--u) * 118); height: calc(var(--u) * 110); border: 0; padding: 0; background: none; cursor: pointer; outline: none; }
.tb-in { position: absolute; inset: 0; transform-origin: 50% 70%; }
.tb-glow { position: absolute; left: 50%; top: 52%; width: calc(var(--u) * 150); height: calc(var(--u) * 130); margin: calc(var(--u) * -65) 0 0 calc(var(--u) * -75); border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 220, 140, .85), rgba(255, 197, 61, .35) 50%, rgba(196, 181, 253, .15) 75%, transparent); }
.hud-tab.new .tb-glow { animation: tbglow 2.6s ease-in-out infinite; }
@keyframes tbglow { 0%, 100% { opacity: .35; scale: .92; } 50% { opacity: .85; scale: 1.06; } }
.tb-float { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 6); width: calc(var(--u) * 104); height: calc(var(--u) * 92); }
.tb-tilt { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.3, 1.5, .4, 1); overflow: visible; }
.tb-tilt img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 2) rgba(50, 15, 80, .3)) drop-shadow(0 calc(var(--u) * 9) calc(var(--u) * 10) rgba(50, 15, 80, .22)) drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 22) rgba(50, 15, 80, .14)); }
.tb-tilt::after { content: ""; position: absolute; inset: 14% 10% 22% 12%; border-radius: 10%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 64%); background-size: 260% 100%; background-position: 130% 0;
  mix-blend-mode: soft-light; }
.tb-tilt.glint::after { animation: glint 1.1s cubic-bezier(.45, 0, .2, 1) 1; }
@keyframes glint { 0% { opacity: 0; background-position: 130% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }
.tb-spark { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * -2); width: calc(var(--u) * 34); height: calc(var(--u) * 34); opacity: 0; transition: opacity .4s; }
.tb-spark img { width: 100%; height: 100%; filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 210, 110, .9)); }
.hud-tab.new .tb-spark { opacity: 1; animation: twinkle 1.9s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { scale: .7; rotate: 0deg; } 45% { scale: 1.15; rotate: 25deg; } 60% { scale: .95; } }
.tb-key { position: absolute; left: 50%; bottom: calc(var(--u) * -14); translate: -50% 0; }
.hud-tab:focus-visible .tb-tilt img { filter: drop-shadow(0 0 calc(var(--u) * 4) var(--gold)) drop-shadow(0 calc(var(--u) * 9) calc(var(--u) * 10) rgba(50, 15, 80, .22)); }

/* Windows: small key hints that leave by themselves */
.hud-keys { position: absolute; left: 50%; bottom: calc(var(--u) * 22); translate: -50% 0; display: flex; gap: calc(var(--u) * 12); pointer-events: none; }
.kh { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 9); border-radius: 999px;
  background: rgba(40, 18, 66, .52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), var(--sh-1); }
.kh em { font: 900 calc(var(--u) * 16)/1 "Nunito", sans-serif; color: var(--cream); font-style: normal; margin-left: calc(var(--u) * 4); letter-spacing: calc(var(--u) * .2); }
.kh kbd { min-width: calc(var(--u) * 26); height: calc(var(--u) * 26); font-size: calc(var(--u) * 13); border-radius: calc(var(--u) * 8); }
.kh .wheel { width: calc(var(--u) * 18); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 9); border: calc(var(--u) * 2.5) solid var(--cream); position: relative; margin: 0 calc(var(--u) * 2); }
.kh .wheel::after { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 4); width: calc(var(--u) * 3); height: calc(var(--u) * 7); translate: -50% 0; border-radius: calc(var(--u) * 2); background: var(--gold); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%, 100% { translate: -50% 0; } 50% { translate: -50% calc(var(--u) * 5); } }

/* the goal surfaces (D161): Pix's face, the goal, its progress; then it flies into the tablet */
.hud-goal { position: absolute; left: 50%; top: calc(var(--u) * 20); translate: -50% 0; display: none; }
.hud-goal.on { display: block; }
.gc-in { display: flex; align-items: center; }
.gc-face { position: relative; z-index: 2; width: calc(var(--u) * 92); height: calc(var(--u) * 92); border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #fff, #f2e8ff 60%, #d9c7ff); box-shadow: inset 0 calc(var(--u) * -6) calc(var(--u) * 12) rgba(91, 42, 134, .25), var(--sh-2); }
.gc-face .gc-img { position: absolute; left: 50%; bottom: 0; width: 112%; translate: -50% 0; clip-path: inset(-40% 0 0 0 round 0 0 50% 50%); }
.gc-face .note, .tf-face.note, .th-face.note { display: grid; place-items: center; font-size: calc(var(--u) * 38); color: var(--plum); }
.tf-face.note { font-size: calc(var(--su) * 34); }
.gc-ribbon { position: relative; z-index: 1; margin-left: calc(var(--u) * -30); display: flex; align-items: center; gap: calc(var(--u) * 22); height: calc(var(--u) * 78); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 48);
  border-radius: 0 999px 999px 0; transform-origin: 0 50%;
  background: linear-gradient(180deg, rgba(255, 252, 245, .96), rgba(255, 244, 226, .92)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, inset 0 calc(var(--u) * -4) calc(var(--u) * 10) rgba(91, 42, 134, .12), var(--sh-2); }
.gc-text { display: flex; flex-direction: column; line-height: 1.05; }
.gc-k { font: 1000 calc(var(--u) * 15)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 2); text-transform: uppercase; color: var(--violet); }
.gc-t { font: 900 calc(var(--u) * 27)/1.15 "Nunito", sans-serif; color: var(--ink); white-space: nowrap; margin-top: calc(var(--u) * 4); }
.gc-prog { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.dots { display: flex; gap: calc(var(--u) * 8); align-items: center; }
.dots i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: rgba(91, 42, 134, .2); box-shadow: inset 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, .15); }
.dots i.on { background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc53d 60%, #e09a12); }
.tg-prog.dots i, .tf-prog.dots i { width: calc(var(--su) * 16); height: calc(var(--su) * 16); background: rgba(255, 255, 255, .2); }
.tg-prog.dots i.on, .tf-prog.dots i.on { background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc53d 60%, #e09a12); }
.gc-prog img, .th-prog img, .tf-prog img, .tg-prog img { width: calc(var(--u) * 36); height: calc(var(--u) * 31); object-fit: contain; filter: grayscale(1) opacity(.35); }
.gc-prog img.on, .th-prog img.on, .tf-prog img.on, .tg-prog img.on { filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(50, 15, 80, .3)); }

/* the child asks: a thought bubble out of the avatar */
.hud-thought { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 26); display: none; }
.hud-thought.on { display: block; }
.hud-thought i { position: absolute; border-radius: 50%; background: rgba(255, 252, 245, .96); box-shadow: var(--sh-1); }
.th-d1 { left: calc(var(--u) * -6); top: calc(var(--u) * 92); width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.th-d2 { left: calc(var(--u) * 6); top: calc(var(--u) * 70); width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.th-cloud { position: absolute; left: calc(var(--u) * 22); top: 0; display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) calc(var(--u) * 24) calc(var(--u) * 14) calc(var(--u) * 14); border-radius: calc(var(--u) * 44) calc(var(--u) * 52) calc(var(--u) * 48) calc(var(--u) * 40) / calc(var(--u) * 40) calc(var(--u) * 44) calc(var(--u) * 52) calc(var(--u) * 46);
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 244, 226, .94)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); white-space: nowrap; transform-origin: 0 90%; }
.th-face { width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #efe4ff; }
.th-cloud > span:not(.th-prog) { display: flex; flex-direction: column; line-height: 1.1; font: 900 calc(var(--u) * 22)/1.15 "Nunito", sans-serif; color: var(--ink); }
.th-cloud b { font: 1000 calc(var(--u) * 13)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 2); text-transform: uppercase; color: var(--violet); margin-bottom: calc(var(--u) * 3); }
.th-prog { display: flex; gap: calc(var(--u) * 4); }
.th-prog img { width: calc(var(--u) * 30); height: calc(var(--u) * 26); }

/* a new place: a card that rose from the place, then a star that flies into the tablet */
.hud-fly { position: absolute; inset: 0; z-index: 8; }
.np-card, .nf-card { --k: 1; position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: calc(var(--k) * calc(var(--u) * 14));
  padding: calc(var(--k) * calc(var(--u) * 12)) calc(var(--k) * calc(var(--u) * 30)) calc(var(--k) * calc(var(--u) * 12)) calc(var(--k) * calc(var(--u) * 14)); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 244, 226, .93)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); white-space: nowrap; }
.np-card span, .nf-card span { display: flex; flex-direction: column; line-height: 1.05; }
.np-card small, .nf-card small { font: 1000 calc(var(--k) * calc(var(--u) * 14))/1 "Nunito", sans-serif; letter-spacing: calc(var(--k) * calc(var(--u) * 2)); text-transform: uppercase; color: var(--violet); }
.np-card b, .nf-card b { font: 1000 calc(var(--k) * calc(var(--u) * 30))/1.1 "Nunito", sans-serif; color: var(--ink); margin-top: calc(var(--u) * 3); }
.np-star { width: calc(var(--k) * calc(var(--u) * 62)); height: calc(var(--k) * calc(var(--u) * 60)); object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(150, 90, 0, .35)); }
.np-ring { position: absolute; inset: calc(var(--u) * -6); border-radius: 999px; box-shadow: 0 0 0 calc(var(--u) * 2) rgba(255, 220, 140, .0); }
.np-burst { position: absolute; width: calc(var(--u) * 220); height: calc(var(--u) * 220); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .95), rgba(255, 197, 61, .45) 45%, rgba(255, 197, 61, 0)); }
.nf-card img { width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f4dcc4;
  box-shadow: inset 0 0 0 calc(var(--u) * 3) #fff, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(50, 15, 80, .25); }
.fly-token { position: absolute; object-fit: contain; pointer-events: none; z-index: 9;
  filter: drop-shadow(0 0 calc(var(--u) * 7) rgba(255, 226, 150, .95)) drop-shadow(0 0 calc(var(--u) * 18) rgba(255, 200, 90, .55)) drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 10) rgba(50, 15, 80, .3)); }
.fly-spark { position: absolute; pointer-events: none; z-index: 8; filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 214, 120, .95)); }
.fly-token.round { border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f4dcc4; box-shadow: inset 0 0 0 calc(var(--u) * 3) #fff; }

/* ------------------------------------------------------------------------------------------------ the iOS paws */
.f-ios .hud-avatar { left: calc(var(--u) * 62); top: calc(var(--u) * 6); width: calc(var(--u) * 100); height: calc(var(--u) * 108); }
.f-ios .av-in { scale: .6667; transform-origin: 0 0; width: calc(var(--u) * 150); height: calc(var(--u) * 162); }
.f-ios .hud-tab { right: calc(var(--u) * 60); top: calc(var(--u) * 8); width: calc(var(--u) * 82); height: calc(var(--u) * 76); }
.f-ios .tb-in { scale: .695; transform-origin: 100% 0; width: calc(var(--u) * 118); height: calc(var(--u) * 110); left: auto; right: 0; }
.f-ios .hud-goal { top: calc(var(--u) * 12); scale: .78; transform-origin: 50% 0; }
.f-ios .hud-thought { left: calc(var(--u) * 152); top: calc(var(--u) * 14); scale: .8; transform-origin: 0 0; }

/* the first-time hint on the avatar (finding 11): a soft paw taps on it, rings of light where it touches */
.tapme { position: absolute; left: calc(var(--u) * 132); top: calc(var(--u) * 116); width: calc(var(--u) * 56); height: calc(var(--u) * 62); z-index: 5; pointer-events: none; }
.tapme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 85%;
  filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(50, 15, 80, .35)); }
.tapme .tm-ring { position: absolute; left: calc(var(--u) * -12); top: calc(var(--u) * -14); width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; border: calc(var(--u) * 3) solid rgba(255, 230, 160, .95);
  box-shadow: 0 0 calc(var(--u) * 10) rgba(255, 210, 120, .6); animation: tapring 2.2s ease-out infinite; }
.tapme .tm-ring.r2 { animation-delay: .36s; }
@keyframes tapring { 0%, 24% { scale: .3; opacity: 0; } 30% { opacity: 1; } 62%, 100% { scale: 1.7; opacity: 0; } }
.f-ios .tapme { left: calc(var(--u) * 134); top: calc(var(--u) * 70); scale: .8; transform-origin: 0 0; }
.tm-hint { flex-basis: 100%; font: 800 calc(var(--su) * var(--fs) * 15)/1.2 "Nunito", sans-serif; color: rgba(255, 248, 236, .72); margin-top: calc(var(--su) * 2); }
.tm-count { flex-wrap: wrap; max-width: 46%; }

/* the hero's own little panel under the avatar (D181): My Look, My Tree, Supernormal Senses */
.hud-me { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 180); display: none; z-index: 4; }
.hud-me.on { display: block; }
.me-card { position: relative; display: flex; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 10); border-radius: calc(var(--u) * 28); transform-origin: 26% 0;
  background: linear-gradient(180deg, rgba(255, 252, 245, .96), rgba(255, 244, 226, .93)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); }
.me-notch { position: absolute; left: calc(var(--u) * 66); top: calc(var(--u) * -9); width: calc(var(--u) * 20); height: calc(var(--u) * 20); rotate: 45deg; border-radius: calc(var(--u) * 4); background: rgba(255, 252, 245, .97); }
.me-item { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); width: calc(var(--u) * 96); border: 0; padding: calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 4); background: none;
  cursor: pointer; border-radius: calc(var(--u) * 18); transition: background .25s; outline: none; }
.me-item:hover, .me-item:focus-visible { background: rgba(124, 58, 237, .09); }
.me-ic { width: calc(var(--u) * 70); height: calc(var(--u) * 62); transform-origin: 50% 70%; }
.me-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(50, 15, 80, .3)); }
.me-item:hover .me-ic img { translate: 0 calc(var(--u) * -3); transition: translate .4s cubic-bezier(.3, 1.6, .4, 1); }
.me-lb { font: 1000 calc(var(--u) * 16)/1.08 "Nunito", sans-serif; color: var(--ink); text-align: center; }
.f-ios .hud-me { left: calc(var(--u) * 58); top: calc(var(--u) * 112); scale: .78; transform-origin: 0 0; }
.tab-open .hud-me { display: none; }

/* the hero and every character on the map stand out from the busy painting (D181): a warm rim of light on the side
   facing the sun (upper left), a thin soft dark line round the silhouette, a soft lift shadow, a touch of brightness */
.sprites canvas.hero, .sprites .npc { filter: drop-shadow(-0.5px -0.7px 0.5px rgba(255, 240, 205, .6)) drop-shadow(0 0 1px rgba(46, 18, 66, .55))
  drop-shadow(0 2.5px 4px rgba(40, 16, 60, .22)) brightness(1.06) saturate(1.07); }
/* and a soft warm pool of light on the ground under each of them, so the eye finds them first on a busy square */
.sprites .npc-sh { background: radial-gradient(closest-side, rgba(40, 20, 10, .46), rgba(40, 20, 10, .16) 60%, rgba(40, 20, 10, 0)); }
.sprites .glow { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .30), rgba(255, 226, 170, .12) 55%, rgba(255, 226, 170, 0)); mix-blend-mode: soft-light; }
.f-ios .np-card { --k: .72; }
/* the floating joystick's zone stays out of the home-indicator band, where iOS takes swipes first (nit 25) */
.paw-zone { position: absolute; left: 0; bottom: calc(var(--u) * 21); width: 46%; height: calc(62% - calc(var(--u) * 21)); touch-action: none; z-index: 1; }
.paw-joy { position: absolute; left: calc(var(--u) * 71); top: calc(var(--u) * 257); width: calc(var(--u) * 108); height: calc(var(--u) * 108); touch-action: none; z-index: 2; perspective: calc(var(--u) * 300); }
/* it lands under the thumb in 90 ms and glides home with a small overshoot (finding 3) */
.paw-joy { transition: opacity .32s, translate .42s cubic-bezier(.3, 1.35, .5, 1); }
.paw-joy.held { transition: opacity .32s, translate 90ms cubic-bezier(.2, .9, .3, 1); }
.tab-open .paw-joy { transition: opacity .32s cubic-bezier(.55, 0, .78, .2), translate .4s cubic-bezier(.55, 0, .78, .2); }
.pj-base { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 46%, rgba(255, 255, 255, .26) 66%, rgba(255, 255, 255, .1) 72%, transparent 73%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42), inset 0 calc(var(--u) * -6) calc(var(--u) * 12) rgba(70, 25, 120, .22), 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(50, 15, 80, .2);
  transition: scale .45s cubic-bezier(.3, 1.6, .4, 1), opacity .3s; }
.pj-base i { position: absolute; inset: calc(var(--u) * 9); border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .35); animation: spin 26s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.paw-joy.held .pj-base { scale: 1.08; }
.pj-knob { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 86); height: calc(var(--u) * 86); margin: calc(var(--u) * -43) 0 0 calc(var(--u) * -43); transform-style: preserve-3d; will-change: transform; }
.pj-tilt { position: absolute; inset: 0; rotate: -6deg; transform-origin: 50% 60%; }
.pj-tilt img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(60, 20, 90, .3)) drop-shadow(0 calc(var(--u) * 7) calc(var(--u) * 8) rgba(60, 20, 90, .25)) drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 18) rgba(60, 20, 90, .14)); }
.paw-act { position: absolute; left: calc(var(--u) * 670); top: calc(var(--u) * 256); width: calc(var(--u) * 110); height: calc(var(--u) * 110); border: 0; padding: 0; background: none; cursor: pointer; outline: none; z-index: 2; }
.pa-halo { position: absolute; inset: calc(var(--u) * -18); border-radius: 50%; opacity: 0; transition: opacity .5s;
  background: radial-gradient(closest-side, rgba(255, 224, 150, .95), rgba(255, 197, 61, .45) 55%, transparent); }
.paw-act.awake .pa-halo { opacity: 1; animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { scale: .9; opacity: .65; } 50% { scale: 1.06; opacity: 1; } }
.pa-in { position: absolute; inset: 0; transform-origin: 50% 65%; }
/* asleep: smaller and paler. ONE owner of its size (inspection finding 2): this transform is the asleep rest, and the
   wake / sleep moves in hud.js hold their end pose (fill forwards); nothing else scales it */
.pa-tilt { position: absolute; inset: calc(var(--u) * 6); rotate: 6deg; transform: scale(.86); transform-origin: 50% 60%;
  filter: saturate(.32) brightness(1.06) opacity(.72); transition: filter .5s; }
.paw-act.awake .pa-tilt { filter: none; }
.pa-tilt img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(60, 20, 90, .3)) drop-shadow(0 calc(var(--u) * 7) calc(var(--u) * 8) rgba(60, 20, 90, .25)) drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 18) rgba(60, 20, 90, .14)); }
.pa-bubble { position: absolute; left: calc(var(--u) * -34); top: calc(var(--u) * -40); width: calc(var(--u) * 54); height: calc(var(--u) * 48); opacity: 0; pointer-events: none; }
.paw-act.awake .pa-bubble { opacity: 1; animation: bob 2s ease-in-out infinite; }
.pa-bubble img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(50, 15, 80, .3)); }
.pa-ripple { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * 3) solid rgba(255, 230, 160, .95); pointer-events: none; }


/* ------------------------------------------------------------------------------------------------ the tablet */
.tablet-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.tablet { position: absolute; inset: 0; display: none; pointer-events: auto; perspective: calc(var(--u) * 1800); }
.tablet.on { display: block; }
.tl-dim { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 70%, rgba(20, 6, 40, .25), rgba(16, 4, 34, .6));
  backdrop-filter: blur(5px) saturate(1.1); -webkit-backdrop-filter: blur(5px) saturate(1.1); }
/* D181: the whole tablet with BOTH paws in the frame. The picture's sleeves end at its left, right and bottom edges, so
   those edges must lie on the frame's edges (the arms come in from outside the view, never cut inside it). Windows:
   the picture is 16:9 like the frame, so it is exactly the frame. iPhone: the picture spans the frame's width and its
   top sits just under the frame's top edge; the bezel's bottom stays inside, only the sleeves run off the bottom. */
.tl-rig { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1672 / 941; transform-origin: 50% 100%; }
.f-ios .tl-rig { top: calc(var(--u) * -19); bottom: auto; }
.tl-hold { position: absolute; inset: 0; transform-origin: 50% 90%; }
.tl-device { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 26) rgba(10, 0, 30, .45)); }
/* everything on the glass stays on the glass: clip-path clips even the composited, blurred ambient light while the
   tablet itself moves (overflow + border-radius alone let it leak past the screen's edge in Chrome) */
.tl-screen { clip-path: inset(0 round 1.9% / 3.4%); contain: paint; }
.tl-screen { position: absolute; overflow: hidden; border-radius: 1.9% / 3.4%; container-type: size; --su: calc(100cqw / 1000); --fs: 1;
  background: #0e0620; isolation: isolate; }
.ts-bg { position: absolute; inset: 0; background: radial-gradient(90% 80% at 20% 0%, #3a1a6e, transparent 60%), radial-gradient(80% 70% at 100% 100%, #23105a, transparent 60%),
  linear-gradient(160deg, #1d0c3e, #120726 60%, #0d0520); }
/* the slow ambient light: soft gradients that already fade out before their own edge (no blur filter to escape) */
.ts-aur { position: absolute; width: 70%; height: 70%; border-radius: 50%; opacity: .55; }
.ts-aur.a1 { left: 0%; top: -12%; background: radial-gradient(closest-side, rgba(124, 58, 237, .62), rgba(124, 58, 237, .18) 55%, transparent); animation: aur1 14s ease-in-out infinite alternate; }
.ts-aur.a2 { right: 0%; bottom: -14%; background: radial-gradient(closest-side, rgba(255, 170, 80, .34), rgba(255, 170, 80, .1) 55%, transparent); animation: aur2 17s ease-in-out infinite alternate; }
@keyframes aur1 { to { translate: 12% 8%; scale: 1.1; } }
@keyframes aur2 { to { translate: -10% -6%; scale: .92; } }
.ts-view { position: absolute; inset: 0; }
.ts-sweep { position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), rgba(255, 236, 200, .32), transparent); }
.ts-glare { position: absolute; inset: 0; pointer-events: none; opacity: .65;
  background: linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 26%, transparent 27%, transparent 60%, rgba(255, 255, 255, .05) 61%, transparent 70%); }
.ts-home { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ts-top { position: absolute; left: calc(var(--su) * 44); right: calc(var(--su) * 44); top: calc(var(--su) * 26); display: flex; align-items: center; justify-content: space-between; color: var(--cream); }
.ts-loc { display: flex; align-items: baseline; gap: calc(var(--su) * 12); }
.ts-loc b { font: 1000 calc(var(--su) * var(--fs) * 30)/1 "Nunito", sans-serif; }
.ts-loc span { font: 800 calc(var(--su) * var(--fs) * 22)/1 "Nunito", sans-serif; color: rgba(255, 248, 236, .62); }
/* Settings (D181): a small cog in the screen's top-right corner, where "Morning" used to be */
.ts-corner { position: relative; width: calc(var(--su) * 66); height: calc(var(--su) * 62); border: 0; padding: 0; background: none; cursor: pointer; outline: none; }
.ts-corner .ap-ic { width: 100%; height: 100%; }
.ts-corner.hov .ap-ic { rotate: 30deg; }
.ts-corner .ap-ic { transition: transform .45s cubic-bezier(.3, 1.5, .4, 1), rotate .6s cubic-bezier(.3, 1.4, .4, 1); }
/* eight items, four by two, all inside the glass; a long name takes two lines */
.ts-grid { position: absolute; left: calc(var(--su) * 56); right: calc(var(--su) * 56); top: calc(var(--su) * 92); bottom: calc(var(--su) * 34); display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr); gap: calc(var(--su) * 4) calc(var(--su) * 18); }
.ts-app { position: relative; border: 0; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: calc(var(--su) * 6); outline: none; min-width: 0; }
.ap-ic { position: relative; width: calc(var(--su) * 134); height: calc(var(--su) * 120); transition: transform .45s cubic-bezier(.3, 1.5, .4, 1); transform-origin: 50% 70%; flex: 0 0 auto; }
.ts-app[data-app="friends"] .ap-ic img { scale: 1.22; }        /* the grid only: in a header it would touch the title (nit 26) */
.ts-app[data-app="map"] .ap-ic img { scale: 1.06; }
.ap-ic img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 calc(var(--su) * 3) calc(var(--su) * 3) rgba(0, 0, 0, .35)) drop-shadow(0 calc(var(--su) * 10) calc(var(--su) * 14) rgba(10, 0, 30, .35)); }
.ap-sh { position: absolute; left: 50%; top: calc(50% + calc(var(--su) * 48)); width: calc(var(--su) * 104); height: calc(var(--su) * 16); margin-left: calc(var(--su) * -52); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); transition: scale .45s, opacity .45s; }
.ts-app.hov .ap-sh { scale: .82; opacity: .6; }
.ts-app.hov::before { content: ""; position: absolute; left: 50%; top: 46%; width: calc(var(--su) * 190); height: calc(var(--su) * 190); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 181, 253, .22), transparent); pointer-events: none; }
.ap-lb { font: 1000 calc(var(--su) * var(--fs) * 25)/1.05 "Nunito", sans-serif; color: var(--cream); text-shadow: 0 calc(var(--su) * 2) calc(var(--su) * 6) rgba(0, 0, 0, .45); letter-spacing: calc(var(--su) * .3);
  text-align: center; max-width: 100%; min-height: 2.1em; display: flex; align-items: flex-start; justify-content: center; }
.ts-focus { position: absolute; left: 50%; bottom: calc(var(--su) * 30); translate: -50% 0; width: calc(var(--su) * 560); height: calc(var(--su) * 86); border: 0; cursor: pointer; display: flex; align-items: center; gap: calc(var(--su) * 16);
  padding: 0 calc(var(--su) * 24) 0 calc(var(--su) * 12); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), inset 0 calc(var(--su) * 1.5) 0 rgba(255, 255, 255, .22), 0 calc(var(--su) * 10) calc(var(--su) * 30) rgba(0, 0, 0, .3); color: var(--cream); text-align: left; }
.tf-face { width: calc(var(--su) * 64); height: calc(var(--su) * 64); border-radius: 50%; object-fit: cover; object-position: 50% 14%; background: #efe4ff; box-shadow: inset 0 0 0 calc(var(--su) * 3) rgba(255, 255, 255, .5); }
.tf-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.1; }
.tf-txt small { font: 1000 calc(var(--su) * var(--fs) * 15)/1 "Nunito", sans-serif; letter-spacing: calc(var(--su) * 2); text-transform: uppercase; color: var(--gold); }
.tf-txt b { font: 900 calc(var(--su) * var(--fs) * 25)/1.15 "Nunito", sans-serif; margin-top: calc(var(--su) * 4); }
.tf-prog { display: flex; gap: calc(var(--su) * 6); }
.tf-prog img { width: calc(var(--su) * 36); height: calc(var(--su) * 31); }
.tl-close { position: absolute; right: calc(var(--u) * 24); top: calc(var(--u) * 18); width: calc(var(--u) * 64); height: calc(var(--u) * 64); border: 0; border-radius: 50%; cursor: pointer; z-index: 3;
  background: rgba(255, 252, 245, .9); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); }
/* the small controls are Codex illustrations too (finding 10): an icon centred in its soft button */
.tl-close img, .tp-back img, .tm-zoom button img, .tst-gate img, .tg-btn.icon img { position: absolute; left: 50%; top: 50%; width: 62%; height: 62%;
  translate: -50% -50%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(40, 10, 60, .3)); }
.tl-close img { top: 56%; }
.tm-zoom button { position: relative; }
.tg-btn.icon { position: relative; width: calc(var(--su) * 60); height: calc(var(--su) * 60); padding: 0; background: linear-gradient(180deg, #fffdf7, #f3e9da);
  box-shadow: 0 calc(var(--su) * 4) 0 #cdbda1, 0 calc(var(--su) * 8) calc(var(--su) * 16) rgba(0, 0, 0, .3); }
.tg-btn.icon img { width: 52%; height: 52%; left: 54%; filter: drop-shadow(0 1px 1px rgba(120, 60, 0, .35)); }
.f-ios .tg-btn.icon { width: calc(var(--su) * 78); height: calc(var(--su) * 78); padding: 0; }
.f-ios .tl-screen { --fs: 1.15; }
/* the thumbs hold the glass by its lower corners: the outer items stay clear of them */
.f-ios .ts-grid { left: calc(var(--su) * 60); right: calc(var(--su) * 60); gap: calc(var(--su) * 2) calc(var(--su) * 6); }
/* iPhone: every control at least 44 pt (1 su = 0.58 pt here: 78 su), small labels at least 12 pt (21 su) (findings 7, 8) */
.f-ios .tp-back, .f-ios .tm-zoom button, .f-ios .tst-seg button { width: calc(var(--su) * 78); height: calc(var(--su) * 78); }
.f-ios .tg-btn { min-height: calc(var(--su) * 78); padding: 0 calc(var(--su) * 28); }
.f-ios .tst-slider::before { content: ""; position: absolute; inset: calc(var(--su) * -32) calc(var(--su) * -8); }
.f-ios .tst-knob::before { content: ""; position: absolute; inset: calc(var(--su) * -20); }
/* the Settings cog stays small to the eye, its touch area is 90 x 82 su (about 53 x 48 pt); it grows up and to the
   sides, not down, so it never takes the top of the app tile under it */
.f-ios .ts-corner::before { content: ""; position: absolute; inset: calc(var(--su) * -18) calc(var(--su) * -12) calc(var(--su) * -2); }
.f-ios .tst-knob { width: calc(var(--su) * 46); height: calc(var(--su) * 46); margin: calc(var(--su) * -23) 0 0 calc(var(--su) * -23); }
.f-ios .tg-txt small, .f-ios .tm-count, .f-ios .tm-pin b, .f-ios .tpl-card b, .f-ios .tfr-card small, .f-ios .tfr-card em,
.f-ios .tm-hint { font-size: calc(var(--su) * 21); }
.f-ios .tm-count b { font-size: calc(var(--su) * 30); }
.f-ios .th-cloud b { font-size: calc(var(--u) * 17); }
.f-ios .np-card small, .f-ios .nf-card small { font-size: calc(var(--k) * calc(var(--u) * 19)); }
.f-ios .tp-head { height: calc(var(--su) * 84); top: calc(var(--su) * 14); }
.f-ios .tp-body { top: calc(var(--su) * 108); }
.f-ios .ap-ic { width: calc(var(--su) * 116); height: calc(var(--su) * 104); }
.f-ios .tg-card { padding: calc(var(--su) * 8) calc(var(--su) * 14); }
.f-ios .tg-list { gap: calc(var(--su) * 10); }
.f-ios .tpl-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: calc(var(--su) * 10); }
.f-ios .tl-close { right: calc(var(--u) * 59); top: calc(var(--u) * 8); width: calc(var(--u) * 46); height: calc(var(--u) * 46); }

/* panels: an app opened from its icon */
.ts-panel { position: absolute; inset: 0; }
.tp-bg { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(48, 22, 98, .80), rgba(22, 9, 48, .86));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tp-head { position: absolute; left: calc(var(--su) * 40); right: calc(var(--su) * 40); top: calc(var(--su) * 20); height: calc(var(--su) * 70); display: flex; align-items: center; gap: calc(var(--su) * 14); color: var(--cream); }
.tp-head b { font: 1000 calc(var(--su) * var(--fs) * 34)/1 "Nunito", sans-serif; }
.tp-ic { width: calc(var(--su) * 70); height: calc(var(--su) * 62); }
.tp-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--su) * 4) calc(var(--su) * 6) rgba(0, 0, 0, .35)); }
.tp-back { width: calc(var(--su) * 56); height: calc(var(--su) * 56); border: 0; border-radius: 50%; cursor: pointer; position: relative; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.tp-sp { flex: 1; }
.tp-body { position: absolute; left: calc(var(--su) * 64); right: calc(var(--su) * 64); top: calc(var(--su) * 104); bottom: calc(var(--su) * 40); color: var(--cream); }
.tm-wrap { position: absolute; inset: 0; border-radius: calc(var(--su) * 22); overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); cursor: grab; touch-action: none; }
.tm-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-pins { position: absolute; inset: 0; pointer-events: none; }
.tm-pin { position: absolute; translate: -50% -100%; display: flex; flex-direction: column; align-items: center; }
.tm-pin img { width: calc(var(--su) * 46); height: calc(var(--su) * 54); object-fit: contain; filter: drop-shadow(0 calc(var(--su) * 3) calc(var(--su) * 4) rgba(0, 0, 0, .45)); animation: pinbob 2.4s ease-in-out infinite; }
.tm-pin b { margin-top: calc(var(--su) * 2); padding: calc(var(--su) * 4) calc(var(--su) * 10); border-radius: 999px; font: 900 calc(var(--su) * var(--fs) * 16)/1 "Nunito", sans-serif; color: var(--ink); background: rgba(255, 252, 245, .92); white-space: nowrap; box-shadow: 0 calc(var(--su) * 3) calc(var(--su) * 8) rgba(0, 0, 0, .3); }
@keyframes pinbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--su) * -4); } }
.tm-me { position: absolute; width: calc(var(--su) * 62); height: calc(var(--su) * 62); translate: -50% -50%; border-radius: 50%; overflow: hidden; background: #efe4ff;
  box-shadow: 0 0 0 calc(var(--su) * 4) #fff, 0 0 0 calc(var(--su) * 9) rgba(255, 197, 61, .55), 0 calc(var(--su) * 8) calc(var(--su) * 18) rgba(0, 0, 0, .4); }
.tm-me::after { content: ""; position: absolute; inset: calc(var(--su) * -14); border-radius: 50%; border: calc(var(--su) * 3) solid rgba(255, 220, 140, .9); animation: ring 2.2s ease-out infinite; }
.tm-me img { position: absolute; left: 50%; top: 2%; width: 130%; translate: -50% 0; }
.tm-zoom { position: absolute; right: calc(var(--su) * 18); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: calc(var(--su) * 10); }
.tm-zoom button { width: calc(var(--su) * 54); height: calc(var(--su) * 54); border: 0; border-radius: 50%; cursor: pointer; font: 1000 calc(var(--su) * var(--fs) * 30)/1 "Nunito", sans-serif; color: var(--ink);
  background: rgba(255, 252, 245, .92); box-shadow: inset 0 calc(var(--su) * 2) 0 #fff, 0 calc(var(--su) * 6) calc(var(--su) * 14) rgba(0, 0, 0, .35); }
.tm-count { position: absolute; left: calc(var(--su) * 18); bottom: calc(var(--su) * 16); display: flex; align-items: center; gap: calc(var(--su) * 8); padding: calc(var(--su) * 8) calc(var(--su) * 16) calc(var(--su) * 8) calc(var(--su) * 10); border-radius: 999px;
  background: rgba(20, 8, 44, .72); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); font: 900 calc(var(--su) * 20)/1 "Nunito", sans-serif; }
.tm-count img { width: calc(var(--su) * 30); height: calc(var(--su) * 34); object-fit: contain; }
.tm-count b { font-size: calc(var(--su) * var(--fs) * 26); color: var(--gold); }
.tpl-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); gap: calc(var(--su) * 16); }
.tpl-card { display: flex; flex-direction: column; gap: calc(var(--su) * 8); align-items: stretch; }
.tpl-pic { flex: 1; border-radius: calc(var(--su) * 16); background: rgba(255, 255, 255, .05) center / cover no-repeat; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.tpl-pic i { position: absolute; inset: 22% 26%; border-radius: 50% 50% 46% 46%; background: rgba(255, 255, 255, .08); }
.tpl-card.on .tpl-pic { box-shadow: inset 0 0 0 calc(var(--su) * 2) rgba(255, 220, 140, .8), 0 calc(var(--su) * 8) calc(var(--su) * 20) rgba(0, 0, 0, .35); }
.tpl-card b { font: 900 calc(var(--su) * var(--fs) * 17)/1.1 "Nunito", sans-serif; text-align: center; min-height: calc(var(--su) * 20); }
.tfr-row { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--su) * 22); align-items: stretch; }
.tfr-card { border-radius: calc(var(--su) * 24); padding: calc(var(--su) * 18); display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--su) * 6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.tfr-face { width: calc(var(--su) * 150); height: calc(var(--su) * 150); border-radius: 50%; overflow: hidden; position: relative; background: radial-gradient(circle at 40% 30%, #fff, #e9dcff 60%, #c9b4ff);
  box-shadow: 0 calc(var(--su) * 10) calc(var(--su) * 24) rgba(0, 0, 0, .35); margin-bottom: calc(var(--su) * 8); }
.tfr-face img { position: absolute; left: 50%; top: 4%; width: 118%; translate: -50% 0; }
.tfr-card.off .tfr-face { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.tfr-card.off .tfr-face i { position: absolute; inset: 24%; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.tfr-card b { font: 1000 calc(var(--su) * var(--fs) * 28)/1.1 "Nunito", sans-serif; }
.tfr-card small { font: 800 calc(var(--su) * var(--fs) * 18)/1.2 "Nunito", sans-serif; color: rgba(255, 248, 236, .66); }
.tfr-card em { font: 900 calc(var(--su) * var(--fs) * 18)/1.2 "Nunito", sans-serif; color: var(--gold); font-style: normal; }
.tg-list { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(var(--su) * 14); }
.tg-card { display: flex; align-items: center; gap: calc(var(--su) * 16); padding: calc(var(--su) * 12) calc(var(--su) * 16); border-radius: calc(var(--su) * 22); background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.tg-card.focus { background: linear-gradient(180deg, rgba(255, 220, 140, .24), rgba(255, 197, 61, .1)); box-shadow: inset 0 0 0 calc(var(--su) * 2) rgba(255, 210, 110, .75), 0 calc(var(--su) * 10) calc(var(--su) * 24) rgba(0, 0, 0, .3); }
.tg-card.paused { opacity: .7; }
.tg-face { width: calc(var(--su) * 76); height: calc(var(--su) * 76); border-radius: 50%; object-fit: cover; object-position: 50% 14%; background: #efe4ff; flex: 0 0 auto; }
.tg-face.note { display: grid; place-items: center; font-size: calc(var(--su) * 40); color: var(--ink); }
.tg-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.1; }
.tg-txt small { font: 1000 calc(var(--su) * var(--fs) * 15)/1 "Nunito", sans-serif; letter-spacing: calc(var(--su) * 2); text-transform: uppercase; color: var(--gold); }
.tg-txt b { font: 900 calc(var(--su) * var(--fs) * 27)/1.15 "Nunito", sans-serif; margin: calc(var(--su) * 4) 0 calc(var(--su) * 6); }
.tg-prog { display: flex; gap: calc(var(--su) * 6); }
.tg-prog img { width: calc(var(--su) * 34); height: calc(var(--su) * 29); }
.tg-dots { display: flex; gap: calc(var(--su) * 8); }
.tg-dots i { width: calc(var(--su) * 16); height: calc(var(--su) * 16); border-radius: 50%; background: rgba(255, 255, 255, .2); }
.tg-dots i.on { background: var(--gold); }
.tg-btn { border: 0; cursor: pointer; padding: calc(var(--su) * 14) calc(var(--su) * 24); border-radius: 999px; font: 1000 calc(var(--su) * var(--fs) * 21)/1 "Nunito", sans-serif; color: #3a1b00;
  background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--su) * 4) 0 #b9750a, 0 calc(var(--su) * 8) calc(var(--su) * 16) rgba(0, 0, 0, .3); }
.tg-btn.ghost { color: var(--cream); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.tg-confirm { position: absolute; inset: calc(var(--su) * -110) calc(var(--su) * -36) calc(var(--su) * -32); display: none; place-items: center; background: rgba(12, 4, 28, .55); backdrop-filter: blur(4px); border-radius: 0; }
.tg-confirm.on { display: grid; }
.tgc-in { display: flex; flex-direction: column; align-items: center; gap: calc(var(--su) * 10); padding: calc(var(--su) * 30) calc(var(--su) * 40); border-radius: calc(var(--su) * 30); background: rgba(255, 252, 245, .97); color: var(--ink); box-shadow: var(--sh-2); }
.tgc-in b { font: 1000 calc(var(--su) * var(--fs) * 32)/1.1 "Nunito", sans-serif; }
.tgc-in span { font: 800 calc(var(--su) * var(--fs) * 22)/1.2 "Nunito", sans-serif; color: var(--plum); }
.tgc-btns { display: flex; gap: calc(var(--su) * 14); margin-top: calc(var(--su) * 10); }
.tgc-btns .ghost { color: var(--plum); background: rgba(91, 42, 134, .1); box-shadow: inset 0 0 0 1.5px rgba(91, 42, 134, .25); }
.tst-list { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(var(--su) * 16); padding: calc(var(--su) * 6) calc(var(--su) * 30); }
.tst-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--su) * 30); padding: calc(var(--su) * 16) calc(var(--su) * 22); border-radius: calc(var(--su) * 20); background: rgba(255, 255, 255, .07); font: 900 calc(var(--su) * var(--fs) * 25)/1 "Nunito", sans-serif; }
.tst-slider { position: relative; width: calc(var(--su) * 420); height: calc(var(--su) * 18); border-radius: 999px; background: rgba(255, 255, 255, .14); cursor: pointer; touch-action: none; }
.tst-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); border-radius: 999px; background: linear-gradient(90deg, #a78bfa, #ffc53d); }
.tst-knob { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: calc(var(--su) * 40); height: calc(var(--su) * 40); margin: calc(var(--su) * -20) 0 0 calc(var(--su) * -20); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #f1e7d6); box-shadow: 0 calc(var(--su) * 4) 0 #cdbda1, 0 calc(var(--su) * 8) calc(var(--su) * 16) rgba(0, 0, 0, .35); transition: scale .35s cubic-bezier(.3, 1.8, .4, 1); }
.tst-slider.held .tst-knob { scale: 1.2; }
.tst-seg { display: inline-flex; gap: calc(var(--su) * 6); padding: calc(var(--su) * 5); border-radius: 999px; background: rgba(255, 255, 255, .1); }
.tst-seg button { border: 0; cursor: pointer; width: calc(var(--su) * 64); height: calc(var(--su) * 46); border-radius: 999px; background: transparent; color: var(--cream); font-weight: 1000; }
.tst-seg button:nth-child(1) { font-size: calc(var(--su) * var(--fs) * 18); } .tst-seg button:nth-child(2) { font-size: calc(var(--su) * var(--fs) * 24); } .tst-seg button:nth-child(3) { font-size: calc(var(--su) * var(--fs) * 31); }
.tst-seg button.on { background: var(--gold); color: #3a1b00; }
.tst-row.lock { color: rgba(255, 248, 236, .55); }
.tst-gate { width: calc(var(--su) * 56); height: calc(var(--su) * 56); position: relative; opacity: .9; }
.tst-gate img { width: 100%; height: 100%; }
.thm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--su) * 10); text-align: center; }
.thm-ic { width: calc(var(--su) * 210); height: calc(var(--su) * 190); margin-bottom: calc(var(--su) * 8); animation: bob 3.4s ease-in-out infinite; }
.thm-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--su) * 12) calc(var(--su) * 18) rgba(0, 0, 0, .4)); }
.thm b { font: 1000 calc(var(--su) * var(--fs) * 40)/1 "Nunito", sans-serif; }
.thm span { font: 800 calc(var(--su) * var(--fs) * 23)/1.3 "Nunito", sans-serif; color: rgba(255, 248, 236, .7); max-width: calc(var(--su) * 560); }
.thm em { margin-top: calc(var(--su) * 10); padding: calc(var(--su) * 10) calc(var(--su) * 22); border-radius: 999px; font: 1000 calc(var(--su) * var(--fs) * 19)/1 "Nunito", sans-serif; font-style: normal; color: var(--gold); box-shadow: inset 0 0 0 calc(var(--su) * 2) rgba(255, 197, 61, .6); }

/* pages the owner describes later (D181): the icon big and alive in its own way, one line, "Coming soon" */
.tsoon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--su) * 60); }
.tsoon-art { position: relative; width: calc(var(--su) * 290); height: calc(var(--su) * 290); flex: 0 0 auto; }
.tsoon-ic { position: absolute; inset: 0; transform-origin: 50% 88%; }
.tsoon-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--su) * 16) calc(var(--su) * 22) rgba(0, 0, 0, .45)); }
.tsoon-txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--su) * 20); max-width: calc(var(--su) * 400); }
.tsoon-txt span { font: 900 calc(var(--su) * var(--fs) * 31)/1.25 "Nunito", sans-serif; color: rgba(255, 248, 236, .9); }
.tsoon-txt em { padding: calc(var(--su) * 11) calc(var(--su) * 24); border-radius: 999px; font: 1000 calc(var(--su) * var(--fs) * 20)/1 "Nunito", sans-serif; font-style: normal; color: var(--gold);
  box-shadow: inset 0 0 0 calc(var(--su) * 2) rgba(255, 197, 61, .6); }
.tsoon-fred .tsoon-ic { animation: callme 3.4s ease-in-out infinite; }
@keyframes callme { 0%, 64%, 100% { rotate: 0deg; } 68% { rotate: -7deg; } 72% { rotate: 6deg; } 76% { rotate: -5deg; } 80% { rotate: 4deg; } 84% { rotate: -2deg; } 88% { rotate: 0deg; } }
.tsoon-tree .tsoon-ic { animation: treesway 5.2s ease-in-out infinite alternate; }
@keyframes treesway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
.tsoon-senses .tsoon-ic { animation: sense 2.6s ease-in-out infinite; }
@keyframes sense { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
.tsoon-senses .tsoon-art::after { content: ""; position: absolute; left: 34%; top: 14%; width: 46%; height: 46%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 226, 150, .55), transparent); animation: senseglow 2.6s ease-in-out infinite; }
@keyframes senseglow { 0%, 100% { opacity: .2; scale: .9; } 50% { opacity: .9; scale: 1.1; } }
.tsoon-look .tsoon-ic { animation: bob 3.8s ease-in-out infinite; }
/* My Tree: the three branches in the MVP brief's colours, each name beside its crown (the names are a proposal) */
.tt-branches { position: absolute; inset: 0; pointer-events: none; }
.tt-b { position: absolute; display: flex; align-items: center; gap: calc(var(--su) * 10); font: 1000 calc(var(--su) * var(--fs) * 24)/1 "Nunito", sans-serif; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 45%, white); text-shadow: 0 calc(var(--su) * 2) calc(var(--su) * 8) rgba(0, 0, 0, .55); }
.tt-b i { width: calc(var(--su) * 18); height: calc(var(--su) * 18); border-radius: 50%; background: var(--c); box-shadow: 0 0 calc(var(--su) * 16) var(--c), inset 0 calc(var(--su) * 2) calc(var(--su) * 3) rgba(255, 255, 255, .5); flex: 0 0 auto; }
.tt-mind { left: 66%; top: 6%; }
.tt-heart { left: -2%; top: 40%; translate: -100% 0; flex-direction: row-reverse; }
.tt-body { right: -2%; top: 40%; translate: 100% 0; }
.tsoon-tree { flex-direction: column; gap: calc(var(--su) * 22); }
.tsoon-tree .tsoon-art { width: calc(var(--su) * 236); height: calc(var(--su) * 236); }
.tsoon-tree .tsoon-txt { align-items: center; text-align: center; max-width: calc(var(--su) * 700); gap: calc(var(--su) * 14); }

/* ------------------------------------------------------------------------------------------------ 2 the conversation */
.talk { position: absolute; inset: 0; overflow: hidden; perspective: calc(var(--u) * 1600); }
.tk-bg { position: absolute; inset: -2%; overflow: hidden; filter: blur(calc(var(--u) * 7)) brightness(.88); }
.tk-bg img { position: absolute; left: calc(var(--u) * -1354); top: calc(var(--u) * -1089); width: calc(var(--u) * 3447); height: auto; transform-origin: 62.5% 62.5%; scale: 1; }
.tk-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 22% 70%, rgba(255, 210, 140, .22), transparent 70%), radial-gradient(140% 100% at 50% 40%, transparent 50%, rgba(30, 8, 50, .55) 100%),
  linear-gradient(90deg, transparent 40%, rgba(30, 10, 55, .28)); }
.tk-lila { position: absolute; left: calc(var(--u) * 60); bottom: calc(var(--u) * -46); width: calc(var(--u) * 640); height: calc(var(--u) * 822); transform-origin: 50% 100%; }
.tk-lila-in { position: absolute; inset: 0; transform-origin: 50% 100%; filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 30) rgba(40, 10, 60, .35)) drop-shadow(calc(var(--u) * -6) 0 calc(var(--u) * 18) rgba(255, 210, 140, .35)); }
.tk-breath { position: absolute; inset: 0; transform-origin: 50% 100%; }
.tk-face { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; }
.tk-face.on { opacity: 1; }
.tk-card { position: absolute; left: calc(var(--u) * 640); top: calc(var(--u) * 110); max-width: calc(var(--u) * 820); padding: calc(var(--u) * 22) calc(var(--u) * 36) calc(var(--u) * 26); border-radius: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 12); transform-origin: 0 100%;
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .94)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); }
.tk-card::before { content: ""; position: absolute; left: calc(var(--u) * -16); bottom: calc(var(--u) * 26); width: calc(var(--u) * 34); height: calc(var(--u) * 34); rotate: 45deg; border-radius: calc(var(--u) * 6); background: rgba(255, 247, 232, .96); z-index: -1; }
.tk-name { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.tk-name b { font: 1000 calc(var(--u) * 20)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 3); text-transform: uppercase; color: var(--violet); }
.tk-voice { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 22); }
.tk-voice i, .pl-voice i { display: block; width: calc(var(--u) * 5); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 3); background: linear-gradient(180deg, #b69cff, #7c3aed); transform: scaleY(.3); }
.tk-listen { margin-left: auto; width: calc(var(--u) * 46); height: calc(var(--u) * 42); border: 0; padding: 0; background: none; cursor: pointer; }
.tk-listen img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(50, 15, 80, .3)); }
.tk-line { margin: calc(var(--u) * 10) 0 0; font: 1000 calc(var(--u) * 46)/1.15 "Nunito", sans-serif; color: var(--ink); }
.tk-line .w { display: inline-block; }
.tk-answers { position: absolute; left: calc(var(--u) * 720); top: calc(var(--u) * 372); width: calc(var(--u) * 800); display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.tk-ans { display: flex; align-items: center; gap: calc(var(--u) * 16); min-height: calc(var(--u) * 78); padding: calc(var(--u) * 10) calc(var(--u) * 26) calc(var(--u) * 10) calc(var(--u) * 14); border: 0; border-radius: 999px; cursor: pointer; text-align: left;
  color: var(--cream); background: linear-gradient(180deg, rgba(92, 44, 150, .88), rgba(58, 22, 104, .9)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), var(--sh-1); transition: translate .35s cubic-bezier(.3, 1.6, .4, 1), background .25s; }
.tk-ans:hover { translate: calc(var(--u) * -8) 0; background: linear-gradient(180deg, rgba(118, 62, 186, .92), rgba(72, 30, 128, .94)); }
.tk-ans kbd { min-width: calc(var(--u) * 38); height: calc(var(--u) * 38); font-size: calc(var(--u) * 18); border-radius: 50%; }
.tk-ic { width: calc(var(--u) * 48); height: calc(var(--u) * 48); display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); flex: 0 0 auto; }
.tk-ic img { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(20, 0, 40, .35)); }
.tk-t { font: 900 calc(var(--u) * 29)/1.15 "Nunito", sans-serif; }
.tk-ans.picked { background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); color: #3a1b00; }
.tk-ans.picked .tk-ic { background: rgba(255, 255, 255, .5); color: #8a4b00; }
.talk .hud { z-index: 5; }

/* ------------------------------------------------------------------------------------------------ 3 a hero place opens */
.plc { position: absolute; inset: 0; overflow: hidden; perspective: calc(var(--u) * 1500); }
.pl-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 20%; }
.pl-dim { position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 38%, rgba(30, 10, 55, .25), rgba(20, 6, 40, .72)); }
.pl-rise { position: absolute; left: calc(var(--u) * 813); top: calc(var(--u) * 72); width: calc(var(--u) * 520); height: calc(var(--u) * 520); border-radius: 50%; pointer-events: none; translate: 0 0;
  background: radial-gradient(closest-side, rgba(255, 240, 190, .9), rgba(255, 197, 61, .4) 45%, transparent); opacity: 0; }
.pl-card { position: absolute; left: 50%; top: calc(var(--u) * 54); width: calc(var(--u) * 960); aspect-ratio: 1672 / 941; margin-left: calc(var(--u) * -480); transform-origin: 50% 100%; transform-style: preserve-3d; }
.pl-win { position: absolute; inset: 0; border-radius: calc(var(--u) * 34); overflow: hidden; transform: var(--tilt, rotateY(0deg) rotateX(0deg)); transition: transform .6s cubic-bezier(.3, 1.3, .4, 1);
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(255, 250, 238, .95), 0 0 0 calc(var(--u) * 6.5) rgba(196, 181, 253, .6), 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(30, 10, 50, .3), 0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(30, 10, 50, .3), 0 calc(var(--u) * 34) calc(var(--u) * 60) rgba(30, 10, 50, .32); background: #2a1d3c; }
.pl-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.pl-cv.on { opacity: 1; }
.pl-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-cv.on + .pl-fallback { display: none; }
.pl-sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent); transform: translateX(-130%) skewX(-16deg); }
.pl-motes { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.pl-motes i { position: absolute; left: calc(8% + var(--i) * 10.5%); top: calc(70% - var(--i) * 5%); width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 245, 210, .95), rgba(255, 210, 120, 0)); animation: mote calc(7s + var(--i) * 0.9s) ease-in-out calc(var(--i) * -1.3s) infinite; }
@keyframes mote { 0% { translate: 0 0; opacity: 0; } 20% { opacity: .9; } 50% { translate: calc(var(--u) * 16) calc(var(--u) * -60); } 80% { opacity: .7; } 100% { translate: calc(var(--u) * -10) calc(var(--u) * -120); opacity: 0; } }
.pl-badge { position: absolute; left: calc(var(--u) * -24); top: calc(var(--u) * -26); display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 8) calc(var(--u) * 22) calc(var(--u) * 8) calc(var(--u) * 8); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 244, 226, .95)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, var(--sh-2); transform: translateZ(calc(var(--u) * 30)); }
.pl-badge img { width: calc(var(--u) * 54); height: calc(var(--u) * 52); object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(150, 90, 0, .35)); }
.pl-badge span { font: 1000 calc(var(--u) * 18)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 2.5); text-transform: uppercase; color: var(--violet); }
.pl-body { position: absolute; left: 50%; top: calc(var(--u) * 640); width: calc(var(--u) * 1100); margin-left: calc(var(--u) * -550); display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--cream); }
.pl-name { margin: 0; font: 1000 calc(var(--u) * 70)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * -.5);
  text-shadow: 0 calc(var(--u) * 2) 0 #c9a8ff, 0 calc(var(--u) * 4) 0 #9d74e8, 0 calc(var(--u) * 6) 0 #6d3fc0, 0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(20, 5, 40, .55), 0 0 calc(var(--u) * 30) rgba(255, 210, 140, .35); }
.pl-l { display: inline-block; }
.pl-line { margin: calc(var(--u) * 18) 0 0; display: flex; align-items: center; gap: calc(var(--u) * 14); font: 900 calc(var(--u) * 27)/1.3 "Nunito", sans-serif; color: rgba(255, 248, 236, .92); }
.pl-teller { width: calc(var(--u) * 66); height: calc(var(--u) * 50); flex: 0 0 auto; }
.pl-teller img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(0, 0, 0, .4)); }
.pl-voice { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 22); }
.pl-voice i { background: linear-gradient(180deg, #ffe58f, #ffc53d); }
.pl-btns { display: flex; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 22); }
.pl-btns button { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); border: 0; cursor: pointer; height: calc(var(--u) * 66); padding: 0 calc(var(--u) * 30); border-radius: 999px; font: 1000 calc(var(--u) * 25)/1 "Nunito", sans-serif; }
.pl-b2 { color: var(--cream); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3), var(--sh-1); backdrop-filter: blur(8px); }
.pl-b2 img { width: calc(var(--u) * 36); height: calc(var(--u) * 32); object-fit: contain; }
.pl-b1 { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--u) * 5) 0 #b9750a, var(--sh-1); }
.pl-b1 .pl-next { width: calc(var(--u) * 30); height: calc(var(--u) * 26); object-fit: contain; margin-left: calc(var(--u) * 2); filter: drop-shadow(0 1px 1px rgba(120, 60, 0, .3)); }
.plc .hud { z-index: 5; }

/* ------------------------------------------------------------------------------------------------ 5 the photo album */
.alb { position: absolute; inset: 0; overflow: hidden; background: #3b1f12; }
.al-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.al-desk { position: absolute; inset: 0; }
.al-book { position: absolute; inset: 0; width: 100%; height: 100%; }
.al-title { position: absolute; left: 330px; top: 92px; color: #3c1f57; }
.al-title small { display: block; font: 1000 18px/1 "Nunito", sans-serif; letter-spacing: 5px; text-transform: uppercase; color: #6f3f6b; margin-bottom: 6px; }
.al-title b { display: block; font: 1000 78px/1 "Nunito", sans-serif; letter-spacing: -1px; text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
.al-title b span { display: inline-block; }
.al-ul { display: block; width: 300px; height: 24px; margin-top: 4px; overflow: visible; }
.al-ul path { fill: none; stroke: #f0a92c; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 0; }
.al-trail i { position: absolute; width: 8px; height: 8px; border-radius: 50%; translate: -50% -50%; background: rgba(110, 70, 140, .32); }
.al-trail i.w { background: rgba(240, 169, 44, .55); }
.al-prints .al-print { position: absolute; width: 20px; height: 20px; translate: -50% -50%; }
.al-print svg { width: 100%; height: 100%; fill: rgba(91, 42, 134, .62); }
.al-courier { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.al-ph { position: absolute; margin: 0; translate: -50% -50%; }
.al-pr { position: relative; padding: 14px 14px 52px; border-radius: 6px; background: #fffdf8; transform: rotate(var(--r));
  box-shadow: inset 0 0 0 1px rgba(120, 90, 60, .12), 0 1px 1px rgba(60, 30, 10, .18), 0 3px 4px rgba(60, 30, 10, .16), 0 8px 12px rgba(60, 30, 10, .14); }
.al-ph:not(.al-top) .al-pr { padding-bottom: 30px; }
.al-sh { position: absolute; inset: 10px 4px -8px 12px; border-radius: 12px; transform: rotate(var(--r));
  background: radial-gradient(closest-side, rgba(60, 25, 5, .30), rgba(60, 25, 5, .16) 70%, rgba(60, 25, 5, 0)); }
.al-img { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 2px; background: #ccc center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.al-ph figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 900 26px/1 "Nunito", sans-serif; color: #4a2c5e; }
.al-tape { position: absolute; width: 110px; height: 30px; opacity: .88;
  background: repeating-linear-gradient(90deg, rgba(255, 175, 205, .85) 0 10px, rgba(255, 210, 225, .85) 10px 20px); box-shadow: 0 1px 2px rgba(80, 30, 40, .2); }
.al-tape.t1 { left: -34px; top: -10px; rotate: -38deg; }
.al-tape.t2 { right: -30px; top: -6px; rotate: 34deg; background: repeating-linear-gradient(90deg, rgba(180, 160, 255, .85) 0 10px, rgba(215, 205, 255, .85) 10px 20px); }
.al-curl { position: absolute; right: 0; bottom: 0; width: 70px; height: 70px; pointer-events: none;
  background: linear-gradient(135deg, transparent 55%, rgba(255, 255, 255, .55) 70%, rgba(200, 180, 150, .35) 100%); border-radius: 0 0 6px 0; }
.al-dest { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.al-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 60% 45%, #fff8e6, #ffe3a6 60%, #f5c56a); }

/* ------------------------------------------------------------------------------------------------ the iPhone versions
   of screens 2, 3 and 5 (finding 6): the same moments on the 844 x 390 pt grid, everything a finger touches inside the
   safe areas (59 pt at the sides, 21 pt at the bottom), touch targets 44 pt, no key numbers on a phone */
.f-ios .tk-bg img { left: calc(var(--u) * -714); top: calc(var(--u) * -574); width: calc(var(--u) * 1818); }
.f-ios .tk-lila { left: calc(var(--u) * 112); bottom: calc(var(--u) * -16); width: calc(var(--u) * 288); height: calc(var(--u) * 370); }
.f-ios .tk-card { left: calc(var(--u) * 404); top: calc(var(--u) * 90); max-width: calc(var(--u) * 381); padding: calc(var(--u) * 11) calc(var(--u) * 18) calc(var(--u) * 13); border-radius: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 8); }
.f-ios .tk-card::before { left: calc(var(--u) * -9); bottom: calc(var(--u) * 14); width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 4); }
.f-ios .tk-name { gap: calc(var(--u) * 8); }
.f-ios .tk-name b { font-size: calc(var(--u) * 13); letter-spacing: calc(var(--u) * 2); }
.f-ios .tk-voice { height: calc(var(--u) * 14); gap: calc(var(--u) * 3); }
.f-ios .tk-voice i { width: calc(var(--u) * 3.5); height: calc(var(--u) * 14); }
.f-ios .tk-listen { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 2); width: calc(var(--u) * 44); height: calc(var(--u) * 44); padding: calc(var(--u) * 7) calc(var(--u) * 7); }
.f-ios .tk-card { padding-right: calc(var(--u) * 44); }
.f-ios .tk-line { font-size: calc(var(--u) * 24); margin-top: calc(var(--u) * 4); }
.f-ios .tk-answers { left: calc(var(--u) * 404); top: calc(var(--u) * 170); width: calc(var(--u) * 381); gap: calc(var(--u) * 5); }
.f-ios .tk-ans { min-height: calc(var(--u) * 44); padding: calc(var(--u) * 3) calc(var(--u) * 14) calc(var(--u) * 3) calc(var(--u) * 5); gap: calc(var(--u) * 8); }
.f-ios .tk-ans:hover { translate: calc(var(--u) * -4) 0; }
.f-ios .tk-ans kbd { display: none; }
.f-ios .tk-ic { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.f-ios .tk-t { font-size: calc(var(--u) * 15.5); }
.f-ios .pl-card { top: calc(var(--u) * 8); width: calc(var(--u) * 424); margin-left: calc(var(--u) * -212); }
.f-ios .pl-win { border-radius: calc(var(--u) * 18); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(255, 250, 238, .95), 0 0 0 calc(var(--u) * 4) rgba(196, 181, 253, .6), 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(30, 10, 50, .3), 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(30, 10, 50, .3); }
.f-ios .pl-badge { left: calc(var(--u) * -14); top: calc(var(--u) * 3); padding: calc(var(--u) * 4) calc(var(--u) * 12) calc(var(--u) * 4) calc(var(--u) * 4); gap: calc(var(--u) * 6); }
.f-ios .pl-badge img { width: calc(var(--u) * 30); height: calc(var(--u) * 29); }
.f-ios .pl-badge span { font-size: calc(var(--u) * 12); letter-spacing: calc(var(--u) * 1.5); }
.f-ios .pl-body { top: calc(var(--u) * 251); width: calc(var(--u) * 666); margin-left: calc(var(--u) * -333); }
.f-ios .pl-name { font-size: calc(var(--u) * 28); text-shadow: 0 calc(var(--u) * 1) 0 #c9a8ff, 0 calc(var(--u) * 2) 0 #9d74e8, 0 calc(var(--u) * 3) 0 #6d3fc0, 0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(20, 5, 40, .55), 0 0 calc(var(--u) * 16) rgba(255, 210, 140, .35); }
.f-ios .pl-line { font-size: calc(var(--u) * 14); margin-top: calc(var(--u) * 5); gap: calc(var(--u) * 8); }
.f-ios .pl-teller { width: calc(var(--u) * 34); height: calc(var(--u) * 26); }
.f-ios .pl-voice { height: calc(var(--u) * 14); gap: calc(var(--u) * 3); }
.f-ios .pl-voice i { width: calc(var(--u) * 3.5); height: calc(var(--u) * 14); }
.f-ios .pl-btns { margin-top: calc(var(--u) * 8); gap: calc(var(--u) * 10); }
.f-ios .pl-btns button { height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 18); font-size: calc(var(--u) * 16); gap: calc(var(--u) * 6); }
.f-ios .pl-b2 img { width: calc(var(--u) * 26); height: calc(var(--u) * 22); }
.f-ios .pl-b1 .pl-next { width: calc(var(--u) * 22); height: calc(var(--u) * 19); }
.f-ios .pl-rise { left: calc(var(--u) * 282); top: calc(var(--u) * -40); width: calc(var(--u) * 280); height: calc(var(--u) * 280); }
.f-ios .pl-motes i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.f-ios .al-title small { font-size: 28px; letter-spacing: 7px; }

/* ------------------------------------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sprites .ring i, .sprites .mk-in, .hud-tab.new .tb-glow, .hud-tab.new .tb-spark, .kh .wheel::after, .pj-base i, .paw-act.awake .pa-halo,
  .paw-act.awake .pa-bubble, .ts-aur, .tm-pin img, .tm-me::after, .thm-ic, .pl-motes i { animation: none !important; }
}