@layer reset, tokens, base, layout, components, prototypes, motion, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ol,
  ul {
    margin: 0;
  }

  ol,
  ul {
    padding: 0;
  }

  button,
  input {
    color: inherit;
    font: inherit;
  }

  button {
    border: 0;
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* Button overview: the treatment reference gets its own generous canvas. */
.case-section--overview--button .case-overview__content,
.case-section--overview--button .case-live-component {
  align-self: stretch;
}

.case-section--overview--button .case-live-component {
  display: grid;
  min-block-size: 0;
}

.case-section--overview--button .case-live-component .prototype--button {
  min-height: 26rem;
  min-block-size: 26rem;
  height: auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
}

.case-section--specs--handoff .case-specs-handoff {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
  padding: clamp(2.5rem, 6vw, 6rem);
}

.case-section--specs--handoff .case-section__heading {
  max-width: 25rem;
  padding: 0;
}

.case-shipping-disclosures {
  display: grid;
  gap: 0;
  margin-top: var(--space-4);
}

.case-shipping-disclosure {
  border-top: 1px solid rgb(22 21 19 / 0.08);
  border-bottom: 1px solid rgb(22 21 19 / 0.08);
}

.case-shipping-disclosure + .case-shipping-disclosure {
  border-top: 0;
}

.case-shipping-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.8rem;
  color: var(--color-ink-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.55;
  list-style: none;
}

.case-shipping-disclosure summary::-webkit-details-marker {
  display: none;
}

.case-shipping-disclosure summary::after {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-0.12rem);
  transition: transform var(--motion-fast) var(--ease-out);
}

.case-shipping-disclosure[open] summary::after {
  transform: rotate(225deg) translateY(-0.12rem);
}

.case-shipping-disclosure__copy {
  padding: 0 0 1rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.case-specs-handoff__preview {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.08);
}

.case-specs-handoff__preview img {
  display: block;
  width: 100%;
  height: auto;
}

.case-specs-handoff__preview--vxd {
  display: grid;
  align-content: start;
}

.case-specs-handoff__reference {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.case-specs-handoff__preview--vxd .case-specification {
  min-width: 0;
}

.case-specs-handoff__preview--vxd .vxd-spec-section {
  border-bottom: 0;
}

.case-specs-handoff__preview--vxd .vxd-canvas-section {
  padding: 0;
}

.case-specs-handoff__preview--vxd .vxd-callout-canvas {
  min-height: clamp(16rem, 22vw, 22rem);
  border-inline: 0;
  box-shadow: none;
}

.case-specs-handoff__preview--vxd .vxd-callout-canvas--anatomy {
  min-height: clamp(14rem, 19vw, 19rem);
}

.case-specs-handoff__preview--vxd .vxd-callout-canvas .vxd-preview {
  padding: 3.4rem clamp(1.5rem, 5vw, 3rem) 2.75rem;
}

@media (max-width: 58rem) {
  .case-section--specs--handoff .case-specs-handoff {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .case-section--specs--handoff .case-section__heading {
    max-width: 34rem;
  }
}

/* Keyboard shortcuts use native keyboard semantics only in explanatory copy,
   never in the animated or interactive component examples. */
.case-study p kbd {
  display: inline-flex;
  align-items: center;
  min-height: 1.35em;
  padding: 0.05em 0.34em;
  border: 1px solid rgb(22 21 19 / 0.28);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  background: #fff;
  color: #161513;
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: 0.05em;
  white-space: nowrap;
}

@layer utilities {
  /* Local Redwood reconstructions. Card motion and live studies share this
     compact visual language; only their interaction level differs. */
  .redwood-preview,
  .case-study .prototype,
  .case-specification {
    --rw-ink: var(--dk-ink, #161513);
    --rw-muted: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    --rw-border: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    --rw-divider: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    --rw-surface: var(--dk-surface, #fff);
    --rw-surface-muted: var(--dk-surface-muted, #f5f4f2);
    --rw-selected: var(--dk-selected, #227e9e);
    --rw-selected-surface: var(--dk-selected-surface, #e4f1f7);
    --rw-danger: var(--dk-danger, #b3311f);
    --rw-feedback-sad: var(--dk-danger, #b3311f);
    --rw-feedback-neutral: var(--dk-feedback-neutral, #875e00);
    --rw-feedback-happy: var(--dk-feedback-happy, #18734c);
    --rw-cta: var(--dk-cta, #3a3632);
    /* Small icon and count chips: the muted surface in light, a soft tint of
       the ink in dark so they never read as black holes. */
    --rw-chip: var(--dk-chip, var(--rw-surface-muted));
    --rw-focus: var(--dk-ink, #000);
    --rw-shadow-sm: 0 4px 8px rgb(0 0 0 / 0.16);
    color: var(--rw-ink);
    font-family: var(--font-sans);
  }

  .redwood-preview {
    display: grid;
    min-height: 100%;
    place-items: center;
    overflow: hidden;
    background: var(--rw-surface-muted);
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .redwood-preview::before,
  .redwood-preview::after {
    content: none;
  }

  .rw-button-run {
    position: relative;
    display: grid;
    min-width: 12.5rem;
    min-height: 6.5rem;
    place-items: center;
  }

  .rw-button,
  .rw-submit-button {
    position: relative;
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding: 0.625rem 1rem;
    border-radius: 0.25rem;
    background: var(--rw-cta);
    box-shadow: inset 0 -2px 0 rgb(var(--dk-surface-rgb, 255 255 255) / 0.14);
    color: var(--dk-on-strong, #fff);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .rw-button--primary {
    min-width: 8.75rem;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }

  .redwood-preview--button .rw-button-run:hover .rw-button--primary {
    background: var(--dk-cta-hover, #25211e);
    box-shadow: 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.3), 0 6px 12px rgb(0 0 0 / 0.18);
    transform: translateY(-1px) scale(1.035);
  }

  .rw-button::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.16);
    content: "";
    opacity: 0;
    pointer-events: none;
  }

  .rw-button-toast {
    position: absolute;
    top: calc(50% + 2.45rem);
    left: 50%;
    padding: 0.38rem 0.65rem;
    border: 1px solid rgb(var(--dk-selected-rgb, 34 126 158) / 0.45);
    border-radius: 0.25rem;
    background: var(--rw-surface);
    box-shadow: var(--rw-shadow-sm);
    color: var(--dk-selected-strong, #176f8e);
    font-size: 0.58rem;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%, -0.25rem);
    white-space: nowrap;
  }

  .rw-menu-run,
  .rw-menu-button-run {
    position: relative;
    display: grid;
    min-width: 13.5rem;
    min-height: 13.5rem;
    place-items: start center;
    padding-block: 1.5rem 1.25rem;
  }

  .rw-menu-run {
    place-items: center;
    padding-block: 1.5rem;
  }

  .rw-menu-button-run {
    min-height: 12.5rem;
    padding-block: 1.75rem 1.5rem;
  }

  .rw-menu-button-anchor {
    position: relative;
    display: grid;
  }

  .rw-menu-surface {
    display: grid;
    width: 12.5rem;
    min-width: 8.75rem;
    padding-block: 0.5rem;
    border: 1px solid var(--rw-border);
    border-radius: 0.375rem;
    background: var(--rw-surface);
    box-shadow: var(--rw-shadow-sm);
  }

  .rw-menu-surface > span {
    position: relative;
    z-index: 0;
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding-inline: 1rem;
    color: var(--rw-ink);
    font-size: 0.66rem;
    font-weight: 600;
    transform: translateX(0);
    transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  }

  .rw-menu-surface > span + span {
    border-top: 1px solid var(--rw-divider);
  }

  .rw-menu-surface--floating > span + span {
    border-top: 0;
  }

  .rw-menu-surface--floating > .rw-menu-surface__danger {
    border-top: 1px solid var(--rw-divider);
  }

  /* Match the animated Menu study to the Redwood menu shown in its overview. */
  .redwood-preview--menu .rw-menu-surface {
    width: 12.5rem;
    padding-block: 8px;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    border-radius: 6px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.16);
  }

  .redwood-preview--menu .rw-menu-surface > span {
    min-height: 48px;
    gap: 0.75rem;
    padding-inline: 16px;
    color: var(--dk-ink, #161513);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }

  .redwood-preview--menu .rw-menu-surface > span > span {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
  }

  .rw-menu-surface i {
    color: var(--rw-muted);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-style: normal;
  }

  .rw-menu-surface__danger {
    color: var(--rw-danger) !important;
  }

  .rw-menu-button {
    display: flex;
    min-height: 2.75rem;
    align-items: stretch;
    overflow: hidden;
    border-radius: 0.25rem;
    background: var(--rw-cta);
    color: var(--dk-on-strong, #fff);
    box-shadow: inset 0 -2px 0 rgb(var(--dk-surface-rgb, 255 255 255) / 0.14);
  }

  .rw-menu-button > span {
    display: flex;
    min-width: 6.5rem;
    align-items: center;
    justify-content: center;
    padding-inline: 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .rw-menu-button > i {
    display: grid;
    flex: 0 0 2.75rem;
    position: relative;
    width: 2.75rem;
    place-items: center;
    padding: 0;
  }

  .rw-menu-button > i::before {
    position: absolute;
    z-index: 0;
    inset-block: 0;
    left: 0;
    width: 1px;
    background: rgb(0 0 0 / 0.1);
    content: "";
  }

  .rw-menu-button > i svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .redwood-preview--menu-button .rw-menu-button-anchor > .rw-menu-surface {
    position: absolute;
    z-index: 1;
    top: calc(100% + 0.5rem);
    right: 0;
    bottom: auto;
    left: auto;
    width: 12.5rem;
    transform-origin: top right;
  }

  /* The card represents an open menu with its first choice hovered, not selected. */
  .redwood-preview--menu-button .rw-menu-surface--compact > span:first-child {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
    color: var(--rw-ink);
  }

  .rw-layout-run {
    display: grid;
    width: min(88%, 31rem);
    min-height: 9rem;
    grid-template-columns: 5.25rem minmax(7.5rem, 1fr) 5.75rem;
    overflow: hidden;
    border: 1px solid var(--rw-border);
    border-radius: 0.25rem;
    background: var(--rw-surface);
    box-shadow: var(--rw-shadow-sm);
  }

  .rw-layout-nav,
  .rw-layout-inspector {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 0.55rem;
    background: var(--rw-surface-muted);
    font-size: 0.5rem;
  }

  .rw-layout-nav {
    border-right: 1px solid var(--rw-border);
  }

  .rw-layout-inspector {
    border-left: 1px solid var(--rw-border);
  }

  .rw-layout-nav b,
  .rw-layout-inspector b {
    margin-bottom: 0.2rem;
    color: var(--rw-ink);
    font-size: 0.53rem;
  }

  .rw-layout-nav i,
  .rw-layout-inspector i {
    color: var(--rw-muted);
    font-style: normal;
  }

  .rw-layout-canvas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.7rem;
    background: var(--dk-surface-subtle, #fcfbfa);
  }

  .rw-layout-canvas i {
    display: grid;
    min-height: 2.8rem;
    align-content: start;
    padding: 0.45rem;
    border: 1px solid var(--rw-border);
    border-radius: 0.18rem;
    background: var(--rw-surface);
    color: var(--rw-muted);
    font-size: 0.52rem;
    font-style: normal;
  }

  .rw-layout-region--selected {
    box-shadow: inset 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.16);
    outline: 2px solid color-mix(in srgb, var(--rw-selected) 82%, transparent);
    outline-offset: 2px;
  }

  .rw-layout-insertion {
    grid-column: span 2;
    display: grid;
    min-height: 1.35rem;
    place-items: center;
    border: 1px dashed color-mix(in srgb, var(--rw-selected) 78%, var(--rw-border));
    border-radius: 0.18rem;
    /* A shade darker than the selected teal so the label meets 4.5:1. */
    color: color-mix(in srgb, var(--rw-selected) 80%, var(--dk-ink, #000));
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.015em;
  }

  .rw-toolbar-run {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--rw-border);
    border-radius: 0.25rem;
    background: var(--rw-surface);
    box-shadow: var(--rw-shadow-sm);
  }

  .rw-toolbar-control {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 0.18rem;
    color: var(--rw-ink);
    font-size: 0.7rem;
    font-weight: 750;
  }

  .rw-toolbar-control.is-selected {
    border-color: var(--rw-selected);
    background: var(--rw-selected-surface);
    color: var(--rw-ink);
  }

  .rw-toolbar-icon {
    position: relative;
  }

  .rw-toolbar-icon b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .rw-toolbar-icon--list::before {
    width: 1.05rem;
    height: 0.72rem;
    background:
      radial-gradient(circle at 0.1rem 0.12rem, currentColor 0.1rem, transparent 0.11rem),
      radial-gradient(circle at 0.1rem 0.6rem, currentColor 0.1rem, transparent 0.11rem),
      linear-gradient(currentColor, currentColor) 0.33rem 0.04rem / 0.72rem 1px no-repeat,
      linear-gradient(currentColor, currentColor) 0.33rem 0.52rem / 0.72rem 1px no-repeat;
    content: "";
  }

  .rw-toolbar-icon--undo::before {
    color: var(--rw-ink);
    content: "↶";
    font-size: 1.05rem;
    font-weight: 500;
  }

  .rw-toolbar-run > i {
    width: 1px;
    height: 1rem;
    margin-inline: 0.25rem;
    background: var(--rw-divider);
  }

  .rw-tabs-run {
    display: grid;
    width: min(88%, 23rem);
    gap: 0.75rem;
  }

  .rw-tabs {
    position: relative;
    display: flex;
    min-height: 2.75rem;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--rw-divider);
  }

  .rw-tabs > .rw-tab {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    color: var(--rw-muted);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 650;
  }

  .rw-tab.is-active {
    color: var(--rw-ink);
  }

  .rw-tabs__slider {
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    width: calc(100% / 3);
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--rw-ink);
    transform: translateX(0);
    will-change: transform;
  }

  .rw-tab > b {
    display: inline-grid;
    min-width: 1rem;
    height: 1rem;
    place-items: center;
    border-radius: 999px;
    background: var(--rw-chip);
    color: var(--rw-muted);
    font-size: 0.5rem;
  }

  .rw-tab-panel {
    position: relative;
    display: block;
    min-height: 4.4rem;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--rw-divider);
    border-radius: 0.25rem;
    background: var(--rw-surface);
    color: var(--rw-muted);
    font-size: 0.58rem;
  }

  .rw-tab-panel__track {
    display: flex;
    width: 300%;
    min-height: 4.4rem;
    transform: translateX(0);
    will-change: transform;
  }

  .rw-tab-copy {
    display: grid;
    min-width: 0;
    flex: 0 0 calc(100% / 3);
    align-content: start;
    gap: 0.18rem;
    padding: 0.65rem 0.75rem;
    color: var(--rw-muted);
    font-style: normal;
  }

  .rw-tab-copy b {
    color: var(--rw-ink);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .rw-tab-copy small {
    color: var(--rw-muted);
    font-size: 0.57rem;
    line-height: 1.3;
  }

  .rw-tab-copy em {
    color: var(--rw-selected);
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.025em;
  }

  .rw-selector-run {
    display: block;
    width: min(88%, 21rem);
    overflow: hidden;
    border: 1px solid var(--rw-border);
    border-radius: 0.25rem;
    background: var(--rw-surface);
    box-shadow: var(--rw-shadow-sm);
  }

  .rw-selector-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .rw-selector-table th,
  .rw-selector-table td {
    height: 3rem;
    padding: 0.35rem 0.65rem;
    border-top: 1px solid var(--rw-divider);
    color: var(--rw-ink);
    font-size: 0.58rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
  }

  .rw-selector-table thead th {
    border-top: 0;
    background: var(--rw-surface-muted);
    font-size: 0.55rem;
    font-weight: 750;
  }

  .rw-selector-table thead th:nth-child(2) {
    position: relative;
  }

  .rw-selector-count {
    position: absolute;
    top: 50%;
    inset-inline-start: 0.65rem;
    opacity: 0;
    transform: translateY(-50%);
  }

  .rw-selector-count--zero {
    opacity: 1;
  }

  .rw-selector-action {
    opacity: 0.42;
    transition: color 160ms ease, opacity 160ms ease;
  }

  .rw-selector-table th:first-child,
  .rw-selector-table td:first-child {
    width: 2.25rem;
    padding: 0;
    text-align: center;
  }

  .rw-selector-table th:last-child,
  .rw-selector-table td:last-child {
    width: 36%;
    color: var(--rw-muted);
    font-size: 0.5rem;
    text-align: right;
  }

  .rw-selector-table tbody tr.is-selected {
    background: var(--rw-selected-surface);
  }

  .rw-selector-row {
    background: transparent;
  }

  .rw-selector-control {
    position: relative;
    display: inline-grid;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--rw-ink);
    border-radius: 0.2rem;
    background: var(--dk-surface, #fff);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  }

  .rw-selector-control.is-selected {
    position: relative;
    background: var(--rw-selected);
    border-color: var(--rw-selected);
    box-shadow: none;
  }

  .rw-selector-control::after {
    position: absolute;
    top: 0.23rem;
    left: 0.18rem;
    width: 0.46rem;
    height: 0.25rem;
    border-bottom: 1.5px solid var(--dk-surface, #fff);
    border-left: 1.5px solid var(--dk-surface, #fff);
    content: "";
    opacity: 0;
    transform: rotate(-45deg);
  }

  .rw-selector-control.is-selected::after {
    opacity: 1;
  }

  .rw-conversation-run {
    display: grid;
    width: min(86%, 22rem);
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.9rem;
    border: 1px solid var(--rw-divider);
    border-radius: 0.25rem;
    background: var(--rw-surface);
    box-shadow: var(--rw-shadow-sm);
  }

  .rw-avatar {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rw-selected) 16%, var(--rw-surface));
    color: var(--rw-ink);
    font-size: 0.45rem;
    font-weight: 750;
  }

  .rw-conversation-copy {
    display: grid;
    gap: 0.25rem;
  }

  .rw-conversation-copy b {
    font-size: 0.58rem;
  }

  .rw-conversation-copy small,
  .rw-conversation-copy em {
    color: var(--rw-muted);
    font-size: 0.48rem;
    font-style: normal;
  }

  .rw-conversation-copy > i {
    color: var(--rw-muted);
    font-size: 0.55rem;
    font-style: normal;
    line-height: 1.38;
  }

  .rw-conversation-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .rw-reaction-button {
    display: inline-flex;
    min-height: 1.2rem;
    align-items: center;
    gap: 0.18rem;
    padding-inline: 0.28rem;
    border: 1px solid color-mix(in srgb, var(--rw-selected) 42%, var(--rw-divider));
    border-radius: 999px;
    background: var(--rw-selected-surface);
    color: var(--rw-ink);
    font-size: 0.46rem;
    font-style: normal;
    line-height: 1;
  }

  .rw-reaction-button b {
    color: color-mix(in srgb, var(--rw-selected) 80%, var(--dk-ink, #000));
    font-size: inherit;
  }

  .rw-conversation-replies {
    display: grid;
    gap: 0.2rem;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    color: var(--rw-muted);
    font-size: 0.47rem;
    opacity: 0;
  }

  .rw-conversation-replies i {
    font-style: normal;
  }

  .rw-emobutton-run {
    position: relative;
    display: grid;
    min-width: 11rem;
    min-height: 6.5rem;
    align-items: end;
    justify-items: center;
    padding: 0.5rem;
    isolation: isolate;
  }

  .rw-feedback-strip {
    position: absolute;
    z-index: 1;
    bottom: 0.5rem;
    display: grid;
    grid-template-columns: repeat(3, 2.75rem);
    overflow: visible;
    pointer-events: none;
    transform: translateY(0);
    transition: transform 180ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  .rw-feedback-strip i {
    position: relative;
    z-index: 0;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    background: transparent;
    box-shadow: none;
    color: var(--rw-feedback-color, var(--rw-muted));
    font-style: normal;
    transform: translateY(0) scale(1);
    transform-origin: center bottom;
    filter: none;
    will-change: transform, filter;
  }

  .rw-feedback-icon--sad {
    --rw-feedback-color: var(--rw-feedback-sad);
  }

  .rw-feedback-icon--neutral {
    --rw-feedback-color: var(--rw-feedback-neutral);
  }

  .rw-feedback-icon--happy {
    --rw-feedback-color: var(--rw-feedback-happy);
  }

  .rw-feedback-strip svg {
    width: 1.5rem;
    height: 1.5rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
  }

  .rw-emobutton-run .rw-submit-button {
    z-index: 2;
    width: 100%;
    min-height: 2.75rem;
    border-radius: 0.25rem;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .redwood-preview--emoji .rw-emobutton-run:hover .rw-feedback-strip {
    transform: translateY(-2.75rem);
  }

  .redwood-preview--emoji .rw-emobutton-run:hover .rw-submit-button {
    background: var(--dk-cta-hover, #25211e);
    box-shadow: 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.34), 0 6px 12px rgb(0 0 0 / 0.2);
    transform: translateY(-1px);
  }

  .rw-visual-space-run {
    position: relative;
    display: block;
    width: min(88%, 32rem);
    min-height: 10.25rem;
    overflow: hidden;
    border: 1px solid var(--rw-border);
    border-radius: 0.75rem;
    background: var(--dk-map, #d7e5f3);
    box-shadow: var(--rw-shadow-sm);
  }

  .rw-visual-map {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--dk-map, #d7e5f3);
  }

  .rw-map-scene {
    position: absolute;
    inset: 0;
    transform: translate3d(0, 0, 0) scale(1.04);
    transform-origin: center;
    will-change: transform;
  }

  .rw-map-raster {
    /* Overscan with a transform rather than an oversized box, so an outside
       img { max-width: 100% } rule can't shrink the image and expose its edges. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: scale(1.14);
    transform-origin: center;
  }

  .rw-map-graphic {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .rw-map-water {
    fill: #d7e5f3;
  }

  .rw-map-waterway {
    fill: none;
    stroke: rgb(248 252 255 / 0.82);
    stroke-width: 24;
  }

  .rw-map-park {
    fill: rgb(198 222 197 / 0.78);
    stroke: rgb(95 136 99 / 0.24);
    stroke-width: 1;
  }

  .rw-map-parcels path {
    fill: rgb(250 253 255 / 0.36);
    stroke: rgb(64 102 127 / 0.3);
    stroke-width: 1.2;
  }

  .rw-map-streets path {
    fill: none;
    stroke: rgb(80 117 140 / 0.46);
    stroke-width: 1.35;
  }

  .rw-map-route {
    fill: none;
    stroke: rgb(var(--dk-surface-rgb, 255 255 255) / 0.9);
    stroke-linecap: round;
    stroke-width: 6;
  }

  .rw-map-road,
  .rw-map-block,
  .rw-map-pin,
  .rw-map-controls {
    position: absolute;
  }

  .rw-map-road,
  .rw-map-block {
    z-index: 1;
  }

  .rw-map-pin,
  .rw-map-controls {
    z-index: 2;
  }

  .rw-map-road {
    height: 1px;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.26);
    transform-origin: left center;
  }

  .rw-map-road--one { top: 28%; left: 42%; width: 52%; transform: rotate(18deg); }
  .rw-map-road--two { top: 68%; left: 32%; width: 62%; transform: rotate(-18deg); }
  .rw-map-road--three { top: 52%; left: 58%; width: 36%; transform: rotate(74deg); }

  .rw-map-block {
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.18);
    background: rgb(var(--dk-surface-rgb, 255 255 255) / 0.28);
  }

  .rw-map-block--one { top: 18%; right: 12%; width: 16%; height: 23%; transform: rotate(9deg); }
  .rw-map-block--two { right: 23%; bottom: 18%; width: 22%; height: 18%; transform: rotate(-7deg); }
  .rw-map-block--three { bottom: 16%; left: 45%; width: 12%; height: 14%; transform: rotate(16deg); }

  .rw-map-pin {
    display: grid;
    width: 1.05rem;
    height: 1.05rem;
    place-items: center;
    border: 2px solid var(--dk-surface, #fff);
    border-radius: 50%;
    background: var(--rw-selected);
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.22);
    color: transparent;
  }

  .rw-map-pin--one { top: 29%; right: 22%; }
  .rw-map-pin--two { right: 32%; bottom: 23%; }

  .rw-map-controls {
    right: 0.7rem;
    bottom: 0.7rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.2);
    border-radius: 0.25rem;
    background: rgb(var(--dk-surface-rgb, 255 255 255) / 0.9);
    color: var(--rw-ink);
    font-size: 0.6rem;
    font-style: normal;
  }

  .rw-visual-panel {
    position: absolute;
    z-index: 3;
    top: 0.7rem;
    left: 0.7rem;
    display: grid;
    width: min(60%, 14.5rem);
    gap: 0.2rem;
    padding: 0.55rem;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 0.75rem;
    background: var(--dk-surface-subtle, #fbf9f8);
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.2);
  }

  .rw-visual-panel > strong,
  .rw-visual-panel > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
  }

  .rw-visual-panel > strong {
    padding-bottom: 0.25rem;
    font-size: 0.58rem;
  }

  .rw-visual-panel > strong i,
  .rw-visual-panel > span i {
    color: var(--rw-muted);
    font-size: 0.48rem;
    font-style: normal;
  }

  .rw-visual-panel > em {
    padding: 0.32rem 0.4rem;
    border: 1px solid var(--rw-divider);
    border-radius: 0.2rem;
    color: var(--rw-muted);
    font-size: 0.48rem;
    font-style: normal;
  }

  .rw-visual-panel > span {
    min-height: 1.6rem;
    padding-inline: 0.35rem;
    border-radius: 0.2rem;
    font-size: 0.48rem;
  }

  .rw-visual-panel > span.is-selected {
    border: 1px solid var(--rw-selected);
    background: var(--rw-selected-surface);
  }

  @media (max-width: 35rem) {
    .redwood-preview--menu .rw-menu-surface,
    .redwood-preview--menu-button .rw-menu-button-anchor {
      transform: scale(0.82);
      transform-origin: top center;
    }
  }

  .motion-stage.is-playing.redwood-preview--button .rw-button--pressed {
    animation: rw-button-interaction 4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--button .rw-button--pressed::after {
    animation: rw-button-pressed 4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--button .rw-button-toast {
    animation: rw-button-toast 4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--menu-button .rw-menu-surface {
    animation: rw-menu-reveal 4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--menu .rw-menu-surface > span:nth-child(1) {
    animation: rw-menu-hover-rename 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--menu .rw-menu-surface > span:nth-child(2) {
    animation: rw-menu-hover-duplicate 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--menu .rw-menu-surface > span:nth-child(3) {
    animation: rw-menu-hover-delete 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--layout .rw-layout-region--selected {
    animation: rw-layout-drag 4.6s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--layout .rw-layout-insertion {
    animation: rw-layout-drop 4.6s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--toolbar .rw-toolbar-control--bold {
    animation: rw-toolbar-bold-state 4.8s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--toolbar .rw-toolbar-control--underline {
    animation: rw-toolbar-underline-state 4.8s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--tabs .rw-tab--overview {
    animation: rw-tab-label-overview 5.4s linear infinite;
  }

  .motion-stage.is-playing.redwood-preview--tabs .rw-tab--activity {
    animation: rw-tab-label-activity 5.4s linear infinite;
  }

  .motion-stage.is-playing.redwood-preview--tabs .rw-tab--files {
    animation: rw-tab-label-files 5.4s linear infinite;
  }

  .motion-stage.is-playing.redwood-preview--tabs .rw-tabs__slider {
    animation: rw-tab-slider 5.4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--tabs .rw-tab-panel__track {
    animation: rw-tab-panel-track 5.4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-count--zero {
    animation: rw-selector-count-zero 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-count--one {
    animation: rw-selector-count-one 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-count--two {
    animation: rw-selector-count-two 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-action {
    animation: rw-selector-action-state 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-row--avery {
    animation: rw-selector-row-avery 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-row--jordan {
    animation: rw-selector-row-jordan 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-control--avery {
    animation: rw-selector-control-avery 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-control--jordan {
    animation: rw-selector-control-jordan 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-control--avery::after {
    animation: rw-selector-check-avery 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--selector .rw-selector-control--jordan::after {
    animation: rw-selector-check-jordan 5.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--conversation .rw-conversation-replies {
    animation: rw-replies-reveal 4s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--emoji .rw-feedback-strip {
    animation: rw-feedback-rise 4.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--emoji .rw-submit-button {
    animation: rw-submit-hover 4.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  /* The portfolio card plays a quick hover sweep across its decorative choices.
     The live case-study emobutton remains an independently interactive control. */
  .project-card .motion-stage.is-playing.redwood-preview--emoji .rw-feedback-strip i:nth-child(1) {
    animation: rw-feedback-choice-one 4.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .project-card .motion-stage.is-playing.redwood-preview--emoji .rw-feedback-strip i:nth-child(2) {
    animation: rw-feedback-choice-two 4.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .project-card .motion-stage.is-playing.redwood-preview--emoji .rw-feedback-strip i:nth-child(3) {
    animation: rw-feedback-choice-three 4.2s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--visual-space .rw-map-pin--two {
    animation: rw-map-pin-pulse 4.1s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  }

  .motion-stage.is-playing.redwood-preview--visual-space .rw-map-scene {
    animation: rw-map-navigate 8s cubic-bezier(0.35, 0.05, 0.15, 1) infinite alternate;
  }

  @keyframes rw-button-pressed {
    0%, 30%, 100% { opacity: 0; }
    37%, 42% { opacity: 0.22; }
    46%, 78% { opacity: 0; }
  }

  @keyframes rw-button-interaction {
    0%, 22%, 100% { transform: translateY(0) scale(1); background: var(--rw-cta); box-shadow: inset 0 -2px 0 rgb(var(--dk-surface-rgb, 255 255 255) / 0.14); }
    29%, 35% { transform: translateY(-1px) scale(1.04); background: var(--dk-cta-hover, #25211e); box-shadow: 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.3), 0 6px 12px rgb(0 0 0 / 0.18); }
    39% { transform: translateY(1px) scale(0.97); background: var(--dk-cta-hover, #25211e); box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.18); }
    46%, 72% { transform: translateY(0) scale(1); background: var(--rw-cta); box-shadow: inset 0 -2px 0 rgb(var(--dk-surface-rgb, 255 255 255) / 0.14); }
  }

  @keyframes rw-button-toast {
    0%, 40%, 100% { opacity: 0; transform: translate(-50%, -0.25rem); }
    47%, 72% { opacity: 1; transform: translate(-50%, 0); }
    84% { opacity: 0; transform: translate(-50%, -0.1rem); }
  }

  @keyframes rw-menu-reveal {
    0%, 14% { opacity: 0; transform: translateY(-0.55rem) scale(0.96); }
    28%, 62% { opacity: 1; transform: translateY(0) scale(1); }
    80%, 100% { opacity: 0; transform: translateY(-0.55rem) scale(0.96); }
  }

  @keyframes rw-menu-hover-rename {
    0%, 10%, 34%, 100% { background: transparent; box-shadow: none; color: var(--rw-ink); transform: translateX(0); }
    15%, 28% { background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08); box-shadow: none; color: var(--rw-ink); transform: translateX(0); }
  }

  @keyframes rw-menu-hover-duplicate {
    0%, 36%, 59%, 100% { background: transparent; box-shadow: none; color: var(--rw-ink); transform: translateX(0); }
    41%, 53% { background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08); box-shadow: none; color: var(--rw-ink); transform: translateX(0); }
  }

  @keyframes rw-menu-hover-delete {
    0%, 61%, 84%, 100% { background: transparent; box-shadow: none; transform: translateX(0); }
    66%, 78% { background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08); box-shadow: none; transform: translateX(0); }
  }

  @keyframes rw-layout-drop {
    0%, 28%, 100% { background: transparent; border-color: color-mix(in srgb, var(--rw-selected) 78%, var(--rw-border)); }
    43%, 59% { background: color-mix(in srgb, var(--rw-selected) 12%, transparent); border-color: var(--rw-focus); }
  }

  @keyframes rw-layout-drag {
    0%, 28%, 100% { transform: translateY(0); opacity: 1; box-shadow: inset 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.16); }
    43% { transform: translateY(-0.28rem); opacity: 0.9; box-shadow: var(--rw-shadow-sm); }
    59% { transform: translateY(0); opacity: 1; box-shadow: inset 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.16); }
  }

  @keyframes rw-toolbar-bold-state {
    0%, 24%, 57%, 100% {
      border-color: var(--rw-selected);
      background: var(--rw-selected-surface);
      color: var(--rw-ink);
      transform: translateY(0) scale(1);
    }
    62% {
      border-color: transparent;
      background: transparent;
      color: var(--rw-ink);
      transform: translateY(0) scale(0.94);
    }
    67%, 78% {
      border-color: transparent;
      background: transparent;
      color: var(--rw-ink);
      transform: translateY(0) scale(1);
    }
    82% {
      border-color: transparent;
      background: transparent;
      color: var(--rw-ink);
      transform: translateY(0) scale(0.94);
    }
    88% {
      border-color: var(--rw-selected);
      background: var(--rw-selected-surface);
      color: var(--rw-ink);
      transform: translateY(-1px) scale(1.045);
    }
    93% {
      border-color: var(--rw-selected);
      background: var(--rw-selected-surface);
      color: var(--rw-ink);
      transform: translateY(0) scale(1);
    }
  }

  @keyframes rw-toolbar-underline-state {
    0%, 27%, 100% {
      border-color: transparent;
      background: transparent;
      color: var(--rw-ink);
      transform: translateY(0) scale(1);
    }
    32% {
      border-color: transparent;
      background: transparent;
      color: var(--rw-ink);
      transform: translateY(0) scale(0.94);
    }
    38% {
      border-color: var(--rw-selected);
      background: var(--rw-selected-surface);
      color: var(--rw-ink);
      transform: translateY(-1px) scale(1.045);
    }
    43%, 57% {
      border-color: var(--rw-selected);
      background: var(--rw-selected-surface);
      color: var(--rw-ink);
      transform: translateY(0) scale(1);
    }
    62% {
      border-color: transparent;
      background: transparent;
      color: var(--rw-ink);
      transform: translateY(0) scale(0.94);
    }
    67%, 100% {
      border-color: transparent;
      background: transparent;
      color: var(--rw-ink);
      transform: translateY(0) scale(1);
    }
  }

  @keyframes rw-tab-label-overview {
    0%, 25%, 100% { color: var(--rw-ink); }
    32%, 89% { color: var(--rw-muted); }
  }

  @keyframes rw-tab-label-activity {
    0%, 24%, 64%, 100% { color: var(--rw-muted); }
    31%, 57% { color: var(--rw-ink); }
  }

  @keyframes rw-tab-label-files {
    0%, 56%, 95%, 100% { color: var(--rw-muted); }
    63%, 88% { color: var(--rw-ink); }
  }

  @keyframes rw-tab-slider {
    0%, 25%, 100% { transform: translateX(0); }
    32%, 57% { transform: translateX(100%); }
    64%, 88% { transform: translateX(200%); }
    95% { transform: translateX(0); }
  }

  @keyframes rw-tab-panel-track {
    0%, 25%, 100% { transform: translateX(0); }
    32%, 57% { transform: translateX(-33.333%); }
    64%, 88% { transform: translateX(-66.667%); }
    95% { transform: translateX(0); }
  }

  @keyframes rw-selector-count-zero {
    0%, 14%, 84%, 100% { opacity: 1; transform: translateY(-50%); }
    21%, 76% { opacity: 0; transform: translateY(calc(-50% - 0.15rem)); }
  }

  @keyframes rw-selector-count-one {
    0%, 16%, 48%, 100% { opacity: 0; transform: translateY(calc(-50% - 0.15rem)); }
    24%, 42% { opacity: 1; transform: translateY(-50%); }
  }

  @keyframes rw-selector-count-two {
    0%, 44%, 100% { opacity: 0; transform: translateY(calc(-50% - 0.15rem)); }
    52%, 76% { opacity: 1; transform: translateY(-50%); }
  }

  @keyframes rw-selector-action-state {
    0%, 14%, 84%, 100% { color: var(--rw-muted); opacity: 0.42; transform: translateY(0); }
    24%, 76% { color: var(--rw-ink); opacity: 1; transform: translateY(0); }
  }

  @keyframes rw-selector-row-avery {
    0%, 14%, 84%, 100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
    24%, 76% { background: var(--rw-selected-surface); box-shadow: inset 2px 0 0 var(--rw-selected); }
  }

  @keyframes rw-selector-row-jordan {
    0%, 42%, 84%, 100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
    52%, 76% { background: var(--rw-selected-surface); box-shadow: inset 2px 0 0 var(--rw-selected); }
  }

  @keyframes rw-selector-control-avery {
    0%, 14%, 84%, 100% { border-color: var(--rw-ink); background: var(--dk-surface, #fff); box-shadow: none; transform: scale(1); }
    18% { border-color: var(--rw-selected); background: var(--rw-selected); box-shadow: none; transform: scale(0.86); }
    24%, 76% { border-color: var(--rw-selected); background: var(--rw-selected); box-shadow: none; transform: scale(1); }
    80% { border-color: var(--rw-selected); background: var(--rw-selected); box-shadow: none; transform: scale(0.86); }
  }

  @keyframes rw-selector-control-jordan {
    0%, 42%, 84%, 100% { border-color: var(--rw-ink); background: var(--dk-surface, #fff); box-shadow: none; transform: scale(1); }
    46% { border-color: var(--rw-selected); background: var(--rw-selected); box-shadow: none; transform: scale(0.86); }
    52%, 76% { border-color: var(--rw-selected); background: var(--rw-selected); box-shadow: none; transform: scale(1); }
    80% { border-color: var(--rw-selected); background: var(--rw-selected); box-shadow: none; transform: scale(0.86); }
  }

  @keyframes rw-selector-check-avery {
    0%, 14%, 84%, 100% { opacity: 0; transform: rotate(-45deg) scale(0.55); }
    24%, 76% { opacity: 1; transform: rotate(-45deg) scale(1); }
  }

  @keyframes rw-selector-check-jordan {
    0%, 42%, 84%, 100% { opacity: 0; transform: rotate(-45deg) scale(0.55); }
    52%, 76% { opacity: 1; transform: rotate(-45deg) scale(1); }
  }

  @keyframes rw-replies-reveal {
    0%, 25%, 100% { max-height: 0; padding-top: 0; opacity: 0; }
    39%, 77% { max-height: 3rem; padding-top: 0.2rem; opacity: 1; }
    88% { max-height: 0; padding-top: 0; opacity: 0; }
  }

  @keyframes rw-feedback-rise {
    0%, 20%, 100% { transform: translateY(0); }
    35%, 74% { transform: translateY(-2.75rem); }
    87% { transform: translateY(-0.2rem); }
  }

  @keyframes rw-submit-hover {
    0%, 20%, 100% { background: var(--rw-cta); box-shadow: inset 0 -2px 0 rgb(var(--dk-surface-rgb, 255 255 255) / 0.14); }
    35%, 74% { background: var(--dk-cta-hover, #25211e); box-shadow: 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.34), 0 6px 12px rgb(0 0 0 / 0.2); }
    87% { background: var(--dk-cta-hover, #2d2925); box-shadow: 0 0 0 1px rgb(var(--dk-selected-rgb, 34 126 158) / 0.18), 0 3px 6px rgb(0 0 0 / 0.14); }
  }

  @keyframes rw-feedback-choice-one {
    0%, 38%, 55%, 100% { z-index: 0; color: var(--rw-feedback-color); filter: none; transform: translateY(0) scale(1); }
    40% { z-index: 2; color: var(--rw-feedback-color); filter: drop-shadow(0 0.14rem 0.15rem rgb(0 0 0 / 0.14)); transform: translateY(0.08rem) scale(0.94); }
    44%, 48% { z-index: 2; color: var(--rw-feedback-color); filter: drop-shadow(0 0.24rem 0.22rem rgb(0 0 0 / 0.18)); transform: translateY(-0.15rem) scale(1.22); }
    52% { z-index: 1; color: var(--rw-feedback-color); filter: drop-shadow(0 0.08rem 0.1rem rgb(0 0 0 / 0.1)); transform: translateY(-0.04rem) scale(1.04); }
  }

  @keyframes rw-feedback-choice-two {
    0%, 51%, 68%, 100% { z-index: 0; color: var(--rw-feedback-color); filter: none; transform: translateY(0) scale(1); }
    53% { z-index: 2; color: var(--rw-feedback-color); filter: drop-shadow(0 0.14rem 0.15rem rgb(0 0 0 / 0.14)); transform: translateY(0.08rem) scale(0.94); }
    57%, 61% { z-index: 2; color: var(--rw-feedback-color); filter: drop-shadow(0 0.24rem 0.22rem rgb(0 0 0 / 0.18)); transform: translateY(-0.15rem) scale(1.22); }
    65% { z-index: 1; color: var(--rw-feedback-color); filter: drop-shadow(0 0.08rem 0.1rem rgb(0 0 0 / 0.1)); transform: translateY(-0.04rem) scale(1.04); }
  }

  @keyframes rw-feedback-choice-three {
    0%, 64%, 81%, 100% { z-index: 0; color: var(--rw-feedback-color); filter: none; transform: translateY(0) scale(1); }
    66% { z-index: 2; color: var(--rw-feedback-color); filter: drop-shadow(0 0.14rem 0.15rem rgb(0 0 0 / 0.14)); transform: translateY(0.08rem) scale(0.94); }
    70%, 74% { z-index: 2; color: var(--rw-feedback-color); filter: drop-shadow(0 0.24rem 0.22rem rgb(0 0 0 / 0.18)); transform: translateY(-0.15rem) scale(1.22); }
    78% { z-index: 1; color: var(--rw-feedback-color); filter: drop-shadow(0 0.08rem 0.1rem rgb(0 0 0 / 0.1)); transform: translateY(-0.04rem) scale(1.04); }
  }

  @keyframes rw-map-pin-pulse {
    0%, 28%, 100% { box-shadow: 0 2px 5px rgb(0 0 0 / 0.22), 0 0 0 0 rgb(var(--dk-selected-rgb, 34 126 158) / 0); }
    42%, 72% { box-shadow: 0 2px 5px rgb(0 0 0 / 0.22), 0 0 0 0.42rem rgb(var(--dk-selected-rgb, 34 126 158) / 0.22); }
    84% { box-shadow: 0 2px 5px rgb(0 0 0 / 0.22), 0 0 0 0 rgb(var(--dk-selected-rgb, 34 126 158) / 0); }
  }

  @keyframes rw-map-navigate {
    0% { transform: translate3d(-1.5%, 1%, 0) scale(1.06); }
    46% { transform: translate3d(2.8%, -1.7%, 0) scale(1.13); }
    72% { transform: translate3d(1.6%, -3.2%, 0) scale(1.1); }
    100% { transform: translate3d(-2.2%, -0.8%, 0) scale(1.07); }
  }
}

@layer utilities {
  /* The studies below intentionally use the Redwood component vocabulary rather
     than the portfolio's expressive orange card styling. */
  .case-study,
  .case-study[data-group="composites"] {
    --case-accent: #227e9e;
    background: linear-gradient(
      to bottom,
      #fbf9f8 0,
      #fbf9f8 calc(2.75rem + var(--space-4)),
      #fff calc(2.75rem + var(--space-4)),
      #fff 100%
    );
  }

  .case-hero {
    border-bottom-color: rgb(22 21 19 / 0.12);
    background: #fbf9f8;
  }

  .case-motion {
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 0.75rem;
    background: var(--dk-surface-muted, #f5f4f2);
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.12);
  }

  .case-motion__caption {
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 4px;
    background: rgb(var(--dk-surface-rgb, 255 255 255) / 0.9);
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
  }

  .case-section {
    border-bottom-color: rgb(22 21 19 / 0.12);
  }

  .case-section--overview {
    grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1.45fr);
  }

  .case-overview__content {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
  }

  .case-overview__brief {
    max-width: 48rem;
    color: rgb(22 21 19 / 0.7);
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.55;
  }

  .case-live-component {
    --case-accent: var(--dk-selected, #227e9e);
    --color-ink: var(--dk-ink, #161513);
    --color-ink-muted: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    --color-line: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    --color-line-strong: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    --color-surface: var(--dk-surface, #fff);
    --color-canvas: var(--dk-surface, #fff);
    --color-canvas-soft: var(--dk-surface-muted, #f5f4f2);
    --color-success: var(--dk-selected, #227e9e);
    overflow: hidden;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 8px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.08);
    /* Native controls (checkboxes, fields) follow the host's color scheme
       unless pinned, and turn black under a dark one. */
    color-scheme: light;
  }

  .case-live-component .prototype {
    display: grid;
    min-height: 24rem;
    place-items: center;
    margin: 0;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
  font-family: var(--font-sans);
  }

  .case-section--overview:has(.case-live-component--menu-button),
  .case-live-component--menu-button,
  .case-live-component--menu-button .prototype--menu-button {
    position: relative;
    overflow: visible;
  }

  .case-live-component--menu-button .prototype--menu-button {
    min-height: 26rem;
    border-radius: inherit;
    background: transparent;
  }

  /* Give the three variants room to sit side by side with clear space
     between them, before the narrower container queries stack them. */
  .case-live-component.case-live-component--menu-button .demo-menu-button-study {
    width: 100%;
    gap: 3rem;
  }

  @container (min-width: 34rem) {
    .case-live-component.case-live-component--menu-button .demo-menu-button-study__variants {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2.5rem;
    }

    .case-live-component.case-live-component--menu-button .demo-menu-button-variant:nth-child(3) {
      grid-column: auto;
    }
  }

  .case-live-component--menu-button .demo-menu-button-variant {
    gap: 0.875rem;
  }

  .case-section--overview:has(.case-live-component--menu-button) {
    z-index: 10;
  }

  .case-live-component--menu-button:has(.demo-popover.is-open),
  .case-live-component--menu-button .demo-popover-wrap:has(.demo-popover.is-open) {
    z-index: 30;
  }

  .case-live-component--menu-button .demo-popover {
    z-index: 40;
  }

  .case-live-component .prototype::before {
    content: none;
  }

  .case-live-component .prototype button {
    min-height: 36px;
    border-radius: 4px;
    font-family: "Oracle Sans", var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1rem;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  }

  .case-live-component .prototype button:focus-visible {
    outline: 2px solid var(--dk-ink, #000);
    outline-offset: 2px;
  }

  .case-live-component .demo-status,
  .case-live-component .demo-menu-showcase__label,
  .case-live-component .demo-menu-button-variant__label {
    color: var(--color-ink-body-muted);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.55;
    text-transform: none;
  }

  .case-live-component .demo-status {
    max-width: 32rem;
  }

  .case-live-component .variant-control {
    gap: 8px;
  }

  .case-live-component .variant-control button,
  .case-live-component .demo-small-button,
  .case-live-component .demo-icon-button,
  .case-live-component .demo-select-all,
  .case-live-component .demo-clear,
  .case-live-component .demo-filter-chip,
  .ahr .demo-filter-chip {
    min-height: 36px;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
    font-size: 0.875rem;
  }

  .case-live-component .variant-control button.is-selected,
  .case-live-component .demo-filter-chip.is-active,
  .ahr .demo-filter-chip.is-active {
    border-color: var(--dk-selected, #227e9e);
    background: var(--dk-selected-surface, #e4f1f7);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .variant-control button:hover,
  .case-live-component .demo-small-button:hover,
  .case-live-component .demo-icon-button:hover,
  .case-live-component .demo-select-all:hover,
  .case-live-component .demo-clear:hover,
  .case-live-component .demo-filter-chip:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .case-live-component .demo-primary-button {
    min-height: 44px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--dk-cta, #3a3632);
    border-radius: 4px;
    background: var(--dk-cta, #3a3632);
    box-shadow: none;
    color: var(--dk-on-strong, #fff);
    font-size: 0.875rem;
    line-height: 1rem;
  }

  .case-live-component .demo-primary-button:hover:not(:disabled) {
    transform: none;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.84);
  }

  .case-live-component .demo-primary-button.is-secondary {
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-primary-button.is-success {
    background: var(--dk-selected, #227e9e);
  }

  .case-live-component .demo-primary-button:disabled {
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.2);
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.04);
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.4);
    opacity: 1;
  }

  .case-live-component .demo-popover-wrap {
    gap: 12px;
  }

  .case-live-component .demo-overflow-trigger {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
    letter-spacing: 0.08em;
  }

  .case-live-component .demo-popover {
    width: min(200px, calc(100vw - 4rem));
    min-width: 200px;
    gap: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 6px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.16);
  }

  .case-live-component .demo-popover button {
    min-height: 48px;
    padding: 0.75rem 1rem;
    border-radius: 0;
    color: var(--dk-ink, #161513);
    font-size: 1rem;
    font-weight: 400;
  }

  .case-live-component .demo-popover button:hover,
  .case-live-component .demo-popover button:focus-visible {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .case-live-component .demo-popover button[data-menu-destructive] {
    color: var(--dk-danger, #b3311f);
  }

  .case-live-component .demo-popover button span {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1;
  }

  /* Symbol icons (↗, ◷) read small in the mono face; set them in the sans at
     the item's size so they match the shortcut labels' visual weight. */
  .case-live-component .demo-popover button .demo-menu-glyph {
    font-family: var(--font-sans);
    font-size: 1.125rem;
  }

  /* The Menu study shows open action surfaces directly: no menu-button trigger. */
  .case-live-component .prototype--menu {
    padding: clamp(1.25rem, 3vw, 2rem);
    overflow: visible;
  }

  .case-live-component--menu {
    position: relative;
    z-index: 1;
    overflow: visible;
  }

  .case-live-component .demo-menu-showcase {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 12.5rem);
    align-items: start;
    justify-content: center;
    gap: 1rem;
    overflow: visible;
  }

  .case-live-component .demo-menu-showcase__example {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
  }

  .case-live-component .demo-menu-showcase__example--nested {
    position: relative;
    z-index: 1;
  }

  .case-live-component .demo-menu-showcase__example--nested:hover,
  .case-live-component .demo-menu-showcase__example--nested:focus-within {
    z-index: 10;
  }

  .case-live-component .demo-menu-showcase__label {
    margin: 0;
  }

  .case-live-component .demo-floating-menu,
  .ahr .demo-floating-menu {
    display: grid;
    width: 12.5rem;
    padding-block: 8px;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    border-radius: 6px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.16);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .case-live-component .demo-floating-menu:not(.demo-floating-menu--child).is-dismissed {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.25rem) scale(0.98);
  }

  .case-live-component .demo-floating-menu > button,
  .ahr .demo-floating-menu > button {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dk-ink, #161513);
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
  }

  .case-live-component .demo-floating-menu > button > span {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  .case-live-component .demo-floating-menu > button:hover,
  .case-live-component .demo-floating-menu > button:focus-visible,
  .case-live-component .demo-floating-menu > button.is-selected {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .case-live-component .demo-floating-menu__parent[aria-expanded="true"] {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .case-live-component .demo-menu-nested {
    position: relative;
    width: 12.5rem;
  }

  .case-live-component .demo-floating-menu--child {
    position: absolute;
    inset-block-start: calc(8px + 48px);
    inset-inline-start: calc(100% + 8px);
    z-index: 20;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-0.5rem) scale(0.97);
    transform-origin: top left;
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .case-live-component .demo-floating-menu--child.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
  }

  .case-live-component .demo-floating-menu__danger {
    border-top: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    color: var(--dk-danger, #b3311f) !important;
  }

  @container (max-width: 36rem) {
    .case-live-component .demo-menu-showcase {
      grid-template-columns: 1fr;
      justify-items: center;
      row-gap: 1.5rem;
    }
  }

  @container (max-width: 30rem) {
    .case-live-component .demo-floating-menu--child {
      inset-block-start: calc(100% + 0.5rem);
      inset-inline-start: 0;
      transform: translateY(-0.3rem) scale(0.97);
    }

    .case-live-component .demo-floating-menu--child.is-open {
      transform: translateY(0) scale(1);
    }
  }

  .case-live-component .demo-split-button {
    display: inline-flex;
    gap: 0;
    border-radius: 4px;
    box-shadow: none;
  }

  .case-live-component .demo-split-main,
  .case-live-component .demo-split-trigger {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    border: 1px solid var(--dk-cta-hover, #312d2a);
    border-radius: 0;
    background: var(--dk-cta-hover, #312d2a);
    color: var(--dk-on-strong, #fff);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .case-live-component .prototype .demo-split-main {
    min-width: 0;
    padding-inline: 1rem;
    border-right: 0;
    border-radius: 4px 0 0 4px;
  }

  .case-live-component .prototype .demo-split-trigger {
    display: grid;
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-left-color: rgb(var(--dk-surface-rgb, 255 255 255) / 0.35);
    border-radius: 0 4px 4px 0;
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    place-items: center;
    text-indent: 0;
  }

  .case-live-component .demo-menu-button-study {
    display: grid;
    grid-template-rows: auto minmax(3.25rem, auto);
    width: min(100%, 40rem);
    gap: 1.75rem;
  }

  .case-live-component .demo-menu-button-study > .demo-status {
    justify-self: center;
    width: min(100%, 32rem);
    min-block-size: 3.25rem;
    margin: 0;
    text-align: center;
  }

  .case-live-component .demo-menu-button-study__variants {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    width: 100%;
  }

  .case-live-component .demo-menu-button-variant {
    display: grid;
    min-width: 0;
    gap: 0.625rem;
    align-content: start;
    justify-items: center;
  }

  .case-live-component .demo-menu-button-variant__label {
    margin: 0;
    text-align: center;
  }

  .case-live-component .demo-menu-button-variant__control {
    width: auto;
    align-items: center;
  }

  .case-live-component .demo-menu-button-variant .demo-split-button,
  .case-live-component .demo-menu-button-variant .demo-menu-trigger {
    width: auto;
  }

  .case-live-component .prototype .demo-menu-button-variant .demo-split-main {
    min-width: 0;
    flex: 0 0 auto;
    padding-inline: 1rem;
  }

  .case-live-component .demo-menu-trigger {
    display: grid;
    min-width: 0;
    grid-template-columns: auto 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--dk-cta-hover, #312d2a);
    border-radius: 4px;
    background: var(--dk-cta-hover, #312d2a);
    color: var(--dk-on-strong, #fff);
    font-size: 0.75rem;
    text-align: left;
  }

  .case-live-component .demo-menu-trigger > span:first-child {
    min-width: 0;
    padding-inline: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .case-live-component .demo-menu-trigger .demo-menu-button__icon {
    width: 44px;
    height: 42px;
    border-left: 1px solid rgb(var(--dk-surface-rgb, 255 255 255) / 0.12);
  }

  .case-live-component .prototype .demo-menu-trigger--menu-only {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 1rem;
  }

  .case-live-component .prototype .demo-menu-trigger--menu-only > span:first-child {
    padding-inline: 0;
  }

  .case-live-component .prototype .demo-menu-trigger--menu-only .demo-menu-button__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-left: 0;
  }

  .case-live-component .demo-menu-button__icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
  }

  .case-live-component .demo-menu-button__icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .case-live-component .demo-layout-editor {
    width: min(100%, 48rem);
    gap: 12px;
  }

  .case-live-component .demo-layout-editor__shell {
    display: grid;
    width: 100%;
    min-height: 16rem;
    grid-template-columns: 8rem minmax(12rem, 1fr) 8.75rem;
    overflow: hidden;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.25);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.08);
  }

  .case-live-component .demo-layout-editor__nav,
  .case-live-component .demo-layout-editor__inspector {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 12px;
    background: var(--dk-surface-subtle, #fbf9f8);
    font-size: 0.75rem;
  }

  .case-live-component .demo-layout-editor__nav {
    border-right: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
  }

  .case-live-component .demo-layout-editor__inspector {
    border-left: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
  }

  .case-live-component .demo-layout-editor__rail-heading {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .case-live-component .demo-layout-editor__rail-heading b,
  .case-live-component .demo-layout-editor__inspector > b {
    color: var(--dk-ink, #161513);
    font-size: 0.75rem;
  }

  .case-live-component .demo-layout-editor__nav-item {
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: left;
  }

  .case-live-component .demo-layout-editor__nav-item:hover,
  .case-live-component .demo-layout-editor__nav-item.is-selected {
    border-color: var(--dk-selected, #227e9e);
    background: var(--dk-selected-surface, #e4f1f7);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-layout-editor__work {
    display: grid;
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--dk-surface, #fff);
  }

  .case-live-component .demo-layout-toolbar {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    background: var(--dk-surface-subtle, #fbf9f8);
  }

  .case-live-component .demo-layout-tool {
    display: grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--dk-ink, #161513);
    font-size: 1rem;
    line-height: 1;
    place-items: center;
  }

  .case-live-component .demo-layout-tool:hover:not(:disabled) {
    border-color: var(--dk-selected, #227e9e);
    background: var(--dk-selected-surface, #e4f1f7);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-layout-tool:disabled {
    opacity: 0.35;
  }

  .case-live-component .demo-layout-toolbar__divider {
    width: 1px;
    height: 16px;
    margin-inline: 4px;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
  }

  .case-live-component .demo-layout-canvas {
    display: grid;
    min-height: 12rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 16px;
    background: var(--dk-surface-subtle, #fbf9f8);
  }

  .case-live-component .demo-layout-editor__nav p {
    margin: 0;
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.68rem;
    line-height: 1.45;
  }

  .case-live-component .demo-layout-image-canvas {
    display: grid;
    min-height: 12rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    padding: 3.75rem 1rem 1rem;
    overflow: visible;
    background: var(--dk-surface-subtle, #fbf9f8);
  }

  .case-live-component .layout-image-card-wrap {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
  }

  .case-live-component .layout-image-toolbar {
    position: absolute;
    z-index: 2;
    bottom: calc(100% + 0.75rem);
    left: 50%;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.25);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.12);
    transform: translateX(-50%);
  }

  .case-live-component .layout-image-card-wrap.is-selected .layout-image-toolbar {
    display: flex;
  }

  .case-live-component .layout-image-toolbar .demo-layout-tool {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .case-live-component .layout-image-toolbar .demo-layout-toolbar__divider {
    flex: 0 0 1px;
    margin-inline: 2px;
  }

  .case-live-component .layout-image-card {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: 2px;
    overflow: visible;
    border: 0;
    border-radius: 2px;
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
    cursor: pointer;
  }

  .case-live-component .layout-image-card__inner {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: var(--dk-surface-muted, #eee);
  }

  .case-live-component .layout-image-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .case-live-component .layout-image-card__label {
    position: absolute;
    right: 6px;
    bottom: 6px;
    left: 6px;
    z-index: 1;
    overflow: hidden;
    padding: 4px 6px;
    border-radius: 2px;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.78);
    color: var(--dk-on-strong, #fff);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .case-live-component .layout-image-card.is-selected::after {
    position: absolute;
    inset: -6px;
    border: 2px solid var(--dk-selected, #227e9e);
    border-radius: 4px;
    content: "";
    pointer-events: none;
  }

  .case-live-component .layout-image-card:focus-visible {
    outline: 1px dashed var(--dk-ink, #161513);
    outline-offset: 8px;
  }

  .case-live-component .layout-image-card-wrap.is-reordering .layout-image-card {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgb(0 0 0 / 0.18);
    opacity: 0.9;
  }

  .case-live-component .layout-region {
    display: grid;
    min-height: 5.25rem;
    align-content: space-between;
    padding: 12px;
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
    cursor: grab;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  }

  .case-live-component .layout-region small {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.68rem;
    font-weight: 400;
  }

  .case-live-component .layout-region.is-selected {
    box-shadow: 0 0 0 2px var(--dk-selected, #227e9e), inset 0 0 0 2px var(--dk-selected-surface, #e4f1f7);
  }

  .case-live-component .layout-region:focus-visible {
    outline: 1px dashed var(--dk-ink, #161513);
    outline-offset: 6px;
  }

  .case-live-component .layout-region.is-dragging {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgb(0 0 0 / 0.18);
    cursor: grabbing;
    opacity: 0.9;
  }

  .case-live-component .layout-insertion-target {
    display: grid;
    min-height: 2.5rem;
    grid-column: span 2;
    place-items: center;
    gap: 0.35rem;
    border: 1px dashed rgb(var(--dk-selected-rgb, 34 126 158) / 0.72);
    border-radius: 4px;
    background: transparent;
    color: var(--dk-selected, #227e9e);
    font-size: 0.72rem;
    font-weight: 600;
    transition: background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  }

  .case-live-component .layout-insertion-target.is-drop-target,
  .case-live-component .layout-insertion-target:hover {
    border-color: var(--dk-selected, #227e9e);
    background: var(--dk-selected-surface, #e4f1f7);
    box-shadow: inset 0 0 0 1px var(--dk-selected, #227e9e);
  }

  .case-live-component .demo-layout-editor__inspector dl {
    display: grid;
    gap: 8px;
    margin: 8px 0 0;
  }

  .case-live-component .demo-layout-editor__inspector dl > div {
    display: grid;
    gap: 2px;
  }

  .case-live-component .demo-layout-editor__inspector dt {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.65rem;
  }

  .case-live-component .demo-layout-editor__inspector dd {
    margin: 0;
    color: var(--dk-ink, #161513);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .case-live-component .demo-toolbar {
    gap: 24px;
  }

  .case-live-component .demo-toolbar-controls {
    width: fit-content;
    min-height: 44px;
    justify-self: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
  }

  .case-live-component .demo-toolbar > .demo-status {
    justify-self: center;
    margin: 0;
    text-align: center;
  }

  .case-live-component .demo-toolbar-controls button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-toolbar-controls button[aria-pressed="true"] {
    background: var(--dk-selected-surface, #e4f1f7);
    box-shadow: inset 0 0 0 1px var(--dk-selected, #227e9e);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-toolbar-divider {
    width: 1px;
    height: 16px;
    margin-inline: 4px;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
  }

  .case-live-component .demo-tabset {
    width: min(100%, 38rem);
  }

  .case-live-component .demo-tab-list {
    gap: 32px;
    border-bottom-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
  }

  .case-live-component .demo-tab-list button {
    min-height: 48px;
    padding: 0 4px;
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 1rem;
    font-weight: 600;
  }

  .case-live-component .demo-tab-list button.is-active,
  .case-live-component .demo-tab-list button:hover {
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-tab-list button.is-active::after {
    right: 4px;
    bottom: -1px;
    left: 4px;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--dk-ink, #000);
  }

  .case-live-component .demo-tab-panel {
    min-height: 8rem;
    padding: 20px 4px 4px;
    border: 0;
    border-radius: 0;
    background: var(--dk-surface, #fff);
  }

  .case-live-component .demo-tab-panel h4 {
    color: var(--dk-ink, #161513);
    font-size: 1rem;
    letter-spacing: 0;
  }

  .case-live-component .demo-tab-panel p {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
  }

  .case-live-component .demo-selector {
    gap: 12px;
  }

  .case-live-component .demo-selector-list,
  .ahr .demo-selector-list {
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 6px;
  }

  .case-live-component .demo-selector-row,
  .ahr .demo-selector-row {
    min-height: 48px;
    gap: 12px;
    padding: 6px 12px;
    border-bottom-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-selector-row:has(input:checked) {
    background: var(--dk-selected-surface, #e4f1f7);
  }

  .case-live-component .demo-selector-row:focus-within {
    outline: 1px dashed var(--dk-ink, #000);
    outline-offset: -2px;
  }

  .case-live-component .demo-selector-row input {
    width: 16px;
    height: 16px;
    margin: 0 10px;
    accent-color: var(--dk-selected, #227e9e);
  }

  .case-live-component .demo-conversation-card {
    padding: 16px;
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 6px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
  }

  .case-live-component .demo-avatar,
  .ahr .demo-avatar {
    width: 28px;
    height: 28px;
    background: var(--dk-selected-surface, #e4f1f7);
    color: var(--dk-ink, #161513);
    font-size: 0.55rem;
  }

  .case-live-component .demo-conversation-body,
  .case-live-component .demo-conversation-extra,
  .case-live-component .demo-conversation-author span {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
  }

  .case-live-component .demo-conversation-extra {
    border-left-color: var(--dk-selected, #227e9e);
    background: var(--dk-surface-subtle, #fbf9f8);
  }

  .case-live-component .demo-conversation {
    width: min(94%, 32rem);
    justify-self: center;
  }

  .case-live-component .demo-conversation-card {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 1.35rem;
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 0.45rem;
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.14);
  }

  /* A larger avatar, in proportion with the animated conversation item. */
  .case-live-component .demo-conversation-card > .demo-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.8125rem;
  }

  .case-live-component .demo-conversation-copy {
    display: grid;
    gap: 0.4rem;
  }

  .case-live-component .demo-conversation-author strong {
    font-size: 0.9rem;
  }

  .case-live-component .demo-conversation-author span,
  .case-live-component .demo-conversation-body {
    font-size: 0.78rem;
  }

  .case-live-component .demo-conversation-body {
    margin-top: 0;
    line-height: 1.48;
  }

  .case-live-component .demo-conversation-actions {
    margin-top: 0.35rem;
    gap: 0.6rem;
  }

  .case-live-component .demo-conversation-actions button {
    min-height: 1.6rem;
    padding: 0.1rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.74rem;
    font-weight: 500;
  }

  .case-live-component .demo-conversation-actions .demo-reaction-chip,
  .ahr .demo-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding-inline: 0.28rem;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.22);
    border-radius: 999px;
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-conversation-actions .demo-reaction-chip.is-active {
    border-color: rgb(var(--dk-selected-rgb, 34 126 158) / 0.65);
    background: var(--dk-selected-surface, #e4f1f7);
  }

  .case-live-component .demo-conversation-extra {
    margin-top: 0.2rem;
    padding: 0.75rem 0.9rem;
    border-left: 0.15rem solid var(--dk-selected, #227e9e);
    background: var(--dk-surface-subtle, #fbf9f8);
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.74rem;
    line-height: 1.5;
  }

  .case-live-component .demo-conversation-extra p {
    margin: 0;
  }

  .case-live-component .demo-conversation-extra p + p {
    margin-top: 0.35rem;
  }

  .case-live-component .demo-conversation-thread-label {
    color: var(--dk-ink, #161513);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .case-live-component .demo-conversation > .demo-status {
    width: min(100%, 32rem);
    min-height: 1.5rem;
    margin: 0.8rem auto 0;
    text-align: center;
  }

  .case-live-component .prototype--conversation-item {
    min-height: 29rem;
    min-block-size: 29rem;
  }

  .case-live-component .prototype--conversation-item .demo-conversation {
    display: grid;
    min-block-size: 19rem;
    align-content: start;
    transform: translateY(3.75rem);
    transition: transform 220ms var(--ease-out);
  }

  .case-live-component .prototype--conversation-item .demo-conversation:has(.demo-conversation-card.is-expanded) {
    transform: translateY(0.75rem);
  }

  .case-motion .redwood-preview--conversation {
    position: absolute;
    inset: 0;
    min-height: 0;
    place-items: center;
  }

  .case-live-component .demo-emobutton {
    display: grid;
    width: min(100%, 22rem);
    gap: 1.25rem;
    justify-items: center;
  }

  .case-live-component .demo-emobutton__feedback {
    position: absolute;
    z-index: 1;
    bottom: 0;
    inset-inline-start: 50%;
    display: grid;
    grid-template-columns: repeat(3, 2.75rem);
    overflow: visible;
    background: transparent;
    transform: translate(-50%, 0);
    transition: transform 180ms cubic-bezier(0.2, 0.75, 0.25, 1);
  }

  .case-live-component .demo-emobutton__feedback button {
    display: grid;
    width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rw-feedback-color, var(--rw-muted));
    transition: transform 160ms ease, filter 160ms ease;
  }

  .case-live-component .demo-emobutton__feedback button[data-feedback="Not helpful"] {
    --rw-feedback-color: var(--rw-feedback-sad);
  }

  .case-live-component .demo-emobutton__feedback button[data-feedback="Okay"] {
    --rw-feedback-color: var(--rw-feedback-neutral);
  }

  .case-live-component .demo-emobutton__feedback button[data-feedback="Helpful"] {
    --rw-feedback-color: var(--rw-feedback-happy);
  }

  .case-live-component .demo-emobutton__feedback svg {
    width: 1.75rem;
    height: 1.75rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
  }

  .case-live-component .demo-emobutton__feedback button:hover,
  .case-live-component .demo-emobutton__feedback button.is-selected {
    background: transparent;
    color: var(--rw-feedback-color);
    filter: drop-shadow(0 0.18rem 0.18rem rgb(0 0 0 / 0.16));
    transform: translateY(-0.16rem) scale(1.16);
  }

  .case-live-component .demo-emobutton__actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }

  .case-live-component .demo-emobutton__submit-wrap {
    position: relative;
    display: grid;
    min-width: 10rem;
    min-height: 44px;
    isolation: isolate;
  }

  .case-live-component .demo-emobutton__actions .demo-primary-button {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 10rem;
  }

  .case-live-component .demo-emobutton__submit-wrap:hover .demo-emobutton__feedback,
  .case-live-component .demo-emobutton__submit-wrap:focus-within .demo-emobutton__feedback {
    transform: translate(-50%, -44px);
  }

  .case-live-component .demo-emobutton__submit-wrap:hover .demo-primary-button,
  .case-live-component .demo-emobutton__submit-wrap:focus-within .demo-primary-button {
    background: var(--dk-cta-hover, #25211e);
    box-shadow: 0 0 0 2px rgb(var(--dk-selected-rgb, 34 126 158) / 0.34), 0 6px 12px rgb(0 0 0 / 0.2);
    transform: translateY(-1px);
  }

  .case-live-component .demo-visual-space {
    width: min(100%, 600px);
    min-height: 23rem;
    grid-template-columns: 8.75rem minmax(0, 1fr);
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 12px;
    background: var(--dk-map, #d7e5f3);
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.2);
  }

  .case-live-component .demo-visual-nav {
    gap: 8px;
    padding: 16px;
    border-right-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    background: var(--dk-surface-subtle, #fbf9f8);
  }

  .case-live-component .demo-visual-nav strong {
    margin-bottom: 16px;
    color: var(--dk-ink, #161513);
    font-family: "Oracle Sans", var(--font-sans);
    font-size: 1.25rem;
    font-style: normal;
  }

  .case-live-component .demo-visual-nav button {
    min-height: 36px;
    padding: 8px;
    border-radius: 4px;
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.875rem;
  }

  .case-live-component .demo-visual-nav button.is-active {
    background: var(--dk-selected-surface, #e4f1f7);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-visual-main {
    margin: 16px;
    padding: 16px;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 12px;
    background: var(--dk-surface-subtle, #fbf9f8);
  }

  .case-live-component .demo-visual-main h4 {
    color: var(--dk-ink, #161513);
    font-size: 1.25rem;
    letter-spacing: 0;
  }

  .case-live-component .demo-visual-main p,
  .case-live-component .demo-visual-card {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
  }

  .case-live-component .demo-visual-cards {
    gap: 8px;
  }

  .case-live-component .demo-visual-card,
  .case-live-component .demo-visual-card:first-child {
    min-height: 5.5rem;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
  }

  .case-guidelines {
    display: grid;
    min-width: 0;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .case-guidelines__section {
    display: grid;
    min-width: 0;
    gap: 1rem;
  }

  .case-guidelines__section + .case-guidelines__section {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgb(22 21 19 / 0.12);
  }

  .case-guidelines__section-heading {
    display: block;
  }

  .case-guidelines__section-heading .case-detail-kicker {
    margin: 0;
  }

  .case-guideline-reference,
  .case-accessibility-reference {
    display: grid;
    min-width: 0;
    gap: clamp(1.25rem, 3vw, 3rem);
  }

  .case-guideline-reference {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-accessibility-reference {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-accessibility-reference--without-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-accessibility-reference--without-responsive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-accessibility-reference--without-content.case-accessibility-reference--without-responsive {
    grid-template-columns: 1fr;
  }

  .case-guideline-reference__group,
  .case-accessibility-reference__group {
    min-width: 0;
  }

  .case-guideline-reference__group + .case-guideline-reference__group,
  .case-accessibility-reference__group + .case-accessibility-reference__group {
    padding-left: clamp(1.25rem, 3vw, 3rem);
    border-left: 1px solid rgb(22 21 19 / 0.12);
  }

  .case-guideline-reference__title,
  .case-accessibility-reference__title {
    margin: 0;
    color: rgb(22 21 19 / 0.7);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .case-guideline-reference__title + .case-detail-list,
  .case-accessibility-reference__title + .case-detail-list {
    margin-top: 0.75rem;
  }

  .case-dos-donts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border: 1px solid rgb(22 21 19 / 0.12);
    background: rgb(22 21 19 / 0.12);
  }

  .case-dos-donts__card {
    min-width: 0;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    background: #fff;
  }

  .case-dos-donts__card > p:last-child {
    margin: 0;
    color: #161513;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .case-dos-donts__card--do {
    box-shadow: inset 3px 0 0 #227e9e;
  }

  .case-dos-donts__card--dont {
    box-shadow: inset 3px 0 0 #b3311f;
  }

  .case-detail-kicker {
    margin-bottom: 0.75rem;
    color: rgb(22 21 19 / 0.7);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .case-detail-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    list-style: none;
  }

  .case-detail-list li {
    display: grid;
    grid-template-columns: 0.45rem minmax(0, 1fr);
    gap: 0.55rem;
    color: rgb(22 21 19 / 0.7);
    font-size: 0.85rem;
    line-height: 1.48;
  }

  .case-detail-list li::before {
    width: 0.25rem;
    height: 0.25rem;
    align-self: start;
    margin-top: calc(0.45em + 0.05rem);
    border-radius: 50%;
    background: #000;
    content: "";
  }

  .case-section--specs {
    display: block;
    padding: 0;
  }

  .case-section--specs > .case-section__heading {
    padding: clamp(2.5rem, 6vw, 6rem) clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 3vw, 3.5rem);
    border-bottom: 0;
  }

  .case-specification.vxd-sheet {
    --vxd-paper: var(--dk-surface, #fff);
    --vxd-paper-muted: var(--dk-surface-subtle, #fbf9f8);
    --vxd-ink: var(--dk-ink, #161513);
    --vxd-muted: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    --vxd-rule: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    --vxd-grid: rgb(var(--dk-ink-rgb, 22 21 19) / 0.055);
    --vxd-redline: var(--dk-selected, #227e9e);
    --vxd-redline-soft: var(--dk-selected-surface, #e4f1f7);
    border: 0;
    background: var(--dk-surface, #fff);
  }

  .vxd-preview__surface--emobutton {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 0;
    background: transparent;
  }

  .vxd-preview__feedback-strip {
    display: grid;
    grid-template-columns: repeat(3, 2.25rem);
    overflow: hidden;
    border: 1px solid var(--vxd-rule);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: var(--vxd-paper);
  }

  .vxd-preview__feedback-strip i {
    position: static;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-right: 1px solid var(--vxd-rule);
    border-radius: 0;
    color: var(--vxd-muted);
    font-size: 0.78rem;
  }

  .vxd-preview__feedback-strip i:last-child {
    border-right: 0;
  }

  .vxd-preview__surface--emobutton > b {
    display: grid;
    width: 100%;
    min-height: 2.75rem;
    place-items: center;
    border-radius: 0 0 4px 4px;
    background: var(--dk-cta, #3a3632);
    color: var(--dk-on-strong, #fff);
    font-size: 0.75rem;
  }

  @container (max-width: 42rem) {
    .case-live-component .demo-menu-button-study__variants {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-live-component .demo-menu-button-variant:nth-child(3) {
      grid-column: 1 / -1;
    }

    .case-live-component .demo-layout-editor__shell {
      grid-template-columns: 6.5rem minmax(10rem, 1fr) 7.25rem;
    }

    .case-live-component .demo-layout-editor__nav,
    .case-live-component .demo-layout-editor__inspector {
      padding: 8px;
    }

    .case-live-component .demo-visual-space {
      width: min(100%, 400px);
      grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .case-live-component .demo-visual-main {
      margin: 12px;
      padding: 12px;
    }
  }

  @container (max-width: 25rem) {
    .case-live-component .demo-menu-button-study__variants {
      grid-template-columns: 1fr;
    }

    .case-live-component .demo-layout-editor__shell {
      grid-template-columns: 1fr;
    }

    .case-live-component .demo-layout-editor__nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-right: 0;
      border-bottom: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    }

    .case-live-component .demo-layout-editor__rail-heading {
      width: 100%;
      margin-bottom: 0;
    }

    .case-live-component .demo-layout-editor__nav-item {
      flex: 1 1 auto;
    }

    .case-live-component .demo-layout-editor__inspector {
      grid-template-columns: auto 1fr;
      align-items: start;
      border-top: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
      border-left: 0;
    }

    .case-live-component .demo-layout-editor__inspector dl {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 0;
    }
  }

  @media (max-width: 48rem) {
    .case-section--overview {
      grid-template-columns: 1fr;
    }

    .case-dos-donts,
    .case-guideline-reference,
    .case-accessibility-reference {
      grid-template-columns: 1fr;
    }

    .case-guideline-reference,
    .case-accessibility-reference {
      gap: 1.5rem;
    }

    .case-guideline-reference__group + .case-guideline-reference__group,
    .case-accessibility-reference__group + .case-accessibility-reference__group {
      padding-top: 1.5rem;
      padding-left: 0;
      border-top: 1px solid rgb(22 21 19 / 0.12);
      border-left: 0;
    }

    .case-live-component .prototype {
      min-height: 21rem;
      padding: 1.25rem;
    }

    .case-live-component .demo-popover {
      min-width: min(200px, calc(100vw - 4rem));
    }
  }

  @media (max-width: 35rem) {
    .case-live-component .demo-visual-space {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .case-live-component .demo-visual-nav {
      display: flex;
      overflow-x: auto;
      border-right: 0;
      border-bottom: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    }

    .case-live-component .demo-visual-nav strong {
      display: none;
    }

    .case-live-component .demo-visual-nav button {
      flex: none;
    }

    .case-live-component .demo-emobutton__actions {
      align-items: stretch;
      flex-direction: column;
      width: 100%;
    }
  }

  /* Layout Editor: a focused, directly manipulable image row. */
  .case-live-component .demo-layout-editor--gallery {
    display: grid;
    width: min(100%, 42rem);
    gap: 0;
    margin-inline: auto;
  }

  .case-live-component .demo-layout-editor--gallery .demo-layout-editor__work {
    display: block;
    overflow: visible;
    background: transparent;
  }

  .case-live-component .demo-layout-editor--gallery .demo-layout-image-canvas {
    position: relative;
    min-height: 0;
    align-items: stretch;
    gap: 1.25rem;
    padding: 3.5rem 1.25rem 1.25rem;
    overflow: visible;
    background: transparent;
  }

  .case-live-component .demo-layout-editor--gallery .demo-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap {
    min-width: 0;
    aspect-ratio: 1;
    will-change: transform;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar {
    display: flex;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 4;
    gap: 2px;
    padding: 2px;
    border-color: var(--dk-selected, #227e9e);
    border-radius: 4px;
    background: var(--dk-selected, #227e9e);
    box-shadow: none;
    color: var(--dk-on-strong, #fff);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 220ms;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap:not(.is-selected) .layout-image-toolbar:hover,
  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap:not(.is-selected) .layout-image-toolbar:focus-within {
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.35);
    background: var(--dk-surface, #fff);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.12);
    color: var(--dk-ink, #161513);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap.is-selected .layout-image-toolbar {
    left: -6px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-tool {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 2px;
    color: inherit;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-tool svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-tool--overflow svg {
    fill: currentColor;
    stroke: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-tool--drag svg {
    fill: currentColor;
    stroke: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-tool--drag {
    cursor: grab;
    touch-action: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap.is-dragging .demo-layout-tool--drag {
    cursor: grabbing;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-tool:hover:not(:disabled),
  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-tool:focus-visible {
    border-color: transparent;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    color: inherit;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar .demo-layout-toolbar__divider {
    height: 14px;
    margin-inline: 0;
    background: rgb(var(--dk-surface-rgb, 255 255 255) / 0.7);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap:not(.is-selected) .layout-image-toolbar:hover .demo-layout-toolbar__divider,
  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap:not(.is-selected) .layout-image-toolbar:focus-within .demo-layout-toolbar__divider {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-toolbar__label {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding-inline: 6px;
    color: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-overflow {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    display: grid;
    min-width: 8.5rem;
    padding: 4px;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.25);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.12);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-overflow[hidden] {
    display: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-overflow button {
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 2px;
    background: transparent;
    color: var(--dk-ink, #161513);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: left;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-overflow button:hover,
  .case-live-component .demo-layout-editor--gallery .layout-image-overflow button:focus-visible {
    background: var(--dk-selected-surface, #e4f1f7);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card {
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms ease, opacity 180ms ease;
    cursor: grab;
    touch-action: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card:focus-visible {
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card.is-selected {
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.16);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card:hover:not(.is-selected) .layout-image-card__inner {
    box-shadow: inset 0 0 0 2px var(--dk-surface, #fff);
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card:hover:not(.is-selected)::after {
    position: absolute;
    inset: -4px;
    border: 1px solid var(--dk-line-strong, #d8d7d3);
    border-radius: 4px;
    content: "";
    pointer-events: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card.is-selected::after {
    inset: -6px;
    border: 2px solid var(--dk-selected, #227e9e);
    border-radius: 4px;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card:focus-visible {
    outline: 1px dashed var(--dk-ink, #161513);
    outline-offset: 6px;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-insertion-line {
    position: absolute;
    z-index: 3;
    top: var(--layout-insertion-y, 0);
    left: var(--layout-insertion-x, 0);
    width: 2px;
    height: var(--layout-insertion-height, 0);
    border-radius: 999px;
    background: var(--dk-selected, #227e9e);
    box-shadow: 0 0 0 1px rgb(var(--dk-selected-rgb, 34 126 158) / 0.14);
    pointer-events: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-insertion-line[hidden] {
    display: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap.is-dragging .layout-image-card {
    cursor: grabbing;
    opacity: 0.28;
    transform: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap.is-dragging:not(.layout-image-drag-preview) .layout-image-toolbar {
    display: none;
  }

  .layout-image-drag-preview {
    position: fixed;
    z-index: 9999;
    top: -10000px;
    left: -10000px;
    display: grid;
    padding-top: 40px;
    box-sizing: content-box;
    pointer-events: none;
  }

  .layout-image-drag-preview .layout-image-drag-preview__item {
    width: 100%;
    aspect-ratio: 1;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-drag-preview .layout-image-toolbar {
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    background: var(--dk-surface, #fff);
    border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.35);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.12);
    color: var(--dk-ink, #161513);
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;
    transition: none;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-drag-preview .demo-layout-toolbar__divider {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
  }

  .layout-image-drag-preview .layout-image-card {
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.22) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .layout-image-drag-preview .layout-image-card::after {
    content: none !important;
  }

  .case-live-component .demo-layout-editor--gallery .layout-image-card-wrap.is-reordering .layout-image-card {
    transform: translateY(-2px);
  }
}

@layer utilities {
  .site-rail__content {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .site-rail__nav-group {
    width: 100%;
  }

  .rail-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: var(--space-4);
    padding-bottom: 0.15rem;
    border-bottom: 1px solid currentColor;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.84;
    transition: color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
  }

  .rail-direction[hidden] {
    display: none;
  }

  .rail-direction:hover,
  .rail-direction:focus-visible {
    color: var(--color-ink);
    opacity: 1;
  }

  .rail-direction:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 0.25rem;
  }

  @media (min-width: 64.0625rem) {
    .site-home {
      --rail-width: clamp(15rem, 22vw, 20rem);
      --content-max: 73.3125rem;
    }

    .site-home .site-header {
      top: 0;
      left: 0;
      transform: none;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      width: var(--rail-width);
      min-height: 100svh;
      height: 100svh;
      padding: clamp(2rem, 4vw, 4rem);
      border-right: 0;
    }

    .site-home .site-header::before {
      inset: 0;
      background: transparent !important;
    }

    .site-rail__content {
      display: grid;
      align-content: center;
      height: 100%;
    }

    .site-rail__nav-group {
      position: relative;
    }

    .rail-direction {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: var(--space-7);
    }

    .site-home main {
      margin-left: var(--rail-width);
    }

    /* The footer centers on the content column, not the whole page. */
    .site-home .site-footer {
      padding-left: calc(var(--rail-width) + var(--page-gutter));
    }

    /* Equal side columns keep "Back to the top" on the exact center. */
    .site-home .site-footer__bottom {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    .site-home .site-footer__bottom > :first-child {
      justify-self: end;
    }

    .site-home .site-footer__bottom > :last-child {
      justify-self: start;
    }

    .site-home .hero-band {
      position: relative;
      z-index: 0;
      background: transparent;
    }

    .site-home .hero-band::before {
      position: absolute;
      z-index: 0;
      top: 0;
      right: 0;
      bottom: 0;
      left: calc(var(--rail-width) * -1);
      background: var(--color-hero);
      content: "";
    }

    .site-home .hero {
      position: relative;
      z-index: 1;
    }

    .site-nav {
      display: grid;
      gap: var(--space-4);
      width: 100%;
      margin-top: 0;
    }

    .site-nav__folder,
    .site-nav__project {
      display: flex;
      align-items: center;
      min-width: 0;
      color: var(--color-ink);
      font-weight: 650;
      text-align: left;
    }

    .site-nav__folder {
      gap: var(--space-2);
      padding: 0;
      background: transparent;
      font-size: 1.3rem;
    }

    .site-nav__chevron {
      width: 0.8em;
      color: var(--color-ink);
      font-size: 0.8em;
      transition: transform var(--motion-fast) var(--ease-out);
    }

    .site-nav__folder[aria-expanded="true"] .site-nav__chevron {
      transform: rotate(90deg);
    }

    /* Items carry their own spacing (half the old gap above and below)
       so a collapsing item can shrink to nothing without leaving a gap. */
    .site-nav__children {
      --nav-clip-room: 1rem;
      display: grid;
      margin-block: calc(var(--space-3) / -2 - var(--nav-clip-room));
      margin-left: 0.35rem;
      padding-block: var(--nav-clip-room);
      padding-left: var(--space-4);
      /* The tree line, drawn as a background so it skips the clip room. */
      background: linear-gradient(rgb(22 24 21 / 0.18), rgb(22 24 21 / 0.18)) 0 50% / 1px calc(100% - 2 * var(--nav-clip-room)) no-repeat;
      /* Clipped top and bottom only, for the fold; hover extras (the Spotify
         React wink, the WACK burst) can spill out the sides. The padding gives
         taller hovers (the Alboms badge) room so a lone open item isn't cut. */
      overflow: visible clip;
      /* The clip room overlaps the folder button; let clicks through to it. */
      pointer-events: none;
    }

    .site-nav__children > * {
      pointer-events: auto;
    }

    /* The link is only as big as its text, so the hover and click area ends
       where the name does; the spacing between items is margin instead. */
    .site-nav__project {
      justify-self: start;
      max-height: 3rem;
      margin-block: calc(var(--space-3) / 2 + 0.125em);
      padding-block: 0;
      font-size: 1.125rem;
      font-weight: 600;
      line-height: 1.25;
      color: var(--color-ink);
      transition:
        max-height 360ms var(--ease-out),
        margin 360ms var(--ease-out),
        opacity 220ms var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        visibility 0s linear 0s;
    }

    /* Collapsed like a file tree: the other projects fold away and only the
       open one stays listed under the folder. */
    .site-nav__children.is-collapsed > :not(.is-open-project) {
      max-height: 0;
      margin-block: 0;
      opacity: 0;
      visibility: hidden;
      transition:
        max-height 360ms var(--ease-out),
        margin 360ms var(--ease-out),
        opacity 160ms var(--ease-out),
        visibility 0s linear 360ms;
    }

    .site-nav__project:not([data-work-link]):hover,
    .site-nav__project:not([data-work-link]):focus-visible,
    .site-nav__project:not([data-work-link]):active {
      color: var(--color-ink-hover);
    }

    .site-nav__project[data-work-link]:hover,
    .site-nav__project[data-work-link]:focus-visible,
    .site-nav__project[data-work-link]:active,
    .site-nav__project[data-work-link].is-current {
      color: var(--color-accent-deep);
      font-weight: 600;
    }
  }

  @media (min-width: 96.0625rem) {
    .site-home .hero__copy {
      display: block;
      padding-right: 0;
    }

    .site-home .hero__text {
      width: min(100%, 47.52rem);
    }
  }

  .site-menu-toggle {
    display: none;
  }

  /* Small screens: the rail folds into a menu button; the project list opens as a full-screen sheet. */
  @media (max-width: 64rem) {
    .site-menu-toggle {
      position: absolute;
      z-index: 2;
      top: var(--space-3);
      right: 0;
      display: grid;
      place-items: center;
      width: 2.75rem;
      height: 2.75rem;
      padding: 0;
      border: 1px solid var(--color-line);
      border-radius: 50%;
      background: var(--color-white);
      color: var(--color-ink);
    }

    /* Three bars: the span is the middle one; the outer two cross into an X when open. */
    .site-menu-toggle span,
    .site-menu-toggle span::before,
    .site-menu-toggle span::after {
      display: block;
      width: 1.125rem;
      height: 2px;
      border-radius: 1px;
      background: currentColor;
      transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
    }

    .site-menu-toggle span {
      position: relative;
    }

    .site-menu-toggle span::before,
    .site-menu-toggle span::after {
      position: absolute;
      left: 0;
      content: "";
    }

    .site-menu-toggle span::before {
      transform: translateY(-0.375rem);
    }

    .site-menu-toggle span::after {
      transform: translateY(0.375rem);
    }

    .site-menu-toggle[aria-expanded="true"] span {
      background: transparent;
    }

    .site-menu-toggle[aria-expanded="true"] span::before {
      transform: rotate(45deg);
    }

    .site-menu-toggle[aria-expanded="true"] span::after {
      transform: rotate(-45deg);
    }

    .site-menu-toggle:focus-visible {
      outline: 2px solid var(--color-ink);
      outline-offset: 0.2rem;
    }

    .site-home .site-header .site-rail__content {
      position: absolute;
      z-index: 1;
      top: 0;
      left: calc(50% - 50vw);
      display: none;
      align-items: flex-start;
      box-sizing: border-box;
      width: 100vw;
      height: 100dvh;
      padding: 5.5rem var(--page-gutter) var(--space-7);
      overflow-y: auto;
      background: var(--color-white);
    }

    .site-home .site-header.is-menu-open .site-rail__content {
      display: flex;
    }

    :root.is-menu-open {
      overflow: hidden;
    }

    .site-nav {
      display: grid;
      gap: var(--space-4);
      width: 100%;
    }

    /* The folder is only a label here: the list is always open. */
    .site-nav__folder {
      padding: 0;
      background: transparent;
      color: var(--color-ink-muted);
      font-size: var(--text-sm);
      font-weight: 650;
      text-align: left;
      pointer-events: none;
    }

    .site-nav__chevron {
      display: none;
    }

    .site-nav__children {
      display: grid;
      gap: var(--space-4);
    }

    .site-nav__project {
      display: flex;
      align-items: center;
      justify-self: start;
      color: var(--color-ink);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.25;
    }
  }

  :root[data-theme="dark"] .site-menu-toggle,
  :root[data-theme="dark"] .site-home .site-header .site-rail__content {
    background: var(--color-hero);
  }
}

@layer tokens {
  :root {
    --color-canvas: #f4f3ed;
    --color-canvas-soft: #ecece3;
    --color-surface: #fbfaf6;
    --color-ink: #161815;
    --color-ink-hover: color-mix(in srgb, var(--color-ink) 82%, var(--color-white));
    --color-ink-body-muted: #5e625b;
    --color-ink-muted: var(--color-ink-body-muted);
    --color-line: rgba(22, 24, 21, 0.17);
    --color-line-strong: rgba(22, 24, 21, 0.44);
    --color-accent: #f05216;
    --color-accent-deep: #ad3900;
    --color-accent-soft: #ffd0be;
    --color-hero: #ff9903;
    --color-lime: var(--color-accent);
    --color-lilac: #c9b6ff;
    --color-coral: #ff7a1a;
    --color-sky: #9fc7ff;
    --color-sand: #f6c870;
    --color-slate: #40574d;
    --color-atomic: var(--color-accent);
    --color-composite: #cdb9ff;
    --color-success: #1d7253;
    --color-danger: #a93937;
    --color-white: #ffffff;

    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 1rem;
    --text-md: clamp(1.05rem, 1.2vw, 1.25rem);
    --text-lg: clamp(1.3rem, 1.8vw, 1.7rem);
    --text-xl: clamp(2.2rem, 4.4vw, 5.1rem);
    --text-hero: clamp(3.8rem, 8.8vw, 9.1rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --page-gutter: clamp(1rem, 4.25vw, 4.5rem);
    --content-max: 76rem;
    --content-grid-gap: clamp(1rem, 2vw, 2rem);
    --radius-xs: 0.3rem;
    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;
    --shadow-float: 0 1.2rem 3.4rem rgba(21, 26, 21, 0.11);
    --shadow-small: 0 0.35rem 1rem rgba(21, 26, 21, 0.12);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --motion-fast: 180ms;
    --motion-base: 350ms;
    --motion-slow: 900ms;
    --header-height: 9rem;
  }
}

@layer base {
  body {
    min-width: 20rem;
    overflow-x: hidden;
    background: #ffffff;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  body:has(.case-dialog[open]) {
    overflow: hidden;
  }

  ::selection {
    background: var(--color-lime);
    color: var(--color-ink);
  }

  :focus-visible {
    outline: 0.18rem solid var(--color-ink);
    outline-offset: 0.2rem;
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.93;
  }

  h1,
  h2 {
    font-family: var(--font-display);
  }

  h1 em,
  h2 em {
    color: var(--color-slate);
    font-weight: 400;
  }

  p {
    text-wrap: pretty;
  }

  .skip-link {
    position: fixed;
    z-index: 100;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transform: translateY(-200%);
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: var(--color-white);
    font-size: var(--text-sm);
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@layer layout {
  .section-shell {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max));
    margin-inline: auto;
  }

  .site-header {
    position: sticky;
    z-index: 60;
    top: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-4);
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max));
    min-height: var(--header-height);
    margin-inline: auto;
    padding-block: var(--space-4);
    border-bottom: 1px solid transparent;
    transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), backdrop-filter var(--motion-base) var(--ease-out);
  }

  .site-header.is-scrolled {
    border-color: var(--color-line);
    background: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(1rem);
  }

  .site-home .site-header {
    border-bottom: 0;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max));
    min-height: var(--header-height);
    margin: 0;
    padding-block: var(--space-4);
    background: transparent;
    backdrop-filter: none;
  }

  .site-home .site-header::before {
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    background: var(--color-hero);
    content: "";
    transition: background var(--motion-base) var(--ease-out);
  }

  .site-home .site-header.is-scrolled {
    border-color: transparent;
    background: transparent;
    backdrop-filter: none;
  }

  .site-home .site-header.is-scrolled:not(.is-over-hero)::before {
    background: #ffffff;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: -0.03em;
  }

  .brand__mark {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
  }

  .brand__spiral {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .brand__mark--wordmark {
    width: clamp(10rem, 14vw, 14rem);
    height: auto;
  }

  .brand__wordmark {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (min-width: 64.0625rem) {
    .site-home .brand__mark:not(.brand__mark--wordmark) {
      width: clamp(4rem, 4.5vw, 5rem);
      height: clamp(4rem, 4.5vw, 5rem);
    }

  }

  .footer-links a {
    position: relative;
  }

  .footer-links a::after {
    position: absolute;
    right: 0;
    bottom: -0.25rem;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    background: currentColor;
    content: "";
    transition: transform var(--motion-base) var(--ease-out);
  }

  .footer-links a:hover::after,
  .footer-links a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .header-note {
    justify-self: end;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
  }

  .hero-band {
    background: var(--color-hero);
  }

  .site-home .hero {
    display: grid;
    min-block-size: 100svh;
    grid-template-areas:
      "copy";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: center;
    align-items: start;
    row-gap: clamp(var(--space-5), 3vw, var(--space-7));
    padding-block: clamp(1.8rem, 4vh, 3.25rem) clamp(2rem, 4vh, 3.5rem);
    scroll-margin-block-start: 0;
  }

  @media (min-width: 64.0625rem) {
    .site-home .hero.section-shell {
      grid-template-areas: none;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: auto;
      align-content: center;
      align-items: start;
      column-gap: var(--content-grid-gap);
      row-gap: clamp(var(--space-5), 3vw, var(--space-7));
    }

    .site-home .hero__copy {
      grid-area: auto;
      grid-column: 1 / -1;
      grid-row: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      align-items: center;
      gap: clamp(var(--space-6), 5vw, var(--space-9));
    }

    .site-home .work.section-shell {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--content-grid-gap);
    }

    .site-home .work.section-shell > .section-heading,
    .site-home .work.section-shell > .work-controls,
    .site-home .work.section-shell > .project-collections {
      grid-column: 1 / -1;
    }

    .site-home .project-grid {
      column-gap: var(--content-grid-gap);
    }
  }

  @media (min-width: 64.0625rem) and (max-width: 96rem) {
    .site-home .hero__text {
      grid-column: 1 / -1;
      justify-self: start;
      width: clamp(
        33.720625rem,
        calc(41.75936rem - 9.35417vw),
        35.12375rem
      );
    }
  }

  .hero__copy {
    grid-area: copy;
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .hero__title-row {
    --hero-title-size: clamp(2.125rem, 3.8vw, 4rem);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .hero h1 {
    max-width: 18ch;
    margin: 0;
    font-size: var(--hero-title-size);
    line-height: 1;
  }

  .hero__text {
    width: 100%;
  }

  .hero__art {
    margin: 0;
  }

  .hero__title-row .hero__art {
    flex: 0 0 var(--hero-title-size);
    width: var(--hero-title-size);
    height: var(--hero-title-size);
  }

  .hero__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }


  .hero__intro {
    max-width: none;
    width: 100%;
    color: var(--color-ink);
    font-size: clamp(1.15rem, 1.9vw, 1.85rem);
    line-height: 1.34;
    text-wrap: wrap;
  }

  .hero__intro p + p {
    margin-top: var(--space-5);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .work,
  .process,
  .about {
    padding-block: clamp(5rem, 12vw, 11rem);
  }

  .work {
    /* Keep linked work content clear of the fixed home header. */
    scroll-margin-block-start: var(--header-height);
  }

  .site-home .work {
    /* The fixed navigation is a side rail, so work links align to the canvas edge. */
    scroll-margin-block-start: 0;
  }

  .section-heading {
    display: flex;
    align-items: center;
  }

  /* The column is as wide as the title; the note contributes no width of its
     own, so its lines end where the heading does. */
  .section-heading--work {
    display: grid;
    grid-template-columns: fit-content(100%);
    align-items: start;
    gap: var(--space-4);
  }

  .work-heading__title-group {
    display: grid;
    gap: 0.35rem;
    /* Lets the intro below run a touch past the end of the heading. */
    padding-right: 2.5rem;
  }

  .work-heading__overline {
    width: fit-content;
    margin: 0;
    color: color-mix(in srgb, var(--color-ink-muted) 72%, var(--color-white));
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.55;
  }

  .section-heading h2,
  .process__intro h2,
  .about h1,
  .about h2 {
    margin-top: var(--space-4);
    font-size: var(--text-xl);
  }

  .work-heading__title {
    max-width: none;
    margin: 0 !important;
    font-size: clamp(2.6rem, 5.2vw, 5.4rem) !important;
  }

  .work-heading__title em {
    color: var(--color-danger);
  }

  .work-heading__note {
    max-width: none;
    contain: inline-size;
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .work-heading__note p {
    margin: 0;
  }

  .work-heading__note p + p {
    margin-top: var(--space-4);
  }

  .work-heading__note .work-heading__disclaimer {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-style: italic;
  }

  .work-heading__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
  }

  /* Quiet tag chips: a faint fill and no outline, so they don't read as
     buttons. */
  .work-heading__tags span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.3rem;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.05);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .work-heading__tags span::before {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--color-accent-deep);
    content: "";
  }

  .section-heading__aside,
  .process__intro > p:not(.eyebrow),
  .about__body > p:not(.eyebrow) {
    color: var(--color-ink-muted);
    font-size: var(--text-md);
    line-height: 1.55;
  }

  .work-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
  }

  .motion-preference {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
  }

  .motion-preference__copy {
    display: grid;
    gap: 0.1rem;
  }

  .motion-preference__title {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .motion-preference__hint {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .motion-preference__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .motion-preference__switch {
    display: flex;
    width: 2.75rem;
    height: 1.55rem;
    align-items: center;
    padding: 0.18rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
    transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
  }

  .motion-preference__switch span {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-ink-muted);
    transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
  }

  .motion-preference__input:checked + .motion-preference__switch {
    border-color: var(--color-ink);
    background: var(--color-ink);
  }

  .motion-preference__input:checked + .motion-preference__switch span {
    transform: translateX(1.15rem);
    background: var(--color-canvas);
  }

  .motion-preference__input:focus-visible + .motion-preference__switch {
    outline: 2px solid var(--color-ink);
    outline-offset: 0.25rem;
  }

  .project-collections {
    display: grid;
    gap: var(--space-9);
    margin-top: var(--space-7);
  }

  .process {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 10vw, 11rem);
    border-top: 1px solid var(--color-line-strong);
  }

  .process__intro {
    max-width: 34rem;
  }

  .process__intro > p:not(.eyebrow) {
    margin-top: var(--space-5);
  }

  .process-path {
    list-style: none;
    border-top: 1px solid var(--color-line);
  }

  .lab {
    padding-top: 0;
  }

  .lab__frame {
    display: grid;
    grid-template-columns: minmax(15rem, 0.31fr) minmax(0, 0.69fr);
    min-height: 42rem;
    margin-top: clamp(2.8rem, 5vw, 4.5rem);
    overflow: visible;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
    isolation: isolate;
  }

  .lab__sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-canvas-soft) 65%, var(--color-surface));
  }

  .lab__sidebar-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
  }

  .lab__canvas {
    min-width: 0;
    padding: clamp(1rem, 4vw, 3.5rem);
    position: relative;
    z-index: 2;
    overflow: visible;
  }

  .lab-demo {
    height: 100%;
    position: relative;
    z-index: 2;
    overflow: visible;
  }

  .about {
    display: block;
    border-top: 1px solid var(--color-line-strong);
  }

  .about-page {
    min-height: calc(100svh - var(--header-height));
    border-top: 0;
  }

  .about__body {
    max-width: 42rem;
  }

  .about__lead {
    margin-top: var(--space-5);
    color: var(--color-ink) !important;
    font-family: var(--font-display);
    font-size: var(--text-lg) !important;
    line-height: 1.2 !important;
  }

  .about__body > p:not(.eyebrow) + p {
    margin-top: var(--space-4);
  }

  .site-footer {
    --case-warm-accent: var(--color-hero);
    padding: var(--space-6) var(--page-gutter) clamp(3rem, 6vw, 5rem);
    background: var(--color-white);
    color: var(--color-ink);
  }

  .site-footer__bottom {
    width: min(100%, var(--content-max));
    margin-inline: auto;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-7);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

}

@layer components {
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .eyebrow span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-lime);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    gap: var(--space-3);
    padding: 0.65rem 1rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 700;
    transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  }

  .button:hover {
    transform: translateY(-0.15rem);
  }

  .button--ink {
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .button--ink:hover {
    background: var(--color-slate);
  }

  .button--outline:hover {
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-ink);
    padding-bottom: 0.12rem;
    font-size: var(--text-sm);
    font-weight: 650;
  }

  .text-link span,
  .button span {
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .text-link:hover span,
  .button:hover span {
    transform: translate(0.15rem, -0.15rem);
  }

  .filter-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
  }

  .filter-tab {
    min-height: 2.7rem;
    flex: none;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    font-weight: 650;
    transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
  }

  .filter-tab span {
    margin-left: var(--space-1);
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.64rem;
  }

  .filter-tab:hover,
  .filter-tab.is-selected {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .draft-note {
    align-self: center;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .draft-note span {
    color: var(--color-slate);
    font-size: 1.2em;
  }

  .project-collection__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .project-collection__heading h3 {
    font-size: clamp(1.85rem, 3vw, 3rem);
  }

  .project-collection__heading p {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .project-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
    container-type: inline-size;
  }

  .project-card {
    --case-accent: var(--color-atomic);
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 25rem;
    grid-column: span 4;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: 0 0.1rem 0 rgba(22, 24, 21, 0.04);
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
  }

  .project-card--wide {
    grid-column: span 8;
  }

  /* The two Agent Hub reels form a purposeful pair. Keep them side by side
     until the whole grid collapses to one column. */
  .project-card[data-project-card="ai-chat-sharing"],
  .project-card[data-project-card="ai-chat-feedback"] {
    grid-column: span 6;
  }

  /* Fill every row of the 12-column grid in reading order: atomics run
     3 · narrow + wide · wide + narrow; composites run pair · pair · full. */
  @media (min-width: 75.0625rem) {
    .project-card[data-project-card="visual-space"],
    .project-card[data-project-card="layout-editor"] {
      grid-column: span 6;
    }
  }

  .project-card[data-project-card="conversation-item"] {
    grid-column: 1 / -1;
  }

  .project-card[data-group="composites"] {
    --case-accent: var(--color-composite);
  }

  .project-card:hover {
    transform: translateY(-0.35rem);
    box-shadow: var(--shadow-float);
  }

  .project-card__motion-wrap {
    position: relative;
    min-height: 13.5rem;
    overflow: hidden;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-white);
  }

  .project-card .motion-stage::before,
  .project-card .motion-stage::after {
    content: none;
  }

  .project-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-5);
  }

  .project-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
  }

  .project-card__meta span:last-child {
    color: var(--color-ink);
  }

  .project-card h4 {
    margin-top: var(--space-3);
    font-size: clamp(1.8rem, 2.4vw, 2.8rem);
  }

  .project-card__summary {
    max-width: 28rem;
    margin-top: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .project-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-5);
  }

  .card-action {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-ink);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 700;
    transition: color var(--motion-fast) var(--ease-out);
  }

  .card-action:hover {
    color: var(--color-slate);
  }

  .card-action span {
    display: inline-block;
    transition: transform var(--motion-base) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .card-action {
      transition: color var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-out);
    }

    .card-action:hover {
      transform: translate(0.18rem, -0.1rem);
    }

    .card-action:hover span {
      transform: translate(0.16rem, -0.16rem);
    }
  }

  .card-action--quiet {
    border-bottom-color: transparent;
    color: var(--color-ink-muted);
  }

  .process-step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding: clamp(1.35rem, 2.5vw, 2.35rem) 0;
    border-bottom: 1px solid var(--color-line);
  }

  .process-step__number,
  .process-step__eyebrow {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .process-step h3 {
    margin-top: var(--space-2);
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  }

  .process-step p:not(.process-step__eyebrow) {
    max-width: 30rem;
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .process-step__glyph {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 0.9rem;
  }

  .process-step--frame:hover .process-step__glyph {
    background: var(--color-lime);
  }

  .process-step--forge:hover .process-step__glyph {
    background: var(--color-coral);
  }

  .process-step--specify:hover .process-step__glyph {
    background: var(--color-sky);
  }

  .process-step--validate:hover .process-step__glyph {
    background: var(--color-lilac);
  }

  .lab-project-tabs {
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
    overflow-y: auto;
  }

  .lab-project-tab {
    display: flex;
    min-height: 3.4rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-muted);
    text-align: left;
    transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  }

  .lab-project-tab:hover,
  .lab-project-tab.is-selected {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .lab-project-tab__name {
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .lab-project-tab__type {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    text-transform: uppercase;
  }

  .about__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-5);
  }

  .about__tags span {
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .footer-kicker {
    color: rgba(244, 243, 237, 0.68);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
  }

  .footer-email {
    display: inline-flex;
    margin-top: var(--space-4);
    border-bottom: 0.15rem solid var(--color-lime);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 7rem);
    font-style: italic;
    letter-spacing: -0.07em;
    line-height: 1;
  }

  .footer-email span {
    align-self: flex-start;
    margin-left: var(--space-3);
    color: var(--color-lime);
    font-family: var(--font-sans);
    font-size: 0.34em;
    transition: transform var(--motion-base) var(--ease-out);
  }

  .footer-email:hover span {
    transform: translate(0.3rem, -0.3rem);
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .case-dialog {
    width: min(100% - 2rem, 86rem);
    max-width: none;
    max-height: min(93svh, 62rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-lg);
    background: var(--color-canvas);
    color: var(--color-ink);
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.32);
  }

  .case-dialog::backdrop {
    background: rgba(15, 16, 15, 0.62);
    backdrop-filter: blur(0.35rem);
  }

  .case-dialog__close {
    position: sticky;
    z-index: 4;
    top: var(--space-4);
    float: right;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    margin: var(--space-4) var(--space-4) 0 0;
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(0.5rem);
  }

  .case-dialog__close span {
    position: absolute;
    width: 1rem;
    height: 1px;
    background: var(--color-ink);
    transform: rotate(45deg);
  }

  .case-dialog__close span:last-child {
    transform: rotate(-45deg);
  }

  .alternate-spec {
    --case-accent: var(--color-atomic);
  }

  .alternate-spec[data-group="composites"] {
    --case-accent: var(--color-composite);
  }

  .alternate-spec__header {
    padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid var(--color-line-strong);
    background: color-mix(in srgb, var(--case-accent) 13%, var(--color-canvas));
  }

  .alternate-spec__header h2 {
    max-width: 46rem;
    margin-top: var(--space-5);
    font-size: clamp(3rem, 7vw, 6.5rem);
  }

  .alternate-spec__header > p:last-child {
    max-width: 42rem;
    margin-top: var(--space-5);
    color: var(--color-ink-muted);
    font-size: var(--text-md);
  }

  .confidentiality-banner {
    display: grid;
    grid-template-columns: minmax(9rem, 0.28fr) minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) clamp(1.25rem, 6vw, 5rem);
    border-bottom: 1px solid var(--color-line-strong);
    background: color-mix(in srgb, var(--case-accent) 20%, var(--color-surface));
  }

  .confidentiality-banner > span,
  .spec-overview span,
  .spec-schematic__header,
  .spec-kicker {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .confidentiality-banner p {
    max-width: 52rem;
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .spec-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--color-line-strong);
  }

  .spec-overview > div {
    min-height: 10rem;
    padding: clamp(1.25rem, 3.5vw, 3rem) clamp(1.25rem, 6vw, 5rem);
  }

  .spec-overview > div + div {
    border-left: 1px solid var(--color-line-strong);
  }

  .spec-overview p {
    max-width: 32rem;
    margin-top: var(--space-3);
    font-size: var(--text-md);
    line-height: 1.4;
  }

  .alternate-spec__schematic {
    padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 5rem);
    border-bottom: 1px solid var(--color-line-strong);
    background: var(--color-canvas-soft);
  }

  .spec-schematic__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .spec-schematic__blocks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .spec-schematic__block {
    display: flex;
    min-height: 6rem;
    align-items: flex-end;
    padding: var(--space-3);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.3;
  }

  .spec-schematic__block--1 {
    border-color: color-mix(in srgb, var(--case-accent) 72%, var(--color-line-strong));
    background: color-mix(in srgb, var(--case-accent) 18%, var(--color-surface));
  }

  .spec-schematic__block--2 {
    transform: translateY(1rem);
  }

  .spec-schematic__block--3 {
    transform: translateY(-0.6rem);
  }

  .alternate-spec__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--color-line-strong);
  }

  .alternate-spec__section {
    min-height: 17rem;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-canvas);
  }

  .alternate-spec__section h3 {
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .alternate-spec__list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
    list-style: none;
  }

  .alternate-spec__list li {
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr);
    gap: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .alternate-spec__list li::before {
    width: 0.35rem;
    height: 0.35rem;
    align-self: start;
    margin-top: 0.48em;
    border-radius: 50%;
    background: var(--case-accent);
    content: "";
  }

  .alternate-spec__footer {
    padding: var(--space-5) clamp(1.25rem, 6vw, 5rem);
    background: var(--color-ink);
    color: rgba(244, 243, 237, 0.72);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
  }

  /*
   * Local Redwood reference sheet
   *
   * These portfolio-safe artboards translate supplied component specs into a
   * neutral visual reference without importing proprietary product source.
   */
  .vxd-sheet {
    --vxd-paper: var(--dk-surface-subtle, #fffefa);
    --vxd-paper-muted: var(--dk-surface-muted, #f4f2eb);
    --vxd-ink: var(--dk-ink, #1b1d19);
    --vxd-muted: var(--dk-muted, #65685f);
    --vxd-rule: rgb(var(--dk-ink-rgb, 27 29 25) / 0.24);
    --vxd-grid: rgb(var(--dk-ink-rgb, 27 29 25) / 0.055);
    --vxd-redline: #d85c35;
    --vxd-redline-soft: rgba(216, 92, 53, 0.12);
    position: relative;
    isolation: isolate;
    background: var(--vxd-paper);
    color: var(--vxd-ink);
  }

  .vxd-sheet .alternate-spec__header,
  .vxd-sheet__meta {
    position: relative;
    min-height: 20rem;
    padding: clamp(4.9rem, 8vw, 7rem) clamp(1.25rem, 6vw, 5.5rem) clamp(5.25rem, 7vw, 6.5rem);
    overflow: hidden;
    border-bottom-color: var(--vxd-rule);
    background:
      linear-gradient(90deg, transparent 0, transparent 2.9rem, var(--vxd-grid) 2.9rem, var(--vxd-grid) calc(2.9rem + 1px), transparent calc(2.9rem + 1px)),
      linear-gradient(var(--vxd-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--vxd-grid) 1px, transparent 1px),
      var(--vxd-paper);
    background-size: auto, 1.5rem 1.5rem, 1.5rem 1.5rem, auto;
  }

  .vxd-sheet .alternate-spec__header::before,
  .vxd-sheet__meta::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 2.75rem;
    padding: 0 clamp(1.25rem, 6vw, 5.5rem);
    border-bottom: 1px solid var(--vxd-rule);
    background: color-mix(in srgb, var(--vxd-paper) 86%, var(--color-accent-soft));
    color: var(--vxd-ink);
    content: "ORACLE REDWOOD  /  COMPONENT REFERENCE";
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 2.75rem;
  }

  .vxd-sheet .alternate-spec__header::after,
  .vxd-sheet__meta::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    min-height: 3.5rem;
    padding: 0 clamp(1.25rem, 6vw, 5.5rem);
    border-top: 1px solid var(--vxd-rule);
    background:
      linear-gradient(90deg, var(--vxd-redline-soft) 0 23%, transparent 23% 25%, var(--vxd-paper) 25% 100%);
    color: var(--vxd-muted);
    content: "OVERVIEW\00a0\00a0\00a0 VISUAL DESIGN\00a0\00a0\00a0 INTERACTION\00a0\00a0\00a0 ACCESSIBILITY";
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 3.5rem;
    white-space: pre;
  }

  .vxd-sheet .alternate-spec__header > *,
  .vxd-sheet__meta > * {
    position: relative;
    z-index: 1;
  }

  .vxd-sheet .alternate-spec__header .eyebrow,
  .vxd-sheet__meta .eyebrow {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--vxd-rule);
    border-radius: 0.15rem 0.15rem 0 0;
    background: var(--vxd-paper);
    color: var(--vxd-muted);
    font-size: 0.62rem;
  }

  .vxd-sheet .alternate-spec__header .eyebrow span,
  .vxd-sheet__meta .eyebrow span {
    width: 0.42rem;
    height: 0.42rem;
    background: var(--vxd-redline);
  }

  .vxd-sheet .alternate-spec__header h2,
  .vxd-sheet__meta h2 {
    max-width: 56rem;
    margin-top: var(--space-5);
    color: var(--vxd-ink);
    font-family: var(--font-sans);
    font-size: clamp(2.55rem, 5.8vw, 5.25rem);
    font-weight: 760;
    letter-spacing: -0.075em;
    line-height: 0.94;
  }

  .vxd-sheet .alternate-spec__header > p:last-child,
  .vxd-sheet__meta > p:last-child {
    max-width: 45rem;
    margin-top: var(--space-5);
    color: var(--vxd-muted);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.48;
  }

  .vxd-sheet__tabs {
    position: sticky;
    z-index: 6;
    top: 0;
    display: flex;
    min-height: 3.15rem;
    align-items: stretch;
    overflow-x: auto;
    border-bottom: 1px solid var(--vxd-rule);
    background: color-mix(in srgb, var(--vxd-paper) 93%, transparent);
    box-shadow: 0 0.4rem 1rem rgb(var(--dk-ink-rgb, 27 29 25) / 0.035);
    backdrop-filter: blur(0.75rem);
    scrollbar-width: thin;
  }

  .vxd-sheet__tabs > * {
    display: inline-flex;
    min-width: max-content;
    min-height: 3.15rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem clamp(0.9rem, 2vw, 1.55rem);
    border-right: 1px solid var(--vxd-rule);
    background: transparent;
    color: var(--vxd-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .vxd-sheet__tabs > :first-child,
  .vxd-sheet__tabs > [aria-current="page"],
  .vxd-sheet__tabs > .is-active {
    position: relative;
    background: var(--vxd-redline-soft);
    color: var(--vxd-ink);
  }

  .vxd-sheet__tabs > :first-child::after,
  .vxd-sheet__tabs > [aria-current="page"]::after,
  .vxd-sheet__tabs > .is-active::after {
    position: absolute;
    right: 0.65rem;
    bottom: 0.36rem;
    left: 0.65rem;
    height: 2px;
    background: var(--vxd-redline);
    content: "";
  }

  .vxd-sheet .confidentiality-banner {
    position: relative;
    grid-template-columns: minmax(10.5rem, 0.24fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding: 1rem clamp(1.25rem, 6vw, 5.5rem) 1rem calc(clamp(1.25rem, 6vw, 5.5rem) + 0.75rem);
    border-bottom-color: var(--vxd-rule);
    border-left: 0.75rem solid var(--vxd-redline);
    background: color-mix(in srgb, var(--vxd-redline) 7%, var(--vxd-paper));
  }

  .vxd-sheet .confidentiality-banner > span {
    color: var(--vxd-ink);
    font-weight: 700;
  }

  .vxd-sheet .confidentiality-banner p {
    color: var(--vxd-muted);
  }

  .vxd-sheet .spec-overview {
    counter-reset: vxd-overview;
    border-bottom-color: var(--vxd-rule);
    background: var(--vxd-paper);
  }

  .vxd-sheet .spec-overview > div {
    position: relative;
    min-height: 11.5rem;
    padding: clamp(1.65rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 4rem) clamp(1.65rem, 4vw, 3.25rem) clamp(3.7rem, 6vw, 5.4rem);
  }

  .vxd-sheet .spec-overview > div::before {
    position: absolute;
    top: clamp(1.65rem, 4vw, 3.25rem);
    left: clamp(1.25rem, 2.2vw, 2rem);
    color: var(--vxd-redline);
    content: "0" counter(vxd-overview);
    counter-increment: vxd-overview;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .vxd-sheet .spec-overview > div + div {
    border-left-color: var(--vxd-rule);
  }

  .vxd-sheet .spec-overview span {
    color: var(--vxd-ink);
    font-weight: 700;
  }

  .vxd-sheet .spec-overview p {
    color: var(--vxd-muted);
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.5;
  }

  .vxd-sheet .alternate-spec__schematic,
  .vxd-blueprint {
    position: relative;
    isolation: isolate;
    padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 5.5rem) clamp(1.75rem, 5vw, 4.5rem);
    overflow: hidden;
    border-bottom-color: var(--vxd-rule);
    background:
      linear-gradient(90deg, transparent 0, transparent 2.9rem, var(--vxd-grid) 2.9rem, var(--vxd-grid) calc(2.9rem + 1px), transparent calc(2.9rem + 1px)),
      var(--vxd-paper-muted);
  }

  .vxd-sheet .alternate-spec__schematic::before,
  .vxd-blueprint::before {
    position: absolute;
    z-index: 0;
    top: 6.45rem;
    bottom: 2.5rem;
    left: 50%;
    width: 1px;
    background: var(--vxd-redline);
    box-shadow: 0 0 0 1px rgb(var(--dk-surface-rgb, 255 254 250) / 0.65);
    content: "";
  }

  .vxd-sheet .alternate-spec__schematic::after,
  .vxd-blueprint::after {
    position: absolute;
    z-index: 0;
    right: clamp(1.25rem, 6vw, 5.5rem);
    bottom: 1.1rem;
    left: clamp(1.25rem, 6vw, 5.5rem);
    height: 1px;
    background: var(--vxd-redline);
    box-shadow: 0 0 0 1px rgb(var(--dk-surface-rgb, 255 254 250) / 0.65);
    content: "";
  }

  .vxd-sheet .spec-schematic__header,
  .vxd-blueprint__rail {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--vxd-rule);
    background: color-mix(in srgb, var(--vxd-paper) 84%, transparent);
    color: var(--vxd-muted);
    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .vxd-sheet .spec-schematic__header::before,
  .vxd-blueprint__rail::before {
    color: var(--vxd-redline);
    content: "VxD / Visual design redlines";
  }

  .vxd-sheet .spec-schematic__header span:first-child {
    display: none;
  }

  .vxd-sheet .spec-schematic__header span:last-child {
    margin-left: auto;
  }

  .vxd-sheet .spec-schematic__blocks,
  .vxd-preview {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: clamp(17rem, 34vw, 26rem);
    place-items: center;
    margin-top: var(--space-5);
    padding: clamp(3.25rem, 7vw, 5.75rem) clamp(1.25rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem);
    overflow: hidden;
    border: 1px solid var(--vxd-rule);
    border-radius: 0;
    background:
      linear-gradient(var(--vxd-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--vxd-grid) 1px, transparent 1px),
      color-mix(in srgb, var(--vxd-paper) 84%, var(--color-accent-soft));
    background-size: 1rem 1rem, 1rem 1rem, auto;
    box-shadow: inset 0 0 0 0.35rem rgb(var(--dk-surface-rgb, 255 254 250) / 0.68);
  }

  .vxd-sheet .spec-schematic__blocks::before,
  .vxd-preview::before {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--vxd-redline);
    background: var(--vxd-paper);
    color: var(--vxd-redline);
    content: "ARTBOARD · 8 PX GRID";
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.045em;
  }

  .vxd-sheet .spec-schematic__blocks::after,
  .vxd-preview::after {
    position: absolute;
    right: 0.9rem;
    bottom: 0.85rem;
    left: 0.9rem;
    height: 0.75rem;
    border-top: 1px solid var(--vxd-redline);
    background: repeating-linear-gradient(90deg, var(--vxd-redline) 0 1px, transparent 1px 2rem);
    color: var(--vxd-redline);
    content: "0\00a0\00a0\00a0\00a0 8\00a0\00a0\00a0\00a0 16\00a0\00a0\00a0\00a0 24\00a0\00a0\00a0\00a0 32\00a0\00a0\00a0\00a0 40";
    font-family: var(--font-mono);
    font-size: 0.57rem;
    letter-spacing: 0.01em;
    line-height: 1.55;
    white-space: pre;
  }

  .vxd-sheet .spec-schematic__block {
    position: relative;
    z-index: 2;
    min-width: min(11.5rem, 100%);
    min-height: 4.75rem;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.35rem;
    transform: none;
    border: 1px solid var(--vxd-ink);
    border-radius: 0.3rem;
    background: var(--vxd-ink);
    box-shadow: 0.5rem 0.5rem 0 var(--vxd-redline-soft);
    color: var(--vxd-paper);
    font-family: var(--font-sans);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
  }

  .vxd-sheet .spec-schematic__block:nth-child(n + 2) {
    min-width: 7.75rem;
    min-height: 2.6rem;
    border-color: var(--vxd-rule);
    background: var(--vxd-paper);
    box-shadow: none;
    color: var(--vxd-ink);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
  }

  .vxd-sheet .spec-schematic__block--1,
  .vxd-sheet .spec-schematic__block--2,
  .vxd-sheet .spec-schematic__block--3 {
    transform: none;
  }

  .vxd-preview {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: 0;
  }

  .vxd-preview__surface {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: min(27rem, 100%);
    max-width: min(40rem, 100%);
    min-height: 5rem;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid var(--vxd-ink);
    border-radius: 0.4rem;
    background: var(--vxd-paper);
    box-shadow: 0.55rem 0.55rem 0 var(--vxd-redline-soft);
  }

  .vxd-preview__row,
  .vxd-preview__rail {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
  }

  .vxd-preview__row {
    justify-content: space-between;
  }

  .vxd-preview__cell {
    display: grid;
    min-width: 2.25rem;
    min-height: 2.25rem;
    place-items: center;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--vxd-rule);
    border-radius: 0.23rem;
    background: var(--vxd-paper-muted);
  }

  .vxd-preview__label {
    overflow: hidden;
    color: var(--vxd-ink);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vxd-preview__avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border: 1px solid var(--vxd-ink);
    border-radius: 50%;
    background: var(--vxd-redline-soft);
  }

  .vxd-preview__toolbar-control {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--vxd-rule);
    border-radius: 0.22rem;
    background: var(--vxd-paper);
  }

  .vxd-preview__tab {
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 2px solid transparent;
    color: var(--vxd-muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .vxd-preview__tab:first-child,
  .vxd-preview__tab.is-active {
    border-bottom-color: var(--vxd-redline);
    color: var(--vxd-ink);
  }

  .vxd-preview__chip {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--vxd-rule);
    border-radius: 999px;
    background: var(--vxd-paper);
    color: var(--vxd-ink);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .vxd-preview__canvas {
    display: grid;
    min-height: 7rem;
    align-content: start;
    gap: 0.55rem;
    padding: 0.85rem;
    border: 1px dashed var(--vxd-rule);
    background: color-mix(in srgb, var(--vxd-paper-muted) 70%, transparent);
  }

  .vxd-preview[data-vxd-type="button"] .vxd-preview__surface,
  .vxd-preview[data-vxd-type="emobutton"] .vxd-preview__surface {
    width: min-content;
    min-width: 12rem;
    grid-template-columns: max-content;
    background: var(--vxd-ink);
    color: var(--vxd-paper);
  }

  .vxd-preview[data-vxd-type="button"] .vxd-preview__label,
  .vxd-preview[data-vxd-type="emobutton"] .vxd-preview__label {
    color: var(--vxd-paper);
  }

  .vxd-preview[data-vxd-type="menu"] .vxd-preview__surface,
  .vxd-preview[data-vxd-type="menu-button"] .vxd-preview__surface {
    width: min(19rem, 100%);
  }

  .vxd-preview[data-vxd-type="menu"] .vxd-preview__row,
  .vxd-preview[data-vxd-type="menu-button"] .vxd-preview__row {
    min-height: 2.3rem;
    padding: 0 0.55rem;
    border-bottom: 1px solid var(--vxd-rule);
  }

  .vxd-preview[data-vxd-type="toolbar"] .vxd-preview__surface,
  .vxd-preview[data-vxd-type="tab-bar"] .vxd-preview__surface {
    width: min(31rem, 100%);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
  }

  .vxd-preview[data-vxd-type="selector"] .vxd-preview__surface,
  .vxd-preview[data-vxd-type="conversation-item"] .vxd-preview__surface {
    width: min(30rem, 100%);
  }

  .vxd-preview[data-vxd-type="layout-editor"] .vxd-preview__surface,
  .vxd-preview[data-vxd-type="visual-space"] .vxd-preview__surface {
    width: min(38rem, 100%);
    min-height: 14rem;
  }

  .vxd-redline {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    min-height: 1.25rem;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.3rem;
    border: 1px solid var(--vxd-redline);
    background: var(--vxd-paper);
    color: var(--vxd-redline);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }

  .vxd-redline::before {
    width: 0.75rem;
    height: 1px;
    background: var(--vxd-redline);
    content: "";
  }

  .vxd-redline[data-axis="x"],
  .vxd-redline[data-vxd-axis="horizontal"],
  .vxd-redline--horizontal {
    border-top-width: 2px;
  }

  .vxd-redline[data-axis="y"],
  .vxd-redline[data-vxd-axis="vertical"],
  .vxd-redline--vertical {
    border-left-width: 2px;
  }

  .vxd-redline[data-measure]::after {
    content: attr(data-measure);
  }

  .vxd-measurements,
  .vxd-tokens {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1px;
    margin-top: var(--space-4);
    border: 1px solid var(--vxd-rule);
    background: var(--vxd-rule);
  }

  .vxd-measurement-register {
    margin-top: var(--space-5);
  }

  .vxd-measurement-register__heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
  }

  .vxd-measurement-register__heading h4 {
    color: var(--vxd-ink);
    font-family: var(--font-sans);
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 750;
    letter-spacing: -0.045em;
  }

  .vxd-measurement-register__heading > p:last-child {
    grid-column: 2;
    max-width: 42rem;
    margin-top: var(--space-2);
    color: var(--vxd-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
  }

  .vxd-measurements > *,
  .vxd-tokens > * {
    min-height: 3.3rem;
    padding: 0.6rem 0.7rem;
    background: var(--vxd-paper);
    color: var(--vxd-muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .vxd-measurements > *::before,
  .vxd-tokens > *::before {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--vxd-redline);
    content: "DIMENSION";
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.055em;
  }

  .vxd-tokens > *::before {
    content: "TOKEN";
  }

  .vxd-sheet .alternate-spec__grid {
    gap: 1px;
    padding: 1px;
    background: var(--vxd-rule);
  }

  .vxd-sheet .alternate-spec__section {
    position: relative;
    min-height: 16.5rem;
    padding: clamp(1.45rem, 3vw, 2.7rem) clamp(1.25rem, 4vw, 3.2rem);
    background:
      linear-gradient(90deg, var(--vxd-redline-soft) 0 0.18rem, transparent 0.18rem),
      var(--vxd-paper);
  }

  .vxd-sheet .spec-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--vxd-redline);
    font-weight: 700;
  }

  .vxd-sheet .spec-kicker::after {
    width: 2rem;
    height: 1px;
    background: currentColor;
    content: "";
  }

  .vxd-sheet .alternate-spec__section h3 {
    color: var(--vxd-ink);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 750;
    letter-spacing: -0.05em;
    line-height: 1.05;
  }

  .vxd-sheet .alternate-spec__list {
    gap: 0.85rem;
    margin-top: var(--space-5);
  }

  .vxd-sheet .alternate-spec__list li {
    grid-template-columns: 1.05rem minmax(0, 1fr);
    color: var(--vxd-muted);
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .vxd-sheet .alternate-spec__list li::before {
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.39em;
    border: 1px solid var(--vxd-redline);
    border-radius: 0;
    background: var(--vxd-redline-soft);
  }

  .vxd-sheet .alternate-spec__footer {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    padding: var(--space-5) clamp(1.25rem, 6vw, 5.5rem);
    border-top: 0.25rem solid var(--vxd-redline);
    background: var(--vxd-ink);
    color: rgb(var(--dk-surface-rgb, 255 254 250) / 0.72);
  }

  /* The document chrome sits in the modal header; the artboard begins below the confidentiality note. */
  .vxd-document-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--vxd-rule);
    background: color-mix(in srgb, var(--vxd-paper) 92%, transparent);
    color: var(--vxd-muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.25;
  }

  .vxd-document-meta span {
    padding: 0.45rem 0.55rem;
    border-right: 1px solid var(--vxd-rule);
  }

  .vxd-document-meta span:last-child {
    border-right: 0;
  }

  .vxd-spec-section {
    border-bottom: 1px solid var(--vxd-rule);
    background: var(--vxd-paper);
  }

  .vxd-board {
    padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 5.5rem) clamp(1.75rem, 5vw, 4.5rem);
    background:
      linear-gradient(90deg, transparent 0, transparent 2.9rem, var(--vxd-grid) 2.9rem, var(--vxd-grid) calc(2.9rem + 1px), transparent calc(2.9rem + 1px)),
      var(--vxd-paper-muted);
  }

  .vxd-board__header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-3);
    padding: 0.55rem 0.75rem;
    background: var(--vxd-ink);
    color: var(--vxd-paper);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .vxd-blueprint {
    display: grid;
    grid-template-columns: 2.85rem minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--vxd-rule);
    border-top: 0;
    background: var(--vxd-paper);
  }

  .vxd-spec-section .vxd-blueprint::before,
  .vxd-spec-section .vxd-blueprint::after {
    display: none;
  }

  .vxd-blueprint__rail {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0.3rem;
    border: 0;
    border-right: 1px solid var(--vxd-rule);
    background: color-mix(in srgb, var(--vxd-paper-muted) 70%, var(--vxd-paper));
    color: var(--vxd-muted);
    font-size: 0.52rem;
  }

  .vxd-blueprint__rail::before {
    display: block;
    color: var(--vxd-redline);
    content: "VxD";
    writing-mode: vertical-rl;
  }

  .vxd-artboard {
    position: relative;
    min-width: 0;
    min-height: 29rem;
    margin: 0;
    overflow: hidden;
    background:
      linear-gradient(var(--vxd-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--vxd-grid) 1px, transparent 1px),
      color-mix(in srgb, var(--vxd-paper) 92%, var(--color-accent-soft));
    background-size: 1rem 1rem, 1rem 1rem, auto;
  }

  .vxd-artboard__datum {
    position: absolute;
    z-index: 0;
    inset: 1.3rem;
    border: 1px dashed color-mix(in srgb, var(--vxd-redline) 48%, transparent);
    pointer-events: none;
  }

  .vxd-artboard .vxd-preview {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    width: auto;
    min-height: 0;
    place-items: center;
    margin: 0;
    padding: 3.6rem clamp(2.75rem, 7vw, 6rem) 3.2rem;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .vxd-artboard .vxd-preview::before {
    top: 1rem;
    left: 1rem;
  }

  .vxd-artboard .vxd-preview::after {
    right: 1.2rem;
    bottom: 0.8rem;
    left: 1.2rem;
  }

  /* Case-study specs are intentionally just two annotated canvases: dimensions
     and anatomy. The component itself remains the visual source of truth. */
  .vxd-canvas-section {
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 5.5rem);
    border-bottom: 1px solid var(--vxd-rule);
    background: var(--vxd-paper);
  }

  .vxd-callout-canvas {
    position: relative;
    min-height: clamp(18rem, 35vw, 29rem);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--vxd-rule);
    background: color-mix(in srgb, var(--vxd-paper) 96%, var(--color-accent-soft));
    box-shadow: inset 0 0 0 0.7rem color-mix(in srgb, var(--vxd-paper) 72%, var(--color-accent-soft));
  }

  .vxd-callout-canvas::before {
    position: absolute;
    z-index: 0;
    inset: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--vxd-redline) 24%, transparent);
    content: "";
    pointer-events: none;
  }

  .vxd-callout-canvas .vxd-preview {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    width: auto;
    min-height: 0;
    place-items: center;
    margin: 0;
    padding: 3.6rem clamp(2.75rem, 7vw, 6rem) 3.2rem;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .vxd-callout-canvas .vxd-preview::before,
  .vxd-callout-canvas .vxd-preview::after {
    display: none;
    content: none;
  }

  .vxd-callout-canvas__caption {
    position: absolute;
    z-index: 5;
    top: 1.3rem;
    left: 1.5rem;
    margin: 0;
    color: var(--vxd-redline);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .vxd-callout-canvas--anatomy {
    min-height: clamp(17rem, 31vw, 25rem);
  }

  .vxd-anatomy-overlay {
    position: absolute;
    z-index: 4;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  .vxd-anatomy-overlay li {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--vxd-redline);
    font-family: var(--font-mono);
    font-size: clamp(0.55rem, 1vw, 0.67rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
  }

  .vxd-anatomy-overlay b {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: 1px solid var(--vxd-redline);
    border-radius: 999px;
    background: var(--vxd-paper);
  }

  .vxd-anatomy-overlay li::after {
    position: absolute;
    top: 50%;
    width: clamp(2rem, 9vw, 6rem);
    height: 1px;
    background: var(--vxd-redline);
    content: "";
  }

  .vxd-anatomy-overlay li:nth-child(1) { top: 17%; left: 7%; }
  .vxd-anatomy-overlay li:nth-child(1)::after { left: 100%; }
  .vxd-anatomy-overlay li:nth-child(2) { top: 28%; right: 7%; }
  .vxd-anatomy-overlay li:nth-child(2)::after { right: 100%; }
  .vxd-anatomy-overlay li:nth-child(3) { right: 8%; bottom: 25%; }
  .vxd-anatomy-overlay li:nth-child(3)::after { right: 100%; }
  .vxd-anatomy-overlay li:nth-child(4) { bottom: 16%; left: 8%; }
  .vxd-anatomy-overlay li:nth-child(4)::after { left: 100%; }
  .vxd-anatomy-overlay li:nth-child(5) { top: 49%; left: 5%; }
  .vxd-anatomy-overlay li:nth-child(5)::after { left: 100%; }

  .vxd-redline-overlay {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
  }

  .vxd-redline {
    max-width: 10rem;
  }

  .vxd-redline b {
    color: var(--vxd-redline);
  }

  .vxd-redline small {
    color: var(--vxd-redline);
    font-size: inherit;
  }

  .vxd-redline::after {
    position: absolute;
    top: 50%;
    width: clamp(2rem, 8vw, 6rem);
    height: 1px;
    background: var(--vxd-redline);
    content: "";
  }

  .vxd-redline--1 { top: 18%; left: 6%; }
  .vxd-redline--1::after { left: 100%; }
  .vxd-redline--2 { top: 30%; right: 6%; }
  .vxd-redline--2::after { right: 100%; }
  .vxd-redline--3 { right: 8%; bottom: 30%; }
  .vxd-redline--3::after { right: 100%; }
  .vxd-redline--4 { bottom: 17%; left: 8%; }
  .vxd-redline--4::after { left: 100%; }
  .vxd-redline--5 { bottom: 11%; left: 40%; }
  .vxd-redline--5::after { bottom: 100%; left: 50%; width: 1px; height: 2.5rem; }
  .vxd-redline--6 { top: 11%; left: 45%; }
  .vxd-redline--6::after { top: 100%; left: 50%; width: 1px; height: 2.5rem; }
  .vxd-redline--7 { top: 53%; left: 5%; }
  .vxd-redline--7::after { left: 100%; }
  .vxd-redline--8 { top: 53%; right: 5%; }
  .vxd-redline--8::after { right: 100%; }

  .vxd-board__note {
    margin-top: var(--space-3);
    color: var(--vxd-muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.45;
  }

  .vxd-measurements > div {
    display: grid;
    gap: 0.42rem;
  }

  .vxd-measurements dd {
    display: grid;
    gap: 0.35rem;
    margin: 0;
  }

  .vxd-measurements dd strong {
    color: var(--vxd-ink);
    font-size: 0.72rem;
  }

  .vxd-measurements dd span {
    color: var(--vxd-muted);
    font-size: 0.6rem;
    font-weight: 500;
  }

  .vxd-anatomy {
    display: grid;
    grid-template-columns: minmax(13rem, 0.48fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 6vw, 5rem);
    padding: clamp(1.75rem, 5vw, 4.5rem) clamp(1.25rem, 6vw, 5.5rem);
    border-top: 1px solid var(--vxd-rule);
    background: var(--vxd-paper);
  }

  .vxd-anatomy__heading h3 {
    margin-top: var(--space-3);
    color: var(--vxd-ink);
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.5vw, 2.3rem);
    font-weight: 750;
    letter-spacing: -0.055em;
    line-height: 1;
  }

  .vxd-anatomy__list {
    display: grid;
    gap: 1px;
    margin: 0;
    list-style: none;
    border: 1px solid var(--vxd-rule);
    background: var(--vxd-rule);
    counter-reset: anatomy;
  }

  .vxd-anatomy__list li {
    display: grid;
    grid-template-columns: 2.4rem minmax(8rem, 0.35fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: 0.85rem;
    background: var(--vxd-paper);
  }

  .vxd-anatomy__list li > span {
    color: var(--vxd-redline);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
  }

  .vxd-anatomy__list strong {
    color: var(--vxd-ink);
    font-size: 0.78rem;
  }

  .vxd-anatomy__list p {
    color: var(--vxd-muted);
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .vxd-preview__surface {
    color: var(--vxd-ink);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .vxd-preview__surface--button,
  .vxd-preview__surface--split {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.9rem;
    background: var(--vxd-ink);
    color: var(--vxd-paper);
  }

  .vxd-preview__surface--menu {
    width: min(16rem, 100%);
    min-height: auto;
    gap: 0;
    padding: 0.3rem;
  }

  .vxd-preview__surface--menu span {
    display: flex;
    min-height: 2rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.2rem 0.45rem;
    border-bottom: 1px solid var(--vxd-rule);
    font-size: 0.7rem;
  }

  .vxd-preview__surface--menu span:last-child { border-bottom: 0; }
  .vxd-preview__surface--menu i,
  .vxd-preview__surface--menu .is-muted { color: var(--vxd-muted); font-style: normal; }

  .vxd-preview__trigger {
    position: absolute;
    top: 28%;
    left: 25%;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.3rem;
    background: var(--vxd-ink);
    color: var(--vxd-paper);
    font-size: 1rem;
    letter-spacing: 0.08em;
  }

  .vxd-preview__surface--menu-inline { position: absolute; top: 47%; left: 51%; }

  .vxd-preview__surface--layout {
    display: grid;
    grid-template-columns: 6rem minmax(10rem, 1fr) 6.5rem;
    min-height: 13rem;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .vxd-preview__surface--layout aside,
  .vxd-preview__inspector {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding: 0.7rem;
    background: var(--vxd-paper-muted);
    font-family: var(--font-mono);
    font-size: 0.58rem;
  }

  .vxd-preview__surface--layout aside { border-right: 1px solid var(--vxd-rule); }
  .vxd-preview__inspector { border-left: 1px solid var(--vxd-rule); }
  .vxd-preview__surface--layout aside i { margin-left: auto; color: var(--vxd-redline); font-style: normal; }
  .vxd-preview__surface--layout small { color: var(--vxd-muted); font-size: inherit; }

  .vxd-preview__layout-work {
    display: grid;
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--vxd-paper);
  }

  .vxd-preview__layout-toolbar {
    display: flex;
    min-height: 2.55rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid var(--vxd-rule);
    background: var(--vxd-paper-muted);
  }

  .vxd-preview__layout-toolbar span {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 0.18rem;
    color: var(--vxd-ink);
    font-size: 0.68rem;
    line-height: 1;
  }

  .vxd-preview__layout-toolbar i {
    width: 1px;
    height: 1rem;
    margin-inline: 0.15rem;
    background: var(--vxd-rule);
  }

  .vxd-preview__canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
    gap: 0.5rem;
    padding: 0.8rem;
  }

  .vxd-preview__canvas span {
    min-height: 3.4rem;
    padding: 0.55rem;
    border: 1px solid var(--vxd-rule);
    background: var(--vxd-paper);
    font-size: 0.62rem;
  }

  .vxd-preview__canvas span.is-selected {
    box-shadow: inset 0 0 0 2px var(--vxd-redline-soft), 0 0 0 2px var(--vxd-redline);
  }

  .vxd-preview__insertion-target {
    display: grid;
    min-height: 1.8rem;
    grid-column: span 2;
    place-items: center;
    border: 1px dashed var(--vxd-redline);
    color: var(--vxd-redline);
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 700;
  }

  .vxd-preview__surface--toolbar {
    display: flex;
    width: min(27rem, 100%);
    min-height: 3.3rem;
    align-items: center;
    gap: 0.38rem;
    padding: 0.5rem;
  }

  .vxd-preview__surface--toolbar > i {
    width: 1px;
    height: 1.6rem;
    margin-inline: 0.25rem;
    background: var(--vxd-rule);
  }

  .vxd-preview__surface--tabs {
    display: flex;
    width: min(28rem, 100%);
    min-height: 3rem;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--vxd-rule);
    background: transparent;
    box-shadow: none;
  }

  .vxd-preview__surface--tabs span {
    display: flex;
    min-width: 6.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-bottom: 2px solid transparent;
    color: var(--vxd-muted);
    font-size: 0.68rem;
  }

  .vxd-preview__surface--tabs span.is-active { border-bottom-color: var(--vxd-redline); color: var(--vxd-ink); }
  .vxd-preview__surface--tabs i { font-style: normal; }
  .vxd-preview__panel { width: min(28rem, 100%); padding: 1rem; border: 1px solid var(--vxd-rule); border-top: 0; background: var(--vxd-paper); }
  .vxd-preview__panel small { display: block; margin-top: 0.35rem; color: var(--vxd-muted); font-size: 0.62rem; }

  .vxd-preview__surface--selector { width: min(30rem, 100%); min-height: auto; gap: 0; padding: 0; overflow: hidden; }
  .vxd-preview__surface--selector header,
  .vxd-preview__surface--selector > span { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 0.45rem; align-items: center; min-height: 2.45rem; padding: 0.35rem 0.65rem; border-bottom: 1px solid var(--vxd-rule); }
  .vxd-preview__surface--selector > span:last-child { border-bottom: 0; }
  .vxd-preview__surface--selector i { color: var(--vxd-muted); font-style: normal; font-size: 0.58rem; }
  .vxd-preview__surface--selector small { color: var(--vxd-muted); font-size: 0.58rem; }
  .vxd-preview__checkbox { width: 0.8rem; height: 0.8rem; border: 1px solid var(--vxd-ink); border-radius: 0.12rem; }
  .vxd-preview__checkbox.is-selected { background: var(--vxd-redline); box-shadow: inset 0 0 0 0.16rem var(--vxd-paper); }

  .vxd-preview__surface--conversation { display: grid; width: min(31rem, 100%); grid-template-columns: 2.4rem minmax(0, 1fr); align-items: start; gap: 0.7rem; }
  .vxd-preview__avatar { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; color: var(--vxd-ink); font-family: var(--font-mono); font-size: 0.55rem; }
  .vxd-preview__surface--conversation small,
  .vxd-preview__surface--conversation em { display: block; margin-top: 0.25rem; color: var(--vxd-muted); font-size: 0.58rem; font-style: normal; }
  .vxd-preview__surface--conversation p { margin-top: 0.55rem; font-size: 0.7rem; font-weight: 500; line-height: 1.45; }

  .vxd-preview__surface--emoji { display: grid; width: min(23rem, 100%); gap: 0.75rem; padding: 1rem; }
  .vxd-preview__surface--emoji p { color: var(--vxd-muted); font-size: 0.72rem; font-weight: 500; line-height: 1.45; }
  .vxd-preview__surface--emoji span { width: fit-content; padding: 0.3rem 0.55rem; border: 1px solid var(--vxd-rule); border-radius: 999px; }
  .vxd-preview__surface--emoji i { position: absolute; right: 0.8rem; bottom: 0.8rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--vxd-rule); border-radius: 50%; font-style: normal; }
  .vxd-preview__picker { position: absolute; top: 55%; right: 18%; display: flex; gap: 0.35rem; padding: 0.45rem; border: 1px solid var(--vxd-rule); background: var(--vxd-paper); box-shadow: var(--shadow-small); }
  .vxd-preview__picker span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--vxd-paper-muted); font-size: 0.76rem; }

  .vxd-preview__surface--visual-space { display: grid; width: min(35rem, 100%); min-height: 14rem; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
  .vxd-preview__surface--visual-space > aside { display: grid; align-content: start; gap: 0.4rem; padding: 0.75rem; border-right: 1px solid var(--vxd-rule); background: var(--vxd-paper-muted); font-size: 0.6rem; }
  .vxd-preview__surface--visual-space > aside strong { margin-bottom: 0.7rem; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; }
  .vxd-preview__surface--visual-space > aside .is-active { padding: 0.35rem; background: var(--vxd-ink); color: var(--vxd-paper); }
  .vxd-preview__surface--visual-space > div { padding: 0.8rem; }
  .vxd-preview__surface--visual-space header { display: flex; justify-content: space-between; gap: 0.5rem; }
  .vxd-preview__surface--visual-space header small { display: block; margin-top: 0.25rem; color: var(--vxd-muted); font-size: 0.57rem; font-weight: 500; }
  .vxd-preview__surface--visual-space header b { padding: 0.32rem 0.45rem; background: var(--vxd-ink); color: var(--vxd-paper); font-size: 0.58rem; }
  .vxd-preview__surface--visual-space nav { display: flex; gap: 0.35rem; margin-top: 0.8rem; }
  .vxd-preview__surface--visual-space nav span { padding: 0.25rem 0.4rem; border: 1px solid var(--vxd-rule); color: var(--vxd-muted); font-size: 0.55rem; }
  .vxd-preview__surface--visual-space section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.75rem; }
  .vxd-preview__surface--visual-space section i { display: block; min-height: 3.4rem; padding: 0.45rem; background: var(--vxd-paper-muted); color: var(--vxd-muted); font-size: 0.55rem; font-style: normal; }

  /* Menu Button keeps its own compact geometry within the shared annotation canvas. */
  .vxd-callout-canvas[data-vxd-type="menu-button"] {
    min-height: clamp(20rem, 26vw, 23rem);
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="menu-button"] {
    min-height: clamp(18rem, 23vw, 21rem);
  }

  .vxd-callout-canvas[data-vxd-type="menu-button"] .vxd-preview__surface--split {
    position: absolute;
    top: calc(50% - 3.75rem);
    left: 50%;
    display: flex;
    width: 11rem;
    min-width: 11rem;
    max-width: 11rem;
    min-height: 2.75rem;
    height: 2.75rem;
    gap: 0;
    padding: 0 0 0 1rem;
    transform: translateX(-50%);
  }

  .vxd-callout-canvas[data-vxd-type="menu-button"] .vxd-preview__surface--split > span {
    flex: 1;
  }

  .vxd-callout-canvas[data-vxd-type="menu-button"] .vxd-preview__surface--split > i {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-left: 1px solid rgb(var(--dk-surface-rgb, 255 255 255) / 22%);
    font-style: normal;
    line-height: 1;
  }

  .vxd-callout-canvas[data-vxd-type="menu-button"] .vxd-preview__surface--menu-inline {
    top: calc(50% - 0.5rem);
    left: 50%;
    width: 12rem;
    min-width: 12rem;
    max-width: 12rem;
    transform: translateX(-50%);
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="menu-button"] .vxd-anatomy-overlay li::after {
    width: clamp(4rem, 16vw, 11rem);
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="menu-button"] .vxd-anatomy-overlay li:nth-child(1) {
    top: 31%;
    left: 7%;
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="menu-button"] .vxd-anatomy-overlay li:nth-child(2) {
    top: 35%;
    right: 7%;
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="menu-button"] .vxd-anatomy-overlay li:nth-child(3) {
    top: 47%;
    right: 7%;
    bottom: auto;
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="menu-button"] .vxd-anatomy-overlay li:nth-child(4) {
    top: 64%;
    bottom: auto;
    left: 7%;
  }

  .vxd-callout-canvas[data-vxd-type="layout-editor"] {
    min-height: clamp(20rem, 30vw, 25rem);
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="layout-editor"] {
    min-height: clamp(19rem, 28vw, 23rem);
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="layout-editor"] .vxd-anatomy-overlay li:nth-child(1) {
    top: 46%;
    left: 5%;
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="layout-editor"] .vxd-anatomy-overlay li:nth-child(2) {
    top: 43%;
    right: 5%;
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="layout-editor"] .vxd-anatomy-overlay li:nth-child(3) {
    right: 7%;
    bottom: 19%;
  }

  .vxd-callout-canvas--anatomy[data-vxd-type="layout-editor"] .vxd-anatomy-overlay li:nth-child(4) {
    top: 25%;
    bottom: auto;
    left: 7%;
  }

  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--1 { top: 19%; left: 7%; }
  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--2 { top: 19%; right: 6%; }
  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--3 { top: 39%; right: 5%; bottom: auto; }
  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--4 { bottom: 32%; left: 6%; }
  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--5 { bottom: 16%; left: 38%; }
  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--6 { top: 36%; left: 45%; }
  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--7 { right: 5%; bottom: 24%; left: auto; }
  .vxd-callout-canvas[data-vxd-type="layout-editor"] .vxd-redline--7::after { right: 100%; left: auto; }

  .case-study {
    --case-accent: var(--color-atomic);
    --case-warm-accent: var(--color-hero);
  }

  .case-study[data-group="composites"] {
    --case-accent: var(--color-composite);
  }

  /* Case-study eyebrow markers use the portfolio hero orange, not a nearby
     accent variant, so the color story remains consistent across every study. */
  .case-study .eyebrow span {
    background: var(--case-warm-accent);
  }

  .case-hero {
    display: grid;
    inline-size: 100%;
    box-sizing: border-box;
    min-height: 31rem;
    grid-template-columns: minmax(0, 0.86fr) minmax(20rem, 1.14fr);
    gap: clamp(2rem, 6vw, 7rem);
    padding: clamp(2rem, 5vw, 5rem);
    align-items: center;
    border-bottom: 1px solid var(--color-line-strong);
    background: #fbf9f8;
  }

  .case-hero h2 {
    margin-top: var(--space-4);
    font-size: clamp(3.2rem, 7vw, 7rem);
  }

  .case-hero__lead {
    max-width: 33rem;
    margin-top: var(--space-5);
    color: var(--color-ink-muted);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.2;
  }

  .case-hero__roles {
    max-width: 33rem;
    margin-top: var(--space-4);
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.35;
  }

  .case-motion {
    position: relative;
    min-height: clamp(15rem, 24vw, 22rem);
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
  }

  .case-motion .motion-stage {
    display: grid;
    min-height: inherit;
    align-items: center;
    justify-items: center;
    padding: clamp(1rem, 3vw, 2rem);
  }

  .case-motion .redwood-preview--emoji {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .case-motion .redwood-preview--visual-space {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .case-motion .rw-menu-run,
  .case-motion .rw-menu-button-run {
    place-items: center;
  }

  .case-motion__control {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 2;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    box-shadow: var(--shadow-small);
  }

  .case-motion__control .motion-preference__title {
    font-size: var(--text-xs);
  }

  .case-motion__control .motion-preference__hint {
    font-size: 0.62rem;
  }

  .case-motion__control .motion-preference__switch {
    width: 2.3rem;
    height: 1.35rem;
  }

  .case-motion__control .motion-preference__switch span {
    width: 0.85rem;
    height: 0.85rem;
  }

  .case-motion__control .motion-preference__input:checked + .motion-preference__switch span {
    transform: translateX(0.95rem);
  }

  .case-overview {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(15rem, 0.75fr);
    gap: clamp(2rem, 7vw, 8rem);
    padding: clamp(2.5rem, 6vw, 6rem);
    border-bottom: 1px solid var(--color-line);
  }

  .case-kicker {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .case-overview h3,
  .case-section__heading h3 {
    margin-top: var(--space-3);
    font-size: clamp(1.8rem, 2.7vw, 3.1rem);
  }

  .case-overview > p {
    align-self: end;
    color: var(--color-ink-muted);
    font-size: var(--text-md);
    line-height: 1.58;
  }

  .case-section {
    display: grid;
    grid-template-columns: minmax(14rem, 0.63fr) minmax(0, 1.37fr);
    gap: clamp(2rem, 6vw, 7rem);
    padding: clamp(2.5rem, 6vw, 6rem);
    border-bottom: 1px solid var(--color-line);
  }

  .case-section__heading > p:last-child {
    max-width: 24rem;
    margin-top: var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .decision-log {
    display: grid;
    gap: var(--space-4);
  }

  .decision-card {
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-5) clamp(3rem, 5vw, 4.5rem);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .decision-card__index {
    position: absolute;
    top: var(--space-5);
    left: var(--space-4);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .decision-card__row {
    display: grid;
    grid-template-columns: 5.4rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
  }

  .decision-card__row:last-child {
    border-bottom: 0;
  }

  .decision-card__row > span {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .decision-card__row p {
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .decision-card__row--decision p {
    color: var(--color-slate);
    font-weight: 750;
  }

  .case-prototype {
    min-width: 0;
  }

  .case-prototype .prototype {
    min-height: 25rem;
    margin-top: 0;
  }

  .case-next {
    --case-warm-accent: var(--color-danger);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 6rem);
    background: #fbf9f8;
    color: var(--color-ink);
  }

  .case-next__top,
  .case-next__project {
    display: inline-flex;
    align-items: center;
    transition: transform var(--motion-base) var(--ease-out);
  }

  .case-next__top {
    justify-self: start;
    gap: var(--space-2);
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--case-warm-accent);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 650;
    text-decoration: none;
  }

  .case-next__top span {
    display: inline-block;
    color: var(--case-warm-accent);
    font-size: 1.1em;
    line-height: 1;
    transition: transform var(--motion-base) var(--ease-out);
  }

  .case-next__project {
    justify-self: end;
    gap: var(--space-3);
    border-bottom: 0.12rem solid var(--case-warm-accent);
    background: transparent;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    letter-spacing: -0.06em;
  }

  .case-next__project span {
    display: inline-block;
    color: var(--case-warm-accent);
    font-family: var(--font-sans);
    font-size: 0.42em;
    transition: transform var(--motion-base) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .case-next__top:hover {
      transform: translateY(-0.12rem);
    }

    .case-next__top:hover span {
      transform: translateY(-0.14rem);
    }

    .case-next__project:hover {
      transform: translate(0.18rem, -0.1rem);
    }

    .case-next__project:hover span {
      transform: translate(0.16rem, -0.16rem);
    }
  }
}

@layer prototypes {
  .motion-stage {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 13.5rem;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
  }

  .case-study .case-motion .motion-stage.redwood-preview--emoji {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .case-study .case-motion .motion-stage.redwood-preview--visual-space {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .motion-stage::before,
  .motion-stage::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--case-accent) 55%, transparent);
    content: "";
    filter: blur(0.1rem);
  }

  .motion-stage::before {
    top: -4rem;
    right: -3rem;
    width: 11rem;
    height: 11rem;
  }

  .motion-stage::after {
    bottom: -6rem;
    left: -5rem;
    width: 13rem;
    height: 13rem;
  }

  .motion-stage--button .motion-button__surface {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 7.25rem;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-xs);
    background: var(--color-ink);
    box-shadow: 0.35rem 0.35rem 0 var(--case-accent);
    color: var(--color-canvas);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .motion-button__spark {
    position: absolute;
    z-index: 0;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-coral);
    opacity: 0;
  }

  .motion-button__spark--one {
    transform: translate(-4rem, -2rem);
  }

  .motion-button__spark--two {
    transform: translate(4rem, 2rem);
    background: var(--color-sky);
  }

  .motion-stage--menu .motion-menu,
  .motion-stage--menu-button .motion-menu-button,
  .motion-stage--toolbar .motion-toolbar,
  .motion-stage--tabs .motion-tabs,
  .motion-stage--selector .motion-selector,
  .motion-stage--conversation .motion-conversation,
  .motion-stage--emoji .motion-emoji,
  .motion-stage--visual-space .motion-visual-space,
  .motion-stage--layout .motion-layout {
    position: relative;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-small);
  }

  .motion-menu {
    display: grid;
    width: 8rem;
    gap: 0.1rem;
    padding: 0.5rem;
    transform: translateY(-0.25rem);
  }

  .motion-menu::before {
    position: absolute;
    top: -2rem;
    right: 0.2rem;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: var(--radius-xs);
    background: var(--color-ink);
    content: "•••";
    color: var(--color-canvas);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    line-height: 1.65rem;
    text-align: center;
  }

  .motion-menu span {
    display: flex;
    height: 1.4rem;
    align-items: center;
    padding-inline: 0.4rem;
    border-radius: 0.18rem;
    background: var(--color-canvas-soft);
    color: var(--color-ink-muted);
    font-size: 0.55rem;
    font-weight: 600;
  }

  .motion-menu span:nth-child(2) {
    width: 100%;
  }

  .motion-menu span:nth-child(3) {
    background: var(--case-accent);
    color: var(--color-ink);
  }

  .motion-menu-button {
    display: flex;
    overflow: hidden;
  }

  .motion-menu-button span {
    display: grid;
    width: 5.1rem;
    height: 2.3rem;
    place-items: center;
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: 0.65rem;
    font-weight: 700;
  }

  .motion-menu-button span:last-child {
    width: 2.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
  }

  .motion-layout {
    display: grid;
    width: min(78%, 14rem);
    height: 7.5rem;
    grid-template-columns: 0.55fr 1fr;
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .motion-layout span {
    border-radius: 0.2rem;
    background: var(--color-canvas-soft);
  }

  .motion-layout span:nth-child(1) {
    grid-row: span 2;
    background: var(--color-ink);
  }

  .motion-layout span:nth-child(2) {
    background: var(--case-accent);
  }

  .motion-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .motion-toolbar span {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 0.2rem;
    background: var(--color-canvas-soft);
    font-size: 0.65rem;
    font-weight: 800;
  }

  .motion-toolbar span:nth-child(2) {
    background: var(--case-accent);
  }

  .motion-tabs {
    display: flex;
    width: min(80%, 13rem);
    gap: 0.25rem;
    padding: 0.35rem;
  }

  .motion-tabs::after {
    position: absolute;
    bottom: -0.2rem;
    left: 0.35rem;
    width: 3.5rem;
    height: 0.2rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    content: "";
  }

  .motion-tabs span {
    display: grid;
    flex: 1;
    height: 1.5rem;
    place-items: center;
    border-radius: 0.15rem;
    background: var(--color-canvas-soft);
    color: var(--color-ink-muted);
    font-size: 0.48rem;
    font-weight: 700;
  }

  .motion-tabs span:first-child {
    background: var(--case-accent);
  }

  .motion-selector {
    display: grid;
    width: min(78%, 13rem);
    gap: 0.35rem;
    padding: 0.55rem;
  }

  .motion-selector span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.25rem;
    padding-inline: 0.28rem;
    border-radius: 0.15rem;
    background: var(--color-canvas-soft);
    color: var(--color-ink-muted);
    font-size: 0.54rem;
    font-weight: 600;
  }

  .motion-selector span::before {
    width: 0.7rem;
    height: 0.7rem;
    border: 1px solid var(--color-line-strong);
    border-radius: 0.12rem;
    background: var(--color-surface);
    content: "";
  }

  .motion-selector span:nth-child(2)::before,
  .motion-selector span:nth-child(3)::before {
    border-color: var(--color-ink);
    background: var(--color-ink);
    box-shadow: inset 0 0 0 0.17rem var(--color-lime);
  }

  .motion-conversation {
    display: grid;
    width: min(82%, 14rem);
    gap: 0.45rem;
    padding: 0.55rem;
  }

  .motion-conversation::before {
    display: block;
    width: 45%;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    content: "";
  }

  .motion-conversation span {
    display: block;
    height: 1.7rem;
    border-radius: 0.35rem 0.35rem 0.35rem 0.1rem;
    background: var(--color-canvas-soft);
  }

  .motion-conversation span:last-child {
    width: 72%;
    justify-self: end;
    background: var(--case-accent);
  }

  .motion-emoji {
    display: flex;
    gap: 0.3rem;
    padding: 0.45rem;
  }

  .motion-emoji span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 0.95rem;
  }

  .motion-emoji span:nth-child(2) {
    transform: translateY(-0.7rem) rotate(-9deg);
    border-color: var(--color-ink);
    background: var(--case-accent);
    box-shadow: var(--shadow-small);
  }

  .motion-visual-space {
    display: grid;
    width: min(88%, 16rem);
    height: 8rem;
    grid-template-columns: 0.32fr 1fr;
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .motion-visual-space span {
    border-radius: 0.2rem;
    background: var(--color-canvas-soft);
  }

  .motion-visual-space span:first-child {
    background: var(--color-ink);
  }

  .motion-visual-space span:nth-child(2) {
    background: var(--case-accent);
  }

  .motion-visual-space span:nth-child(3) {
    grid-column: 2;
  }

  .lab-case {
    --case-accent: var(--color-atomic);
    display: flex;
    min-height: 100%;
    flex-direction: column;
  }

  .lab-case[data-group="composites"] {
    --case-accent: var(--color-composite);
  }

  .lab-case__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-line);
  }

  .lab-case__title-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .lab-case__index {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--case-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .lab-case h3 {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
  }

  .lab-case__summary {
    max-width: 35rem;
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .lab-case__caption {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .lab-case__caption::before {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-success);
    content: "";
  }

  .prototype {
    position: relative;
    display: grid;
    min-height: 21rem;
    place-items: center;
    margin-top: var(--space-5);
    padding: clamp(1rem, 4vw, 3rem);
    overflow: visible;
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--case-accent) 9%, var(--color-surface));
    container-type: inline-size;
  }

  .prototype::before {
    position: absolute;
    top: 0.8rem;
    left: 1rem;
    color: var(--color-ink-muted);
    content: "Interactive prototype";
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .prototype button {
    min-height: 2.65rem;
  }

  .demo-status {
    min-height: 1.25rem;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    text-align: center;
  }

  .demo-button {
    display: grid;
    width: min(100%, 28rem);
    gap: var(--space-4);
    justify-items: center;
  }

  .variant-control {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

  .variant-control button,
  .demo-small-button,
  .demo-icon-button,
  .demo-select-all,
  .demo-clear,
  .demo-filter-chip {
    min-height: 2.25rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .variant-control button.is-selected,
  .demo-filter-chip.is-active {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .demo-primary-button {
    position: relative;
    display: inline-flex;
    min-width: 10rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    overflow: hidden;
    padding: 0.65rem 1rem;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-xs);
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-sm);
    font-weight: 750;
    transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .demo-primary-button:hover:not(:disabled) {
    transform: translateY(-0.12rem);
  }

  .demo-primary-button.is-secondary {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .demo-primary-button.is-success {
    background: var(--color-success);
  }

  .demo-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.43;
  }

  .button-spinner {
    width: 0.85rem;
    height: 0.85rem;
    border: 0.12rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
  }

  .demo-popover-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    z-index: 1;
  }

  .demo-popover-wrap:has(.demo-popover.is-open) {
    z-index: 30;
  }

  .demo-overflow-trigger,
  .demo-menu-trigger,
  .demo-split-main,
  .demo-split-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-xs);
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .demo-overflow-trigger {
    min-width: 2.65rem;
    padding-inline: 0.55rem;
    letter-spacing: 0.08em;
  }

  .demo-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.5rem);
    right: 0;
    display: grid;
    width: min(15rem, calc(100vw - 4rem));
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-float);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.3rem) scale(0.97);
    transform-origin: top right;
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .demo-popover.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .demo-popover button {
    display: flex;
    min-height: 2.4rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-xs);
    background: transparent;
    font-size: var(--text-sm);
    text-align: left;
  }

  .demo-popover button:hover,
  .demo-popover button:focus-visible {
    background: var(--color-canvas-soft);
  }

  .demo-popover button span {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
  }

  .demo-popover button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .demo-split-button {
    display: flex;
    border-radius: var(--radius-xs);
    box-shadow: 0.3rem 0.3rem 0 var(--case-accent);
  }

  .demo-split-main {
    border-right: 1px solid rgb(var(--dk-surface-rgb, 255 255 255) / 0.35);
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  }

  .demo-split-trigger {
    min-width: 2.75rem;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  }

  .demo-layout-editor {
    display: grid;
    width: min(100%, 40rem);
    gap: var(--space-3);
  }

  .demo-layout-toolbar,
  .demo-toolbar-controls,
  .demo-toolbar-overflow,
  .demo-selector-actions,
  .demo-conversation-actions,
  .demo-visual-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .demo-layout-toolbar {
    justify-content: space-between;
  }

  .layout-mode-buttons {
    display: flex;
    gap: var(--space-2);
  }

  .layout-mode-buttons button {
    display: grid;
    width: 2.35rem;
    min-height: 2.2rem;
    place-items: center;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    font-size: 0.72rem;
  }

  .layout-mode-buttons button.is-selected {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .demo-layout-canvas {
    display: grid;
    min-height: 12rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-canvas-soft);
    transition: grid-template-columns var(--motion-base) var(--ease-out);
  }

  .demo-layout-canvas[data-layout="three"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-layout-canvas[data-layout="focus"] {
    grid-template-columns: 1.5fr 0.5fr;
  }

  .layout-block {
    display: flex;
    min-height: 4rem;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-3);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    font-size: var(--text-xs);
    transition: transform var(--motion-base) var(--ease-out);
  }

  .layout-block:first-child {
    background: var(--case-accent);
  }

  .layout-block button {
    align-self: flex-end;
    padding: 0;
    background: transparent;
    color: var(--color-ink-muted);
    font-size: 0.72rem;
    line-height: 1;
  }

  .demo-toolbar {
    display: grid;
    width: min(100%, 36rem);
    gap: var(--space-4);
  }

  .demo-toolbar-controls {
    justify-content: center;
    padding: var(--space-2);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .demo-toolbar-controls button {
    display: grid;
    min-width: 2.45rem;
    place-items: center;
    padding: 0.35rem;
    border-radius: var(--radius-xs);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 800;
  }

  .demo-toolbar-controls button.is-active {
    background: var(--case-accent);
  }

  .demo-toolbar-divider {
    width: 1px;
    height: 1.65rem;
    background: var(--color-line);
  }

  .demo-toolbar-overflow {
    justify-content: center;
  }

  .demo-toolbar-overflow button {
    color: var(--color-ink-muted);
  }

  .demo-tabset {
    width: min(100%, 38rem);
  }

  .demo-tab-list {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-line-strong);
    scrollbar-width: thin;
  }

  .demo-tab-list button {
    position: relative;
    min-height: 2.75rem;
    flex: none;
    padding: 0.4rem 0.75rem;
    background: transparent;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .demo-tab-list button.is-active {
    color: var(--color-ink);
  }

  .demo-tab-list button.is-active::after {
    position: absolute;
    right: 0.65rem;
    bottom: -1px;
    left: 0.65rem;
    height: 0.18rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    content: "";
  }

  .demo-tab-panel {
    min-height: 9.5rem;
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--color-surface);
  }

  .demo-tab-panel h4 {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 750;
    letter-spacing: -0.03em;
  }

  .demo-tab-panel p {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .demo-selector {
    display: grid;
    width: min(100%, 33rem);
    gap: var(--space-3);
  }

  .demo-selector-actions {
    justify-content: space-between;
  }

  .demo-selector-summary {
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .demo-selector-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .demo-selector-row {
    display: flex;
    min-height: 2.85rem;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-line);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background var(--motion-fast) var(--ease-out);
  }

  .demo-selector-row:last-child {
    border-bottom: 0;
  }

  .demo-selector-row:has(input:checked) {
    background: color-mix(in srgb, var(--case-accent) 38%, var(--color-surface));
  }

  .demo-selector-row input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--color-ink);
  }

  .demo-selector-row small {
    margin-left: auto;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .demo-conversation {
    width: min(100%, 38rem);
  }

  .demo-conversation-card {
    padding: var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .demo-conversation-topline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .demo-avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--case-accent);
    font-size: var(--text-xs);
    font-weight: 800;
  }

  .demo-conversation-author {
    display: grid;
  }

  .demo-conversation-author strong {
    font-size: var(--text-sm);
  }

  .demo-conversation-author span {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .demo-conversation-body {
    margin-top: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .demo-conversation-extra {
    display: none;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-left: 0.15rem solid var(--case-accent);
    background: var(--color-canvas-soft);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .demo-conversation-card.is-expanded .demo-conversation-extra {
    display: block;
    animation: reveal-up var(--motion-base) var(--ease-out) both;
  }

  .demo-conversation-actions {
    margin-top: var(--space-4);
  }

  .demo-conversation-actions button {
    min-height: 2.2rem;
  }

  .demo-reaction-chip.is-active {
    border-color: var(--color-ink);
    background: var(--case-accent);
  }

  .demo-emoji {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    z-index: 1;
  }

  .demo-emoji:has(.demo-emoji-picker.is-open) {
    z-index: 30;
  }

  .demo-emoji-content {
    width: min(100%, 27rem);
    padding: var(--space-4);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .demo-emoji-content p {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .demo-emoji-reactions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .demo-emoji-chip {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--text-xs);
  }

  .demo-emoji-trigger {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid var(--color-ink);
    border-radius: 50%;
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: 1.25rem;
    box-shadow: 0.25rem 0.25rem 0 var(--case-accent);
  }

  .demo-emoji-picker {
    position: absolute;
    z-index: 50;
    bottom: 3.8rem;
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-small);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.4rem) scale(0.92);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .demo-emoji-picker.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .demo-emoji-picker button {
    display: grid;
    min-width: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    font-size: 1.15rem;
  }

  .demo-emoji-picker button:hover {
    background: var(--color-canvas-soft);
  }

  .demo-visual-space {
    display: grid;
    width: min(100%, 44rem);
    min-height: 18rem;
    grid-template-columns: 8rem minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .demo-visual-nav {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-right: 1px solid var(--color-line);
    background: var(--color-canvas-soft);
  }

  .demo-visual-nav strong {
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
  }

  .demo-visual-nav button {
    min-height: 2.25rem;
    padding: 0.35rem;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    text-align: left;
  }

  .demo-visual-nav button.is-active {
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  .demo-visual-main {
    padding: var(--space-4);
  }

  .demo-visual-main header {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .demo-visual-main h4 {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .demo-visual-main p {
    margin-top: var(--space-1);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .demo-visual-controls {
    margin-top: var(--space-4);
  }

  .demo-visual-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .demo-visual-card {
    min-height: 5.5rem;
    padding: var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--color-canvas-soft);
    font-size: var(--text-xs);
  }

  .demo-visual-card:first-child {
    background: var(--case-accent);
  }

  @container (max-width: 31rem) {
    .demo-layout-toolbar,
    .demo-selector-actions {
      align-items: flex-start;
      flex-direction: column;
    }

    .demo-toolbar-divider {
      display: none;
    }

    .demo-toolbar-controls {
      justify-content: flex-start;
    }

    .demo-visual-space {
      grid-template-columns: 1fr;
    }

    .demo-visual-nav {
      display: flex;
      overflow-x: auto;
      border-right: 0;
      border-bottom: 1px solid var(--color-line);
    }

    .demo-visual-nav strong {
      display: none;
    }

    .demo-visual-nav button {
      flex: none;
    }

    .demo-visual-cards {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@layer motion {
  .motion-stage.is-playing .motion-button__surface {
    animation: button-press 2.5s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-button__spark--one {
    animation: spark-one 2.5s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-button__spark--two {
    animation: spark-two 2.5s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-menu {
    animation: menu-open 2.6s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-menu span:nth-child(3) {
    animation: selection-sweep 2.6s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-menu-button {
    animation: split-swap 2.7s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-layout span:nth-child(2) {
    animation: layout-snap 2.4s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-toolbar span:nth-child(2) {
    animation: toolbar-tap 2.5s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-tabs::after {
    animation: tab-glide 2.5s var(--ease-in-out) infinite both;
  }

  .motion-stage.is-playing .motion-selector span:nth-child(2)::before,
  .motion-stage.is-playing .motion-selector span:nth-child(3)::before {
    animation: check-pop 2.4s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-conversation span:last-child {
    animation: reply-arrive 2.5s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-emoji span:nth-child(2) {
    animation: emoji-land 2.5s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-visual-space span:first-child,
  .motion-stage.is-playing .motion-visual-space span:nth-child(2),
  .motion-stage.is-playing .motion-visual-space span:nth-child(3) {
    animation: region-assemble 2.5s var(--ease-out) infinite both;
  }

  .motion-stage.is-playing .motion-visual-space span:nth-child(2) {
    animation-delay: 120ms;
  }

  .motion-stage.is-playing .motion-visual-space span:nth-child(3) {
    animation-delay: 230ms;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes button-press {
    0%,
    18% {
      transform: translateY(0);
    }
    35% {
      transform: translate(0.32rem, 0.32rem);
      box-shadow: 0 0 0 var(--case-accent);
    }
    60% {
      background: var(--case-accent);
    }
    100% {
      transform: translateY(0);
      background: var(--color-ink);
    }
  }

  @keyframes spark-one {
    0%,
    30% {
      opacity: 0;
      transform: translate(-1rem, -0.5rem) scale(0.3);
    }
    47% {
      opacity: 1;
    }
    70%,
    100% {
      opacity: 0;
      transform: translate(-4rem, -2rem) scale(1);
    }
  }

  @keyframes spark-two {
    0%,
    30% {
      opacity: 0;
      transform: translate(1rem, 0.5rem) scale(0.3);
    }
    47% {
      opacity: 1;
    }
    70%,
    100% {
      opacity: 0;
      transform: translate(4rem, 2rem) scale(1);
    }
  }

  @keyframes menu-open {
    0%,
    16% {
      opacity: 0;
      transform: translateY(-0.8rem) scale(0.9);
    }
    38%,
    80% {
      opacity: 1;
      transform: translateY(-0.25rem) scale(1);
    }
    100% {
      opacity: 0.65;
      transform: translateY(-0.25rem) scale(0.96);
    }
  }

  @keyframes selection-sweep {
    0%,
    44% {
      transform: scaleX(0.4);
      transform-origin: left;
    }
    58%,
    100% {
      transform: scaleX(1);
      transform-origin: left;
    }
  }

  @keyframes split-swap {
    0%,
    30% {
      transform: rotate(0deg) scale(1);
    }
    48% {
      transform: rotate(-3deg) scale(1.05);
    }
    72% {
      transform: rotate(2deg) scale(1);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }

  @keyframes layout-snap {
    0%,
    22% {
      transform: translateX(0) scaleX(1);
    }
    48% {
      transform: translateX(-2.2rem) scaleX(0.68);
    }
    70%,
    100% {
      transform: translateX(0) scaleX(1);
    }
  }

  @keyframes toolbar-tap {
    0%,
    28% {
      transform: scale(1);
    }
    43% {
      transform: scale(0.78);
      background: var(--color-ink);
      color: var(--color-canvas);
    }
    68%,
    100% {
      transform: scale(1);
      background: var(--case-accent);
    }
  }

  @keyframes tab-glide {
    0%,
    20% {
      transform: translateX(0);
    }
    50%,
    75% {
      transform: translateX(4.1rem);
    }
    100% {
      transform: translateX(7.7rem);
    }
  }

  @keyframes check-pop {
    0%,
    36% {
      transform: scale(0.2) rotate(-15deg);
      opacity: 0;
    }
    54% {
      transform: scale(1.22) rotate(0deg);
      opacity: 1;
    }
    70%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes reply-arrive {
    0%,
    34% {
      opacity: 0;
      transform: translateX(2rem);
    }
    58%,
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes emoji-land {
    0%,
    25% {
      transform: translateY(-2.3rem) rotate(-23deg) scale(0.7);
      opacity: 0;
    }
    48% {
      transform: translateY(-0.7rem) rotate(8deg) scale(1.12);
      opacity: 1;
    }
    65%,
    100% {
      transform: translateY(-0.7rem) rotate(-9deg) scale(1);
    }
  }

  @keyframes region-assemble {
    0% {
      opacity: 0;
      transform: translate(0.8rem, 0.8rem) scale(0.82);
    }
    58%,
    100% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
  }

  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translateY(-0.45rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 1ms !important;
    }
  }

  html[data-motion-preference="reduced"] {
    scroll-behavior: auto;
  }

  html[data-motion-preference="reduced"] *,
  html[data-motion-preference="reduced"] *::before,
  html[data-motion-preference="reduced"] *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  html[data-motion-preference="reduced"] .hero__art {
    visibility: hidden;
  }
}

@layer utilities {
  .project-card .motion-stage::before,
  .project-card .motion-stage::after {
    content: none;
  }

  @media (max-width: 75rem) {
    .project-card,
    .project-card--wide {
      grid-column: span 6;
    }

    /* In the two-up grid, the odd card out in each section spans the row. */
    .project-card[data-project-card="emobutton"],
    .project-card[data-project-card="conversation-item"] {
      grid-column: 1 / -1;
    }

  }

  @media (max-width: 62rem) {
    .hero {
      padding-block: var(--space-6);
    }

    .process,
    .about {
      grid-template-columns: 1fr;
      gap: var(--space-7);
    }

  }

  @media (max-width: 64rem) {
    .site-home .site-header {
      min-height: auto;
      padding-block: var(--space-3);
    }

    .site-home .brand__mark:not(.brand__mark--wordmark) {
      width: 3rem;
      height: 3rem;
    }

    .site-home .brand {
      margin-top: 0;
    }

    .site-home .hero {
      grid-template-areas:
        "copy";
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      min-block-size: 100svh;
      gap: var(--space-6);
      padding-block: var(--space-7);
    }

    .site-home .hero__copy {
      display: grid;
      grid-template-areas:
        "text"
        "art";
      row-gap: var(--space-5);
    }

    .site-home .hero__text {
      grid-area: text;
      display: grid;
      grid-template-areas:
        "intro";
    }

    .site-home .hero__intro {
      font-size: clamp(1.35rem, 3vw, 1.6rem);
    }

    .site-home .hero__art {
      grid-area: art;
      width: min(100%, 32.8125rem);
    }

    .site-home .hero__actions {
      grid-area: actions;
      margin-top: 0;
    }

  }

  @media (max-width: 48rem) {
    .section-heading {
      grid-template-columns: 1fr;
    }

    .project-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .project-card,
    .project-card--wide {
      min-height: 23rem;
      grid-column: span 6;
    }

    .lab__frame {
      grid-template-columns: 1fr;
    }

    .lab__sidebar {
      border-right: 0;
      border-bottom: 1px solid var(--color-line);
    }

    .lab-project-tabs {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      padding: var(--space-2);
      scrollbar-width: thin;
    }

    .lab-project-tab {
      min-width: 8.5rem;
      flex-direction: column;
      align-items: flex-start;
    }

    .lab__canvas {
      min-height: 32rem;
    }

    .case-hero,
    .case-overview,
    .case-section {
      grid-template-columns: 1fr;
    }

    .case-hero {
      min-height: auto;
    }

    .confidentiality-banner,
    .spec-overview,
    .alternate-spec__grid {
      grid-template-columns: 1fr;
    }

    .spec-overview > div + div {
      border-top: 1px solid var(--color-line-strong);
      border-left: 0;
    }

    .spec-schematic__blocks {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vxd-sheet .alternate-spec__header,
    .vxd-sheet__meta {
      min-height: 17.5rem;
      padding-top: 4.45rem;
      padding-bottom: 4.5rem;
    }

    .vxd-sheet .alternate-spec__header::before,
    .vxd-sheet__meta::before {
      height: 2.35rem;
      font-size: 0.57rem;
      line-height: 2.35rem;
      white-space: nowrap;
    }

    .vxd-sheet .alternate-spec__header::after,
    .vxd-sheet__meta::after {
      min-height: 3rem;
      font-size: 0.55rem;
      line-height: 3rem;
      letter-spacing: 0.01em;
    }

    .vxd-sheet .alternate-spec__header h2,
    .vxd-sheet__meta h2 {
      font-size: clamp(2.35rem, 10vw, 3.9rem);
    }

    .vxd-sheet__tabs {
      min-height: 2.8rem;
    }

    .vxd-sheet__tabs > * {
      min-height: 2.8rem;
      padding-right: 0.85rem;
      padding-left: 0.85rem;
      font-size: 0.59rem;
    }

    .vxd-sheet .confidentiality-banner {
      gap: var(--space-3);
      padding-top: var(--space-4);
      padding-bottom: var(--space-4);
      border-left-width: 0.45rem;
    }

    .vxd-sheet .spec-overview > div {
      min-height: 8.5rem;
      padding-left: 3.5rem;
    }

    .vxd-sheet .alternate-spec__schematic,
    .vxd-blueprint {
      padding-bottom: 2.75rem;
    }

    .vxd-sheet .alternate-spec__schematic::before,
    .vxd-blueprint::before {
      top: 5.75rem;
      bottom: 2rem;
    }

    .vxd-sheet .alternate-spec__schematic::after,
    .vxd-blueprint::after {
      right: 1.25rem;
      bottom: 0.85rem;
      left: 1.25rem;
    }

    .vxd-sheet .spec-schematic__header,
    .vxd-blueprint__rail {
      align-items: flex-start;
      flex-direction: column;
      min-height: 0;
      font-size: 0.58rem;
    }

    .vxd-sheet .spec-schematic__header span:last-child {
      margin-left: 0;
    }

    .vxd-sheet .spec-schematic__blocks,
    .vxd-preview {
      min-height: 17rem;
      padding: 3.15rem 1.1rem 3.4rem;
    }

    .vxd-sheet .spec-schematic__blocks {
      grid-template-columns: minmax(0, 1fr);
    }

    .vxd-sheet .spec-schematic__block,
    .vxd-sheet .spec-schematic__block:nth-child(n + 2) {
      width: min(100%, 16rem);
      min-width: 0;
    }

    .vxd-preview__surface {
      min-width: 0;
      width: 100%;
      padding: 0.75rem;
    }

    .vxd-preview[data-vxd-type="button"] .vxd-preview__surface,
    .vxd-preview[data-vxd-type="emobutton"] .vxd-preview__surface {
      width: min-content;
    }

    .vxd-preview__cell {
      min-width: 1.9rem;
      min-height: 1.9rem;
      padding: 0.4rem 0.5rem;
    }

    .vxd-redline {
      max-width: calc(100% - 1rem);
      font-size: 0.52rem;
    }

    .vxd-measurements,
    .vxd-tokens {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vxd-measurement-register__heading {
      grid-template-columns: 1fr;
      row-gap: var(--space-2);
    }

    .vxd-measurement-register__heading > p:last-child {
      grid-column: auto;
      margin-top: 0;
    }

    .vxd-sheet .alternate-spec__section {
      min-height: auto;
    }
  }

  @media (max-width: 35rem) {
    :root {
      --page-gutter: 1rem;
    }

    .filter-tabs {
      width: calc(100% + var(--page-gutter));
      margin-right: calc(var(--page-gutter) * -1);
    }

    .project-card__body {
      padding: var(--space-4);
    }

    .project-card__motion-wrap {
      min-height: 12rem;
    }

    .process-step {
      grid-template-columns: 2.1rem minmax(0, 1fr);
    }

    .process-step__glyph {
      display: none;
    }

    .case-dialog {
      width: calc(100% - 1rem);
      max-height: 96svh;
      border-radius: var(--radius-md);
    }

    .case-dialog__close {
      top: var(--space-2);
      margin: var(--space-2) var(--space-2) 0 0;
    }

    .vxd-sheet .alternate-spec__header,
    .vxd-sheet__meta {
      min-height: 16.25rem;
      padding-top: 4rem;
      padding-bottom: 3.8rem;
    }

    .vxd-sheet .alternate-spec__header::before,
    .vxd-sheet__meta::before {
      padding-right: 1rem;
      padding-left: 1rem;
      font-size: 0.49rem;
      letter-spacing: 0.035em;
    }

    .vxd-sheet .alternate-spec__header::after,
    .vxd-sheet__meta::after {
      min-height: 2.65rem;
      padding-right: 1rem;
      padding-left: 1rem;
      background: var(--vxd-redline-soft);
      content: "OVERVIEW\00a0 /\00a0 VXD\00a0 /\00a0 A11Y";
      font-size: 0.52rem;
      line-height: 2.65rem;
    }

    .vxd-sheet .alternate-spec__header .eyebrow,
    .vxd-sheet__meta .eyebrow {
      min-height: 1.8rem;
      padding: 0.25rem 0.45rem;
      font-size: 0.55rem;
    }

    .vxd-sheet__tabs > * {
      padding-right: 0.7rem;
      padding-left: 0.7rem;
    }

    .vxd-preview__row,
    .vxd-preview__rail {
      gap: 0.3rem;
    }

    .vxd-preview__tab {
      padding-right: 0.45rem;
      padding-left: 0.45rem;
      font-size: 0.55rem;
    }

    .vxd-measurements,
    .vxd-tokens {
      grid-template-columns: minmax(0, 1fr);
    }

    .case-hero,
    .case-overview,
    .case-section {
      padding: var(--space-5);
    }

    .decision-card {
      padding: var(--space-5) var(--space-3) var(--space-4) 2.75rem;
    }

    .decision-card__index {
      left: var(--space-3);
    }

    .decision-card__row {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }

    .case-next {
      padding: var(--space-4) clamp(2.5rem, 6vw, 6rem);
    }

    .site-footer__bottom {
      flex-direction: column;
      align-items: center;
    }
  }

  @media (max-width: 48rem) {
    .vxd-document-meta {
      width: 100%;
      font-size: 0.56rem;
    }

    .vxd-anatomy {
      grid-template-columns: 1fr;
    }

    .vxd-board {
      padding: var(--space-4);
    }

    .vxd-board__header {
      grid-template-columns: 1fr auto;
    }

    .vxd-board__header span:nth-child(2) {
      display: none;
    }

    .vxd-blueprint {
      display: block;
      overflow-x: auto;
      border: 0;
      background: transparent;
      scrollbar-width: thin;
    }

    .vxd-blueprint__rail {
      display: none;
    }

    .vxd-artboard {
      min-width: 42rem;
      min-height: 27rem;
      border: 1px solid var(--vxd-rule);
    }

    .vxd-anatomy__list li {
      grid-template-columns: 2rem minmax(0, 1fr);
    }

    .vxd-anatomy__list p {
      grid-column: 2;
    }
  }

  @media (max-width: 35rem) {
    .vxd-document-meta span {
      padding: 0.35rem 0.4rem;
    }

    .vxd-document-meta span:nth-child(2) {
      display: none;
    }

    .vxd-board__header {
      grid-template-columns: 1fr;
    }

    .vxd-board__header span:nth-child(3) {
      display: none;
    }

    .vxd-artboard {
      min-width: 37rem;
    }

    .vxd-redline {
      font-size: 0.49rem;
    }

    .vxd-anatomy__list li {
      padding: 0.7rem;
    }
  }

  /* Button case: a flat type-and-size reference, modeled on the supplied
     component sheets instead of the shared annotation canvas. */
  .case-motion .redwood-preview--button {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
  }

  .case-motion .redwood-preview--menu {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    place-items: center;
  }

  .case-motion .redwood-preview--layout {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    place-items: center;
  }

  .case-motion .redwood-preview--toolbar {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    place-items: center;
  }

  .case-live-component .prototype--button {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 4vw, 2.75rem);
  }

  .case-live-component .demo-button--showcase {
    display: block;
    width: 100%;
    max-width: none;
  }

  .case-live-component .button-text-showcase__scroller {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding: 0;
    scrollbar-width: thin;
  }

  .case-live-component .button-text-showcase {
    display: grid;
    width: max-content;
    min-width: min(100%, 25.25rem);
    row-gap: 1.1rem;
    margin: 0 auto;
  }

  .case-live-component .button-text-showcase__header,
  .case-live-component .button-text-showcase__row {
    display: grid;
    grid-template-columns: 5.25rem 2.75rem 6.25rem 8rem;
    column-gap: 1.5rem;
    align-items: center;
  }

  .case-live-component .button-text-showcase__header {
    align-items: end;
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
  }

  .case-live-component .button-text-showcase__header span {
    text-align: center;
  }

  .case-live-component .button-text-showcase__type {
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
  }

  .case-live-component .prototype .button-text-showcase__button {
    --button-text-ink: var(--dk-ink, #161513);
    --button-text-cta: var(--dk-cta, #3a3632);
    --button-text-solid: var(--dk-solid, #efefef);
    --button-text-line: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    --button-text-danger: #d83a26;
    min-width: 6.25rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--button-text-ink);
    cursor: pointer;
    font-family: "Oracle Sans", var(--font-sans);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  }

  .case-live-component .prototype .button-text-showcase__button--icon {
    width: 36px;
    min-width: 36px;
    justify-self: center;
    padding: 0;
  }

  .case-live-component .button-text-showcase__button svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .case-live-component .button-text-showcase__button svg[data-button-icon="more"] {
    fill: currentColor;
    stroke: none;
  }

  .case-live-component .prototype .button-text-showcase__button--cta {
    background: var(--button-text-cta);
    color: var(--dk-on-strong, #fff);
  }

  .case-live-component .prototype .button-text-showcase__button--solid {
    background: var(--button-text-solid);
  }

  .case-live-component .prototype .button-text-showcase__button--outline {
    border-color: var(--button-text-line);
    background: var(--dk-surface, #fff);
  }

  .case-live-component .prototype .button-text-showcase__button--danger {
    background: var(--button-text-danger);
    color: #fff;
  }

  .case-live-component .button-text-showcase__button:hover {
    transform: translateY(-1px);
  }

  .case-live-component .button-text-showcase__button--cta:hover {
    background: rgb(var(--dk-cta-rgb, 58 54 50) / 0.86);
  }

  .case-live-component .button-text-showcase__button--solid:hover,
  .case-live-component .button-text-showcase__button--borderless:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .case-live-component .button-text-showcase__button--outline:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.04);
  }

  .case-live-component .button-text-showcase__button--danger:hover {
    background: #b83222;
  }

  .case-live-component .button-text-showcase__button:focus-visible {
    outline: 2px solid var(--dk-ink, #161513);
    outline-offset: 3px;
  }

  .case-live-component .button-text-showcase__button:active {
    transform: translateY(1px);
  }

  .case-specification--button .button-specimen-matrix__scroller,
  .button-size-reference__scroller {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .case-specification--button .button-specimen-matrix {
    width: 100%;
    min-width: 43rem;
    border-collapse: separate;
    border-spacing: 0 0.82rem;
    table-layout: fixed;
  }

  .case-specification--button .button-specimen-matrix th,
  .case-specification--button .button-specimen-matrix td {
    padding: 0 0.35rem;
    vertical-align: middle;
    text-align: center;
  }

  .case-specification--button .button-specimen-matrix thead th {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.3;
    text-transform: none;
  }

  .case-specification--button .button-specimen-matrix thead th:first-child {
    width: 6.25rem;
    text-align: left;
  }

  .case-specification--button .button-specimen-matrix tbody th {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
  }

  .button-specimen {
    --button-ink: var(--dk-ink, #161513);
    --button-cta: var(--dk-cta, #3a3632);
    --button-solid: var(--dk-solid, #efefef);
    --button-line: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5);
    --button-danger: #d83a26;
    display: inline-flex;
    min-width: 5.4rem;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--button-ink);
    font-family: "Oracle Sans", var(--font-sans);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
  }

  .button-specimen--icon {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .button-specimen--navigation {
    min-width: 6.6rem;
    justify-content: space-between;
  }

  .button-specimen svg,
  .button-size-sample svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .button-specimen svg[data-button-icon="more"] {
    fill: currentColor;
    stroke: none;
  }

  .button-specimen--cta {
    background: var(--button-cta);
    color: var(--dk-on-strong, #fff);
  }

  .button-specimen--solid {
    background: var(--button-solid);
  }

  .button-specimen--outline {
    border-color: var(--button-line);
    background: var(--dk-surface, #fff);
  }

  .button-specimen--borderless {
    border-color: transparent;
    background: transparent;
  }

  .button-specimen--danger {
    background: var(--button-danger);
    color: #fff;
  }

  .button-specimen-matrix__na {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
  }

  .case-specification--button {
    background: var(--dk-surface, #fff);
  }

  .case-specification--button .button-spec-reference {
    --button-spec-guide: var(--dk-selected, #227e9e);
    --button-spec-measure: #ed756d;
    color: var(--dk-ink, #161513);
    background: var(--dk-surface, #fff);
  }

  .button-spec-reference__section {
    padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 5.5rem);
    border-bottom: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
  }

  .button-spec-reference__section h5 {
    margin: 0;
    color: var(--dk-ink, #161513);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .button-spec-reference__section {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  .button-spec-reference__section--sizes {
    border-bottom: 0;
  }

  .button-spec-reference__section-header {
    display: block;
  }

  .button-size-reference__table {
    width: 100%;
    min-width: 57rem;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .button-size-reference__table th,
  .button-size-reference__table td {
    padding: 1rem;
    vertical-align: middle;
    text-align: center;
  }

  .button-size-reference__table thead th {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.72);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .button-size-reference__table thead th:first-child {
    width: 14rem;
    text-align: left;
  }

  .button-size-reference__table thead strong,
  .button-size-reference__table thead span {
    display: block;
  }

  .button-size-reference__table thead strong {
    color: var(--dk-ink, #161513);
    font-size: 0.84rem;
    font-weight: 750;
  }

  .button-size-reference__table thead span {
    margin-top: 0.35rem;
  }

  .button-size-reference__table tbody tr + tr {
    border-top: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
  }

  .button-size-reference__table tbody th {
    color: var(--dk-ink, #161513);
    text-align: left;
  }

  .button-size-reference__table tbody th strong,
  .button-size-reference__table tbody th span {
    display: block;
  }

  .button-size-reference__table tbody th strong {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .button-size-reference__table tbody th span {
    max-width: 13rem;
    margin-top: 0.45rem;
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.62);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .button-size-sample-wrap {
    display: grid;
    min-height: 7.5rem;
    place-items: center;
    padding: 1rem 1rem 1.25rem;
  }

  .button-size-sample {
    --button-size-height: 44px;
    --button-size-icon: 24px;
    --button-size-inset: 16px;
    --button-size-gap: 10px;
    position: relative;
    display: inline-flex;
    min-height: var(--button-size-height);
    align-items: center;
    justify-content: center;
    gap: var(--button-size-gap);
    padding: 0 var(--button-size-inset);
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.42);
    border-radius: 4px;
    background: var(--dk-surface, #fff);
    color: var(--dk-ink, #161513);
    font-family: "Oracle Sans", var(--font-sans);
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
  }

  .button-size-sample[data-size="small"] {
    --button-size-height: 36px;
    --button-size-icon: 20px;
    --button-size-inset: 16px;
    --button-size-gap: 8px;
    font-size: 0.82rem;
  }

  .button-size-sample[data-size="medium"] {
    --button-size-height: 44px;
    --button-size-icon: 24px;
    --button-size-inset: 16px;
    --button-size-gap: 10px;
  }

  .button-size-sample[data-size="large"] {
    --button-size-height: 52px;
    --button-size-icon: 24px;
    --button-size-inset: 24px;
    --button-size-gap: 16px;
    font-size: 1rem;
  }

  .button-size-sample[data-form="height"],
  .button-size-sample[data-form="icon"] {
    width: var(--button-size-height);
    padding: 0;
  }

  .button-size-sample svg {
    width: var(--button-size-icon);
    height: var(--button-size-icon);
  }

  .button-size-sample__measure {
    position: absolute;
    z-index: 1;
    color: var(--button-spec-measure);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.01em;
    pointer-events: none;
  }

  .button-size-sample__measure::before,
  .button-size-sample__measure::after {
    position: absolute;
    content: "";
  }

  .button-size-sample__measure--height {
    top: -0.2rem;
    bottom: -0.2rem;
    left: calc(100% + 0.75rem);
    width: 0.3rem;
    border-left: 1px solid var(--button-spec-measure);
  }

  .button-size-sample__measure--height::before,
  .button-size-sample__measure--height::after {
    left: -0.2rem;
    width: 0.4rem;
    border-top: 1px solid var(--button-spec-measure);
  }

  .button-size-sample__measure--height::before {
    top: 0;
    bottom: 0;
    border-bottom: 1px solid var(--button-spec-measure);
  }

  .button-size-sample__measure--height::after {
    bottom: 0;
  }

  .button-size-sample__measure--height {
    display: flex;
    align-items: center;
  }

  .button-size-sample[data-size="small"] .button-size-sample__measure--height::after {
    bottom: auto;
    left: 0.35rem;
    width: auto;
    border: 0;
    content: "36";
  }

  .button-size-sample[data-size="medium"] .button-size-sample__measure--height::after {
    bottom: auto;
    left: 0.35rem;
    width: auto;
    border: 0;
    content: "44";
  }

  .button-size-sample[data-size="large"] .button-size-sample__measure--height::after {
    bottom: auto;
    left: 0.35rem;
    width: auto;
    border: 0;
    content: "52";
  }

  .button-size-sample__measure--icon {
    top: calc(100% + 0.7rem);
    left: 50%;
    width: var(--button-size-icon);
    height: 0.45rem;
    border-top: 1px solid var(--button-spec-measure);
    transform: translateX(-50%);
  }

  .button-size-sample__measure--icon::before,
  .button-size-sample__measure--icon::after {
    top: -0.22rem;
    height: 0.42rem;
    border-left: 1px solid var(--button-spec-measure);
  }

  .button-size-sample__measure--icon::before {
    left: 0;
    right: 0;
    border-right: 1px solid var(--button-spec-measure);
  }

  .button-size-sample__measure--icon::after {
    right: 0;
  }

  .button-size-sample[data-size="small"] .button-size-sample__measure--icon {
    font-size: 0;
  }

  .button-size-sample[data-size="small"] .button-size-sample__measure--icon::after {
    top: 0.28rem;
    right: auto;
    left: 50%;
    height: auto;
    border: 0;
    content: "20";
    font-size: 0.6rem;
    transform: translateX(-50%);
  }

  .button-size-sample[data-size="medium"] .button-size-sample__measure--icon::after {
    top: 0.28rem;
    right: auto;
    left: 50%;
    height: auto;
    border: 0;
    content: "24";
    font-size: 0.6rem;
    transform: translateX(-50%);
  }

  .button-size-sample[data-size="large"] .button-size-sample__measure--icon::after {
    top: 0.28rem;
    right: auto;
    left: 50%;
    height: auto;
    border: 0;
    content: "24";
    font-size: 0.6rem;
    transform: translateX(-50%);
  }

  .button-size-sample[data-form="text"]::before,
  .button-size-sample[data-form="text-icon"]::before,
  .button-size-sample[data-form="navigation"]::before,
  .button-size-sample[data-form="text"]::after,
  .button-size-sample[data-form="text-icon"]::after,
  .button-size-sample[data-form="navigation"]::after {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px dashed color-mix(in srgb, var(--button-spec-guide) 70%, transparent);
    content: "";
  }

  .button-size-sample[data-form="text"]::before,
  .button-size-sample[data-form="text-icon"]::before,
  .button-size-sample[data-form="navigation"]::before {
    left: var(--button-size-inset);
  }

  .button-size-sample[data-form="text"]::after,
  .button-size-sample[data-form="text-icon"]::after,
  .button-size-sample[data-form="navigation"]::after {
    right: var(--button-size-inset);
  }

  .button-size-sample__measure--inset,
  .button-size-sample__measure--gap {
    top: -0.85rem;
    height: 0.32rem;
    border-top: 1px solid var(--button-spec-guide);
    color: var(--button-spec-guide);
  }

  .button-size-sample__measure--inset {
    left: 0;
    width: var(--button-size-inset);
  }

  .button-size-sample__measure--gap {
    left: calc(var(--button-size-inset) + var(--button-size-icon));
    width: var(--button-size-gap);
  }

  .button-size-sample__measure--inset::before,
  .button-size-sample__measure--inset::after,
  .button-size-sample__measure--gap::before,
  .button-size-sample__measure--gap::after {
    top: -0.18rem;
    height: 0.36rem;
    border-left: 1px solid currentColor;
  }

  .button-size-sample__measure--inset::before,
  .button-size-sample__measure--gap::before {
    left: 0;
    right: 0;
    border-right: 1px solid currentColor;
  }

  .button-size-sample__measure--inset::after,
  .button-size-sample__measure--gap::after {
    right: 0;
  }

  .button-size-sample[data-size="small"] .button-size-sample__measure--inset::after {
    top: -1.1rem;
    right: -0.1rem;
    height: auto;
    border: 0;
    content: "16";
  }

  .button-size-sample[data-size="medium"] .button-size-sample__measure--inset::after {
    top: -1.1rem;
    right: -0.1rem;
    height: auto;
    border: 0;
    content: "16";
  }

  .button-size-sample[data-size="large"] .button-size-sample__measure--inset::after {
    top: -1.1rem;
    right: -0.1rem;
    height: auto;
    border: 0;
    content: "24";
  }

  .button-size-sample[data-size="small"] .button-size-sample__measure--gap::after {
    top: -1.1rem;
    right: -0.1rem;
    height: auto;
    border: 0;
    content: "8";
  }

  .button-size-sample[data-size="medium"] .button-size-sample__measure--gap::after {
    top: -1.1rem;
    right: -0.1rem;
    height: auto;
    border: 0;
    content: "10";
  }

  .button-size-sample[data-size="large"] .button-size-sample__measure--gap::after {
    top: -1.1rem;
    right: -0.1rem;
    height: auto;
    border: 0;
    content: "16";
  }

  @media (max-width: 48rem) {
    .case-live-component .prototype--button {
      padding: 1.25rem;
    }

    .button-spec-reference__section-header {
      display: block;
    }

    .button-spec-reference__section {
      padding: var(--space-5);
    }

    .case-specification--button .button-specimen-matrix {
      min-width: 42rem;
    }

    .button-size-reference__table {
      min-width: 55rem;
    }
  }

  @media (max-width: 35rem) {
    .button-spec-reference__section {
      padding: var(--space-4);
    }

    .case-specification--button .button-specimen-matrix {
      min-width: 40rem;
    }
  }
}

@layer utilities {
  /* Keep Overview examples on the same right-side rail as Guidelines and handoff. */
  .case-section--overview {
    grid-template-columns: minmax(14rem, 0.63fr) minmax(0, 1.37fr);
  }

  @media (max-width: 48rem) {
    .case-section--overview {
      grid-template-columns: 1fr;
    }
  }

  /* Match the standard component-example frame while the menu surfaces remain usable. */
  .case-live-component--menu {
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 8px;
    background: var(--dk-surface, #fff);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.08);
  }

  .case-live-component--menu .prototype--menu {
    background: transparent;
  }

  .case-motion .redwood-preview--tabs {
    position: absolute;
    inset: 0;
    min-height: 0;
    place-items: center;
  }

  .case-motion .redwood-preview--selector {
    position: absolute;
    inset: 0;
    min-height: 0;
    place-items: center;
  }

  /* Keep the Tab Bar study on the shared component-example surface. */
  .case-live-component .prototype--tab-bar {
    background: transparent;
  }

  .case-live-component .prototype--tab-bar .demo-tabset {
    display: grid;
    width: min(88%, 23rem);
    gap: 0.75rem;
    margin: 0 auto;
  }

  .case-live-component .prototype--tab-bar .demo-tab-list {
    position: relative;
    min-height: 2.75rem;
    gap: 0;
    overflow-x: auto;
    border-bottom-color: var(--rw-divider);
  }

  .case-live-component .prototype--tab-bar .demo-tab-list button {
    min-width: 0;
    min-height: 2.75rem;
    flex: 1 1 0;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background: var(--dk-surface, #fff);
    font-size: 0.62rem;
    font-weight: 650;
    transition: color 180ms ease;
  }

  .case-live-component .prototype--tab-bar .demo-tab-list button.is-active::after {
    content: none;
  }

  .case-live-component .prototype--tab-bar .demo-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: var(--tab-indicator-width, 33.3333%);
    height: 0.18rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    pointer-events: none;
    transform: translateX(var(--tab-indicator-x, 0));
    transition: width 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .case-live-component .prototype--tab-bar .demo-tab-list button span {
    display: inline-grid;
    min-width: 1rem;
    height: 1rem;
    place-items: center;
    border-radius: 999px;
    background: var(--rw-chip);
    color: var(--rw-muted);
    font-size: 0.5rem;
  }

  .case-live-component .prototype--tab-bar .demo-tab-panel {
    min-height: 4.4rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--rw-divider);
    border-radius: 0.25rem;
    background: var(--rw-surface);
  }

  .case-live-component .prototype--tab-bar .demo-tab-panel h4 {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .case-live-component .prototype--tab-bar .demo-tab-panel p {
    margin-top: 0.18rem;
    font-size: 0.57rem;
    line-height: 1.3;
  }

  .case-live-component .prototype--tab-bar .demo-tab-panel__detail {
    display: block;
    margin-top: 0.18rem;
    color: var(--rw-selected);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.2;
  }

  .case-live-component .prototype--visual-space {
    position: relative;
    display: block;
    min-height: 30rem;
    padding: 0;
    overflow: hidden;
  }

  .case-live-component .demo-visual-animation,
  .case-live-component .demo-visual-animation__stage {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .case-live-component .demo-visual-animation__stage {
    display: grid;
    padding: 0;
    place-items: stretch;
  }

  .case-live-component .demo-visual-animation__stage .rw-visual-space-run {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .case-live-component .demo-visual-animation__note {
    position: absolute;
    z-index: 3;
    bottom: 1rem;
    left: 1rem;
    margin: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.18);
    border-radius: 0.25rem;
    background: rgb(var(--dk-surface-rgb, 255 255 255) / 0.9);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.78);
    font-size: 0.72rem;
    line-height: 1.3;
  }
}

@layer utilities {
  /* The home work section is a single stage: the rail stays put while projects trade places. */
  /* No scroll anchoring: when one project swaps for another, the browser
     would otherwise hold an element of the old panel in place and push the
     page to the bottom of a longer incoming project. */
  .work-project-viewport {
    position: relative;
    min-width: 0;
    isolation: isolate;
    overflow-anchor: none;
  }

  /* Clip only while projects slide past each other, so card hover shadows
     aren't cut off the rest of the time. */
  .work-project-viewport.is-transitioning {
    overflow: hidden;
    overflow: clip;
  }

  .work-project-panel {
    width: 100%;
    min-width: 100%;
    background: var(--color-white);
  }

  .work-project-panel[hidden] {
    display: none;
  }

  /* Show the hash-targeted project before the main script initializes so a
     direct refresh never exposes the default panel first. */
  html[data-initial-work-project] body.site-home .work-project-panel--azeem:not([hidden]) {
    display: none;
  }

  html[data-initial-work-project] .work-project-panel:target[hidden] {
    display: block;
  }

  /* Panels keep their own content height while they cross-fade. Pinning the
     bottom too would stretch a grid panel (Oracle) to the viewport's height,
     spreading its heading rows apart until the transition ends. */
  .work-project-panel.is-entering,
  .work-project-panel.is-leaving {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    align-content: start;
    width: 100%;
    min-width: 100%;
    will-change: opacity, transform;
  }

  /* The incoming panel waits at its offset without animating there, then
     rises and fades in once it's placed. */
  .work-project-panel.is-entering {
    z-index: 2;
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
  }

  .work-project-panel.is-entering.is-in-place {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 360ms ease-out,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .work-project-panel.is-leaving {
    z-index: 1;
    opacity: 1;
    transition: opacity 220ms ease;
  }

  .work-project-panel.is-leaving.is-outgoing {
    opacity: 0;
  }

  .work-project-panel--placeholder {
    --work-project-accent: var(--color-accent);
    min-block-size: clamp(28rem, 62svh, 46rem);
  }

  .work-project-panel--earfruits {
    --work-project-accent: var(--color-coral);
  }

  .work-project-panel--hause {
    --work-project-accent: var(--color-sky);
  }

  .work-project-panel--radiant {
    --work-project-accent: var(--color-sand);
  }

  .work-project-panel--soundsame {
    --work-project-accent: var(--color-success);
  }

  .work-project-panel--biophilic-continuum {
    --work-project-accent: var(--color-lime);
  }

  .work-project-panel--alboms {
    --work-project-accent: var(--color-lilac);
  }

  .work-project-panel--thats-wack {
    --work-project-accent: var(--color-danger);
  }

  .work-project-panel--spotify-react {
    --work-project-accent: var(--color-accent-deep);
  }

  .work-project-placeholder {
    display: grid;
    min-block-size: inherit;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: clamp(var(--space-6), 5vw, var(--space-8));
    padding-block: 0 clamp(var(--space-7), 9vw, var(--space-10));
  }

  .work-project-placeholder__copy {
    display: grid;
    align-content: start;
    align-items: start;
    gap: var(--space-4);
    max-width: 68ch;
  }

  .work-project-placeholder__eyebrow {
    margin: 0;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .work-project-placeholder__eyebrow::before {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: var(--space-2);
    border-radius: 50%;
    background: var(--work-project-accent);
    content: "";
  }

  .work-project-placeholder h2 {
    margin: 0;
    max-width: 19ch;
    font-size: clamp(2.6rem, 5.2vw, 5.4rem);
    letter-spacing: -0.065em;
    line-height: 0.94;
  }

  .work-project-placeholder__lede {
    max-width: 68ch;
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .work-project-placeholder__lede--long {
    display: grid;
    gap: var(--space-4);
  }

  .work-project-placeholder__lede--long p {
    margin: 0;
  }

  .work-project-placeholder__lede--long a {
    color: #0000ee;
    font-weight: 400;
    text-decoration-color: currentColor;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }

  .work-project-placeholder__canvas {
    position: relative;
    display: grid;
    min-height: clamp(19rem, 38vw, 31rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-3);
    padding: clamp(var(--space-4), 3vw, var(--space-7));
    overflow: hidden;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--work-project-accent) 19%, var(--color-surface)), transparent 68%),
      var(--color-surface);
    box-shadow: var(--shadow-small);
  }

  .work-project-placeholder__canvas::before,
  .work-project-placeholder__canvas::after {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--work-project-accent) 70%, var(--color-line));
    border-radius: 50%;
    content: "";
  }

  .work-project-placeholder__canvas::before {
    top: 13%;
    right: -8%;
    width: 62%;
    aspect-ratio: 1;
  }

  .work-project-placeholder__canvas::after {
    bottom: -25%;
    left: -6%;
    width: 74%;
    aspect-ratio: 1;
    border-width: 2px;
  }

  .work-project-placeholder__canvas span {
    position: relative;
    z-index: 1;
    min-height: 7.5rem;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-line-strong) 74%, var(--work-project-accent));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 88%, var(--work-project-accent));
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* The current project looks like the others; hovering any project,
     the current one included, turns it red and bold. */
  .site-nav__project[data-work-project-link].is-current {
    color: var(--color-ink);
    font-weight: 600;
  }

  .site-nav__project[data-work-project-link]:hover,
  .site-nav__project[data-work-project-link]:focus-visible,
  .site-nav__project[data-work-project-link]:active {
    color: var(--color-accent-deep);
    font-weight: 800;
  }

  @media (min-width: 64.0625rem) {
    .site-home .work.section-shell > .work-project-viewport {
      grid-column: 1 / -1;
    }

    .site-home .work-project-panel--azeem:not([hidden]) {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--content-grid-gap);
    }

    .site-home .work-project-panel--azeem > .section-heading,
    .site-home .work-project-panel--azeem > .work-controls,
    .site-home .work-project-panel--azeem > .project-collections {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 52rem) {
    .work-project-placeholder {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
    }

    .work-project-placeholder__canvas {
      min-height: 17rem;
    }
  }
}

@layer utilities {
  /* Agent Hub reels, built from the true-scale Redwood components used across
     the case studies — button-specimen, demo-floating-menu,
     demo-selector-list/-row, demo-filter-chip, demo-avatar,
     and demo-reaction-chip — on the recordings' 1280 × 900
     canvas (1em = 16 design px). script.js scales the canvas to its stage.
     Positions and sizes are measured from the original recordings; anything
     without a shared component uses only the --rw-* tokens. Without motion
     each scene rests on its most telling state: Link access for sharing, the
     open feedback form for feedback. */
  .project-card .redwood-preview--ai-chat-sharing,
  .project-card .redwood-preview--ai-chat-feedback {
    height: auto;
    min-height: 0;
    aspect-ratio: 1280 / 900;
  }

  /* Outside the one-column layout, Visual Space and Layout Editor sit beside
     an AI Chat card and match its preview height. */
  @media (min-width: 48.0625rem) {
    .project-card[data-project-card="visual-space"] .project-card__motion-wrap,
    .project-card[data-project-card="layout-editor"] .project-card__motion-wrap {
      display: grid;
      aspect-ratio: 1280 / 900;
    }
  }

  .case-motion .redwood-preview--ai-chat-sharing,
  .case-motion .redwood-preview--ai-chat-feedback {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 0;
  }

  .case-motion.case-motion--ai-chat-feedback {
    position: relative;
    min-height: 0;
    aspect-ratio: 1280 / 900;
    padding: 0;
    overflow: hidden;
    background: var(--rw-surface-muted, var(--dk-surface-muted, #f5f4f2));
  }

  .ahr {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* In the case-study header, a taller frame with the sharing reel zoomed
     toward its surfaces and centred in the whole frame. */
  .case-motion.case-motion--ai-chat-sharing {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* The card zooms in as far as the case-study header so both read alike. */
  .case-motion .ahr--sharing,
  .project-card .ahr--sharing {
    --ahr-zoom: 1.4;
  }

  /* Leave room for the case-study caption and reduce-motion control. */
  .case-motion--ai-chat-feedback .ahr {
    --ahr-zoom: 1.1;
    inset: 1.5rem 0 1.75rem;
  }

  /* Zoomed in, the recording's toast would fall below the frame; raise it
     onto the chat. */
  .case-motion--ai-chat-feedback .ahr-toast {
    top: 44.5em;
  }

  .ahr__scene {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80em;
    height: 56.25em;
    color: var(--rw-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
    transform: translate(-50%, -50%) scale(var(--ahr-scale, 1));
  }

  .ahr__scene :where(p) {
    margin: 0;
  }

  .ahr__scene :where(b) {
    font-weight: 650;
  }

  .ahr__scene :where(small) {
    display: block;
    color: var(--rw-muted);
  }

  .ahr-recipient__body,
  .ahr-chat__answer,
  .ahr-feedback__title {
    white-space: normal;
  }

  .ahr-icon {
    width: 1.125em;
    height: 1.125em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ahr-logo {
    display: inline-block;
    width: 1.3em;
    height: 0.8em;
    flex: none;
    border: 0.17em solid #c74634;
    border-radius: 1em;
  }

  /* Surfaces share the live case-study card treatment. */
  .ahr-panel {
    position: absolute;
    border: 1px solid var(--rw-divider);
    border-radius: 0.45rem;
    background: var(--rw-surface);
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.14);
  }

  .ahr-field {
    display: flex;
    min-width: 0;
    height: 2.75rem;
    flex: 1;
    align-items: center;
    gap: 0.75em;
    padding: 0 1em;
    overflow: hidden;
    border: 1px solid var(--rw-border);
    border-radius: 4px;
    color: var(--rw-muted);
    font-size: 1.2em;
  }

  .ahr-field .ahr-icon {
    width: 1.1em;
    height: 1.1em;
  }

  .ahr-tools {
    display: flex;
    margin-left: auto;
    color: var(--rw-ink);
  }

  /* The X's glyph top meets the dialog title's cap height. */
  .ahr-close {
    position: absolute;
    top: 1.32em;
    right: 2em;
    width: 1.55em;
    height: 1.55em;
  }

  .ahr-title {
    display: block;
    font-size: 1.75em;
    font-weight: 750;
    letter-spacing: -0.02em;
  }

  .ahr-subtitle {
    margin-top: 0.15em;
    color: var(--rw-muted);
    font-size: 1.16em;
  }

  .ahr-label {
    margin-top: 0.85em;
    color: var(--rw-muted);
    font-size: 1em;
  }

  .ahr-help {
    margin-top: 0.75em;
    color: var(--rw-muted);
    font-size: 0.87em;
  }

  .ahr-bubble {
    display: table;
    border-radius: 0.45em;
    background: var(--rw-selected-surface);
  }

  .ahr-option__icon {
    display: grid;
    width: 2.2em;
    height: 2.2em;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: var(--rw-chip);
  }

  .ahr-option__icon .ahr-icon {
    width: 1.4em;
    height: 1.4em;
  }

  .ahr-option .ahr-option__icon .ahr-icon {
    width: 1.3em;
    height: 1.3em;
  }

  .ahr-ch {
    display: inline-block;
    overflow: hidden;
    max-width: 1em;
    vertical-align: bottom;
    font-style: normal;
    white-space: pre;
  }

  .ahr-caret {
    display: inline-block;
    width: 0.08em;
    height: 1.1em;
    margin-left: 0.05em;
    vertical-align: -0.15em;
    background: currentColor;
    opacity: 0;
  }

  /* Shared components keep their own styling; only sizes from the
     recordings are set here. */
  /* The Button study's medium icon size (24 × 24px). */
  .ahr .button-specimen .ahr-icon {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
  }

  .ahr .demo-avatar {
    flex: none;
  }

  .ahr .demo-selector-row {
    font-size: inherit;
  }

  /* Sharing: chat input */
  .ahr-input {
    top: 24.59em;
    left: 15.875em;
    display: flex;
    width: 48.25em;
    height: 7.1875em;
    align-items: center;
    gap: 1.3em;
    padding: 0 1.75em 0 1.9em;
    opacity: 0;
  }

  .ahr-input__text {
    font-size: 1.6em;
    letter-spacing: -0.01em;
  }

  .ahr-input .ahr-tools {
    gap: 0.9em;
  }

  .ahr-input .ahr-tools .ahr-icon {
    width: 1.75em;
    height: 1.75em;
  }

  /* Sharing: chat actions menu (demo-floating-menu at the recording's zoom) */
  .ahr .ahr-menu {
    position: absolute;
    top: 24.97em;
    left: 28.375em;
    width: 23.25em;
    height: 6.5em;
    padding: 0.75em;
    opacity: 0;
  }

  .ahr .ahr-menu > button {
    height: 100%;
    padding: 0 1.3em 0 1.25em;
    border-radius: 0.4em;
  }

  .ahr-menu__label {
    display: flex;
    align-items: center;
    gap: 1.1em;
    font-size: 1.93em;
    letter-spacing: -0.02em;
  }

  .ahr-menu__icon {
    display: grid;
    width: 1.45em;
    height: 1.45em;
    place-items: center;
    border-radius: 50%;
    background: var(--rw-chip);
  }

  .ahr-menu__icon .ahr-icon {
    width: 0.95em;
    height: 0.95em;
  }

  .ahr-menu > button > .ahr-icon {
    width: 1.4em;
    height: 1.4em;
  }

  /* Sharing: dialogs */
  .ahr-dialog,
  .ahr-link,
  .ahr-recipient {
    padding: 1.1em 2em 0;
  }

  .ahr-dialog {
    top: 17.53em;
    left: 20.5em;
    width: 39em;
    height: 21.375em;
    opacity: 0;
  }

  .ahr-invite {
    display: flex;
    margin-top: 2.2em;
    gap: 1em;
  }

  /* The access row and the person row below share one inset, icon size,
     and gap so the lock lines up with the avatar and its hover fill
     surrounds the icon instead of cutting through it. */
  .ahr .ahr-access {
    min-height: 3.3em;
    margin-top: 0.7em;
    gap: 1em;
    padding: 0 1.25em 0 0.6em;
    border-bottom: 0;
    border-radius: 0.3em;
  }

  .ahr .ahr-access .ahr-option__icon {
    width: 28px;
    height: 28px;
  }

  .ahr .ahr-access .ahr-option__icon .ahr-icon {
    width: 18px;
    height: 18px;
  }

  .ahr-access b {
    font-size: 1.27em;
    font-weight: 400;
  }

  .ahr-access > .ahr-icon {
    width: 0.9em;
    height: 0.9em;
    margin-left: auto;
  }

  .ahr-person {
    display: flex;
    margin-top: 0.55em;
    padding-left: 0.6em;
    align-items: center;
    gap: 1em;
  }

  .ahr-person__copy {
    flex: 1;
  }

  .ahr-person b {
    display: block;
    font-size: 1.04em;
  }

  .ahr-person small {
    font-size: 0.84em;
  }

  .ahr-person > .ahr-icon {
    width: 0.9em;
    height: 0.9em;
    margin-right: 1.4em;
    color: var(--rw-muted);
  }

  .ahr-link {
    top: 15.53em;
    left: 16.75em;
    width: 46.5em;
    height: 25.3125em;
  }

  .ahr-link .ahr-subtitle {
    margin-top: 0.5em;
    font-size: 1.05em;
  }

  .ahr .ahr-options {
    margin-top: 0.65em;
  }

  .ahr .ahr-option {
    min-height: 3.3em;
    gap: 1.2em;
    padding: 0 0.95em;
  }

  .ahr-option .ahr-option__icon {
    width: 1.9em;
    height: 1.9em;
  }

  .ahr-option__copy b {
    display: block;
    font-size: 1em;
  }

  .ahr .ahr-option__copy small {
    margin-left: 0;
    font-size: 0.78em;
  }

  .ahr .ahr-option--anyone {
    background: var(--dk-selected-surface, #e4f1f7);
  }

  .ahr-copy-row {
    display: flex;
    margin-top: 1.1em;
    gap: 1em;
  }

  .ahr-url {
    background: var(--rw-chip);
    color: var(--rw-ink);
    font-size: 1.14em;
  }

  .ahr-copy {
    flex: none;
  }

  .ahr-copy__icons {
    display: grid;
  }

  .ahr-copy__icons > * {
    grid-area: 1 / 1;
  }

  .ahr-copy__done {
    opacity: 0;
  }

  .ahr-recipient {
    top: 15.28em;
    left: 17.125em;
    width: 45.75em;
    height: 25.8125em;
    opacity: 0;
  }

  /* The conversation fills from the top while the shared-chat note, private
     follow-up field and viewer sit at the bottom of the fixed-height panel. */
  .ahr-recipient {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.4em;
  }

  .ahr-recipient .ahr-bubble {
    align-self: flex-end;
  }

  .ahr-recipient .ahr-recipient__body {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .ahr-recipient .ahr-recipient__body:has(+ .ahr-recipient__note) {
    margin-bottom: 0.8em;
  }

  /* The shared-chat note follows the answer; only the follow-up field and
     viewer sit at the bottom. */
  .ahr-recipient .ahr-recipient__note {
    margin: 0 0 0.95em;
    padding-top: 1.2em;
    border-top: 1px solid var(--rw-divider);
  }

  .ahr-recipient .ahr-followup {
    flex: none;
    margin-top: auto;
  }

  .ahr-recipient__title {
    font-size: 1.63em;
  }

  /* Top-aligned with the title: 1.1em panel padding in the pill's 0.86em. */
  .ahr .ahr-pill {
    position: absolute;
    top: 1.28em;
    right: 2em;
    height: 2.45em;
    gap: 0.45em;
    padding: 0 0.95em;
    color: var(--rw-muted);
    font-size: 0.86em;
  }

  .ahr-pill .ahr-icon {
    width: 1.2em;
    height: 1.2em;
  }

  .ahr-private .ahr-icon {
    width: 1.05em;
    height: 1.05em;
  }

  .ahr-recipient .ahr-bubble {
    margin: 1.5em 0 0 auto;
    padding: 0.46em 0.8em;
    font-size: 1.08em;
  }


  .ahr-recipient__body {
    margin-top: 1.1em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid var(--rw-divider);
    font-size: 1.05em;
    line-height: 1.55;
  }

  .ahr-recipient__note {
    display: flex;
    margin-top: 1.3em;
    align-items: center;
    gap: 0.5em;
    color: var(--rw-muted);
    font-size: 0.92em;
  }

  .ahr-recipient__note .ahr-icon {
    width: 1.35em;
    height: 1.35em;
  }

  .ahr-followup {
    height: 3.35em;
    margin-top: 0.95em;
    gap: 0.6em;
    padding: 0 1.15em 0 1em;
    border-radius: 0.55em;
    font-size: 1.08em;
  }

  .ahr-followup .ahr-tools {
    gap: 0.65em;
  }

  .ahr-followup .ahr-tools .ahr-icon {
    width: 1.35em;
    height: 1.35em;
  }

  .ahr-viewer {
    display: flex;
    margin-top: 1em;
    align-items: center;
    gap: 0.65em;
    font-size: 0.95em;
  }

  /* Feedback: Agent Hub workspace */
  .ahr-app {
    top: 7em;
    left: 6.25em;
    display: grid;
    width: 67.5em;
    height: 42.1875em;
    grid-template-columns: 13.5625em minmax(0, 1fr);
    overflow: hidden;
  }

  .ahr-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.45em 0.63em 0;
    border-right: 1px solid var(--rw-divider);
    background: var(--rw-surface-muted);
    font-size: 0.84em;
  }

  .ahr-brand {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0 0.55em;
    font-size: 1.2em;
  }

  .ahr-brand .ahr-logo {
    font-size: 0.75em;
  }

  .ahr-brand .ahr-icon {
    width: 1.25em;
    height: 1.25em;
    margin-left: auto;
    margin-right: 0.85em;
    color: var(--rw-muted);
  }

  .ahr-nav {
    display: flex;
    height: 2.53em;
    align-items: center;
    gap: 0.6em;
    padding: 0 0.97em;
    border-radius: 0.25em;
  }

  .ahr-nav .ahr-icon {
    width: 1.6em;
    height: 1.6em;
  }

  .ahr-nav--new {
    height: 2.38em;
    margin-top: 1.1em;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .ahr-nav.is-active {
    box-shadow: inset 0.19em 0 0 var(--rw-ink);
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .ahr-section-label {
    margin: 1.4em 0 0.4em;
    padding: 0 0.55em;
    color: var(--rw-muted);
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ahr-section-label--recent {
    margin-top: 1.5em;
    padding-top: 1.45em;
    border-top: 1px solid var(--rw-divider);
  }

  .ahr-recent {
    display: block;
    margin-top: 0.7em;
    padding: 0 0.65em;
    font-size: 0.85em;
  }

  .ahr-recent--muted {
    margin-top: 1em;
    color: var(--rw-muted);
  }

  .ahr-account {
    position: absolute;
    right: 0.63em;
    bottom: 0;
    left: 0.63em;
    display: flex;
    height: 3.6em;
    align-items: center;
    gap: 0.55em;
    padding: 0 0.55em;
    border-top: 1px solid var(--rw-divider);
    font-size: 0.88em;
  }

  .ahr-chat {
    position: relative;
    padding: 2.15em 2.5em 0;
  }

  .ahr-chat__title {
    display: block;
    font-size: 1.57em;
    letter-spacing: -0.01em;
  }

  .ahr-chat__meta {
    display: block;
    padding-bottom: 1.25em;
    border-bottom: 1px solid var(--rw-divider);
    color: var(--rw-muted);
    font-size: 0.86em;
  }

  .ahr .ahr-private {
    position: absolute;
    top: 2.1em;
    right: 2.5em;
    height: 1.86em;
    gap: 0.4em;
    padding: 0 0.7em;
    color: var(--rw-muted);
    font-size: 0.88em;
  }

  .ahr-chat__question {
    margin: 2.87em 0 0 auto;
    padding: 0.75em 1.07em;
    font-size: 0.93em;
  }

  /* A follow-up question sits closer to the answer before it. */
  .ahr-chat__question.ahr-chat__question--next {
    margin-top: 2em;
  }

  .ahr-chat__agent {
    display: flex;
    margin-top: 2.16em;
    align-items: center;
    gap: 0.6em;
    color: var(--rw-muted);
    font-size: 0.85em;
  }

  .ahr-chat__agent .ahr-logo {
    font-size: 0.85em;
  }

  .ahr-chat__answer {
    max-width: 42em;
    margin-top: 0.4em;
    font-size: 0.94em;
    line-height: 1.56;
  }

  .ahr-reactions {
    display: flex;
    margin-top: 0.85em;
    gap: 0.9em;
    padding-left: 0.3em;
  }

  .ahr-reactions .ahr-icon {
    width: 1.6em;
    height: 1.6em;
  }

  .ahr-thumb-down {
    display: grid;
  }

  .ahr-thumb-down > * {
    grid-area: 1 / 1;
  }

  .ahr-thumb-down__filled {
    fill: currentColor;
    opacity: 0;
  }

  /* Feedback: response feedback form */
  .ahr-feedback {
    /* Opens beside the thumbs, below the conversation's first exchange. */
    top: 21.5625em;
    left: 22.3125em;
    width: 28.5em;
    height: 20.75em;
    padding: 1.2em 1.25em 0;
  }

  .ahr-feedback__title {
    display: block;
    max-width: 20em;
    font-size: 1.03em;
    line-height: 1.45;
  }

  .ahr-feedback .ahr-close {
    top: 1.95em;
    right: 1.8em;
    width: 1.2em;
    height: 1.2em;
  }

  .ahr-chips {
    display: grid;
    margin-top: 0.75em;
    gap: 0.5em;
  }

  .ahr-chip-row {
    display: flex;
    gap: 0.5em;
  }

  .ahr .demo-filter-chip {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
  }

  .ahr-textarea {
    position: relative;
    display: block;
    height: 5.4em;
    margin-top: 1.1em;
    padding: 0.55em 0.8em;
    color: var(--rw-ink);
    font-size: 0.88em;
  }

  .ahr-textarea__placeholder {
    position: absolute;
    color: var(--rw-muted);
    opacity: 0;
  }

  /* The Button study's Small size (36px), as in the recording. */
  .ahr .ahr-submit {
    display: flex;
    width: fit-content;
    min-height: 36px;
    margin: 1.5em 0 0 auto;
  }

  /* Redwood confirmation toast, as shown in the recording. */
  .ahr-toast {
    position: absolute;
    top: 50.5em;
    left: 30em;
    display: flex;
    width: 20em;
    height: 3.625em;
    align-items: center;
    gap: 0.75em;
    padding: 0 1.6em;
    border-radius: 6px;
    background: var(--dk-cta-hover, #272622);
    box-shadow: var(--rw-shadow-sm);
    color: var(--dk-on-strong, #fff);
    font-weight: 700;
    opacity: 0;
  }

  .ahr-toast .ahr-icon {
    width: 1.4em;
    height: 1.4em;
  }

  /* Timelines: 13.5s sharing loop, 10.5s feedback loop, matched to the
     original recordings. */
  .is-playing .ahr--sharing .ahr-ch {
    max-width: 0;
    animation: ahr-share-type 13.5s linear infinite;
    animation-delay: calc(0.15s + var(--i) * 0.078s);
  }

  .is-playing .ahr--sharing .ahr-caret {
    animation: ahr-share-caret 13.5s linear infinite, ahr-blink 0.9s steps(1) infinite;
  }

  .is-playing .ahr-input { animation: ahr-share-input 13.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .is-playing .ahr .ahr-menu { animation: ahr-share-menu 13.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .is-playing .ahr .ahr-menu > button { animation: ahr-share-menu-item 13.5s linear infinite; }
  .is-playing .ahr-dialog { animation: ahr-share-dialog 13.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .is-playing .ahr .ahr-access { animation: ahr-share-access 13.5s linear infinite; }
  .is-playing .ahr-link { animation: ahr-share-link 13.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .is-playing .ahr .ahr-option--invited { animation: ahr-share-invited 13.5s linear infinite; }
  .is-playing .ahr .ahr-option--azeem { animation: ahr-share-azeem 13.5s linear infinite; }
  .is-playing .ahr .ahr-option--anyone { animation: ahr-share-anyone 13.5s linear infinite; }
  .is-playing .ahr .ahr-copy { animation: ahr-share-copy 13.5s linear infinite; }
  .is-playing .ahr-copy__icon { animation: ahr-share-copy-icon 13.5s linear infinite; }
  .is-playing .ahr-copy__done { animation: ahr-share-copy-done 13.5s linear infinite; }
  .is-playing .ahr-recipient { animation: ahr-share-recipient 13.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

  .is-playing .ahr--feedback .ahr-ch {
    max-width: 0;
    animation: ahr-feedback-type 10.5s linear infinite;
    animation-delay: calc(3.35s + var(--i) * 0.03s);
  }

  .is-playing .ahr--feedback .ahr-caret {
    animation: ahr-feedback-caret 10.5s linear infinite, ahr-blink 0.9s steps(1) infinite;
  }

  .is-playing .ahr-feedback { animation: ahr-feedback-form 10.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .is-playing .ahr .ahr-chip--long { animation: ahr-feedback-long 10.5s linear infinite; }
  .is-playing .ahr .ahr-chip--inaccurate { animation: ahr-feedback-inaccurate 10.5s linear infinite; }
  .is-playing .ahr-textarea { animation: ahr-feedback-focus 10.5s linear infinite; }
  .is-playing .ahr-textarea__placeholder { animation: ahr-feedback-placeholder 10.5s linear infinite; }
  .is-playing .ahr .ahr-submit { animation: ahr-feedback-submit 10.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .is-playing .ahr-thumb-down__filled { animation: ahr-feedback-thumb-filled 10.5s linear infinite; }
  .is-playing .ahr-toast { animation: ahr-feedback-toast 10.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

  /* AI Chat Sharing case-study prototype: the reel's surfaces, one clickable
     step at a time. Chips jump between steps; controls in the scene advance. */
  .case-live-component .prototype--ai-chat-sharing {
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem);
    background: var(--rw-surface-muted);
  }

  .ahr-study {
    display: grid;
    width: 100%;
    gap: 0.5rem;
  }

  /* A wider, shorter stage than the reel, zoomed (data-ahr-zoom) so each
     surface fills the window. */
  .ahr-study__stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 3;
  }

  .ahr-study__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }

  .case-live-component .prototype .ahr-study__step {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--rw-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
  }

  .ahr-study__step b {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
  }

  .case-live-component .prototype .ahr-study__step:hover {
    color: var(--rw-ink);
  }

  .case-live-component .prototype .ahr-study__step.is-active {
    border-color: var(--rw-divider);
    background: var(--rw-surface);
    color: var(--rw-ink);
  }

  .ahr-study > .demo-status {
    justify-self: center;
    margin: 0;
    font-size: var(--text-xs);
    text-align: center;
  }

  .ahr--interactive .ahr-panel,
  .ahr--interactive .ahr-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.75em) scale(0.985);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 260ms;
  }

  .ahr--interactive[data-step="compose"] .ahr-transcript,
  .ahr--interactive[data-step="compose"] .ahr-menu,
  .ahr--interactive[data-step="share"] .ahr-dialog,
  .ahr--interactive[data-step="link"] .ahr-link,
  .ahr--interactive[data-step="recipient"] .ahr-recipient {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  /* The first step is the chat being shared: a transcript with its actions
     menu open on Share, as if from the header's overflow button. */
  .ahr-transcript {
    top: 13.25em;
    left: 17.125em;
    width: 45.75em;
    padding: 1.1em 2em 1.5em;
  }

  .ahr-transcript__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.7em;
    border-bottom: 1px solid var(--rw-divider);
  }

  .ahr-transcript__header .ahr-title {
    font-size: 1.63em;
  }

  .ahr-transcript__more {
    display: grid;
    width: 2.4em;
    height: 2.4em;
    place-items: center;
    border-radius: 0.3em;
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .ahr-transcript__more .ahr-icon {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
  }

  .ahr-transcript .ahr-transcript__question {
    margin: 1.2em 0 0 auto;
    padding: 0.46em 0.8em;
    font-size: 1.08em;
  }

  /* Leave room under the header for the open Share menu. */
  .ahr-transcript .ahr-transcript__header + .ahr-transcript__question {
    margin-top: 4.1em;
  }

  .ahr-transcript .ahr-chat__agent {
    margin-top: 0.9em;
  }


  .ahr-transcript .ahr-recipient__body {
    margin-top: 0.35em;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .ahr-transcript .ahr-transcript__answer {
    margin-top: 0.35em;
  }

  /* A compact Share menu, anchored under the transcript's overflow button. */
  .ahr.ahr--interactive .ahr-menu {
    top: 17.4em;
    left: 46.4em;
    width: 14.5em;
    height: 4.4em;
    padding: 0.5em;
  }

  .ahr--interactive .ahr-menu > button {
    padding: 0 0.85em 0 0.75em;
  }

  .ahr--interactive .ahr-menu__label {
    gap: 0.65em;
    font-size: 1.2em;
  }

  .ahr--interactive .ahr-menu > button > .ahr-icon {
    width: 1.1em;
    height: 1.1em;
  }

  .ahr--interactive [role][data-demo-action],
  .ahr--interactive .ahr-menu > button {
    cursor: pointer;
  }

  .ahr--interactive [role][data-demo-action]:focus-visible,
  .ahr--interactive .ahr-menu > button:focus-visible {
    outline: 0.15em solid var(--rw-focus);
    outline-offset: 0.15em;
  }

  .ahr--interactive .ahr-menu > button:hover,
  .ahr--interactive .ahr-access:hover,
  .ahr--interactive .ahr-close:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .ahr--interactive .ahr-close {
    display: grid;
    place-items: center;
    border-radius: 4px;
  }

  .ahr--interactive .ahr-close > .ahr-icon {
    width: 100%;
    height: 100%;
  }

  .ahr.ahr--interactive .ahr-option {
    background: transparent;
  }

  .ahr.ahr--interactive .ahr-option:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.04);
  }

  .ahr.ahr--interactive .ahr-option.is-selected {
    background: var(--dk-selected-surface, #e4f1f7);
  }

  .ahr--interactive .ahr-url:hover {
    border-color: var(--rw-ink);
  }

  .ahr--interactive .ahr-copy:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.04);
  }

  /* The clickable recipient view carries the transcript's full snapshot:
     taller, raised to stay centred, with one divider after the last answer. */
  .ahr--interactive .ahr-recipient {
    top: 13.15em;
    height: auto;
    padding-bottom: 1.25em;
  }

  .ahr--interactive .ahr-recipient .ahr-bubble {
    margin-top: 0.95em;
  }

  .ahr--interactive .ahr-recipient .ahr-recipient__body {
    margin-top: 0.6em;
  }

  .ahr--interactive .ahr-recipient .ahr-recipient__body:not(:has(+ .ahr-recipient__note)) {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .ahr--interactive .ahr-copy.is-copied .ahr-copy__icon {
    opacity: 0;
  }

  .ahr--interactive .ahr-copy.is-copied .ahr-copy__done {
    opacity: 1;
  }

  /* AI Chat Feedback case-study prototype: the reel's response reaction at
     true size, with real thumbs, reasons, note, and confirmation. */
  .case-live-component .prototype--ai-chat-feedback {
    place-items: start center;
  }

  .ahr-feedback-study {
    position: relative;
    display: grid;
    width: min(100%, 36rem);
    align-content: start;
    color: var(--rw-ink);
    font-size: 1rem;
    line-height: 1.3;
  }

  .ahr-feedback-study :where(p) {
    margin: 0;
  }

  /* The conversation sits on a white chat surface; the status line below
     stays on the window's off-white. */
  .ahr-feedback-study__chat {
    display: grid;
  }

  .ahr-feedback-study .ahr-feedback-study__question {
    margin-left: auto;
    padding: 0.6rem 0.9rem;
    font-size: 0.9375rem;
  }

  .ahr-feedback-study .ahr-feedback-study__question + .ahr-chat__agent {
    margin-top: 1.25rem;
  }

  .ahr-feedback-study .ahr-chat__answer + .ahr-feedback-study__question {
    margin-top: 1.5rem;
  }

  .ahr-feedback-study .ahr-chat__agent {
    margin-top: 1.5rem;
    font-size: 0.875rem;
  }

  .ahr-feedback-study .ahr-chat__answer {
    margin-top: 0.4rem;
    font-size: 1rem;
  }

  .ahr-feedback-study__controls {
    position: relative;
  }

  .ahr-feedback-study .ahr-reactions {
    margin-top: 0.6rem;
    gap: 0.25rem;
    padding-left: 0;
  }

  .case-live-component .prototype .ahr-thumb {
    display: grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--rw-ink);
  }

  .case-live-component .prototype .ahr-thumb:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .ahr-thumb > * {
    grid-area: 1 / 1;
  }

  .ahr-feedback-study .ahr-thumb .ahr-icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .ahr-thumb .ahr-thumb__filled {
    fill: currentColor;
    opacity: 0;
    transition: opacity 160ms ease;
  }

  .ahr-thumb[aria-pressed="true"] .ahr-thumb__filled {
    opacity: 1;
  }

  .ahr-feedback-study .ahr-feedback {
    z-index: 2;
    top: auto;
    bottom: calc(100% + 0.5rem);
    left: 0;
    width: min(100%, 28.5rem);
    height: auto;
    padding: 1.1rem 1.25rem 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem) scale(0.985);
    transform-origin: bottom left;
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 260ms;
  }

  .ahr-feedback-study .ahr-feedback.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .ahr-feedback-study .ahr-feedback__title {
    max-width: calc(100% - 2.5rem);
    font-size: 1rem;
  }

  .case-live-component .prototype .ahr-feedback .ahr-close {
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    width: 2rem;
    min-height: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    background: transparent;
    color: var(--rw-ink);
  }

  .case-live-component .prototype .ahr-feedback .ahr-close:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08);
  }

  .ahr-feedback .ahr-close .ahr-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ahr-feedback-study .ahr-chips {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    gap: 0.5rem;
  }

  .ahr-feedback-study__note {
    display: block;
    width: 100%;
    min-height: 5.4rem;
    margin-top: 1rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--rw-border);
    border-radius: 4px;
    background: var(--rw-surface);
    color: var(--rw-ink);
    color-scheme: light;
    font: inherit;
    font-size: 0.875rem;
    resize: vertical;
  }

  .ahr-feedback-study__note:focus {
    border-color: var(--rw-selected);
    box-shadow: 0 0 0 1px var(--rw-selected);
    outline: 0;
  }

  .case-live-component .prototype .ahr-feedback-study__submit {
    display: flex;
    width: fit-content;
    margin: 1rem 0 0 auto;
  }

  .case-live-component .prototype .ahr-feedback-study__submit:hover {
    background: var(--dk-cta-hover, #25211e);
  }

  .ahr-feedback-study .ahr-toast {
    top: auto;
    bottom: 3.25rem;
    left: 50%;
    width: auto;
    height: 3rem;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, 0.75rem);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .ahr-feedback-study .ahr-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .ahr-feedback-study > .demo-status {
    justify-self: center;
    margin: 1.75rem 0 0;
  }

  /* The open feedback form floats over the window's edge and the page
     below rather than reserving space inside the window. */
  .case-section--overview:has(.case-live-component--ai-chat-feedback) {
    position: relative;
    z-index: 10;
  }

  .case-live-component--ai-chat-feedback,
  .case-live-component .prototype--ai-chat-feedback {
    overflow: visible;
    background: var(--rw-surface);
  }

  /* With overflow visible, the prototype must round itself to stay inside
     the frame's corners. */
  .case-live-component .prototype--ai-chat-feedback {
    border-radius: inherit;
  }

  .ahr-feedback-study .ahr-feedback {
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  }

  @keyframes ahr-blink {
    0% { visibility: visible; }
    50% { visibility: hidden; }
  }

  @keyframes ahr-share-type {
    0%, 75% { max-width: 1em; }
    75.01%, 100% { max-width: 0; }
  }

  @keyframes ahr-share-caret {
    0%, 10.74% { opacity: 1; }
    11.11%, 100% { opacity: 0; }
  }

  @keyframes ahr-share-input {
    0% { opacity: 0; transform: translateY(0.5em); }
    2.22%, 11.48% { opacity: 1; transform: none; }
    17.41%, 100% { opacity: 0; transform: translateX(-5.75em); }
  }

  @keyframes ahr-share-menu {
    0%, 11.48% { opacity: 0; transform: scale(0.96); }
    14.07%, 23.33% { opacity: 1; transform: none; }
    27.78%, 100% { opacity: 0; transform: translateY(-13em); }
  }

  @keyframes ahr-share-menu-item {
    0%, 15.56% { background: transparent; }
    16.30%, 20.89% { background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.08); }
    21.48%, 100% { background: transparent; }
  }

  @keyframes ahr-share-dialog {
    0%, 23.33% { opacity: 0; transform: translateX(3em); }
    28.52%, 39.48% { opacity: 1; transform: none; }
    44.44%, 100% { opacity: 0; transform: translateX(-49em); }
  }

  @keyframes ahr-share-access {
    0%, 32.96% { background: transparent; }
    33.70%, 40% { background: var(--dk-selected-surface, #e4f1f7); }
    40.74%, 100% { background: transparent; }
  }

  @keyframes ahr-share-link {
    0%, 39.48% { opacity: 0; transform: translate(2em, 13.7em); }
    44.59%, 64.52% { opacity: 1; transform: none; }
    71.11%, 100% { opacity: 0; transform: translate(-9.75em, -0.9em); }
  }

  @keyframes ahr-share-invited {
    0%, 45.56% { background: var(--dk-selected-surface, #e4f1f7); }
    46.30%, 100% { background: transparent; }
  }

  @keyframes ahr-share-azeem {
    0%, 45.56% { background: transparent; }
    46.30%, 51.85% { background: var(--dk-selected-surface, #e4f1f7); }
    52.44%, 100% { background: transparent; }
  }

  @keyframes ahr-share-anyone {
    0%, 51.85% { background: transparent; }
    52.44%, 100% { background: var(--dk-selected-surface, #e4f1f7); }
  }

  @keyframes ahr-share-copy {
    0%, 56.30% { background: var(--dk-surface, #fff); }
    57.04%, 60.74% { background: var(--dk-surface-muted, #ededed); }
    61.48%, 100% { background: var(--dk-surface, #fff); }
  }

  @keyframes ahr-share-copy-icon {
    0%, 60.74% { opacity: 1; }
    61.48%, 100% { opacity: 0; }
  }

  @keyframes ahr-share-copy-done {
    0%, 60.74% { opacity: 0; }
    61.48%, 100% { opacity: 1; }
  }

  @keyframes ahr-share-recipient {
    0%, 64.52% { opacity: 0; transform: translateY(10.6em) scale(0.98); }
    72.74%, 93.70% { opacity: 1; transform: none; }
    99.26%, 100% { opacity: 0; transform: translateX(0.6em); }
  }

  @keyframes ahr-feedback-type {
    0%, 40% { max-width: 1em; }
    40.01%, 100% { max-width: 0; }
  }

  @keyframes ahr-feedback-caret {
    0%, 31.43% { opacity: 0; }
    31.62%, 54.76% { opacity: 1; }
    55.24%, 100% { opacity: 0; }
  }

  @keyframes ahr-feedback-form {
    0%, 4.67% { opacity: 0; transform: translateY(0.6em) scale(0.985); }
    9.52%, 60% { opacity: 1; transform: none; }
    65.71%, 100% { opacity: 0; transform: translateY(0.3em); }
  }

  @keyframes ahr-feedback-long {
    0%, 16.67% { border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5); background: var(--dk-surface, #fff); }
    17.62%, 60% { border-color: var(--dk-selected, #227e9e); background: var(--dk-selected-surface, #e4f1f7); }
    60.95%, 100% { border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5); background: var(--dk-surface, #fff); }
  }

  @keyframes ahr-feedback-inaccurate {
    0%, 23.52% { border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5); background: var(--dk-surface, #fff); }
    24.48%, 60% { border-color: var(--dk-selected, #227e9e); background: var(--dk-selected-surface, #e4f1f7); }
    60.95%, 100% { border-color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.5); background: var(--dk-surface, #fff); }
  }

  @keyframes ahr-feedback-focus {
    0%, 30.95% { border-color: var(--rw-border); box-shadow: none; }
    31.62%, 60% { border-color: var(--rw-selected); box-shadow: 0 0 0 1px var(--rw-selected); }
    60.95%, 100% { border-color: var(--rw-border); box-shadow: none; }
  }

  @keyframes ahr-feedback-placeholder {
    0%, 31.43% { opacity: 1; }
    31.62%, 66.19% { opacity: 0; }
    66.67%, 100% { opacity: 1; }
  }

  @keyframes ahr-feedback-submit {
    0%, 55.71% { transform: none; background: var(--dk-cta, #3a3632); }
    56.67%, 58.10% { transform: scale(0.97); background: var(--dk-cta-hover, #25211e); }
    59.52%, 100% { transform: none; background: var(--dk-cta, #3a3632); }
  }

  @keyframes ahr-feedback-thumb-filled {
    0%, 62.38% { opacity: 0; }
    63.81%, 90.48% { opacity: 1; }
    92.38%, 100% { opacity: 0; }
  }

  @keyframes ahr-feedback-toast {
    0%, 60.48% { opacity: 0; transform: translateY(1.5em); }
    66.19%, 87.62% { opacity: 1; transform: none; }
    93.81%, 100% { opacity: 0; transform: translateY(0.75em); }
  }
}

/* Unlayered on purpose: when the page is embedded in a host that sets its own
   unlayered body styles (e.g. a preview wrapper), those would beat every
   @layer rule above. Re-assert the page's own body basics here. */
body.site-home {
  background: #ffffff;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}

:root[data-theme="dark"] body.site-home {
  background: var(--color-hero);
}

:root[data-theme="dark"] .case-study p kbd {
  border-color: rgb(241 239 237 / 0.3);
  background: #262523;
  color: #f1efed;
}

/* Hero intro: full content width */
@layer utilities {
  .site-home .hero__copy {
    display: block;
  }

  .site-home .hero__text,
  .site-home .hero__intro,
  .site-home .hero__intro p {
    width: 100%;
    max-width: none;
  }
}

@layer utilities {
  /* Visual Space Overview: clickable map with a locations list and an action
     panel. Pins counter-scale so they stay the same size while the map zooms. */
  .case-live-component .vsm-study {
    display: grid;
    width: 100%;
    gap: 0;
  }

  .vsm-study > .demo-status {
    justify-self: center;
    margin: 0;
    padding: 0.85rem 1.25rem 1rem;
    text-align: center;
  }

  .vsm {
    position: relative;
    height: 28rem;
    overflow: hidden;
    background: var(--dk-map, #d7e5f3);
    container-type: inline-size;
  }

  .vsm__scene {
    --vsm-zoom: 1;
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .vsm__raster {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  .case-live-component .prototype .vsm-pin {
    position: absolute;
    width: 1.25rem;
    min-width: 0;
    height: 1.25rem;
    min-height: 0;
    padding: 0;
    border: 2px solid var(--dk-surface, #fff);
    border-radius: 50%;
    background: var(--dk-selected, #227e9e);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.28);
    cursor: pointer;
    transform: translate(-50%, -50%) scale(calc(1 / var(--vsm-zoom)));
    transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 150ms ease;
  }

  .case-live-component .prototype .vsm-pin:hover {
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.28), 0 0 0 0.3rem rgb(var(--dk-selected-rgb, 34 126 158) / 0.25);
  }

  .case-live-component .prototype .vsm-pin.is-selected {
    background: var(--dk-ink, #161513);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.28), 0 0 0 0.4rem rgb(var(--dk-selected-rgb, 34 126 158) / 0.35);
  }

  .vsm__list,
  .vsm__detail {
    position: absolute;
    z-index: 2;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 0.75rem;
    background: var(--dk-surface-subtle, #fbf9f8);
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.2);
    color: var(--dk-ink, #161513);
  }

  .vsm__list {
    top: 1rem;
    left: 1rem;
    display: grid;
    width: 15rem;
    gap: 0.25rem;
    padding: 0.75rem;
  }

  .vsm__list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem 0.35rem;
    font-size: 0.875rem;
  }

  .vsm__list-header span {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.75rem;
  }

  .vsm__search {
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
    border-radius: 0.25rem;
    background: var(--dk-surface, #fff);
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.8125rem;
  }

  .case-live-component .prototype .vsm-row {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dk-ink, #161513);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
  }

  .case-live-component .prototype .vsm-row b {
    font-weight: 600;
  }

  .case-live-component .prototype .vsm-row span {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.75rem;
    font-weight: 400;
  }

  .case-live-component .prototype .vsm-row:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.05);
  }

  /* Selected: just the light blue fill, no outline. */
  .case-live-component .prototype .vsm-row.is-selected {
    background: var(--dk-selected-surface, #e4f1f7);
  }

  .vsm__detail {
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    width: 16rem;
    align-content: start;
    padding: 1.25rem;
    overflow: auto;
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
  }

  .vsm__detail.is-open {
    opacity: 1;
    transform: none;
  }

  .case-live-component .prototype .vsm__close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: grid;
    width: 2rem;
    min-height: 2rem;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--dk-ink, #161513);
    font-size: 1.35rem;
    font-weight: 400;
  }

  .case-live-component .prototype .vsm__close:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.06);
  }

  .vsm__kind {
    margin: 0;
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Same text styling as the Locations panel header, not the display
     heading styles an h4 would otherwise pick up. */
  .vsm__name {
    margin: 0.3rem 2rem 0.35rem 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.5;
  }

  .vsm__meta,
  .vsm__address,
  .vsm__hours {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .vsm__meta {
    font-weight: 600;
  }

  .vsm__address,
  .vsm__hours {
    color: rgb(var(--dk-ink-rgb, 22 21 19) / 0.7);
  }

  .vsm__actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--dk-ink-rgb, 22 21 19) / 0.12);
  }

  .vsm__actions .button-specimen {
    width: 100%;
  }

  /* Narrow windows: the map starts below the list, and the action panel
     becomes a bottom sheet. */
  @container (max-width: 34rem) {
    .vsm__scene {
      top: 11.5rem;
    }

    .vsm__search,
    .vsm__hours {
      display: none;
    }

    .case-live-component .prototype .vsm-row {
      min-height: 2.25rem;
    }

    .vsm__list {
      top: 0.75rem;
      right: 0.75rem;
      left: 0.75rem;
      width: auto;
    }

    .vsm__detail {
      top: auto;
      right: 0.75rem;
      bottom: 0.75rem;
      left: 0.75rem;
      width: auto;
      padding: 1rem;
      transform: translateY(calc(100% + 1.5rem));
    }

    .vsm__actions {
      grid-template-columns: 1fr 1fr;
      margin-top: 0.75rem;
      padding-top: 0.75rem;
    }

    .vsm__actions .button-specimen--cta {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 34rem) {
    .vsm {
      height: 40rem;
    }
  }

  :root[data-motion-preference="reduced"] .vsm__scene,
  :root[data-motion-preference="reduced"] .case-live-component .prototype .vsm-pin,
  :root[data-motion-preference="reduced"] .vsm__detail {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .vsm__scene,
    .case-live-component .prototype .vsm-pin,
    .vsm__detail {
      transition: none;
    }
  }
}

@layer utilities {
  /* Lift each case-study content column above its heading column so the
     windows' drop shadows are never painted over on either side. */
  .case-hero > .case-motion,
  .case-section > .case-overview__content,
  .case-section > .case-guidelines,
  .case-section > .case-specs-handoff {
    position: relative;
    z-index: 2;
  }
}

@layer utilities {
  /* The three stars from the hero GIF, cut apart and scattered across the
     whole first screen (sidebar included). The layer spans the viewport from
     the band's right edge; the stars sit behind the text. */
  /* No stacking context of its own, so the dark mode star can rise above the
     hero content (which would otherwise swallow its clicks) while the other
     stars stay behind the text. */
  .hero__stars {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    pointer-events: none;
  }

  .hero__star {
    position: absolute;
    display: block;
    height: auto;
    transition: transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
  }

  /* The smallest star is the dark mode toggle. */
  .hero__star {
    z-index: 0;
  }

  button.hero__star {
    z-index: 3;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
  }

  .hero__star img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Speech bubble shown for a moment after a star dodges the cursor. */
  .hero__star-bubble {
    position: absolute;
    bottom: 88%;
    left: 50%;
    padding: 0.35rem 0.7rem;
    border: 2px solid #161513;
    border-radius: 1rem;
    background: #fff;
    color: #161513;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 0.4rem) scale(0.85);
    transform-origin: bottom center;
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }

  .hero__star-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid #161513;
    border-bottom: 2px solid #161513;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .hero__star-bubble.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  .hero__star--one .hero__star-bubble {
    font-family: "Bangers", var(--font-sans);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.04em;
  }

  .hero__star--two .hero__star-bubble {
    font-family: "Caveat", var(--font-sans);
    font-size: 1.35rem;
  }

  .hero__star--three .hero__star-bubble {
    font-family: "Press Start 2P", monospace;
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1.5;
  }

  .hero__star.is-near-top .hero__star-bubble {
    top: 92%;
    bottom: auto;
    transform-origin: top center;
  }

  .hero__star.is-near-top .hero__star-bubble::after {
    top: 0;
    border: 0;
    border-top: 2px solid #161513;
    border-left: 2px solid #161513;
  }

  /* Sizes keep growing with the screen (no upper cap), following the smaller
     of its width and height so wide, short windows don't push the stars into
     the text. The top star grows upward and the bottom one grows from the
     bottom, so both keep clear of the intro. */
  .hero__star--one { bottom: 68.4%; left: 67.8%; width: max(6rem, min(15vw, 28svh)); }
  .hero__star--two { top: 63.8%; left: 10.9%; width: max(5rem, min(11vw, 20svh)); }
  .hero__star--three { bottom: 10.1%; left: 74%; width: max(3.75rem, min(7.75vw, 14svh)); }

  /* Phones: the intro runs longer, so the lower stars drop a little. */
  @media (max-width: 40rem) {
    .hero__star--one { bottom: 71%; }
    .hero__star--two { top: 73%; }
    .hero__star--three { bottom: 6%; }
  }
}

@layer utilities {
  /* Footer "Back to the top": all ink, no orange arrow or underline. */
  .footer-back-to-top,
  .footer-back-to-top:hover {
    border-bottom-color: transparent;
  }

  .footer-contact,
  .footer-contact:hover {
    border-bottom-color: transparent;
  }

  .footer-back-to-top span,
  .footer-back-to-top:hover span {
    color: var(--color-ink);
  }
}

@layer utilities {
  /* Case titles set in fixed lines (Visual Space / Page Template): each line
     stays whole and fitCaseTitle() sizes the type to fill the column, until
     the hero stacks. */
  .case-title--lines .case-title__line {
    display: block;
    width: max-content;
    white-space: nowrap;
  }

  /* Once the hero stacks, the title wraps naturally again. */
  @media (max-width: 48rem) {
    .case-title--lines .case-title__line {
      display: inline;
      font-size: inherit;
      white-space: normal;
    }
  }
}

@layer utilities {
  /* Case-study footer links: ink arrows and underlines, no red. */
  .case-next {
    --case-warm-accent: var(--color-ink);
  }
}

/* Dark theme, toggled by catching the smallest hero star. The portfolio chrome
   goes dark, and the Redwood specimens (card previews, reels, live components,
   spec boards) switch to a dark Redwood palette through the --dk-* tokens.
   Specimen rules read var(--dk-*, <light value>), so these tokens only exist
   in dark mode and the light theme keeps its exact original colors. */
@layer tokens {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-ink: #f2efe9;
    --color-ink-body-muted: #bcb8af;
    --color-line: rgba(242, 239, 233, 0.16);
    --color-line-strong: rgba(242, 239, 233, 0.42);
    --color-accent-deep: #ff9a6e;
    --color-danger: #ff8274;
    --color-hero: #0e0e0d;
    --color-white: #181816;
    --color-canvas: #121211;
    --color-surface: #1b1b19;
    --color-slate: #a9c9b8;
    --shadow-float: 0 1.2rem 3.4rem rgba(0, 0, 0, 0.5);
    --shadow-small: 0 0.35rem 1rem rgba(0, 0, 0, 0.45);

    /* Dark Redwood specimen palette. */
    --dk-surface: #262523;
    --dk-surface-rgb: 38 37 35;
    --dk-surface-subtle: #211f1e;
    --dk-surface-muted: #141413;
    --dk-solid: #3a3836;
    --dk-line-strong: #4a4845;
    --dk-ink: #f1efed;
    --dk-ink-rgb: 241 239 237;
    --dk-muted: #b9b5af;
    --dk-on-strong: #161513;
    --dk-selected: #6ab7d6;
    --dk-selected-rgb: 106 183 214;
    --dk-selected-strong: #8ccbe4;
    --dk-selected-surface: #17323d;
    --dk-cta: #ece9e4;
    --dk-cta-rgb: 236 233 228;
    --dk-cta-hover: #f7f5f2;
    --dk-danger: #ff8a78;
    --dk-feedback-neutral: #e0b14d;
    --dk-feedback-happy: #5cc794;
    --dk-map: #1c2833;
    --dk-chip: rgb(241 239 237 / 0.1);
  }
}

@layer utilities {
  /* One black for the whole page (hero included) so no band or footer
     shows a seam. */
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] .work-project-panel,
  :root[data-theme="dark"] .site-footer,
  :root[data-theme="dark"] .site-home .site-header.is-scrolled:not(.is-over-hero)::before {
    background: var(--color-hero);
  }

  /* Pages without the home rail get a translucent dark bar when scrolled; the
     home header stays transparent, as in the light theme. */
  :root[data-theme="dark"] body:not(.site-home) .site-header.is-scrolled {
    background: rgb(14 14 13 / 0.9);
  }

  :root[data-theme="dark"] :is(.case-motion, .project-card__motion-wrap, .case-live-component, .case-specs-handoff__preview, .case-specification) {
    color-scheme: dark;
  }

  /* The city map is a light raster; invert it into a night map. */
  :root[data-theme="dark"] :is(.rw-map-raster, .vsm__raster) {
    filter: invert(0.92) hue-rotate(180deg) saturate(0.8) brightness(0.95);
  }

  /* Spec boards are screenshots of light Figma pages; the same night filter
     (invert, then rotate hues back) turns them into dark pages. */
  :root[data-theme="dark"] .case-specs-handoff__preview img {
    filter: invert(0.9) hue-rotate(180deg) brightness(1.05) contrast(0.95);
  }

  /* Case study surfaces. */
  :root[data-theme="dark"] :is(.case-study, .case-study[data-group="composites"]) {
    --case-warm-accent: #ff9903;
    background: #121211;
  }

  :root[data-theme="dark"] .case-hero,
  :root[data-theme="dark"] .case-next {
    border-color: var(--color-line);
    background: #1a1a18;
  }

  :root[data-theme="dark"] .case-dos-donts__card {
    background: #1f1f1d;
  }

  :root[data-theme="dark"] .case-dos-donts__card > p:last-child {
    color: var(--color-ink);
  }

  :root[data-theme="dark"] .case-dos-donts {
    border-color: var(--color-line);
    background: var(--color-line);
  }

  :root[data-theme="dark"] .case-guidelines__section + .case-guidelines__section,
  :root[data-theme="dark"] .case-guideline-reference__group + .case-guideline-reference__group,
  :root[data-theme="dark"] .case-accessibility-reference__group + .case-accessibility-reference__group {
    border-color: var(--color-line);
  }

  :root[data-theme="dark"] :is(.case-guideline-reference__title, .case-accessibility-reference__title, .case-detail-kicker, .case-detail-list li) {
    color: var(--color-ink-body-muted);
  }

  :root[data-theme="dark"] .case-detail-list li::before {
    background: var(--color-ink);
  }
}

@layer utilities {
  /* A taller map window in the case study header than on the card, in a
     taller 16:10 frame so it clears the Reduce motion control. Phones keep
     the original size. */
  @media (min-width: 48.0625rem) {
    .case-study .case-motion:has(.redwood-preview--visual-space) {
      min-height: 0;
      aspect-ratio: 16 / 10;
    }

    /* Reserve the Reduce motion control's band at the bottom; the map fills
       the rest, up to 15rem tall. */
    .case-study .case-motion .motion-stage.redwood-preview--visual-space {
      padding: 1.25rem 1.25rem 4.75rem;
    }

    .case-study .case-motion .rw-visual-space-run {
      height: min(15rem, 100%);
      min-height: 0;
    }
  }
}

@layer utilities {
  /* The card's map window keeps the case-study header's 32:15 proportions, so
     both read alike. Narrow cards keep the original minimum height. */
  .project-card .rw-visual-space-run {
    aspect-ratio: 32 / 15;
  }
}

@layer utilities {
  /* Tools Used and Other Roles follow the component collections in the
     Oracle panel, in the same section heading style. */
  .work-extra {
    margin-top: var(--space-9);
  }

  /* A rule separates Other Roles from the component collections. */
  .work-extra[aria-labelledby="roles-title"] {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  @media (min-width: 64.0625rem) {
    .site-home .work-project-panel--azeem > .work-extra {
      grid-column: 1 / -1;
    }
  }

  /* Other Roles matches the overview title: same display face and size. */
  .work-extra .project-collection__heading h3 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5.2vw, 5.4rem);
  }

  /* Room between the Other Roles title and the role below it. */
  .work-extra > .project-collection__heading {
    margin-bottom: var(--space-7);
  }

  /* The role title and subtitle use the Atomics heading pattern. */
  .project-collection__heading h4 {
    font-size: clamp(1.85rem, 3vw, 3rem);
  }

  .role-list {
    display: grid;
    gap: var(--space-7);
  }

  /* Event photos in two rows: the party beside bingo and blanket tying,
     then Config beside a wide crop of the plants. Portraits set the row
     height; the wide shots fill it. Phones stack them in one column. */
  .role__gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);  /* collapses with the heading's margin, so this is the full gap */
  }

  .role__photo {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 0.75rem;
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
  }

  .role__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .role__photo:first-child,
  .role__photo:last-child {
    grid-column: span 2;
    aspect-ratio: auto;
    contain: size;
  }

  .role__photo:last-child {
    grid-column: span 3;
  }

  /* The same lift as the project cards on hover. */
  .role__photo:hover {
    transform: translateY(-0.35rem);
    box-shadow: var(--shadow-float);
  }

  /* Captions rise in over a soft shade on hover or focus; touch screens,
     which can't hover, show them all the time. */
  .role__photo figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 2.5rem 1rem 0.9rem;
    background: linear-gradient(to top, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0));
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .role__photo:hover figcaption,
  .role__photo:focus-visible figcaption {
    opacity: 1;
    transform: none;
  }

  .role__photo:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
  }

  @media (hover: none) {
    .role__photo figcaption {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .role__photo,
    .role__photo figcaption {
      transition: none;
    }

    .role__photo:hover {
      transform: none;
    }
  }

  @media (max-width: 40rem) {
    .role__gallery {
      grid-template-columns: minmax(0, 1fr);
    }

    .role__photo {
      grid-column: auto;
    }

    /* Wide frames keep a fixed height before their lazy images load, so
       the page doesn't grow under the reader. */
    .role__photo:first-child,
    .role__photo:last-child {
      grid-column: auto;
      aspect-ratio: 4 / 3;
      contain: none;
    }
  }
}

@layer utilities {
  /* The conversation card's replies grow and shrink as they reveal. Size its
     preview by the card alone so that growth never changes the card's height
     and moves the page. */
  .project-card[data-project-card="conversation-item"] .project-card__motion-wrap {
    height: 13.5rem;
  }

  .project-card[data-project-card="conversation-item"] .motion-stage {
    height: 100%;
    contain: size;
  }

  @media (max-width: 35rem) {
    .project-card[data-project-card="conversation-item"] .project-card__motion-wrap {
      height: 12rem;
    }
  }
}

@layer utilities {
  /* The floated close button takes no height, so the full-width case header
     starts flush with the top of the dialog instead of below the button. */
  .case-dialog__close {
    margin-bottom: calc(-2.75rem - var(--space-4));
  }

  @media (max-width: 35rem) {
    .case-dialog__close {
      margin-bottom: calc(-2.75rem - var(--space-2));
    }
  }
}

@layer utilities {
  /* Tool logos ride in a small tab that sits on the case header's bottom
     rule, its left edge lined up with the header copy. Each names itself in
     a tooltip on hover or focus. */
  .case-hero {
    position: relative;
  }

  .case-hero__tools {
    position: absolute;
    bottom: 0;
    left: clamp(2rem, 5vw, 5rem);
    display: flex;
    gap: 0.85rem;
    padding: 0.7rem 0.95rem 0.65rem;
    border: 1px solid var(--color-line-strong);
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    background: inherit;
  }

  @media (max-width: 35rem) {
    .case-hero {
      padding-bottom: calc(var(--space-5) + 2.75rem);
    }

    .case-hero__tools {
      left: var(--space-5);
    }
  }

  .case-hero__tool {
    position: relative;
    display: block;
    border-radius: 0.25rem;
  }

  .case-hero__tool img {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    transition: transform var(--motion-fast) var(--ease-out);
  }

  /* A slight lift on hover or focus. */
  .case-hero__tool:hover img,
  .case-hero__tool:focus-visible img {
    transform: translateY(-2px) scale(1.12);
  }

  @media (prefers-reduced-motion: reduce) {
    .case-hero__tool img,
    .case-hero__tool::after {
      transition: none;
    }
  }

  .case-hero__tool::after {
    position: absolute;
    z-index: 2;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--color-ink);
    color: var(--color-canvas);
    content: attr(data-tip);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.2rem);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .case-hero__tool:hover::after,
  .case-hero__tool:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .case-hero__tool:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
  }
}

@layer utilities {
  /* Earfruits. The overview reuses the Oracle panel's heading, then the site
     reel, Branding, Promotional materials, and Tools used in the Other Roles
     section style. Brand colors, Nanum Myeongjo, and Switzer are earfruits'
     own; its specimens (identifiers, comments, logos on paper) stay light in
     the dark theme, like the site they come from. */
  .work-project-panel--earfruits {
    --ef-serif: "Nanum Myeongjo", "Iowan Old Style", Georgia, serif;
    --ef-sans: Switzer, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ef-ink: #111111;
    --ef-muted: color-mix(in srgb, #111111 55%, transparent);
    --ef-line: color-mix(in srgb, #111111 18%, transparent);
    --ef-soft-line: color-mix(in srgb, #111111 10%, transparent);
    --ef-button: #cc0088;
    --ef-spectrum: repeating-linear-gradient(90deg, #ff282c 0px, #2085ff 30px, #ba0874 60px, #88b609 90px, #00b99c 120px, #ff5100 150px, #ff9290 180px, #ff282c 240px);
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  /* Each project's title has its own face; Earfruits uses the site's title
     serif, Nanum Myeongjo, in bold. */
  .work-project-panel--earfruits .work-heading__title {
    font-family: var(--ef-serif);
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  /* The animated site mark stands in for "earfruits". Its drawing fills
     73% of the GIF's height and ends 14% above the bottom, so this sizes the
     mark to about the title's cap height and sets its bottom on the
     baseline. */
  .ef-title-logo {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    margin-top: -0.3em;
    vertical-align: -0.186em;
  }

  :root[data-theme="dark"] .ef-title-logo {
    filter: invert(1);
  }

  .work-project-panel--earfruits .work-heading__note a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }

  /* The discipline chips swap their dot for an earfruits icon. */
  .work-heading__tags--fruits span::before {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0;
    -webkit-mask: var(--ef-fruit) center / contain no-repeat;
    mask: var(--ef-fruit) center / contain no-repeat;
  }

  /* The comment section's ear and crayon icons, in their colors there. */
  .work-heading__tag--ear::before {
    --ef-fruit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5a6 6 0 1 1 12 0c0 3.5-2.5 4.6-3.5 6.5-.9 1.7-1.1 4.2-3.7 4.5-1.5.2-2.8-.6-3.3-1.9'/%3E%3Cpath d='M9 9a3 3 0 1 1 6 0c0 1.6-1.4 2.1-2 3.2'/%3E%3C/svg%3E");
    background: #4488f2;
  }

  .work-heading__tag--crayon::before {
    --ef-fruit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5 6 14 16.5 3.5a2.1 2.1 0 0 1 3 3L9 17Z'/%3E%3Cpath d='M6 14l4 3'/%3E%3Cpath d='M13.5 6.5l3 3'/%3E%3C/svg%3E");
    background: #96b73b;
  }

  .ef-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  /* Branding follows the covers directly, without a title or divider. */
  .ef-section--untitled {
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: 0;
  }

  /* Sub-sections stack their title over a short intro. */
  .ef-block + .ef-block {
    margin-top: var(--space-9);
  }

  .ef-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  /* Subtitles share the overview paragraph's measure. */
  .ef-block > .project-collection__heading p {
    max-width: min(var(--work-intro-measure), 100%);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  /* Logo lockups, in black, white, red, and green only: each fruit mark on
     black over the same mark on white, the wordmark on both, then the mango
     mark locked up with the wordmark on red and green. Marks are masks, so
     one file draws in any ink. */
  .ef-logo-group {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ef-logo-group:has(+ .ef-logo-note) {
    margin-bottom: 0.25rem;
  }

  /* Same as the block subtitles above it. */
  .ef-logo-note {
    max-width: min(var(--work-intro-measure), 100%);
    margin-bottom: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .ef-block > .project-collection__heading + .ef-logo-group {
    margin-top: 0;
  }

  .ef-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
  }

  .ef-logo,
  .ef-mark-pair {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    margin: 0;
  }

  .ef-mark-pair {
    gap: var(--space-2);
  }

  .ef-logo--wide {
    grid-column: span 2;
  }

  /* The white wordmark leads the row of colored ones, at their height. */
  .ef-logo--full {
    grid-column: 1 / -1;
  }

  .ef-logo--full .ef-tile {
    aspect-ratio: 4 / 1;
    padding: 3.5% 30%;
  }

  .ef-tile {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 17%;
    border-radius: 0.75rem;
  }

  .ef-logo--wide .ef-tile {
    aspect-ratio: 2 / 1;
    padding: 7% 12%;
  }

  .ef-tile--black { background: #000000; color: #ffffff; }
  .ef-tile--white { border: 1px solid var(--color-line); background: #ffffff; color: #000000; }
  .ef-tile--red { background: #ea4237; color: #ffffff; }
  .ef-tile--green { background: #5e922a; color: #ffffff; }
  .ef-tile--plum { background: #a92772; color: #ffffff; }
  .ef-tile--blue { background: #4388f2; color: #ffffff; }

  .ef-ink {
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: var(--ef-art) center / contain no-repeat;
    mask: var(--ef-art) center / contain no-repeat;
  }

  .ef-ink--apple { --ef-art: url("assets/earfruits/logo-apple.svg"); }
  .ef-ink--banana { --ef-art: url("assets/earfruits/logo-banana.svg"); }
  .ef-ink--cherry { --ef-art: url("assets/earfruits/logo-cherry.svg"); }
  .ef-ink--mango { --ef-art: url("assets/earfruits/logo-mango.svg"); }
  .ef-ink--wordmark { --ef-art: url("assets/earfruits/logo-wordmark-alt.svg"); }

  /* Lockups sit centered in their tile: the wordmark at full height and the
     fruit mark beside it, pulled in past the drawings' own margins. */
  .ef-lockup {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .ef-lockup .ef-ink {
    flex: none;
    height: auto;
  }

  .ef-lockup .ef-ink--wordmark {
    width: 46%;
    aspect-ratio: 1575 / 898;
  }

  .ef-lockup .ef-ink:not(.ef-ink--wordmark) {
    width: 17%;
    aspect-ratio: 1;
  }

  .ef-lockup--horizontal .ef-ink:not(.ef-ink--wordmark) {
    margin-right: -3.1%;
  }

  /* Don'ts: the mark stacked over or under the wordmark. */
  .ef-logos--donts {
    margin-top: var(--space-5);
  }

  .ef-lockup--stacked {
    flex-direction: column;
    gap: 2%;
  }

  .ef-lockup--stacked .ef-ink--wordmark {
    width: 46%;
  }

  .ef-lockup--stacked .ef-ink:not(.ef-ink--wordmark) {
    width: 17%;
  }

  .ef-logo--dont figcaption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .ef-dont {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #ea4237;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
  }

  /* Nudges that center each lockup's drawn ink, not its boxes, in the tile. */
  .ef-lockup--horizontal:not(.ef-lockup--trailing) {
    transform: translateX(-1.1%);
  }

  /* The banana's high tail makes the trailing lockup feel top-left heavy, so
     it sits a touch right and lower than its measured center. */
  .ef-lockup--trailing {
    transform: translate(1.55%, 5%);
  }

  /* Trailing: the mark after the wordmark, tucked against the "s" and riding
     a little high. */
  .ef-lockup--trailing .ef-ink:not(.ef-ink--wordmark) {
    margin-right: 0;
    margin-left: -3.7%;
    transform: translateY(-12%);
  }

  .ef-logo figcaption,
  .ef-mark-pair figcaption,
  .ef-swatches small,
  .ef-moments small {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* Applications: the mark over artist photography. */
  .ef-applications {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ef-applications figure {
    margin: 0;
  }

  .ef-applications img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: var(--space-2);
    object-fit: cover;
    border-radius: 0.75rem;
  }

  .ef-applications figcaption {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ef-applications--donts {
    margin-top: var(--space-5);
  }

  /* A photo with the apple mark laid over it, sized like the real
     applications above. */
  .ef-photo-mark {
    position: relative;
    display: block;
    margin-bottom: var(--space-2);
    color: #ffffff;
  }

  .ef-applications .ef-photo-mark img {
    margin-bottom: 0;
  }

  .ef-photo-mark .ef-ink {
    position: absolute;
    inset: 18%;
    width: auto;
    height: auto;
  }

  .ef-photo-mark--plum {
    color: #a92772;
  }

  @media (max-width: 40rem) {
    .ef-applications {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Colors */
  .ef-swatches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
    list-style: none;
  }

  .ef-swatches li {
    display: grid;
    align-content: start;
    gap: 0.15rem;
  }

  .ef-swatch__chip {
    aspect-ratio: 3 / 2;
    margin-bottom: var(--space-2);
    border-radius: 0.75rem;
    background: var(--ef-swatch);
  }

  .ef-swatches strong,
  .ef-moments strong {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ef-swatches code {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
  }

  /* Typography */
  .ef-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ef-type__specimen {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: var(--color-surface);
  }

  .ef-type__aa {
    color: var(--color-ink);
    font-size: clamp(4rem, 7vw, 6.25rem);
    line-height: 1;
  }

  .ef-type__specimen--serif :is(.ef-type__aa, .ef-type__sample) {
    font-family: var(--ef-serif);
  }

  /* The sample title in the heavy cut the site uses for post titles. */
  .ef-type__specimen--serif .ef-type__sample {
    font-weight: 800;
    letter-spacing: -0.04em;
  }

  .ef-type__specimen--sans :is(.ef-type__aa, .ef-type__sample) {
    font-family: var(--ef-sans);
    font-weight: 500;
  }

  .ef-type__specimen strong {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .ef-type__sample {
    margin: 0.35rem 0 0.6rem;
    color: var(--color-ink);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.2;
  }

  .ef-type__specimen small {
    display: block;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* Tone: each principle ends on a line from the site, highlighted like an
     album identifier. */
  .ef-tone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-3);
    list-style: none;
  }

  .ef-tone li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: var(--color-surface);
  }

  .ef-tone li:nth-child(1) { --ef-hl: #ea4237; }
  .ef-tone li:nth-child(2) { --ef-hl: #4388f2; }
  .ef-tone li:nth-child(3) { --ef-hl: #96b73b; }
  .ef-tone li:nth-child(4) { --ef-hl: #a92772; }
  .ef-tone li:nth-child(5) { --ef-hl: #54b595; }
  .ef-tone li:nth-child(6) { --ef-hl: #1c05da; }

  .ef-tone strong {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ef-tone p {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .ef-tone q {
    width: fit-content;
    margin-top: auto;
    padding: 0.2em 0.4em;
    background: var(--ef-hl);
    color: #ffffff;
    font-family: var(--ef-sans);
    font-size: 0.95rem;
    line-height: 1.35;
  }

  /* UX methodology: a live specimen beside its reasoning. */
  .ef-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--space-5), 4vw, var(--space-8));
  }

  .ef-spotlight + .ef-spotlight,
  .ef-moments + .ef-spotlight,
  .ef-crayon + .ef-spotlight {
    margin-top: var(--space-8);
  }

  .ef-spotlight__stage {
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ef-ink);
    font-family: var(--ef-sans);
  }

  /* Each demo window sits to the right of its copy on wide screens. */
  .ef-spotlight {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .ef-spotlight__stage {
    order: 2;
  }

  /* Article subsection titles match the Little moments tile titles. */
  .ef-spotlight__copy > strong,
  .ef-subhead h5,
  .ef-crayon figcaption > strong {
    display: block;
    margin: 0 0 0.15rem;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.45;
  }

  .ef-spotlight__copy > p,
  .ef-subhead > p {
    margin-bottom: var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ef-subhead {
    max-width: min(var(--work-intro-measure), 100%);
    margin-bottom: var(--space-5);
  }

  .ef-defs {
    margin: 0 0 var(--space-5);
    border-bottom: 1px solid var(--color-line);
  }

  .ef-defs div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: 0.5rem;
    border-top: 1px solid var(--color-line);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ef-defs dt {
    color: var(--color-ink);
    font-family: var(--ef-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
  }

  /* Article bullets sit at the same caption size as the descriptions. */
  .ef-points li {
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ef-defs dd {
    margin: 0;
    color: var(--color-ink-muted);
  }

  /* Album identifiers, as the site sets them: serif labels, sans values, and
     one color bar per identifier. Hovering a row runs the spectrum. */
  .ef-identifiers {
    display: grid;
    justify-items: start;
    color: #ffffff;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.55vw, 1.3rem);
    line-height: 1.3;
    list-style: none;
  }

  .ef-identifiers li {
    max-width: 100%;
    outline-offset: 2px;
  }

  .ef-identifiers li > span {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 0.32em 0.25em 0.32em 0.4em;
    background-color: var(--ef-row);
    transform-origin: left center;
    transition: transform var(--motion-fast) var(--ease-out);
  }

  /* Rows grow a touch on hover, like they do on the site. */
  .ef-identifiers li:is(:hover, :focus-visible) > span {
    position: relative;
    z-index: 1;
    transform: scale(1.04);
  }

  .ef-identifiers b {
    font-family: var(--ef-serif);
    font-size: 1.08em;
    font-weight: 400;
  }

  .ef-crumb:is(:hover, :focus-visible) {
    background-image: var(--ef-spectrum);
    background-size: 240px 100%;
    animation: ef-spectrum 2s linear infinite;
  }

  .ef-identifiers li:focus-visible {
    outline: 2px solid var(--ef-ink);
  }

  @keyframes ef-spectrum {
    to {
      background-position: 240px 50%;
    }
  }

  .ef-feelin {
    margin-top: 0.9rem;
    padding: 0.18em 1.1em 0.17em;  /* evens the space above and below the lettering */
    text-align: center;
    border: 1px solid #222222;
    border-radius: 0.5rem;
    background: linear-gradient(#e5602f, #f2a493);
    color: #ffffff;
    font-family: var(--ef-serif);
    font-size: clamp(1.05rem, 1.75vw, 1.4rem);
    line-height: 1.4;
  }

  .ef-feelin {
    transition: transform var(--motion-fast) var(--ease-out);
  }

  /* Like the identifier rows, the button just grows on hover. */
  .ef-feelin:is(:hover, :focus-visible) {
    transform: scale(1.04);
  }

  /* "got me feelin like" pops the reviewer's chosen media up over the page;
     a click anywhere else puts it away (a native popover, light dismiss). */
  .ef-feelin-pop {
    width: min(12rem, calc(100vw - 2rem));
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    box-shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 0.3);
  }

  .ef-feelin-pop::backdrop {
    background: transparent;
  }

  .ef-feelin-pop:popover-open {
    animation: ef-feelin-in var(--motion-base) var(--ease-out);
  }

  /* The whole photo, with just a sliver trimmed off the left edge. */
  .ef-feelin-pop img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 451 / 425;
    object-fit: cover;
    object-position: 100% 50%;
  }

  @keyframes ef-feelin-in {
    from {
      opacity: 0;
      transform: scale(0.94);
    }
  }

  /* Comment section, rebuilt from the Framer component's own defaults:
     Switzer 13px medium, 8px radii, and the ear, crayon, cherry, and mango
     icons in their palette colors. */
  .ef-comments {
    display: grid;
    gap: 10px;
    max-width: 28rem;
    color: var(--ef-ink);
    font-family: var(--ef-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  .ef-comments :is(button, input, textarea) {
    font: inherit;
    letter-spacing: inherit;
  }

  .ef-comments__field {
    position: relative;
    display: block;
  }

  .ef-comments__field :is(input, textarea) {
    display: block;
    width: 100%;
    padding: 8px 10px 8px 39px;
    border: 1px solid var(--ef-line);
    border-radius: 8px;
    background: transparent;
    color: var(--ef-ink);
  }

  .ef-comments__field textarea {
    min-height: 72px;
    resize: vertical;
  }

  .ef-comments ::placeholder {
    color: var(--ef-muted);
    opacity: 1;
  }

  .ef-icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }

  .ef-comments__field .ef-icon {
    position: absolute;
    top: 50%;
    left: 11px;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .ef-comments__field--message .ef-icon {
    top: 8px;
    transform: none;
  }

  .ef-icon--ear { color: #4488f2; }
  .ef-icon--crayon { color: #96b73b; }
  .ef-icon--cherry { color: var(--ef-button); }
  .ef-icon--mango { color: #e56532; }

  .ef-comments__actions,
  .ef-comment__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .ef-comments__actions > div {
    display: flex;
    gap: 8px;
    white-space: nowrap;
  }

  .ef-comments__post,
  .ef-comments__toggle {
    padding: 1px 7px;
    border: 1px solid #000000;
    border-radius: 8px;
    background: transparent;
    color: #000000;
  }

  .ef-comments__post {
    border-color: var(--ef-button);
    background: var(--ef-button);
    color: #ffffff;
  }

  .ef-comments__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ef-ink);
  }

  .ef-comments__count .ef-icon {
    width: 1.4em;
    height: 1.4em;
  }

  .ef-comments__list {
    display: grid;
    gap: 8px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--ef-soft-line);
  }

  .ef-comments__list[hidden] {
    display: none;
  }

  .ef-comment {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--ef-soft-line);
    border-radius: 8px;
  }

  .ef-comment strong {
    font-weight: 600;
    text-transform: lowercase;
  }

  .ef-comment p {
    white-space: pre-wrap;
  }

  .ef-comment__meta {
    color: var(--ef-muted);
  }

  .ef-comment__like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--ef-line);
    border-radius: 999px;
    background: transparent;
    color: var(--ef-ink);
  }

  .ef-comment__like[aria-pressed="true"] {
    border-color: #000000;
  }

  .ef-comment__like .ef-icon {
    width: 1.45em;
    height: 1.45em;
  }

  .ef-comment__like[aria-pressed="true"] .ef-icon path:first-child {
    fill: currentColor;
  }

  /* Crayon covers, set like the posts on the earfruits review grid: an 8px
     cover with the grid's layered shadow, a heavy Nanum Myeongjo title, and
     Switzer metadata. Hovering a post runs the breadcrumb spectrum on its
     title. */
  .ef-covers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    /* The same space the Oracle panel leaves between its chips and the
       divider above its controls. */
    margin-top: var(--space-6);
    list-style: none;
  }

  .ef-covers li {
    display: grid;
    align-content: start;
    gap: 2px;
    transition: transform var(--motion-base) var(--ease-out);
  }

  /* The whole post is the card: cover, title, and metadata scale together. */
  .ef-covers li:hover {
    transform: scale(1.08);
  }

  .ef-covers img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 8px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow:
      -0.12px 0.54px 0.56px -0.5px rgb(0 0 0 / 0.08),
      -0.46px 2.06px 2.11px -1px rgb(0 0 0 / 0.1),
      -2px 9px 9.22px -1.5px rgb(0 0 0 / 0.18);
  }

  .ef-covers strong {
    color: var(--color-ink);
    font-family: var(--ef-serif);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.2;
  }

  .ef-covers strong span {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .ef-covers li:hover strong span {
    background-image: var(--ef-spectrum);
    background-size: 240px 100%;
    color: #ffffff;
    animation: ef-spectrum 2s linear infinite;
  }

  .ef-covers small {
    display: flex;
    gap: 10px;
    color: var(--color-ink-muted);
    font-family: var(--ef-sans);
    font-size: 1rem;
    line-height: 1.2;
  }

  /* The crayon section pairs one finished cover with the photo of it being
     colored; 2fr / 3fr keeps the square cover and 3:2 photo the same height. */
  .ef-crayon {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-4);
  }

  .ef-crayon figure {
    margin: 0;
  }

  .ef-crayon img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow:
      -0.12px 0.54px 0.56px -0.5px rgb(0 0 0 / 0.08),
      -0.46px 2.06px 2.11px -1px rgb(0 0 0 / 0.1),
      -2px 9px 9.22px -1.5px rgb(0 0 0 / 0.18);
  }

  .ef-crayon figcaption {
    margin-top: 0.65rem;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }



  @media (max-width: 40rem) {
    .ef-crayon {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Little moments */
  .ef-moments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    list-style: none;
  }

  .ef-moments li {
    display: grid;
    align-content: start;
    gap: 0.15rem;
  }

  .ef-moments__stage {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  .ef-moments__stage img {
    width: 42%;
    height: auto;
  }

  .ef-moments li:nth-child(2) .ef-moments__stage img {
    width: 72%;
  }

  /* Each breadcrumb lights up on its own. */
  .ef-crumbs {
    display: flex;
    align-items: center;
    gap: 0.1em;
    color: #000000;
    font-family: var(--ef-sans);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
  }

  .ef-crumb {
    padding: 0.15em 0.4em;
    color: #000000;
    font-family: var(--ef-sans);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    cursor: default;
  }

  .ef-crumb:is(:hover, :focus-visible) {
    color: #ffffff;
  }

  /* Promotional materials: placeholders until the pieces are in. */
  /* Promo pieces as a three-column masonry. The markup runs column by column
     (video + flyer | mango + twizzlers | orange + lemon), so the column tops read
     video, mango, orange; each --col item starts a new column. Crops are set per photo
     so the three columns end at about the same height. */
  .ef-promo {
    column-count: 3;
    column-gap: var(--space-4);
  }

  .ef-promo__item {
    margin: 0 0 var(--space-4);
    break-inside: avoid;
  }

  .ef-promo__item--col {
    break-before: column;
  }

  .ef-promo :is(img, video) {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.75rem;
    background: var(--color-canvas-soft);
  }

  .ef-promo video {
    aspect-ratio: 1;
    background: #000000;
  }

  /* Promo pieces lift a touch on hover; the photos open larger in a lightbox. */
  .ef-promo__item {
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .ef-promo__item:is(:hover, :focus-within) {
    transform: translateY(-4px);
  }

  .ef-promo__item :is(img, .ef-player) {
    transition: box-shadow var(--motion-fast) var(--ease-out);
  }

  .ef-promo__item:is(:hover, :focus-within) :is(img, .ef-player) {
    box-shadow: 0 0.9rem 2rem rgb(0 0 0 / 0.18);
  }

  .ef-promo__open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    cursor: zoom-in;
  }

  .ef-promo__open:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
  }

  /* The lightbox: just the photo, cropped as in the grid, over a light scrim. Click anywhere or press Esc to close. */
  .ef-lightbox {
    max-width: 92vw;
    max-height: 92vh;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .ef-lightbox::backdrop {
    background: rgb(0 0 0 / 0.18);
  }

  .ef-lightbox img {
    display: block;
    width: auto;
    max-width: 92vw;
    height: auto;
    max-height: 88vh;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.35);
    cursor: zoom-out;
  }

  .ef-lightbox:popover-open {
    animation: ef-feelin-in var(--motion-base) var(--ease-out);
  }

  :root[data-motion-preference="reduced"] :is(.ef-promo__item, .ef-promo__item img, .ef-player, .ef-lightbox) {
    animation: none;
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ef-promo__item,
    .ef-promo__item img,
    .ef-player,
    .ef-lightbox {
      animation: none;
      transition: none;
    }
  }

  /* Promo video player, dressed in the earfruits kit: a white outlined control bar in Switzer,
     a spectrum progress fill, and an ear for sound. */
  .ef-player {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #000000;
    font-family: var(--ef-sans);
  }

  .ef-promo .ef-player video {
    border-radius: 0;
    cursor: pointer;
  }

  .ef-player__bar {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid #222222;
    border-radius: 0.6rem;
    background: #ffffff;
    color: var(--ef-ink);
    font-size: 0.72rem;
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  /* While playing, the bar tucks away until you hover or tab into the player. */
  .ef-player.is-playing:not(:hover, :focus-within) .ef-player__bar {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  .ef-player__btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .ef-player__btn:is(:hover, :focus-visible) {
    background: #eeeeee;
  }

  .ef-player__btn svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .ef-player__play,
  .ef-player__pause {
    fill: currentColor;
  }

  .ef-player__pause,
  .ef-player.is-playing .ef-player__play {
    display: none;
  }

  .ef-player.is-playing .ef-player__pause {
    display: block;
  }

  .ef-player__ear {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .ef-player__ear {
    color: #4388f2;
  }

  .ef-player__slash {
    display: none;
    color: var(--ef-ink);
  }

  .ef-player.is-muted .ef-player__slash {
    display: block;
  }

  .ef-player__time {
    flex: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ef-player__seek {
    flex: 1;
    min-width: 0;
    height: 0.4rem;
    margin: 0 0.25rem;
    border-radius: 999px;
    background: var(--ef-spectrum) 0 0 / var(--ef-progress, 0%) 100% no-repeat, #e4e4e4;
    cursor: pointer;
    appearance: none;
  }

  .ef-player__seek::-webkit-slider-thumb,
  .ef-player__volume::-webkit-slider-thumb {
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid #222222;
    border-radius: 50%;
    background: #ffffff;
    appearance: none;
  }

  .ef-player__seek::-moz-range-thumb,
  .ef-player__volume::-moz-range-thumb {
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid #222222;
    border-radius: 50%;
    background: #ffffff;
  }

  /* Volume: a short slider beside the ear, filled in suga blue. */
  .ef-player__volume {
    flex: none;
    width: 2.75rem;
    height: 0.4rem;
    margin-right: 0.2rem;
    border-radius: 999px;
    background: linear-gradient(#4388f2, #4388f2) 0 0 / var(--ef-volume, 30%) 100% no-repeat, #e4e4e4;
    cursor: pointer;
    appearance: none;
  }

  :root[data-motion-preference="reduced"] .ef-player__bar {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ef-player__bar {
      transition: none;
    }
  }

  /* Tools used */
  /* Just the tool icons, large, no tiles or labels (names live in the alt text). */
  .ef-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(var(--space-4), 3vw, var(--space-6));
    list-style: none;
  }

  .ef-tools img {
    display: block;
    width: clamp(3.5rem, 6vw, 4.5rem);
    height: clamp(3.5rem, 6vw, 4.5rem);
    object-fit: contain;
  }

  /* The crayons and notebook art has lots of empty space around it, so it runs larger to match. */
  .ef-tools img:is([src$="crayons.png"], [src$="notebook.png"]) {
    scale: 1.45;
  }

  /* So do the shop tools, which sit low and wide in their squares. */
  .ef-tools img:is([src$="guillotine-cutter.png"], [src$="wood.png"], [src$="cnc-machine.png"]) {
    scale: 1.35;
  }

  /* The microphone is tall and narrow, so its slot is only as wide as it is. */
  .ef-tools img[src$="microphone.png"] {
    width: auto;
    margin-left: 0.5rem;
  }

  /* Hover or focus an icon: it lifts a little and its name drops in below it. */
  .ef-tools li {
    position: relative;
    border-radius: 0.75rem;
    outline-offset: 4px;
  }

  .ef-tools img {
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .ef-tools li:is(:hover, :focus-visible) img {
    transform: translateY(-4px) scale(1.08);
  }

  .ef-tools li::after {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background: var(--color-ink);
    color: var(--color-canvas);
    content: attr(data-tip);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .ef-tools li:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  :root[data-motion-preference="reduced"] .ef-tools :is(img, li::after) {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ef-tools img,
    .ef-tools li::after {
      transition: none;
    }
  }

  /* Framer's and DaVinci Resolve's dark marks turn white on the dark theme. */
  :root[data-theme="dark"] .ef-tools img:is([src$="framer.svg"], [src$="davinci-resolve.svg"]) {
    filter: brightness(0) invert(1);
  }

  :root[data-motion-preference="reduced"] :is(.ef-identifiers li > span, .ef-crumb, .ef-covers strong span, .ef-covers li, .ef-feelin, .ef-feelin-pop) {
    animation: none !important;
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.ef-identifiers li > span, .ef-crumb, .ef-covers strong span, .ef-covers li, .ef-feelin, .ef-feelin-pop) {
      animation: none !important;
      transition: none;
    }
  }

  @media (max-width: 64rem) {
    .ef-spotlight {
      grid-template-columns: minmax(0, 1fr);
    }

    .ef-spotlight__stage {
      order: 0;
    }
  }

  @media (max-width: 48rem) {
    .ef-swatches {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ef-type,
    .ef-moments {
      grid-template-columns: minmax(0, 1fr);
    }

    .ef-promo {
      column-count: 2;
    }

    .ef-promo__item--col {
      break-before: auto;
    }
  }

  @media (max-width: 40rem) {
    .ef-covers {
      grid-template-columns: minmax(0, 1fr);
    }

    .ef-logos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ef-defs div {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.1rem;
    }
  }
}

@layer utilities {
  /* The Earfruits nav link borrows the site's breadcrumb hover: white text on
     the moving spectrum, in a band only as long and as tall as the text. */
  .site-nav__project[data-work-project-link="earfruits"]:is(:hover, :focus-visible, :active) {
    background-image: repeating-linear-gradient(90deg, #ff282c 0px, #2085ff 30px, #ba0874 60px, #88b609 90px, #00b99c 120px, #ff5100 150px, #ff9290 180px, #ff282c 240px);
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: 240px 1.35em;
    color: #ffffff;
    animation: ef-spectrum 2s linear infinite;
  }

  :root[data-motion-preference="reduced"] .site-nav__project[data-work-project-link="earfruits"] {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-nav__project[data-work-project-link="earfruits"] {
      animation: none !important;
    }
  }
}

@layer utilities {
  /* Hause. Same case-study rhythm as Earfruits (overview, cover, brand guide,
     then how it was built), dressed in Hause's own kit: Inter, the three wing
     colors on a gallery-wall gray, and open sky. Specimens and app screens stay
     light in the dark theme, like the app they come from. */
  .work-project-panel--hause {
    --ha-green: #14ff00;
    --ha-blue: #0047ff;
    --ha-pink: #ff3065;
    --ha-ink: #111111;
    --ha-wall: #f2f2f2;
    --ha-graphite: #a2a2a2;
    --ha-sans: Inter, "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ha-display: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ha-sky: url("assets/hause/brand/sky.jpg");
    --ha-aurora: radial-gradient(60% 55% at 0% 18%, #a9df89 0%, rgb(169 223 137 / 0) 72%), radial-gradient(55% 50% at 100% 22%, #b156cb 0%, rgb(177 86 203 / 0) 75%), radial-gradient(75% 55% at 75% 88%, #f5638a 0%, rgb(245 99 138 / 0) 72%), linear-gradient(180deg, #c6a6b5 0%, #ee9fb6 62%, #d8a0c8 100%);
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  /* Each project's title has its own face; Hause uses Inter Tight, the
     tightly tracked Inter of its headlines, with the mark standing in for
     the name. The large section titles share it. */
  .work-project-panel--hause .work-heading__title,
  .work-project-panel--hause .project-collection__heading h3 {
    font-family: var(--ha-display);
    font-weight: 600;
    letter-spacing: -0.045em;
  }

  /* Just the mark stands in for the name, at the title's cap height and
     sitting on the baseline, so the title stays on one line. It's a window
     onto the brand sky, with the clouds slowly drifting past inside it. */
  /* The Hause nav link turns into the logotype on hover, one letter at a
     time: each letter slides to where its HAUSE glyph sits and fades out as
     the glyph sharpens in. script.js measures --dx, the distance from a
     letter to its glyph; --gx and --gw are the glyph's place and width in the
     logotype (370 x 69.6 units, drawn 0.74em tall). */
  .ha-nav-word {
    position: relative;
    white-space: nowrap;
  }

  .ha-nav-letter {
    position: relative;
    display: inline-block;
    --ha-nav-ease: cubic-bezier(0.45, 0.05, 0.25, 1);
    --ha-nav-delay: calc(var(--i) * 55ms);
  }

  .ha-nav-letter b {
    display: inline-block;
    font-weight: inherit;
    transition: transform 0.45s var(--ha-nav-ease) var(--ha-nav-delay), opacity 0.3s ease var(--ha-nav-delay), filter 0.3s ease var(--ha-nav-delay);
  }

  .ha-nav-letter i {
    position: absolute;
    top: 50%;
    left: var(--dx, 0px);
    width: calc(var(--gw) * 1em);
    height: 0.74em;
    background: var(--color-ink);
    opacity: 0;
    filter: blur(2px);
    transform: translate(calc(-1 * var(--dx, 0px)), -50%) scale(0.5, 0.8);
    transform-origin: left center;
    pointer-events: none;
    -webkit-mask: url("assets/hause/logotype.svg") calc(var(--gx) * -1em) 0 / 3.934em 0.74em no-repeat;
    mask: url("assets/hause/logotype.svg") calc(var(--gx) * -1em) 0 / 3.934em 0.74em no-repeat;
    transition: transform 0.45s var(--ha-nav-ease) var(--ha-nav-delay), opacity 0.3s ease var(--ha-nav-delay), filter 0.35s ease var(--ha-nav-delay);
  }

  /* Hause hovers in its Auction blue, not the nav's default red. */
  .site-nav__project[data-work-project-link="hause"]:is(:hover, :focus-visible, :active) {
    color: #0047ff;
  }

  .site-nav__project[data-work-project-link="hause"]:is(:hover, :focus-visible, :active) .ha-nav-letter i {
    background: #0047ff;
  }

  .site-nav__project[data-work-project-link="hause"]:is(:hover, :focus-visible, :active) .ha-nav-letter b {
    opacity: 0;
    filter: blur(2px);
    transform: translateX(var(--dx, 0px)) scale(1.3, 0.9);
  }

  .site-nav__project[data-work-project-link="hause"]:is(:hover, :focus-visible, :active) .ha-nav-letter i {
    opacity: 1;
    filter: none;
    transform: translateY(-50%);
  }

  :root[data-motion-preference="reduced"] .ha-nav-letter :is(b, i) {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ha-nav-letter :is(b, i) {
      transition: none;
    }
  }

  .ha-title-logo {
    display: inline-block;
    width: 0.82em;
    height: 0.82em;
    margin-left: 0.08em;
    vertical-align: 0;
    background: currentColor var(--ha-sky) 0 50% / auto 260% no-repeat;
    -webkit-mask: url("assets/hause/mark.svg") center / contain no-repeat;
    mask: url("assets/hause/mark.svg") center / contain no-repeat;
    animation: ha-title-logo-sky 8s ease-in-out infinite alternate;
    cursor: pointer;
  }

  /* Clicking the mark holds the clouds still; clicking again lets them drift on. */
  .ha-title-logo.is-paused {
    animation-play-state: paused;
  }

  @keyframes ha-title-logo-sky {
    from { background-position: 0 35%; }
    to { background-position: 100% 65%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ha-title-logo { animation: none; }
  }

  .work-project-panel--hause .work-heading__note a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }

  /* The discipline chips' dots take the wing colors, one each. */
  .work-heading__tags--hause span::before {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--ha-tag);
  }

  /* Cover: the three wing cards fanned in the middle of open sky, signed
     with the wordmark. Hover and they spread like a hand of tickets. */
  .ha-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    margin: 0;
    border-radius: 0.75rem;
    background: #4a78b8 var(--ha-sky) 50% 40% / cover;
    container-type: inline-size;
  }

  .ha-cover__wordmark {
    position: absolute;
    bottom: 5cqi;
    left: 4.5cqi;
    width: 28cqi;
    aspect-ratio: 450 / 69.6;
    background: #ffffff;
    -webkit-mask: url("assets/hause/wordmark.svg") center / contain no-repeat;
    mask: url("assets/hause/wordmark.svg") center / contain no-repeat;
  }

  .ha-cards {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ha-card {
    position: absolute;
    top: 50%;
    left: 70%;
    display: flex;
    flex-direction: column;
    gap: 1.3cqi;
    width: 20cqi;
    aspect-ratio: 258 / 420;
    padding: 1.5cqi;
    border-radius: 1.5cqi;
    box-shadow: 0 1.5cqi 4cqi rgb(0 0 0 / 0.2);
    font-family: var(--ha-display);
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-card__label {
    display: flex;
    align-items: center;
    gap: 0.5cqi;
    font-size: 1.75cqi;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .ha-card__label svg {
    width: 1.9cqi;
    height: 1.9cqi;
  }

  .ha-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.04;
    object-fit: cover;
    border-radius: 1cqi;
  }

  .ha-card strong {
    margin-top: auto;
    font-size: 1.85cqi;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.02;
  }

  .ha-card--gallery { background: var(--ha-green); color: var(--ha-ink); transform: translate(-60%, -46%) rotate(-9deg); }
  .ha-card--rooms { background: var(--ha-pink); color: #ffffff; transform: translate(-44%, -52%) rotate(-2deg); }
  .ha-card--auction { background: var(--ha-blue); color: #ffffff; transform: translate(-28%, -55%) rotate(8deg); }

  .ha-cover:hover .ha-card--gallery { transform: translate(-126%, -44%) rotate(-12deg); }
  .ha-cover:hover .ha-card--rooms { transform: translate(-48%, -57%) rotate(-1deg); }
  .ha-cover:hover .ha-card--auction { transform: translate(32%, -49%) rotate(11deg); }

  .ha-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ha-fill {
    fill: currentColor;
  }

  @container (max-width: 36rem) {
    .ha-cover__wordmark {
      bottom: 6cqi;
      width: 46cqi;
    }

    .ha-card {
      top: 42%;
      left: 64%;
      width: 28cqi;
    }
  }

  .ha-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  /* The brand guide follows the cover directly, without a title or divider. */
  .ha-section--untitled {
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: 0;
  }

  .ha-block + .ha-block {
    margin-top: var(--space-9);
  }

  .ha-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .ha-block > .project-collection__heading p {
    max-width: min(var(--work-intro-measure), 100%);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  /* Group labels and notes inside a block, as in the Earfruits logo guide. */
  .ha-group {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ha-group:has(+ .ha-note) {
    margin-bottom: 0.25rem;
  }

  .ha-block > .project-collection__heading + .ha-group {
    margin-top: 0;
  }

  .ha-note {
    max-width: min(var(--work-intro-measure), 100%);
    margin-bottom: var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .ha-note--after {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* Shared caption style for every figure in the panel. */
  .work-project-panel--hause figure {
    margin: 0;
  }

  .work-project-panel--hause figcaption,
  .ha-moments small,
  .ha-personas small,
  .ha-personas p,
  .ha-swatches code {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .work-project-panel--hause figcaption {
    margin-top: var(--space-2);
  }

  .work-project-panel--hause figcaption strong,
  .ha-moments strong,
  .ha-personas strong,
  .ha-swatches strong,
  .ha-subtitle,
  .ha-spotlight__copy > strong {
    display: block;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
  }

  .work-project-panel--hause figcaption strong {
    margin-bottom: 0.1rem;
  }

  /* Vision: the three values, one per wing color. */
  .ha-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    list-style: none;
  }

  .ha-values li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: 0.75rem;
    font-family: var(--ha-sans);
  }

  .ha-values--green { background: var(--ha-green); color: var(--ha-ink); }
  .ha-values--blue { background: var(--ha-blue); color: #ffffff; }
  .ha-values--pink { background: var(--ha-pink); color: #ffffff; }

  .ha-values small {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ha-values strong {
    margin-bottom: var(--space-4);
    font-family: var(--ha-display);
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
  }

  .ha-values p {
    margin-top: auto;
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* German titles name their English meaning in a tooltip on hover or focus. */
  .ha-gloss {
    position: relative;
    cursor: help;
  }

  .ha-gloss::after {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background: var(--color-ink);
    color: var(--color-canvas);
    content: attr(data-tip);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .ha-gloss:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .ha-gloss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 0.2rem;
  }

  :root[data-motion-preference="reduced"] .ha-gloss::after {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ha-gloss::after {
      transition: none;
    }
  }

  /* Logo guide. Marks are masks, so one file draws in any ink. */
  .ha-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
  }

  .ha-logo {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  .work-project-panel--hause .ha-logo figcaption {
    margin-top: 0;
  }

  .ha-logo--wide {
    grid-column: span 2;
  }

  .ha-logo--full {
    grid-column: 1 / -1;
  }

  .ha-tile {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 30%;
    border-radius: 0.75rem;
  }

  .ha-logo--wide .ha-tile {
    aspect-ratio: 2 / 1;
    padding: 9% 16%;
  }

  .ha-logo--full .ha-tile {
    aspect-ratio: 4 / 1;
    padding: 5% 28%;
  }

  .ha-tile--white { border: 1px solid var(--color-line); background: #ffffff; color: var(--ha-ink); }
  .ha-tile--green { background: var(--ha-green); color: var(--ha-ink); }
  .ha-tile--blue { background: var(--ha-blue); color: #ffffff; }
  .ha-tile--pink { background: var(--ha-pink); color: #ffffff; }
  .ha-tile--ink { background: var(--ha-ink); color: #ffffff; }
  .ha-tile--sky { background: #4a78b8 var(--ha-sky) 50% 45% / cover; color: #ffffff; }

  .ha-ink {
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: var(--ha-art) center / contain no-repeat;
    mask: var(--ha-art) center / contain no-repeat;
  }

  .ha-ink--mark { --ha-art: url("assets/hause/mark.svg"); }
  .ha-ink--wordmark { --ha-art: url("assets/hause/wordmark.svg"); }
  .ha-ink--logotype { --ha-art: url("assets/hause/logotype.svg"); }

  /* Lockup don'ts: the mark and wordmark files set side by side, with
     columns sized from each SVG's width so the gap matches the real lockup. */
  .ha-lockup {
    display: grid;
    align-items: end;
    column-gap: 2.5%;
    width: 100%;
  }

  .ha-lockup--trailing { grid-template-columns: 370fr 68.78fr; }
  .ha-lockup--oversized { grid-template-columns: 137.56fr 370fr; }

  .ha-lockup .ha-ink { height: auto; }
  .ha-lockup .ha-ink--logotype { aspect-ratio: 370 / 69.6; }
  .ha-lockup .ha-ink--mark { aspect-ratio: 1; }

  .ha-logo--dont .ha-tile { position: relative; }

  .ha-logo--dont .ha-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ha-pink) calc(50% - 1px), var(--ha-pink) calc(50% + 1px), transparent calc(50% + 1px));
  }

  .work-project-panel--hause .ha-logo--dont figcaption::before {
    content: "✕ ";
    color: var(--ha-pink);
  }

  /* Sketch, inspiration, and mid-fi share one height: the columns follow
     each image's width-to-height ratio. */
  .ha-process {
    display: grid;
    grid-template-columns: 0.8fr 0.905fr 2.235fr;
    gap: var(--space-3);
  }

  .ha-process img,
  .ha-frameworks img,
  .ha-figure > img,
  .ha-figure > .ef-promo__open img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  /* Variable wordmark demo: script.js redraws the paths at the chosen stretch. */
  .ha-variable {
    display: grid;
    gap: var(--space-3);
  }

  .ha-variable__stage {
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ha-ink);
  }

  .ha-variable__stage svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 300;
  }

  .ha-variable__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
  }

  .ha-variable__controls label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .ha-variable__controls input {
    width: 8.5rem;
    accent-color: var(--ha-ink);
  }

  /* On the dark theme the sliders take a light thumb on a dark track. */
  :root[data-theme="dark"] .ha-variable__controls input {
    accent-color: var(--color-ink);
    color-scheme: dark;
  }

  .ha-variable__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
  }

  .ha-applications {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ha-applications img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
  }

  .ha-applications--crop img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--color-line);
  }

  /* Colors */
  /* A masonry: tall and short chips alternate so each column lands at the same height
     while the rows stagger. */
  .ha-swatches {
    columns: 4;
    column-gap: var(--space-3);
    list-style: none;
  }

  .ha-swatches li {
    display: grid;
    align-content: start;
    gap: 0.15rem;
    margin-bottom: var(--space-5);
    break-inside: avoid;
  }

  .ha-swatch__chip {
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-2);
    border-radius: 0.75rem;
    background: var(--ha-swatch);
    box-shadow: inset 0 0 0 1px var(--color-line);
  }

  .ha-swatches li:is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(8)) .ha-swatch__chip {
    aspect-ratio: 4 / 5;
  }

  .ha-swatch--sky .ha-swatch__chip {
    background: #4a78b8 var(--ha-sky) 50% 45% / cover;
  }

  .ha-swatch--aurora .ha-swatch__chip {
    background: var(--ha-aurora);
  }

  .ha-swatches code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
  }

  /* Typography */
  .ha-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ha-type__specimen {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: var(--color-surface);
  }

  /* The display specimen sits centered in its card, which stretches to match its neighbor. */
  .ha-type__specimen--display {
    align-content: center;
  }

  .ha-type__aa {
    display: flex;
    align-items: center;
    height: 1em;
    color: var(--color-ink);
    font-family: var(--ha-sans);
    font-size: clamp(4rem, 7vw, 6.25rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  /* The logotype's caps line up with the Inter "Aa" beside it. */
  .ha-type__aa .ha-ink {
    width: min(100%, calc(0.8em * 370 / 69.6));
    height: auto;
    aspect-ratio: 370 / 69.6;
  }

  .ha-type__specimen strong {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .ha-type__sample {
    margin: 0.35rem 0 0.6rem;
    color: var(--color-ink);
    font-family: var(--ha-sans);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.15;
  }

  .ha-type__specimen small {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* Tone: each principle ends on a line from the product, highlighted like
     "culture" on the landing page. */
  .ha-tone {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    list-style: none;
  }

  .ha-tone li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: var(--color-surface);
  }

  .ha-tone li:nth-child(3n + 1) { --ha-hl: var(--ha-pink); --ha-on: #ffffff; }
  .ha-tone li:nth-child(3n + 2) { --ha-hl: var(--ha-blue); --ha-on: #ffffff; }
  .ha-tone li:nth-child(3n) { --ha-hl: var(--ha-green); --ha-on: var(--ha-ink); }

  .ha-tone strong {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ha-tone p {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .ha-tone q {
    width: fit-content;
    margin-top: auto;
    padding: 0.08em 0.35em 0.12em;
    border-radius: 0.3em;
    background: var(--ha-hl);
    color: var(--ha-on);
    font-family: var(--ha-sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  /* Little moments */
  .ha-moments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    list-style: none;
  }

  .ha-moments li {
    display: grid;
    align-content: start;
    gap: 0.15rem;
  }

  .ha-moments__stage {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ha-ink);
    font-family: var(--ha-sans);
    container-type: inline-size;
  }

  .ha-moments__stage--sky {
    background: #4a78b8 var(--ha-sky) 50% 40% / cover;
  }

  /* The floating tab bar: frosted white over the sky, its icons straight
     from the app. The current tab turns rooms pink; Home fills in. */
  .ha-tabbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 86%;
    height: 17cqi;
    padding: 0 5.5cqi;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.65);
    box-shadow: 0 1.2cqi 4cqi rgb(0 0 0 / 0.14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .ha-tabbar button {
    position: relative;
    display: grid;
    place-items: center;
    width: 10cqi;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ha-ink);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  }

  .ha-tabbar svg {
    width: 7cqi;
    height: 7cqi;
    overflow: visible;
  }

  .ha-tabbar button:is(:hover, :focus-visible) {
    transform: translateY(-2px);
  }

  .ha-tabbar button:focus-visible {
    outline: 2px solid var(--ha-ink);
    outline-offset: 2px;
  }

  .ha-tabbar [aria-pressed="true"] {
    color: var(--ha-pink);
  }

  .ha-tabbar [aria-pressed="true"] .ha-fill-on {
    fill: currentColor;
  }

  /* Each tab names itself above the bar on hover. */
  .ha-tabbar button::after {
    position: absolute;
    bottom: calc(100% + 2.5cqi);
    left: 50%;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--ha-ink);
    color: #ffffff;
    content: attr(data-tip);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .ha-tabbar button:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* Step inside: a doorway in the mark's shape on the gallery wall. Hover
     and it opens up around you, swapping the sky for a room. */
  .ha-moments__stage--door {
    background: var(--ha-wall);
    cursor: pointer;
  }

  .ha-door {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 27.35%, 60.51% 36.33%, 67% 54.55%, 67% 72.65%, 33% 72.65%, 33% 54.55%, 39.49% 36.33%);
    transition: clip-path 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-door img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 500ms var(--ease-out), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-door__inside {
    opacity: 0;
    transform: scale(1.2);
  }

  .ha-moments__stage--door:is(:hover, :focus-visible) .ha-door {
    clip-path: polygon(50% -331.8%, 176.12% -224.04%, 254% -5.4%, 254% 211.8%, -154% 211.8%, -154% -5.4%, -76.12% -224.04%);
  }

  .ha-moments__stage--door:is(:hover, :focus-visible) .ha-door__inside {
    opacity: 1;
    transform: scale(1);
  }

  .ha-moments__stage--door:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
  }

  /* Live auction clock, from the desktop auction page. */
  .ha-clock {
    display: grid;
    justify-items: start;
    gap: 1.5cqi;
    width: 76%;
  }

  .ha-clock small {
    color: var(--ha-graphite);
    font-size: 3.6cqi;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .ha-clock__time {
    display: flex;
    align-items: center;
    gap: 1.8cqi;
    font-size: 14.5cqi;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .ha-clock__time i {
    width: 2.6cqi;
    height: 2.6cqi;
    flex: none;
    border-radius: 50%;
    background: var(--ha-pink);
    animation: ha-pulse 1s ease-in-out infinite;
  }

  .ha-clock__bid {
    width: 100%;
    margin-top: 2.5cqi;
    padding: 2.3cqi 0;
    border-radius: 999px;
    background: var(--ha-ink);
    color: #ffffff;
    font-size: 3.8cqi;
    font-weight: 500;
    text-align: center;
  }

  @keyframes ha-pulse {
    50% {
      opacity: 0.25;
      transform: scale(0.7);
    }
  }

  /* Building the museum */
  .ha-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--space-5), 4vw, var(--space-8));
  }

  .ha-subtitle {
    margin-bottom: var(--space-3);
  }

  .ha-points li {
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ha-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    list-style: none;
  }

  .ha-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--ha-wall);
    color: var(--ha-ink);
    font-family: var(--ha-sans);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .ha-chips small {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--ha-pink);
    color: #ffffff;
    font-size: 0.68rem;
  }

  .ha-copy {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ha-personas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    list-style: none;
  }

  .ha-personas li {
    display: grid;
    align-content: start;
    gap: 0.1rem;
  }

  .ha-personas img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: var(--space-2);
    object-fit: cover;
    border-radius: 0.75rem;
  }

  .ha-personas p {
    margin-top: 0.3rem;
  }

  .ha-frameworks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .work-project-panel--hause .ha-figure {
    margin-top: var(--space-6);
  }

  .ha-figure figcaption {
    max-width: min(var(--work-intro-measure), 100%);
  }

  /* Screen strips: six phones across, the rest a swipe away. */
  .ha-flow {
    display: grid;
    grid-auto-columns: calc((100% - 5 * var(--space-3)) / 6);
    grid-auto-flow: column;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    list-style: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }

  .ha-flow li {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    scroll-snap-align: start;
  }

  .ha-flow img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 844;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--color-line);
    border-radius: 1rem;
    background: #ffffff;
  }

  .ha-flow span {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
  }

  /* Wireframes sit four across at a smaller size, like sketches pinned up. */
  .ha-flow--four {
    grid-auto-columns: unset;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: min(44rem, 100%);
    overflow: visible;
  }

  .ha-flow + .ha-group,
  .ha-flow + .ha-spotlight,
  .ha-spotlight + .ha-group,
  .ha-spotlight + .ha-spotlight {
    margin-top: var(--space-8);
  }

  /* Spotlights: a live specimen or screens beside their reasoning. */
  .ha-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(var(--space-5), 4vw, var(--space-8));
  }

  .ha-spotlight__stage {
    order: 2;
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ha-ink);
    font-family: var(--ha-sans);
  }

  .ha-spotlight__copy > strong {
    margin-bottom: 0.15rem;
  }

  .ha-spotlight__copy > p {
    margin-bottom: var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* Phone prototypes: HTML rebuilds of the app screens on a 390 x 844 canvas.
     Inside a phone, calc(N * var(--u)) is N design px. */
  .ha-spotlight__stage--phone {
    display: grid;
    place-items: center;
    gap: var(--space-4);
    background: var(--ha-wall);
  }

  /* Display-only phones: arrows under the phone step through the screens. */
  .ha-phone[inert] {
    cursor: default;
    user-select: none;
  }

  .ha-proto-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .ha-proto-nav p {
    min-width: 11rem;
    margin: 0;
    color: var(--ha-ink);
    font-size: var(--text-sm);
    text-align: center;
  }

  .ha-proto-nav button {
    display: grid;
    place-items: center;
    width: 2.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ha-ink);
    color: #ffffff;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .ha-proto-nav button:hover {
    transform: scale(1.06);
  }

  .ha-proto-nav button:focus-visible {
    outline: 2px solid var(--ha-ink);
    outline-offset: 3px;
  }

  .ha-proto-nav svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ha-phone {
    position: relative;
    width: min(100%, 19rem);
    aspect-ratio: 390 / 844;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 0.6rem 1.6rem rgb(0 0 0 / 0.1);
    color: var(--ha-ink);
    container-type: inline-size;
    font-family: var(--ha-sans);
    isolation: isolate;
  }

  .ha-phone__screen {
    --u: calc(100cqi / 390);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: calc(60 * var(--u)) calc(25 * var(--u)) calc(37 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.3;
    animation: ha-screen-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-phone__screen[hidden] {
    display: none;
  }

  @keyframes ha-screen-in {
    from {
      opacity: 0;
      transform: translateX(4%);
    }
  }

  .ha-phone :where(h5, h6, p) {
    margin: 0;
  }

  .ha-phone button {
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  .ha-phone button:focus-visible {
    outline: 2px solid var(--ha-blue);
    outline-offset: 2px;
  }

  .ha-phone__headline {
    font-size: calc(44 * var(--u));
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.02;
  }

  .ha-phone__cta {
    display: grid;
    place-items: center;
    width: 100%;
    height: calc(44 * var(--u));
    flex: none;
    margin-top: auto;
    padding: 0;
    border: 0;
    border-radius: calc(8 * var(--u));
    background: var(--ha-ink);
    color: #ffffff;
    font-size: calc(16 * var(--u));
    text-align: center;
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .ha-phone button.ha-phone__cta {
    color: #ffffff;
  }

  .ha-phone .ha-phone__cta.ha-phone__cta--soft {
    background: #e4e4e4;
    color: var(--ha-ink);
  }

  .ha-phone__cta:disabled {
    opacity: 0.25;
    cursor: not-allowed;
  }

  .ha-phone button.ha-phone__cta:not(:disabled):active {
    transform: scale(0.98);
  }

  .ha-phone__chip {
    display: grid;
    place-items: center;
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
    padding: 0;
    border: 0;
    border-radius: calc(9 * var(--u));
    background: rgb(255 255 255 / 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .ha-phone__chip svg {
    width: 55%;
    height: 55%;
  }

  .ha-phone__chip[aria-pressed] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
  }

  .ha-phone__chip[aria-pressed="true"] svg {
    fill: currentColor;
  }

  .ha-phone__tabbar.ha-tabbar {
    position: absolute;
    bottom: calc(38 * var(--u));
    left: 50%;
    width: calc(340 * var(--u));
    translate: -50% 0;
  }

  .ha-phone__toast {
    position: absolute;
    bottom: calc(100 * var(--u));
    left: 50%;
    padding: calc(8 * var(--u)) calc(14 * var(--u));
    border-radius: 999px;
    background: var(--ha-ink);
    color: #ffffff;
    font-size: calc(13 * var(--u));
    translate: -50% 0;
    white-space: nowrap;
    animation: ha-screen-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Artwork page */
  .ha-piece {
    padding-top: calc(63 * var(--u));
  }

  .ha-piece__art {
    position: relative;
    flex: none;
    aspect-ratio: 340 / 423;
    overflow: hidden;
    border-radius: calc(14 * var(--u));
    background: var(--ha-wall);
  }

  .ha-piece__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ha-piece__art .ha-phone__chip {
    position: absolute;
    top: calc(22 * var(--u));
  }

  .ha-piece__close {
    left: calc(13 * var(--u));
  }

  .ha-piece__fave {
    right: calc(13 * var(--u));
  }

  .ha-piece__outbid {
    position: absolute;
    right: calc(18 * var(--u));
    bottom: calc(14 * var(--u));
    left: calc(18 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--u));
    height: calc(36 * var(--u));
    border: calc(2 * var(--u)) solid var(--ha-pink);
    border-radius: calc(10 * var(--u));
    background: rgb(255 255 255 / 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: calc(13 * var(--u));
    animation: ha-outbid-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .ha-piece__outbid[hidden] {
    display: none;
  }

  .ha-piece__outbid svg {
    width: calc(14 * var(--u));
    fill: var(--ha-pink);
  }

  @keyframes ha-outbid-in {
    from {
      opacity: 0;
      transform: translateY(40%) scale(0.92);
    }
  }

  .ha-piece__title {
    margin-top: calc(14 * var(--u));
    font-size: calc(40 * var(--u));
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .ha-piece__people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(13 * var(--u));
  }

  .ha-piece__people p {
    display: grid;
    grid-template-columns: calc(30 * var(--u)) 1fr;
    column-gap: calc(7 * var(--u));
    align-items: center;
    font-size: calc(12.5 * var(--u));
    line-height: 1.25;
  }

  .ha-piece__people :is(img, .ha-piece__house) {
    grid-row: span 2;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    border-radius: 50%;
    object-fit: cover;
  }

  .ha-piece__people small {
    color: var(--ha-graphite);
    font-size: calc(11.5 * var(--u));
  }

  /* Hause Gallery's avatar: the mark on rooms pink. */
  .ha-piece__house {
    background: var(--ha-pink) url("assets/hause/mark.svg") center / 46% no-repeat;
  }

  .ha-piece__people [hidden] {
    display: none;
  }

  .ha-piece__price {
    display: flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
    margin-top: calc(17 * var(--u));
    font-size: calc(30 * var(--u));
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .ha-piece__price small {
    padding-left: calc(6 * var(--u));
    border-left: 1px solid var(--ha-graphite);
    color: var(--ha-graphite);
    font-size: calc(13.5 * var(--u));
    letter-spacing: 0;
  }

  .ha-piece .ha-phone__cta {
    margin-top: calc(22 * var(--u));
  }

  /* Place your bid */
  .ha-amount {
    align-items: center;
    padding-inline: 0;
  }

  .ha-amount__close {
    position: absolute;
    top: calc(60 * var(--u));
    left: calc(16 * var(--u));
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    background: var(--ha-wall);
  }

  .ha-amount__title {
    font-size: calc(30 * var(--u));
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: calc(40 * var(--u));
  }

  .ha-amount__meta {
    margin-top: calc(8 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(13 * var(--u));
  }

  .ha-amount__label {
    margin-top: calc(70 * var(--u));
    font-size: calc(18 * var(--u));
    font-weight: 500;
  }

  .ha-amount__value {
    margin-top: calc(12 * var(--u));
    font-size: calc(44 * var(--u));
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .ha-amount__value.is-empty {
    color: #cfcfcf;
  }

  .ha-amount__hint {
    min-height: 1.3em;
    margin-top: calc(6 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(13 * var(--u));
  }

  .ha-amount__hint.is-ok {
    color: #11a800;
  }

  .ha-amount__keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: calc(56 * var(--u));
    border-top: 1px solid #e6e6e6;
  }

  .ha-amount__keys button {
    display: grid;
    place-items: center;
    height: calc(52 * var(--u));
    padding: 0;
    border: 0;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background: #ffffff;
    font-size: calc(22 * var(--u));
    transition: background-color 120ms ease-out;
  }

  .ha-amount__keys button:nth-child(3n) {
    border-right: 0;
  }

  .ha-amount__keys button:active {
    background: var(--ha-wall);
  }

  .ha-amount__keys svg {
    width: calc(20 * var(--u));
  }

  .ha-amount__fine {
    margin-top: auto;
    padding-inline: calc(30 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(9.5 * var(--u));
    line-height: 1.35;
    text-align: center;
  }

  .ha-amount__fine span {
    text-decoration: underline;
  }

  .ha-amount .ha-phone__cta {
    width: calc(340 * var(--u));
    margin-top: calc(18 * var(--u));
  }

  /* Confirming */
  .ha-confirming {
    align-items: center;
  }

  .ha-confirming__ring.ha-spinner {
    width: calc(168 * var(--u));
    height: calc(168 * var(--u));
    margin: calc(152 * var(--u)) 0 0;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 21 * var(--u)), #000 calc(100% - 20 * var(--u)));
    mask: radial-gradient(farthest-side, transparent calc(100% - 21 * var(--u)), #000 calc(100% - 20 * var(--u)));
  }

  .ha-confirming__status {
    margin-top: calc(32 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(15 * var(--u));
  }

  /* Payment */
  .ha-pay {
    background: radial-gradient(70% 40% at 15% 80%, rgb(255 48 101 / 0.28), transparent 70%), radial-gradient(60% 35% at 90% 98%, rgb(20 255 0 / 0.22), transparent 70%), #ffffff;
  }

  .ha-pay__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(20 * var(--u)) calc(21 * var(--u));
    margin-top: calc(45 * var(--u));
  }

  .ha-pay__field {
    height: calc(55 * var(--u));
    padding: 0 calc(26 * var(--u));
    border: 0;
    border-radius: calc(12 * var(--u));
    background: #ededed;
    color: #b7b7b7 !important;
    font-size: calc(21 * var(--u)) !important;
    letter-spacing: -0.01em;
    text-align: left;
    white-space: nowrap;
  }

  .ha-pay__field.is-filled {
    color: var(--ha-ink) !important;
    font-variant-numeric: tabular-nums;
  }

  .ha-pay__field--full {
    grid-column: 1 / -1;
  }

  .ha-pay__note {
    display: grid;
    grid-template-columns: calc(30 * var(--u)) 1fr;
    gap: calc(14 * var(--u));
    align-items: center;
    margin-top: calc(26 * var(--u));
    padding-left: calc(8 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(14 * var(--u));
  }

  .ha-pay__note svg {
    width: calc(30 * var(--u));
  }

  .ha-pay__tip {
    margin-top: calc(24 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(12.5 * var(--u));
    text-align: center;
  }

  /* Purchase successful */
  .ha-yours__frame {
    display: grid;
    grid-template-columns: calc(153 * var(--u)) 1fr;
    height: calc(290 * var(--u));
    margin: calc(45 * var(--u)) calc(-25 * var(--u)) 0;
  }

  .ha-yours__wing {
    display: flex;
    align-items: flex-end;
    padding: 0 0 calc(32 * var(--u)) calc(37 * var(--u));
    background: var(--ha-pink);
    color: var(--ha-ink);
  }

  .ha-yours__wing .ha-ink {
    width: calc(32 * var(--u));
    height: calc(33 * var(--u));
  }

  .ha-yours__art {
    padding: calc(23 * var(--u)) calc(20 * var(--u));
    background: var(--ha-ink);
  }

  .ha-yours__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: ha-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Under the framed piece: what you bought and a short receipt. */
  .ha-yours__piece {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin-top: calc(22 * var(--u));
  }

  .ha-yours__piece img {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    border-radius: 50%;
    object-fit: cover;
  }

  .ha-yours__piece p {
    display: grid;
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .ha-yours__piece strong {
    font-size: calc(17 * var(--u));
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .ha-yours__piece p span {
    overflow: hidden;
    color: var(--ha-graphite);
    font-size: calc(12 * var(--u));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ha-yours__tag {
    flex: none;
    padding: calc(5 * var(--u)) calc(10 * var(--u));
    border-radius: 999px;
    background: var(--ha-green);
    color: var(--ha-ink);
    font-size: calc(12 * var(--u));
    font-weight: 500;
  }

  .ha-yours__receipt {
    margin: calc(16 * var(--u)) 0 calc(16 * var(--u));
  }

  .ha-yours__receipt div {
    display: flex;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    padding: calc(8 * var(--u)) 0;
    border-top: 1px solid #ececec;
    font-size: calc(13 * var(--u));
  }

  .ha-yours__receipt dt {
    color: var(--ha-graphite);
  }

  .ha-yours__receipt dd {
    margin: 0;
    color: var(--ha-ink);
    text-align: right;
  }

  .ha-yours__actions {
    display: grid;
    grid-template-columns: calc(124 * var(--u)) 1fr;
    gap: calc(20 * var(--u));
    margin-top: auto;
  }

  /* Price tracking */
  .ha-track__card {
    margin-top: calc(34 * var(--u));
    padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u)) calc(25 * var(--u));
    border-radius: calc(24 * var(--u));
    background: #ffffff;
    box-shadow: 0 calc(4 * var(--u)) calc(30 * var(--u)) rgb(0 0 0 / 0.1);
  }

  .ha-track__card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.4;
    object-fit: cover;
    object-position: 50% 60%;
    border-radius: calc(12 * var(--u));
  }

  .ha-track__chart {
    display: block;
    width: 100%;
    margin-top: calc(14 * var(--u));
    overflow: visible;
  }

  .ha-chart__grid {
    fill: none;
    stroke: #d8d8d8;
    stroke-dasharray: 5 5;
  }

  .ha-phone svg text {
    fill: #c9c9c9;
    font-size: 11px;
  }

  .ha-chart__line {
    fill: none;
    stroke: #14e100;
    stroke-width: 2.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .ha-phone__screen:not([hidden]) .ha-chart__line {
    animation: ha-chart-draw 1400ms cubic-bezier(0.65, 0, 0.35, 1) both;
  }

  @keyframes ha-chart-draw {
    from {
      stroke-dashoffset: 1;
    }
  }

  .ha-track__next {
    align-self: flex-end;
    width: calc(114 * var(--u));
  }

  /* Under the chart card: the latest sales, each with its change since it last sold. */
  .ha-track__label {
    margin: calc(16 * var(--u)) 0 calc(6 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(13 * var(--u));
  }

  .ha-track__sales,
  .ha-owned__sales {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ha-track__sales li,
  .ha-owned__sales li {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    padding: calc(7 * var(--u)) 0;
    border-top: 1px solid #ececec;
  }

  .ha-track__sales img {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    border-radius: calc(6 * var(--u));
    object-fit: cover;
  }

  .ha-track__sales span,
  .ha-owned__sales span {
    display: grid;
    flex: 1;
    min-width: 0;
    font-size: calc(14 * var(--u));
  }

  .ha-track__sales small,
  .ha-owned__sales small {
    color: var(--ha-graphite);
    font-size: calc(11.5 * var(--u));
  }

  .ha-track__sales b,
  .ha-owned__sales b {
    font-size: calc(14 * var(--u));
    font-weight: 500;
  }

  .ha-track__sales em {
    width: calc(42 * var(--u));
    color: #2fb81e;
    font-size: calc(12 * var(--u));
    font-style: normal;
    text-align: right;
  }

  .ha-track__sales em.is-down {
    color: var(--ha-pink);
  }

  .ha-track__sales {
    margin-bottom: calc(12 * var(--u));
  }

  .ha-owned__sales {
    margin-top: calc(12 * var(--u));
  }

  .ha-owned__sales li {
    padding: calc(12 * var(--u)) 0;
  }

  .ha-owned__sales span {
    font-size: calc(16 * var(--u));
  }

  .ha-owned__sales small {
    font-size: calc(13 * var(--u));
  }

  .ha-owned__sales b {
    font-size: calc(16 * var(--u));
  }

  /* A collected piece, with its price history */
  .ha-owned {
    padding: calc(60 * var(--u)) 0 0;
    background: #5d5d5d;
  }

  .ha-owned__sheet {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: calc(14 * var(--u)) calc(25 * var(--u)) calc(40 * var(--u));
    overflow-y: auto;
    border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0;
    background: #ffffff;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .ha-owned__sheet:focus-visible {
    outline: 2px solid var(--ha-blue);
    outline-offset: -2px;
  }

  .ha-owned__grabber {
    flex: none;
    width: calc(44 * var(--u));
    height: calc(4 * var(--u));
    margin: 0 auto calc(16 * var(--u));
    border-radius: 9px;
    background: #d6d6d6;
  }

  .ha-owned .ha-phone__cta {
    flex: none;
    margin-top: calc(18 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .ha-owned__tags {
    display: flex;
    gap: calc(8 * var(--u));
    margin: calc(26 * var(--u)) 0 0;
    padding: 0;
    list-style: none;
    font-size: calc(12 * var(--u));
    white-space: nowrap;
  }

  .ha-owned__tags li {
    padding: calc(5 * var(--u)) calc(16 * var(--u));
    border: 1px solid var(--ha-ink);
    border-radius: 999px;
  }

  .ha-owned__heading {
    margin: calc(40 * var(--u)) 0 0;
    font-size: calc(20 * var(--u));
    font-weight: 500;
  }

  .ha-owned__readout {
    min-height: 1.3em;
    margin-top: calc(4 * var(--u));
    color: var(--ha-graphite);
    font-size: calc(13 * var(--u));
    font-variant-numeric: tabular-nums;
  }

  .ha-owned__chart {
    margin-top: calc(10 * var(--u));
    cursor: crosshair;
    touch-action: pan-y;
  }

  .ha-owned__chart svg {
    display: block;
    width: 100%;
    overflow: visible;
  }

  .ha-chart__cursor {
    stroke: var(--ha-ink);
    stroke-width: 1;
    opacity: 0;
  }

  .ha-chart__dot {
    fill: #14e100;
    stroke: #ffffff;
    stroke-width: 2;
    opacity: 0;
  }

  .ha-owned__chart.is-scrubbing :is(.ha-chart__cursor, .ha-chart__dot) {
    opacity: 1;
  }

  .ha-owned__growth {
    display: grid;
    margin-top: calc(36 * var(--u));
    font-size: calc(20 * var(--u));
    font-weight: 500;
  }

  .ha-owned__growth strong {
    font-size: calc(32 * var(--u));
    font-weight: 500;
  }

  .ha-owned__compare {
    margin: calc(16 * var(--u)) 0 0;
  }

  .ha-owned__compare div {
    display: flex;
    justify-content: space-between;
    padding: calc(18 * var(--u)) 0;
    border-top: 1px solid #e3e3e3;
    font-size: calc(20 * var(--u));
  }

  .ha-owned__compare dt {
    color: var(--ha-graphite);
  }

  .ha-owned__compare dd {
    margin: 0;
  }

  /* AR: hang a piece on a real wall */
  .ha-ar .ha-phone__screen {
    padding: 0;
  }

  .ha-ar__room {
    position: absolute;
    inset: 0;
    cursor: crosshair;
    touch-action: none;
  }

  .ha-ar__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
  }

  .ha-ar__hint {
    position: absolute;
    top: calc(56 * var(--u));
    left: 50%;
    padding: calc(8 * var(--u)) calc(14 * var(--u));
    border-radius: 999px;
    background: rgb(255 255 255 / 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: calc(13 * var(--u));
    translate: -50% 0;
    white-space: nowrap;
    pointer-events: none;
  }

  .ha-ar__piece {
    --ha-ar-wall: perspective(calc(540 * var(--u))) rotateY(36deg);
    position: absolute;
    width: calc(150 * var(--u));
    translate: -50% -50%;
  }

  .ha-ar__piece[hidden] {
    display: none;
  }

  .ha-ar__painting {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: grab;
    filter: drop-shadow(calc(6 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) rgb(60 40 20 / 0.35));
    /* The room's wall recedes to the right (vanishing point past the column), so the piece turns with it. */
    transform: var(--ha-ar-wall);
    animation: ha-hang 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Off the wall: the piece goes see-through with a pink edge, and the hint says why. */
  .ha-ar__piece.is-blocked .ha-ar__painting {
    opacity: 0.6;
    outline: calc(3 * var(--u)) solid var(--ha-pink);
    outline-offset: calc(2 * var(--u));
    cursor: not-allowed;
  }

  .ha-ar__hint.is-error {
    background: var(--ha-pink);
    color: #ffffff;
    animation: ha-ar-nope 360ms ease-out;
  }

  @keyframes ha-ar-nope {
    20%,
    60% {
      translate: calc(-50% - 6 * var(--u)) 0;
    }

    40%,
    80% {
      translate: calc(-50% + 6 * var(--u)) 0;
    }
  }

  .ha-ar__painting:active {
    cursor: grabbing;
  }

  .ha-ar__painting img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
  }

  @keyframes ha-hang {
    from {
      opacity: 0;
      transform: var(--ha-ar-wall) scale(1.25);
    }
  }

  .ha-ar__shutter {
    position: absolute;
    top: 50%;
    left: 73%;
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    padding: 0;
    border: calc(3 * var(--u)) solid #ffffff;
    border-radius: 50%;
    background: rgb(200 196 190 / 0.9);
    box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgb(0 0 0 / 0.25);
    translate: -50% -50%;
  }

  .ha-ar__shutter[hidden],
  .ha-ar__card[hidden] {
    display: none;
  }

  .ha-ar__card {
    position: absolute;
    top: calc(100% + 22 * var(--u));
    left: 50%;
    display: grid;
    width: calc(115 * var(--u));
    padding: calc(15 * var(--u)) calc(15 * var(--u)) calc(12 * var(--u));
    border-radius: calc(16 * var(--u));
    background: #ffffff;
    font-size: calc(16 * var(--u));
    line-height: 1.2;
    translate: -50% 0;
    animation: ha-outbid-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .ha-ar__card::before {
    position: absolute;
    top: calc(-9 * var(--u));
    left: 50%;
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    border-radius: calc(3 * var(--u));
    background: #ffffff;
    content: "";
    rotate: 45deg;
    translate: -50% 0;
  }

  .ha-ar__card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: calc(10 * var(--u));
    object-fit: cover;
  }

  .ha-ar__card small {
    color: var(--ha-graphite);
    font-size: calc(11 * var(--u));
  }

  .ha-ar__flash {
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
  }

  .ha-ar__flash.is-flashing {
    animation: ha-flash 500ms ease-out;
  }

  @keyframes ha-flash {
    from {
      opacity: 0.9;
    }
  }

  /* Step list beside the bid-and-buy prototype */
  .ha-proto-steps {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ha-proto-step;
  }

  .ha-proto-steps li {
    counter-increment: ha-proto-step;
  }

  .ha-proto-steps button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--color-ink-muted);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  }

  .ha-proto-steps button::before {
    color: var(--color-ink);
    content: counter(ha-proto-step, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .ha-proto-steps button:hover {
    color: var(--color-ink);
  }

  .ha-proto-steps button[aria-current="step"] {
    background: var(--ha-green);
    color: var(--ha-ink);
  }

  .ha-proto-steps button[aria-current="step"]::before {
    color: var(--ha-ink);
  }

  .ha-proto-steps button:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  /* Onboarding demo: pick at least three mediums to continue. */
  .ha-onboard {
    display: grid;
    max-width: 25rem;
    min-height: 27rem;
    margin-inline: auto;
  }

  .ha-onboard__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .ha-onboard__step[hidden] {
    display: none;
  }

  .ha-onboard__q {
    margin: 0;
    color: var(--ha-ink);
    font-size: clamp(1.9rem, 3.2vw, 2.45rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.02;
  }

  .ha-onboard__hint {
    margin: 0;
    color: var(--ha-graphite);
    font-size: 1.1rem;
    letter-spacing: -0.02em;
  }

  .ha-onboard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: var(--space-5) 0 var(--space-6);
  }

  .ha-onboard__chips button,
  .ha-variable__presets button {
    padding: 0.35rem 0.7rem;
    border: 0;
    border-radius: 0.45rem;
    background: var(--ha-wall);
    color: var(--ha-ink);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  }

  .ha-onboard__chips button:hover,
  .ha-variable__presets button:hover {
    transform: translateY(-1px);
  }

  .ha-onboard__chips button[aria-pressed="true"],
  .ha-variable__presets button[aria-pressed="true"] {
    background: var(--ha-green);
  }

  .ha-onboard__continue {
    align-self: flex-end;
    margin-top: auto;
    padding: 0.6rem 1.15rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--ha-ink);
    color: #ffffff;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .ha-onboard__continue:disabled {
    background: var(--ha-wall);
    color: var(--ha-graphite);
    cursor: not-allowed;
  }

  :is(.ha-onboard__chips button, .ha-onboard__continue, .ha-variable__presets button):focus-visible {
    outline: 2px solid var(--ha-ink);
    outline-offset: 2px;
  }

  .ha-onboard__step--done {
    justify-content: center;
    gap: var(--space-3);
  }

  .ha-onboard__step--done {
    transition: opacity 400ms var(--ease-out);
  }

  .ha-onboard__step--done.is-leaving {
    opacity: 0;
  }

  /* Start over on the left; on the right, a ring that fills while the feed loads. */
  .ha-onboard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-6);
  }

  .ha-onboard__actions .ha-onboard__continue {
    margin: 0;
  }

  .ha-feed-loader {
    width: 2.25rem;
    height: 2.25rem;
    opacity: 0;
    transform: rotate(-90deg);
    transition: opacity var(--motion-fast) var(--ease-out);
  }

  .ha-feed-loader circle {
    fill: none;
    stroke: var(--ha-wall);
    stroke-width: 4;
  }

  .ha-feed-loader .ha-feed-loader__fill {
    stroke: var(--ha-blue);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    stroke-linecap: round;
  }

  .is-loading .ha-feed-loader {
    opacity: 1;
  }

  .is-loading .ha-feed-loader__fill {
    animation: ha-feed-load 2400ms cubic-bezier(0.45, 0, 0.25, 1) forwards;
  }

  @keyframes ha-feed-load {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* The feed, laid out like the app's Gallery screen: a title bar with the filter icon, pieces under it,
     and the floating tab bar over the bottom. The filter icon opens your mediums as pills. */
  .ha-feed {
    position: relative;
    height: 27rem;
    gap: 0;
    overflow: hidden;
    container-type: inline-size;
    animation: ha-feed-in 500ms var(--ease-out);
  }

  @keyframes ha-feed-in {
    from {
      opacity: 0;
    }
  }

  .ha-feed__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ha-wall);
  }

  .ha-feed__title {
    margin: 0;
    color: var(--ha-ink);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }

  .ha-feed__filter {
    display: grid;
    place-items: center;
    width: 2.25rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ha-ink);
    cursor: pointer;
  }

  .ha-feed__filter svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .ha-feed__filter[aria-expanded="true"] {
    background: var(--ha-wall);
  }

  .ha-feed__scroll {
    flex: 1;
    min-height: 0;
    padding: 1rem 0 5.5rem;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .ha-feed__scroll::-webkit-scrollbar {
    display: none;
  }

  .ha-feed__filters {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ha-feed__filters[hidden] {
    display: none;
  }

  /* Pills as on the Notifications screen: ink when chosen, outlined otherwise. */
  .ha-feed__filters button {
    flex: none;
    padding: 0.3rem 0.75rem;
    border: 1px solid #c9c9c9;
    border-radius: 999px;
    background: #ffffff;
    color: var(--ha-ink);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
  }

  .ha-feed__filters button[aria-pressed="true"] {
    border-color: var(--ha-ink);
    background: var(--ha-ink);
    color: #ffffff;
  }

  :is(.ha-feed__filter, .ha-feed__filters button, .ha-feed__star, .ha-feed__reset):focus-visible,
  .ha-feed__scroll:focus-visible {
    outline: 2px solid var(--ha-ink);
    outline-offset: 2px;
  }

  .ha-feed__pieces {
    display: grid;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ha-feed__art {
    position: relative;
  }

  .ha-feed__art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0.9rem;
    background: var(--ha-wall);
  }

  /* The star on each piece, frosted like the Gallery screen's. */
  .ha-feed__star {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 0.55rem;
    background: rgb(255 255 255 / 0.55);
    color: var(--ha-ink);
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .ha-feed__star svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
  }

  .ha-feed__star[aria-pressed="true"] svg {
    fill: #ffd400;
    stroke: #ffd400;
  }

  .ha-feed__name {
    margin: 0.7rem 0 0.35rem;
    color: var(--ha-ink);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.05;
  }

  .ha-feed__artist {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--ha-ink);
    font-size: 0.85rem;
  }

  .ha-feed__av {
    display: grid;
    place-items: center;
    width: 1.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ha-wall);
    font-size: 0.7rem;
    font-weight: 600;
  }

  .ha-feed__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
  }

  .ha-feed__tags li {
    padding: 0.3rem 0.75rem;
    border: 1px solid #8a8a8a;
    border-radius: 999px;
    color: var(--ha-ink);
    font-size: 0.72rem;
  }

  .ha-feed__end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 2rem 0 0;
    color: var(--ha-graphite);
    font-size: 0.85rem;
  }

  .ha-feed__reset {
    padding: 0.45rem 0.95rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--ha-ink);
    color: #ffffff;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
  }

  .ha-feed__tabbar.ha-tabbar {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    width: 92%;
    height: 15cqi;
    max-height: 3.6rem;
    translate: -50% 0;
  }

  :root[data-motion-preference="reduced"] :is(.ha-feed, .ha-feed-loader__fill) {
    animation: none !important;
  }

  :root[data-motion-preference="reduced"] .ha-onboard__step--done {
    transition: none;
  }

  :root[data-motion-preference="reduced"] .is-loading .ha-feed-loader__fill {
    stroke-dashoffset: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ha-feed,
    .ha-feed-loader__fill {
      animation: none !important;
    }

    .ha-onboard__step--done {
      transition: none !important;
    }

    .is-loading .ha-feed-loader__fill {
      stroke-dashoffset: 0;
    }
  }

  /* The blue loading ring from the bid flow; once the feed is ready it
     settles into the mark, in gallery green. */
  .ha-spinner {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: conic-gradient(rgb(0 71 255 / 0.04), var(--ha-blue));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.6rem), #000 calc(100% - 0.55rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.6rem), #000 calc(100% - 0.55rem));
    animation: ha-spin 900ms linear infinite;
  }

  .ha-onboard__step--done.is-ready .ha-spinner {
    border-radius: 0;
    background: var(--ha-green);
    -webkit-mask: url("assets/hause/mark.svg") center / contain no-repeat;
    mask: url("assets/hause/mark.svg") center / contain no-repeat;
    animation: ha-pop 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes ha-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes ha-pop {
    from {
      transform: scale(0.6);
    }
  }

  /* Testing */
  .ha-heatmaps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ha-heatmaps img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 0.93;
    object-fit: cover;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  .work-project-panel--hause .ha-heatmaps figcaption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-4);
    margin-top: var(--space-3);
  }

  .ha-stat {
    grid-row: span 2;
    color: var(--color-ink);
    font-family: var(--ha-display);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.9;
  }

  /* Website: tall pages in short frames. Hover (or focus) and the page
     scrolls itself to the footer, then glides back when you leave. */
  .ha-sites {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ha-site {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  .ha-site img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    transition: object-position 1.2s var(--ease-out);
  }

  .ha-site:is(:hover, :focus-visible) img {
    object-position: 50% 100%;
    transition: object-position 9s linear;
  }

  .ha-site:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
  }

  /* Promotional materials: the cover and the bento, side by side. */
  .ha-promo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .ha-promo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 0.75rem;
  }

  /* Ten tools fit on one row with a slightly tighter gap. */
  .work-project-panel--hause .ef-tools {
    gap: clamp(var(--space-4), 2vw, var(--space-5));
  }

  /* The three posters sit in their own row at their full 11:17 size. */
  .ha-promo--posters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-4);
  }

  /* White posters get a hairline so they don't melt into the page. */
  .ha-promo--posters img {
    aspect-ratio: 1100 / 1700;
    border: 1px solid var(--color-line);
  }

  .ha-promo figure {
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .ha-promo figure:is(:hover, :focus-within) {
    transform: translateY(-4px);
  }

  .ha-promo img {
    transition: box-shadow var(--motion-fast) var(--ease-out);
  }

  .ha-promo figure:is(:hover, :focus-within) img {
    box-shadow: 0 0.9rem 2rem rgb(0 0 0 / 0.18);
  }

  /* Auction page: the desktop bidding page rebuilt live on a 1240-wide canvas
     (--w = one design px). The header is the site's, shown as-is: only the
     bid, the rules, and the advances respond. Narrow, it stacks on a 620 canvas. */
  .ha-auction-figure {
    container-type: inline-size;
  }

  .ha-auction {
    --w: calc(100cqi / 1240);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ha-ink);
    font-family: var(--ha-sans);
    font-size: calc(17 * var(--w));
    line-height: 1.3;
  }

  .ha-auction__header {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--w));
    padding: calc(40 * var(--w)) calc(48 * var(--w)) calc(28 * var(--w));
  }

  .ha-auction__logo {
    flex: none;
    width: auto;
    height: calc(22 * var(--w));
  }

  .ha-auction__search {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--w));
    width: calc(330 * var(--w));
    height: calc(34 * var(--w));
    padding: 0 calc(14 * var(--w));
    border-radius: 999px;
    background: var(--ha-wall);
    color: var(--ha-graphite);
    font-size: calc(15 * var(--w));
    white-space: nowrap;
  }

  .ha-auction__search svg {
    width: calc(13 * var(--w));
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .ha-auction__nav {
    display: flex;
    gap: calc(20 * var(--w));
    margin-left: auto;
    font-size: calc(13 * var(--w));
    text-transform: uppercase;
  }

  .ha-auction__signin {
    display: grid;
    place-items: center;
    height: calc(34 * var(--w));
    padding: 0 calc(24 * var(--w));
    border-radius: 999px;
    background: var(--ha-ink);
    color: #ffffff;
    font-size: calc(15 * var(--w));
    white-space: nowrap;
  }

  .ha-auction__main {
    display: grid;
    grid-template-columns: calc(540 * var(--w)) minmax(0, 1fr);
    gap: calc(110 * var(--w));
    align-items: start;
    padding: calc(36 * var(--w)) calc(88 * var(--w)) calc(64 * var(--w));
  }

  .ha-auction__art {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 calc(18 * var(--w)) calc(40 * var(--w)) rgb(17 17 17 / 0.12);
  }

  .ha-auction__title {
    margin: 0;
    font-family: var(--ha-display);
    font-size: calc(58 * var(--w));
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
  }

  .ha-auction__reserve {
    display: inline-block;
    margin-top: calc(22 * var(--w));
    padding: calc(7 * var(--w)) calc(14 * var(--w));
    border: calc(1.5 * var(--w)) solid var(--ha-ink);
    border-radius: 999px;
    box-shadow: 0 calc(2 * var(--w)) calc(8 * var(--w)) rgb(17 17 17 / 0.12);
    font-size: calc(16 * var(--w));
  }

  .ha-auction__people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16 * var(--w));
    margin-top: calc(30 * var(--w));
  }

  .ha-auction__people p {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: calc(12 * var(--w));
    align-items: center;
    margin: 0;
  }

  .ha-auction__people small {
    align-self: end;
    color: var(--ha-graphite);
    font-size: calc(15 * var(--w));
  }

  .ha-auction__people p > :first-child {
    grid-row: span 2;
  }

  .ha-auction__initials,
  .ha-auction__house {
    display: grid;
    place-items: center;
    width: calc(46 * var(--w));
    height: calc(46 * var(--w));
    border-radius: 50%;
    font-size: calc(15 * var(--w));
    font-weight: 600;
  }

  .ha-auction__initials {
    background: #d6ece9;
    color: #1f5f5b;
  }

  .ha-auction__house {
    background: var(--ha-pink) url("assets/hause/mark.svg") center / 46% no-repeat;
  }

  .ha-auction__ending {
    margin: calc(40 * var(--w)) 0 0;
    color: var(--ha-graphite);
    font-size: calc(15 * var(--w));
    text-transform: uppercase;
  }

  .ha-auction__clock {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--w));
    margin: calc(4 * var(--w)) 0 calc(18 * var(--w));
    font-size: calc(74 * var(--w));
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .ha-auction__clock span {
    width: calc(14 * var(--w));
    height: calc(14 * var(--w));
    border-radius: 50%;
    background: var(--ha-pink);
    animation: ha-pulse 1.6s ease-in-out infinite;
  }

  .ha-auction__cta {
    width: 100%;
    height: calc(50 * var(--w));
    border: 0;
    border-radius: 999px;
    background: var(--ha-ink);
    color: #ffffff;
    font: inherit;
    font-size: calc(18 * var(--w));
    cursor: pointer;
  }

  .ha-auction__cta:is(:hover, :focus-visible) {
    background: var(--ha-blue);
  }

  .ha-auction__action {
    min-height: calc(50 * var(--w));
  }

  .ha-auction__action > :not(.ha-auction__cta),
  .ha-auction__action[data-auction-action]:not([data-auction-action="idle"]) > .ha-auction__cta {
    display: none;
  }

  .ha-auction__action[data-auction-action="form"] > .ha-auction__form,
  .ha-auction__action[data-auction-action="placing"] > .ha-auction__placing,
  .ha-auction__action[data-auction-action="leading"] > .ha-auction__leading {
    display: flex;
  }

  .ha-auction__form {
    flex-wrap: wrap;
    gap: calc(10 * var(--w));
    align-items: center;
    animation: ha-auction-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-auction__form .ha-auction__cta {
    flex: 1;
    width: auto;
  }

  .ha-auction__amount {
    display: flex;
    align-items: center;
    height: calc(50 * var(--w));
    padding: 0 calc(6 * var(--w));
    border: calc(1.5 * var(--w)) solid var(--ha-ink);
    border-radius: 999px;
    font-size: calc(22 * var(--w));
    font-variant-numeric: tabular-nums;
  }

  .ha-auction__amount.is-invalid {
    border-color: var(--ha-pink);
  }

  .ha-auction__amount button {
    width: calc(38 * var(--w));
    height: calc(38 * var(--w));
    border: 0;
    border-radius: 50%;
    background: var(--ha-wall);
    color: var(--ha-ink);
    font: inherit;
    line-height: 1;
    cursor: pointer;
  }

  .ha-auction__amount button:is(:hover, :focus-visible) {
    background: #e2e2e2;
  }

  .ha-auction__dollar {
    margin-left: calc(10 * var(--w));
  }

  .ha-auction__amount input {
    width: 5ch;
    margin-right: calc(6 * var(--w));
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    outline: none;
  }

  .ha-auction__cancel {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ha-graphite);
    font: inherit;
    font-size: calc(15 * var(--w));
    text-decoration: underline;
    cursor: pointer;
  }

  .ha-auction__placing,
  .ha-auction__leading {
    align-items: center;
    gap: calc(12 * var(--w));
    height: calc(50 * var(--w));
    margin: 0;
    padding: 0 calc(20 * var(--w));
    border-radius: 999px;
    background: var(--ha-wall);
    font-size: calc(18 * var(--w));
  }

  .ha-auction__spinner {
    width: calc(24 * var(--w));
    height: calc(24 * var(--w));
    border-radius: 50%;
    background: conic-gradient(rgb(0 71 255 / 0.04), var(--ha-blue));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4 * var(--w)), #000 calc(100% - 3.5 * var(--w)));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4 * var(--w)), #000 calc(100% - 3.5 * var(--w)));
    animation: ha-spin 900ms linear infinite;
  }

  .ha-auction__leading {
    background: rgb(20 255 0 / 0.16);
    animation: ha-auction-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-auction__leading span {
    width: calc(12 * var(--w));
    height: calc(12 * var(--w));
    border-radius: 50%;
    background: #2fb81e;
  }

  .ha-auction__status {
    margin: calc(14 * var(--w)) 0 0;
    color: var(--ha-graphite);
    font-size: calc(15 * var(--w));
  }

  .ha-auction__status.is-error,
  .ha-auction__status.is-outbid {
    color: var(--ha-pink);
  }

  .ha-auction__status button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }

  .ha-auction__status button:is(:hover, :focus-visible) {
    color: var(--ha-ink);
  }

  .ha-auction__rules {
    display: grid;
    gap: calc(6 * var(--w));
    margin: calc(12 * var(--w)) 0 0;
    padding: calc(16 * var(--w)) calc(18 * var(--w)) calc(16 * var(--w)) calc(38 * var(--w));
    border-radius: calc(14 * var(--w));
    background: var(--ha-wall);
    font-size: calc(15 * var(--w));
    animation: ha-auction-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-auction__rules[hidden] {
    display: none;
  }

  .ha-auction__advances-title {
    margin: calc(28 * var(--w)) 0 calc(6 * var(--w));
    font-size: calc(26 * var(--w));
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  /* The oldest advance fades out at the bottom, like the page it comes from. */
  .ha-auction__advances {
    max-height: calc(250 * var(--w));
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    -webkit-mask: linear-gradient(#000 70%, transparent);
    mask: linear-gradient(#000 70%, transparent);
  }

  .ha-auction__advances li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: calc(14 * var(--w));
    align-items: center;
    padding: calc(16 * var(--w)) 0;
    border-bottom: 1px solid #e3e3e3;
  }

  .ha-auction__advances li.is-new {
    animation: ha-auction-row 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ha-auction__advances img {
    width: calc(46 * var(--w));
    height: calc(46 * var(--w));
    border-radius: 50%;
    object-fit: cover;
  }

  .ha-auction__advances span:not(.ha-auction__initials) {
    display: grid;
  }

  .ha-auction__advances small {
    color: var(--ha-graphite);
    font-size: calc(15 * var(--w));
  }

  .ha-auction__advances b {
    font-size: calc(24 * var(--w));
    font-variant-numeric: tabular-nums;
    font-weight: 400;
  }

  .ha-auction__advances li.is-yours b {
    color: #2fb81e;
  }

  @keyframes ha-auction-in {
    from {
      opacity: 0;
      transform: translateY(calc(6 * var(--w)));
    }
  }

  @keyframes ha-auction-row {
    from {
      opacity: 0;
      background: rgb(0 71 255 / 0.08);
      transform: translateY(calc(-12 * var(--w)));
    }
  }

  @container (max-width: 40rem) {
    .ha-auction {
      --w: calc(100cqi / 620);
    }

    .ha-auction__header {
      padding: calc(28 * var(--w)) calc(28 * var(--w)) calc(20 * var(--w));
    }

    .ha-auction__search,
    .ha-auction__nav {
      display: none;
    }

    .ha-auction__signin {
      margin-left: auto;
    }

    .ha-auction__main {
      grid-template-columns: minmax(0, 1fr);
      gap: calc(36 * var(--w));
      padding: calc(12 * var(--w)) calc(28 * var(--w)) calc(40 * var(--w));
    }

    .ha-auction__art {
      width: 70%;
      margin-inline: auto;
    }
  }

  :root[data-motion-preference="reduced"] :is(.ha-auction__clock span, .ha-auction__spinner, .ha-auction__form, .ha-auction__leading, .ha-auction__rules, .ha-auction__advances li.is-new) {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ha-auction__clock span,
    .ha-auction__spinner,
    .ha-auction__form,
    .ha-auction__leading,
    .ha-auction__rules,
    .ha-auction__advances li.is-new {
      animation: none !important;
    }
  }

  :root[data-motion-preference="reduced"] :is(.ha-card, .ha-door, .ha-door img, .ha-site img, .ha-promo figure, .ha-promo img, .ha-tabbar button, .ha-tabbar button::after, .ha-onboard__chips button, .ha-variable__presets button) {
    transition: none;
  }

  :root[data-motion-preference="reduced"] :is(.ha-clock__time i, .ha-spinner, .ha-title-logo, .ha-phone__screen, .ha-phone__toast, .ha-piece__outbid, .ha-yours__art img, .ha-chart__line, .ha-ar__painting, .ha-ar__card, .ha-ar__flash.is-flashing) {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ha-card,
    .ha-door,
    .ha-door img,
    .ha-site img,
    .ha-promo figure,
    .ha-promo img,
    .ha-tabbar button,
    .ha-tabbar button::after,
    .ha-onboard__chips button,
    .ha-variable__presets button {
      transition: none !important;
    }

    .ha-clock__time i,
    .ha-spinner,
    .ha-phone__screen,
    .ha-phone__toast,
    .ha-piece__outbid,
    .ha-yours__art img,
    .ha-chart__line,
    .ha-ar__painting,
    .ha-ar__card,
    .ha-ar__flash.is-flashing {
      animation: none !important;
    }
  }

  @media (max-width: 64rem) {
    .ha-spotlight {
      grid-template-columns: minmax(0, 1fr);
    }

    .ha-spotlight__stage {
      order: 0;
    }

    .ha-flow {
      grid-auto-columns: calc((100% - 3 * var(--space-3)) / 4);
    }
  }

  @media (max-width: 64rem) {
    .ha-tone {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 48rem) {
    .ha-swatches {
      columns: 2;
    }

    .ha-values,
    .ha-type,
    .ha-moments,
    .ha-split,
    .ha-frameworks,
    .ha-heatmaps,
    .ha-process {
      grid-template-columns: minmax(0, 1fr);
    }

    .ha-personas,
    .ha-sites {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ha-flow {
      grid-auto-columns: 42%;
    }

    .ha-flow--four {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ha-promo {
      grid-template-columns: minmax(0, 1fr);
    }

    .ha-promo--posters {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-3);
    }
  }

  @media (max-width: 40rem) {
    .ha-cover {
      aspect-ratio: 4 / 3;
    }

    .ha-logos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ha-variable__controls label {
      display: grid;
      grid-template-columns: 3.25rem minmax(0, 1fr);
      width: 100%;
    }

    .ha-variable__controls input {
      width: 100%;
    }

    .ha-variable__presets {
      margin-left: 0;
    }

    .ha-applications,
    .ha-personas,
    .ha-sites,
    .ha-tone {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@layer utilities {
  /* Every project's overview paragraphs share the Oracle intro's measure:
     its title ("Designing systems at Oracle") runs 10.82 times the title's
     font size, plus the 2.5rem the intro is allowed past it. Panels are
     containers so the measure can stop at the panel's edge on small screens. */
  .work-project-panel {
    --work-intro-measure: calc(clamp(2.6rem, 5.2vw, 5.4rem) * 10.82 + 2.5rem);
    container-type: inline-size;
  }

  .section-heading--work .work-heading__note,
  .work-project-placeholder__lede {
    width: min(var(--work-intro-measure), 100cqi);
    max-width: none;
  }

  .work-project-placeholder__copy {
    max-width: none;
  }
}

/* The SoundSame cloud color is a registered property, so a new search's
   mood color can fade in (gradients can't transition on their own). */
@property --ss-cloud {
  syntax: "<color>";
  inherits: true;
  initial-value: #d0ff00;
}

@layer utilities {
  /* SoundSame. The same case-study rhythm as Hause (overview, cover, then
     blocks), in SoundSame's own kit: lime #D0FF00 on white, Instrument Sans,
     and IBM Plex Mono genre tags. The cover is an HTML rebuild of the results
     screen; it and the other specimens stay white in the dark theme, like the
     site. */
  .work-project-panel--soundsame {
    --ss-lime: #d0ff00;
    --ss-ink: #0a0a0a;
    --ss-ash: #a9a9a9;
    --ss-graphite: #666666;
    --ss-chip: #f2f2f2;
    --ss-line: #cfcfcf;
    --ss-hint: #9ca3af;
    --ss-sans: "Instrument Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ss-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --ss-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  /* Each project's title has its own face; SoundSame uses Instrument Sans,
     the face of its logo, and the mark stands in for the name. The large
     section titles share it, all at Instrument Sans' lightest weight (it
     doesn't come thinner than 400), set tight like the wordmark. */
  .work-project-panel--soundsame .work-heading__title,
  .work-project-panel--soundsame .project-collection__heading h3 {
    font-family: var(--ss-sans);
    font-weight: 400;
    letter-spacing: -0.055em;
  }

  /* The SoundSame nav link hovers in the brand's lime, outlined in gray so it still reads on white
     (the stroke is painted under the fill, so only its outer half shows). */
  /* The SoundSame nav link gets a lime pill drawn around it on hover, like
     the site's search pill; it undraws when the cursor leaves. */
  .site-nav__project[data-work-project-link="soundsame"] {
    position: relative;
  }

  .ss-nav-pill {
    position: absolute;
    inset: -0.4em -0.55em;
    width: calc(100% + 1.1em);
    height: calc(100% + 0.8em);
    overflow: visible;
    pointer-events: none;
  }

  .ss-nav-pill path {
    fill: none;
    stroke: #d0ff00;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    vector-effect: non-scaling-stroke;
    /* The round cap leaves a dot at the start even when undrawn, so hide the
       path until the pill finishes undrawing. */
    transition: stroke-dashoffset 0.5s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0s linear 0.5s;
  }

  .site-nav__project[data-work-project-link="soundsame"]:is(:hover, :focus-visible, :active) {
    color: var(--color-ink);
  }

  .site-nav__project[data-work-project-link="soundsame"]:is(:hover, :focus-visible, :active) .ss-nav-pill path {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0s;
  }

  :root[data-motion-preference="reduced"] .ss-nav-pill path {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-nav-pill path {
      transition: none;
    }
  }

  /* The mark stands in for the name, drawn in the title's own color. script.js opens it into the
     header pill now and then (so the title reads "New tunes on SoundSame") and folds it back; the box
     is 156 units tall, so its width follows --ss-title-box in the same units. */
  .ss-title-logo {
    --ss-title-box: 126;
    display: inline-block;
    width: calc(var(--ss-title-box) / 156 * 0.966em);
    height: 0.966em;
    vertical-align: -0.153em;
  }

  .ss-title-logo svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .ss-title-logo .ss-anim__pill {
    stroke-width: 6;
  }

  .ss-title-logo .ss-anim__name {
    fill: currentColor;
    font-size: 70px;
    letter-spacing: -0.03em;
  }

  .ss-title-logo .ss-anim__mark {
    fill: currentColor;
    opacity: 1;
  }

  /* After its pass, the mark stays in the brand's lime. */
  .ss-title-logo.is-lit .ss-anim__mark {
    fill: var(--ss-lime);
  }

  .work-project-panel--soundsame .work-heading__note a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }

  /* The discipline chips swap their dot for the logo's lime dot. */
  .work-heading__tags--soundsame span::before {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--ss-lime);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
  }

  /* The chips share a line with a quiet Reduce motion switch, pushed to the right margin. */
  .ss-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .ss-motion {
    gap: var(--space-2);
    min-height: 1.56rem;
    margin-left: auto;
    color: var(--color-ink-muted);
  }

  .ss-motion .motion-preference__title {
    color: inherit;
    font-size: var(--text-xs);
    font-weight: 400;
  }

  .ss-motion .motion-preference__switch {
    width: 2.1rem;
    height: 1.25rem;
    padding: 0.14rem;
    border-color: var(--color-line);
  }

  .ss-motion .motion-preference__switch span {
    width: 0.8rem;
    height: 0.8rem;
  }

  .ss-motion .motion-preference__input:checked + .motion-preference__switch span {
    transform: translateX(0.85rem);
  }

  /* Shared figure and caption style for the panel. */
  .work-project-panel--soundsame figure {
    margin: 0;
  }

  .work-project-panel--soundsame figcaption {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .work-project-panel--soundsame figcaption strong {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
  }

  /* Cover: the results screen rebuilt in HTML on a 1000-unit canvas
     (--u is one unit), or a 520-unit portrait one when it's narrow. */
  .ss-demo {
    container: ss-demo / inline-size;
  }

  .ss-stage {
    --u: calc(100cqi / 1000);
    --ss-cloud: #3a4a6b;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1000 / 620;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ss-ink);
    font-family: var(--ss-sans);
    transition: --ss-cloud 2s ease-in-out;
  }

  @container ss-demo (max-width: 560px) {
    .ss-stage {
      --u: calc(100cqi / 520);
      aspect-ratio: 520 / 760;
    }
  }

  /* Three soft clouds in the search's mood color, slowly floating. */
  .ss-clouds {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-out;
  }

  .ss-stage.has-clouds .ss-clouds {
    opacity: 1;
  }

  .ss-clouds span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ss-cloud) 50%, transparent) 0%, transparent 70%);
    filter: blur(calc(40 * var(--u)));
  }

  .ss-clouds span:nth-child(1) {
    top: 6%;
    left: 26%;
    width: 50%;
    height: 92%;
    animation: ss-float-1 20s ease-in-out infinite;
  }

  .ss-clouds span:nth-child(2) {
    top: -16%;
    left: -11%;
    width: 38%;
    height: 92%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ss-cloud) 40%, transparent) 0%, transparent 70%);
    animation: ss-float-2 25s ease-in-out infinite;
  }

  .ss-clouds span:nth-child(3) {
    top: 70%;
    left: 70%;
    width: 44%;
    height: 54%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ss-cloud) 35%, transparent) 0%, transparent 70%);
    animation: ss-float-3 30s ease-in-out infinite;
  }

  @keyframes ss-float-1 {
    0%, 100% { translate: 0 0; scale: 1; }
    50% { translate: 7% -5%; scale: 1.08; }
  }

  @keyframes ss-float-2 {
    0%, 100% { translate: 0 0; scale: 1; }
    50% { translate: 12% 10%; scale: 0.94; }
  }

  @keyframes ss-float-3 {
    0%, 100% { translate: 0 0; scale: 1; }
    50% { translate: -14% -12%; scale: 1.1; }
  }

  /* The artists. script.js places each one with a transform and keeps the
     eight around the middle drifting. */
  .ss-field {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ss-artist {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(210 * var(--u));
    text-align: center;
    opacity: 0;
    scale: 0.6;
    transition: opacity 0.45s ease-out, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
  }

  .ss-artist.is-in {
    opacity: 1;
    scale: 1;
  }

  .ss-artist.is-out {
    opacity: 0;
    scale: 0.85;
    transition-duration: 0.3s;
  }

  .ss-artist__photo {
    position: relative;
    display: block;
    width: calc(112 * var(--u));
    aspect-ratio: 1;
    overflow: hidden;
    border: max(1.5px, calc(2 * var(--u))) solid var(--ss-lime);
    border-radius: 50%;
    background: var(--ss-chip);
  }

  .ss-artist--main .ss-artist__photo {
    width: calc(150 * var(--u));
  }

  .ss-artist__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ss-artist__photo:focus-visible {
    outline: 2px solid var(--ss-lime);
    outline-offset: 2px;
  }

  /* Hover: the photo dims behind a link-out arrow. */
  .ss-artist__go {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.42);
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-out);
  }

  .ss-artist__go svg {
    width: 26%;
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .ss-artist__photo:is(:hover, :focus-visible) .ss-artist__go {
    opacity: 1;
  }

  .ss-artist__name {
    margin: calc(4 * var(--u)) 0 0;
    color: var(--ss-ash);
    font-size: calc(19 * var(--u));
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .ss-artist--main .ss-artist__name {
    color: var(--ss-ink);
    font-size: calc(26 * var(--u));
  }

  /* Long genre pairs wrap to a second line instead of spilling past the artist. */
  .ss-artist__genres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(4 * var(--u));
    margin: calc(4 * var(--u)) 0 0;
  }

  .ss-artist__genres span,
  .ss-anatomy__genres span {
    padding: calc(2 * var(--u)) calc(6 * var(--u));
    border-radius: calc(4 * var(--u));
    background: var(--ss-chip);
    color: var(--ss-graphite);
    font-family: var(--ss-mono);
    font-size: calc(10.5 * var(--u));
    line-height: 1.5;
    text-transform: lowercase;
    white-space: nowrap;
  }

  @container ss-demo (max-width: 560px) {
    .ss-artist {
      max-width: calc(170 * var(--u));
    }

    .ss-artist__photo {
      width: calc(92 * var(--u));
    }

    .ss-artist--main .ss-artist__photo {
      width: calc(120 * var(--u));
    }

    .ss-artist__name {
      font-size: calc(16 * var(--u));
    }

    .ss-artist--main .ss-artist__name {
      font-size: calc(21 * var(--u));
    }

    .ss-artist__genres span {
      font-size: calc(11 * var(--u));
    }

    .ss-artist__genres span + span {
      display: none;
    }
  }

  /* The search box, pinned to the bottom like the site's. */
  .ss-search {
    position: absolute;
    right: calc(30 * var(--u));
    bottom: calc(30 * var(--u));
    left: calc(30 * var(--u));
    z-index: 4;
    display: flex;
    align-items: center;
    max-width: calc(768 * var(--u));
    margin: 0 auto;
  }

  .ss-search input {
    width: 100%;
    min-width: 0;
    padding: calc(16 * var(--u)) calc(100 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
    border: 1px solid var(--ss-line);
    border-radius: calc(8 * var(--u));
    background: rgb(255 255 255 / 0.9);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    color: var(--ss-ink);
    font-family: var(--ss-system);
    font-size: max(0.75rem, calc(16 * var(--u)));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: box-shadow var(--motion-fast) var(--ease-out);
  }

  .ss-search input::placeholder {
    color: var(--ss-hint);
  }

  .ss-search input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ss-lime);
  }

  /* Phones zoom into inputs set under 16px, so touch screens get 16px. */
  @media (pointer: coarse) {
    .ss-search input {
      font-size: 16px;
    }
  }

  .ss-search__go,
  .ss-search__clear {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    cursor: pointer;
  }

  .ss-search__go {
    right: calc(8 * var(--u));
    width: max(1.6rem, calc(38 * var(--u)));
    aspect-ratio: 1;
    border-radius: calc(6 * var(--u));
    background: var(--ss-lime);
    color: #000000;
  }

  .ss-search__go:focus-visible {
    outline: 2px solid var(--ss-ink);
    outline-offset: 2px;
  }

  .ss-search__go svg,
  .ss-search__clear svg,
  .ss-mini-go svg {
    width: 55%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .ss-search__go .ss-spinner,
  .ss-search__go.is-busy svg {
    display: none;
  }

  .ss-search__go.is-busy .ss-spinner {
    display: block;
  }

  .ss-spinner {
    width: 50%;
    aspect-ratio: 1;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ss-spin 0.75s linear infinite;
  }

  @keyframes ss-spin {
    to { rotate: 1turn; }
  }

  .ss-search__clear {
    right: calc(54 * var(--u));
    width: max(1.5rem, calc(32 * var(--u)));
    aspect-ratio: 1;
    border-radius: 50%;
    background: none;
    color: #6b7280;
  }

  .ss-search__clear svg {
    width: 60%;
  }

  .ss-search__clear:hover {
    color: #374151;
  }

  .ss-search__clear[hidden] {
    display: none;
  }

  /* Searches the demo doesn't know point to the live site. */
  .ss-search__note {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10 * var(--u));
    left: 0;
    margin: 0;
    padding: calc(10 * var(--u)) calc(14 * var(--u));
    border: 1px solid var(--ss-line);
    border-radius: calc(8 * var(--u));
    background: rgb(255 255 255 / 0.96);
    color: var(--ss-graphite);
    font-family: var(--ss-system);
    font-size: max(0.75rem, calc(14 * var(--u)));
    line-height: 1.4;
  }

  .ss-search__note[hidden] {
    display: none;
  }

  .ss-search__note a {
    color: var(--ss-ink);
    text-decoration-line: underline;
    text-underline-offset: 0.16em;
  }

  .ss-demo__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  .ss-demo__tries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ss-demo__tries button {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
  }

  .ss-demo__tries button:hover {
    border-color: var(--ss-lime);
  }

  .ss-demo__tries button[aria-pressed="true"] {
    border-color: var(--ss-lime);
    background: var(--ss-lime);
    color: var(--ss-ink);
  }

  .ss-demo__tries button:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  /* Blocks, as in the Hause brand guide. */
  .ss-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  .ss-section--untitled {
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: 0;
  }

  .ss-block + .ss-block {
    margin-top: var(--space-9);
  }

  .ss-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .ss-block > .project-collection__heading p {
    max-width: min(var(--work-intro-measure), 100%);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .ss-group {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ss-group:has(+ .ss-note) {
    margin-bottom: 0.25rem;
  }

  .ss-note {
    max-width: min(var(--work-intro-measure), 100%);
    margin: 0 0 var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  /* Real searches: the recordings, two by two. */
  .ss-reels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
  }

  .ss-reels video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 1018;
    object-fit: cover;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    /* The poster also sits behind the video (script.js sets --ss-poster), so a reel whose frames the
       browser dropped while it was off screen shows its still instead of going blank. */
    background: #fbfbfb var(--ss-poster, none) center / cover no-repeat;
  }

  .ss-reels__wide video {
    object-fit: contain;
    background-size: contain;
  }

  /* Two ways in. */
  .ss-ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .work-project-panel--soundsame .ss-way {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ss-ink);
  }

  .ss-way small {
    color: var(--ss-graphite);
    font-family: var(--ss-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ss-way__query {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.65rem 0.5rem 0.65rem 1rem;
    border: 1px solid var(--ss-line);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    font-family: var(--ss-system);
    font-size: 0.95rem;
  }

  .ss-way__query::after,
  .ss-mini-phone__field b {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.35rem;
    background: var(--ss-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 58% no-repeat;
    content: "";
  }

  .ss-way__answer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .ss-way__answer img {
    display: block;
    border: 2px solid var(--ss-lime);
    border-radius: 50%;
    object-fit: cover;
  }

  .ss-way__main {
    width: 4.5rem;
    height: 4.5rem;
  }

  .ss-way__more {
    display: flex;
  }

  .ss-way__more img {
    width: 3rem;
    height: 3rem;
    box-shadow: 0 0 0 2px #ffffff;
  }

  .ss-way__more img + img {
    margin-left: -0.7rem;
  }

  .work-project-panel--soundsame .ss-way figcaption {
    margin: 0;
    color: var(--ss-graphite);
  }

  .work-project-panel--soundsame .ss-way figcaption strong {
    display: inline;
    color: var(--ss-ink);
    font-size: inherit;
  }

  .ss-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ss-prompts li {
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--ss-line);
    border-radius: 0.5rem;
    background: #ffffff;
    color: var(--ss-hint);
    font-family: var(--ss-system);
    font-size: 0.9rem;
  }

  .ss-prompts li::before {
    content: "Try: ";
  }

  /* No number one: three facts, then the anatomy of one artist. */
  .ss-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ss-facts li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: 0.75rem;
    background: var(--ss-lime);
    color: var(--ss-ink);
  }

  .ss-facts li:nth-child(2) {
    background: var(--ss-ink);
    color: #ffffff;
  }

  .ss-facts li:nth-child(3) {
    border: 1px solid var(--ss-line);
    background: #ffffff;
  }

  .ss-facts strong {
    font-family: var(--ss-sans);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .ss-facts span {
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ss-anatomy {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ss-ink);
  }

  .ss-anatomy__specimens {
    --u: 1px;
    display: flex;
    justify-content: center;
    gap: var(--space-7);
  }

  .ss-anatomy__artist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ss-sans);
  }

  .ss-anatomy__photo {
    position: relative;
    width: 7.5rem;
    aspect-ratio: 1;
    border: 2px solid var(--ss-lime);
    border-radius: 50%;
  }

  .ss-anatomy__photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .ss-anatomy__artist.is-hovered .ss-artist__go {
    opacity: 1;
  }

  .ss-anatomy__name {
    position: relative;
    color: var(--ss-ash);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.025em;
  }

  .ss-anatomy__genres {
    position: relative;
    display: flex;
    gap: 0.25rem;
  }

  .ss-anatomy__genres span {
    font-size: 0.66rem;
  }

  .ss-pin,
  .ss-anatomy__legend li::before {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--ss-ink);
    color: var(--ss-lime);
    font: 600 0.72rem / 1 var(--ss-mono);
  }

  .ss-pin {
    position: absolute;
    top: var(--pin-y);
    left: var(--pin-x);
    z-index: 1;
    font-style: normal;
    translate: -50% -50%;
  }

  .ss-anatomy__legend {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    color: var(--ss-graphite);
    font-size: var(--text-sm);
    line-height: 1.45;
    list-style: none;
    counter-reset: ss-pin;
  }

  /* The pin hangs in the margin so the bold lead and its sentence wrap as one line of text. */
  .ss-anatomy__legend li {
    position: relative;
    padding-left: 2rem;
    counter-increment: ss-pin;
  }

  .ss-anatomy__legend li::before {
    position: absolute;
    top: -0.05rem;
    left: 0;
    content: counter(ss-pin);
  }

  .ss-anatomy__legend strong {
    color: var(--ss-ink);
    font-weight: 600;
  }

  /* A color for every search: one tile per mood, clouds and all. */
  .ss-moods {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ss-moods li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.15rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ss-ink);
  }

  .ss-moods__sky {
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(48% 42% at 68% 34%, color-mix(in srgb, var(--ss-mood) 50%, transparent) 0%, transparent 70%),
      radial-gradient(40% 46% at 12% 8%, color-mix(in srgb, var(--ss-mood) 40%, transparent) 0%, transparent 70%),
      radial-gradient(46% 36% at 92% 96%, color-mix(in srgb, var(--ss-mood) 35%, transparent) 0%, transparent 70%);
    filter: blur(12px);
  }

  .ss-moods strong,
  .ss-moods code {
    position: relative;
  }

  .ss-moods strong {
    font-family: var(--ss-sans);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.25;
  }

  .ss-moods code {
    color: var(--ss-graphite);
    font-family: var(--ss-mono);
    font-size: 0.72rem;
  }

  /* The kit. */
  .ss-swatches {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ss-swatches li {
    display: grid;
    align-content: start;
    gap: 0.15rem;
  }

  .ss-swatch__chip {
    aspect-ratio: 1;
    margin-bottom: var(--space-2);
    border-radius: 0.75rem;
  }

  .ss-swatch__chip--line {
    border: 1px solid var(--color-line);
  }

  .ss-swatches strong {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ss-swatches code {
    color: var(--color-ink-muted);
    font-family: var(--ss-mono);
    font-size: var(--text-sm);
  }

  .ss-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .work-project-panel--soundsame .ss-type__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 15rem;
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ss-ink);
  }

  .ss-type__sample--sans {
    font-family: var(--ss-sans);
    font-size: clamp(4rem, 9vw, 6.5rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .ss-type__sample--mono {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.4rem;
  }

  .ss-type__sample--mono span {
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    background: var(--ss-chip);
    color: var(--ss-graphite);
    font-family: var(--ss-mono);
    font-size: clamp(1rem, 2vw, 1.35rem);
  }

  .work-project-panel--soundsame .ss-type__card figcaption {
    margin: 0;
    color: var(--ss-graphite);
  }

  .work-project-panel--soundsame .ss-type__card figcaption strong {
    color: var(--ss-ink);
  }

  /* Small details: a tiny specimen over each one. */
  .ss-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ss-details li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .ss-details strong {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .ss-details__art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ss-ink);
  }

  .ss-mini-go {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    background: var(--ss-lime);
    color: #000000;
  }

  .ss-details__art--tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0 var(--space-5);
    background: #f3f3f3;
  }

  .ss-mini-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
    color: #333333;
    font: 500 0.78rem / 1.2 var(--ss-system);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ss-mini-tab i {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--ss-lime);
    border-radius: 50%;
    background: #ffffff;
  }

  .ss-details__art--thumb {
    padding: var(--space-3) 0;
    background: #f3f3f3;
  }

  .ss-mini-phone {
    display: flex;
    flex-direction: column;
    width: 38%;
    height: 100%;
    padding: 0.45rem 0.4rem;
    border: 4px solid #111111;
    border-radius: 1.1rem;
    background: #ffffff;
  }

  .ss-mini-phone__dots {
    position: relative;
    flex: 1;
  }

  .ss-mini-phone__dots i {
    position: absolute;
    width: 22%;
    aspect-ratio: 1;
    border: 1.5px solid var(--ss-lime);
    border-radius: 50%;
    background: #e6e6e6;
  }

  .ss-mini-phone__dots i:nth-child(1) { top: 34%; left: 34%; width: 32%; background: #cfcfcf; }
  .ss-mini-phone__dots i:nth-child(2) { top: 8%; left: 8%; }
  .ss-mini-phone__dots i:nth-child(3) { top: 12%; left: 66%; }
  .ss-mini-phone__dots i:nth-child(4) { top: 66%; left: 12%; }
  .ss-mini-phone__dots i:nth-child(5) { top: 70%; left: 64%; }

  .ss-mini-phone__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    overflow: hidden;
    padding: 0.25rem 0.25rem 0.25rem 0.4rem;
    border: 1px solid var(--ss-line);
    border-radius: 0.3rem;
    color: var(--ss-hint);
    font: 0.45rem / 1 var(--ss-system);
    white-space: nowrap;
  }

  .ss-mini-phone__field b {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.2rem;
  }

  /* Brand: the logo as masks, so one file draws in any color. */
  .ss-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
  }

  .ss-logo-tile {
    display: grid;
    grid-column: span 2;
    align-content: start;
  }

  .ss-logo-tile--full {
    grid-column: 1 / -1;
  }

  .ss-tile {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 1;
    padding: 12% 18%;
    border-radius: 0.75rem;
    container-type: inline-size;
  }

  .ss-logo-tile--full .ss-tile {
    aspect-ratio: 3.2 / 1;
    padding: 9% 32%;
  }

  .ss-logo-tile--mark .ss-tile {
    padding: 14% 30%;
  }

  .ss-tile--white {
    border: 1px solid var(--color-line);
    background: #ffffff;
    color: var(--ss-ink);
  }

  .ss-tile--ink {
    background: var(--ss-ink);
    color: var(--ss-lime);
  }

  .ss-tile--lime {
    background: var(--ss-lime);
    color: var(--ss-ink);
  }

  .ss-ink {
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: var(--ss-art) center / contain no-repeat;
    mask: var(--ss-art) center / contain no-repeat;
  }

  .ss-ink--lockup { --ss-art: url("assets/soundsame/brand/lockup.svg"); }
  .ss-ink--mark { --ss-art: url("assets/soundsame/brand/mark.svg"); }
  .ss-ink--wordmark {
    --ss-art: url("assets/soundsame/brand/wordmark.svg");
    width: 62%;
    height: 62%;
  }
  .ss-ink--wordmark-line { --ss-art: url("assets/soundsame/brand/wordmark-line.svg"); }

  /* The site's header logo, at tile size. */
  .ss-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.4em 0.9em;
    border: 2px solid var(--ss-lime);
    border-radius: 999px;
    color: #000000;
    font-family: var(--ss-sans);
    font-size: clamp(0.9rem, 15cqi, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .ss-pill::before {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--ss-lime);
    content: "";
  }

  /* The header pill, animated: script.js expands the pill and splits its dot into the mark's seven
     circles (melted together by the goo filter), then swaps in the real mark and folds back. */
  .ss-logo-tile--mark .ss-tile--anim {
    padding: 0;
  }

  .ss-tile--anim svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .ss-anim__pill {
    fill: none;
    stroke: var(--ss-lime);
    stroke-width: 3;
  }

  .ss-anim__name {
    fill: #000000;
    font-family: var(--ss-sans);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
  }

  .ss-anim__dots {
    fill: var(--ss-lime);
  }

  .ss-anim__mark {
    fill: var(--ss-ink);
    opacity: 0;
  }

  /* Getting to SoundSame: concept screens, marks, names, and notes. */
  .ss-screens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
  }

  .ss-screens__wide {
    grid-column: 1 / -1;
  }

  .ss-screens img,
  .ss-promo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  /* The share cards are black with their own big rounded corners, all
     cropped to the 1200 by 627 share-card shape. */
  .work-project-panel--soundsame img.ss-card {
    aspect-ratio: 1200 / 627;
    border: 0;
    border-radius: 5.17% / 9.89%;
    object-fit: cover;
  }

  .ss-brainstorm {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3);
  }

  .ss-brainstorm__words {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: var(--space-5);
    border-radius: 0.75rem;
    background: var(--ss-ink);
    color: #ffffff;
    font-family: var(--ss-sans);
    font-size: clamp(1.4rem, 3.4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-transform: uppercase;
  }

  .ss-brainstorm__words span:first-child {
    color: var(--ss-lime);
  }

  .ss-explore,
  .ss-wordmarks {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ss-explore {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ss-wordmarks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Each drawing sits inside a fixed tile, whatever its own proportions. */
  .ss-explore li,
  .ss-wordmarks li {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  .ss-wordmarks li {
    aspect-ratio: 3 / 2;
  }

  .ss-explore img,
  .ss-wordmarks img {
    position: absolute;
    inset: 20%;
    width: 60%;
    height: 60%;
    object-fit: contain;
  }

  .ss-wordmarks img {
    inset: 18% 16%;
    width: 68%;
    height: 64%;
  }

  /* Notes left on the canvas, as lime stickies. */
  .ss-stickies {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) 0 0;
    list-style: none;
  }

  .ss-stickies li {
    padding: var(--space-4);
    border-radius: 0.2rem;
    background: var(--ss-lime);
    box-shadow: 0 0.5rem 1.2rem rgb(0 0 0 / 0.08);
    color: var(--ss-ink);
    font-family: var(--ss-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.35;
    rotate: -1.5deg;
  }

  .ss-stickies li:nth-child(2) {
    rotate: 2deg;
    font-family: var(--ss-mono);
    font-size: 1.4rem;
  }

  .ss-stickies li:nth-child(3) {
    rotate: -0.5deg;
  }

  .ss-stickies li:nth-child(4) {
    rotate: 1.2deg;
  }

  .ss-promo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .ss-promo__wide {
    grid-column: 1 / -1;
  }

  /* v0, Vercel, and Next.js draw in black; they turn white on the dark theme. */
  :root[data-theme="dark"] :is(.work-project-panel--soundsame, .work-project-panel--radiant) .ef-tools img:is([src$="v0.svg"], [src$="vercel.svg"], [src$="nextjs.svg"]) {
    filter: invert(1);
  }

  :root[data-motion-preference="reduced"] :is(.ss-clouds span, .ss-spinner) {
    animation: none;
  }

  :root[data-motion-preference="reduced"] :is(.ss-stage, .ss-clouds, .ss-artist) {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-clouds span,
    .ss-spinner {
      animation: none;
    }

    .ss-stage,
    .ss-clouds,
    .ss-artist {
      transition: none;
    }
  }

  @media (max-width: 48rem) {
    .ss-anatomy,
    .ss-brainstorm {
      grid-template-columns: minmax(0, 1fr);
    }

    .ss-stickies {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ss-moods {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ss-swatches {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 40rem) {
    .ss-logo-tile {
      grid-column: 1 / -1;
    }

    .ss-logo-tile--full .ss-tile {
      aspect-ratio: 2 / 1;
      padding: 10% 16%;
    }

    .ss-reels,
    .ss-screens,
    .ss-promo,
    .ss-ways,
    .ss-facts,
    .ss-type,
    .ss-details {
      grid-template-columns: minmax(0, 1fr);
    }

    .ss-anatomy {
      padding: var(--space-5);
    }

    .ss-anatomy__specimens {
      gap: var(--space-5);
    }

    .ss-anatomy__photo {
      width: 6rem;
    }
  }
}

@layer utilities {
  /* Spotify React. The same case-study rhythm as SoundSame (overview, cover,
     then blocks) in Spotify's kit: green #1DB954 on black UI, with Figtree
     standing in for Circular. The research artifacts keep the original case
     study's sage. Both prototypes are rebuilt from the Figma frames: script.js
     steps through them and CSS transitions do the moving. */
  .work-project-panel--spotify-react {
    --work-project-accent: #1db954;
    --sr-green: #1db954;
    --sr-ui: #121212;
    --sr-bar: #181818;
    --sr-sage: #abcc93;
    --sr-sage-ink: #111111;
    --sr-sans: Figtree, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  /* Each project's title has its own face; Spotify React uses Figtree, a
     Circular-like geometric sans, and its h3 section titles share it. */
  .work-project-panel--spotify-react .work-heading__title,
  .work-project-panel--spotify-react .project-collection__heading h3 {
    font-family: var(--sr-sans);
    font-weight: 700;
    letter-spacing: -0.035em;
  }

  /* The Spotify React nav link keeps its ink color on hover, and a ‼️😲 pops out beside it. */
  /* The ‼️ sits outside the link's box, so it never takes up room in the line. */
  .site-nav__project[data-work-project-link="spotify-react"] {
    position: relative;
  }

  .site-nav__project[data-work-project-link="spotify-react"]::after {
    position: absolute;
    left: calc(100% + 0.3em);
    content: "\203C\FE0F\1F632";
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-0.4em) scale(0.4) rotate(-20deg);
    transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }

  .site-nav__project[data-work-project-link="spotify-react"]:is(:hover, :focus-visible, :active) {
    color: var(--color-ink);
  }

  .site-nav__project[data-work-project-link="spotify-react"]:is(:hover, :focus-visible, :active)::after {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-nav__project[data-work-project-link="spotify-react"]::after {
      transform: none;
      transition: opacity 0.15s ease;
    }
  }

  /* "Spotify" as a green pill with black type, like Spotify's own buttons
     (green text on white would be too faint). */
  .sr-title-logo {
    display: inline-block;
    padding: 0 0.32em 0.06em;
    border-radius: 999px;
    background: var(--sr-green);
    color: #000000;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }

  .work-heading__tags--spotify-react span::before {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--sr-green);
  }

  :where(.work-project-panel--spotify-react) figure {
    margin: 0;
  }

  .work-project-panel--spotify-react figcaption {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .work-project-panel--spotify-react figcaption strong {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
  }

  /* Cover: the desktop prototype on its 1440 by 900 Figma canvas (--u is one
     canvas pixel). A camera (--cam-*) zooms between the whole app, Friend
     Activity, and the playback bar; narrow screens get a taller frame and
     closer shots. */
  .sr-cover {
    container: sr-cover / inline-size;
  }

  /* The desktop prototype plays one chapter per click; script.js lights the
     chapter on screen and runs its bar for as long as it plays. */
  .sr-chapters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: sr-chapter;
  }

  .sr-chapters li {
    display: grid;
    counter-increment: sr-chapter;
  }

  .sr-chapters button {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.2rem;
    overflow: hidden;
    padding: var(--space-3);
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--color-ink-muted, #5f625d);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease-out;
  }

  .sr-chapters button::before {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-ink) 8%, transparent);
    color: var(--color-ink);
    font-family: var(--sr-sans);
    font-size: 0.8rem;
    font-weight: 700;
    content: counter(sr-chapter);
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
  }

  .sr-chapters b {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .sr-chapters button:hover,
  .sr-chapters button[aria-current="step"] {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  }

  .sr-chapters button[aria-current="step"]::before {
    background: var(--sr-green);
    color: #000000;
  }

  .sr-chapters button::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--sr-green);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
  }

  .sr-chapters button.is-playing::after {
    animation: sr-chapter-bar var(--sr-chapter-ms, 2000ms) linear forwards;
  }

  .sr-chapters button.is-played::after {
    transform: none;
  }

  @keyframes sr-chapter-bar {
    to { transform: none; }
  }

  .sr-reel--desktop {
    --u: calc(100cqi / 1440);
    --cam-s: 1;
    --cam-x: 0;
    --cam-y: 0;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 0.75rem;
    background: #000000;
  }

  .sr-reel--desktop[data-cam="activity"] {
    --cam-s: 2;
    --cam-x: 720;
    --cam-y: 0;
  }

  .sr-reel--desktop[data-cam="bell"] {
    --cam-s: 2;
    --cam-x: 720;
    --cam-y: 450;
  }

  @container sr-cover (max-width: 560px) {
    .sr-reel--desktop {
      --cam-s: 2;
      --cam-x: 720;
      aspect-ratio: 4 / 5;
    }

    .sr-reel--desktop[data-cam="activity"] {
      --cam-s: 3.4286;
      --cam-x: 1020;
    }

    .sr-reel--desktop[data-cam="bell"] {
      --cam-s: 3.4286;
      --cam-x: 976;
      --cam-y: 375;
    }
  }

  .sr-desk {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(1440 * var(--u));
    height: calc(900 * var(--u));
    transform-origin: 0 0;
    transform: scale(var(--cam-s)) translate(calc(var(--cam-x) * -1 * var(--u)), calc(var(--cam-y) * -1 * var(--u)));
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .sr-desk img {
    position: absolute;
    display: block;
    max-width: none;
  }

  .sr-desk__app {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Friend Activity below saruhh's track line: it slides down 72px to make
     room for the reactions, which then fade in. */
  .sr-desk__fold {
    position: absolute;
    top: calc(110.5 * var(--u));
    left: calc(1184 * var(--u));
    width: calc(255 * var(--u));
    height: calc(699.5 * var(--u));
    overflow: hidden;
    /* The panel's black, so the gap opening above the sliding list never
       shows the app's own track line through it. */
    background: #000000;
    /* It starts above the track line's tallest letters, but steps down past
       saruhh's avatar so the avatar stays put. */
    clip-path: polygon(0 calc(6.5 * var(--u)), calc(60 * var(--u)) calc(6.5 * var(--u)), calc(60 * var(--u)) 0, 100% 0, 100% 100%, 0 100%);
  }

  .sr-desk__below {
    top: 0;
    left: 0;
    width: 100%;
    height: calc(699.5 * var(--u));
    transition: translate 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .sr-desk__reactions {
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(82 * var(--u));
    /* Trimmed to just under the window, so the track line can tuck up close. */
    clip-path: inset(0 0 calc(7 * var(--u)) 0);
    opacity: 0;
    translate: 0 calc(-10 * var(--u));
    transition: opacity 0.12s ease-out, translate 0.2s ease-out;
  }

  /* 72, not the reactions' full 82, so the gap under the window matches
     the one above it. */
  .sr-reel.is-open .sr-desk__below {
    translate: 0 calc(72 * var(--u));
  }

  /* The drop-down fades in once the list has made room, like a popover. */
  .sr-reel.is-open .sr-desk__reactions {
    opacity: 1;
    translate: 0;
    transition: opacity 0.2s ease-out 0.2s, translate 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
  }

  /* Hover states, exported card by card. */
  .sr-desk__card {
    z-index: 2;
    left: calc(1190 * var(--u));
    width: calc(247 * var(--u));
    height: calc(49 * var(--u));
    opacity: 0;
    transition: opacity 0.12s ease-out;
  }

  .sr-desk__card--saruhh,
  .sr-desk__card--shadowboxer {
    top: calc(64 * var(--u));
  }

  .sr-desk__card--arlene {
    top: calc(143 * var(--u));
    height: calc(73 * var(--u));
  }

  .sr-reel[data-card="saruhh"] .sr-desk__card--saruhh,
  .sr-reel[data-card="shadowboxer"] .sr-desk__card--shadowboxer,
  .sr-reel[data-card="arlene"] .sr-desk__card--arlene {
    opacity: 1;
  }

  /* The bell loses its blue dot once What's New has been opened. */
  .sr-desk__bell {
    top: calc(840 * var(--u));
    left: calc(1200 * var(--u));
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .sr-reel.is-read .sr-desk__bell {
    opacity: 1;
  }

  /* What's New, composited over the app so the panel and its shadow fade in
     as one piece; the hovered-row states sit on top. */
  .sr-desk__pop {
    position: absolute;
    z-index: 3;
    top: calc(574 * var(--u));
    left: calc(965 * var(--u));
    width: calc(424 * var(--u));
    height: calc(326 * var(--u));
    opacity: 0;
    transition: opacity 0.18s ease-out;
  }

  .sr-reel[data-pop] .sr-desk__pop {
    opacity: 1;
  }

  .sr-desk__pop img {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .sr-desk__pop img[data-sr-pop="0"],
  .sr-reel[data-pop="1"] .sr-desk__pop img[data-sr-pop="1"],
  .sr-reel[data-pop="2"] .sr-desk__pop img[data-sr-pop="2"],
  .sr-reel[data-pop="3"] .sr-desk__pop img[data-sr-pop="3"] {
    opacity: 1;
  }

  /* A macOS-style pointer, in canvas pixels, so it zooms with the camera. */
  .sr-cursor {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    translate: calc(var(--x, 760) * var(--u)) calc(var(--y, 520) * var(--u));
    transition: translate 0.75s cubic-bezier(0.45, 0, 0.2, 1);
  }

  .sr-cursor svg {
    position: absolute;
    overflow: visible;
    stroke-linejoin: round;
    filter: drop-shadow(0 calc(1 * var(--u)) calc(1.5 * var(--u)) rgb(0 0 0 / 0.35));
    transform-origin: 30% 10%;
    transition: scale 0.12s ease-out, opacity 0.08s linear;
  }

  .sr-cursor__arrow {
    top: calc(-1 * var(--u));
    left: calc(-1 * var(--u));
    width: calc(15 * var(--u));
    height: calc(21 * var(--u));
    fill: #000000;
    stroke: #ffffff;
    stroke-width: 1.1;
  }

  .sr-cursor__hand {
    top: calc(-1 * var(--u));
    left: calc(-6.5 * var(--u));
    width: calc(18 * var(--u));
    height: calc(22 * var(--u));
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 1;
    opacity: 0;
  }

  .sr-cursor.is-hand .sr-cursor__hand {
    opacity: 1;
  }

  .sr-cursor.is-hand .sr-cursor__arrow {
    opacity: 0;
  }

  .sr-cursor.is-pressing svg {
    scale: 0.86;
  }

  /* Resets between loops happen without animating. */
  .sr-reel.is-instant,
  .sr-reel.is-instant * {
    transition: none;
  }

  /* Blocks, as in SoundSame. */
  .sr-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  .sr-section--untitled {
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: 0;
  }

  .sr-section > .project-collection__heading + .sr-block {
    margin-top: 0;
  }

  .sr-block + .sr-block {
    margin-top: var(--space-9);
  }

  .sr-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .sr-block > .project-collection__heading p {
    max-width: min(var(--work-intro-measure), 100%);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .sr-group {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .sr-group:has(+ .sr-note) {
    margin-bottom: 0.25rem;
  }

  .sr-note {
    max-width: min(var(--work-intro-measure), 100%);
    margin: 0 0 var(--space-3);
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .sr-block img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* The brief. */
  .sr-brief {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .sr-brief > div {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  .sr-brief > .sr-brief__wide {
    grid-column: span 3;
    border: 0;
    background: var(--sr-ui);
    color: #ffffff;
  }

  .sr-brief dt {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .sr-brief__wide dt {
    color: var(--sr-green);
  }

  .sr-brief dd {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .sr-brief__wide dd {
    font-family: var(--sr-sans);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
  }

  /* Users by millions: the original chart, as bars. */
  .sr-chart {
    max-width: min(var(--work-intro-measure), 100%);
    margin-top: var(--space-5);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: 0.75rem;
    background: var(--sr-ui);
    color: #ffffff;
  }

  .sr-chart__bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: clamp(0.35rem, 1.4vw, 0.9rem);
    height: clamp(11rem, 26vw, 16rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sr-chart__bars li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.4rem;
    height: 100%;
  }

  .sr-chart__bars li::before {
    order: 1;
    height: calc(var(--v) / 365 * (100% - 3.2rem));
    border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
    background: var(--sr-green);
    content: "";
  }

  .sr-chart__bars strong {
    font-family: var(--sr-sans);
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    font-weight: 700;
    text-align: center;
  }

  .sr-chart__bars span {
    order: 2;
    color: rgb(255 255 255 / 0.62);
    font-family: var(--font-mono);
    font-size: clamp(0.5rem, 1.1vw, 0.64rem);
    text-align: center;
    white-space: nowrap;
  }

  /* The note on 2017 sits above its value. */
  .sr-chart__bars em {
    order: -1;
    align-self: center;
    width: max-content;
    max-width: 7rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.3rem;
    background: #ffffff;
    color: #000000;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }

  .sr-chart figcaption {
    margin-top: var(--space-4);
    color: rgb(255 255 255 / 0.72);
  }

  /* The seesaw, three ways. */
  /* The seesaws carry the story: tipped toward listening up top, toward
     social with the inbox, balanced after "Where I come in". */
  .sr-seesaw {
    max-width: min(var(--work-intro-measure), 100%);
    margin: var(--space-4) 0 var(--space-6);
  }

  .sr-seesaw img {
    width: 100%;
    height: auto;
    padding: 6% 10%;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  /* Interview numbers, after SoundSame's facts. */
  .sr-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sr-facts li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: 0.75rem;
    background: var(--sr-green);
    color: #000000;
  }

  .sr-facts li:nth-child(2) {
    background: var(--sr-ui);
    color: #ffffff;
  }

  .sr-facts li:nth-child(3) {
    background: var(--sr-sage);
    color: var(--sr-sage-ink);
  }

  .sr-facts strong {
    font-family: var(--sr-sans);
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .sr-facts span {
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* The interview guide, set like the original sage sheet. */
  .sr-guide {
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border-radius: 0.75rem;
    background: var(--sr-sage);
    color: var(--sr-sage-ink);
  }

  .sr-guide__fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    font-family: var(--sr-sans);
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    font-weight: 600;
  }

  .sr-guide__fields li {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgb(17 17 17 / 0.35);
  }

  .sr-guide__fields li::after {
    content: ":";
  }

  .sr-guide__questions {
    columns: 2 18rem;
    column-gap: var(--space-7);
    margin: 0;
    padding-left: 1.6rem;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .sr-guide__questions li {
    break-inside: avoid;
    margin-bottom: var(--space-3);
    padding-left: 0.2rem;
  }

  .sr-guide__questions li::marker {
    font-family: var(--sr-sans);
    font-weight: 700;
  }

  .sr-guide__log {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
  }

  .sr-guide__log::before {
    align-self: center;
    margin-right: var(--space-1);
    font-weight: 600;
    content: "Under each:";
  }

  .sr-guide__log span {
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.45);
  }

  /* Personas, rebuilt from the sage cards. */
  .sr-personas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sr-persona {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: 0.75rem;
    background: var(--sr-sage);
    color: var(--sr-sage-ink);
  }

  .sr-persona img {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .sr-persona h5 {
    margin: 0;
    font-family: var(--sr-sans);
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .sr-persona dl {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
  }

  .sr-persona dl div {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: var(--space-2);
  }

  .sr-persona dt {
    font-weight: 600;
  }

  .sr-persona dd {
    margin: 0;
  }

  .sr-persona blockquote {
    flex: 1;
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgb(17 17 17 / 0.25);
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .sr-persona__song {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: rgb(17 17 17 / 0.62);
    font-size: var(--text-sm);
  }

  /* The playing-bars glyph from the original cards. */
  .sr-persona__song::before {
    width: 0.85rem;
    height: 0.85rem;
    background: linear-gradient(currentColor, currentColor) 0 100% / 22% 55%, linear-gradient(currentColor, currentColor) 50% 100% / 22% 100%, linear-gradient(currentColor, currentColor) 100% 100% / 22% 75%;
    background-repeat: no-repeat;
    content: "";
  }

  /* Where each persona sits between rarely and always at a computer. */
  .sr-spectrum {
    margin-top: var(--space-5);
  }

  .sr-spectrum ol {
    position: relative;
    height: 2.4rem;
    margin: 0 0.75rem;
    padding: 0;
    list-style: none;
    background: linear-gradient(var(--color-ink), var(--color-ink)) 50% 50% / 100% 2px no-repeat;
  }

  .sr-spectrum ol::before,
  .sr-spectrum ol::after {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 0.9rem;
    background: var(--color-ink);
    content: "";
    translate: 0 -50%;
  }

  .sr-spectrum ol::before {
    left: 0;
  }

  .sr-spectrum ol::after {
    right: 0;
  }

  .sr-spectrum li {
    position: absolute;
    top: 50%;
    left: var(--at);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--sr-sage);
    color: var(--sr-sage-ink);
    font-family: var(--sr-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    translate: -50% -50%;
  }

  .sr-spectrum figcaption {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* Coining Spotify React: the ground rules. */
  .sr-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
  }

  .sr-rules li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 3px solid var(--sr-green);
    border-radius: 0.2rem 0.2rem 0.75rem 0.75rem;
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  }

  .sr-rules strong {
    font-family: var(--sr-sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .sr-rules span {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .sr-shoutout {
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
  }

  /* Journey map: the original flow, as steps. */
  .sr-journey {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sr-step;
  }

  .sr-journey li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.4;
    counter-increment: sr-step;
  }

  .sr-journey li::before {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--sr-green);
    color: #000000;
    font-family: var(--sr-sans);
    font-size: 0.8rem;
    font-weight: 700;
    content: counter(sr-step);
  }

  /* Arrows between steps on the same row. */
  .sr-journey li:not(:nth-child(4n))::after {
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--space-3));
    width: var(--space-3);
    height: 2px;
    background: var(--color-line-strong);
    content: "";
  }

  .sr-journey li:last-child::after {
    content: none;
  }

  /* Step 4 wraps to step 5: down from 4, back across the row gap, and down
     into 5, drawn as three strokes on one box spanning the four columns. */
  .sr-journey li:nth-child(4)::after {
    position: absolute;
    top: calc(100% + 1px);
    right: calc(50% - 1px);
    width: calc(300% + 3 * var(--space-3) + 2px);
    height: var(--space-5);
    background:
      linear-gradient(var(--color-line-strong), var(--color-line-strong)) right top / 2px 50% no-repeat,
      linear-gradient(var(--color-line-strong), var(--color-line-strong)) left center / 100% 2px no-repeat,
      linear-gradient(var(--color-line-strong), var(--color-line-strong)) left bottom / 2px 50% no-repeat;
    content: "";
  }

  .sr-journey .sr-journey__fork {
    grid-column: span 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .sr-journey__fork span {
    flex: 1 1 9rem;
    padding: var(--space-3);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
    font-size: var(--text-sm);
  }

  .sr-journey__fork span + span::before {
    margin-right: 0.4rem;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    content: "OR";
  }

  .sr-journey li:last-child {
    border-color: transparent;
    background: var(--sr-ui);
    color: #ffffff;
  }

  /* Sketches and boards open in the lightbox. */
  .sr-sketches {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
  }

  .sr-sketches img {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  .sr-sketches img {
    aspect-ratio: 3 / 4;
    object-fit: contain;
  }

  /* Mid-fi features: the original recordings with their notes. */
  .sr-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }

  .sr-feature video {
    display: block;
    width: 100%;
    height: clamp(16rem, 34vw, 24rem);
    border-radius: 0.75rem;
    background: #000000;
    object-fit: contain;
  }

  .sr-feature__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    border-radius: 0.75rem;
    background: #161616;
  }

  .sr-feature--phones video {
    background: #161616;
  }

  /* Findings, numbered like the original sage cards. */
  .sr-findings {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sr-finding;
  }

  .sr-findings li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--space-5);
    padding: var(--space-5);
    border-radius: 0.75rem;
    background: var(--sr-sage);
    color: var(--sr-sage-ink);
    counter-increment: sr-finding;
  }

  .sr-findings li::before {
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: clamp(2.6rem, 5vw, 3.6rem);
    height: clamp(2.6rem, 5vw, 3.6rem);
    border-radius: 50%;
    background: #000000;
    color: var(--sr-sage);
    font-family: var(--sr-sans);
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    font-weight: 700;
    content: counter(sr-finding);
  }

  .sr-findings h5 {
    margin: 0 0 var(--space-2);
    font-family: var(--sr-sans);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .sr-findings p {
    max-width: min(var(--work-intro-measure), 100%);
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .sr-findings .sr-findings__fix {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.5);
  }

  .sr-findings__fix::before {
    font-weight: 700;
    content: "The fix: ";
  }

  /* The mobile prototype: 375 by 812 Figma screens in a phone; --m is one
     screen point. */
  .sr-mobile {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-7);
    margin-bottom: var(--space-8);
  }

  .sr-mobile figcaption {
    margin-top: 0;
  }

  .sr-mobile figcaption > strong {
    margin-bottom: var(--space-4);
  }

  /* The prototype's steps: each one plays the move into it, and script.js
     lights the one on screen. Tapping the phone goes to the next. */
  .sr-steps {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sr-step;
  }

  .sr-steps li {
    display: grid;
  }

  .sr-steps button {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: 0.1rem var(--space-3);
    padding: var(--space-3);
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--color-ink-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    counter-increment: sr-step;
    transition: background-color 0.3s ease-out;
  }

  .sr-steps button::before {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-ink) 8%, transparent);
    color: var(--color-ink);
    font-family: var(--sr-sans);
    font-size: 0.8rem;
    font-weight: 700;
    content: counter(sr-step);
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
  }

  .sr-steps b {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .sr-steps button:hover,
  .sr-steps button[aria-current="step"] {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  }

  .sr-steps button[aria-current="step"]::before {
    background: var(--sr-green);
    color: #000000;
  }

  .sr-phone__screen[data-sr-reel="mobile"] {
    cursor: pointer;
  }

  .sr-phone {
    container-type: inline-size;
    width: 100%;
    padding: 3.4%;
    border-radius: 14% / 6.6%;
    background: #0d0d0d;
    box-shadow: inset 0 0 0 1px #2c2c2c, inset 0 0 0 4px #1b1b1b, 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5);
  }

  .sr-phone__screen {
    --m: calc(100cqi / 375);
    position: relative;
    overflow: hidden;
    aspect-ratio: 375 / 812;
    border-radius: calc(40 * var(--m));
    background: #000000;
  }

  /* The notch the screens' status bars are laid out around. */
  .sr-phone__screen::after {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    width: calc(209 * var(--m));
    height: calc(30 * var(--m));
    border-radius: 0 0 calc(20 * var(--m)) calc(20 * var(--m));
    background: #0d0d0d;
    content: "";
    translate: -50% 0;
  }

  .sr-phone__screen img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease-out;
  }

  .sr-phone__screen img[data-pos="below"] {
    translate: 0 100%;
  }

  .sr-phone__screen img[data-pos="right"] {
    translate: 100% 0;
  }

  .sr-phone__screen img[data-pos="above"] {
    translate: 0 -100%;
  }

  .sr-phone__screen img[data-pos="hidden"] {
    opacity: 0;
  }

  /* A finger: taps pulse, swipes hold and travel. */
  .sr-tap {
    position: absolute;
    z-index: 4;
    top: calc(var(--y, 0) * var(--m));
    left: calc(var(--x, 0) * var(--m));
    width: calc(40 * var(--m));
    height: calc(40 * var(--m));
    margin: calc(-20 * var(--m)) 0 0 calc(-20 * var(--m));
    border-radius: 50%;
    background: rgb(214 214 214 / 0.78);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1);
    opacity: 0;
    pointer-events: none;
    transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out;
  }

  .sr-tap.is-held {
    opacity: 1;
  }

  .sr-tap.is-tapping {
    animation: sr-tap 0.6s ease-out;
  }

  @keyframes sr-tap {
    0% { opacity: 0; scale: 0.6; }
    25% { opacity: 1; scale: 1; }
    70% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1.05; }
  }

  .sr-phone__screen.is-instant img,
  .sr-phone__screen.is-instant .sr-tap {
    transition: none;
  }

  /* High-fidelity pieces, each on its own UI tile. */
  .sr-hifi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sr-hifi__wide {
    grid-column: 1 / -1;
  }

  /* A size container, so the art can be capped at the tile's height. */
  .sr-hifi__art {
    display: block;
    container-type: size;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--space-4);
    padding: 6%;
    border-radius: 0.75rem;
    background: var(--sr-ui);
  }

  .sr-hifi__art .ef-promo__open {
    display: grid;
    place-items: center;
    height: 100cqh;
  }

  /* Each image carries its ratio (--r) so it can fit the tile either way. */
  .sr-hifi__art img {
    width: min(100cqw, 100cqh * var(--r));
    height: auto;
    border-radius: 0.4rem;
  }

  .sr-hifi__art--phone img {
    border-radius: 7% / 3.3%;
  }

  .sr-hifi__wide .sr-hifi__art {
    aspect-ratio: 21 / 8;
  }

  .sr-hifi h5 {
    margin: 0 0 var(--space-1);
    font-family: var(--sr-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .sr-hifi p {
    max-width: min(var(--work-intro-measure), 100%);
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .sr-hifi .sr-hifi__changes {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .sr-hifi__changes::before {
    display: inline-block;
    margin-right: 0.45rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: var(--sr-green);
    color: #000000;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    vertical-align: 0.1em;
    content: "Revised";
  }

  /* Tool tips here keep their line breaks (the pen and paper one has two lines). */
  .work-project-panel--spotify-react .ef-tools li::after {
    white-space: pre;
    text-align: center;
  }

  /* On the dark theme the black UI surfaces get a faint edge. */
  :root[data-theme="dark"] :is(.sr-reel--desktop, .sr-brief__wide, .sr-chart, .sr-facts li:nth-child(2), .sr-journey li:last-child, .sr-feature video, .sr-hifi__art) {
    outline: 1px solid rgb(255 255 255 / 0.14);
    outline-offset: -1px;
  }

  :root[data-motion-preference="reduced"] :is(.sr-desk, .sr-desk *, .sr-phone__screen img, .sr-tap) {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .sr-desk,
    .sr-desk *,
    .sr-phone__screen img,
    .sr-tap {
      transition: none;
    }
  }

  @media (max-width: 48rem) {
    .sr-brief > div,
    .sr-brief > .sr-brief__wide {
      grid-column: 1 / -1;
    }

    .sr-personas,
    .sr-rules,
    .sr-sketches {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sr-personas > :last-child {
      grid-column: 1 / -1;
    }

    .sr-journey {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sr-journey li:nth-child(n)::after {
      content: none;
    }

    .sr-guide__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 40rem) {
    .sr-facts,
    .sr-personas,
    .sr-rules,
    .sr-features,
    .sr-hifi,
    .sr-journey {
      grid-template-columns: minmax(0, 1fr);
    }

    .sr-journey .sr-journey__fork {
      grid-column: auto;
    }

    .sr-findings li {
      grid-template-columns: minmax(0, 1fr);
    }

    .sr-findings li::before {
      grid-row: auto;
      margin-bottom: var(--space-3);
    }

    .sr-hifi__wide .sr-hifi__art {
      aspect-ratio: 4 / 3;
    }

    .sr-mobile {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: var(--space-5);
    }

    .sr-phone {
      width: min(100%, 17rem);
    }

    .sr-spectrum li {
      font-size: 0.7rem;
    }

    /* Bars get too thin for the 2017 tag; the caption carries it. */
    .sr-chart__bars em {
      display: none;
    }

    .sr-chart figcaption::after {
      content: " The inbox was removed in 2017.";
    }
  }
}

@layer utilities {
  /* Alboms. The same case-study rhythm as Spotify React (overview, cover,
     then blocks) in the Alboms kit: charcoal #333333 on white, Work Sans,
     the bubble-letter badge, and one color per series. The cover is a cased
     Albom in 3D; script.js turns it and swaps between the sixteen tapes. */
  .work-project-panel--alboms {
    --work-project-accent: #d35757;
    --al-ink: #333333;
    --al-sans: "Work Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --al-specialty: #0099a0;
    --al-90s: #ef4648;
    --al-vibes: #f09953;
    --al-typebeats: #be9080;
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  /* Each project's title has its own face; Alboms uses Fredoka, round and
     bouncy like the bubble wordmark, and its h3 section titles share it. */
  .work-project-panel--alboms .work-heading__title,
  .work-project-panel--alboms .project-collection__heading h3 {
    font-family: Fredoka, var(--al-sans);
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  /* The wordmark lives once as a symbol. Each copy takes its fill from the
     text color and its cut lines (the strokes that part the letters) from
     --al-cut, the color behind it. */
  .al-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .work-project-panel--alboms use {
    fill: currentColor;
    stroke: var(--al-cut, #ffffff);
    stroke-width: 1.08;
  }

  /* The name, as the bare wordmark: the title's ink, cut strokes in the page color. */
  .al-title-logo {
    --al-cut: var(--color-canvas);
    display: inline-grid;
    place-items: center;
    vertical-align: -0.12em;
  }

  .al-title-logo svg {
    display: block;
    width: 2.4em;
    height: 0.957em;
  }

  /* Lumpy blobs, like the bubble letters, each one a little different, in the badge colors. */
  .work-heading__tags--alboms span::before {
    width: 0.7rem;
    height: 0.55rem;
    border-radius: 62% 38% 55% 45% / 58% 64% 36% 42%;
    background: #d35757;
  }

  .work-heading__tags--alboms span:nth-child(2)::before {
    border-radius: 40% 60% 42% 58% / 66% 46% 54% 34%;
    background: #5599bf;
    transform: rotate(-8deg);
  }

  .work-heading__tags--alboms span:nth-child(3)::before {
    border-radius: 55% 45% 66% 34% / 40% 62% 38% 60%;
    background: #a67c52;
    transform: rotate(10deg);
  }

  :where(.work-project-panel--alboms) figure {
    margin: 0;
  }

  .work-project-panel--alboms figcaption {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .work-project-panel--alboms figcaption strong {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
  }

  /* Cover: a cased Albom in 3D. Each face is a straight-on render of the case
     (front, back, spine), cropped to the case and set on a box at the case's
     own proportions; the open edge, top, and bottom are clear plastic.
     script.js turns it with --al-rx / --al-ry and swaps the tape. */
  .al-viewer {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5) clamp(var(--space-6), 5vw, var(--space-9));
  }

  .al-viewer__stage {
    --al-h: min(26rem, 62vw);
    --al-w: calc(var(--al-h) * 0.632);
    --al-d: calc(var(--al-h) * 0.152);
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(var(--al-h) * 1.42);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    perspective: calc(var(--al-h) * 4.5);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
  }

  .al-viewer__stage.is-dragging {
    cursor: grabbing;
  }

  .al-viewer__stage:focus-visible {
    outline: 2px solid var(--al-series);
    outline-offset: 3px;
  }

  .al-case {
    --al-rx: -8deg;
    --al-ry: 40deg;
    position: relative;
    z-index: 1;
    width: var(--al-w);
    height: var(--al-h);
    transform: rotateX(var(--al-rx)) rotateY(var(--al-ry));
    transform-style: preserve-3d;
  }

  .al-case__face {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--al-w);
    height: var(--al-h);
    max-width: none;
    backface-visibility: hidden;
    -webkit-user-drag: none;
  }

  .al-case__face--front {
    transform: translateZ(calc(var(--al-d) / 2));
  }

  .al-case__face--back {
    transform: rotateY(180deg) translateZ(calc(var(--al-d) / 2));
  }

  .al-case__face--spine,
  .al-case__face--edge {
    left: calc((var(--al-w) - var(--al-d)) / 2);
    width: var(--al-d);
  }

  .al-case__face--spine {
    transform: rotateY(-90deg) translateZ(calc(var(--al-w) / 2));
  }

  /* The open edge: clear plastic, with the tape's dark edge inside it. */
  .al-case__face--edge {
    transform: rotateY(90deg) translateZ(calc(var(--al-w) / 2));
    background:
      linear-gradient(90deg, transparent 22%, rgb(0 0 0 / 0.08) 22% 24%, transparent 24% 76%, rgb(0 0 0 / 0.08) 76% 78%, transparent 78%),
      linear-gradient(90deg, #eef0f2 0 18%, #d9dcdf 18% 82%, #eef0f2 82%);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
  }

  .al-case__face--top,
  .al-case__face--bottom {
    top: calc((var(--al-h) - var(--al-d)) / 2);
    height: var(--al-d);
    background:
      linear-gradient(180deg, transparent 20%, rgb(0 0 0 / 0.06) 20% 22%, transparent 22% 78%, rgb(0 0 0 / 0.06) 78% 80%, transparent 80%),
      linear-gradient(90deg, #e3e6e9, #f3f4f5 45%, #e3e6e9);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
  }

  .al-case__face--top {
    transform: rotateX(90deg) translateZ(calc(var(--al-h) / 2));
  }

  .al-case__face--bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--al-h) / 2));
  }

  /* A soft shadow on the floor under the case. */
  .al-viewer__floor {
    position: absolute;
    bottom: calc(var(--al-h) * 0.1);
    left: 50%;
    width: calc(var(--al-w) * 1.2);
    height: calc(var(--al-h) * 0.07);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(0 0 0 / 0.18), rgb(0 0 0 / 0));
    transform: translateX(-50%);
    pointer-events: none;
  }

  .al-viewer__series {
    margin: 0 0 var(--space-2);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .al-viewer__name {
    margin: 0 0 var(--space-4);
    font-family: inherit;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }

  .al-viewer__notes {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-4);
    border-left: 0.2rem solid var(--al-series);
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .al-viewer__views {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .al-viewer__views button {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .al-viewer__views button:hover,
  .al-viewer__views button[aria-pressed="true"] {
    border-color: var(--color-ink);
  }

  .al-viewer__views button[aria-pressed="true"] {
    background: var(--color-ink);
    color: var(--color-canvas);
  }

  /* The sixteen tapes, by series. */
  .al-viewer__tapes {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }

  .al-viewer__group p {
    margin: 0 0 var(--space-2);
    padding-top: var(--space-2);
    border-top: 0.2rem solid var(--al-series);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .al-viewer__group ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .al-viewer__group button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0.3rem;
    background: none;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .al-viewer__group button:hover {
    opacity: 1;
    transform: translateY(-2px);
  }

  .al-viewer__group button[aria-pressed="true"] {
    opacity: 1;
    outline: 2px solid var(--al-series);
    outline-offset: 2px;
  }

  .al-viewer__group img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.3rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
  }

  .al-problem,
  .al-stack {
    margin-top: var(--space-5);
  }

  /* The problem: a small photo beside the questions an unlabeled shelf asks. */
  .al-problem {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
  }

  .al-problem .ef-promo__open {
    max-width: 18rem;
  }

  .al-problem img {
    width: 100%;
    border-radius: 0.75rem;
  }

  .work-project-panel--alboms .al-problem figcaption {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .al-problem figcaption ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: 1.1em;
  }

  @media (max-width: 36rem) {
    .al-problem {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-3);
    }
  }

  .al-stack {
    margin: 0 0 var(--space-5);
  }

  .al-stack img {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
  }

  @media (max-width: 48rem) {
    .al-viewer {
      grid-template-columns: minmax(0, 1fr);
    }

    .al-viewer__tapes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 30rem) {
    .al-viewer__tapes {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Blocks, as in Spotify React. */
  .al-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  /* Untitled sections read as the next block, so they take the same gap as blocks inside a section. */
  .al-section--untitled {
    margin-top: var(--space-9);
    padding-top: 0;
    border-top: 0;
  }

  .al-section > .project-collection__heading + .al-block {
    margin-top: 0;
  }

  .al-block + .al-block {
    margin-top: var(--space-9);
  }

  .al-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .al-block > .project-collection__heading p {
    max-width: min(var(--work-intro-measure), 100%);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .al-block img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* The brief. */
  .al-brief {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .al-brief > div {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  .al-brief > .al-brief__wide {
    grid-column: span 3;
    border: 0;
    background: var(--al-ink);
    color: #ffffff;
  }

  .al-brief dt {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .al-brief__wide dt {
    color: var(--al-vibes);
  }

  .al-brief dd {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .al-brief__wide dd {
    font-family: var(--al-sans);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.35;
  }

  /* White boards (the spec, the sketches, the mockups) get a hairline. */
  .al-spec img,
  .al-sheet,
  .al-route-wrap img,
  .al-mockups img {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  /* The O-card route: the sketch, and its panels to scale. */
  .al-route-wrap {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
  }

  .al-route {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .al-route li {
    flex: var(--h) 1 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem var(--space-3);
    min-height: 2.5rem;
    padding: 0.4rem var(--space-4);
    border: 1px dashed var(--color-line-strong);
    border-radius: 0.4rem;
  }

  .al-route li:nth-child(2) {
    border-style: solid;
    background: var(--al-ink);
    color: #ffffff;
  }

  .al-route b {
    font-family: var(--al-sans);
    font-size: var(--text-base);
    font-weight: 500;
  }

  .al-route span {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .al-route li:nth-child(2) span {
    color: rgb(255 255 255 / 0.7);
  }

  .al-route i {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-style: normal;
  }

  /* The J-card's parts. */
  .al-anatomy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .al-anatomy li {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  .al-anatomy b {
    font-family: var(--al-sans);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.015em;
  }

  .al-anatomy span {
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.5;
  }

  /* The badge in its four colors, drawn from the symbol. */
  .al-badges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .al-badges li {
    display: grid;
    gap: var(--space-2);
  }

  /* The badge's own lumpy outline, from the app's Figma export (the same shape as its menu button). */
  .al-badge {
    --al-cut: var(--al-badge);
    display: grid;
    place-items: center;
    aspect-ratio: 65 / 43;
    background: var(--al-badge);
    color: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='312 59 65 43' preserveAspectRatio='none'%3E%3Cpath d='M376.854 86.9434C378.91 106.23 358.886 101.558 339.833 101.371C321.289 101.189 312.242 105.496 312.238 86.4403C312.232 67.6076 306.799 59 348.202 59C383.946 59 373.988 60.0596 376.854 86.9434Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='312 59 65 43' preserveAspectRatio='none'%3E%3Cpath d='M376.854 86.9434C378.91 106.23 358.886 101.558 339.833 101.371C321.289 101.189 312.242 105.496 312.238 86.4403C312.232 67.6076 306.799 59 348.202 59C383.946 59 373.988 60.0596 376.854 86.9434Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .al-badge svg {
    width: 82%;
    height: auto;
    aspect-ratio: 163 / 65;
  }

  /* On hover the badges and the title wordmark grow and give a little wiggle. */
  .al-badge {
    transition: transform 0.2s ease;
  }

  .al-badges li:hover .al-badge,
  .al-title-logo:hover svg {
    animation: al-badge-shake 0.45s ease-in-out;
    transform: scale(1.06);
  }

  .al-title-logo svg {
    transition: transform 0.2s ease;
  }

  @keyframes al-badge-shake {
    0% { transform: scale(1) rotate(0); }
    20% { transform: scale(1.08) rotate(-4deg); }
    40% { transform: scale(1.08) rotate(3.5deg); }
    60% { transform: scale(1.07) rotate(-2.5deg); }
    80% { transform: scale(1.06) rotate(1.5deg); }
    100% { transform: scale(1.06) rotate(0); }
  }

  /* The Alboms nav link turns into the badge on hover: the name fades as a
     vibes-orange badge with a white wordmark pops up over it with the badges' wiggle. */
  .site-nav__project[data-work-project-link="alboms"] {
    position: relative;
    transition:
      max-height 360ms var(--ease-out),
      margin 360ms var(--ease-out),
      opacity 220ms var(--ease-out),
      color 0.15s ease,
      visibility 0s linear 0s;
  }

  .al-nav-badge {
    --al-badge: #5599bf;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: -0.1em;
    width: 3.6em;
    opacity: 0;
    /* Centered with translate so transform is free for the pop and the shake. */
    translate: 0 -50%;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }

  .site-nav__project[data-work-project-link="alboms"]:is(:hover, :focus-visible, :active) {
    color: transparent;
  }

  /* The panel's wordmark fill rule doesn't reach the nav, so set it here. */
  .al-nav-badge use {
    fill: currentColor;
    stroke: var(--al-cut);
    stroke-width: 1.08;
  }

  .site-nav__project[data-work-project-link="alboms"]:is(:hover, :focus-visible, :active) .al-nav-badge {
    opacity: 1;
    transform: none;
    animation: al-badge-shake 0.45s ease-in-out 0.1s;
  }

  :root[data-motion-preference="reduced"] .al-nav-badge {
    animation: none !important;
    transition: opacity 0.15s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .al-badges li:hover .al-badge,
    .al-title-logo:hover svg,
    .site-nav__project[data-work-project-link="alboms"] .al-nav-badge {
      animation: none !important;
    }

    .al-nav-badge {
      transition: opacity 0.15s ease;
    }
  }

  .al-badges__label {
    display: grid;
    gap: 0.1rem;
  }

  .al-badges b {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .al-badges code {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  /* The series, each with its menu color. */
  .al-lineup {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .al-lineup > li {
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-top: 0.3rem solid var(--al-series);
    border-radius: 0.75rem;
  }

  .al-lineup__name {
    margin: 0 0 var(--space-3);
    font-family: var(--al-sans);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.015em;
  }

  .al-lineup ol {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .al-lineup ol li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-line);
    font-size: var(--text-sm);
    line-height: 1.4;
  }

  .al-lineup ol i {
    flex: none;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-style: normal;
  }

  .al-mockups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
  }

  .al-mockups figcaption i {
    font-style: normal;
  }

  /* In hand: the rack large, the six cased cards around it. */
  .al-photos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .al-photos figure,
  .al-photos .ef-promo__open {
    height: 100%;
  }

  .al-photos img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 0.75rem;
    object-fit: cover;
  }

  .al-photos__tall {
    grid-column: span 2;
    grid-row: span 2;
  }

  .al-photos__tall img {
    aspect-ratio: auto;
  }

  :root[data-theme="dark"] :is(.al-brief__wide, .al-route li:nth-child(2)) {
    outline: 1px solid rgb(255 255 255 / 0.14);
    outline-offset: -1px;
  }

  :root[data-motion-preference="reduced"] .al-viewer__group button {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .al-viewer__group button {
      transition: none;
    }
  }

  @media (max-width: 48rem) {
    .al-brief > div,
    .al-brief > .al-brief__wide {
      grid-column: 1 / -1;
    }

    .al-lineup,
    .al-badges {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .al-mockups {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .al-photos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .al-photos__tall {
      grid-row: auto;
    }

    .al-photos__tall img {
      aspect-ratio: 1;
    }
  }

  @media (max-width: 40rem) {
    .al-route-wrap,
    .al-anatomy,
    .al-lineup {
      grid-template-columns: minmax(0, 1fr);
    }

    .al-route {
      min-height: 22rem;
    }
  }
}

@layer utilities {
  /* that's WACK!. The same case-study rhythm as Alboms in the game's kit:
     WACK yellow #FFDA00 and black, Alata for the talking, Shrikhand for the
     yelling, Alexandria for the labels, and a color per category. The cover
     is a round on a white table; script.js deals the cards. */
  .work-project-panel--thats-wack {
    --work-project-accent: #ffda00;
    --wk-yellow: #ffda00;
    --wk-sans: Alata, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --wk-shout: Shrikhand, Georgia, serif;
    --wk-label: Alexandria, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  /* The that's WACK! nav link: on hover, just "WACK!" changes. It turns into
     the title's wordmark (WACK! on its row of yellow stars) with a pop;
     "that's" stays as it is. The wordmark's letters (rows 41-201 of 270) are
     sized a bit past the text's cap height and centered on it. */
  .site-nav__project[data-work-project-link="thats-wack"]:is(:hover, :focus-visible, :active) {
    color: var(--color-ink);
  }

  .wk-nav-wack {
    position: relative;
    display: inline-block;
    margin-left: 0.25em;
    transition: color 0.12s ease;
  }

  .wk-nav-wack::before {
    content: "";
    position: absolute;
    top: calc(50% + 0.08em);
    left: -0.22em;
    height: 1.55em;
    aspect-ratio: 789 / 270;
    background: url("assets/thats-wack/brand/wordmark.png") center / contain no-repeat;
    opacity: 0;
    transform: translateY(-50%) scale(0.7) rotate(-4deg);
    transform-origin: 30% 60%;
    transition: opacity 0.12s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }

  .site-nav__project[data-work-project-link="thats-wack"]:is(:hover, :focus-visible, :active) .wk-nav-wack {
    color: transparent;
  }

  .site-nav__project[data-work-project-link="thats-wack"]:is(:hover, :focus-visible, :active) .wk-nav-wack::before {
    opacity: 1;
    transform: translateY(-50%);
  }

  @media (prefers-reduced-motion: reduce) {
    .wk-nav-wack::before {
      transition: opacity 0.12s ease;
    }
  }

  :root[data-motion-preference="reduced"] .wk-nav-wack::before {
    transition: opacity 0.12s ease;
  }

  /* Each project's title has its own face; that's WACK! uses Alata, the
     game's voice, and its h3 section titles share it. */
  .work-project-panel--thats-wack .work-heading__title,
  .work-project-panel--thats-wack .project-collection__heading h3 {
    font-family: var(--wk-sans);
    font-weight: 400;
    letter-spacing: -0.03em;
  }

  /* The WACK! wordmark (on its yellow stars) stands in for the word. Its letters sit on the title's
     baseline: they end 74.4% of the way down the image, so the remaining 25.6% (of 1.15em) drops
     below it. On hover it gets slammed down like a WACK card. */
  .wk-title-logo {
    display: inline-block;
    width: auto;
    height: 1.15em;
    margin: 0 0.04em;
    vertical-align: -0.294em;
    transform-origin: 50% 75%;
  }

  /* On the dark theme the black letters need the star color behind all of them: these copies
     extend it around every letter, on a canvas 16px larger per side, which the negative margins
     and the larger height take back so the letters stay where they were. */
  :root[data-theme="dark"] .wk-title-logo[src$="/wordmark.png"] {
    content: url("assets/thats-wack/brand/wordmark-dark.png?v=3");
    height: 1.2863em;
    margin: -0.0681em -0.0281em;
  }

  :root[data-theme="dark"] .wk-title-logo[src$="love-wordmark.png"] {
    content: url("assets/thats-wack/brand/love-wordmark-dark.png?v=3");
    height: 1.3008em;
    margin: -0.0754em -0.0354em;
  }

  :root[data-theme="dark"] .wk-nav-wack::before {
    left: -0.3119em;
    height: 1.7337em;
    aspect-ratio: 821 / 302;
    background-image: url("assets/thats-wack/brand/wordmark-dark.png?v=3");
  }

  .wk-title-logo:hover {
    animation: wk-title-slam 0.7s;
  }

  /* A slow, high lift, then a hard, fast drop with one small rebound. */
  @keyframes wk-title-slam {
    0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
    72% { transform: translateY(-0.4em) scale(1.2) rotate(-5deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.6); }
    80% { transform: translateY(0.05em) scale(0.88) rotate(1deg); animation-timing-function: ease-out; }
    90% { transform: scale(1.02); animation-timing-function: ease-in-out; }
    100% { transform: none; }
  }

  :root[data-motion-preference="reduced"] .wk-title-logo:hover {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wk-title-logo:hover {
      animation: none;
    }
  }

  /* The title stays on one line: past phone widths its line shrinks with the column instead of
     wrapping the wordmark onto its own line. The size goes on an inner span because the shared
     title size is !important in an earlier layer. */
  @media (min-width: 40rem) {
    .work-project-panel--thats-wack .work-heading__title-group {
      container-type: inline-size;
    }

    .wk-title-line {
      font-size: min(1em, 100cqi / 11);
      white-space: nowrap;
    }
  }

  /* The for-sale note reads as an aside, a size down from the intro. */
  .work-heading__note .wk-aside {
    font-size: var(--text-sm);
  }

  .work-heading__tags--thats-wack span::before {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0;
    background: var(--wk-yellow);
    -webkit-mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
    mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
  }

  :root:not([data-theme="dark"]) .work-heading__tags--thats-wack span::before {
    background: #000000;
  }

  :where(.work-project-panel--thats-wack) figure {
    margin: 0;
  }

  .work-project-panel--thats-wack figcaption {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .work-project-panel--thats-wack figcaption strong {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
  }

  /* Cover: the box in 3D, built like the Alboms case. Each face is cut from
     the dieline's vectors (assets/thats-wack/3d/): the doodled sleeve front,
     the spine's "best played in" list, the yellow back, and the tray's top
     wall; the open left side and the bottom are the yellow tray.
     script.js turns it with --wk-rx / --wk-ry. */
  .wk-viewer__stage {
    --wk-w: min(30rem, 66vw);
    --wk-h: calc(var(--wk-w) * 448 / 628);
    --wk-d: calc(var(--wk-w) * 87 / 628);
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(var(--wk-h) * 1.75 + var(--space-8) / 2);
    padding-bottom: calc(var(--space-8) * 1.5);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    /* Off-white, so the box's white sleeve stands apart from the stage. */
    background: #f4f2ec;
    color: #000000;
    perspective: calc(var(--wk-w) * 4);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
  }

  .wk-viewer__stage.is-dragging {
    cursor: grabbing;
  }

  .wk-viewer__stage:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
  }

  .wk-cube {
    --wk-rx: -16deg;
    --wk-ry: -30deg;
    position: relative;
    z-index: 1;
    width: var(--wk-w);
    height: var(--wk-h);
    transform: rotateX(var(--wk-rx)) rotateY(var(--wk-ry));
    transform-style: preserve-3d;
  }

  .wk-cube__face {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--wk-w);
    height: var(--wk-h);
    max-width: none;
    background: #ffda00;
    backface-visibility: hidden;
    -webkit-user-drag: none;
  }

  .wk-cube__face--front {
    transform: translateZ(calc(var(--wk-d) / 2));
  }

  .wk-cube__face--back {
    transform: rotateY(180deg) translateZ(calc(var(--wk-d) / 2));
  }

  .wk-cube__face--right,
  .wk-cube__face--left {
    left: calc((var(--wk-w) - var(--wk-d)) / 2);
    width: var(--wk-d);
  }

  /* A little shade on the sides and floor-facing faces, so the edges read. */
  .wk-cube__face--right {
    transform: rotateY(90deg) translateZ(calc(var(--wk-w) / 2));
    filter: brightness(0.94);
  }

  .wk-cube__face--left {
    transform: rotateY(-90deg) translateZ(calc(var(--wk-w) / 2));
    background: #f2cf00;
  }

  .wk-cube__face--top,
  .wk-cube__face--bottom {
    top: calc((var(--wk-h) - var(--wk-d)) / 2);
    height: var(--wk-d);
  }

  .wk-cube__face--top {
    transform: rotateX(90deg) translateZ(calc(var(--wk-h) / 2));
    filter: brightness(1.02);
  }

  .wk-cube__face--bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--wk-h) / 2));
    background: #e6c400;
  }

  .wk-viewer__floor {
    position: absolute;
    top: calc(50% + var(--wk-h) * 0.62 - var(--space-8) * 0.75);
    left: 50%;
    width: calc(var(--wk-w) * 1.15);
    height: calc(var(--wk-h) * 0.12);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0));
    transform: translateX(-50%);
    pointer-events: none;
  }

  .wk-viewer__views {
    position: absolute;
    right: 0;
    bottom: var(--space-5);
    left: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    cursor: auto;
  }

  /* A topic card's back, rebuilt in its own type: Alexandria's label, Alata's
     prompt, and the "!" star in the category's color. */
  .wk-topic {
    display: block;
    padding: 4.6cqi 4.9cqi;
    background: #ffffff;
    color: #000000;
    text-align: left;
  }

  .wk-topic__label {
    display: block;
    font-family: var(--wk-label);
    font-size: 2.5cqi;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
  }

  .wk-topic__text {
    display: block;
    max-width: 88cqi;
    margin-top: 3.3cqi;
    font-family: var(--wk-sans);
    font-size: 6.7cqi;
    letter-spacing: -0.005em;
    line-height: 1.21;
  }

  .wk-star {
    position: absolute;
    right: 3.4cqi;
    bottom: 2.7cqi;
    width: 13cqi;
    aspect-ratio: 320 / 309;
    background: var(--wk-cat);
    -webkit-mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
    mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
  }

  .wk-star::after {
    position: absolute;
    inset: 0;
    background: #000000;
    content: "";
    -webkit-mask: url("assets/thats-wack/brand/star-mark.png") center / contain no-repeat;
    mask: url("assets/thats-wack/brand/star-mark.png") center / contain no-repeat;
  }

  .wk-pill {
    padding: 0.5rem 0.95rem 0.55rem;
    border: 2px solid #000000;
    border-radius: 999px;
    background: #000000;
    box-shadow: 0 3px 0 rgb(0 0 0 / 0.35);
    color: #ffffff;
    font-family: var(--wk-sans);
    font-size: 0.98rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
  }

  .wk-pill:hover {
    transform: translateY(-1px);
  }

  .wk-pill:active {
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
    transform: translateY(2px);
  }

  .wk-pill:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
  }

  .wk-pill[aria-pressed="true"] {
    background: #ffffff;
    color: #000000;
  }

  /* Blocks, as in Alboms. */
  .wk-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  .wk-section--untitled {
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: 0;
  }

  .wk-section > .project-collection__heading + .wk-block {
    margin-top: 0;
  }

  .wk-block + .wk-block {
    margin-top: var(--space-9);
  }

  .wk-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .wk-block > .project-collection__heading p {
    max-width: min(var(--work-intro-measure), 100%);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .wk-block img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .wk-block em {
    font-family: var(--wk-shout);
    font-style: normal;
  }

  /* The brief. */
  .wk-brief {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .wk-brief > div {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  .wk-brief > .wk-brief__wide {
    grid-column: span 3;
    border: 0;
    background: #000000;
    color: #ffffff;
  }

  .wk-brief dt {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .wk-brief__wide dt {
    color: var(--wk-yellow);
  }

  .wk-brief dd {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .wk-brief__wide dd {
    font-family: var(--wk-sans);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  /* How to play: each step on a little yellow star, like the card. */
  .wk-rules-wrap {
    display: grid;
    gap: var(--space-5);
  }

  .wk-rules {
    display: grid;
    max-width: 44rem;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: wk-step;
  }

  .wk-rules li {
    position: relative;
    padding-left: 2.9rem;
    font-size: var(--text-base);
    line-height: 1.5;
    counter-increment: wk-step;
  }

  .wk-rules li::before {
    position: absolute;
    top: -0.2rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.1rem;
    aspect-ratio: 320 / 309;
    background: var(--wk-yellow);
    color: #000000;
    content: counter(wk-step);
    font-family: var(--wk-shout);
    font-size: 0.9rem;
    -webkit-mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
    mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
  }

  .wk-rules b {
    font-weight: 600;
  }

  .wk-win {
    justify-self: start;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #000000;
    font-family: var(--wk-sans);
    font-size: 1.15rem;
  }

  .wk-dieline img,
  .wk-logos__tile,
  .wk-love img,
  .wk-merch img,
  .wk-promo img,
  .wk-pair img {
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  /* What's in the box. */
  .wk-contents {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Each item spans three shared rows (cards, name, note) so the names line
     up even though the instructions board is taller than the card pairs. */
  .wk-contents li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
  }

  .wk-contents__cards {
    align-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .wk-contents__cards > * {
    width: 100%;
    aspect-ratio: 1265 / 905;
    border-radius: 6% / 8.4%;
    box-shadow: 0 0.3rem 0.8rem -0.3rem rgb(0 0 0 / 0.3), 0 0 0 1px rgb(0 0 0 / 0.08);
  }

  .wk-contents__cards > img:only-child {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    border-radius: 0.5rem;
  }

  .wk-contents b {
    font-family: var(--wk-sans);
    font-size: 1.15rem;
    font-weight: 400;
  }

  .wk-contents li > span:last-child {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* A small topic card is its own container, so its type scales with it. */
  .wk-topic--mini {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    padding: 4.6% 4.9%;
  }

  .wk-topic--mini .wk-topic__label {
    font-size: 2.5cqi;
  }

  .wk-topic--mini .wk-topic__text {
    margin-top: 3.3cqi;
    font-size: 6.7cqi;
  }

  /* The categories, fronts with a sample topic. */
  .wk-cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* that's LOVE! has three categories: spread them across the full row. */
  .wk-cats--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-3);
  }

  .wk-cats img {
    width: 100%;
    aspect-ratio: 1265 / 905;
    border-radius: 6% / 8.4%;
    box-shadow: 0 0.4rem 1rem -0.4rem rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.08);
  }

  .wk-cats .ef-promo__open {
    border-radius: 6% / 8.4%;
  }

  .wk-cats p {
    margin: var(--space-3) 0 0;
    font-family: var(--wk-sans);
    font-size: 1.02rem;
    line-height: 1.4;
  }

  .wk-cats b {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
    color: var(--color-ink-muted);
    font-family: var(--wk-label);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .wk-cats small {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-ink-muted);
    font-size: 0.8rem;
  }

  .wk-cats b::before {
    width: 0.8rem;
    aspect-ratio: 320 / 309;
    background: var(--wk-cat);
    content: "";
    -webkit-mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
    mask: url("assets/thats-wack/brand/star.png") center / contain no-repeat;
  }

  .wk-pair {
    display: grid;
    grid-template-columns: minmax(0, 1.776fr) minmax(0, 2.395fr);
    gap: var(--space-3);
    margin-top: var(--space-7);
  }

  .wk-pair img {
    width: 100%;
  }

  .wk-pair--box {
    grid-template-columns: minmax(0, 2.35fr) minmax(0, 1.623fr);
  }

  /* A second row of card photos right under the box ones. */
  .wk-pair--more {
    margin-top: var(--space-3);
  }

  /* Identity. */
  .wk-logos {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .wk-logos figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .wk-logos__tile {
    display: grid;
    place-items: center;
    padding: clamp(var(--space-4), 3vw, var(--space-7));
  }

  .wk-logos img {
    width: 100%;
    max-height: 9rem;
    object-fit: contain;
  }

  .wk-logos__main {
    grid-row: span 2;
  }

  .wk-logos__main img {
    max-height: none;
  }

  .wk-logos .wk-logos__stars {
    grid-column: span 2;
  }

  .wk-logos__stars .wk-logos__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
  }

  .wk-logos__stars img {
    width: auto;
    height: 5.5rem;
  }

  .wk-onblack {
    margin-top: var(--space-3);
  }

  .wk-onblack img {
    width: 100%;
    border-radius: 0.75rem;
  }

  .wk-type {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wk-type li {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  .wk-type__sample {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
  }

  .wk-type__sample--alata { font-family: var(--wk-sans); }
  .wk-type__sample--shrikhand { font-family: var(--wk-shout); }
  .wk-type__sample--alexandria { font-family: var(--wk-label); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: 0.04em; }

  .wk-type b {
    font-size: var(--text-base);
    font-weight: 600;
  }

  .wk-type span {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .wk-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
  }

  /* The doodles sit on one white sheet, as they do on the box. */
  .wk-doodles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-5) var(--space-6);
    margin: var(--space-5) 0 0;
    padding: clamp(var(--space-5), 4vw, var(--space-8));
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    list-style: none;
  }

  .wk-doodles img {
    display: block;
    width: auto;
    height: calc(var(--k, 1) * clamp(5.5rem, 11vw, 9rem));
  }

  .wk-swatches li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-size: var(--text-sm);
  }

  .wk-swatches li::before {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--sw);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
    content: "";
  }

  .wk-swatches b {
    font-weight: 600;
  }

  .wk-swatches code {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
  }

  :root[data-theme="dark"] .wk-swatches li[style*="#000000"]::before {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  }

  /* Packaging. */
  /* The printed box, front and back at the same height. */
  .wk-pair--printed {
    grid-template-columns: minmax(0, 1.332fr) minmax(0, 1.697fr);
    margin-top: 0;
  }

  .wk-dieline {
    margin: 0;
  }

  .wk-dieline img {
    width: 100%;
  }

  /* Promotional materials. */
  .wk-promo {
    display: grid;
    grid-template-columns: minmax(0, 1.605fr) minmax(0, 1fr);
    gap: var(--space-3);
  }

  .wk-promo img {
    width: 100%;
  }

  .wk-merch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .wk-merch img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .wk-merch img[src$="photos/stickers.jpg"] {
    object-fit: cover;
  }

  /* The expansion. */
  .wk-love {
    display: grid;
    grid-template-columns: minmax(0, 1.103fr) minmax(0, 0.582fr) minmax(0, 0.771fr);
    gap: var(--space-3);
    margin-bottom: var(--space-7);
  }

  .wk-love img {
    width: 100%;
  }

  :root[data-theme="dark"] .wk-brief__wide {
    outline: 1px solid rgb(255 255 255 / 0.14);
    outline-offset: -1px;
  }

  :root[data-motion-preference="reduced"] .wk-pill {
    animation: none;
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wk-pill {
      animation: none;
      transition: none;
    }
  }

  @media (max-width: 48rem) {
    .wk-brief > div,
    .wk-brief > .wk-brief__wide {
      grid-column: 1 / -1;
    }


    .wk-contents,
    .wk-cats,
    .wk-cats--three {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wk-logos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: none;
    }

    .wk-logos__main {
      grid-column: 1 / -1;
      grid-row: auto;
    }

    .wk-type {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 40rem) {
    .wk-promo,
    .wk-merch,
    .wk-pair {
      grid-template-columns: minmax(0, 1fr);
    }

    .wk-love {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wk-love__wide {
      grid-column: 1 / -1;
    }

  }
}

@layer utilities {
  /* The Biophilic Continuum nav link draws its two lines into each other on
     hover and holds them there, in the lookbook cover's type: lowercase, thin,
     and Archivo stretched past its widest. They separate again when the cursor
     leaves. The box keeps its two-line height so the links below don't move. */
  .site-nav__project[data-work-project-link="biophilic-continuum"] {
    height: 2.5em;
    line-height: 1.25;
    white-space: nowrap;
    text-transform: lowercase;
    transform-origin: left center;
    transition: line-height 0.7s cubic-bezier(0.45, 0.05, 0.25, 1), font-weight 0.6s ease, font-stretch 0.6s ease, transform 0.6s ease;
  }

  .site-nav__project[data-work-project-link="biophilic-continuum"]:is(:hover, :focus-visible, :active) {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-stretch: 125%;
    font-weight: 100;
    line-height: 0.6;
    transform: scaleX(1.3);
  }

  :root[data-motion-preference="reduced"] .site-nav__project[data-work-project-link="biophilic-continuum"] {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-nav__project[data-work-project-link="biophilic-continuum"] {
      transition: none;
    }
  }

  /* Biophilic Continuum. The same case-study rhythm as that's WACK! in the
     show's print kit: black and white, everything lowercase, a wide grotesque
     (Archivo at its widest stands in for Pragmatica Extended), and the color
     left to the photos, with one per act. The cover is the lookbook as a
     book you can page through; script.js builds the leaves. */
  .work-project-panel--biophilic-continuum {
    --work-project-accent: #111111;
    --bc-wide: Archivo, "Helvetica Neue", Arial, sans-serif;
    --bc-abundance: #4c6a3a;
    --bc-destruction: #b4482c;
    --bc-regrowth: #7d8c3c;
    --bc-stage: #f1f1ef;
    --bc-turn: cubic-bezier(0.45, 0.05, 0.25, 1);
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  :root[data-theme="dark"] .bc-lanyard {
    --bc-cord: #d8d8d4;
  }

  :root[data-theme="dark"] .work-project-panel--biophilic-continuum {
    --bc-abundance: #8fb174;
    --bc-destruction: #e2734f;
    --bc-regrowth: #b4c262;
    --bc-stage: #191919;
  }

  /* Each project's title has its own face; Biophilic Continuum uses the wide
     grotesque, and its h3 section titles share it. */
  .work-project-panel--biophilic-continuum .work-heading__title,
  .work-project-panel--biophilic-continuum .project-collection__heading h3 {
    font-family: var(--bc-wide);
    font-stretch: 125%;
    font-weight: 500;
    letter-spacing: -0.04em;
  }

  /* The Biophilic Continuum nav link hovers in gray, like the show's black and white. */
  .site-nav__project[data-work-project-link="biophilic-continuum"]:is(:hover, :focus-visible, :active) {
    color: #8a8a8a;
  }

  /* The name, in the show's lowercase, a step heavier than the line. */
  .bc-title-name {
    font-weight: 700;
  }

  .work-project-panel--biophilic-continuum .work-heading__note a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }

  .work-heading__tags--biophilic-continuum span::before {
    border-radius: 0;
    background: var(--color-ink);
  }

  :where(.work-project-panel--biophilic-continuum) figure {
    margin: 0;
  }

  .work-project-panel--biophilic-continuum figcaption {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .work-project-panel--biophilic-continuum figcaption strong {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
  }

  /* Cover: a book on a plain stage. Each leaf is a sheet of paper hinged at
     the spine, with a right page on its front and the next left page on its
     back. Leaves sit a hair apart in depth so the stacks sort themselves. */
  .bc-cover {
    container: bc-cover / inline-size;
  }

  .bc-book {
    --bc-spread-ratio: 1800 / 1260;
    --bc-spread-w: 1.4286;
    --bc-max-h: min(36rem, 68vh);
    padding: clamp(var(--space-5), 4.5vw, var(--space-8)) clamp(var(--space-3), 4vw, var(--space-8)) var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: var(--bc-stage);
  }

  .bc-book--program {
    --bc-spread-ratio: 1600 / 1236;
    --bc-spread-w: 1.2945;
    --bc-max-h: min(30rem, 64vh);
  }

  .bc-book__stage {
    display: flex;
    justify-content: center;
    perspective: 2600px;
  }

  .bc-book__spread {
    position: relative;
    width: min(100%, calc(var(--bc-max-h) * var(--bc-spread-w)));
    aspect-ratio: var(--bc-spread-ratio);
    transform-style: preserve-3d;
    transition: transform 0.8s var(--bc-turn);
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Closed, only one page shows, so the book slides to center it. */
  .bc-book[data-edge="front"] .bc-book__spread {
    transform: translateX(-25%);
  }

  .bc-book[data-edge="back"] .bc-book__spread {
    transform: translateX(25%);
  }

  .bc-book__spread::before {
    position: absolute;
    inset: 3% 1% -1.5%;
    border-radius: 2%;
    background: rgb(0 0 0 / 0.22);
    content: "";
    filter: blur(18px);
    transform: translateZ(-2px);
    transition: inset 0.8s var(--bc-turn);
  }

  .bc-book[data-edge="front"] .bc-book__spread::before {
    inset: 3% 1% -1.5% 51%;
  }

  .bc-book[data-edge="back"] .bc-book__spread::before {
    inset: 3% 51% -1.5% 1%;
  }

  :root[data-theme="dark"] .bc-book__spread::before {
    background: rgb(0 0 0 / 0.6);
  }

  .bc-book__fallback {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    object-fit: cover;
  }

  .bc-leaf {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    transform: translateZ(var(--z, 0px)) rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.8s var(--bc-turn);
    transition-delay: var(--delay, 0ms);
  }

  .bc-leaf.is-turned {
    transform: translateZ(var(--z, 0px)) rotateY(-180deg);
  }

  .bc-leaf__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #ffffff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05);
  }

  .bc-leaf__face--back {
    transform: rotateY(180deg);
  }

  .bc-leaf__face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* A little shade into the gutter on every page. */
  .bc-leaf__face::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.05) 3%, transparent 8%);
    content: "";
    pointer-events: none;
  }

  .bc-leaf__face--back::after {
    background: linear-gradient(270deg, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.05) 3%, transparent 8%);
  }

  .bc-book__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    width: min(100%, 44rem);
    margin: var(--space-6) auto 0;
  }

  .bc-book__turn {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-line-strong, var(--color-line));
    border-radius: 50%;
    background: var(--color-surface, transparent);
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out, opacity 0.15s ease-out;
  }

  .bc-book__turn svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .bc-book__turn:hover:not(:disabled) {
    background: var(--color-ink);
    color: var(--color-surface);
  }

  .bc-book__turn:focus-visible,
  .bc-book__map button:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
  }

  .bc-book__turn:disabled {
    opacity: 0.3;
    cursor: default;
  }

  /* The map: one bar per section, as long as its run of pages. */
  .bc-book__map {
    display: flex;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bc-book__map li {
    flex: var(--n) 1 0;
    min-width: 0;
  }

  .bc-book__map button {
    display: block;
    width: 100%;
    padding: 0.55rem 0 0;
    border: 0;
    border-top: 3px solid var(--color-line);
    background: none;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease-out, color 0.2s ease-out;
  }

  .bc-book__map button:hover {
    color: var(--color-ink);
  }

  .bc-book__map button[aria-pressed="true"] {
    border-top-color: var(--bc-act, var(--color-ink));
    color: var(--color-ink);
  }

  .bc-book--program .bc-book__map button {
    text-align: center;
  }

  @container bc-cover (max-width: 560px) {
    .bc-book--lookbook .bc-book__map button:not([aria-pressed="true"]) {
      color: transparent;
    }

    .bc-book__bar {
      gap: var(--space-3);
    }
  }

  .bc-book__status {
    min-height: 1.45em;
    margin: var(--space-3) 0 0;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.45;
    text-align: center;
  }

  /* Blocks, as in that's WACK!. */
  .bc-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  .bc-section--untitled {
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: 0;
  }

  .bc-section > .project-collection__heading + .bc-block {
    margin-top: 0;
  }

  .bc-block + .bc-block {
    margin-top: var(--space-9);
  }

  .bc-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .bc-block > .project-collection__heading p {
    max-width: min(var(--work-intro-measure), 100%);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .work-project-panel--biophilic-continuum img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .work-project-panel--biophilic-continuum .ef-promo__open {
    overflow: hidden;
    border-radius: 0.35rem;
  }

  .work-project-panel--biophilic-continuum .ef-promo__open img {
    width: 100%;
  }

  /* Pages read as paper: a hairline so white pages hold their edge. */
  .work-project-panel--biophilic-continuum .ef-promo__open:has(img[src*="/lookbook/"], img[src*="/program/"], img[src*="/badges/"]) {
    box-shadow: 0 0 0 1px var(--color-line);
  }

  .bc-act {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bc-act, var(--color-ink-muted));
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .bc-act::before {
    width: 0.42rem;
    height: 0.42rem;
    background: currentColor;
    content: "";
  }

  /* The brief. */
  .bc-brief {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .bc-brief > div {
    display: flex;
    grid-column: span 2;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
  }

  .bc-brief > .bc-brief__wide {
    grid-column: span 3;
    border: 0;
    background: #111111;
    color: #ffffff;
  }

  :root[data-theme="dark"] .bc-brief__wide {
    outline: 1px solid rgb(255 255 255 / 0.14);
    outline-offset: -1px;
  }

  .bc-brief dt,
  .bc-specs dt,
  .bc-acts dt {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .bc-brief__wide dt {
    color: rgb(255 255 255 / 0.62);
  }

  .bc-brief dd {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .bc-brief__wide dd {
    font-family: var(--bc-wide);
    font-size: clamp(1.02rem, 1.55vw, 1.22rem);
    font-stretch: 112.5%;
    letter-spacing: -0.02em;
    line-height: 1.35;
  }

  /* Three acts. */
  .bc-acts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bc-acts > li {
    display: flex;
    flex-direction: column;
  }

  .bc-acts__num {
    margin: var(--space-4) 0 0;
    color: var(--bc-act);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .bc-acts__name {
    margin: 0.15rem 0 0;
    font-family: var(--bc-wide);
    font-size: clamp(1.4rem, 2.3vw, 1.8rem);
    font-stretch: 125%;
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.1;
    text-transform: lowercase;
  }

  .bc-acts__line {
    margin: var(--space-2) 0 var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    font-style: italic;
  }

  .bc-acts dl {
    display: grid;
    gap: var(--space-2);
    margin: auto 0 0;
    padding-top: var(--space-3);
    border-top: 2px solid var(--bc-act);
  }

  .bc-acts dl > div {
    display: grid;
    grid-template-columns: 5.4rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
  }

  .bc-acts dd {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  /* The site: the acts again, in Fort Mason's ground. */
  .bc-site {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--color-line);
  }

  .bc-site > div {
    display: grid;
    grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-line);
  }

  .bc-site dt {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-family: var(--bc-wide);
    font-size: 1.05rem;
    font-stretch: 125%;
    font-weight: 600;
    letter-spacing: -0.035em;
    text-transform: lowercase;
  }

  .bc-site dt::before {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--bc-act, var(--color-ink));
    content: "";
  }

  .bc-site dd {
    max-width: 62ch;
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
  }

  /* The set: the lotus and two pages, all one height. */
  .bc-set {
    display: grid;
    grid-template-columns: minmax(0, 1.3333fr) minmax(0, 0.7143fr) minmax(0, 0.7143fr);
    gap: var(--space-3);
  }

  /* One name, three ways: each piece at the same height. */
  .bc-names {
    display: grid;
    grid-template-columns: minmax(0, 0.7143fr) minmax(0, 0.63fr) minmax(0, 0.6472fr);
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bc-names p,
  .bc-designers p {
    margin: var(--space-3) 0 0;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .bc-names b,
  .bc-designers b {
    display: block;
    color: var(--color-ink);
    font-family: var(--bc-wide);
    font-size: 1.02rem;
    font-stretch: 125%;
    font-weight: 600;
    letter-spacing: -0.03em;
  }

  /* Lookbook contents: rows that turn the book above. */
  .bc-toc {
    margin: 0 0 var(--space-6);
    padding: 0;
    border-top: 1px solid var(--color-line);
    list-style: none;
  }

  .bc-toc button {
    display: grid;
    grid-template-columns: 5.5rem minmax(8rem, 0.3fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
    width: 100%;
    padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-line);
    box-shadow: inset 3px 0 0 var(--bc-act, var(--color-ink));
    background: none;
    color: var(--color-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
  }

  .bc-toc button:hover {
    background: rgb(var(--dk-ink-rgb, 22 21 19) / 0.04);
  }

  .bc-toc button:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: -2px;
  }

  .bc-toc__pp {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .bc-toc b {
    font-family: var(--bc-wide);
    font-size: 1.05rem;
    font-stretch: 125%;
    font-weight: 600;
    letter-spacing: -0.035em;
    text-transform: lowercase;
  }

  .bc-toc span:last-child {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .bc-front,
  .bc-collages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .bc-collages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* A page per designer, a row per act. */
  .bc-designers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bc-designers li {
    display: grid;
    grid-template-columns: minmax(5rem, 0.42fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  .bc-designers p {
    margin: 0;
  }

  .bc-designers b {
    margin-bottom: 0.2rem;
    text-transform: lowercase;
  }

  .bc-designers .bc-act {
    display: flex;
    margin-bottom: var(--space-2);
  }

  /* In print, and the badges' and program's specs. */
  .bc-print {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
  }

  .bc-print video,
  .bc-recap video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    background: #111111;
  }

  /* The recap's frames run white to the edge, so no dark fill behind them. */
  .bc-recap video {
    background: transparent;
  }

  .bc-specs {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--color-line);
  }

  .bc-specs > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-line);
  }

  .bc-specs dd {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  /* Badges: one on a lanyard, flipped by a tap. */
  .bc-badges {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-7);
    align-items: start;
  }

  .bc-lanyard {
    --bc-cord: #1d1d1d;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--space-5) var(--space-6);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: var(--bc-stage);
  }

  /* The cord loops down from the top and through the slot. */
  .bc-lanyard__cord {
    position: relative;
    z-index: 0;
    width: 3.4rem;
    height: 5.2rem;
    margin-bottom: -1.35rem;
    border: 0.32rem solid var(--bc-cord);
    border-top: 0;
    border-radius: 0 0 0.9rem 0.9rem;
  }


  .bc-badge {
    position: relative;
    z-index: 1;
    width: min(15rem, 100%);
    aspect-ratio: 560 / 889;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: 1400px;
    transform-origin: 50% -4rem;
  }

  .bc-badge:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 4px;
    border-radius: 0.6rem;
  }

  .bc-badge__inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.2, 1);
  }

  .bc-badge[aria-pressed="true"] .bc-badge__inner {
    transform: rotateY(180deg);
  }

  .bc-badge__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 5.6% / 3.5%;
    background: #ffffff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.12), 0 16px 32px -14px rgb(0 0 0 / 0.4);
  }

  .bc-badge__back {
    transform: rotateY(180deg);
  }

  .bc-badge__face img {
    width: 100%;
    height: 100%;
  }

  /* The slot punch, with the stage and the cord showing through it. */
  .bc-badge__face::before {
    position: absolute;
    top: 3.6%;
    left: 50%;
    width: 24%;
    height: 2.8%;
    border-radius: 999px;
    background: linear-gradient(var(--bc-stage) 22%, var(--bc-cord) 22% 74%, var(--bc-stage) 74%) 50% 0 / 82% 100% no-repeat, var(--bc-stage);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35);
    content: "";
    transform: translateX(-50%);
  }

  .bc-badges__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .bc-pill {
    padding: 0.5rem 1rem 0.55rem;
    border: 1.5px solid var(--color-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--color-ink);
    font-family: var(--bc-wide);
    font-size: 0.86rem;
    font-stretch: 125%;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
  }

  .bc-pill[aria-pressed="true"] {
    background: var(--color-ink);
    color: var(--bc-stage);
  }

  .bc-pill:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  .bc-badges__notes {
    display: grid;
    gap: var(--space-6);
  }

  /* Program. */
  .bc-cover--program {
    margin-bottom: var(--space-7);
  }

  .bc-program {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .bc-program__wide {
    grid-column: 1 / -1;
  }


  /* Show night. */
  .bc-night {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .bc-night__wide {
    grid-column: 1 / -1;
  }

  :root[data-motion-preference="reduced"] :is(.bc-book__spread, .bc-book__spread::before, .bc-leaf, .bc-badge__inner) {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .bc-book__spread,
    .bc-book__spread::before,
    .bc-leaf,
    .bc-badge__inner {
      transition: none;
    }
  }

  @media (max-width: 48rem) {
    .bc-brief > div,
    .bc-brief > .bc-brief__wide {
      grid-column: 1 / -1;
    }

    .bc-acts {
      grid-template-columns: minmax(0, 1fr);
    }

    .bc-acts > li {
      display: grid;
      grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
      column-gap: var(--space-4);
      align-items: start;
    }

    .bc-acts > li > .ef-promo__open {
      grid-row: 1 / span 4;
    }

    .bc-acts__num {
      margin-top: 0;
    }

    .bc-acts dl > div {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .bc-site > div {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2);
    }

    .bc-designers {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bc-toc button {
      grid-template-columns: 4.6rem minmax(0, 1fr);
      row-gap: var(--space-1, 0.25rem);
    }

    .bc-toc span:last-child {
      grid-column: 2;
    }

    .bc-print,
    .bc-badges {
      grid-template-columns: minmax(0, 1fr);
    }

    .bc-print__video {
      width: min(100%, 18rem);
    }

    .bc-front {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 40rem) {
    .bc-set {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bc-set__wide {
      grid-column: 1 / -1;
    }

    .bc-names {
      gap: var(--space-3);
    }

    .bc-designers,
    .bc-program,
    .bc-night {
      grid-template-columns: minmax(0, 1fr);
    }

    .bc-collages {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-2);
    }

    .bc-specs > div {
      grid-template-columns: 5.5rem minmax(0, 1fr);
    }
  }
}

@layer utilities {
  /* Radiant. A short case study in the agency's own kit: a spiral mark, one
     narrow serif (Gupter), and a loud color per kind of work. The cover is the
     brand reel rebuilt on its 1920x1080 slides; the WOW Rolling site further
     down is live HTML on its 1512x982 frame. */
  .work-project-panel--radiant {
    --work-project-accent: #111111;
    --ra-serif: Gupter, "Iowan Old Style", Georgia, serif;
    --ra-green: #a4fe6d;
    --ra-purple: #d660ff;
    --ra-blue: #6096ff;
    --ra-orange: #ffa360;
    --ra-yellow: #ffe45e;
    padding-bottom: clamp(var(--space-7), 9vw, var(--space-10));
  }

  /* Each project's title has its own face; Radiant uses its brand serif, and
     its h3 section titles share it. */
  /* The title's words and the section headings are in the face
     createradiant.com is set in; the wordmark in the title keeps the brand
     serif's outlines. */
  .work-project-panel--radiant .work-heading__title,
  .work-project-panel--radiant .project-collection__heading :is(h3, h4) {
    font-family: "Pontano Sans", var(--font-sans, sans-serif);
    font-weight: 400;
    letter-spacing: -0.02em;
  }

  /* The spiral is a mask, so it takes the text color in either theme. */
  .ra-spiral {
    display: inline-block;
    aspect-ratio: 696 / 730;
    background: currentColor;
    -webkit-mask: url("assets/radiant/brand/spiral.png") center / contain no-repeat;
    mask: url("assets/radiant/brand/spiral.png") center / contain no-repeat;
  }

  /* The wordmark stands in for the word. Its letters end on the title's
     baseline; only the round ones dip a hair under it. */
  .ra-title-logo {
    display: inline-block;
    white-space: nowrap;
  }

  .ra-title-logo svg {
    width: auto;
    height: 0.82em;
    overflow: visible;
    vertical-align: -0.014em;
    fill: currentColor;
    /* A stroke in the fill color thickens the outlines. */
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linejoin: round;
  }

  .work-heading__tags--radiant span::before {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 0;
    background: var(--color-ink);
    -webkit-mask: url("assets/radiant/brand/spiral.png") center / contain no-repeat;
    mask: url("assets/radiant/brand/spiral.png") center / contain no-repeat;
  }

  :where(.work-project-panel--radiant) figure {
    margin: 0;
  }

  .work-project-panel--radiant figcaption {
    margin-top: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  :where(.work-project-panel--radiant) img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* The reel. Everything sits on the slides' 1920x1080 canvas; --u is one
     canvas pixel. Each kind of work is a set of pictures that drops in from
     above and falls out below, as the slides' off-canvas pictures do. */
  .ra-reel {
    --u: calc(100cqi / 1920);
    --ra-bg: var(--ra-green);
    --ra-turn: -80deg;
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    background: var(--ra-bg);
    color: #000000;
    transition: background-color 0.7s ease, color 0.7s ease;
  }

  .ra-reel[data-slide="1"] { --ra-bg: var(--ra-purple); --ra-turn: 20deg; }
  .ra-reel[data-slide="2"] { --ra-bg: var(--ra-blue); --ra-turn: 180deg; }
  .ra-reel[data-slide="3"] { --ra-bg: var(--ra-orange); --ra-turn: 280deg; }
  .ra-reel[data-slide="4"] { --ra-bg: var(--ra-yellow); --ra-turn: 420deg; }
  .ra-reel[data-slide="5"] { --ra-bg: #000000; --ra-turn: 560deg; color: #ffffff; }

  .ra-reel__canvas {
    position: absolute;
    inset: 0;
    font-family: var(--ra-serif);
  }

  .ra-reel__lead {
    position: absolute;
    top: calc(40 * var(--u));
    left: calc(68 * var(--u));
    margin: 0;
    font-size: calc(110 * var(--u));
    line-height: calc(121 * var(--u));
    white-space: nowrap;
  }

  /* Each slide set its word at its own height; the offsets are the slides'. */
  .ra-reel__words {
    position: absolute;
    inset: 0;
    margin: 0;
    font-size: calc(228 * var(--u));
    line-height: 1;
    white-space: nowrap;
  }

  .ra-reel__words span {
    position: absolute;
    right: calc(var(--x, 58) * var(--u));
    bottom: calc(var(--y, 35) * var(--u));
    opacity: 0;
    translate: 0 calc(60 * var(--u));
    transition: opacity 0.3s ease, translate 0.5s ease;
  }

  .ra-reel[data-slide="0"] [data-ra-word="0"],
  .ra-reel[data-slide="1"] [data-ra-word="1"],
  .ra-reel[data-slide="2"] [data-ra-word="2"],
  .ra-reel[data-slide="3"] [data-ra-word="3"],
  .ra-reel[data-slide="4"] [data-ra-word="4"],
  .ra-reel[data-slide="5"] [data-ra-word="5"] {
    opacity: 1;
    translate: 0;
    transition: opacity 0.4s ease 0.25s, translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s;
  }

  [data-ra-word="0"] { --x: 57; --y: 37; }
  [data-ra-word="1"] { --y: 43; }
  [data-ra-word="2"] { --x: 67; }
  [data-ra-word="3"] { --x: 60; --y: 13; }

  .ra-reel__mark {
    position: absolute;
    bottom: calc(48 * var(--u));
    left: calc(64 * var(--u));
    width: calc(74 * var(--u));
    rotate: var(--ra-turn);
    transition: rotate 1s cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .ra-reel__set > * {
    position: absolute;
    top: calc(var(--y) * var(--u));
    left: calc(var(--x) * var(--u));
    width: calc(var(--w) * var(--u));
    max-width: none;
    transform-origin: 0 0;
    rotate: var(--r);
    transition:
      translate 0.9s cubic-bezier(0.2, 0.85, 0.25, 1),
      rotate 0.9s cubic-bezier(0.2, 0.85, 0.25, 1),
      transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
  }

  /* A hovered piece lifts a little and grows about its center (the origin is
     its top-left corner, so the shift keeps the growth even) and tips a touch. */
  .ra-reel__set[data-state="in"] > :hover {
    z-index: 1;
    transform: translate(-2%, calc(-2% - 12 * var(--u))) scale(1.04) rotate(1.5deg);
  }

  :root[data-motion-preference="reduced"] .ra-reel__set[data-state="in"] > :hover {
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ra-reel__set[data-state="in"] > :hover {
      transform: none;
    }
  }

  .ra-reel__set > :nth-child(2) { transition-delay: 0.08s; }
  .ra-reel__set > :nth-child(3) { transition-delay: 0.16s; }

  .ra-reel__set--prints > * {
    box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)) rgb(0 0 0 / 0.11);
  }

  /* App icons as tiles: the Adobe ones are drawn here (two letters on the
     app's dark tile); the Figma mark sits on a white tile. */
  .ra-reel__app {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    aspect-ratio: 1;
    border-radius: calc(44 * var(--u));
    background: var(--bg, #ffffff);
    box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)) rgb(0 0 0 / 0.11);
    color: var(--fg);
    font-family: var(--font-sans, Inter, sans-serif);
    font-size: calc(124 * var(--u));
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  /* The downloaded icons carry their own tile; only the shadow is added. */
  .ra-reel__icon {
    border-radius: calc(44 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)) rgb(0 0 0 / 0.11);
  }

  /* On the black slide the dark tiles get a hairline so their edges hold. */
  .ra-reel__set--apps > * {
    outline: calc(2 * var(--u)) solid rgb(255 255 255 / 0.16);
    outline-offset: calc(-1 * var(--u));
  }

  .ra-reel__app--figma {
    padding: calc(44 * var(--u));
    object-fit: contain;
  }

  .ra-reel__set[data-state="wait"] > * {
    translate: 0 calc(-1500 * var(--u));
    rotate: calc(var(--r) + 16deg);
  }

  .ra-reel__set[data-state="out"] > * {
    translate: 0 calc(1500 * var(--u));
    rotate: calc(var(--r) - 12deg);
    transition-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
    transition-duration: 0.6s;
  }

  .ra-reel__set.is-parking > * {
    transition: none;
  }

  :root[data-motion-preference="reduced"] .ra-reel :is(.ra-reel__set > *, .ra-reel__words span, .ra-reel__mark) {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .ra-reel :is(.ra-reel__set > *, .ra-reel__words span, .ra-reel__mark) {
      transition-duration: 0.01s;
      transition-delay: 0s;
    }
  }

  .ra-reel__tabs,
  .ra-stops {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .ra-reel__tabs button,
  .ra-stops button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: transparent;
    color: var(--color-ink-muted);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .ra-reel__tabs button::before,
  .ra-stops button::before {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--ra-dot, currentColor);
    content: "";
  }

  .ra-reel__tabs button:nth-child(1) { --ra-dot: var(--ra-green); }
  .ra-reel__tabs button:nth-child(2) { --ra-dot: var(--ra-purple); }
  .ra-reel__tabs button:nth-child(3) { --ra-dot: var(--ra-blue); }
  .ra-reel__tabs button:nth-child(4) { --ra-dot: var(--ra-orange); }
  .ra-reel__tabs button:nth-child(5) { --ra-dot: var(--ra-yellow); }
  .ra-reel__tabs button:nth-child(6) { --ra-dot: var(--color-ink); }

  .ra-stops button:nth-child(1),
  .ra-stops button:nth-child(5) { --ra-dot: #f1c962; }
  .ra-stops button:nth-child(2) { --ra-dot: #88c992; }
  .ra-stops button:nth-child(3) { --ra-dot: #85b5ee; }
  .ra-stops button:nth-child(4) { --ra-dot: #e28a64; }

  :is(.ra-reel__tabs, .ra-stops) button:hover,
  :is(.ra-reel__tabs, .ra-stops) button:is([aria-pressed="true"], [aria-current="true"]) {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }

  :is(.ra-reel__tabs, .ra-stops) button:is([aria-pressed="true"], [aria-current="true"]) {
    background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  }

  :is(.ra-reel__tabs, .ra-stops) button:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  /* Blocks, as in Biophilic Continuum. */
  .ra-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-line);
  }

  .ra-block + .ra-block {
    margin-top: var(--space-9);
  }

  /* "Who they were" is short, so The problem follows it more closely. */
  .ra-block[aria-labelledby="ra-wow-who-title"] + .ra-block {
    margin-top: var(--space-7);
  }

  .ra-section > .project-collection__heading + .ra-block {
    margin-top: 0;
  }

  .ra-block > .project-collection__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .ra-block > .project-collection__heading:last-child {
    margin-bottom: 0;
  }

  .ra-block > .project-collection__heading p,
  .ra-prose p,
  .ra-note {
    max-width: min(var(--work-intro-measure), 100%);
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .ra-block > .project-collection__heading p.ra-aside {
    font-size: var(--text-sm);
  }

  .ra-prose {
    display: grid;
    gap: var(--space-3);
  }

  .ra-note {
    margin-top: var(--space-5);
  }

  /* Roles over the 84 months from July 2016 to June 2023: --s and --e are
     months from the start. Solid is the main focus, pale is now and then. */
  .ra-timeline {
    --ra-label: 9.5rem;
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #161815;
  }

  .ra-timeline__years {
    position: relative;
    height: 1.4rem;
    margin-left: var(--ra-label);
    color: #6b6f68;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
  }

  .ra-timeline__years span {
    position: absolute;
    left: calc(var(--s) / 84 * 100%);
    translate: -50% 0;
  }

  .ra-timeline__rows {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ra-timeline__rows li {
    display: grid;
    grid-template-columns: var(--ra-label) minmax(0, 1fr);
    align-items: center;
  }

  .ra-timeline__role {
    font-family: var(--ra-serif);
    font-size: 1.2rem;
    line-height: 1.2;
  }

  /* Hairlines at each January behind the bars. */
  .ra-timeline__track {
    position: relative;
    height: 1.6rem;
    background:
      repeating-linear-gradient(to right, transparent 0 calc(100% / 7 - 1px), rgb(0 0 0 / 0.1) 0 calc(100% / 7))
      calc(100% * 6 / 84 + 1px) 0 / calc(100% * 84 / 84) 100%;
    background-size: calc(100% * 12 / 84 * 7) 100%;
    background-repeat: repeat-x;
  }

  .ra-timeline__bar {
    position: absolute;
    top: 0.2rem;
    bottom: 0.2rem;
    left: calc(var(--s) / 84 * 100%);
    width: calc((var(--e) - var(--s)) / 84 * 100%);
    border-radius: 999px;
    background: var(--ra-dot);
  }

  .ra-timeline__bar + .ra-timeline__bar,
  .ra-timeline__bar:has(+ .ra-timeline__bar) {
    border-radius: 0 999px 999px 0;
  }

  .ra-timeline__bar:has(+ .ra-timeline__bar) {
    border-radius: 999px 0 0 999px;
  }

  .ra-timeline__bar--some {
    opacity: 0.3;
  }

  .ra-timeline__key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: var(--space-4) 0 0 var(--ra-label);
    color: #6b6f68;
    font-size: var(--text-sm);
  }

  .ra-timeline__key span {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
  }

  .ra-timeline__key i {
    width: 1.6em;
    height: 0.6em;
    border-radius: 999px;
    background: #161815;
  }

  .ra-timeline__span {
    margin-left: auto;
  }

  @media (max-width: 40rem) {
    .ra-timeline {
      --ra-label: 0rem;
      padding: var(--space-4);
    }

    .ra-timeline__rows li {
      grid-template-columns: minmax(0, 1fr);
    }

    .ra-timeline__role {
      font-size: 1rem;
    }
  }

  /* Team cards: first name and role. */
  .ra-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ra-team li {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #161815;
  }

  .ra-team__lead {
    margin-bottom: var(--space-5);
  }

  .ra-team__photo {
    width: 4.5rem;
    aspect-ratio: 1;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    object-fit: cover;
  }

  .ra-team strong {
    font-family: var(--ra-serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
  }

  .ra-team li > span:last-child {
    color: #5e625b;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  /* Timeline, team, and branding sit a level down: the smaller heading the
     WOW Rolling blocks use, and no rule above. */
  .work-project-panel--radiant .ra-section--sub {
    margin-top: var(--space-9);
    padding-top: 0;
    border-top: 0;
  }

  .work-project-panel--radiant .ra-section--sub > .project-collection__heading {
    margin-bottom: var(--space-5);
  }

  .work-project-panel--radiant .ra-section--sub > .project-collection__heading h3 {
    font-size: clamp(1.85rem, 3vw, 3rem);
  }

  /* A heading with its dates above it, like the panel title's overline. */
  .ra-dated {
    display: grid;
    gap: 0.35rem;
  }

  .work-project-panel--radiant .ra-dated .work-heading__overline {
    color: color-mix(in srgb, var(--color-ink-muted) 72%, var(--color-white));
    font-size: 0.875rem;
  }

  /* The services follow the reel directly: no heading, no rule above. */
  .work-project-panel--radiant .ra-section--plain {
    margin-top: var(--space-7);
    padding-top: 0;
    border-top: 0;
  }

  /* The five services from the reel, each under its slide's color. */
  .ra-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: var(--space-6) var(--space-5);
    margin: 0;
  }

  .ra-services dt {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--color-ink);
    font-family: var(--ra-serif);
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .ra-services dt::before {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: var(--ra-dot);
  }

  .ra-services dd {
    margin: var(--space-2) 0 0;
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  .ra-note em {
    font-style: normal;
    font-weight: 600;
  }

  /* Branding: white tiles, with the color left to the swatches. */
  .ra-brand {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
  }

  .ra-brand__tile {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-column: span 2;
  }

  .ra-brand__tile--lockup,
  .ra-brand__tile--colors {
    grid-column: span 4;
  }

  .ra-brand__tile > :first-child {
    display: grid;
    place-content: center;
    min-height: 11rem;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #000000;
    font-family: var(--ra-serif);
  }

  .ra-lockup {
    container-type: inline-size;
  }

  .ra-lockup > * {
    grid-area: 1 / 1;
  }

  /* Sized from the exports: the word is 150 units tall beside a 200-unit mark. */
  .ra-brand .ra-lockup {
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0 clamp(0.6rem, 4cqi, 1.6rem);
    font-size: clamp(2.6rem, 17cqi, 6rem);
  }

  .ra-lockup .ra-spiral {
    grid-area: auto;
    width: 1.3em;
    rotate: -55deg;
  }

  .ra-lockup__text {
    display: grid;
    grid-area: auto;
    line-height: 0.9;
    white-space: nowrap;
  }

  .ra-lockup__text b {
    font-weight: 400;
  }

  .ra-lockup__text i {
    font-size: 0.43em;
    font-style: normal;
    line-height: 1.3;
  }

  .ra-brand .ra-lockup--stacked {
    grid-template-columns: auto;
    justify-items: center;
    gap: 0.35em 0;
    font-size: clamp(1.6rem, 20cqi, 3.2rem);
  }

  .ra-lockup--stacked .ra-spiral {
    width: 2em;
    rotate: -149deg;
  }

  .ra-lockup--stacked .ra-lockup__text i {
    font-size: 0.5em;
  }

  .ra-type {
    justify-items: start;
    gap: var(--space-2);
  }

  .ra-type b {
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 0.9;
  }

  .ra-type span {
    font-size: 1.35rem;
    line-height: 1.1;
  }

  .ra-brand__tile > .ra-colors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    place-content: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
    list-style: none;
    font-family: inherit;
  }

  .ra-colors li {
    display: grid;
    align-content: end;
    gap: 0.15rem;
    min-height: 9rem;
    padding: var(--space-3);
    border-radius: 0.5rem;
    background: var(--ra-swatch);
    font-size: var(--text-sm);
    line-height: 1.25;
  }

  .ra-colors b {
    font-family: var(--ra-serif);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.05;
  }

  .ra-colors code {
    font-family: var(--font-mono);
    font-size: 0.68rem;
  }

  /* WOW Rolling. */
  .ra-traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ra-traits li {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-ink);
    font-size: var(--text-sm);
  }

  /* The sitemap as a tree: each list hangs from its parent on a hairline.
     Its type scales with the tile, so the whole tree always fits. */
  .ra-sitemap {
    container-type: inline-size;
  }

  .ra-tree {
    margin: 0;
    padding: 2.2em 1.2em;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
    list-style: none;
    font-size: clamp(0.4rem, 1.72cqi, 0.9rem);
    font-weight: 600;
  }

  .ra-tree ul {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0.6em;
    margin: 0;
    padding: 1.5em 0 0;
    list-style: none;
  }

  .ra-tree li {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
  }

  .ra-tree span {
    padding: 0.6em 0.9em;
    border-radius: 0.7em;
    background: #3d3d3d;
    color: #ffffff;
    white-space: nowrap;
  }

  .ra-tree > li > span {
    padding: 0.6em 2em;
    background: #000000;
    font-size: 1.3em;
  }

  .ra-tree ul ul span { background: #8f8f8f; }
  .ra-tree ul ul ul span { background: #cacaca; }

  /* A drop from the parent, a rail across the siblings, a drop to each child. */
  .ra-tree ul::before,
  .ra-tree ul li::before,
  .ra-tree ul li::after {
    position: absolute;
    background: #000000;
    content: "";
  }

  .ra-tree ul::before {
    top: 0;
    left: calc(50% - 0.75px);
    width: 1.5px;
    height: 0.75em;
  }

  .ra-tree ul li::before {
    top: -0.75em;
    left: calc(50% - 0.75px);
    width: 1.5px;
    height: 0.75em;
  }

  .ra-tree ul li::after {
    top: -0.75em;
    right: -0.3em;
    left: -0.3em;
    height: 1.5px;
  }

  .ra-tree ul li:first-child::after { left: 50%; }
  .ra-tree ul li:last-child::after { right: 50%; }
  .ra-tree ul li:only-child::after { display: none; }

  .ra-sketches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-5) var(--space-3);
  }

  /* Three hand-balanced columns, so the pages of different heights pack
     without holes: outline and home, the three section pages, then ideas
     and feedback. */
  .ra-sketches__col {
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }

  .ra-sketches img {
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px var(--color-line);
  }

  .ra-marks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .ra-marks figure {
    display: grid;
    place-items: center;
    padding: 12% 14%;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    background: #ffffff;
  }

  /* The desktop site, on its 1512x982 frame; --u is one frame pixel. The page
     is one tall track of four sections and a footer that slides behind a nav
     that stays put, as the Figma prototype scrolled. */
  .ra-wow {
    --u: calc(100cqi / 1512);
    --wow-yellow: #f1c962;
    --wow-green: #88c992;
    --wow-blue: #85b5ee;
    --wow-orange: #e28a64;
    --wow-lato: Lato, "Helvetica Neue", Arial, sans-serif;
    --wow-display: Overlock, "Trebuchet MS", sans-serif;
    --wow-ease: cubic-bezier(0.45, 0.05, 0.2, 1);
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    aspect-ratio: 1512 / 982;
    border-radius: 0.75rem;
    background: var(--wow-yellow);
    color: #000000;
    font-family: var(--wow-lato);
    line-height: 1.2;
  }

  /* Sized here, not on the frame: the frame's own cqi would read its parent. */
  .ra-wow__track,
  .ra-wow__nav {
    font-size: calc(25 * var(--u));
  }

  :where(.ra-wow) :where(h5, p, dl, dd, ul) {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
  }

  :where(.ra-wow) button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .ra-wow button:focus-visible {
    outline: calc(4 * var(--u)) solid #000000;
    outline-offset: calc(4 * var(--u));
  }

  .ra-wow__track {
    position: absolute;
    inset: 0 0 auto;
    transition: translate 0.85s var(--wow-ease);
  }

  .ra-wow[data-stop="events"] .ra-wow__track { translate: 0 calc(-982 * var(--u)); }
  .ra-wow[data-stop="products"] .ra-wow__track { translate: 0 calc(-1964 * var(--u)); }
  .ra-wow[data-stop="about"] .ra-wow__track { translate: 0 calc(-2946 * var(--u)); }
  .ra-wow[data-stop="footer"] .ra-wow__track { translate: 0 calc(-3200 * var(--u)); }

  .ra-wow__sec {
    position: relative;
    height: calc(982 * var(--u));
    overflow: hidden;
    background: var(--wow-sec);
  }

  .ra-wow__sec--home { --wow-sec: var(--wow-yellow); }
  .ra-wow__sec--events { --wow-sec: var(--wow-green); }
  .ra-wow__sec--products { --wow-sec: var(--wow-blue); }
  .ra-wow__sec--about { --wow-sec: var(--wow-orange); }

  .ra-wow__sec > *,
  .ra-wow__card > * {
    position: absolute;
  }

  /* The nav: four tabs in one outlined pill with a hard shadow. The tab for
     the section on screen goes clear and takes that section's color. */
  .ra-wow__nav {
    position: absolute;
    top: calc(49 * var(--u));
    left: calc(47 * var(--u));
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    width: calc(154 * var(--u));
    height: calc(522 * var(--u));
    overflow: hidden;
    border: calc(3 * var(--u)) solid #000000;
    border-radius: calc(33 * var(--u));
    box-shadow: calc(-9 * var(--u)) calc(8 * var(--u)) 0 #000000;
  }

  .ra-wow .ra-wow__nav button {
    background: var(--wow-tab);
    font-size: calc(32 * var(--u));
    font-weight: 700;
    transition: background-color 0.5s ease;
  }

  .ra-wow .ra-wow__nav button + button {
    border-top: calc(3 * var(--u)) solid #000000;
  }

  .ra-wow .ra-wow__nav button[aria-current] {
    background: transparent;
  }

  .ra-wow__nav button:nth-child(1) { --wow-tab: var(--wow-yellow); }
  .ra-wow__nav button:nth-child(2) { --wow-tab: var(--wow-green); }
  .ra-wow__nav button:nth-child(3) { --wow-tab: var(--wow-blue); }
  .ra-wow__nav button:nth-child(4) { --wow-tab: var(--wow-orange); }

  .ra-wow .ra-wow__nav button:focus-visible {
    outline-offset: calc(-10 * var(--u));
  }

  /* Home. */
  .ra-wow__wordmark {
    top: calc(392.5 * var(--u));
    left: calc(703.3 * var(--u));
    width: calc(774.5 * var(--u));
    max-width: none;
    transform-origin: 0 0;
    rotate: 5.54deg;
  }

  /* The wordmark is cut into its ten letters (brand/letters/, placed by
     percent of the 1200x789 original) so each can hop when it is hovered. */
  .ra-wow__wordmark {
    position: absolute;
    display: block;
    aspect-ratio: 1200 / 789;
  }

  .ra-wow__wordmark img {
    position: absolute;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
    width: calc(var(--w) * 1%);
    max-width: none;
  }

  .ra-wow__wordmark:hover img {
    animation: ra-wow-hop 0.7s cubic-bezier(0.3, 0.7, 0.3, 1) calc(var(--i) * 45ms);
  }

  /* The two o's (second and fifth letters) roll a full turn instead. */
  .ra-wow__wordmark:hover img:is(:nth-child(2), :nth-child(5)) {
    animation-name: ra-wow-roll;
    animation-duration: 0.9s;
  }

  @keyframes ra-wow-roll {
    0% { translate: 0 0; rotate: 0deg; }
    40% { translate: 0 -5%; }
    100% { translate: 0 0; rotate: 360deg; }
  }

  @keyframes ra-wow-hop {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    35% { translate: 0 -5%; rotate: -4deg; }
    65% { translate: 0 1.5%; rotate: 2deg; }
  }

  :root[data-motion-preference="reduced"] .ra-wow__wordmark:hover img {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ra-wow__wordmark:hover img {
      animation: none;
    }
  }

  /* Shared pieces: outlined cards with a hard shadow, round arrow buttons, the
     two layout icons, and the huge italic section title. */
  .ra-wow__card,
  .ra-wow__photo {
    overflow: hidden;
    border: calc(2 * var(--u)) solid #000000;
    border-radius: calc(31 * var(--u));
    box-shadow: calc(-8 * var(--u)) calc(8 * var(--u)) 0 #000000;
    background: var(--wow-sec);
  }

  .ra-wow h5 {
    font-family: var(--wow-display);
    font-size: calc(40 * var(--u));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .ra-wow__title {
    right: calc(39 * var(--u));
    bottom: calc(21.5 * var(--u));
    font-family: var(--wow-display);
    font-size: calc(204.5 * var(--u));
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }

  .ra-wow__arrow {
    width: calc(193 * var(--u));
    height: calc(193 * var(--u));
    border-radius: 50%;
    transition: top 0.6s var(--wow-ease), left 0.6s var(--wow-ease), rotate 0.6s var(--wow-ease), scale 0.15s ease, opacity 0.3s ease;
  }

  .ra-wow .ra-wow__arrow {
    border: calc(2 * var(--u)) solid #000000;
    box-shadow: calc(-4 * var(--u)) calc(5 * var(--u)) 0 #000000;
    background: var(--wow-sec);
  }

  .ra-wow__arrow svg {
    display: block;
    width: 100%;
    fill: none;
    stroke: #000000;
    stroke-width: var(--wow-stroke, 6);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ra-wow__arrow--prev svg {
    scale: -1 1;
  }

  /* On hover the arrow leans the way it points (the previous arrow's svg is
     mirrored, so one rule covers both) and the button lifts off its shadow. */
  .ra-wow__arrow path {
    transition: translate 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
  }

  .ra-wow__arrow:hover path {
    translate: 12px 0;
  }

  .ra-wow__arrow:hover {
    scale: 1.04;
  }

  .ra-wow__arrow:hover:active {
    scale: 0.94;
  }

  .ra-wow__arrow:active {
    scale: 0.94;
  }

  .ra-wow__views {
    display: flex;
    align-items: center;
    gap: calc(40 * var(--u));
  }

  .ra-wow__views button {
    display: grid;
    opacity: 0.2;
    transition: opacity 0.3s ease;
  }

  .ra-wow__views button[aria-pressed="true"] {
    opacity: 1;
  }

  .ra-wow__views svg {
    display: block;
    height: calc(45 * var(--u));
    fill: #000000;
  }

  .ra-wow__views button:first-child svg {
    fill: none;
    stroke: #000000;
    stroke-width: 6;
  }

  /* Cards and photos slide sideways inside their frames. */
  .ra-wow [data-ra-slide-item] {
    transition: translate 0.6s var(--wow-ease), opacity 0.3s ease;
  }

  .ra-wow [data-ra-slide-item][data-state="left"] { translate: -105% 0; }
  .ra-wow [data-ra-slide-item][data-state="right"] { translate: 105% 0; }

  .ra-wow [data-ra-slide-item].is-parking {
    transition: none;
  }

  /* Events. */
  .ra-wow__card--events {
    top: calc(117 * var(--u));
    left: calc(262 * var(--u));
    width: calc(1099 * var(--u));
    height: calc(602 * var(--u));
  }

  .ra-wow__event {
    inset: 0;
  }

  .ra-wow__event > * {
    position: absolute;
    left: calc(53 * var(--u));
  }

  .ra-wow__event h5 { top: calc(55 * var(--u)); }

  .ra-wow__desc {
    top: calc(125.5 * var(--u));
    line-height: calc(30 * var(--u));
    white-space: nowrap;
  }

  .ra-wow__when {
    top: calc(232 * var(--u));
    font-size: calc(22 * var(--u));
    font-style: italic;
    font-weight: 300;
  }

  .ra-wow .ra-wow__register {
    top: calc(293 * var(--u));
    left: calc(50 * var(--u));
    min-width: calc(131 * var(--u));
    height: calc(53 * var(--u));
    padding: 0 calc(18 * var(--u));
    border: calc(2.7 * var(--u)) solid #000000;
    border-radius: calc(12 * var(--u));
    background: var(--wow-sec);
    font-size: calc(24 * var(--u));
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .ra-wow .ra-wow__register[aria-pressed="true"] {
    background: #000000;
    color: var(--wow-sec);
  }

  /* The second class sits a little higher on its card, as drawn. */
  .ra-wow__event + .ra-wow__event h5 { top: calc(44 * var(--u)); }
  .ra-wow__event + .ra-wow__event .ra-wow__desc { top: calc(104.5 * var(--u)); }
  .ra-wow__event + .ra-wow__event .ra-wow__when { top: calc(213 * var(--u)); }
  .ra-wow .ra-wow__event + .ra-wow__event .ra-wow__register { top: calc(274 * var(--u)); }

  .ra-wow__art {
    top: calc(-1 * var(--u));
    left: calc(-1 * var(--u));
    width: calc(1097 * var(--u));
    fill: none;
    stroke: #000000;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  .ra-wow__fill {
    stroke-width: 3.3;
    pointer-events: auto;
    transition: fill 0.25s ease;
  }

  .ra-wow__fill--dance { stroke-width: 2.7; }
  .ra-wow__fill--skate:hover { fill: var(--wow-yellow); }
  .ra-wow__fill--dance:hover { fill: var(--wow-orange); }

  .ra-wow__where {
    top: calc(496 * var(--u));
    left: calc(51 * var(--u));
    font-weight: 300;
    line-height: calc(30 * var(--u));
    transition: opacity 0.3s ease;
  }

  .ra-wow__sec--events > .ra-wow__arrow--next { top: calc(207 * var(--u)); left: calc(1265 * var(--u)); }
  .ra-wow__sec--events > .ra-wow__arrow--prev { top: calc(445 * var(--u)); left: calc(1265 * var(--u)); }

  .ra-wow__views--events {
    top: calc(799 * var(--u));
    left: calc(316 * var(--u));
  }

  .ra-wow__views--events button:last-child svg {
    height: calc(38 * var(--u));
    margin-top: calc(3 * var(--u));
  }

  /* The list view: the two arrows ride up to the card's top edge and point
     up and down, as in the prototype, where they had nothing to scroll. */
  .ra-wow__list {
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
  }

  .ra-wow__list > h5 {
    position: absolute;
    top: calc(72 * var(--u));
    left: calc(53 * var(--u));
    opacity: 0.5;
  }

  .ra-wow__list dl {
    position: absolute;
    top: calc(184 * var(--u));
    left: calc(105 * var(--u));
    display: grid;
    gap: calc(38.5 * var(--u));
  }

  .ra-wow__list dl > div {
    display: grid;
    grid-template-columns: calc(365 * var(--u)) auto;
  }

  .ra-wow__list dt {
    display: grid;
    gap: calc(14.5 * var(--u));
    font-family: var(--wow-display);
    font-size: calc(40 * var(--u));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .ra-wow__list dt i {
    font-family: var(--wow-lato);
    font-size: calc(23.5 * var(--u));
    font-weight: 300;
    line-height: 1.2;
  }

  .ra-wow__list dd {
    display: grid;
    align-content: start;
    gap: calc(11 * var(--u));
    padding-top: calc(5 * var(--u));
    font-size: calc(26 * var(--u));
    font-weight: 700;
    white-space: nowrap;
  }

  .ra-wow__list dd span {
    font-size: calc(25 * var(--u));
    font-weight: 300;
  }

  .ra-wow__sec--events[data-view="list"] .ra-wow__list {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.15s, visibility 0s;
  }

  .ra-wow__sec--events[data-view="list"] :is(.ra-wow__event, .ra-wow__where) {
    opacity: 0;
    visibility: hidden;
  }

  .ra-wow__sec--events[data-view="list"] > .ra-wow__arrow {
    top: calc(53 * var(--u));
    rotate: 90deg;
    pointer-events: none;
  }

  .ra-wow__sec--events[data-view="list"] > .ra-wow__arrow--next { left: calc(1150 * var(--u)); }
  .ra-wow__sec--events[data-view="list"] > .ra-wow__arrow--prev { left: calc(923 * var(--u)); }

  /* Products. */
  .ra-wow__tabs {
    top: calc(108 * var(--u));
    left: calc(277 * var(--u));
    display: flex;
    gap: calc(23 * var(--u));
    font-family: var(--wow-display);
    font-size: calc(29 * var(--u));
    font-weight: 700;
  }

  .ra-wow__tabs button {
    transition: opacity 0.2s ease;
  }

  .ra-wow__tabs button[aria-pressed="false"] {
    opacity: 0.4;
  }

  .ra-wow__tabs button[aria-pressed="false"]:hover {
    opacity: 0.75;
  }

  .ra-wow__cart {
    top: calc(100 * var(--u));
    left: calc(1400 * var(--u));
    width: calc(52 * var(--u));
  }

  /* The cart opens a small bag under the icon: what was added, a way to
     take each thing back out, the total, and checkout. */
  .ra-wow__bag {
    top: calc(165 * var(--u));
    right: calc(60 * var(--u));
    z-index: 3;
    display: grid;
    gap: calc(18 * var(--u));
    width: calc(440 * var(--u));
    padding: calc(30 * var(--u));
    border: calc(2 * var(--u)) solid #000000;
    border-radius: calc(31 * var(--u));
    box-shadow: calc(-8 * var(--u)) calc(8 * var(--u)) 0 #000000;
    background: #ffffff;
    font-size: calc(22 * var(--u));
  }

  .ra-wow__bag[hidden],
  .ra-wow__bag [hidden] {
    display: none;
  }

  .ra-wow__bag ul {
    display: grid;
    gap: calc(12 * var(--u));
    list-style: none;
  }

  .ra-wow__bag li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: calc(14 * var(--u));
  }

  .ra-wow__bag li b,
  .ra-wow__bag-total b {
    font-weight: 900;
  }

  .ra-wow .ra-wow__bag li button {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    border: calc(2 * var(--u)) solid #000000;
    border-radius: 50%;
    line-height: 1;
  }

  .ra-wow .ra-wow__bag li button:hover {
    background: #000000;
    color: #ffffff;
  }

  .ra-wow__bag-empty {
    opacity: 0.6;
  }

  .ra-wow__bag-total {
    display: flex;
    justify-content: space-between;
    padding-top: calc(16 * var(--u));
    border-top: calc(2 * var(--u)) solid #000000;
  }

  .ra-wow .ra-wow__checkout {
    height: calc(56 * var(--u));
    border: calc(2.7 * var(--u)) solid #000000;
    border-radius: calc(12 * var(--u));
    background: var(--wow-blue);
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .ra-wow .ra-wow__checkout:hover {
    background: #000000;
    color: var(--wow-blue);
  }

  /* Accessories and Materials replace the skate card and its controls. */
  .ra-wow__sec--products:not([data-cat="skates"]) > :is(.ra-wow__card, .ra-wow__photo, .ra-wow__arrow, .ra-wow__views, .ra-wow__grid:not(.ra-wow__shelf)) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .ra-wow .ra-wow__sec--products .ra-wow__shelf.ra-wow__shelf {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
  }

  .ra-wow .ra-wow__sec--products[data-cat="accessories"] .ra-wow__shelf[data-ra-shelf="accessories"],
  .ra-wow .ra-wow__sec--products[data-cat="materials"] .ra-wow__shelf[data-ra-shelf="materials"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.15s, visibility 0s;
  }

  .ra-wow .ra-wow__tile--plain {
    display: grid;
    place-items: center;
    background: var(--wow-tile);
    font-family: var(--wow-display);
    font-size: calc(76 * var(--u));
    font-style: italic;
    font-weight: 700;
  }

  .ra-wow .ra-wow__shelf h5 {
    font-size: calc(32 * var(--u));
  }

  .ra-wow__none {
    top: calc(240 * var(--u));
    left: calc(280 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: 1.5;
  }

  .ra-wow__none button,
  .ra-wow__foot button:hover,
  .ra-wow .ra-wow__where:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .ra-wow .ra-wow__where {
    text-align: left;
  }

  /* The toast: top middle of the frame, for links that would leave the site. */
  .ra-wow__toast {
    position: absolute;
    top: calc(30 * var(--u));
    left: 50%;
    z-index: 5;
    padding: calc(14 * var(--u)) calc(26 * var(--u));
    border: calc(2 * var(--u)) solid #000000;
    border-radius: 999px;
    box-shadow: calc(-5 * var(--u)) calc(5 * var(--u)) 0 #000000;
    background: #ffffff;
    font-family: var(--wow-lato);
    font-size: calc(22 * var(--u));
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    translate: -50% calc(-90 * var(--u));
    transition: opacity 0.25s ease, translate 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
    pointer-events: none;
  }

  .ra-wow__toast.is-on {
    opacity: 1;
    translate: -50% 0;
  }

  .ra-wow__cart svg {
    display: block;
    width: 100%;
    fill: #000000;
  }

  .ra-wow__cart i {
    position: absolute;
    top: calc(1 * var(--u));
    right: calc(-3 * var(--u));
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    border-radius: 50%;
    background: var(--wow-yellow);
    scale: 0;
    transition: scale 0.35s cubic-bezier(0.3, 1.8, 0.5, 1);
  }

  .ra-wow__cart.has-items i {
    scale: 1;
  }

  .ra-wow__card--product {
    top: calc(207 * var(--u));
    left: calc(274 * var(--u));
    width: calc(501 * var(--u));
    height: calc(480 * var(--u));
  }

  .ra-wow__product {
    inset: 0;
  }

  .ra-wow__product h5 {
    position: absolute;
    top: calc(33 * var(--u));
    left: calc(31 * var(--u));
  }

  .ra-wow__product dl {
    position: absolute;
    top: calc(113 * var(--u));
    left: calc(37 * var(--u));
    white-space: nowrap;
  }

  .ra-wow__product dt {
    font-size: calc(24 * var(--u));
    line-height: calc(31 * var(--u));
    opacity: 0.5;
  }

  .ra-wow__product dd {
    font-weight: 700;
    line-height: calc(38 * var(--u));
  }

  .ra-wow__product dd + dt {
    margin-top: calc(18 * var(--u));
  }

  .ra-wow__product .ra-wow__blurb {
    height: calc(118 * var(--u));
    padding-top: calc(6 * var(--u));
    font-size: calc(21 * var(--u));
    line-height: calc(25 * var(--u));
  }

  .ra-wow__product .ra-wow__price {
    font-size: calc(30 * var(--u));
    font-weight: 900;
  }

  .ra-wow .ra-wow__add {
    position: absolute;
    top: calc(388 * var(--u));
    left: calc(407 * var(--u));
    width: calc(73 * var(--u));
    height: calc(73 * var(--u));
    border: calc(2 * var(--u)) solid #000000;
    border-radius: 50%;
    transition: background-color 0.2s ease, scale 0.15s ease;
  }

  .ra-wow :is(.ra-wow__add, .ra-wow__tile) svg {
    display: block;
    width: 100%;
    fill: none;
    stroke: #000000;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.2s ease, rotate 0.3s ease;
  }

  .ra-wow .ra-wow__add[aria-pressed="true"] {
    background: #000000;
  }

  .ra-wow .ra-wow__add[aria-pressed="true"] svg {
    stroke: var(--wow-blue);
  }

  .ra-wow__add:active {
    scale: 0.92;
  }

  .ra-wow__photo {
    top: calc(210.6 * var(--u));
    left: calc(809 * var(--u));
    width: calc(554 * var(--u));
    height: calc(479.4 * var(--u));
    border-radius: calc(32 * var(--u));
  }

  .ra-wow__photo span {
    position: absolute;
    inset: 0;
  }

  .ra-wow__photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Hovering a skate plays its second shot over the first. */
  .ra-wow__photo .ra-wow__alt {
    position: absolute;
    top: calc(72 * var(--u));
    left: calc(99 * var(--u));
    width: calc(346 * var(--u));
    height: calc(325 * var(--u));
    border-radius: calc(30 * var(--u));
    opacity: 0;
    scale: 0.94;
    transition: opacity 0.25s ease, scale 0.25s ease;
  }

  .ra-wow__photo video.ra-wow__alt {
    object-fit: cover;
  }

  .ra-wow__photo:hover .ra-wow__alt {
    opacity: 1;
    scale: 1;
  }

  .ra-wow__sec--products > .ra-wow__arrow {
    --wow-stroke: 4.4;
    width: calc(139 * var(--u));
    height: calc(139 * var(--u));
    left: calc(1288.5 * var(--u));
  }

  .ra-wow__sec--products > .ra-wow__arrow--next { top: calc(299.5 * var(--u)); }
  .ra-wow__sec--products > .ra-wow__arrow--prev { top: calc(476.5 * var(--u)); }

  .ra-wow__views--products {
    top: calc(760 * var(--u));
    left: calc(314 * var(--u));
    gap: calc(48 * var(--u));
  }

  .ra-wow__views--products button:last-child svg {
    height: calc(53 * var(--u));
    margin-top: calc(-12 * var(--u));
  }

  .ra-wow__sec--products > .ra-wow__title,
  .ra-wow__sec--about > .ra-wow__title {
    right: calc(50 * var(--u));
    bottom: calc(38 * var(--u));
  }

  /* The grid view: three skates, each a button that adds it to the cart. */
  .ra-wow__grid {
    top: calc(205 * var(--u));
    left: calc(276.5 * var(--u));
    display: grid;
    grid-template-columns: repeat(3, calc(345 * var(--u)));
    gap: calc(64 * var(--u));
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
  }

  .ra-wow .ra-wow__tile {
    position: relative;
    display: block;
    width: 100%;
    height: calc(298 * var(--u));
    overflow: hidden;
    border: calc(2 * var(--u)) solid #000000;
    border-radius: calc(31 * var(--u));
    box-shadow: calc(-8 * var(--u)) calc(8 * var(--u)) 0 #000000;
  }

  .ra-wow__tile img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .ra-wow .ra-wow__tile svg {
    position: absolute;
    inset: 0;
    height: 100%;
    background: rgb(133 181 238 / 0.7);
    opacity: 0;
    stroke-width: 1.6;
    transition: opacity 0.25s ease, background-color 0.25s ease;
  }

  .ra-wow__tile:is(:hover, :focus-visible) svg {
    opacity: 1;
  }

  .ra-wow .ra-wow__tile[aria-pressed="true"] svg {
    background: rgb(0 0 0 / 0.72);
    opacity: 1;
    stroke: var(--wow-blue);
    rotate: 0deg;
  }

  .ra-wow__grid h5 {
    margin-top: calc(24 * var(--u));
    padding-left: calc(4 * var(--u));
  }

  .ra-wow__grid dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(5 * var(--u)) calc(13 * var(--u));
    margin-top: calc(18 * var(--u));
    padding-left: calc(10 * var(--u));
    font-size: calc(26 * var(--u));
  }

  .ra-wow__grid dt { opacity: 0.5; }
  .ra-wow__grid dd { font-weight: 900; }

  .ra-wow__sec--products[data-view="grid"] .ra-wow__grid {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.15s, visibility 0s;
  }

  .ra-wow__sec--products :is(.ra-wow__card, .ra-wow__photo) {
    transition: opacity 0.3s ease, visibility 0s;
  }

  .ra-wow__sec--products[data-view="grid"] :is(.ra-wow__card, .ra-wow__photo) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
  }

  .ra-wow__sec--products[data-view="grid"] > .ra-wow__arrow {
    --wow-stroke: 4.4;
    top: calc(673.5 * var(--u));
    width: calc(93 * var(--u));
    height: calc(93 * var(--u));
    pointer-events: none;
    transition: top 0.6s var(--wow-ease), left 0.6s var(--wow-ease), width 0.6s var(--wow-ease), height 0.6s var(--wow-ease);
  }

  .ra-wow__sec--products > .ra-wow__arrow {
    transition: top 0.6s var(--wow-ease), left 0.6s var(--wow-ease), width 0.6s var(--wow-ease), height 0.6s var(--wow-ease), scale 0.15s ease;
  }

  .ra-wow__sec--products[data-view="grid"] > .ra-wow__arrow--next { left: calc(1353.5 * var(--u)); }
  .ra-wow__sec--products[data-view="grid"] > .ra-wow__arrow--prev { left: calc(1242 * var(--u)); }

  /* About. */
  .ra-wow__sec--about > h5 {
    top: calc(130 * var(--u));
    left: calc(281 * var(--u));
    font-size: calc(35.4 * var(--u));
    line-height: calc(41 * var(--u));
  }

  .ra-wow__story {
    top: calc(243 * var(--u));
    left: calc(285 * var(--u));
    font-size: calc(26.6 * var(--u));
    line-height: calc(31 * var(--u));
    white-space: nowrap;
  }

  .ra-wow__story--2 {
    top: calc(455 * var(--u));
    left: calc(281 * var(--u));
  }

  .ra-wow :is(.ra-wow__rink, .ra-wow__owner) {
    max-width: none;
    border: calc(2 * var(--u)) solid #000000;
    box-shadow: calc(-8 * var(--u)) calc(8 * var(--u)) 0 #000000;
    object-fit: cover;
  }

  .ra-wow .ra-wow__rink {
    top: calc(621 * var(--u));
    left: calc(292 * var(--u));
    width: calc(578 * var(--u));
    height: calc(269 * var(--u));
    border-radius: calc(40 * var(--u));
  }

  /* The owner's portrait is black and white until you hover it. */
  .ra-wow .ra-wow__owner {
    top: calc(243 * var(--u));
    left: calc(790 * var(--u));
    width: calc(541 * var(--u));
    height: calc(459 * var(--u));
    border-radius: calc(34 * var(--u));
    object-position: 50% 19.7%;
    filter: grayscale(1);
    transition: filter 0.4s ease;
  }

  .ra-wow .ra-wow__owner:hover {
    filter: none;
  }

  /* Footer. */
  .ra-wow__foot {
    position: relative;
    height: calc(254 * var(--u));
    background: var(--wow-yellow);
    font-size: calc(22 * var(--u));
  }

  .ra-wow__foot ul {
    position: absolute;
    top: calc(70 * var(--u));
    left: calc(58 * var(--u));
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: calc(202 * var(--u)) calc(180 * var(--u)) auto;
    gap: calc(25 * var(--u)) 0;
    list-style: none;
  }

  .ra-wow__foot b {
    font-weight: 900;
  }

  .ra-wow__foot p {
    position: absolute;
    right: calc(77 * var(--u));
    bottom: calc(48 * var(--u));
    display: grid;
    justify-items: end;
    gap: calc(18 * var(--u));
  }

  .ra-wow__foot p i {
    opacity: 0.5;
  }

  :root[data-motion-preference="reduced"] .ra-wow :is(.ra-wow__track, [data-ra-slide-item], .ra-wow__arrow) {
    transition-duration: 0.01s;
  }

  @media (prefers-reduced-motion: reduce) {
    .ra-wow :is(.ra-wow__track, [data-ra-slide-item], .ra-wow__arrow) {
      transition-duration: 0.01s;
    }
  }

  @media (max-width: 52rem) {
    .ra-brand__tile,
    .ra-brand__tile--lockup,
    .ra-brand__tile--colors {
      grid-column: 1 / -1;
    }

    .ra-brand__tile--url,
    .ra-brand__tile--type {
      grid-column: span 3;
    }

    .ra-sketches {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ra-sketches__col {
      display: contents;
    }
  }

  @media (max-width: 40rem) {
    .ra-brand__tile--url,
    .ra-brand__tile--type {
      grid-column: 1 / -1;
    }

    .ra-brand__tile > .ra-colors {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ra-colors li {
      min-height: 6rem;
    }

    .ra-marks {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* The Radiant nav link spins its spiral out of the end of the name on hover. */
  .site-nav__project[data-work-project-link="radiant"] {
    position: relative;
  }

  .site-nav__project[data-work-project-link="radiant"]:is(:hover, :focus-visible, :active) {
    color: var(--color-ink);
  }

  .ra-nav-spiral {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0.95em;
    opacity: 0;
    translate: -0.7em -50%;
    rotate: -415deg;
    scale: 0.2;
    transition:
      opacity 0.2s ease,
      translate 0.7s cubic-bezier(0.3, 0.7, 0.2, 1),
      rotate 0.7s cubic-bezier(0.3, 0.7, 0.2, 1),
      scale 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
    pointer-events: none;
  }

  .site-nav__project[data-work-project-link="radiant"]:is(:hover, :focus-visible, :active) .ra-nav-spiral {
    opacity: 1;
    translate: 0.3em -50%;
    rotate: -55deg;
    scale: 1;
  }

  :root[data-motion-preference="reduced"] .ra-nav-spiral {
    translate: 0.3em -50%;
    rotate: -55deg;
    scale: 1;
    transition: opacity 0.15s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .ra-nav-spiral {
      translate: 0.3em -50%;
      rotate: -55deg;
      scale: 1;
      transition: opacity 0.15s ease;
    }
  }
}

@layer utilities {
  /* The small-screen menu has no hover effects: every project stays plain text. */
  @media (max-width: 64rem) {
    .site-nav .site-nav__project,
    .site-nav .site-nav__project:is(:hover, :focus-visible, :active) {
      background-image: none !important;
      color: var(--color-ink) !important;
      font-family: inherit !important;
      font-stretch: normal !important;
      font-weight: 600 !important;
      line-height: 1.25 !important;
      transform: none !important;
      animation: none !important;
    }

    .site-nav .site-nav__project::before,
    .site-nav .site-nav__project::after,
    .site-nav .wk-nav-wack::before,
    .site-nav :is(.ra-nav-spiral, .ss-nav-pill, .al-nav-badge, .ha-nav-letter i) {
      display: none !important;
    }

    .site-nav .wk-nav-wack {
      color: inherit !important;
    }

    .site-nav .ha-nav-letter b {
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }
  }
}

@layer utilities {
  /* Lock screen: a blurred scrim over the whole site, so the hero's stars still read as moving shapes behind it. */
  :root:not(.is-unlocked) {
    overflow: hidden;
  }

  .site-lock {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--page-gutter);
    background: transparent;
    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);
    transition: opacity 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
  }

  .site-lock.is-leaving {
    opacity: 0;
    pointer-events: none;
  }

  .site-lock__form {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    width: min(100%, 26rem);
    text-align: center;
  }

  .site-lock__title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
  }

  .site-lock__input {
    box-sizing: border-box;
    width: 11rem;
    padding: 0.6rem 0 0.6rem 0.5em;
    border: 1.5px solid var(--color-ink);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.7);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: 0.5em;
    text-align: center;
  }

  .site-lock__input::placeholder {
    color: var(--color-ink);
    opacity: 0.3;
  }

  .site-lock__input:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 0.25rem;
  }

  .site-lock__error {
    min-height: 1.4em;
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .site-lock.is-wrong .site-lock__input {
    animation: site-lock-shake 0.35s ease-in-out;
  }

  @keyframes site-lock-shake {
    20%, 60% { transform: translateX(-0.4rem); }
    40%, 80% { transform: translateX(0.4rem); }
  }

  :root[data-theme="dark"] .site-lock__input {
    background: rgb(14 14 13 / 0.6);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-lock.is-wrong .site-lock__input {
      animation: none;
    }
  }
}