/* The cards' pictures. Each element's resting state is its final state, so with reduced motion a picture just stands. */
.stage { position: relative; height: calc(420px * var(--z, 1)); display: grid; place-items: center; min-width: 0; }
.beat { zoom: var(--z, 1); grid-area: 1 / 1; position: relative; width: 560px; height: 400px; opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .22s, transform .3s, visibility 0s .3s; }
.beat.on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .12s, transform .6s var(--soft) .12s; }
.beat svg.art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.beat .art .ring { fill: none; stroke: url(#sweep); }
.beat .track { fill: none; stroke: rgb(255 255 255 / .08); }

@keyframes up { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -4% 0 0); } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tw { from { opacity: 0; transform: translateY(.34em); } }
@keyframes talk { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
@keyframes shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
.beat.on .up { animation: up .65s calc(var(--d, 0) * 1s) var(--spring) both; }
.beat.on .wipe { animation: wipe .6s calc(var(--d, 0) * 1s) var(--ease) both; }
.beat.on .pop { animation: pop .45s calc(var(--d, 0) * 1s) var(--spring) both; }
.beat.on .draw { stroke-dasharray: 1; animation: draw .9s calc(var(--d, 0) * 1s) var(--ease) both; }
.tw { display: inline-block; font-style: normal; }
.beat.on .tw { animation: tw .32s calc(var(--d, 0) * 1s) var(--soft) both; }

.kwin { position: absolute; overflow: hidden; border-radius: 14px; background: #1d222b; color: #eceef1; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 26px 60px rgb(0 0 0 / .5); }
.kbar { position: relative; display: flex; align-items: center; height: 36px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / .07); }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .dots i:nth-child(2) { background: #febc2e; } .dots i:nth-child(3) { background: #28c840; }
.kbar small { position: absolute; left: 0; right: 0; text-align: center; font: 600 12px var(--display); color: #a8afbb; }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; } .wave u { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.18); }
.beat.on .wave u { animation: talk .55s calc(var(--i) * -.09s) ease-in-out infinite alternate; }
.tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1f8f5c; color: #fff; }
.chip { display: inline-grid; place-items: center; height: 26px; min-width: 42px; padding: 0 10px; border-radius: 13px; border: 1px solid #4e5766; font: 600 12.5px var(--display); color: #eceef1; }
.av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #333b48; font: 700 12.5px var(--display); color: #eceef1; }
.nbody { padding: 18px 22px; } .nbody h4, .trows h4 { margin: 0 0 8px; font: 700 16px var(--display); letter-spacing: -.01em; }
.nbody p { position: relative; margin: 0 0 7px; padding-left: 16px; font: 500 15px/1.4 var(--display); color: #c4cad4; }
.nbody p::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #6daeff; }
.nbody h4:not(:first-child) { margin-top: 16px; } .nbody strong { color: #fff; font-weight: 700; }
.shimmer { background: linear-gradient(90deg, #a8afbb 30%, #fff 50%, #a8afbb 70%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shim 1.6s linear infinite; }
.nbody.small p.lineph { height: 9px; margin: 0 0 10px; padding: 0; border-radius: 5px; background: #394250; } .lineph::before { display: none; } .lineph.s { width: 62%; } .nbody.small h4 { font-size: 13.5px; }

/* No bot: Meet's dark room, its tiles and bottom bar. */
.call { left: 24px; width: 512px; height: 318px; background: #202124; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: calc(100% - 56px); padding: 10px 10px 0; }
.ctile { position: relative; display: grid; place-items: center; border-radius: 10px; background: #3c4043; color: #fff; }
.ctile.s3 { grid-column: 1 / 3; justify-self: center; width: calc(50% - 4px); }
.ctile > b { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #5f6ad8; font: 500 23px var(--display); } .ctile.s2 > b { background: #0f8f7d; } .ctile.s3 > b { background: #b35a2d; }
.ctile small { position: absolute; left: 10px; bottom: 7px; font: 500 12px var(--display); color: #fff; }
.muted, .spk { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.muted { background: rgb(32 33 36 / .75); color: #e8eaed; }
.spk { display: flex; align-items: center; justify-content: center; gap: 2px; background: #1a73e8; opacity: 0; } .spk u { display: block; width: 3px; height: 12px; border-radius: 2px; background: #fff; transform: scaleY(.3); }
.beat.on .spk u { animation: talk .34s ease-in-out infinite alternate; } .beat.on .spk u:nth-child(2) { animation-delay: -.2s; animation-duration: .26s; } .beat.on .spk u:nth-child(3) { animation-delay: -.1s; animation-duration: .4s; }
.beat.on .ctile { --len: 3.9s; animation: speak var(--len) var(--at) linear infinite; } .beat.on .ctile .spk { animation: spkon var(--len) var(--at) linear infinite; } .beat.on .ctile .muted { animation: spkoff var(--len) var(--at) linear infinite; }
.ctile.s1 { --at: .1s; } .ctile.s2 { --at: 1.4s; } .ctile.s3 { --at: 2.7s; }
@keyframes speak { 0%, 30% { box-shadow: inset 0 0 0 2px #8ab4f8; } 33%, 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes spkon { 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } } @keyframes spkoff { 0%, 30% { opacity: 0; } 33%, 100% { opacity: 1; } }
.mbar { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; color: #e8eaed; } .mbar small { position: absolute; left: 14px; font: 500 11.5px var(--display); } .mcount { position: absolute; right: 16px; font: 600 12px var(--display); color: #e8eaed; }
.mbtns { display: flex; gap: 6px; } .mbtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #3c4043; color: #e8eaed; } .mbtn.end { width: 46px; border-radius: 16px; background: #ea4335; color: #fff; }
.admit { position: absolute; z-index: 2; left: 50%; top: 88px; width: 290px; padding: 16px 18px 12px; border-radius: 10px; background: #fff; color: #202124; margin-left: -145px; box-shadow: 0 14px 40px rgb(0 0 0 / .5); opacity: 0; }
.admit b { display: block; font: 600 14.5px var(--display); } .admit p { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font: 500 13.5px var(--display); color: #3c4043; } .admit div { display: flex; justify-content: flex-end; gap: 4px; } .admit div span { padding: 6px 11px; border-radius: 6px; font: 600 12.5px var(--display); color: #1a73e8; }
.beat.on .admit { animation: admit 1.7s .45s var(--ease) both; } @keyframes admit { 0% { opacity: 0; transform: translateY(14px) scale(.95); } 16%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.96); } }
.beat.on .dn { animation: dn .35s 1.72s both; } @keyframes dn { 50% { background: #d2e3fc; } }
.call { top: 48px; z-index: 2; overflow: hidden; transform-origin: 0 100%; }
.beat.on .call { animation: up .65s 0s var(--spring) both, pip 1s 2.25s var(--ease) forwards; } @keyframes pip { to { transform: translate(12px, -10px) scale(.36); box-shadow: 0 0 0 2px rgb(255 255 255 / .5), 0 18px 40px rgb(3 10 30 / .5); } }
.slide { left: 24px; top: 48px; z-index: 1; width: 512px; height: 318px; background: #fff; color: var(--text); opacity: 0; } .slide .kbar { background: #1d222b; } .beat.on .slide { animation: slidein 1s 2.3s var(--ease) both; } @keyframes slidein { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.slide-b, .thm { position: relative; display: block; width: 512px; height: 282px; padding: 18px 22px; background: #fff; color: var(--text); text-align: left; } .slide-b h3, .thm h3 { margin: 0; font: 800 25px var(--display); letter-spacing: -.03em; } .sl-sub { margin: 2px 0 12px; font: 500 13px var(--display); color: var(--muted); } .slide-b ul, .thm ul { display: block; } .slide-b li, .thm li { display: flex; align-items: center; gap: 8px; height: 26px; font: 600 14px var(--display); } .slide-b li i, .thm li i { width: 9px; height: 9px; border-radius: 50%; background: #1160ce; }
.sl-chart { position: absolute; left: 270px; top: 26px; width: 216px; height: 206px; display: flex; flex-direction: column; } .sl-chart small { font: 600 12.5px var(--display); color: var(--muted); } .sl-chart div { flex: 1; display: flex; align-items: flex-end; gap: 8px; } .sl-chart u { flex: 1; display: block; border-radius: 4px 4px 0 0; background: #3d84e8; } .sl-chart u:last-child { background: #1160ce; }
.rbar { position: absolute; z-index: 4; left: 11px; top: 0; display: flex; align-items: center; gap: 3px; width: 538px; height: 40px; padding: 0 9px; border-radius: 13px; background: #1e2230; border: 1px solid rgb(255 255 255 / .12); color: #e7e9ee; font: 500 11.5px -apple-system, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 14px 34px rgb(0 0 0 / .35); }
.beat.on .rbar { animation: mbar .7s 2.3s var(--spring) both; } @keyframes mbar { from { opacity: 0; clip-path: inset(0 32% round 13px); transform: translateY(-6px); } to { clip-path: inset(-20px -20px -40px -20px round 13px); } }
.rbar .mark { flex: none; width: 18px; height: 18px; } .rec { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e66a6a; animation: pulse 1.4s ease-in-out infinite; } .rbar b { width: 30px; margin-left: 2px; font-weight: 600; font-variant-numeric: tabular-nums; } .rbar em { flex: none; width: 1px; height: 16px; background: rgb(255 255 255 / .14); }
.rb, .rend { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 4px; border-radius: 7px; } .rbar em { margin: 0 2px; } .rb svg, .rend svg { flex: none; width: 14px; height: 14px; } .rend { color: #e66a6a; margin-left: auto; }
.rb.sh { --at: 3.25s; } .rb.ar { --at: 5.45s; } .rb.vi { --at: 7.65s; } .rb.no { --at: 9.85s; } .rb.to { --at: 12.35s; }
.beat.on .rb { animation: rbhit .8s var(--at) both; } @keyframes rbhit { 0%, 100% { background: transparent; } 12%, 55% { background: rgb(255 255 255 / .18); } }
.flash { position: absolute; inset: 0; z-index: 3; background: #06101f; opacity: 0; pointer-events: none; } .beat.on .flash { animation: flash .4s 3.5s ease-out both; } @keyframes flash { 0% { opacity: 0; } 22% { opacity: .3; } 100% { opacity: 0; } }
.thumbs { position: absolute; z-index: 3; left: 198px; bottom: 12px; display: flex; gap: 6px; } .th { position: relative; display: grid; place-items: center; overflow: hidden; width: 62px; height: 40px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px #13171d, 0 6px 16px rgb(0 0 0 / .35); }
.thm { position: absolute; left: 0; top: 0; transform: scale(.121); transform-origin: 0 0; } .th.t2 .thm, .th.b .thm { transform: scale(.27) translate(-262px, -18px); } .th svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)); } .ovth .thm { transform: scale(.141); } .ovth .th.b .thm { transform: scale(.31) translate(-262px, -18px); } .beat.on .thumbs { animation: thgo .3s 10.1s both; } @keyframes thgo { to { opacity: 0; } }
.thumbs .th { opacity: 0; }
.beat.on .t1 { animation: th .7s 3.7s var(--ease) both; } .beat.on .t2 { animation: th .6s 7.2s var(--ease) both; } .beat.on .t3 { animation: th .6s 9.65s var(--ease) both; } @keyframes th { from { opacity: 0; transform: translate(40px, -120px) scale(3.4); } to { opacity: 1; } }
.carea { position: absolute; z-index: 3; left: 262px; top: 62px; width: 232px; height: 196px; border: 2px dashed #1160ce; background: rgb(17 96 206 / .12); opacity: 0; transform-origin: 0 0; } .beat.on .carea { animation: carea 1.4s 6.05s linear both; } @keyframes carea { 0% { opacity: 1; transform: scale(0); } 57%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(0, 170px) scale(.27); } }
.credge { position: absolute; z-index: 3; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 3px #e5484d; opacity: 0; pointer-events: none; } .crec { position: absolute; z-index: 3; left: 50%; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin-left: -36px; border-radius: 13px; background: #e5484d; color: #fff; font: 700 13px var(--display); font-variant-numeric: tabular-nums; opacity: 0; } .crec b { font-weight: 700; } .crec i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1s infinite; }
.beat.on .credge, .beat.on .crec { animation: crec 1.75s 7.95s both; } @keyframes crec { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }
.ovp { position: absolute; z-index: 3; right: 8px; top: 8px; bottom: 8px; width: 272px; border-radius: 10px; background: #1d222b; color: #eceef1; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 16px 34px rgb(0 0 0 / .5); opacity: 0; font: 500 12.5px/1.3 var(--display); }
.ovp h4 { margin: 0 0 8px; font: 700 15px var(--display); letter-spacing: -.01em; } .ovp h6 { margin: 0 0 6px; font: 700 10.5px var(--display); letter-spacing: .07em; text-transform: uppercase; color: #a8afbb; } .ovp p { margin: 0 0 5px; color: #c4cad4; }
.ov-notes, .ov-todos { position: absolute; inset: 12px 13px; } .ov-todos { opacity: 0; }
.ovth { display: flex; gap: 6px; } .ovth .th { width: 72px; height: 46px; box-shadow: none; }
.ovt { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; } .ovt .chip { flex: none; height: 21px; min-width: 34px; padding: 0 7px; font-size: 11px; } .ovt p, .ovh p { margin: 0; } .ovp b { display: block; font-weight: 600; color: #eceef1; } .ovp small { font-size: 11px; color: #a8afbb; }
.ovh { display: flex; gap: 8px; margin-bottom: 6px; padding: 7px 8px; border-radius: 8px; background: #333b48; } .ovh > span { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(109 174 255 / .2); color: #9bc8ff; font: 700 11px var(--display); }
.beat.on .ovp { animation: ovp .6s 10.1s var(--spring) both; } @keyframes ovp { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; } }
.beat.on .ov-notes { animation: ovn .25s 12.45s both; } @keyframes ovn { to { opacity: 0; } } .beat.on .ov-todos { animation: ovto .3s 12.6s both; } @keyframes ovto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.kcur.rc { z-index: 6; transform: translate(530px, 330px); } .beat.on .kcur.rc { animation: rcur 10.3s 2.9s cubic-bezier(.45,.05,.2,1) both; }
@keyframes rcur { 0% { transform: translate(530px, 330px); opacity: 0; } 1% { opacity: 1; transform: translate(530px, 330px); } 3.9%, 6.8% { transform: translate(var(--x1), 24px); } 14.6%, 20.4% { transform: translate(190px, 170px); } 25.2%, 27.2% { transform: translate(var(--x2), 24px); } 30.6% { transform: translate(286px, 110px); } 38.3%, 40.3% { transform: translate(518px, 306px); } 43.7% { transform: translate(200px, 170px); } 46.6%, 48.5% { transform: translate(var(--x3), 24px); } 53.4%, 64% { transform: translate(200px, 180px); } 68%, 70.9% { transform: translate(var(--x4), 24px); } 75.7%, 88.3% { transform: translate(170px, 180px); } 92.2%, 100% { transform: translate(var(--x5), 24px); } }
.fcaps { position: absolute; left: 0; right: 0; top: 372px; height: 26px; text-align: center; font: 700 15px/26px var(--display); letter-spacing: -.015em; color: var(--text); } .fcaps span { position: absolute; left: 0; right: 0; opacity: 0; }
.beat.on .fcaps span { animation: fcap var(--l) var(--a) both; } @keyframes fcap { 0% { opacity: 0; transform: translateY(8px); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } } .beat.on .fcaps .last { animation: fcapl .5s var(--a) var(--soft) both; } @keyframes fcapl { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* Notes: the real meeting view. */
.writer { left: 30px; top: 0; width: 500px; height: 400px; background: #1d222b; } .dots.wd { position: absolute; left: 14px; top: 12px; }
.mv { position: absolute; inset: 34px 22px 14px; display: flex; flex-direction: column; } .mv h3 { margin: 0 0 8px; font: 700 23px var(--display); letter-spacing: -.02em; color: #eceef1; }
.mv-meta { display: flex; align-items: center; gap: 8px; font: 500 12px var(--display); color: #a8afbb; white-space: nowrap; } .mv-meta u { width: 1px; height: 13px; background: #4e5766; }
.mchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid #4e5766; border-radius: 7px; }
.mv .nbody { flex: 1; padding: 14px 0 0; min-height: 0; } .mv .nbody h4 { font-size: 14.5px; margin-bottom: 5px; } .mv .nbody h4:not(:first-child) { margin-top: 10px; } .mv .nbody p { margin-bottom: 3px; font-size: 13.5px; }
.mv-foot { display: flex; align-items: center; gap: 7px; height: 30px; margin-bottom: 8px; font: 500 12px var(--display); color: #c4cad4; white-space: nowrap; } .mpill, .mrec { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; background: #262d37; } .mrec { background: rgb(230 106 106 / .16); color: #f29a9a; } .mrec .wave { height: 13px; gap: 2px; color: #e66a6a; } .mrec .wave u { width: 2px; } .mwrite { margin-left: auto; font-style: italic; }
.mv-input { flex: none; height: 68px; padding: 10px 12px; border-radius: 12px; background: #333b48; border: 1px solid #4e5766; font: 500 13px var(--display); color: #a8afbb; } .mv-input > div { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; } .mv-input b { margin-right: auto; font-weight: 400; font-size: 17px; line-height: 1; } .mv-input small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.ksend.mini { position: static; width: 24px; height: 24px; background: #262d37; color: #86bbff; }
.mv .nbody p::before { transform-origin: center; } .beat.on .mv .nbody p::before { animation: bullet .3s calc(var(--d) * 1s) var(--spring) both; } @keyframes bullet { from { opacity: 0; transform: scale(0); } }
.mv .caret { visibility: hidden; } .beat.on .mv .caret { animation: capp .01s 2.95s forwards, pulse 1s steps(2) infinite; } @keyframes capp { to { visibility: visible; } }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: #6daeff; animation: pulse 1s steps(2) infinite; }

/* To-dos: lines stack as a transcript, the promise lights, a thread runs down the margin, its task opens there and
   becomes an action on the right app; a click solves it in the chat. */
.tdwin { left: 28px; top: 0; width: 504px; height: 400px; }
.tline { position: absolute; left: 48px; right: 16px; margin: 0; white-space: nowrap; font: 500 14px/26px var(--display); color: #a8afbb; } .tline > .tw:first-child { color: #8fbfff; font-weight: 700; margin-right: 2px; }
.tline mark { padding: 2px 4px; margin: 0 -2px; border-radius: 5px; color: #fff; background: linear-gradient(rgb(61 132 232 / .7), rgb(61 132 232 / .7)) no-repeat 0 0 / 0 100%; }
.beat.on .tline mark { animation: hl .4s calc(var(--d) * 1s) var(--ease) both; } @keyframes hl { to { background-size: 100% 100%; } }
.tsep { position: absolute; left: 48px; right: 16px; top: 142px; height: 1px; background: rgb(255 255 255 / .08); }
.tdh { position: absolute; left: 48px; top: 148px; margin: 0; font: 700 14px/26px var(--display); } .tdh span { margin-left: 3px; color: #a8afbb; font-variant-numeric: tabular-nums; }
.thread { fill: none; stroke: rgb(109 174 255 / .55); stroke-width: 1.6; stroke-linecap: round; } .tdot { fill: #6daeff; transform-box: fill-box; transform-origin: center; }
.tpack { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px #6daeff; opacity: 0; offset-rotate: 0deg; }
.beat.on .tpack { animation: tpack .5s calc(var(--d) * 1s) cubic-bezier(.5,0,.3,1) forwards; } @keyframes tpack { 0% { offset-distance: 0%; opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.beat.on .thread.draw { animation-duration: .5s; }
.trow { position: absolute; left: 48px; right: 16px; display: flex; align-items: center; gap: 11px; height: 50px; padding: 0 10px; border-radius: 11px; background: #262d37; }
.trow b { display: block; font: 600 14px/1.2 var(--display); } .trow small { font: 500 11.5px var(--display); color: #a8afbb; }
.beat.on .trow { animation: rowopen .5s calc(var(--d) * 1s) var(--ease) both, rowlit 1s calc(var(--d) * 1s) both; } @keyframes rowopen { from { clip-path: inset(0 100% 0 0 round 11px); } to { clip-path: inset(-4px -4px -4px -4px round 11px); } } @keyframes rowlit { 0%, 30% { box-shadow: inset 0 0 0 1.5px #6daeff; } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.beat.on .ttext { animation: tw .4s calc((var(--d) + .16) * 1s) var(--soft) both; } .beat.on .trow .chip { animation: pop .4s calc((var(--d) + .1) * 1s) var(--spring) both; }
.act { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; overflow: hidden; background: #333b48; box-shadow: inset 0 0 0 1px #4e5766; font: 600 12px var(--display); color: #eceef1; white-space: nowrap; } .act img { width: 15px; height: 15px; object-fit: contain; }
.beat.on .act { animation: actin .5s calc(var(--d) * 1s) var(--spring) both; } @keyframes actin { from { opacity: 0; transform: translateX(14px) scale(.9); } }
.actok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; background: #1f8f5c; color: #fff; font-style: normal; opacity: 0; } .beat.on .a1 .actok { animation: okact .3s 6.35s both; } .beat.on .a2 .actok { animation: okact .3s 8.6s both; } @keyframes okact { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.beat.on .act.a1 { animation: actin .5s calc(var(--d) * 1s) var(--spring) both, actpress .3s 4.95s both; } .beat.on .act.a2 { animation: actin .5s calc(var(--d) * 1s) var(--spring) both, actpress .3s 7.2s both; } @keyframes actpress { 40% { transform: scale(.93); box-shadow: inset 0 0 0 2px #6daeff; } }
.tchat { position: absolute; left: 48px; right: 16px; bottom: 10px; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: #333b48; box-shadow: inset 0 0 0 1px #4e5766; font: 500 13px var(--display); color: #a8afbb; opacity: 0; } .tchat .mark { flex: none; width: 20px; height: 20px; } .beat.on .tchat { animation: tchat .55s 4.95s var(--spring) both; } @keyframes tchat { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; } }
.tc { position: absolute; left: 42px; right: 10px; display: flex; align-items: center; gap: 6px; opacity: 0; white-space: nowrap; color: #eceef1; } .tc b { font-weight: 500; } .tc svg { color: #7be3a9; }
.beat.on .tc.t1 { animation: tcw 1.35s 5s both; } .beat.on .tc.t2 { animation: tcw 1.2s 6.35s both; } .beat.on .tc.t3 { animation: tcw 1.05s 7.55s both; } .beat.on .tc.t4 { animation: tcl .3s 8.6s both; } @keyframes tcw { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } } @keyframes tcl { to { opacity: 1; } }
.kcur.td { z-index: 6; transform: translate(540px, 396px); } .beat.on .kcur.td { animation: tdcur 4.2s 4.1s cubic-bezier(.45,.05,.2,1) both; }
@keyframes tdcur { 0% { opacity: 0; transform: translate(540px, 396px); } 3% { opacity: 1; transform: translate(540px, 396px); } 19%, 25% { transform: translate(452px, 266px); } 50% { transform: translate(470px, 372px); } 70%, 76% { transform: translate(452px, 320px); } 100% { transform: translate(480px, 380px); } }
.clk.c5 { left: 454px; top: 268px; } .clk.c6 { left: 454px; top: 322px; } .beat.on .clk.c5 { animation: clk .5s 4.92s forwards; } .beat.on .clk.c6 { animation: clk .5s 7.17s forwards; }

/* Sent */
.sendnote { left: 0; top: 96px; width: 226px; height: 208px; } .sendnote .nbody { padding: 12px 16px; }
.pulsebtn { position: absolute; right: 14px; bottom: 12px; padding: 3px 12px; border-radius: 13px; background: #1160ce; color: #fff; font: 600 12.5px var(--display); }
.fibre { fill: none; stroke: rgb(109 174 255 / .55); stroke-width: 2; stroke-linecap: round; }
.pack { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px #6daeff; opacity: 0; offset-rotate: 0deg; }
.beat.on .pack { animation: pack .75s calc(var(--d) * 1s) cubic-bezier(.5,0,.3,1) forwards; } @keyframes pack { 0% { offset-distance: 0%; opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.atile { position: absolute; left: 372px; display: flex; align-items: center; gap: 12px; width: 186px; height: 62px; padding: 0 14px; border-radius: 14px; background: #262d37; color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); font: 700 15.5px var(--display); }
.atile img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; } .atile .tick { margin-left: auto; }
.beat.on .atile { animation: land .55s calc(var(--d) * 1s) var(--spring) both; } @keyframes land { 0% { transform: scale(1); box-shadow: 0 0 0 1px rgb(255 255 255 / .08); } 40% { transform: scale(1.07); box-shadow: 0 0 0 2px #6daeff, 0 0 26px rgb(109 174 255 / .5); } }
.beat.on .atile .tick { animation: pop .4s calc((var(--d) + .12) * 1s) var(--spring) both; }

/* Press it */
.caps { position: absolute; left: 0; right: 0; top: 4px; display: flex; justify-content: center; gap: 10px; }
.cap-key { display: grid; place-items: center; height: 62px; min-width: 62px; padding: 0 22px; border-radius: 14px; background: #fff; color: var(--text); font: 500 22px -apple-system, system-ui, sans-serif; box-shadow: 0 6px 0 #aeb6c4; }
.beat.on .cap-key { animation: keydown .5s .32s both; } @keyframes keydown { 30%, 62% { transform: translateY(5px); box-shadow: 0 1px 0 #aeb6c4; } }
.orbc { position: absolute; left: 120px; top: 22px; width: 320px; height: 320px; pointer-events: none; }
.spoken { position: absolute; left: 0; right: 0; top: 288px; text-align: center; color: #fff; } .spoken small { display: block; font: 700 13px var(--display); color: rgb(255 255 255 / .6); margin-bottom: 3px; }
.spoken > p:not(.back) { font: 500 28px/1.15 var(--display); letter-spacing: -.02em; } .spoken .back { display: block; margin-top: 9px; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; color: #8fd8ff; } .spoken .back small { display: none; }

/* Orchestrate: the voice at the middle of the whole Mac. It all runs on one 7.5 second cycle. */
.ochip.small { position: absolute; left: 0; top: 34px; display: flex; align-items: center; gap: 10px; width: 188px; padding: 9px 12px 9px 9px; border-radius: 15px; background: #fff; color: var(--text); font: 600 13px/1.3 var(--display); box-shadow: 0 16px 36px rgb(0 0 0 / .45); z-index: 2; } .ochip.small .mark { flex: none; width: 20px; height: 20px; }
.hubc { left: 120px; top: 8px; z-index: 2; }
.spoke { fill: none; stroke: rgb(109 174 255 / .22); stroke-width: 1.4; }
.oapp { position: absolute; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 14px 30px rgb(0 0 0 / .45); } .oapp img { width: 26px; height: 26px; object-fit: contain; }
.beat.on .oapp.lit { animation: up .65s calc(var(--d) * 1s) var(--spring) both, oapp 7.5s calc(var(--c) * 1s) infinite; } @keyframes oapp { 0%, 22%, 100% { box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 14px 30px rgb(0 0 0 / .45); transform: none; } 3%, 16% { box-shadow: 0 0 0 2px #6daeff, 0 0 30px rgb(109 174 255 / .75); transform: scale(1.1); } }
.opack { position: absolute; z-index: 1; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px #6daeff; opacity: 0; offset-rotate: 0deg; } .beat.on .opack { animation: opack 7.5s calc(var(--d) * 1s) infinite; } @keyframes opack { 0% { offset-distance: 0%; opacity: 1; } 5.5% { opacity: 1; } 6.5% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
.ochipd { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 15px; background: #fff; color: var(--text); font: 700 13px var(--display); white-space: nowrap; opacity: 0; box-shadow: 0 10px 26px rgb(0 0 0 / .45); } .ochipd svg { color: #1f8f5c; } .beat.on .ochipd { animation: ochipd 7.5s calc(var(--d) * 1s) infinite; } @keyframes ochipd { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 3%, 18% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; } }
.osay { position: absolute; left: 0; right: 0; top: 344px; height: 44px; text-align: center; } .ocmd { position: absolute; left: 0; right: 0; margin: 0; font: 700 27px/1.2 var(--display); letter-spacing: -.025em; color: #fff; opacity: 0; } .beat.on .ocmd { animation: ocmd 7.5s calc(var(--d) * 1s) infinite; } @keyframes ocmd { 0% { opacity: 0; transform: translateY(10px); } 3%, 28% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translateY(-8px); } }

/* The arrow and the click ripple, shared by the pieces. */
.kcur { position: absolute; z-index: 7; left: 0; top: 0; transform: translate(540px, 380px); filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4)); opacity: 1; }
.clk { position: absolute; z-index: 6; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
@keyframes clk { from { opacity: .95; transform: scale(.2); } to { opacity: 0; transform: scale(1); } }

/* Automate the repetitive: the real Automations panel, one weekly chore in it. */
.asay { position: absolute; left: 0; right: 0; top: 0; margin: 0; text-align: center; font: 700 23px/1.2 var(--display); letter-spacing: -.025em; color: #fff; }
.apanel { left: 90px; top: 54px; width: 380px; height: 346px; padding: 11px 18px 9px; font: 500 12.5px/1.35 var(--display); color: #a8afbb; } .ap-back { margin-bottom: 5px; font-size: 12px; } .apanel h4 { margin: 0 0 3px; font: 700 17px var(--display); letter-spacing: -.015em; color: #eceef1; } .ap-desc { margin: 0 0 10px; }
.ap-btn { position: relative; height: 34px; margin-bottom: 11px; } .ap-btn i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; background: #1668c9; color: #fff; font: 600 13px var(--display); font-style: normal; } .ap-btn .b2 { background: #d8606c; opacity: 0; } .ap-btn .b3 { opacity: 0; }
.beat.on .ap-btn .b1 { animation: apclick .3s 1.85s both; } @keyframes apclick { 50% { transform: scale(.97); } } .beat.on .ap-btn .b2 { animation: apw 2.5s 2.05s both; } @keyframes apw { 0%, 100% { opacity: 0; } 6%, 94% { opacity: 1; } } .beat.on .ap-btn .b3 { animation: cuonb .2s 4.5s forwards; } @keyframes cuonb { to { opacity: 1; } }
.ap-h { display: flex; justify-content: space-between; margin-bottom: 7px; } .ap-h small { font: 700 10.5px var(--display); letter-spacing: .05em; } .ap-h small:last-child { font-weight: 500; letter-spacing: 0; }
.ap-run { position: relative; display: flex; align-items: center; gap: 8px; height: 24px; color: #eceef1; } .ap-run b { font-weight: 500; } .ap-run small { margin-left: auto; font-size: 11.5px; color: #a8afbb; } .ap-run .dot { width: 8px; height: 8px; border-radius: 50%; background: #3d84e8; } .ap-run .dot.g { background: #3dbe7c; } .beat.on .ap-run .dot { animation: apdot .2s 4.5s forwards; } .beat.on .ap-run .dot.g { animation: none; } @keyframes apdot { to { background: #3dbe7c; } }
.ap-run .r1, .ap-run .r2 { position: absolute; left: 16px; } .ap-run .r2 { opacity: 0; } .beat.on .ap-run .r1 { animation: apout .1s 4.5s forwards; } @keyframes apout { to { opacity: 0; } } .beat.on .ap-run .r2 { animation: cuonb .2s 4.5s forwards; }
.ap-log { margin: 3px 0 6px 16px; padding: 7px 10px; height: 92px; border-radius: 8px; background: #333b48; font: 500 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #eceef1; } .ap-log p { margin: 0; white-space: nowrap; width: fit-content; }
.ap-run.old { height: 22px; }

/* Konsole: the whole company, in one place. */
.kons, .chartw, .chatw { left: 18px; top: 8px; width: 524px; height: 384px; }
.khead { display: flex; align-items: center; gap: 10px; padding: 13px 20px 7px; } .khead > b { font: 700 18px var(--display); letter-spacing: -.02em; }
.kcount { padding: 2px 10px; border-radius: 12px; background: #333b48; font: 600 13px var(--display); font-variant-numeric: tabular-nums; }
.fpill { margin-left: auto; padding: 5px 13px; border-radius: 15px; border: 1px solid #4e5766; font: 600 12.5px var(--display); color: #a8afbb; }
.beat.on .fpill { animation: fp .3s 3.1s both; } @keyframes fp { to { background: rgb(109 174 255 / .16); border-color: #6daeff; color: #9bc8ff; } }
.kpeople { display: flex; align-items: center; gap: 10px; padding: 0 20px 8px; font: 500 12.5px var(--display); color: #a8afbb; } .faces { display: flex; } .faces .av { width: 24px; height: 24px; margin-right: -6px; font-size: 10.5px; box-shadow: 0 0 0 2px #1d222b; } .faces + small { margin-left: 6px; }
.mtable { padding: 0 12px; } .mrow { display: flex; align-items: center; gap: 10px; height: 47px; padding: 0 8px; border-top: 1px solid rgb(255 255 255 / .06); } .mrow b { font: 600 14px var(--display); } .mrow small { width: 62px; text-align: right; font: 500 12px var(--display); color: #a8afbb; } .team { margin-left: auto; padding: 2px 8px; border-radius: 10px; background: #333b48; font: 600 11px var(--display); color: #c4cad4; } .hit .team { background: rgb(109 174 255 / .2); color: #9bc8ff; }
.beat.on .mrow { animation: gather .85s calc(var(--d) * 1s) cubic-bezier(.3,1.1,.3,1) both; } @keyframes gather { from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.86); } 30% { opacity: 1; } }
.beat.on .mrow:not(.hit) { animation: gather .85s calc(var(--d) * 1s) cubic-bezier(.3,1.1,.3,1) both, dimr .35s 3.2s both; } @keyframes dimr { to { opacity: .28; } }
.kpi { margin-left: auto; font: 800 25px var(--display); letter-spacing: -.03em; color: #9bc8ff; font-variant-numeric: tabular-nums; }
.kq { display: flex; align-items: center; gap: 11px; padding: 16px 20px 6px; font: 700 19px/1.25 var(--display); letter-spacing: -.02em; color: #fff; } .kq .mark { flex: none; width: 24px; height: 24px; }
.kt { position: absolute; left: 55px; top: 86px; } .beat.on .kt { animation: think .8s .95s both; }
.ranks { padding: 22px 20px 0; } .rank { margin-bottom: 15px; } .rank-t { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; } .rank-t b { font: 600 15px var(--display); color: #eceef1; } .rank-t small { font: 500 12px var(--display); color: #a8afbb; } .rank-t em { margin-left: auto; font: 700 14px var(--display); font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.rank > u { display: block; height: 9px; border-radius: 5px; background: #3d84e8; transform: scaleX(var(--v)); transform-origin: 0 50%; } .rank:first-child > u { background: #6daeff; }
.beat.on .rank { animation: tw .3s calc(var(--d) * 1s) both; } .beat.on .rank > u { animation: pgrow .8s calc(var(--d) * 1s) var(--ease) both; }
.kquote { margin: 6px 20px 0; padding: 11px 14px; border-radius: 11px; background: #262d37; font: 600 14.5px/1.3 var(--display); color: #eceef1; } .kquote small { display: block; margin-top: 2px; font: 500 12px var(--display); color: #a8afbb; } .kquote.tw { display: block; }
.pitches { margin-top: 10px; } .pitch { display: grid; grid-template-columns: 168px 1fr 38px; gap: 10px; align-items: center; height: 26px; font: 500 12.5px var(--display); color: #c4cad4; } .pitch u { display: block; height: 8px; border-radius: 4px; background: #3d84e8; transform: scaleX(var(--v)); transform-origin: 0 50%; } .pitch:first-child u { background: #6daeff; } .pitch b { text-align: right; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.beat.on .pitch { animation: tw .3s calc(var(--d) * 1s) both; } .beat.on .pitch u { animation: pgrow .7s calc(var(--d) * 1s) var(--ease) both; } @keyframes pgrow { from { transform: scaleX(0); } }
.qbub { position: absolute; right: 18px; top: 52px; max-width: 340px; padding: 9px 14px; border-radius: 13px 13px 4px 13px; background: #1f3a63; font: 500 14.5px/1.35 var(--display); }
.beat.on .qbub { animation: up .45s 1.2s var(--spring) both; }
.thinking { position: absolute; left: 20px; top: 112px; font: 600 14px var(--display); opacity: 0; } .beat.on .thinking { animation: think .85s 1.25s both; } @keyframes think { 0%, 100% { opacity: 0; } 18%, 82% { opacity: 1; } }
.ans { position: absolute; left: 20px; right: 34px; top: 112px; font: 500 16px/1.42 var(--display); color: #eceef1; } .ans p { margin: 0; } .srcs { display: flex; gap: 7px; margin-top: 12px; } .srcs u { padding: 4px 12px; border-radius: 13px; background: rgb(109 174 255 / .16); color: #9bc8ff; text-decoration: none; font: 600 12.5px var(--display); }
.kinput { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 58px; padding: 0 56px 0 16px; display: flex; align-items: center; border-radius: 12px; background: #333b48; border: 1px solid #4e5766; font: 500 14.5px var(--display); color: #eceef1; }
.typing { display: inline-block; white-space: nowrap; overflow: hidden; } .beat.on .typing { animation: typed .85s .15s steps(30) both, cleared .01s 1.2s both; } @keyframes typed { from { max-width: 0; } to { max-width: 330px; } } @keyframes cleared { to { opacity: 0; } }
.kph { position: absolute; left: 16px; color: #a8afbb; } .beat.on .kph { animation: tw .3s 1.3s both; }
.ksend { position: absolute; right: 12px; top: 13px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1160ce; color: #fff; } .beat.on .ksend { animation: sendp .3s 1.08s both; } @keyframes sendp { 50% { transform: scale(.82); } }