/* ==========================================================
   Shared look for SnowFit illustration films — Google Workspace
   style: pale app window with grey skeleton bars, overlapping
   white cards, round app badge, white background.
   Canvas 1920×1080 · reading text ≥ 28 px · AA contrast.
   ========================================================== */
@font-face { font-family: "Outfit"; font-weight: 500; src: url("../_shared/fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; src: url("../_shared/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; src: url("../_shared/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; src: url("../_shared/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; src: url("../_shared/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --blue: #1967d2; --blue-mid: #1a73e8; --blue-tint: #d3e3fd; --blue-pale: #e8f0fe;
  --green: #1e8e3e; --green-dark: #137333; --green-pale: #e6f4ea;
  --yellow-dark: #8f4e00; --yellow-pale: #fef7e0;
  --red: #c5221f; --red-mid: #d93025; --red-pale: #fce8e6;
  --indigo: #3f51b5;
  --text: #3c4043; --muted: #444746; --line: #e1e3e1;
  --win: #f8fafd; --tile: #eef2f8; --skel: #e2e5ea; --skel-dark: #cfd4da;
  --shadow: 0 30px 70px rgba(60, 64, 67, 0.16), 0 4px 12px rgba(60, 64, 67, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #fff; }
body { font-family: "Inter", sans-serif; color: var(--text); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.clip { position: absolute; inset: 0; }

/* Pale app window behind everything */
.win { position: absolute; border: 2px solid #e6ebf2; border-radius: 48px; background: var(--win); box-shadow: 0 2px 6px rgba(60, 64, 67, 0.04); overflow: hidden; }
.panel { position: absolute; border-radius: 34px; background: #fff; }

/* Skeleton text bars */
.sk { display: block; height: 26px; border-radius: 13px; background: var(--skel); }
.sk--sm { height: 20px; border-radius: 10px; }
.sk--dark { background: var(--skel-dark); }

/* Floating white card */
.card { position: absolute; border: 2px solid #eceff3; border-radius: 40px; background: #fff; box-shadow: var(--shadow); }

/* Round app badge */
.badge { position: absolute; display: grid; place-items: center; width: 210px; height: 210px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); }

/* Avatars (initials) */
.av { display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; color: #fff; font-size: 28px; font-weight: 600; }
.av--sm { width: 56px; height: 56px; font-size: 22px; }

.icon { width: 44px; height: 44px; flex-shrink: 0; }
.row { display: flex; align-items: center; gap: 22px; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px; border-radius: 999px; font-size: 28px; font-weight: 600; white-space: nowrap; }
.chip--blue { border: 2px solid #747775; color: var(--blue); background: #fff; }
.chip--green { background: var(--green-pale); color: var(--green-dark); }
.chip--yellow { background: var(--yellow-pale); color: var(--yellow-dark); }
.chip--red { background: var(--red-pale); color: var(--red); }

/* Two labels in one slot that cross-fade (A → B) */
.swap { position: relative; display: inline-block; }
.swap > :nth-child(2) { position: absolute; right: 0; top: 0; }

.title { font-family: "Outfit"; font-weight: 600; letter-spacing: -0.01em; }
.muted { color: var(--muted); }