@font-face { font-family: 'CG Sans'; src: url(fonts/CapitalGroupSans_CMS_Regular.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'CG Sans'; src: url(fonts/CapitalGroupSans_CMS_Medium.woff2) format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'CG Sans'; src: url(fonts/CapitalGroupSans_CMS_Bold.woff2) format('woff2'); font-weight: 700; font-display: block; }

/* the palette of the reference video (render.swift) */
:root {
  --blue: rgb(0 104 174);
  --navy: rgb(8 52 105);
  --pale: rgb(208 234 233);
  --teal: rgb(0 128 116);
  --plum: rgb(132 21 116);
  --mint: rgb(0 209 144);
  --paper: rgb(230 236 238);
  --gray: rgb(143 173 178);
  --s: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: 'CG Sans', system-ui, sans-serif; color: var(--navy); -webkit-font-smoothing: antialiased; }

/* a fixed 1920×1080 artboard, scaled to fit the window */
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s)); overflow: hidden; background: var(--navy);
}
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s .55s; }
.scene.on { opacity: 1; visibility: visible; transition: opacity .55s ease; }
.paper { background: var(--paper); }

.pill {
  display: inline-block; height: 40px; padding: 0 22px; border-radius: 20px; background: var(--plum);
  color: var(--paper); font: 700 19px/40px 'CG Sans'; letter-spacing: 1.3px; white-space: nowrap;
}
.pill.teal { background: var(--teal); }
.pill.blue { background: var(--blue); }
.pill.plum { background: var(--plum); }

/* ---------- listening ---------- */
#halftone { position: absolute; inset: 0; width: 100%; height: 100%; }
.loading-copy {
  position: absolute; top: 538px; font: 700 68px/1 'CG Sans'; letter-spacing: -1.6px; white-space: nowrap;
  transition: opacity .5s;
}
.loading-copy.left { right: calc(50% + 215px); color: var(--pale); }
.loading-copy.right { left: calc(50% + 215px); color: var(--paper); }
#hero { position: absolute; left: 50%; top: 452px; width: 240px; height: 240px; margin-left: -120px; color: var(--paper); perspective: 900px; }
#hero svg { width: 100%; height: 100%; animation: turn 3.75s linear infinite; transform-origin: 50.5% 50.75%; }
@keyframes turn { to { transform: rotate3d(1, 1, 0, 360deg); } }

/* the countdown to the next analysis: a ring round the star and the time under it */
#ring { position: absolute; left: 50%; top: 572px; width: 360px; height: 360px; margin: -180px 0 0 -180px; transform: rotate(-90deg); }
#ring circle { fill: none; stroke-width: 5; }
.ring-track { stroke: rgb(208 234 233 / .16); }
.ring-fill { stroke: var(--mint); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--left, 100); transition: stroke-dashoffset .25s linear; }
#countdown { position: absolute; left: 0; right: 0; top: 772px; text-align: center; color: var(--pale); }
#countdown-label { font: 700 20px 'CG Sans'; letter-spacing: 3px; opacity: .8; }
#countdown-time { margin-top: 4px; font: 700 66px/1 'CG Sans'; letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums; }
body.forming #countdown-time { font-size: 40px; line-height: 66px; animation: blink 1.4s infinite; }
body.forming .ring-fill { stroke-dashoffset: 0; animation: blink 1.4s infinite; }
body:not(.running) #ring, body:not(.running) #countdown { visibility: hidden; }

/* the star grows over everything and becomes the paper of the next scene */
#wipe { position: absolute; left: 50%; top: 572px; width: 240px; height: 240px; margin: -120px 0 0 -120px; color: var(--paper); pointer-events: none; opacity: 0; z-index: 5; }
#wipe svg { width: 100%; height: 100%; }
#wipe.go { opacity: 1; animation: wipe 1.25s cubic-bezier(.55, 0, .7, .4) forwards; }
@keyframes wipe { from { transform: scale(1); } to { transform: scale(26) rotate(8deg); } }

