@layer wa-app {
  /* #region Shell */
  .layout-create-teaser #content {
    padding: 0;
  }

  /* The island has no navigation, but wa-page still draws the empty menu column and its 1px edge. site.css hides it
   * on the site layouts; the island doesn't load that sheet. */
  .layout-create-teaser wa-page::part(menu) {
    display: none;
  }

  /* Display rules (the island's own and WA's layout utilities) outrank the UA's [hidden]; this puts it back on top. */
  .layout-create-teaser [hidden] {
    display: none !important;
  }

  .create-teaser {
    /* The editor's three curves and hairline (create.css, plan/CREATE-MOTION-PLAN.md §2), restated: the teaser runs
     * outside the Create gate and can't load that sheet. Keep the values in step. */
    --create-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --create-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --create-ease-move: cubic-bezier(0.2, 0, 0, 1);
    --create-hairline: color-mix(in oklab, currentColor, transparent 85%);
    /* A half step below the surface: the lowered token reads heavy on the white pane. */
    --teaser-lowered: color-mix(in oklab, var(--wa-color-surface-lowered), var(--wa-color-surface-default) 55%);
    --teaser-lowered-border: color-mix(in oklab, var(--wa-color-surface-border), transparent 35%);
    --teaser-pane: var(--wa-color-surface-default);
    --teaser-stage: color-mix(in oklab, var(--wa-color-surface-lowered), var(--wa-color-neutral-90));
    --teaser-divider: color-mix(in oklab, var(--wa-color-text-normal), transparent 90%);
    --teaser-divider-shadow: color-mix(in oklab, var(--wa-color-shadow), transparent 50%);
    --teaser-column: 37rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--teaser-column);
    grid-template-rows: minmax(100svh, auto);
  }

  /* The editor's brand face, restated for the same reason. */
  .create-teaser .font-brand {
    font-family: cera-round-pro;
  }

  html.wa-dark .create-teaser {
    --teaser-lowered: color-mix(in oklab, var(--wa-color-surface-raised), var(--wa-color-surface-default) 50%);
    --teaser-pane: var(--wa-color-surface-raised);
    /* A step deeper than the card's dark stage, so the raised pane beside it reads as its own surface. */
    --teaser-stage: color-mix(in oklab, var(--wa-color-neutral-05), var(--wa-color-neutral-10));
    --teaser-divider: color-mix(in oklab, var(--wa-color-text-normal), transparent 82%);
  }

  /* Seated (the confirmation): on the split the pane leads and the celebration stage follows, the split's mirror. */
  @media (width > 64rem) {
    .create-teaser.is-seated {
      grid-template-columns: var(--teaser-column) minmax(0, 1fr);
    }

    .create-teaser.is-seated .create-teaser-stage {
      order: 2;
    }

    .create-teaser-mark.is-top {
      display: none;
    }
  }

  /* The flash floats over the split instead of pushing it past the fold. The callout's own margin stays its inset. */
  .layout-create-teaser #flashes {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 2;
    pointer-events: none;
  }

  .layout-create-teaser #flashes > * {
    pointer-events: auto;
  }
  /* #endregion */

  /* #region Stage */
  .create-teaser-stage {
    position: relative;
    min-block-size: 0;
    margin: 0;
  }

  /* The Code Image's icon wallpaper at 30px icons (43px artwork), half again its export density so it reads as
   * texture. */
  .create-teaser-stage.is-wallpaper {
    --teaser-gem-size: calc(var(--wa-space-4xl) * 2);
    display: grid;
    place-items: center;
    background: var(--wa-brand-orange) url('/assets/brand/wa-icon-pattern.svg') center / 556px 209px;
  }

  .create-teaser-wallpaper-gem {
    inline-size: var(--teaser-gem-size);
  }

  /* An edge for a white creation against the white pane, and for the orange wallpaper against the dark pane. No
   * vignette: a gray wash on white reads as dirty. */
  .create-teaser-stage.is-wallpaper::after,
  .create-teaser-stage-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 var(--wa-border-width-s) color-mix(in oklab, var(--wa-color-text-normal), transparent 86%);
  }

  .create-teaser-stage-frame {
    position: absolute;
    inset: 0;
    background-color: var(--teaser-stage);
  }

  .create-teaser-stage-loading {
    position: absolute;
    inset: 0;
    margin: auto;
    font-size: var(--wa-font-size-2xl);
  }

  /* Explicit sizes, not inset + auto: a replaced element with auto width keeps its intrinsic size. WA rounds every
   * native img corner, so the radius is cleared to let the capture bleed like the iframe. */
  .create-teaser-stage-media {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--wa-transition-slow) var(--create-ease-out);
  }

  iframe.create-teaser-stage-media {
    background-color: var(--wa-color-surface-default);
  }

  .create-teaser-stage-media.is-loaded {
    opacity: 1;
  }

  /* Gone once the fade has covered it, which also takes it out of the accessibility tree. The cards do the same. */
  .create-teaser-stage-frame:has(> .create-teaser-stage-media.is-loaded) > .create-teaser-stage-loading {
    visibility: hidden;
    transition: visibility 0s var(--wa-transition-slow);
  }
  /* #endregion */

  /* #region Cycle */
  /* One round on load: the gem leaves, each face arrives on the Save pop (its curve written out at the site, as the
   * motion plan asks of pops) with its one gesture, holds, and leaves on the in curve, then the gem pops back. Faces
   * never overlap. The round stays under WCAG 2.2.2's five seconds: 4.45s with four faces, 4.7s with the seat's five. */
  .create-teaser-stage.is-wallpaper {
    --teaser-cycle-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --teaser-cycle-delay: 1.2s;
    --teaser-cycle-hold: 550ms;
    --teaser-cycle-step: calc(var(--wa-transition-slow) + var(--teaser-cycle-hold) + var(--wa-transition-normal));
    --faces: 4;
  }

  .create-teaser.is-seated .create-teaser-stage.is-wallpaper {
    --teaser-cycle-hold: 400ms;
    --faces: 5;
  }

  .create-teaser-wallpaper-gem,
  .create-teaser-face {
    --face-start: calc(
      var(--teaser-cycle-delay) + var(--wa-transition-normal) + var(--face) * var(--teaser-cycle-step)
    );
    grid-area: 1 / 1;
    block-size: auto;
    fill: white;
  }

  /* The gem comes back as the face after the last. */
  .create-teaser-wallpaper-gem {
    --face: var(--faces);
    animation:
      create-teaser-cycle-leave var(--wa-transition-normal) var(--create-ease-in) var(--teaser-cycle-delay) forwards,
      create-teaser-cycle-arrive var(--wa-transition-slow) var(--teaser-cycle-pop) var(--face-start) forwards;
  }

  .create-teaser-face {
    inline-size: calc(var(--teaser-gem-size) * var(--face-scale, 1));
    overflow: visible;
    opacity: 0;
    animation:
      create-teaser-cycle-arrive var(--wa-transition-slow) var(--teaser-cycle-pop) var(--face-start) both,
      create-teaser-cycle-leave var(--wa-transition-normal) var(--create-ease-in)
        calc(var(--face-start) + var(--wa-transition-slow) + var(--teaser-cycle-hold)) forwards,
      var(--face-gesture, create-teaser-gesture) var(--wa-transition-slow)
        var(--face-gesture-ease, var(--teaser-cycle-pop)) var(--face-start) backwards;
  }

  .create-teaser-face [data-teaser-face-part] {
    transform-box: fill-box;
    transform-origin: center;
    animation: var(--part-gesture, create-teaser-gesture) var(--part-duration, var(--wa-transition-slow))
      var(--part-ease, var(--teaser-cycle-pop)) calc(var(--face-start) + var(--part-lag, 0s)) backwards;
  }

  /* Each face's size, balanced on measured ink against the gem's, and its one gesture during the arrival. Part offsets
   * in px are the glyph's own units (512 to its height), not screen pixels. Parts that lag do so by fast, so the face
   * lands first. */
  [data-teaser-face='code'] {
    --face-scale: 1.1;
  }

  [data-teaser-face='code'] [data-teaser-face-part='left'] {
    --gesture-translate: -70px 0;
  }

  [data-teaser-face='code'] [data-teaser-face-part='right'] {
    --gesture-translate: 70px 0;
  }

  [data-teaser-face='compass'] {
    --face-scale: 0.86;
    --gesture-rotate: -50deg;
  }

  [data-teaser-face='pen-nib'] {
    --face-scale: 0.98;
    --gesture-translate: 10% -10%;
    --face-gesture-ease: var(--create-ease-out);
  }

  [data-teaser-face='globe'] {
    --face-scale: 0.92;
    --face-gesture: create-teaser-turn;
  }

  [data-teaser-face='envelope-circle-check'] {
    --gesture-translate: 0 -12%;
    --face-gesture-ease: var(--create-ease-out);
  }

  [data-teaser-face='envelope-circle-check'] [data-teaser-face-part='badge'] {
    --part-gesture: create-teaser-burst;
    --part-lag: var(--wa-transition-fast);
  }

  [data-teaser-face='ticket'] {
    --face-scale: 0.95;
    --gesture-translate: -14% 0;
    --face-gesture-ease: var(--create-ease-out);
  }

  [data-teaser-face='bell-on'] {
    --face-scale: 1.04;
  }

  /* The ring runs on through the hold, swinging from the bell's crown. */
  [data-teaser-face='bell-on'] [data-teaser-face-part='bell'] {
    --part-gesture: create-teaser-ring;
    --part-duration: calc(var(--wa-transition-slow) + var(--teaser-cycle-hold));
    --part-ease: var(--create-ease-move);
    transform-origin: top;
  }

  [data-teaser-face='bell-on'] [data-teaser-face-part='rays'] {
    --part-gesture: create-teaser-burst;
    --part-lag: var(--wa-transition-fast);
  }

  [data-teaser-face='at'] {
    --face-scale: 0.94;
    --gesture-rotate: -90deg;
  }

  /* Horn and confetti both turn about the horn's mouthpiece, the bottom-left corner. */
  [data-teaser-face='party-horn'] {
    --face-scale: 1.06;
  }

  [data-teaser-face='party-horn'] [data-teaser-face-part='horn'] {
    --gesture-rotate: 18deg;
    transform-origin: left bottom;
  }

  [data-teaser-face='party-horn'] [data-teaser-face-part='confetti'] {
    --part-gesture: create-teaser-burst;
    --part-lag: var(--wa-transition-fast);
    transform-origin: left bottom;
  }

  @keyframes create-teaser-cycle-arrive {
    from {
      opacity: 0;
      scale: 0.9;
    }

    60% {
      opacity: 1;
      scale: 1.06;
    }

    to {
      opacity: 1;
      scale: 1;
    }
  }

  @keyframes create-teaser-cycle-leave {
    to {
      opacity: 0;
    }
  }

  /* Translate and rotate only: it runs beside the arrival, which owns opacity and scale. */
  @keyframes create-teaser-gesture {
    from {
      translate: var(--gesture-translate, 0);
      rotate: var(--gesture-rotate, 0deg);
    }
  }

  @keyframes create-teaser-turn {
    from {
      transform: perspective(400px) rotateY(-55deg);
    }

    to {
      transform: perspective(400px) rotateY(0);
    }
  }

  @keyframes create-teaser-ring {
    from {
      rotate: -16deg;
    }

    30% {
      rotate: 12deg;
    }

    55% {
      rotate: -7deg;
    }

    78% {
      rotate: 3deg;
    }

    to {
      rotate: 0deg;
    }
  }

  @keyframes create-teaser-burst {
    from {
      opacity: 0;
      scale: 0.4;
    }
  }
  /* #endregion */

  /* #region Divider */
  .create-teaser-pane {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: var(--wa-space-xl);
    min-block-size: 0;
    padding: var(--wa-space-2xl) var(--wa-space-5xl) var(--wa-space-3xl);
    background-color: var(--teaser-pane);
    border-inline-start: var(--wa-border-width-s) solid var(--teaser-divider);
    box-shadow: calc(-1 * var(--wa-shadow-offset-y-m)) 0 var(--wa-shadow-blur-m) var(--wa-shadow-spread-m)
      var(--teaser-divider-shadow);
  }

  @media (width > 64rem) {
    .create-teaser.is-seated .create-teaser-pane {
      border-inline-start: 0;
      border-inline-end: var(--wa-border-width-s) solid var(--teaser-divider);
      box-shadow: var(--wa-shadow-offset-y-m) 0 var(--wa-shadow-blur-m) var(--wa-shadow-spread-m)
        var(--teaser-divider-shadow);
    }
  }
  /* #endregion */

  /* #region Credit */
  .create-teaser-credit {
    position: absolute;
    inset-block-end: var(--wa-space-xl);
    inset-inline-start: var(--wa-space-xl);
    max-inline-size: min(30rem, 100% - 2 * var(--wa-space-xl));
    padding: var(--wa-space-m) var(--wa-space-2xl) var(--wa-space-m) var(--wa-space-m);
    background-color: var(--teaser-pane);
    /* Opaque, so the edge stays crisp over a gradient creation. */
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    box-shadow: var(--wa-shadow-s);
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-s);
  }

  /* Nudged onto the title's first line. */
  /* The tag joins the class: app.css sizes every wa-avatar with a (0,1,1) selector that outranks a lone class. */
  wa-avatar.create-teaser-credit-avatar {
    --size: 2.5rem;

    flex: none;
    margin-block-start: 2px;
  }

  .create-teaser-credit-text {
    display: grid;
    min-inline-size: 0;
  }

  .create-teaser-credit-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-semibold);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .create-teaser-credit-by {
    margin-block-start: var(--wa-space-xs);
    padding-block-start: var(--wa-space-xs);
    border-block-start: var(--wa-border-width-s) dotted var(--create-hairline);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
  }

  .create-teaser-credit-who {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-semibold);
    overflow-wrap: anywhere;
  }
  /* #endregion */

  /* #region Pane */
  .create-teaser-stack {
    display: grid;
    align-content: center;
    gap: var(--wa-space-3xl);
  }

  /* The Create lockup (create/brand-lockup.njk), static: gem and wordmark on the lockup's 56-unit canvas. The editor's
   * animated version is styled in the gated create.css. */
  .create-teaser .create-lockup {
    --lockup-size: 2.5rem;

    display: inline-flex;
    align-items: center;
  }

  .create-teaser .create-lockup-gem,
  .create-teaser .create-lockup-wordmark {
    display: block;
    inline-size: auto;
    max-inline-size: none;
  }

  .create-teaser .create-lockup-gem {
    block-size: calc(var(--lockup-size) * (32 / 56));
    fill: var(--wa-brand-orange);
  }

  .create-teaser .create-lockup-wordmark {
    block-size: var(--lockup-size);
    color: var(--wa-color-text-normal);
  }

  .create-teaser-launch {
    padding: var(--wa-space-3xs) var(--wa-space-s);
    background-color: var(--teaser-lowered);
    border: var(--wa-border-width-s) solid var(--teaser-lowered-border);
    border-radius: var(--wa-border-radius-pill);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-semibold);
    white-space: nowrap;
  }

  .create-teaser-launch-dot {
    position: relative;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background-color: var(--wa-color-brand-fill-loud);
  }

  .create-teaser-launch-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: create-teaser-pulse 2.4s var(--create-ease-out) infinite;
  }

  @keyframes create-teaser-pulse {
    from {
      scale: 1;
      opacity: 0.6;
    }

    to {
      scale: 3;
      opacity: 0;
    }
  }

  /* Sized to survive a 40-character handle. */
  .create-teaser-maker {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.005em;
  }

  .create-teaser-maker strong {
    color: var(--wa-color-text-normal);
    overflow-wrap: anywhere;
  }

  /* The gem's orange measures 3.0:1 on white, the large-text floor exactly. On a tinted pane, use brand-fill-loud. */
  .create-teaser-display {
    color: var(--wa-brand-orange);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .create-teaser-lead,
  .create-teaser-seat-copy {
    max-inline-size: 38ch;
    margin: var(--wa-space-l) 0 0;
    color: var(--wa-color-text-quiet);
    /* 18px, half a step up WA's scale (each step is 1.125 squared): body text, read as a lede. */
    font-size: calc(var(--wa-font-size-m) * 1.125);
    line-height: 1.65;
  }

  .create-teaser-lead a {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-semibold);
    text-decoration: underline;
    text-decoration-color: var(--create-hairline);
    text-underline-offset: 0.18em;
    white-space: nowrap;
    transition: color var(--wa-transition-fast) ease;
  }

  /* #endregion */

  /* #region Form */
  .create-teaser.is-seated .create-teaser-form {
    display: none;
  }

  .create-teaser-form wa-input::part(hint) {
    margin-block-start: var(--wa-space-xs);
    overflow-wrap: anywhere;
  }

  .create-teaser-form wa-input > [slot='start'] {
    color: var(--wa-form-control-placeholder-color);
  }

  /* The handle's marks: a check while the field is valid and not empty, a cross once a malformed one loses focus
   * (wa-input's user-invalid). teaser.js sets the format verdict through setCustomValidity, so the marks need no script.
   * Stacked in one slot that always holds its width, so the field never shifts; hidden by visibility, not opacity
   * alone, so a screen reader never hears a mark that isn't showing. */
  .create-teaser-handle-mark {
    display: grid;
  }

  .create-teaser-handle-mark > wa-icon {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity var(--wa-transition-fast) var(--create-ease-out),
      visibility var(--wa-transition-fast);
  }

  .create-teaser-handle-check {
    color: var(--wa-brand-orange);
  }

  .create-teaser-handle-cross {
    color: var(--wa-color-danger-on-quiet);
  }

  .create-teaser-handle:state(valid):not(:state(blank)) .create-teaser-handle-check,
  .create-teaser-handle:state(user-invalid) .create-teaser-handle-cross {
    visibility: visible;
    opacity: 1;
  }

  .create-teaser-tip {
    --max-width: 22rem;
  }

  /* Text that happens to be a button: WA's native button styles give it a control's height. */
  .create-teaser-text-button {
    display: inline;
    /* A button's default is middle, which drops it a few pixels below the links it sits among. */
    vertical-align: baseline;
    block-size: auto;
    min-block-size: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  /* #endregion */

  /* #region Chin */
  /* Chin: a lowered frame grows around the button once both fields pass. Negative margins of the padding plus the
   * border keep the button's edges exactly on the fields' edges. Padding and margin animate on purpose: a transform
   * would scale the button with the frame. The closed state's timings are the close: a leave, one step faster, on the
   * in curve. */
  .create-teaser-chin {
    --chin-pad: var(--wa-space-2xs);
    --chin-radius: calc(var(--wa-form-control-border-radius) + var(--chin-pad));

    display: grid;
    margin: calc(var(--wa-space-xs) - var(--wa-border-width-s)) calc(-1 * var(--wa-border-width-s)) 0;
    padding: 0;
    background-color: transparent;
    border: var(--wa-border-width-s) solid transparent;
    border-radius: var(--chin-radius);
    transition-property: padding, margin, background-color, border-color;
    transition-duration: var(--wa-transition-fast);
    transition-timing-function: var(--create-ease-in);
  }

  .create-teaser-chin.is-open {
    margin: calc(var(--wa-space-xs) - var(--chin-pad) - var(--wa-border-width-s))
      calc(-1 * (var(--chin-pad) + var(--wa-border-width-s))) 0;
    padding: var(--chin-pad) var(--chin-pad) 0;
    background-color: var(--teaser-lowered);
    border-color: var(--teaser-lowered-border);
    transition-duration: var(--wa-transition-normal);
    transition-timing-function: var(--create-ease-move);
  }

  .create-teaser-cta {
    position: relative;
    z-index: 1;
    inline-size: 100%;
  }

  .create-teaser-cta::part(base) {
    font-family: var(--wa-font-family-heading);
    /* Past WA's bold (600), the weight the button was proofed at: the system font has a 600 face, Cera does not. */
    font-weight: 700;
  }

  .create-teaser-cta-gem {
    inline-size: auto;
    block-size: 1em;
    fill: currentColor;
  }

  /* A layout property on purpose: the rows below must make room as the chin slides out from under the button. */
  .create-teaser-chin-tray {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--wa-transition-fast) var(--create-ease-in);
  }

  .create-teaser-chin.is-open .create-teaser-chin-tray {
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--wa-transition-normal) var(--create-ease-move);
  }

  /* wa-split wraps: when a long line takes the row, the note drops to the next one and lands at the start. */
  .create-teaser-chin-row {
    gap: var(--wa-space-3xs) var(--wa-space-m);
    min-block-size: 0;
    overflow: hidden;
    padding-inline: var(--wa-space-s);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    translate: 0 -100%;
    transition-property: padding-block, translate;
    transition-duration: var(--wa-transition-fast);
    transition-timing-function: var(--create-ease-in);
  }

  .create-teaser-chin.is-open .create-teaser-chin-row {
    padding-block: var(--wa-space-xs);
    translate: 0 0;
    transition-duration: var(--wa-transition-normal);
    transition-timing-function: var(--create-ease-move);
  }

  /* The split centers the stack, so a growing chin would lift the whole column. The tray's single-line height (its
   * block padding plus one line of xs text) is held under the stack while the chin is closed and handed back as the
   * tray opens, on the chin's own timings. A tray that wraps still drifts by its extra line. */
  @media (width > 64rem) {
    .create-teaser-stack {
      --create-teaser-tray-height: calc(2 * var(--wa-space-xs) + var(--wa-font-size-xs) * var(--wa-line-height-normal));

      padding-block-end: var(--create-teaser-tray-height);
      transition: padding-block-end var(--wa-transition-fast) var(--create-ease-in);
    }

    .create-teaser-stack:has(.create-teaser-chin.is-open) {
      padding-block-end: 0;
      transition: padding-block-end var(--wa-transition-normal) var(--create-ease-move);
    }
  }

  .create-teaser-chin-line {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .create-teaser-chin-line strong {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-semibold);
  }

  .create-teaser-chin-note {
    text-decoration: underline dotted;
    text-decoration-color: var(--create-hairline);
    text-underline-offset: 0.2em;
    cursor: help;
  }
  /* #endregion */

  /* #region Seat */
  /* Rendered in the lead's place; its paragraphs carry the lead's type and the first keeps the lead's margin. */
  .create-teaser-seat {
    animation: create-teaser-rise var(--wa-transition-normal) var(--create-ease-out) both;
  }

  .create-teaser-seat-copy + .create-teaser-seat-copy {
    margin-block-start: var(--wa-space-m);
  }

  @keyframes create-teaser-rise {
    from {
      opacity: 0;
      translate: 0 var(--wa-space-2xs);
    }
  }

  @keyframes create-teaser-fade {
    from {
      opacity: 0;
    }
  }

  /* #endregion */

  /* #region Bouncer */
  .create-teaser-bouncer {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
  }

  /* The kit draws code as a chip; here the tag is just a mono word in the sentence. */
  .create-teaser-bouncer code {
    margin-inline: 0.15em 0.05em;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-family: var(--wa-font-family-code);
    font-size: 0.95em;
  }

  .create-teaser-bouncer a {
    color: var(--wa-color-text-quiet);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--wa-transition-fast) ease;
  }

  .create-teaser-lead a:hover,
  .create-teaser-bouncer a:hover {
    color: var(--wa-color-brand-on-quiet);
  }

  .create-teaser-access a {
    width: fit-content;
    margin-block-start: var(--wa-space-2xs);
  }
  /* #endregion */

  /* #region Legal */
  .create-teaser-legal {
    gap: var(--wa-space-2xs) var(--wa-space-m);
    padding-block-start: var(--wa-space-m);
    border-block-start: var(--wa-border-width-s) dotted var(--create-hairline);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
  }

  .create-teaser-legal a,
  .create-teaser-legal button {
    color: inherit;
    text-decoration: none;
    transition: color var(--wa-transition-fast) ease;
  }

  .create-teaser-legal a:hover,
  .create-teaser-legal button:hover {
    color: var(--wa-color-text-normal);
  }
  /* #endregion */

  /* #region Responsive */
  @media (width <= 64rem) {
    .create-teaser {
      /* The gutter grows with the viewport between a phone's 24px and a tablet's 48px. */
      --teaser-gutter: clamp(var(--wa-space-l), 8vw, var(--wa-space-3xl));
      /* The column's left edge once the column is narrower than the page, the gutter below that. */
      --teaser-edge: max(var(--teaser-gutter), calc((100% - var(--teaser-column)) / 2));

      grid-template-columns: minmax(0, 1fr);
      /* The pane takes the slack on tall viewports; an auto stage row would grow past its frame. */
      grid-template-rows: auto auto 1fr;
      min-block-size: 100svh;
    }

    .create-teaser-stage.is-wallpaper {
      --teaser-gem-size: calc(var(--wa-space-4xl) * 1.5);
      min-block-size: clamp(16rem, 30vw, 24rem);
    }

    .create-teaser-mark.is-top {
      padding: var(--wa-space-m) var(--teaser-edge);
      background-color: var(--teaser-pane);
      border-block-end: var(--wa-border-width-s) solid var(--teaser-divider);
    }

    .create-teaser-pane .create-teaser-mark {
      display: none;
    }

    /* A block, not a grid: Firefox sizes a grid row from the frame's ratio before its cap, leaving a gap below it. */
    .create-teaser-stage {
      display: block;
    }

    /* The creation can't report its height across origins, so the frame takes its capture's proportions. */
    .create-teaser-stage-frame {
      position: relative;
      /* A definite width, so the ratio sets the height and the clamps don't shrink the width instead. */
      inline-size: 100%;
      aspect-ratio: var(--teaser-stage-ratio, 1200 / 630);
      /* Room for the creation above the credit it carries. */
      min-block-size: 20rem;
      max-block-size: 56svh;
    }

    .create-teaser-credit {
      inset-block-end: var(--wa-space-l);
      inset-inline-start: var(--teaser-edge);
      max-inline-size: min(30rem, 100% - 2 * var(--teaser-gutter));
    }

    .create-teaser-stack,
    .create-teaser-legal {
      inline-size: 100%;
      max-inline-size: var(--teaser-column);
      margin-inline: auto;
    }

    /* Stacked, the copy follows the stage; a tall window's slack sits above the footer, not around the column. */
    .create-teaser-stack {
      align-content: start;
    }

    .create-teaser-pane {
      padding: var(--wa-space-3xl) var(--teaser-gutter) var(--wa-space-l);
      border-inline-start: 0;
      border-block-start: var(--wa-border-width-s) solid var(--teaser-divider);
      box-shadow: 0 calc(-1 * var(--wa-shadow-offset-y-m)) var(--wa-shadow-blur-m) var(--wa-shadow-spread-m)
        var(--teaser-divider-shadow);
    }
  }

  /* Short laptops: the column tightens one step so the legal footer stays in view at 700px. */
  @media (width > 64rem) and (height <= 48rem) {
    .create-teaser-pane {
      padding-block: var(--wa-space-xl) var(--wa-space-l);
      row-gap: var(--wa-space-l);
    }

    .create-teaser-stack {
      gap: var(--wa-space-xl);
    }

    .create-teaser-lead {
      margin-block-start: var(--wa-space-m);
    }

    .create-teaser-signup,
    .create-teaser-form {
      gap: var(--wa-space-m);
    }
  }

  /* Shorter still (a 1280x620 window): one more step, so the footer clears the fold. */
  @media (width > 64rem) and (height <= 40rem) {
    .create-teaser-pane {
      padding-block: var(--wa-space-l) var(--wa-space-m);
      row-gap: var(--wa-space-m);
    }

    .create-teaser-stack {
      gap: var(--wa-space-l);
    }

    .create-teaser-lead,
    .create-teaser-seat-copy:first-child {
      margin-block-start: var(--wa-space-s);
    }

    .create-teaser-legal {
      padding-block-start: var(--wa-space-xs);
    }
  }
  /* Phones: the credit keeps the creation's name and little else; the maker line below already carries the handle. */
  @media (width <= 40rem) {
    .create-teaser-credit {
      align-items: center;
      gap: var(--wa-space-s);
      padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
    }

    wa-avatar.create-teaser-credit-avatar {
      --size: 2rem;

      margin-block-start: 0;
    }

    .create-teaser-credit-title {
      -webkit-line-clamp: 1;
      font-size: var(--wa-font-size-s);
    }

    .create-teaser-credit-by {
      display: none;
    }
  }
  /* #endregion */

  /* #region Reduced motion */
  /* Fades and color changes stay; every translate, scale, layout change, and the pulse go to zero. */
  @media (prefers-reduced-motion: reduce) {
    .create-teaser-launch-dot::after {
      animation: none;
    }

    .create-teaser-stack,
    .create-teaser-stack:has(.create-teaser-chin.is-open) {
      transition: none;
    }

    .create-teaser-chin,
    .create-teaser-chin.is-open {
      transition-property: background-color, border-color;
    }

    .create-teaser-chin-tray,
    .create-teaser-chin.is-open .create-teaser-chin-tray {
      transition: none;
    }

    .create-teaser-chin-row,
    .create-teaser-chin.is-open .create-teaser-chin-row {
      translate: none;
      transition: none;
    }

    .create-teaser-seat {
      animation-name: create-teaser-fade;
    }

    /* The gem alone: a round of faces is content changing on its own, fades or not (Brian, 2026-10-22). */
    :is(.create-teaser-wallpaper-gem, .create-teaser-face, [data-teaser-face-part]) {
      animation: none;
    }
  }
  /* #endregion */
}