:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cs {
  min-block-size: 100dvh;
display: grid;
place-items: center;
align-content: center;
gap: var(--space-l);
padding: var(--section-space-m) var(--gutter);
position: relative;
overflow: hidden;
isolation: isolate;
text-align: center;
background-color: var(--primary-ultra-light);
background-image: radial-gradient(circle at 50% 0%, var(--white) 0%, transparent 65%);
}
.cs--dark {
  &.cs {
  background-color: var(--primary);
  background-image: radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--secondary) 35%, transparent) 0%, transparent 60%);
}
& .cs__glow--a {
  background: var(--secondary);
}
& .cs__glow--b {
  background: var(--primary-light);
}
& .cs__card {
  background: color-mix(in oklch, var(--white) 6%, transparent);
  border-color: color-mix(in oklch, var(--white) 14%, transparent);
  box-shadow: 0 2.5rem 5rem -2rem rgb(0 0 0 / 0.5);
}
& .cs__title {
  color: var(--white);
}
& .cs__lead,
& .cs__contact {
  color: color-mix(in oklch, var(--white) 82%, transparent);
}
& .cs__eyebrow {
  color: var(--secondary-light);
}
& .cs__link {
  color: var(--white);
}
& .cs__footer {
  color: color-mix(in oklch, var(--white) 55%, transparent);
}
& .cs__progress {
  background: color-mix(in oklch, var(--white) 14%, transparent);
}
}
.cs__glow {
  position: absolute;
inline-size: 55vmax;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(90px);
opacity: 0.35;
z-index: -1;
pointer-events: none;
--empty-element-size: 0px;
animation: cs-float 18s ease-in-out infinite alternate;
@media (prefers-reduced-motion: reduce) {
  animation: none;
}
}
.cs__glow--a {
  background: var(--primary);
inset-block-start: -25vmax;
inset-inline-start: -15vmax;
}
.cs__glow--b {
  background: var(--secondary);
inset-block-end: -25vmax;
inset-inline-end: -15vmax;
animation-delay: -9s;
}
.cs__card {
  inline-size: 100%;
max-inline-size: 42rem;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-m);
padding: var(--space-xl) var(--space-l);
background: color-mix(in oklch, var(--white) 88%, transparent);
backdrop-filter: blur(12px);
border: 1px solid color-mix(in oklch, var(--primary) 12%, transparent);
border-radius: calc(var(--radius) * 5);
box-shadow: 0 2.5rem 5rem -2rem color-mix(in oklch, var(--primary) 35%, transparent);
container-type: inline-size;
}
.cs__portrait {
  display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 1;
object-fit: cover;
}
.cs__eyebrow {
  display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0;
font-size: var(--text-s);
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: color-mix(in oklch, var(--secondary) 75%, var(--black));
&::before,
&::after {
  content: "";
  inline-size: 2rem;
  block-size: 2px;
  background: currentColor;
  opacity: 0.5;
}
}
.cs__title {
  margin: 0;
font-size: var(--h1);
line-height: 1.1;
color: var(--primary);
text-wrap: balance;
}
.cs__lead {
  margin: 0;
max-inline-size: 100%;
font-size: var(--text-l);
line-height: 1.55;
color: var(--text-color);
text-wrap: pretty;
}
.cs__progress {
  inline-size: min(100%, 14rem);
block-size: 0.375rem;
border-radius: 999px;
overflow: hidden;
margin-block: var(--space-xs);
background: color-mix(in oklch, var(--primary) 12%, transparent);
--empty-element-size: 0px;
}
.cs__bar {
  display: block;
inline-size: 45%;
block-size: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--primary), var(--secondary));
animation: cs-bar 2.6s ease-in-out infinite;
--empty-element-size: 0px;
@media (prefers-reduced-motion: reduce) {
  animation: none;
  translate: 60% 0;
}
}
.cs__contact {
  margin: 0;
font-size: var(--text-m);
color: var(--text-color);
}
.cs__link {
  color: var(--primary);
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--secondary);
text-decoration-thickness: 2px;
text-underline-offset: 0.25em;
transition: color 0.2s ease;
&:hover,
&:focus-visible {
  color: var(--secondary);
}
}
.cs__footer {
  margin: 0;
font-size: var(--text-s);
color: color-mix(in oklch, var(--primary) 60%, transparent);
}
.cs__lead-line {
  display: block;
white-space: nowrap;
font-size: min(1em, 4.15cqi);
@container (inline-size < 22rem) {
  white-space: normal;
  font-size: 1em;
}
}
.cs__avatar {
  inline-size: 9rem;
aspect-ratio: 1;
border-radius: 50%;
box-shadow: 0 0 0 0.375rem color-mix(in oklch, var(--secondary) 55%, transparent), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
margin-block-end: var(--space-xs);
overflow: hidden;
}