/* ---------- the claim ---------- */
#claim { text-align: center; }
#claim .pill { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); }
#claim-topic { position: absolute; left: 0; right: 0; top: 214px; font: 500 26px 'CG Sans'; color: var(--blue); letter-spacing: 2.4px; text-transform: uppercase; }
#claim-text {
  position: absolute; left: 200px; right: 200px; top: 290px; height: 400px; display: flex; align-items: center; justify-content: center;
  font: 700 78px/1.14 'CG Sans'; letter-spacing: -1.8px; text-wrap: balance;
}
#claim-question { position: absolute; left: 0; right: 0; top: 740px; font: 500 42px 'CG Sans'; color: var(--blue); }
#claim.on #claim-text, #claim.on #claim-question { animation: rise .7s cubic-bezier(.2, .7, .3, 1) both; }
#claim.on #claim-question { animation-delay: .9s; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the answer ---------- */
.ai-head { position: absolute; left: 110px; top: 72px; display: flex; align-items: center; gap: 18px; }
.ai-head svg { width: 44px; height: 44px; color: var(--navy); }
.ai-head b { font: 700 26px 'CG Sans'; letter-spacing: 2.8px; margin-right: 34px; }
#answer .col { position: absolute; top: 175px; }
#answer .left { left: 110px; width: 840px; }
#headline { font: 700 92px/1.04 'CG Sans'; letter-spacing: -3.2px; text-wrap: balance; }
#subline { margin-top: 26px; font: 500 34px/1.25 'CG Sans'; color: var(--blue); letter-spacing: -.3px; text-wrap: pretty; }
#meter { position: absolute; left: 110px; top: 640px; width: 840px; }
.meter-label { font: 700 19px 'CG Sans'; letter-spacing: 1.8px; margin-bottom: 12px; }
.meter-track { position: relative; height: 34px; border-radius: 17px; background: rgb(143 173 178 / .3); }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--a, 50%); border-radius: 17px; background: var(--c, var(--blue)); transform-origin: left; }
.meter-value { position: absolute; top: 50%; left: var(--a, 50%); transform: translate(12px, -50%); font: 700 24px 'CG Sans'; white-space: nowrap; }
.meter-value.inside { transform: translate(calc(-100% - 14px), -50%); color: var(--paper); }
.meter-ends { position: relative; display: flex; justify-content: space-between; margin-top: 8px; font: 500 17px 'CG Sans'; color: var(--blue); letter-spacing: .6px; }
.meter-ends span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
#answer.on #meter { animation: fade .6s 1.4s both; }
#answer.on .meter-fill { animation: grow 1.1s 1.6s cubic-bezier(.2, .7, .3, 1) both; }
#answer.on .meter-value { animation: fade .5s 2.4s both; }

#figure-chart { margin-top: 24px; }
#figure-chart:empty { display: none; }
.chart-title { font: 700 19px 'CG Sans'; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 14px; }
.donut { display: flex; align-items: center; gap: 30px; }
.donut svg { width: 170px; height: 170px; flex: none; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 26; }
.donut .slice { stroke-dasharray: var(--v) 100; animation: sweep 1.2s 3.4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes sweep { from { stroke-dasharray: 0 100; } }
.donut ul { list-style: none; display: grid; gap: 10px; font: 500 24px 'CG Sans'; }
.donut li { display: flex; align-items: center; gap: 12px; }
.donut li b { font-weight: 700; margin-left: auto; padding-left: 18px; }
.donut li i { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 16px; font: 500 21px 'CG Sans'; }
.hbar .bar { position: relative; height: 30px; }
.hbar .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--gray); transform-origin: left; }
.hbar.key .bar i { background: var(--teal); }
.hbar.key { font-weight: 700; }
.hbar .bar b { position: absolute; top: 50%; transform: translate(10px, -50%); font: 700 21px 'CG Sans'; white-space: nowrap; }
.chart-note { margin-top: 8px; font: 500 16px 'CG Sans'; color: var(--blue); }
#answer.on #figure-chart { animation: fade .6s 3.2s both; }
#answer.on .hbar .bar i { animation: grow 1s both; }
#answer.on .hbar .bar b { animation: fade .5s both; }

