/* Smartphone Dependency — keynote deck. 1920×1080 stage, scaled to fit. */
:root {
  --card: #1C1C1E;
  --ink: #F5F5F3;
  --ink2: #9E9D98;
  --ink3: #636260;
  --hair: #2C2C2E;
  --fill: #6E6E73;
  --red: #FF6A5F;
  --teal: #5CC8B8;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --rd: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body {
  font-family: var(--sf); color: var(--ink);
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; cursor: pointer;
}
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px;
  transform-origin: 50% 50%;
}

/* Ambient colour fields — only ever moved, never faded */
.orb { position: absolute; left: -700px; top: -700px; width: 1400px; height: 1400px; border-radius: 50%; pointer-events: none; }
.o1 { background: radial-gradient(closest-side, rgba(52,178,160,.30), rgba(52,178,160,.10) 45%, rgba(52,178,160,0)); }
.o2 { background: radial-gradient(closest-side, rgba(94,92,230,.32), rgba(94,92,230,.09) 45%, rgba(94,92,230,0)); }
.o3 { background: radial-gradient(closest-side, rgba(10,132,255,.20), rgba(10,132,255,.05) 45%, rgba(10,132,255,0)); }

/* The lens: one liquid-glass slab that morphs from slide to slide (always under the text) */
#lens {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; overflow: hidden; pointer-events: none;
  border-radius: 64px; corner-shape: squircle;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 38%, rgba(255,255,255,.018) 70%, rgba(255,255,255,.055));
  -webkit-backdrop-filter: blur(36px) saturate(1.9); backdrop-filter: blur(36px) saturate(1.9);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.06), inset 0 30px 60px -30px rgba(255,255,255,.10), 0 40px 100px rgba(0,0,0,.5);
}
#lens::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,.05) 72%, rgba(255,255,255,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
#lens .sheen {
  position: absolute; inset: -20% -60%; translate: -70% 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.08) 50%, transparent 58%);
}

/* Slides */
.slide { position: absolute; inset: 0; z-index: 2; visibility: hidden; }
.slide.on { visibility: visible; }
.abs { position: absolute; }
.anchor { position: absolute; pointer-events: none; }
.svg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }

/* Type — four levels per slide: L1 title/number, L2 name, L3 text, L4 label */
.t { position: absolute; left: 120px; top: 126px; width: 1680px; font-size: 76px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.sub { position: absolute; left: 120px; top: 226px; width: 1680px; font-size: 28px; line-height: 1.35; font-weight: 500; color: var(--ink2); letter-spacing: -.01em; }
.h { font-size: 42px; line-height: 1.14; font-weight: 600; letter-spacing: -.022em; }
.hs { font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.b { font-size: 30px; line-height: 1.36; color: var(--ink2); letter-spacing: -.012em; }
.l { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: .004em; color: var(--ink2); }
.n { font-family: var(--rd); font-variant-numeric: tabular-nums; }
.num { font-family: var(--rd); font-variant-numeric: tabular-nums; font-size: 64px; font-weight: 500; color: var(--ink3); letter-spacing: -.01em; }
.mono { font-family: var(--mono); font-size: 20px; color: var(--ink3); letter-spacing: -.01em; }
.ink { color: var(--ink); } .ink2 { color: var(--ink2); } .ink3 { color: var(--ink3); }
.red { color: var(--red); } .teal { color: var(--teal); }
.stack > * + * { margin-top: 10px; }
.row { position: absolute; left: 0; width: 1920px; display: flex; align-items: center; }
.row > * { flex: none; }

/* Mask structures built by engine.js */
.m { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.m > .mi { display: inline-block; vertical-align: top; }
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .18em; margin: 0 -.08em -.18em; }
.mwi { display: inline-block; transform-origin: 0 100%; }
.grad > .mi, .grad .mwi {
  background: linear-gradient(100deg, #F5F5F3 4%, #BDEDE4 38%, #5CC8B8 70%, #8A93FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-a=count] { line-height: 1.1; white-space: nowrap; }
.od, .oc { display: inline-block; overflow: hidden; vertical-align: top; height: 1.1em; line-height: 1.1; }
.ods { display: block; transform: translateY(calc(var(--v) * -1.1em)); }
.ods > b { display: block; height: 1.1em; font-weight: inherit; text-align: center; }
.oc > i { display: inline-block; font-style: normal; }
[data-a=draw] { fill: none; stroke-dasharray: 1 2; stroke-linecap: round; }
[data-a=pop] { transform-box: fill-box; transform-origin: center; }

/* Surfaces */
.card { position: absolute; isolation: isolate; border-radius: 64px; corner-shape: squircle; }
.card > .bg { position: absolute; inset: 0; z-index: -1; background: var(--card); border-radius: inherit; corner-shape: inherit; }
.qd { position: absolute; background: var(--card); border-radius: 48px; corner-shape: squircle; padding: 34px 38px; }
.chip { display: inline-block; padding: 9px 20px 10px; border-radius: 999px; font-size: 22px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.chip.red { background: rgba(255,106,95,.15); }
.chip.teal { background: rgba(92,200,184,.15); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 14px; vertical-align: middle; position: relative; top: -2px; }
.bar { position: absolute; height: 52px; border-radius: 999px; }

/* Persistent chrome */
.chrome { position: absolute; z-index: 3; font-size: 22px; font-weight: 600; color: var(--ink2); pointer-events: none; white-space: nowrap; }
#chap { left: 120px; top: 56px; }
#pg { right: 120px; bottom: 48px; color: var(--ink3); }
.roll { display: inline-block; position: relative; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: top; }
.roll > .rl { position: absolute; left: 0; top: 0; white-space: nowrap; }
#chapN { width: 46px; color: var(--ink3); }
#chapT { width: 640px; }
.pgd { width: .64em; }

/* Charts: bars with a value riding the tip, study-count dots, r² waffles */
.meter { position: absolute; height: 56px; }
.meter .fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 999px; transform-origin: 28px 50%; font-style: normal;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.25);
}
.meter.neg .fill { left: auto; right: 0; transform-origin: calc(100% - 28px) 50%; }
.meter.gray .fill { background: linear-gradient(90deg, #3A3A3C, #8E8E93); }
.meter.gray.neg .fill { background: linear-gradient(270deg, #3A3A3C, #8E8E93); }
.meter.red .fill {
  background: linear-gradient(90deg, #6E2A26, #FF6A5F 78%, #FF8C82);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.34), 0 0 48px rgba(255,106,95,.32);
}
.tip {
  position: absolute; top: 50%; left: calc(100% + 26px); translate: 0 -50%;
  font-size: 56px; font-weight: 600; line-height: 1.1; white-space: nowrap; color: var(--ink); letter-spacing: -.01em;
}
.meter.neg .tip { left: auto; right: calc(100% + 26px); color: var(--ink2); }
.meter.red .tip { color: var(--red); }
.band { position: absolute; top: 352px; height: 500px; background: rgba(255,255,255,.035); }
.dots { position: absolute; display: grid; gap: 4px; }
.dots > i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); }
.dots.lg { gap: 8.5px; }
.dots.lg > i { width: 12px; height: 12px; background: var(--teal); }
.waffle { display: grid; grid-template-columns: repeat(10, 9px); gap: 3px; flex: none; }
.waffle > i { display: block; width: 9px; height: 9px; border-radius: 2.5px; background: var(--hair); }
.waffle > i.on { background: var(--ink2); }
.waffle.red > i.on { background: var(--red); }
svg .head { scale: 0; }