.kinetics {
  --kin-ink: #080b13;
  --kin-type: #f6f7fa;
  --kin-muted: #b2b9ca;
  color: var(--kin-type);
  background: var(--kin-ink);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.kinetics-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(calc(100% - clamp(40px, 8vw, 160px)), 1640px);
  margin-inline: auto;
  padding-block: clamp(42px, 5.4vw, 100px) clamp(32px, 4vw, 70px);
}
.kinetics-heading {
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.kinetics-heading h2 {
  margin: 0;
  color: var(--kin-type);
  font-size: clamp(36px, 4.45vw, 84px);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.kinetics-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #727989;
  border-radius: 50%;
  color: var(--kin-type);
  background: #111721;
  transition: background .2s ease, border-color .2s ease;
}
.kinetics-toggle:hover { border-color: #d4ddf3; background: #242e42; }
.kinetics-toggle .kinetics-play-icon, .kinetics-toggle[data-paused] .kinetics-pause-icon { display: none; }
.kinetics-toggle[data-paused] .kinetics-play-icon { display: block; }
.kinetics-stage {
  grid-row: 2;
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(350px, 29vw, 550px);
}
.kinetics-art {
  position: absolute;
  inset: -3% -5vw -3% 14%;
  pointer-events: none;
}
.kinetics-poster { position: absolute; inset: 0; }
.kinetics-poster img { width: 100%; height: 100%; object-fit: contain; }
.kinetics-art canvas { display: block; width: 100%; height: 100%; }
.kinetics[data-rendered] .kinetics-poster { display: none; }
.kinetics-copy { position: relative; width: min(32%, 430px); z-index: 1; }
.kinetics-panel h3 {
  color: var(--kin-type);
  margin: 0;
  font-size: clamp(28px, 2.4vw, 45px);
  line-height: 1.06;
  font-weight: 520;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.kinetics-panel p {
  margin: 15px 0 0;
  color: var(--kin-muted);
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.52;
  max-width: 32ch;
}
.kinetics[data-ready] .kinetics-panel:not([hidden]) { animation: kin-stage-enter .38s ease-out both; }
@keyframes kin-stage-enter {
  from { opacity: .3; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.kinetics-stops {
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 40px);
  position: relative;
  z-index: 2;
}
.kinetics-stops a {
  color: #c0c6d3;
  border-top: 1px solid #444b5b;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 49px;
  padding-top: 8px;
  white-space: nowrap;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 470;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.kinetics-stops a::before {
  position: absolute;
  content: "";
  top: -1px;
  inset-inline: 0;
  height: 2px;
  background: #aaa;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}
.kinetics-stops a.is-current::before { background: #9bb8ff; transform: scaleX(1); }
.kinetics-stops a:hover, .kinetics-stops a.is-current { color: white; border-color: #9da8c1; }
.kinetics :is(button,a):focus-visible { outline: 2px solid #b9caff; outline-offset: 4px; }
.kinetics-panel:focus-visible { outline: 2px solid #b9caff; outline-offset: 6px; }
html[data-theme="obsidian"] .kinetics { --kin-ink: #080b10; }
html[data-theme="spectrum"] .kinetics { --kin-ink: #0c0a16; }
html[data-theme="spectrum"] .kinetics-stops a.is-current::before { background: #bdabff; }
@media (max-width: 760px) {
  .kinetics-inner { width: calc(100% - 40px); }
  .kinetics-stage { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .kinetics-art {
    position: relative;
    inset: auto;
    width: calc(100% + 40px);
    margin-left: -20px;
    height: clamp(190px, 54vw, 330px);
  }
  .kinetics-toggle { width: 42px; height: 42px; }
  .kinetics-copy { width: 100%; min-height: 132px; margin-block: 0 15px; }
  .kinetics-panel p { max-width: 48ch; margin-top: 9px; }
  .kinetics-stops {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    margin-inline: -20px;
    padding: 6px 20px;
    scrollbar-width: thin;
    scrollbar-color: #414c61 transparent;
    scroll-snap-type: x proximity;
  }
  .kinetics-stops a { flex: 1 0 auto; min-width: 80px; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kinetics-toggle { display: none; }
  .kinetics *, .kinetics *::before { animation: none !important; transition: none !important; }
}