#answer .rule { position: absolute; left: 1010px; top: 190px; width: 1.5px; height: 570px; background: var(--gray); }
#answer .right { left: 1080px; width: 740px; }
.figure { display: flex; align-items: flex-start; gap: 14px; height: 210px; }
#stat-value { font: 700 230px/.9 'CG Sans'; letter-spacing: -9px; }
#stat-unit { margin-top: 40px; font: 500 96px/1 'CG Sans'; color: var(--blue); letter-spacing: -3px; white-space: nowrap; }
#stat.long #stat-unit { font-size: 60px; margin-top: 56px; letter-spacing: -1.5px; }
#stat-says { margin-top: 18px; font: 500 31px/1.25 'CG Sans'; letter-spacing: -.4px; max-width: 700px; }
#stat-source { margin-top: 12px; font: 500 18px/1.35 'CG Sans'; color: var(--navy); opacity: .85; }
#stat-source::first-line { color: var(--blue); }
#why { display: none; }
.why-label { font: 700 22px 'CG Sans'; letter-spacing: 2.6px; color: var(--blue); margin: 12px 0 24px; }
#reasons { position: absolute; left: 110px; right: 100px; top: 800px; list-style: none; display: grid; grid-template-columns: 900px 1fr; column-gap: 70px; }
#reasons li { position: relative; padding-left: 32px; font: 700 33px/1.2 'CG Sans'; letter-spacing: -.5px; }
#reasons li::before { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 32px; background: var(--mint); }
#reasons li + li::before { background: var(--teal); }

/* no number to show: the reasons take the right column */
#answer.nostat #stat { display: none; }
#answer.nostat #why { display: block; }
#answer.nostat #reasons { left: 1080px; right: 100px; top: 290px; grid-template-columns: 1fr; row-gap: 46px; }
#answer.nostat #reasons li { font-size: 44px; padding-left: 40px; }
#answer.nostat #reasons li::before { width: 12px; height: 44px; top: 5px; }

/* the order things appear in */
#answer.on .ai-head { animation: fade .6s both; }
#answer.on #headline { animation: rise .75s .15s cubic-bezier(.2, .7, .3, 1) both; }
#answer.on #subline { animation: rise .75s .9s both; }
#answer.on .rule { animation: fade .6s .6s both; }
#answer.on #stat { animation: rise .7s 2.3s cubic-bezier(.2, .7, .3, 1) both; }
#answer.on #answer.on #reasons li { animation: rise .7s 6.3s both; }
#answer.on #reasons li + li { animation-delay: 7.1s; }
#answer.on.nostat #reasons li { animation-delay: 2.3s; }
#answer.on.nostat #reasons li + li { animation-delay: 3.3s; }
#answer.on.nostat #why { animation: fade .6s 2s both; }

