@layer sections {
  .intro-section {
    --_teaser-color: color-mix(var(--cerulean-600), var(--woodsmoke-800) 30%);
  }
  [data-theme=dark] .intro-section {
    --_teaser-color: color-mix(var(--malachite-200), var(--woodsmoke-200) 70%);
  }
  .intro-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6rem;
    align-items: end;
  }
  .intro-title {
    --fw-h: 600;
    display: grid;
    place-items: center;
  }
  .intro-greeting {
    margin-block-end: 1em;
    font-size: 1.7rem;
    line-height: 1em;
    font-family: var(--font-mono, monospace), monospace;
  }
  .intro-name,
  .intro-sname {
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin-block-end: 0;
  }
  .intro-name {
    font-size: 9rem;
    font-family: var(--font-mono, monospace), monospace;
    text-transform: lowercase;
    position: relative;
    font-stretch: unset;
  }
  .intro-dot {
    display: block;
    position: absolute;
    bottom: 0;
    left: 100%;
    left: calc(100% + 0.1ch);
  }
  .intro-dot::after {
    content: ".";
    font-size: 1em;
    font-family: var(--font-sans, sans-serif), sans-serif;
    line-height: 0;
    color: var(--c-blue);
    bottom: 0;
  }
  .intro-teaser {
    margin-block-end: 0.5rem;
    font-size: var(--step-1);
  }
  .intro-avatar {
    display: block;
    margin-block-end: 3.71rem;
  }
  .intro-avatar__inner {
    width: 50%;
    font-size: 1.15rem;
    aspect-ratio: 1;
    border-radius: 100vmax;
    overflow: hidden;
    background-color: var(--woodsmoke-200);
    background-color: color-mix(var(--cerulean-400), var(--woodsmoke-100) 30%, transparent 40%);
    box-shadow: inset -0.4em 0.4em 0.1em -0.1em rgba(0, 0, 0, 0.1333333333), 0.06em -0.06em 0 0.146em rgb(from color-mix(var(--woodsmoke-100), white 15%) r g b/0.6), 0 0 0 0.382em rgb(from var(--cerulean-500) r g b/0.7), 0 0 0 0.618em color-mix(var(--woodsmoke-100), var(--malachite-500) 15%), -2em 2em 7em -2.5em var(--cerulean-600), 3em -2.5em 13em -2em var(--malachite-600);
  }
  .intro-avatar__inner svg {
    --scale: 106%;
    display: block;
    width: var(--scale);
    height: var(--scale);
    margin: 4% -4%;
    transform: translateX(-1%);
    filter: drop-shadow(-0.25rem 0.25rem 0.75rem rgba(0, 0, 0, 0.4)) drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.2666666667)) saturate(0.9) contrast(1.2) brightness(1);
  }
  [data-theme=dark] .intro-avatar__inner {
    background-color: var(--woodsmoke-950);
    background-color: color-mix(var(--cerulean-800), var(--woodsmoke-950) 30%, transparent 60%);
    box-shadow: inset -0.5em 0.5em 2em 0 black, 0.06em -0.06em 0 0.146em rgb(from color-mix(var(--woodsmoke-950), black 15%) r g b/0.5), 0 0 0 0.382em rgb(from var(--cerulean-400) r g b/0.7), 0 0 0 0.618em color-mix(var(--woodsmoke-950), black 15%), -2em 2em 6em -3.5em var(--cerulean-500), 3em -2.5em 10em -4em var(--malachite-400);
  }
  [data-theme=dark] .intro-avatar__inner svg {
    filter: drop-shadow(-0.25rem 0.25rem 0.75rem black) drop-shadow(0 0 0.25rem black) saturate(1.1) contrast(1.4) grayscale(0.3) brightness(0.92);
  }
}body{background:var(--body-bg-wide)}.address-grid{grid-template-columns:1fr 2fr}.showcase{}.showcase__panel--left{grid-column: 1/2;grid-row: 1/3}.showcase__panel--right{grid-column:auto;grid-row:auto}.showcase p:last-child{margin-bottom:0}