:root {
  --bg: #fff;
  --light-card: #fff;
  --bg-alt: #f3f4f6;
  --light-card-alt: #f9fafb;
  --light-border: #e5e7eb;
  --color-text: #0f1729;
}
main {
  --size-text: clamp(.9rem, 1vw, 3rem);
  --size-big-text: calc(var(--size-text) * 20 / 16);
  --size-h4: calc(var(--size-text) * 24 / 16);
  --size-h3: calc(var(--size-text) * 28 / 16);
  --size-h2: calc(var(--size-text) * 36 / 16);
  --size-h1: calc(var(--size-text) * 40 / 16);
  --size-h0: calc(var(--size-text) * 48 / 16);
  --size-big-heading: clamp(3rem, 8vw, 4.5rem);
  --size-massive: clamp(4rem, 12vw, 6.5rem);
  --size-small: calc(var(--size-text) * 14 / 16);
  --size-smaller: calc(.7 * var(--size-text));
  --size-tiny: .55em;
  font-size: var(--size-text);
}
@media (max-width: 1024px) {
  main {
    --size-text: calc(15rem / 16);
    --sizing-ratio: 1.2;
  }
}
.talks-page {
  font-size: calc(13em / 12);
}
.section-header {
  margin-block: var(--gap-large);
}
.x-container,
.basic-card.-ribbon {
}
.woosh-cta {
  background: var(--color-accent);
  color: var(--color-text);
}
.woosh-cta.-big,
.woosh-cta.-massive {
  border-radius: var(--radius);
}
.talks-header {
  background:
    radial-gradient(
      circle,
      lch(from var(--color-faded-fg) l c h / .15) 1px,
      transparent 1px) 0px 0px / 24px 24px,
    radial-gradient(
      ellipse at 50% 0%,
      hsl(222 47% 16%) 0%,
      hsl(222 47% 11%) 70%),
    #0f1729;
  position: relative;
  overflow: hidden;
  overflow: clip;
  min-height: 100vh;
}
.talks-header > * {
  position: relative;
  z-index: 1;
}
.talks-header::before,
.talks-header::after {
  content: "";
  position: absolute;
  border: 1px solid lch(from var(--color-et-accent) l c h / .3);
  border-radius: 50%;
  pointer-events: none;
}
.talks-header::before {
  width: 800px;
  height: 800px;
  top: -400px;
  right: -200px;
  opacity: 40%;
}
.talks-header::after {
  width: 600px;
  height: 600px;
  bottom: -300px;
  left: -200px;
  opacity: 40%;
}
.talks-header .orbs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.talks-header .orbs::before,
.talks-header .orbs::after {
  content: "";
  position: absolute;
  filter: blur(64px);
}
.talks-header .orbs::before {
  top: 25%;
  left: 25%;
  width: 24rem;
  height: 24rem;
  background: #00e6991a;
}
.talks-header .orbs::after {
  bottom: 25%;
  right: 25%;
  width: 20rem;
  height: 20rem;
  background: #ff884c1a;
}
.basic-card {
  background: var(--bg);
}
.basic-card.-alt {
  background: var(--bg-alt);
}
.et-card {
  padding: var(--gap);
  border-radius: var(--radius);
  background: var(--light-card);
  border: 1px solid var(--light-border);
  transition: border-color .1s ease, box-shadow .1s ease;
}
.et-card.-alt {
  background: var(--light-card-alt);
}
.et-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow) var(--color-shadow);
  scale: 1;
  filter: none;
}
.et-icon-box {
  font-size: var(--size-h4);
  padding: .6em;
  color: var(--color-accent-text);
  background: var(--color-accent-bg);
  border-radius: var(--radius-small);
  aspect-ratio: 1;
  box-sizing: content-box;
  height: var(--size-h4);
  display: grid;
}
.et-icon-orb {
  padding: .5em;
  color: var(--color-fg);
  background: var(--light-border);
  border-radius: 9999em;
  aspect-ratio: 1;
  box-sizing: content-box;
  height: var(--size-text);
  display: grid;
  transition: all .2s ease;
}
.et-icon-orb:hover {
  color: var(--color-accent-text);
  background: var(--color-accent-bg);
}
.woosh-cta.-et {
  color: var(--color-et-accent);
  outline-color: var(--color-et-accent);
}
