/* The four scenes share one transparent stage, so the figure never cuts between sections. */
*,::before,::after {
  box-sizing:border-box
}
html,body {
  overflow-x:clip;
  overscroll-behavior:none
}
html {
  background:var(--site);
  color:var(--ink-1);
  scroll-behavior:smooth
}
body {
  margin:0;
  font:400 var(--t-m)/var(--lh-m) var(--font-text);
  letter-spacing:var(--tr-m);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
p,h1,h2,h3,figure {
  margin:0
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px
}
::selection {
  background:var(--lavender);
  color:var(--bg)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip-link {
  position:fixed;
  z-index:20;
  left:var(--s16);
  top:var(--s16);
  padding:var(--s12) var(--s16);
  background:var(--yellow);
  color:var(--bg);
  border-radius:var(--r-s);
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:none
}
.hd {
  position:fixed;
  top:var(--header-top);
  left:0;
  right:0;
  z-index:10;
  width:max-content;
  max-width:calc(100% - var(--edge));
  margin:0 auto;
  display:flex;
  align-items:center;
  font-size:var(--t-s);
  font-weight:500;
  line-height:1;
  letter-spacing:var(--tr-s);
  white-space:nowrap
}
.hd__bar {
  display:flex;
  align-items:center;
  height:var(--hd-h);
  padding:var(--hd-inset);
  border-radius:var(--r-m);
  background:var(--hd-surface);
  -webkit-backdrop-filter:blur(calc(var(--u)*24)) saturate(1.4) brightness(.5);
  backdrop-filter:blur(calc(var(--u)*24)) saturate(1.4) brightness(.5)
}
.hd__tile {
  display:grid;
  place-items:center;
  width:calc(var(--u)*40);
  height:calc(var(--u)*40);
  border-radius:calc(var(--r-m) - var(--hd-inset));
  background:var(--hd-tile)
}
.mark {
  display:grid;
  grid-template-columns:repeat(3,calc(var(--u)*4));
  gap:calc(var(--u)*3)
}
.mark i {
  width:calc(var(--u)*4);
  height:calc(var(--u)*4);
  background:var(--ink-3)
}
.mark i:nth-child(even) {
  background:var(--ink-2)
}
.mark i:nth-child(5) {
  background:var(--ink-1)
}
.hd__clock {
  margin-left:var(--s12);
  font-size:var(--t-m);
  font-weight:400;
  letter-spacing:var(--tr-m);
  font-variant-numeric:tabular-nums;
  color:var(--ink-1)
}
.hd__sec {
  color:var(--hd-ink)
}
.hd__rule {
  width:1px;
  height:var(--s16);
  margin:0 var(--s16);
  background:var(--rule)
}
.hd__status {
  display:inline-flex;
  align-items:center;
  gap:var(--s8);
  color:var(--hd-ink)
}
.hd__dot,.badge__dot {
  width:calc(var(--u)*6);
  height:calc(var(--u)*6);
  flex-shrink:0;
  border-radius:50%;
  background:var(--cyan)
}
.hd__dot,.badge__dot--live {
  animation:hd-pulse 1.8s ease-in-out infinite
}
.hd__nav {
  display:flex;
  gap:var(--s16)
}
.hd__nav a {
  color:var(--hd-ink);
  transition:color var(--dur-ui) var(--ease-out)
}
.hd__btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s12);
  height:calc(var(--u)*40);
  padding:0 var(--s16);
  border-radius:calc(var(--r-m) - var(--hd-inset));
  transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-ui) var(--ease-out)
}
.hd__btn:active {
  transform:scale(var(--press))
}
.hd__nav+.hd__btn {
  margin-left:var(--s16)
}
.hd__btn+.hd__btn {
  margin-left:var(--hd-inset)
}
.hd__btn--card {
  background:var(--hd-tile);
  color:var(--ink-1)
}
.hd__btn--main {
  background:var(--yellow);
  color:var(--bg)
}
.hd.is-light .hd__bar {
  background:var(--hd-light)
}
.hd.is-light .hd__tile,.hd.is-light .hd__btn--card {
  background:var(--hd-tile-light)
}
.hd__bar,.hd__clock,.hd__sec,.hd__status,.hd__nav a,.hd__rule,.hd__tile {
  transition:background-color 400ms var(--ease-out),color 400ms var(--ease-out)
}
.js .hd {
  animation:hd-in var(--dur-in) var(--ease-expo) backwards
}
@keyframes hd-pulse {
  50% {
    opacity:.35
  }
}
@keyframes hd-in {
  from {
    opacity:0;
    transform:translateY(calc(-1*var(--in-y)));
    filter:blur(var(--in-blur))
  }
}
.hero {
  position:relative;
  height:0
}
.stage {
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  transform-origin:center
}
.stage canvas {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}
.stage.is-framed {
  overflow:hidden;
  background:var(--site)
}
.hero__title {
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  margin:0;
  top:calc(var(--bust-top,calc(107% - min(78%,98.4vw))) + 40px);
  transform:translateY(-50%);
  font-family:var(--font-pixel);
  font-size:calc((100vw - var(--edge)*2)/var(--title-length));
  font-weight:400;
  line-height:var(--lh-d1);
  letter-spacing:0;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  color:var(--ink-2);
  mask-image:radial-gradient(var(--hrx,24vh) var(--hry,30vh) at var(--hx,50%) var(--hy,130%),transparent 0%,transparent 64%,#000 100%)
}
.hero__note {
  position:fixed;
  left:var(--edge);
  bottom:var(--edge);
  z-index:3;
  font-size:var(--t-l);
  line-height:var(--lh-l);
  letter-spacing:var(--tr-l)
}
.hero__meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s16);
  margin-bottom:var(--s24);
  font-size:var(--t-s);
  line-height:var(--lh-s);
  color:var(--ink-3);
  white-space:nowrap
}
.hero__lead {
  color:var(--ink-1);
  text-wrap:balance
}
.hero__lead span {
  display:block;
  color:var(--ink-3)
}
.hero__explore {
  position:fixed;
  right:var(--edge);
  bottom:var(--edge);
  z-index:4;
  display:flex;
  gap:var(--s24);
  align-items:center;
  color:var(--ink-2);
  font-size:var(--t-s)
}
.hero__explore span {
  font-size:var(--t-l)
}
.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s8);
  height:var(--s32);
  padding:0 var(--s12);
  border-radius:var(--r-s);
  background:var(--rule);
  -webkit-backdrop-filter:var(--chip-blur);
  backdrop-filter:var(--chip-blur);
  font-size:var(--t-s);
  font-weight:500;
  line-height:1;
  color:var(--ink-1);
  white-space:nowrap
}
.badge__dot {
  background:var(--lavender)
}
.badge__dot--live {
  background:var(--cyan)
}
.badge--quiet {
  color:var(--hd-ink)
}
.badge--yellow {
  color:var(--yellow)
}
.js .hero__title {
  animation:title-in var(--dur-in) var(--ease-expo) backwards
}
.js .hero__meta,.js .hero__lead {
  animation:block-in var(--dur-in) var(--ease-expo) backwards
}
.js .hero__meta {
  animation-delay:60ms
}
.js .hero__lead {
  animation-delay:120ms
}
@keyframes title-in {
  from {
    opacity:0;
    transform:translateY(calc(-50% + var(--in-y)));
    filter:blur(var(--in-blur))
  }
}
@keyframes block-in {
  from {
    opacity:0;
    transform:translateY(var(--in-y));
    filter:blur(var(--in-blur))
  }
}
.hero__title,.hero__meta,.hero__lead,.hero__explore {
  transition:opacity 1100ms var(--ease-expo),translate 1100ms var(--ease-expo),scale 1100ms var(--ease-expo),filter 1100ms var(--ease-expo),visibility 0s
}
.hero__meta {
  transition-delay:80ms
}
.hero__lead {
  transition-delay:160ms
}
.is-hero-out .hero__title,.is-hero-out .hero__meta,.is-hero-out .hero__lead,.is-hero-out .hero__explore {
  opacity:0;
  visibility:hidden;
  transition:opacity 700ms cubic-bezier(.45,0,.55,1),translate 700ms var(--ease-out),scale 700ms var(--ease-out),filter 700ms var(--ease-out),visibility 0s 760ms
}
.is-hero-out .hero__title {
  translate:0 -4vh;
  scale:.97;
  filter:blur(16px)
}
.is-hero-out .hero__meta,.is-hero-out .hero__lead {
  translate:0 -16px;
  filter:blur(10px)
}
.is-hero-out .hero__lead {
  transition-delay:70ms,70ms,70ms,70ms,830ms
}
.os {
  position:relative;
  z-index:3;
  height:420vh
}
.os__pin {
  position:sticky;
  top:0;
  height:100vh;
  overflow:clip;
  pointer-events:none
}
.frame-head {
  position:absolute;
  z-index:1;
  top:5.5%;
  width:100%;
  display:grid;
  justify-items:center;
  gap:var(--s16);
  opacity:0;
  transform-origin:50% 0;
  text-align:center
}
.frame-head__title {
  font-size:var(--t-l);
  line-height:var(--lh-l);
  letter-spacing:var(--tr-l);
  color:var(--ink-1)
}
.frame-head__title span {
  display:block;
  color:var(--ink-3)
}
.ow {
  position:absolute;
  isolation:isolate;
  will-change:transform,opacity;
  contain:layout style;
  opacity:0;
  border-radius:var(--r-m);
  background:rgba(var(--widget-surface),calc(.8*var(--glass,0)));
  box-shadow:var(--l-lift);
  color:var(--ink-1);
  font-size:var(--t-s);
  line-height:1.2;
  letter-spacing:var(--tr-s);
  --ink-2:var(--widget-ink-2);
  --ink-3:var(--widget-ink-3)
}
.ow::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--widget-solid);
  opacity:var(--solid,1);
  pointer-events:none
}
.ow.has-glass {
  -webkit-backdrop-filter:blur(calc(var(--u)*16*var(--glass))) saturate(calc(1 + .4*var(--glass)));
  backdrop-filter:blur(calc(var(--u)*16*var(--glass))) saturate(calc(1 + .4*var(--glass)))
}
.ow--img-b {
  left:12vw;
  top:25vh;
  width:calc(var(--u)*200);
  height:calc(var(--u)*170);
  z-index:4
}
.ow--img-c {
  left:15.5vw;
  top:47vh;
  width:calc(var(--u)*160);
  height:calc(var(--u)*136);
  z-index:6
}
.ow--img {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:var(--s8);
  margin:0;
  padding:calc(var(--u)*6) calc(var(--u)*6) var(--s8);
  border-radius:var(--r-l)
}
.ph {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:calc(var(--r-l) - var(--u)*6)
}
.ow figcaption {
  display:flex;
  justify-content:space-between;
  padding:0 calc(var(--u)*6);
  gap:var(--s8)
}
.ow figcaption span {
  color:var(--ink-3)
}
.ow--add {
  left:5vw;
  top:48vh;
  z-index:7;
  display:flex;
  align-items:center;
  gap:var(--s12);
  padding:calc(var(--u)*6) calc(var(--u)*6) calc(var(--u)*6) var(--s12);
  font-weight:500
}
.ow--tools {
  left:61vw;
  top:25vh;
  z-index:3;
  display:flex;
  gap:calc(var(--u)*6);
  padding:calc(var(--u)*6)
}
.ow--chart {
  left:73vw;
  top:33vh;
  z-index:5;
  display:grid;
  gap:var(--s12);
  width:calc(var(--u)*250);
  padding:var(--s16) var(--s16) var(--s12);
  border-radius:var(--r-l)
}
.ow--composer {
  left:0;
  right:0;
  margin:0 auto;
  top:calc(78vh - 20px);
  z-index:8;
  display:grid;
  gap:var(--s12);
  width:calc(var(--u)*560);
  padding:var(--s16);
  border-radius:var(--r-l)
}
.ow--toast {
  left:70vw;
  top:68vh;
  z-index:9;
  display:flex;
  align-items:center;
  gap:var(--s12);
  height:var(--s48);
  padding:0 var(--s16) 0 var(--s12);
  white-space:nowrap
}
.lkey,.lchip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--fill-1);
  border-radius:var(--r-s)
}
.lkey {
  width:calc(var(--u)*34);
  height:calc(var(--u)*34)
}
.lkey--send {
  background:var(--ink-1);
  color:var(--bg)
}
.lchip {
  height:var(--s32);
  padding:0 var(--s12);
  gap:var(--s8)
}
.lchip:has(kbd) {
  padding-right:calc(var(--u)*6)
}
kbd {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit
}
.lchip kbd {
  height:calc(var(--u)*20);
  padding:0 calc(var(--u)*6);
  border-radius:var(--r-xs);
  background:rgba(0,0,0,.28);
  color:var(--ink-2)
}
.ow__head {
  display:flex;
  justify-content:space-between;
  font-weight:500
}
.ow__up {
  font-weight:400;
  color:var(--ink-2)
}
.minibars {
  display:flex;
  align-items:flex-end;
  gap:calc(var(--u)*6);
  height:calc(var(--u)*84)
}
.minibars i {
  flex:1;
  height:calc(var(--h)*1%);
  border-radius:calc(var(--u)*3);
  background:var(--lavender);
  transform-origin:bottom;
  transform:scaleY(.08);
  transition:transform 300ms var(--ease-out)
}
.minibars i.now {
  background:var(--yellow)
}
.minibars.is-grown i {
  transform:none;
  transition:transform 900ms var(--ease-expo);
  transition-delay:calc(var(--j)*40ms)
}
.minibars__axis {
  display:flex;
  justify-content:space-between;
  color:var(--ink-3)
}
.composer__text {
  min-height:calc(var(--t-m)*var(--lh-m)*2);
  font-size:var(--t-m);
  line-height:var(--lh-m);
  letter-spacing:var(--tr-m);
  color:var(--ink-1)
}
.is-empty [data-typed] {
  color:var(--ink-3)
}
.caret-text {
  display:inline-block;
  width:1.5px;
  height:1.1em;
  margin-left:1px;
  vertical-align:-.15em;
  background:var(--ink-1);
  animation:blink 1s steps(1) infinite
}
@keyframes blink {
  50% {
    opacity:0
  }
}
.composer__bar,.composer__end {
  display:flex;
  gap:calc(var(--u)*6)
}
.composer__end {
  margin-left:auto
}
.composer__glow {
  position:absolute;
  left:var(--s24);
  right:var(--s24);
  bottom:0;
  height:calc(var(--u)*2);
  border-radius:var(--r-pill);
  background:var(--grad-golden)
}
.plus {
  position:relative;
  width:calc(var(--u)*12);
  height:1.5px;
  background:currentColor
}
.plus::before {
  content:"";
  position:absolute;
  inset:0;
  transform:rotate(90deg);
  background:currentColor
}
.mic {
  position:relative;
  width:calc(var(--u)*7);
  height:calc(var(--u)*11);
  border:1.5px solid currentColor;
  border-radius:calc(var(--u)*4);
  margin-bottom:calc(var(--u)*4)
}
.mic::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(var(--u)*-4);
  width:calc(var(--u)*11);
  height:calc(var(--u)*5);
  border:1.5px solid currentColor;
  border-top:0;
  border-radius:0 0 var(--r-s) var(--r-s);
  transform:translateX(-50%)
}
.arrow {
  width:var(--s8);
  height:var(--s8);
  border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor
}
.arrow--up {
  transform:translateY(calc(var(--u)*2)) rotate(135deg)
}
.done {
  position:relative;
  display:inline-block;
  width:calc(var(--u)*20);
  height:calc(var(--u)*20);
  flex-shrink:0;
  background:var(--lavender);
  border-radius:50%
}
.done::after {
  content:"";
  position:absolute;
  left:34%;
  top:24%;
  width:26%;
  height:44%;
  border-right:1.5px solid var(--bg);
  border-bottom:1.5px solid var(--bg);
  transform:rotate(45deg)
}
.os__caption {
  position:absolute;
  bottom:var(--s16);
  width:100%;
  text-align:center;
  color:var(--l-ink-2);
  font-size:var(--t-s);
  opacity:0
}
.screen {
  position:relative;
  z-index:2;
  padding:64vh 0 24vh
}
/* The last screen scrolls up to the middle of the window. */
main>.screen:last-child {
  padding-bottom:48vh
}
.screen__col {
  display:grid;
  gap:var(--s72);
  width:min(calc(var(--u)*520),38vw)
}
.screen--right .screen__col {
  margin-left:56vw
}
.screen--left .screen__col {
  margin-left:var(--edge)
}
.screen__head {
  display:grid;
  gap:var(--s24)
}
.screen__eyebrow {
  display:flex;
  align-items:center;
  gap:var(--s16);
  font-size:var(--t-s);
  line-height:var(--lh-s);
  color:var(--ink-3)
}
.screen__title {
  font-size:var(--t-l);
  font-weight:400;
  line-height:var(--lh-l);
  letter-spacing:var(--tr-l);
  color:var(--ink-1);
  text-wrap:balance
}
.screen__sub {
  display:block;
  color:var(--ink-3)
}
.screen__text {
  max-width:40ch;
  color:var(--ink-2)
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s8);
  list-style:none;
  padding:0;
  margin:0
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:var(--s8);
  height:calc(var(--u)*36);
  padding:0 var(--s12);
  border-radius:var(--r-s);
  background:var(--rule);
  -webkit-backdrop-filter:var(--chip-blur);
  backdrop-filter:var(--chip-blur);
  font-size:var(--t-s);
  line-height:1;
  color:var(--ink-1)
}
.panel {
  display:grid;
  gap:var(--s24);
  padding:var(--s24);
  border-radius:var(--r-l);
  background:var(--panel-glass);
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
  --ink-3:var(--panel-ink-3)
}
.panel__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s16)
}
.panel__title {
  font-size:var(--t-m);
  font-weight:500;
  color:var(--ink-1)
}
.panel__note {
  font-size:var(--t-s);
  color:var(--ink-3)
}
.panel .chips {
  margin-top:calc(-1*var(--s8))
}
.seg {
  display:inline-flex;
  gap:var(--s4);
  padding:var(--s4);
  border-radius:var(--r-s);
  background:var(--fill-1);
  -webkit-backdrop-filter:var(--chip-blur);
  backdrop-filter:var(--chip-blur)
}
.seg__btn {
  height:calc(var(--u)*28);
  padding:0 var(--s12);
  border:0;
  border-radius:var(--r-xs);
  background:transparent;
  font-size:var(--t-s);
  font-weight:500;
  line-height:1;
  color:var(--ink-2);
  transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)
}
.seg__btn.is-on {
  background:var(--fill-2);
  color:var(--ink-1)
}
.bars {
  display:grid;
  gap:var(--s12)
}
.bars__plot {
  display:flex;
  align-items:flex-end;
  gap:var(--s4);
  height:calc(var(--u)*140)
}
.bars__plot i {
  flex:1;
  height:calc(var(--h)*1%);
  min-height:calc(var(--u)*14);
  border-radius:calc(var(--u)*2);
  background:var(--fill-1);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform var(--rv-out) var(--ease-out)
}
.bars__plot i.on {
  background:var(--lavender)
}
.bars__plot i.now {
  background:var(--yellow)
}
.is-in .bars__plot.is-grown i {
  transform:none;
  transition:transform 900ms var(--ease-expo);
  transition-delay:calc(320ms + var(--j)*18ms)
}
.bars__axis {
  display:flex;
  justify-content:space-between;
  gap:var(--s8);
  font-size:var(--t-s);
  color:var(--ink-3)
}
.bars__axis .is-now {
  text-transform:uppercase;
  letter-spacing:var(--tr-caps);
  color:var(--lavender)
}
.knowledge-list {
  display:grid;
  gap:var(--s24)
}
.knowledge-list>div {
  display:flex;
  align-items:center;
  gap:var(--s12)
}
.knowledge-list small {
  display:block;
  color:var(--ink-3);
  font-size:var(--t-s);
  margin-top:var(--s4)
}
.knowledge-list .done {
  margin-left:auto
}
/* Where contacts come from: a label, its count and a thin bar for its share. */
.sources {
  display:grid;
  gap:var(--s16);
  list-style:none;
  padding:0;
  margin:0
}
.sources li {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--s8) var(--s16)
}
.sources b {
  font-weight:400;
  color:var(--ink-1)
}
.sources span {
  font-size:var(--t-s);
  color:var(--ink-3);
  font-variant-numeric:tabular-nums
}
.sources i {
  grid-column:1/-1;
  height:var(--s4);
  border-radius:var(--s4);
  background:var(--fill-2);
  overflow:hidden
}
.sources i::before {
  content:"";
  display:block;
  width:var(--share);
  height:100%;
  border-radius:inherit;
  background:var(--lavender)
}
.file-icon {
  display:grid;
  place-items:center;
  width:var(--s48);
  height:var(--s48);
  border-radius:var(--r-s);
  background:var(--fill-2);
  font-family:var(--font-dots);
  font-size:var(--t-s);
  color:var(--lavender)
}
.transcript {
  display:grid;
  gap:var(--s24)
}
.transcript span {
  display:block;
  margin-bottom:var(--s8);
  font-size:var(--t-s);
  color:var(--ink-3)
}
.transcript p:last-child {
  color:var(--lavender)
}
.wave {
  display:flex;
  align-items:center;
  gap:var(--s4);
  height:var(--s48)
}
.wave i {
  flex:1;
  height:24%;
  border-radius:var(--r-pill);
  background:var(--lavender)
}
.wave i:nth-child(3n) {
  height:65%
}
.wave i:nth-child(4n) {
  height:42%
}
.wave i:nth-child(5n) {
  height:92%;
  background:var(--yellow)
}
.start-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--s48);
  padding:var(--s12) var(--s16);
  border-radius:var(--r-s);
  background:var(--yellow);
  color:var(--bg);
  font-weight:500
}
.panel--start .panel__head {
  align-items:flex-start
}
.panel--start .badge {
  flex-shrink:0
}
.js .rv {
  --rv-y:32px;
  opacity:0;
  transform:translateY(var(--rv-y));
  filter:blur(calc(var(--u)*12));
  transition:opacity var(--rv-out) var(--ease-out),transform var(--rv-out) var(--ease-out),filter var(--rv-out) var(--ease-out)
}
.js [data-dir="up"]:not(.is-in) .rv,.js .rv[data-dir="up"]:not(.is-in) {
  --rv-y:-24px
}
.js .rv--word {
  display:inline-block;
  --rv-y:.35em;
  filter:blur(calc(var(--u)*10))
}
.js .rv--chip,.js .rv--panel {
  filter:none
}
.js .rv--panel {
  --rv-y:48px
}
.js .is-in .rv,.js .rv.is-in {
  opacity:1;
  transform:none;
  filter:none;
  transition:opacity var(--rv-in) var(--ease-expo),transform var(--rv-in) var(--ease-expo),filter var(--rv-in) var(--ease-expo);
  transition-delay:calc(var(--d,0)*1ms)
}
.js .is-in .rv--word {
  transition-duration:1100ms
}
.veil {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:16vh;
  z-index:2;
  pointer-events:none
}
.veil i {
  position:absolute;
  inset:0
}
.bust-fallback {
  position:absolute;
  left:28%;
  right:28%;
  top:36%;
  bottom:-10%;
  border-radius:45% 45% 0 0;
  opacity:.25;
  background:radial-gradient(ellipse at 50% 25%,var(--lavender),transparent 60%);
  filter:blur(var(--s24))
}
.bust-fallback div {
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--lavender) 1px,transparent 1px);
  background-size:var(--s8) var(--s8);
  mask-image:radial-gradient(ellipse at 50% 35%,#000 10%,transparent 70%)
}
.has-cloud .bust-fallback {
  display:none
}
.boot-fallback .rv {
  opacity:1;
  transform:none;
  filter:none
}
.boot-fallback .os {
  height:100vh
}
.boot-fallback .screen {
  padding-top:35vh
}
.boot-fallback .stage {
  opacity:.4
}
.boot-fallback .hero__note {
  position:absolute;
  top:70vh;
  bottom:auto
}
.boot-fallback .hero__explore {
  display:none
}
.boot-fallback .bars__plot i {
  transform:none
}
@media(hover:hover) and (pointer:fine) {
  .hd__nav a:hover,.seg__btn:hover {
    color:var(--ink-1)
  }
  .hd__btn--card:hover {
    background:var(--hd-hover)
  }
  .hd__btn--main:hover,.start-link:hover {
    background:var(--yellow-hover)
  }
  .hd.is-light .hd__btn--card:hover {
    background:var(--hd-hover-light)
  }
}
@media(max-width:1100px) {
  .hd__status,.hd__rule--status {
    display:none
  }
  .panel__head {
    flex-wrap:wrap
  }
  .ow--toast {
    left:67vw
  }
  .ow--tools {
    left:58vw
  }
}
@media(max-width:767px) {
  .hd {
    top:var(--s8);
    left:var(--s8);
    right:var(--s8);
    width:auto;
    max-width:none;
    margin:0
  }
  .hd__bar {
    flex:1
  }
  .hd__rule,.hd__nav,.hd__btn--card {
    display:none
  }
  .hd__btn--main {
    margin-left:auto!important
  }
  .hd__clock {
    font-size:var(--t-s)
  }
  .hero__title {
    top:24%;
    left:-.038em;
    font-size:calc((100vw - 32px)/4.37);
    white-space:normal;
    line-height:.95
  }
  .hero__title span {
    display:block
  }
  .hero__note {
    left:var(--s8);
    right:var(--s8);
    bottom:var(--s8);
    padding:var(--s16);
    border-radius:var(--r-l);
    background:var(--glass);
    -webkit-backdrop-filter:var(--glass-filter);
    backdrop-filter:var(--glass-filter);
    font-size:var(--t-m)
  }
  .hero__meta {
    margin-bottom:var(--s12);
    gap:var(--s8);
    white-space:normal
  }
  .hero__lead br {
    display:none
  }
  .hero__lead span {
    color:var(--ink-2)
  }
  .hero__explore {
    display:none
  }
  .is-hero-out .hero__note {
    background:transparent;
    backdrop-filter:none
  }
  .screen {
    padding:48vh var(--gutter) 18vh
  }
  main>.screen:last-child {
    padding-bottom:20vh
  }
  .screen__col {
    width:100%;
    gap:var(--s32)
  }
  .screen--right .screen__col,.screen--left .screen__col {
    margin-left:0
  }
  .screen__head {
    padding:var(--s16);
    border-radius:var(--r-l);
    background:var(--glass);
    backdrop-filter:var(--glass-filter)
  }
  .screen__title {
    font-size:var(--t-l)
  }
  .panel {
    padding:var(--s24)
  }
  .screen__eyebrow {
    gap:var(--s8)
  }
  .panel__head {
    gap:var(--s12)
  }
  .panel__title {
    font-size:var(--t-m)
  }
  .ow--img-b {
    left:3vw;
    top:27vh;
    width:calc(var(--u)*130);
    height:calc(var(--u)*115)
  }
  .ow--img-c {
    left:8vw;
    top:52vh;
    width:calc(var(--u)*105);
    height:calc(var(--u)*100)
  }
  .ow--img figcaption {
    font-size:calc(var(--t-s)*.85);
    gap:0
  }
  .ow--img figcaption span {
    display:none
  }
  .ow--add {
    left:2vw;
    top:46vh;
    font-size:calc(var(--t-s)*.85)
  }
  .ow--add .lkey {
    width:var(--s24);
    height:var(--s24)
  }
  .ow--tools {
    left:auto;
    right:2vw;
    top:24vh;
    gap:var(--s4);
    padding:var(--s4)
  }
  .ow--tools .lchip {
    padding:0 var(--s8);
    font-size:calc(var(--t-s)*.85)
  }
  .ow--tools kbd {
    display:none
  }
  .ow--chart {
    left:auto;
    right:2vw;
    top:35vh;
    width:calc(var(--u)*150);
    padding:var(--s12);
    gap:var(--s8)
  }
  .ow--chart .ow__up {
    display:none
  }
  .minibars {
    height:calc(var(--u)*64)
  }
  .ow--composer {
    top:75vh;
    width:calc(100% - var(--s32));
    padding:var(--s12)
  }
  .ow--toast {
    left:auto;
    right:3vw;
    top:65vh;
    font-size:calc(var(--t-s)*.85);
    height:calc(var(--u)*38);
    gap:var(--s8);
    padding:0 var(--s12)
  }
  .ow--toast .done {
    width:var(--s16);
    height:var(--s16)
  }
  .frame-head__title {
    font-size:calc(var(--t-m)*.9)
  }
  .frame-head {
    gap:var(--s8);
    top:6%
  }
  .frame-head .badge {
    height:var(--s24);
    font-size:calc(var(--t-s)*.8)
  }
  .os__caption {
    font-size:calc(var(--t-s)*.85);
    bottom:var(--s8)
  }
  .bust-fallback {
    left:10%;
    right:10%;
    top:35%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,::before,::after {
    animation:none!important
  }
  .js .rv {
    transform:none;
    filter:none;
    transition:opacity 200ms ease!important;
    transition-delay:0ms!important
  }
  .hero__title,.hero__meta,.hero__lead,.hero__explore {
    transition:opacity 200ms ease,visibility 0s 200ms!important;
    translate:none!important;
    scale:none!important;
    filter:none!important
  }
  .bars__plot i,.minibars i {
    transform:none!important;
    transition:none!important
  }
  .caret-text {
    display:none
  }
  .veil {
    display:none
  }
}
/* Static navigation keeps the comparison usable when scripts or graphics are unavailable. */
html:not(.js) .os {
  height:100vh
}
html:not(.js) .hero__note {
  position:absolute;
  top:70vh;
  bottom:auto
}
html:not(.js) .hero__explore {
  display:none
}
html:not(.js) .bars__plot i {
  transform:none
}
.cloud-unavailable .stage {
  opacity:.65
}
/* Inset focus remains visible inside each smoothed clipping path. */
[data-sq]:focus-visible {
  outline-offset:-4px
}
.is-hero-out .hero__note {
  pointer-events:none
}