/* ---------- the end shot ---------- */
#tally { position: absolute; left: 110px; right: 110px; top: 140px; display: flex; gap: 80px; align-items: flex-end; }
#tally .big { font: 700 150px/.9 'CG Sans'; letter-spacing: -6px; }
#tally .big small { font: 500 64px 'CG Sans'; color: var(--blue); letter-spacing: -2px; margin-left: 8px; }
#tally .lead { font: 500 30px/1.25 'CG Sans'; max-width: 520px; padding-bottom: 12px; }
#tally .counts { margin-left: auto; display: flex; align-items: center; gap: 34px; }
#tally .counts svg { width: 190px; height: 190px; transform: rotate(-90deg); }
#tally .counts circle { fill: none; stroke-width: 30; }
#summary.on #tally .slice { animation: sweep 1.2s .6s cubic-bezier(.2, .7, .3, 1) both; stroke-dasharray: var(--v) 100; }
#tally .split { display: grid; gap: 8px; }
#tally .count { text-align: left; }
#tally .count { display: flex; align-items: baseline; gap: 12px; }
#tally .count b { font: 700 46px/1 'CG Sans'; letter-spacing: -1px; min-width: 34px; }
#tally .count span { font: 700 18px 'CG Sans'; letter-spacing: 1.6px; }
#tally .count i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
#chart { position: absolute; left: 110px; right: 110px; top: 400px; }
.axis { position: relative; height: 34px; margin-left: 600px; display: flex; justify-content: space-between; font: 700 18px 'CG Sans'; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue); }
.axis span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
#summary.on #tally { animation: rise .7s .1s both; }
#bars { position: relative; }
.bar-row { display: grid; grid-template-columns: 600px 1fr; align-items: center; height: var(--row, 100px); border-top: 1px solid rgb(143 173 178 / .45); }
.bar-row .label { padding-right: 40px; font: 700 31px/1.15 'CG Sans'; letter-spacing: -.4px; }
.bar-row .label small { display: block; margin-top: 3px; font: 500 18px 'CG Sans'; color: var(--blue); letter-spacing: 1.2px; text-transform: uppercase; }
.bar-row .track { position: relative; height: 40px; background: rgb(143 173 178 / .22); border-radius: 4px; }
.bar-row .fill { position: absolute; top: 0; height: 100%; border-radius: 3px; transform-origin: var(--from); animation: grow .9s cubic-bezier(.2, .7, .3, 1) both; }
.bar-row .value { position: absolute; top: 50%; transform: translateY(-50%); font: 700 26px 'CG Sans'; white-space: nowrap; animation: fade .5s both; }
@keyframes grow { from { transform: scaleX(0); } }

/* ---------- captions ---------- */
#captions {
  position: absolute; left: 0; right: 0; bottom: 0; height: 118px; z-index: 6; display: flex; align-items: center; gap: 30px;
  padding: 0 110px; background: rgb(8 52 105 / .94); color: var(--paper); transition: transform .5s;
}
body:not(.running) #captions { transform: translateY(100%); }
#live { flex: none; display: flex; align-items: center; gap: 10px; font: 700 19px 'CG Sans'; letter-spacing: 2px; color: var(--mint); }
#live i { width: 12px; height: 12px; border-radius: 50%; background: var(--mint); animation: blink 1.6s infinite; }
body:not(.hearing) #live i { animation: none; opacity: .35; }
@keyframes blink { 50% { opacity: .25; } }
#caption-text { flex: 1; min-width: 0; height: 84px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font: 500 31px/42px 'CG Sans'; color: var(--pale); }
#caption-text em { font-style: normal; color: #fff; }

/* ---------- operator bits, off the artboard ---------- */
#status { position: fixed; right: 12px; bottom: 10px; font: 500 12px system-ui; color: rgb(255 255 255 / .55); pointer-events: none; z-index: 30; }
body.clean #status { display: none; }

#start { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgb(8 52 105 / .8); backdrop-filter: blur(6px); overflow: auto; }
#start[hidden] { display: none; }
.card { width: min(760px, 100%); background: var(--paper); border-radius: 18px; padding: 36px 38px 28px; box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.card h2 { font: 700 40px 'CG Sans'; letter-spacing: -1px; }
.lead { margin: 10px 0 22px; font: 400 17px/1.5 'CG Sans'; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices button, .choices label {
  display: block; text-align: left; padding: 15px 18px; border: 1.5px solid rgb(8 52 105 / .2); border-radius: 12px; background: #fff;
  color: var(--navy); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s;
}
.choices button:hover, .choices label:hover { border-color: var(--blue); transform: translateY(-1px); }
.choices b { display: block; font: 700 17px 'CG Sans'; }
.choices span { display: block; margin-top: 3px; font: 500 14px 'CG Sans'; color: var(--blue); }
#start-error { min-height: 1.4em; margin-top: 12px; color: var(--plum); font: 500 15px 'CG Sans'; }
.fine { font: 400 13px/1.5 'CG Sans'; opacity: .75; }
body.busy .choices { opacity: .5; pointer-events: none; }
@media (max-width: 620px) { .choices { grid-template-columns: 1fr; } .card { padding: 26px 20px 20px; } }

.window { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 15px 'CG Sans'; }
.window select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1.5px solid rgb(8 52 105 / .2); background: #fff; color: var(--navy); }