@layer reset, base, deck, slides, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, p, ol, ul, pre, blockquote, figure { margin: 0; }
  ol, ul { padding: 0; }
  button { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --paper: #eeece4;
    --paper-light: #f8f7f2;
    --ink: #171714;
    --muted: #6e6c65;
    --line: #cbc8be;
    --soft-line: #ddd9cf;
    --accent: #e6532f;
    --accent-soft: #f3c4b5;
    --mint: #c9dfd4;
    --sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
    --mono: "SFMono-Regular", "SF Mono", "Cascadia Code", Consolas, monospace;
    color-scheme: light;
  }

  html { background: var(--paper); }

  body.talk-page {
    min-width: 320px;
    min-height: 100vh;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  button, a { color: inherit; }
  button { border: 0; }
  ::selection { background: var(--ink); color: var(--paper-light); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
}

@layer deck {
  .talk-deck {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100svh;
    overflow: hidden;
    background: var(--paper);
  }

  .talk-skip {
    position: absolute;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    translate: 0 -160%;
    background: var(--ink);
    color: var(--paper-light);
    font-size: 14px;
    text-decoration: none;
  }

  .talk-skip:focus { translate: 0; }

  .talk-progress {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--soft-line);
  }

  .talk-progress span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 260ms ease;
  }

  /* Slide counter floats top-right over the stage; there is no header bar. */
  .talk-count { position: absolute; z-index: 30; top: 16px; right: 28px; display: flex; align-items: baseline; gap: 4px; font-family: var(--mono); }
  .talk-count strong { font-size: 18px; font-weight: 600; }
  .talk-count span { color: var(--muted); font-size: 12px; }

  .talk-stage { position: relative; min-height: 0; overflow: hidden; }

  .talk-slide {
    --slide-padding-inline: clamp(34px, 6vw, 104px);
    display: grid;
    width: 100%;
    height: 100%;
    padding: clamp(28px, 4.2vw, 72px) var(--slide-padding-inline);
    animation: slide-enter 280ms ease both;
  }

  @keyframes slide-enter {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: 0; }
  }

  .slide-grid {
    display: grid;
    width: min(100%, 1360px);
    height: 100%;
    margin: 0 auto;
    align-items: center;
    gap: clamp(32px, 5vw, 96px);
  }

  .slide-copy { position: relative; z-index: 2; }

  .slide-copy h1 {
    max-width: 1000px;
    font-size: clamp(42px, 6.5vw, 104px);
    font-weight: 570;
    letter-spacing: -.065em;
    line-height: .96;
    text-wrap: balance;
  }

  .talk-slide h1:focus { outline: none; }

  .slide-copy h1 em {
    color: var(--accent);
    font-family: var(--serif);
    font-weight: 400;
  }

  .slide-dek {
    max-width: 720px;
    margin-top: clamp(20px, 3.5vh, 42px);
    color: var(--muted);
    font-size: clamp(17px, 1.65vw, 26px);
    line-height: 1.42;
    text-wrap: balance;
  }

  .talk-overview__heading button,
  .talk-notes button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    transition: background 140ms ease, color 140ms ease;
  }

  .talk-overview__heading button:hover,
  .talk-notes button:hover { background: var(--ink); color: var(--paper-light); }

  .talk-notes {
    position: absolute;
    z-index: 60;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(680px, calc(100vw - 48px));
    max-height: calc(100vh - 110px);
    border: 1px solid var(--ink);
    background: var(--paper-light);
    box-shadow: 0 22px 60px rgba(42, 38, 34, .16);
  }

  .talk-notes header { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line); }
  .talk-notes header span { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .talk-notes h2 { padding: 20px 26px 10px; font-size: 24px; letter-spacing: -.03em; }
  .talk-notes__script { min-height: 0; overflow-y: auto; padding: 0 26px 28px; }
  .talk-notes__script p { color: #36352f; font-family: var(--serif); font-size: 19px; line-height: 1.52; }
  .talk-notes__script p + p { margin-top: .9em; }
  .talk-notes__editor { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .talk-notes__editor textarea { display: block; min-height: 320px; height: 46vh; resize: none; margin: 0 26px 0; padding: 4px 0 20px; border: 0; background: transparent; color: #36352f; font-family: var(--serif); font-size: 19px; line-height: 1.52; outline: none; }
  .talk-notes__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 10px 10px 20px; border-top: 1px solid var(--line); }
  .talk-notes__actions small { flex: 1; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
  .talk-notes button.is-primary { border-color: var(--ink); background: var(--ink); color: var(--paper-light); }
  .talk-notes button.is-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
  .talk-notes button:disabled { opacity: .4; cursor: progress; }

  .talk-overview {
    height: 100%;
    overflow: auto;
    padding: clamp(28px, 4vw, 64px);
    background: var(--paper);
  }

  .talk-overview__heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; max-width: 1380px; margin: 0 auto 34px; }
  .talk-overview__heading span { color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
  .talk-overview__heading h1 { margin-top: 4px; font-size: clamp(34px, 4vw, 60px); letter-spacing: -.05em; }
  .talk-overview ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1380px; margin: 0 auto; list-style: none; }
  .talk-overview li button { display: grid; align-content: start; width: 100%; min-height: 150px; padding: 16px; border: 1px solid var(--line); background: var(--paper-light); text-align: left; cursor: pointer; }
  .talk-overview li button:hover,
  .talk-overview li button[aria-current="step"] { border-color: var(--ink); }
  .talk-overview li button[aria-current="step"] { background: var(--ink); color: var(--paper-light); }
  .talk-overview li span { font-family: var(--mono); font-size: 11px; }
  .talk-overview li small { margin: 28px 0 6px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
  .talk-overview li button[aria-current="step"] small { color: var(--accent-soft); }
  .talk-overview li strong { font-size: 15px; line-height: 1.25; }

  .presenter-console {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
    gap: clamp(32px, 5vw, 84px);
    width: min(100%, 1380px);
    height: 100%;
    margin: 0 auto;
    padding: clamp(42px, 6vh, 76px) clamp(42px, 6vw, 96px);
  }

  .presenter-summary { display: grid; align-content: start; }
  .presenter-summary > p,
  .presenter-script > span,
  .presenter-script footer small { color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .presenter-summary > span { margin-top: clamp(46px, 8vh, 88px); color: var(--muted); font-size: 13px; }
  .presenter-summary h1 { margin-top: 10px; font-size: clamp(42px, 5vw, 74px); font-weight: 570; letter-spacing: -.055em; line-height: .98; }
  .presenter-progress { height: 3px; margin-top: 34px; background: var(--soft-line); }
  .presenter-progress span { display: block; height: 100%; background: var(--accent); }

  .presenter-script { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; padding-left: clamp(28px, 4vw, 58px); border-left: 1px solid var(--ink); }
  .presenter-script__copy { align-self: stretch; min-height: 0; margin-block: 24px; overflow-y: auto; padding-right: 18px; color: #36352f; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 27px); line-height: 1.45; }
  .presenter-script__copy p + p { margin-top: .9em; }
  .presenter-script footer { display: grid; gap: 5px; padding-top: 20px; border-top: 1px solid var(--line); }
  .presenter-script footer small { color: var(--muted); }
  .presenter-script footer strong { font-size: clamp(17px, 1.7vw, 24px); letter-spacing: -.02em; }
  .presenter-sync { position: absolute; z-index: 30; right: 28px; bottom: 16px; color: var(--muted); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
}

@layer slides {
  .slide-grid--title { grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr); }
  .slide-grid--title .slide-copy h1 { font-size: clamp(58px, 8.4vw, 132px); }

  .fifteen-mark {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    min-height: 370px;
    padding: clamp(24px, 2.5vw, 36px);
    overflow: hidden;
    border-left: 1px solid var(--line);
  }

  .fifteen-mark span { order: 3; color: var(--accent); font-family: var(--serif); font-size: clamp(120px, 13vw, 205px); line-height: .68; letter-spacing: -.1em; }
  .fifteen-mark strong { order: 1; font-size: clamp(22px, 2.6vw, 42px); letter-spacing: -.05em; }
  .fifteen-mark small { order: 2; margin: 4px 0 clamp(28px, 5vh, 72px); color: var(--muted); font-size: 13px; line-height: 1.35; }

  .slide-grid--instinct { grid-template-columns: minmax(0, .95fr) minmax(360px, .8fr); }
  .slide-grid--instinct .slide-copy h1 { font-size: clamp(48px, 6.4vw, 96px); }
  .instinct-stack { display: grid; align-content: center; }
  .instinct-stack > span { display: flex; align-items: center; min-height: 62px; padding: 0 18px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: clamp(13px, 1.3vw, 18px); }
  .instinct-stack > span:nth-child(2) { margin-left: 5%; }
  .instinct-stack > span:nth-child(3) { margin-left: 10%; }
  .instinct-stack > span:nth-child(4) { margin-left: 15%; border-bottom: 1px solid var(--line); }
  .instinct-stack strong { margin: 34px 0 0 20%; color: var(--accent); font-family: var(--serif); font-size: clamp(26px, 3.5vw, 52px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }

  .slide-grid--editions { grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr); }
  .slide-grid--editions .slide-copy h1 { font-size: clamp(48px, 6.6vw, 100px); }
  .editions-definition { display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 20px; }
  .editions-definition > strong { grid-row: 1 / 3; color: var(--accent); font-family: var(--serif); font-size: clamp(110px, 13vw, 190px); font-weight: 400; letter-spacing: -.1em; line-height: .75; }
  .editions-definition > span { align-self: end; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .editions-definition > p { grid-column: 1 / -1; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.7vw, 24px); }
  .editions-definition > p:first-of-type { margin-top: 36px; border-top: 1px solid var(--line); }

  .slide-grid--journey { grid-template-columns: minmax(0, .86fr) minmax(500px, 1fr); }
  .remix-journey { list-style: none; border-top: 1px solid var(--ink); }
  .remix-journey li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; min-height: 92px; border-bottom: 1px solid var(--ink); }
  .remix-journey span { color: var(--muted); font-family: var(--mono); font-size: 10px; }
  .remix-journey strong { font-size: clamp(21px, 2.3vw, 34px); letter-spacing: -.04em; }
  .remix-journey small { color: var(--muted); font-family: var(--serif); font-size: 14px; font-style: italic; }
  .remix-journey .is-current { color: var(--accent); }
  .remix-journey .is-current span, .remix-journey .is-current small { color: inherit; }

  .slide-grid--meme { grid-template-columns: minmax(0, .72fr) minmax(500px, 1fr); }
  .slide-grid--meme .slide-copy h1 { font-size: clamp(48px, 6vw, 88px); }
  .giphy-meme { position: relative; display: grid; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); }
  .giphy-meme--rerender { aspect-ratio: 4 / 3; }
  .giphy-meme--effect, .giphy-meme--ai { aspect-ratio: 16 / 9; }
  .giphy-meme video { width: 100%; height: 100%; object-fit: cover; }
  .giphy-meme figcaption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 48px 18px 16px; background: linear-gradient(transparent, rgb(0 0 0 / .9)); color: white; }
  .giphy-meme figcaption strong { max-width: 80%; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(24px, 3vw, 45px); font-weight: 700; letter-spacing: .025em; line-height: .95; text-wrap: balance; }
  .giphy-meme figcaption a { flex: none; color: white; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
  .giphy-meme figcaption a:hover { text-decoration: underline; }

  .slide-grid--loop { grid-template-columns: minmax(0, .9fr) minmax(430px, .75fr); }
  .slide-grid--loop blockquote { margin-top: 46px; padding-left: 22px; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: clamp(25px, 3vw, 44px); font-style: italic; line-height: 1.16; }
  .react-loop { display: grid; grid-template-columns: 1fr 46px 1fr; grid-template-rows: 1fr 46px 1fr auto; align-items: center; gap: 8px; }
  .react-loop div { display: grid; min-height: 128px; padding: 18px; border: 1px solid var(--ink); background: var(--paper-light); }
  .react-loop div span { color: var(--accent); font-family: var(--mono); font-size: 11px; }
  .react-loop div strong { align-self: end; font-size: clamp(18px, 2vw, 28px); }
  .react-loop i { color: var(--muted); font-size: 24px; font-style: normal; text-align: center; }
  .react-loop div:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .react-loop i:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .react-loop div:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .react-loop i:nth-of-type(2) { grid-column: 3; grid-row: 2; }
  .react-loop div:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .react-loop i:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  .react-loop div:nth-of-type(4) { grid-column: 3; grid-row: 3; }
  .react-loop i:nth-of-type(4) { grid-column: 1; grid-row: 2; }
  .react-loop p { grid-column: 1 / -1; margin-top: 10px; color: var(--muted); font-family: var(--mono); font-size: 12px; text-align: center; }

  .slide-grid--real-editions { grid-template-columns: minmax(320px, .56fr) minmax(620px, 1.35fr); }
  .editions-capture { display: grid; align-self: center; min-width: 0; margin: 0; border: 1px solid var(--ink); background: var(--ink); }
  .editions-capture img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .editions-capture figcaption { padding: 10px 12px; background: var(--ink); color: var(--paper-light); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }

  .slide-grid--budget { grid-template-columns: minmax(0, .86fr) minmax(520px, 1fr); }
  .frame-budget { display: grid; grid-template-columns: repeat(2, 1fr); align-content: center; column-gap: clamp(28px, 5vw, 76px); }
  .frame-budget article { display: grid; grid-template-columns: auto 1fr; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
  .frame-budget strong { color: var(--accent); font-family: var(--serif); font-size: clamp(100px, 11vw, 170px); font-weight: 400; letter-spacing: -.09em; line-height: .7; }
  .frame-budget article > span { padding: 0 0 4px 10px; font-family: var(--mono); font-size: 15px; }
  .frame-budget small { grid-column: 1 / -1; padding-top: 14px; color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
  .frame-budget > p { grid-column: 1 / -1; margin-top: 46px; color: var(--muted); font-family: var(--serif); font-size: clamp(21px, 2.5vw, 36px); font-style: italic; text-align: center; }

  .slide-grid--gravity { grid-template-rows: auto 1fr; align-items: start; gap: clamp(10px, 2vh, 20px); }
  .slide-grid--gravity .slide-copy h1 { font-size: clamp(48px, 7vw, 104px); }

  .clay-illustration { display: grid; min-width: 0; align-self: stretch; place-items: center; gap: 8px; }
  .clay-illustration img { display: block; width: 100%; height: auto; object-fit: contain; }
  .clay-illustration figcaption { width: 100%; color: var(--muted); font-size: 12px; }
  .clay-illustration--ownership img { width: min(100%, 1120px); max-height: min(48vh, 480px); }
  .clay-illustration--ownership figcaption { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 8vw, 120px); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
  .clay-illustration--ownership figcaption span:last-child { text-align: right; }

  .slide-grid--ocean { grid-template-columns: minmax(0, .76fr) minmax(520px, 1fr); }
  .clay-chart { display: grid; place-items: center; }
  .clay-chart img { display: block; width: min(100%, 860px); height: auto; }

  .slide-grid--render-demo { grid-template-columns: minmax(310px, .4fr) minmax(680px, 1fr); grid-template-rows: 1fr auto; }
  .slide-grid--render-demo .slide-copy { grid-row: 1 / 3; }
  .slide-grid--render-demo .slide-copy h1 { font-size: clamp(45px, 5.7vw, 82px); }
  .demo-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 34px; }
  .demo-action { min-height: 56px; border: 1px solid var(--ink); cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background 140ms ease, color 140ms ease, transform 140ms ease; }
  .demo-action--primary { display: flex; min-width: 210px; align-items: center; justify-content: space-between; gap: 28px; padding: 6px 7px 6px 18px; background: var(--ink); color: var(--paper-light); }
  .demo-action--primary strong { display: grid; width: 42px; height: 42px; place-items: center; background: var(--accent); color: white; font-size: 13px; }
  .demo-action--primary:hover { transform: translateY(-2px); }
  .demo-action--primary:active { transform: translateY(0); }
  .demo-action--reset { min-width: 84px; padding: 0 15px; background: transparent; color: var(--ink); }
  .demo-action--reset:hover:not(:disabled) { background: var(--ink); color: var(--paper-light); }
  .demo-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .demo-action:disabled { opacity: .3; cursor: default; transform: none; }
  .render-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-self: center; }
  .render-app { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 410px; padding: 10px; border: 1px solid var(--ink); background: var(--paper-light); }
  .render-app > header { grid-column: 1 / -1; display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 10px; border-bottom: 1px solid var(--line); }
  .render-app > header div { display: grid; gap: 2px; }
  .render-app > header span { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .render-app > header strong { font-size: 14px; }
  .render-app output { padding: 5px 7px; background: var(--ink); color: var(--paper-light); font-family: var(--mono); font-size: 9px; white-space: nowrap; }
  .render-region { position: relative; display: grid; min-height: 88px; padding: 12px; align-content: end; overflow: hidden; border: 1px solid var(--line); background: #e4e1d8; font-size: 12px; }
  .render-region--hero { background: var(--accent-soft); }
  .render-region--grid { background: var(--mint); }
  .render-region--cart { background: var(--paper); }
  .render-region b { position: absolute; top: 8px; right: 8px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-family: var(--mono); font-size: 10px; }
  .render-app--focused .render-region--cart { border: 2px solid var(--accent); }
  .render-app--focused .render-region--cart b { background: var(--accent); }
  .render-region.pulse-0 { animation: render-pulse-a 520ms ease; }
  .render-region.pulse-1 { animation: render-pulse-b 520ms ease; }
  @keyframes render-pulse-a { 50% { background: var(--accent); color: white; } }
  @keyframes render-pulse-b { 50% { background: var(--accent); color: white; } }
  .render-disclaimer { grid-column: 2; align-self: end; color: var(--muted); font-family: var(--serif); font-size: 13px; font-style: italic; text-align: right; }

  .slide-grid--effect-meme { grid-template-columns: minmax(0, .72fr) minmax(560px, 1fr); }
  .slide-grid--effect-meme .slide-copy h1 { font-size: clamp(46px, 6vw, 88px); }

  .slide-grid--code { grid-template-columns: minmax(0, .55fr) minmax(640px, 1fr); }
  .slide-grid--code .slide-copy h1 { font-size: clamp(44px, 5.4vw, 78px); }
  .code-shift { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); min-height: 410px; align-items: stretch; }
  .code-shift article { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); background: var(--paper-light); }
  .code-shift article.is-remix { border-color: var(--ink); }
  .code-shift header { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .code-shift header span { font-weight: 650; }
  .code-shift header small { color: var(--muted); font-family: var(--mono); }
  .code-shift pre { display: grid; align-items: center; overflow: auto; padding: clamp(20px, 3vw, 42px); }
  .code-shift code { font-family: var(--mono); font-size: clamp(14px, 1.65vw, 23px); line-height: 1.7; }
  .code-shift .is-remix code { color: #a53c22; }
  .code-shift--data pre { overflow: hidden; }
  .code-shift--data code { font-size: clamp(13px, 1.35vw, 19px); white-space: pre-wrap; }
  .code-arrow { display: grid; place-items: center; color: var(--accent); font-size: 28px; }

  .slide-grid--modules, .slide-grid--hydrogen { grid-template-columns: minmax(0, .78fr) minmax(560px, 1fr); }
  .module-patch { display: grid; align-content: center; }
  .module-patch header, .module-patch p { display: grid; grid-template-columns: 1.4fr repeat(2, .7fr); align-items: center; min-height: 62px; border-bottom: 1px solid var(--line); }
  .module-patch header { min-height: 44px; border-color: var(--ink); color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
  .module-patch header span:first-child { grid-column: 2; }
  .module-patch code { font-family: var(--mono); font-size: clamp(11px, 1.2vw, 15px); }
  .module-patch b, .module-patch strong { justify-self: start; font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; }
  .module-patch b { color: var(--muted); }
  .module-patch strong { padding: 6px 8px; background: var(--accent); color: white; }
  .module-patch footer { padding-top: 14px; color: var(--accent); font-family: var(--mono); font-size: 10px; text-align: right; text-transform: uppercase; }

  .hydrogen-shift { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: stretch; min-height: 360px; }
  .hydrogen-shift article { display: grid; align-content: end; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--ink); }
  .hydrogen-shift article:last-child { border-color: var(--accent); }
  .hydrogen-shift span { align-self: start; color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
  .hydrogen-shift strong { font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -.05em; line-height: 1; }
  .hydrogen-shift p { margin-top: 10px; color: var(--muted); font-family: var(--serif); font-size: 16px; font-style: italic; }
  .hydrogen-shift i { display: grid; place-items: center; color: var(--accent); font-size: 26px; font-style: normal; }

  .slide-grid--boundary { grid-template-columns: minmax(0, .62fr) minmax(560px, 1fr); }
  .slide-grid--boundary .slide-copy h1 { font-size: clamp(45px, 6vw, 86px); }
  .reveal-button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(100%, 310px); min-height: 52px; margin-top: 36px; padding: 0 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); cursor: pointer; font-size: 13px; }
  .reveal-button:disabled { border-color: var(--line); background: transparent; color: var(--muted); cursor: default; }
  .storefront-map { position: relative; min-height: min(57vh, 510px); overflow: hidden; border: 1px solid var(--ink); background: var(--paper-light); }
  .storefront-bar { display: grid; height: 30px; place-items: center; background: var(--ink); color: var(--paper-light); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
  .storefront-nav { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 66px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 11px; }
  .storefront-nav > span { color: var(--muted); }
  .storefront-nav button { justify-self: end; padding: 8px 11px; border: 1px solid var(--ink); background: transparent; font-size: 10px; }
  .storefront-nav i, .storefront-search i { position: absolute; display: none; padding: 4px 7px; background: var(--accent); color: white; font-family: var(--mono); font-size: 8px; font-style: normal; letter-spacing: .04em; }
  .storefront-nav i { top: 4px; right: 4px; }
  .storefront-search { position: relative; display: grid; width: 70%; height: 50px; margin: 30px auto; padding: 0 15px; align-items: center; border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
  .storefront-search i { top: -9px; right: -9px; }
  .storefront-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 18px; }
  .storefront-products span { display: block; aspect-ratio: 1.2; background: #dedbd2; }
  .storefront-products span:nth-child(2) { background: var(--mint); }
  .storefront-products span:nth-child(3) { background: var(--accent-soft); }
  .storefront-footer { padding: 18px; color: var(--muted); font-family: var(--serif); font-size: 13px; font-style: italic; text-align: center; }
  .storefront-map.reveal-1 .storefront-search { border: 2px solid var(--accent); background: #fff4ef; }
  .storefront-map.reveal-1 .storefront-search i,
  .storefront-map.reveal-2 .storefront-search i,
  .storefront-map.reveal-2 .storefront-nav i { display: block; }
  .storefront-map.reveal-2 .storefront-search,
  .storefront-map.reveal-2 .storefront-nav button { border: 2px solid var(--accent); background: #fff4ef; }

  .slide-grid--request { grid-template-rows: auto 1fr auto; align-items: start; gap: clamp(8px, 1.5vh, 16px); }
  .clay-illustration--request img { width: min(100%, 1120px); max-height: min(31vh, 310px); }
  .clay-illustration--request figcaption { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 920px); font-family: var(--mono); font-size: clamp(9px, 1vw, 12px); text-align: center; }
  .clay-illustration--request figcaption span:first-child { text-align: left; }
  .clay-illustration--request figcaption span:last-child { text-align: right; }
  .request-test { justify-self: center; padding: 14px 20px; border: 1px solid var(--line); background: var(--paper-light); color: #a53c22; font-family: var(--mono); font-size: clamp(12px, 1.3vw, 18px); }

  .slide-grid--ai-meme { grid-template-columns: minmax(0, .7fr) minmax(560px, 1fr); }
  .slide-grid--ai-meme .slide-copy h1 { font-size: clamp(48px, 6.4vw, 94px); }
  .slide-grid--ai-meme .slide-dek code { color: #a53c22; font-family: var(--mono); font-size: .82em; }

  .slide-grid--friction { grid-template-columns: minmax(0, .76fr) minmax(520px, 1fr); }
  .friction-list, .ask-list { list-style: none; border-top: 1px solid var(--ink); }
  .friction-list li, .ask-list li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: center; min-height: 98px; border-bottom: 1px solid var(--ink); }
  .friction-list > li > span, .ask-list > li > span { color: var(--accent); font-family: var(--mono); font-size: 11px; }
  .friction-list li div, .ask-list li div { display: grid; gap: 3px; }
  .friction-list li strong, .ask-list li strong { font-size: clamp(18px, 2vw, 28px); letter-spacing: -.03em; }
  .friction-list li small, .ask-list li small { color: var(--muted); font-size: 12px; }

  .slide-grid--fair { grid-template-columns: minmax(0, .78fr) minmax(560px, 1fr); }
  .fair-list { display: grid; align-content: center; }
  .fair-list > p { display: grid; grid-template-columns: 42px 1fr; align-items: center; min-height: 80px; border-bottom: 1px solid var(--line); }
  .fair-list > p:first-child { border-top: 1px solid var(--ink); }
  .fair-list span { color: var(--accent); font-family: var(--mono); font-size: 10px; }
  .fair-list strong { font-size: clamp(17px, 1.8vw, 25px); letter-spacing: -.025em; }
  .fair-list blockquote { margin: 34px 0 0 42px; color: var(--muted); font-family: var(--serif); font-size: clamp(21px, 2.4vw, 34px); font-style: italic; line-height: 1.2; }

  .slide-grid--performance { grid-template-rows: auto 1fr auto; align-items: start; gap: clamp(8px, 1.5vh, 16px); }
  .slide-grid--performance .slide-copy h1 { max-width: 1120px; font-size: clamp(44px, 6.3vw, 92px); }
  .clay-illustration--performance img { width: min(100%, 920px); max-height: min(38vh, 380px); }
  .clay-illustration--performance figcaption { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; font-family: var(--mono); font-size: clamp(9px, 1vw, 12px); text-align: center; }
  .field-signal { display: grid; align-self: center; justify-self: center; min-width: min(100%, 760px); text-align: center; }
  .field-signal strong { color: var(--accent); font-family: var(--serif); font-size: clamp(130px, 18vw, 270px); font-weight: 400; letter-spacing: -.1em; line-height: .7; }
  .field-signal > span { margin-top: 28px; font-family: var(--mono); font-size: clamp(13px, 1.5vw, 19px); letter-spacing: .08em; text-transform: uppercase; }
  .field-signal p { margin-top: 8px; color: var(--muted); font-size: 12px; }
  .performance-caveat { display: flex; justify-content: space-between; align-items: center; gap: 30px; font-size: clamp(17px, 1.8vw, 25px); }
  .performance-caveat span { color: var(--muted); font-family: var(--serif); font-style: italic; }

  .slide-grid--benchmark { grid-template-columns: minmax(0, .75fr) minmax(560px, 1fr); }
  .benchmark-contract { display: grid; align-content: center; border-top: 1px solid var(--ink); }
  .benchmark-contract > div { display: grid; gap: 8px; min-height: 118px; padding: 22px 0; border-bottom: 1px solid var(--ink); }
  .benchmark-contract span { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
  .benchmark-contract strong { font-size: clamp(21px, 2.5vw, 36px); letter-spacing: -.04em; }
  .benchmark-contract .is-missing { color: var(--accent); }

  .slide-grid--asks { grid-template-columns: minmax(0, .78fr) minmax(540px, 1fr); }
  .ask-list li { min-height: 126px; }
  .ask-list li small { max-width: 500px; font-size: 14px; line-height: 1.4; }

  .slide-grid--closing { grid-template-columns: minmax(0, 1fr) minmax(240px, .35fr); }
  .slide-grid--closing .slide-copy h1 { font-size: clamp(48px, 7.1vw, 108px); }
  .closing-thesis { display: flex; gap: clamp(28px, 5vw, 80px); margin-top: clamp(34px, 5vh, 64px); }
  .closing-thesis p { display: grid; gap: 2px; }
  .closing-thesis span { color: var(--muted); font-size: 13px; }
  .closing-thesis strong { font-family: var(--serif); font-size: clamp(23px, 2.8vw, 40px); font-style: italic; font-weight: 400; }
  .closing-thesis p:first-child strong { color: var(--accent); }
  .closing-mark { display: grid; grid-template-columns: auto auto auto; align-items: center; align-self: stretch; justify-content: center; gap: 14px; border-left: 1px solid var(--line); font-size: clamp(26px, 4vw, 54px); }
  .closing-mark span, .closing-mark strong { display: grid; width: clamp(68px, 8vw, 116px); aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); font-family: var(--mono); font-size: inherit; }
  .closing-mark strong { border-color: var(--accent); background: var(--accent); color: white; }
  .closing-mark i { color: var(--muted); font-style: normal; }

  .slide-grid--perfection { grid-template-columns: minmax(360px, .72fr) minmax(620px, 1fr); }
  .perfection-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; border-top: 1px solid var(--ink); }
  .perfection-targets article { display: grid; grid-template-columns: 34px 1fr; gap: 8px 14px; min-height: 150px; padding: 24px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--ink); }
  .perfection-targets article:nth-child(even) { border-right: 0; }
  .perfection-targets span, .perfection-targets small { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .perfection-targets strong { font-size: clamp(27px, 3vw, 43px); letter-spacing: -.04em; }
  .perfection-targets small { grid-column: 2; align-self: end; }

  .slide-grid--optimization { grid-template-columns: minmax(380px, .8fr) minmax(560px, 1fr); }
  .optimization-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; border-top: 1px solid var(--ink); }
  .optimization-methods span { padding: 22px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: clamp(12px, 1.2vw, 17px); text-transform: uppercase; }
  .optimization-methods span:nth-child(even) { border-right: 0; }
  .optimization-methods strong { grid-column: 1 / -1; padding-top: 28px; color: var(--accent); font-family: var(--serif); font-size: clamp(35px, 4vw, 58px); font-style: italic; font-weight: 400; text-align: right; }

  .slide-grid--real-code { grid-template-columns: minmax(340px, .62fr) minmax(650px, 1.18fr); }
  .slide-grid--real-code .slide-copy h1 { font-size: clamp(48px, 5.8vw, 84px); }
  .real-code-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; max-height: 66vh; align-self: center; margin: 0; border: 1px solid var(--ink); background: #171714; color: #f5f1e7; }
  .real-code-panel figcaption, .real-code-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #4c4b45; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .real-code-panel figcaption small { color: #aaa79d; }
  .real-code-panel pre { min-width: 0; margin: 0; padding: clamp(18px, 2vw, 28px); overflow: hidden; }
  .real-code-panel code { color: #f5f1e7; font-family: var(--mono); font-size: clamp(11px, 1.05vw, 15px); line-height: 1.55; white-space: pre-wrap; }
  .real-code-panel footer { border-top: 1px solid #4c4b45; border-bottom: 0; color: #ff8668; }
  .real-code-panel--route code, .real-code-panel--client code { font-size: clamp(10px, .95vw, 14px); }
  .real-code-panel--test code { font-size: clamp(11px, 1.15vw, 16px); }
  .slide-grid--gravity blockquote { margin-top: 40px; color: var(--muted); font-family: var(--serif); font-size: clamp(22px, 2.7vw, 38px); font-style: italic; line-height: 1.25; }
  .slide-grid--gravity blockquote strong { color: var(--accent); font-weight: 400; }

  .slide-grid--data-proof { grid-template-columns: minmax(360px, .68fr) minmax(620px, 1fr); }
  .data-proof { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; max-height: 66vh; align-self: center; margin: 0; border: 1px solid var(--ink); background: var(--paper-light); }
  .data-proof figcaption { padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
  .data-proof pre { margin: 0; padding: clamp(20px, 2.5vw, 36px); overflow: hidden; }
  .data-proof code { font-family: var(--mono); font-size: clamp(12px, 1.25vw, 18px); line-height: 1.52; white-space: pre-wrap; }
  .data-proof > div { display: grid; grid-template-columns: auto 1fr auto 1.5fr; gap: 8px 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--ink); }
  .data-proof > div span { color: var(--muted); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
  .data-proof > div strong { font-size: 12px; }
  .data-proof > div strong:first-of-type { color: var(--accent); }

  .slide-grid--gotcha { grid-template-columns: minmax(380px, .72fr) minmax(620px, 1fr); }
  .gotcha-chain { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; align-content: center; gap: 10px; }
  .gotcha-chain > p { display: grid; min-height: 190px; margin: 0; padding: 18px; border: 1px solid var(--ink); background: var(--paper-light); }
  .gotcha-chain > p span, .gotcha-chain > p small, .gotcha-chain footer span, .gotcha-chain footer small { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
  .gotcha-chain > p strong { align-self: center; font-size: clamp(17px, 1.8vw, 25px); }
  .gotcha-chain > p small { align-self: end; line-height: 1.5; }
  .gotcha-chain > i { align-self: center; color: var(--accent); font-size: 25px; font-style: normal; text-align: center; }
  .gotcha-chain footer { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; margin-top: 16px; padding: 15px 18px; background: var(--accent); color: white; }
  .gotcha-chain footer span, .gotcha-chain footer small { color: white; }
  .gotcha-chain footer strong { font-size: 18px; }
  .gotcha-chain footer small { justify-self: end; }

  .slide-grid--evidence-v2 { grid-template-columns: minmax(370px, .72fr) minmax(620px, 1fr); }
  .evidence-ledger { display: grid; align-content: center; }
  .evidence-ledger article { display: grid; gap: 8px; padding: 24px 18px; border-top: 1px solid var(--ink); }
  .evidence-ledger article:last-of-type { border-bottom: 1px solid var(--ink); }
  .evidence-ledger article:first-child strong { color: var(--accent); font-family: var(--serif); font-size: clamp(80px, 9vw, 135px); font-weight: 400; letter-spacing: -.07em; line-height: .8; }
  .evidence-ledger article span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .evidence-ledger article:nth-child(2) strong { font-size: clamp(22px, 2.3vw, 34px); }
  .evidence-ledger article small { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
  .evidence-ledger blockquote { margin: 24px 0 0; color: var(--muted); font-family: var(--serif); font-size: clamp(21px, 2.2vw, 32px); font-style: italic; text-align: right; }

  .slide-grid--channel-story { grid-template-columns: minmax(380px, .75fr) minmax(580px, 1fr); }
  .slide-grid--channel-story .slide-copy h1 { font-size: clamp(48px, 6.2vw, 92px); }
  .channel-console { display: grid; grid-template-columns: 1fr 150px; min-height: min(55vh, 500px); border: 1px solid var(--ink); background: var(--paper-light); }
  .channel-url { grid-column: 1 / -1; display: flex; align-items: center; min-height: 58px; padding: 0 18px; overflow: hidden; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: clamp(10px, 1.05vw, 14px); white-space: nowrap; }
  .channel-url span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
  .channel-url strong { color: var(--accent); }
  .channel-screen { display: grid; align-content: center; justify-items: center; min-height: 340px; border-right: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
  .channel-screen small, .channel-screen span { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
  .channel-screen small { color: var(--accent-soft); }
  .channel-screen strong { color: var(--accent); font-family: var(--serif); font-size: clamp(150px, 17vw, 250px); font-weight: 400; letter-spacing: -.1em; line-height: .78; }
  .channel-screen span { margin-top: 24px; color: #aaa79d; }
  .channel-remote { display: grid; align-content: center; gap: 12px; padding: 20px; background: #dcd8cd; }
  .channel-remote button { min-height: 72px; border: 1px solid var(--ink); background: var(--paper-light); color: var(--ink); font-family: var(--mono); font-size: 12px; }

  .slide-grid--sync-code { grid-template-columns: minmax(340px, .58fr) minmax(700px, 1.28fr); }
  .slide-grid--sync-code .slide-copy h1 { font-size: clamp(47px, 5.5vw, 80px); }
  .sync-code-panel { display: grid; grid-template-columns: 1fr 46px 1fr; align-content: center; min-width: 0; margin: 0; }
  .sync-code-panel article { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 360px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
  .sync-code-panel header { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #4c4b45; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .sync-code-panel header small { color: #aaa79d; }
  .sync-code-panel pre { display: grid; align-items: center; min-width: 0; padding: clamp(16px, 1.8vw, 26px); overflow: hidden; }
  .sync-code-panel code { font-family: var(--mono); font-size: clamp(10px, .92vw, 13px); line-height: 1.65; white-space: pre-wrap; }
  .sync-code-panel > i { display: grid; place-items: center; color: var(--accent); font-size: 24px; font-style: normal; }
  .sync-code-panel figcaption { grid-column: 1 / -1; padding-top: 14px; color: var(--muted); font-family: var(--mono); font-size: 10px; text-align: center; text-transform: uppercase; }

  .slide-grid--lazy-inventory { grid-template-columns: minmax(390px, .78fr) minmax(590px, 1fr); }
  .lazy-inventory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; border-top: 1px solid var(--ink); }
  .lazy-inventory article { display: grid; grid-template-rows: auto auto 1fr; min-height: 260px; padding: 24px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--ink); }
  .lazy-inventory article:last-of-type { border-right: 0; }
  .lazy-inventory strong { color: var(--accent); font-family: var(--serif); font-size: clamp(50px, 5.5vw, 82px); font-weight: 400; letter-spacing: -.06em; line-height: .9; }
  .lazy-inventory span { margin-top: 18px; font-size: clamp(17px, 1.6vw, 23px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
  .lazy-inventory small { align-self: end; margin-top: 24px; color: var(--muted); font-family: var(--mono); font-size: 9px; line-height: 1.5; text-transform: uppercase; }
  .lazy-inventory footer { grid-column: 1 / -1; padding-top: 24px; color: var(--accent); font-family: var(--serif); font-size: clamp(25px, 2.6vw, 38px); font-style: italic; text-align: right; }
  .real-code-panel--lazy code { font-size: clamp(9px, .83vw, 12px); line-height: 1.5; }

  .slide-grid--tool-compare { grid-template-columns: minmax(390px, .72fr) minmax(650px, 1.15fr); }
  .slide-grid--tool-compare .slide-copy h1 { font-size: clamp(45px, 5.5vw, 80px); }
  .tool-compare { display: grid; align-content: center; border-top: 1px solid var(--ink); }
  .tool-compare__head, .tool-compare article { display: grid; grid-template-columns: 1.05fr 1.2fr .9fr; align-items: center; gap: 18px; min-height: 82px; padding: 0 14px; border-bottom: 1px solid var(--line); }
  .tool-compare__head { min-height: 42px; border-bottom-color: var(--ink); color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
  .tool-compare article strong { font-size: clamp(15px, 1.45vw, 21px); letter-spacing: -.025em; }
  .tool-compare article span { font-size: 13px; }
  .tool-compare article small { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
  .tool-compare article.is-remix { background: var(--ink); color: var(--paper-light); }
  .tool-compare article.is-remix strong { color: var(--accent-soft); }
  .tool-compare article.is-remix small { color: #bbb7ab; }
  .tool-compare footer { display: grid; grid-template-columns: auto auto 1fr; gap: 12px 18px; align-items: center; padding: 18px 14px 0; }
  .tool-compare footer > strong { color: var(--accent); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .tool-compare footer > span { font-family: var(--serif); font-size: 20px; font-style: italic; }
  .tool-compare footer > small { justify-self: end; max-width: 260px; color: var(--muted); font-size: 10px; line-height: 1.4; text-align: right; }

  .slide-grid--url-now { grid-template-columns: minmax(350px, .6fr) minmax(700px, 1.25fr); }
  .slide-grid--url-now .slide-copy h1 { font-size: clamp(47px, 5.7vw, 84px); }
  .url-now-code { display: grid; grid-template-columns: .8fr 1.2fr; min-width: 0; margin: 0; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
  .url-now-code article { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 360px; }
  .url-now-code article:first-child { border-right: 1px solid #4c4b45; }
  .url-now-code header { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #4c4b45; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
  .url-now-code header small { color: #aaa79d; }
  .url-now-code pre { display: grid; align-items: center; min-width: 0; padding: clamp(16px, 2vw, 28px); overflow: hidden; }
  .url-now-code code { font-family: var(--mono); font-size: clamp(10px, .95vw, 14px); line-height: 1.65; white-space: pre-wrap; }
  .url-now-code figcaption { grid-column: 1 / -1; padding: 13px 16px; border-top: 1px solid #4c4b45; color: #ff8668; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
  .url-now-code--local article { min-height: 430px; }
  .url-now-code--local code { font-size: clamp(9px, .82vw, 12px); line-height: 1.5; }

  .slide-grid--client-lazy { grid-template-columns: minmax(360px, .65fr) minmax(680px, 1.2fr); }
  .slide-grid--client-lazy .slide-copy h1 { font-size: clamp(45px, 5.4vw, 79px); }
  .slide-grid--client-lazy .slide-copy h1 code { color: var(--accent); font-family: var(--mono); font-size: .74em; letter-spacing: -.04em; }
  .client-lazy-code { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; max-height: 67vh; margin: 0; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
  .client-lazy-code figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 11px 15px; border-bottom: 1px solid #4c4b45; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
  .client-lazy-code figcaption small { color: #aaa79d; }
  .client-lazy-code pre { min-width: 0; padding: clamp(14px, 1.8vw, 24px); overflow: hidden; }
  .client-lazy-code code { font-family: var(--mono); font-size: clamp(9px, .8vw, 12px); line-height: 1.42; white-space: pre-wrap; }
  .client-lazy-code footer { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px 12px; align-items: center; padding: 12px 15px; border-top: 1px solid #4c4b45; }
  .client-lazy-code footer span { color: #aaa79d; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
  .client-lazy-code footer strong { color: #ff8668; font-size: 10px; }

  .rerender-map .storefront-nav i, .rerender-map .storefront-search i { display: none; }
  .rerender-map.reveal-1 .storefront-search, .rerender-map.reveal-2 .storefront-search { border: 1px solid var(--line); background: transparent; }
  .rerender-map.reveal-1 .storefront-nav button, .rerender-map.reveal-2 .storefront-nav button { border: 2px solid var(--accent); background: #fff4ef; animation: cart-wake 520ms ease; }
  .rerender-map.reveal-1 .storefront-nav i, .rerender-map.reveal-2 .storefront-nav i { display: block; }
  .rerender-map.reveal-2 .storefront-search i { display: block; background: var(--paper); color: var(--muted); }
  .rerender-limit { position: absolute; right: 14px; bottom: 12px; left: 14px; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper-light); color: var(--muted); font-family: var(--mono); font-size: 9px; text-align: center; text-transform: uppercase; }
  @keyframes cart-wake { 50% { background: var(--accent); color: white; } }

  .evidence-ledger--asks article { padding: 18px; }
  .evidence-ledger--asks article:first-child strong { font-size: clamp(65px, 7vw, 108px); }
  .evidence-ledger--asks > footer { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 8px 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--ink); }
  .evidence-ledger--asks > footer span { color: var(--accent); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
  .evidence-ledger--asks > footer strong { font-size: 10px; }
  .evidence-ledger--asks blockquote { margin-top: 18px; font-size: clamp(18px, 1.8vw, 26px); }
  .closing-thesis { flex-wrap: wrap; }

  /* V2 focus system: one claim or artifact per slide. */
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .slide-grid--solo { place-items: center; }
  .slide-grid--image-only { place-items: center; }
  .image-only { position: relative; width: min(100%, 112vh); aspect-ratio: 16 / 10; max-height: 100%; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); }
  .image-only img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
  .image-only figcaption { position: absolute; z-index: 1; margin: 0; padding: 10px 13px; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
  .image-only figcaption { right: 0; bottom: 0; background: var(--ink); color: var(--paper-light); }
  .image-only--tv { background: #6d6d6d; }
  .image-only--video { background: #0b0d0c; }
  .poster-focus { width: min(100%, 1220px); }
  .poster-grid { display: grid; border-block: 1px solid var(--ink); }
  .poster-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .poster-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .poster-grid > strong, .poster-grid article { display: grid; align-content: space-between; min-height: 280px; padding: 22px; border-right: 1px solid var(--line); font-size: clamp(31px, 3.7vw, 58px); letter-spacing: -.055em; line-height: .95; }
  .poster-grid > strong:last-child, .poster-grid article:last-child { border-right: 0; }
  .poster-grid article span, .poster-grid article small { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .poster-grid article strong { align-self: center; font-size: clamp(36px, 4.5vw, 68px); letter-spacing: -.06em; line-height: .9; }
  .poster-grid article small { align-self: end; }
  .poster-footnote { margin-top: 16px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-align: right; text-transform: uppercase; }
  .poster-footer { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
  .poster-footer .poster-footnote { margin-right: auto; }
  .progressive-item { visibility: hidden; opacity: 0; translate: 0 12px; transition: visibility 0s 220ms, opacity 220ms ease, translate 220ms ease; }
  .progressive-item.is-revealed { visibility: visible; opacity: 1; translate: 0; transition-delay: 0s; }
  .progressive-control { justify-self: end; align-self: end; min-height: 38px; margin-top: 16px; padding: 0 14px; border: 1px solid var(--ink); background: transparent; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
  .progressive-control span { margin-left: 18px; color: var(--accent); }
  .progressive-control:hover { background: var(--ink); color: var(--paper-light); }
  .slide-grid--code-only { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: clamp(18px, 2.5vh, 28px); }
  .code-only-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
  .code-only-heading h1 { max-width: 980px; font-size: clamp(32px, 3.7vw, 54px); font-weight: 570; letter-spacing: -.055em; line-height: .96; text-align: right; }
  .slide-grid--code-only .focus-code-panel { max-height: none; }
  .chain-poster { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; border-block: 1px solid var(--ink); }
  .chain-poster p { display: grid; align-content: space-between; min-height: 260px; padding: 22px; }
  .chain-poster p span { color: var(--accent); font-family: var(--mono); font-size: 10px; }
  .chain-poster p strong { align-self: center; font-size: clamp(28px, 3.5vw, 52px); letter-spacing: -.05em; line-height: .95; }
  .chain-poster i { display: grid; width: 50px; place-items: center; color: var(--accent); font-size: 28px; font-style: normal; }
  .remix-journey--minimal li { align-content: space-between; }
  .remix-journey--minimal strong { align-self: end; }
  .sync-focus--lean > div { margin-top: 52px; }
  .tool-focus--lean { min-height: 0; height: min(100%, 520px); }
  .tool-focus--lean h1 { margin-bottom: 0; }
  .solo-statement, .editions-frequency, .sync-focus, .lifecycle-focus, .tool-focus, .question-focus, .frame-verdict, .metric-focus, .benchmark-focus, .closing-focus { width: min(100%, 1220px); }
  .solo-statement h1, .question-focus h1, .frame-verdict h1, .closing-focus h1 { font-size: clamp(56px, 7.4vw, 116px); font-weight: 570; letter-spacing: -.07em; line-height: .9; text-wrap: balance; }
  .solo-statement h1 em, .closing-focus h1 em { color: var(--accent); font-family: var(--serif); font-weight: 400; }
  .solo-statement > p:last-child, .closing-focus > p:last-child { margin-top: 34px; color: var(--muted); font-size: clamp(18px, 1.7vw, 27px); }
  .slide-grid--opening .solo-statement { text-align: center; }

  .editions-frequency { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 34px; }
  .editions-frequency h1 { color: var(--accent); font-family: var(--serif); font-size: clamp(210px, 28vw, 420px); font-weight: 400; letter-spacing: -.12em; line-height: .62; }
  .editions-frequency strong { padding-bottom: 10px; font-size: clamp(55px, 8vw, 118px); letter-spacing: -.07em; line-height: .8; }
  .editions-frequency > p:last-child { grid-column: 1 / -1; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--ink); color: var(--muted); font-size: clamp(18px, 2vw, 30px); }

  .slide-grid--product-focus, .slide-grid--focus-stack, .slide-grid--code-focus, .slide-grid--interaction-focus { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: clamp(22px, 3vh, 36px); }
  .focus-heading { width: 100%; }
  .focus-heading h1 { max-width: 1280px; font-size: clamp(48px, 6vw, 86px); font-weight: 570; letter-spacing: -.06em; line-height: .95; }
  .focus-heading--code { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
  .focus-heading--code h1 { max-width: 980px; font-size: clamp(34px, 3.8vw, 54px); text-align: right; }

  .product-focus { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); }
  .product-focus img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
  .product-focus figcaption { position: absolute; right: 0; bottom: 0; z-index: 1; padding: 10px 13px; background: var(--ink); color: var(--paper-light); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .product-focus--tv, .product-focus--video { width: min(100%, 102vh); justify-self: center; }
  .product-focus--tv { background: #6d6d6d; }
  .product-focus--video { background: #0b0d0c; }

  .remix-journey--horizontal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: center; border-top: 1px solid var(--ink); }
  .remix-journey--horizontal li { display: grid; grid-template-columns: 1fr; align-content: space-between; min-height: 280px; padding: 22px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .remix-journey--horizontal li:last-child { border-right: 0; }
  .remix-journey--horizontal strong { font-size: clamp(28px, 3vw, 44px); }
  .remix-journey--horizontal small { align-self: end; }
  .perfection-targets--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: center; }
  .perfection-targets--wide article, .perfection-targets--wide article:nth-child(even) { min-height: 260px; border-right: 1px solid var(--line); }
  .perfection-targets--wide article:last-child { border-right: 0; }

  .channel-console--wide { width: min(100%, 1120px); min-height: 0; height: 100%; max-height: 510px; justify-self: center; }
  .channel-console--wide .channel-screen { min-height: 0; }

  .focus-code-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(100%, 1120px); min-height: 0; max-height: 62vh; align-self: stretch; justify-self: center; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
  .focus-code-panel figcaption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 16px; border-bottom: 1px solid #4c4b45; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
  .focus-code-panel figcaption small { color: #aaa79d; }
  .focus-code-panel pre { display: grid; align-items: center; min-width: 0; margin: 0; padding: clamp(24px, 3vw, 40px); overflow: auto; }
  .focus-code-panel code { font-family: var(--mono); font-size: clamp(15px, 1.4vw, 20px); line-height: 1.45; white-space: pre-wrap; }
  .focus-code-panel--compact { max-height: 56vh; }
  .focus-code-panel--wide-code code { font-size: clamp(12px, 1.05vw, 15px); line-height: 1.35; }
  .focus-code-panel--wide-code pre { padding-block: 22px; }
  .focus-code-panel footer { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 10px 16px; align-items: center; padding: 12px 16px; border-top: 1px solid #4c4b45; }
  .focus-code-panel footer span { color: #aaa79d; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
  .focus-code-panel footer strong { color: #ff8668; font-size: 11px; }

  .sync-focus h1, .lifecycle-focus h1, .tool-focus h1, .metric-focus h1, .benchmark-focus h1 { font-size: clamp(72px, 9vw, 138px); font-weight: 570; letter-spacing: -.07em; line-height: .9; text-wrap: balance; }
  .sync-focus > div { display: grid; grid-template-columns: auto 50px auto 50px auto 50px auto; align-items: center; margin-top: 70px; padding: 22px 0; border-block: 1px solid var(--ink); }
  .sync-focus > div span { font-family: var(--mono); font-size: clamp(15px, 1.6vw, 23px); text-align: center; text-transform: uppercase; }
  .sync-focus > div i { color: var(--accent); font-size: 25px; font-style: normal; text-align: center; }
  .sync-focus > p:last-child { margin-top: 22px; color: var(--muted); font-family: var(--serif); font-size: clamp(22px, 2.5vw, 38px); font-style: italic; text-align: right; }

  .lifecycle-focus ol { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 68px; list-style: none; border-top: 1px solid var(--ink); }
  .lifecycle-focus li { min-height: 130px; padding: 20px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: clamp(13px, 1.4vw, 20px); text-transform: uppercase; }
  .lifecycle-focus li:last-child { border-right: 0; }
  .solo-statement--react { text-align: left; }
  .solo-statement--react > p:last-child { padding-top: 22px; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: clamp(12px, 1.25vw, 18px); text-transform: uppercase; }

  .tool-focus { display: grid; min-height: 520px; align-content: center; padding: clamp(36px, 6vw, 84px); border: 1px solid var(--ink); background: var(--paper-light); }
  .tool-focus > span { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
  .tool-focus h1 { margin-top: 24px; }
  .tool-focus > p:last-child { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: clamp(18px, 2vw, 28px); }
  .tool-focus--remix { background: var(--ink); color: var(--paper-light); }
  .tool-focus--remix h1 { color: var(--accent-soft); }
  .tool-focus--remix > p:last-child { border-color: #4c4b45; color: #c6c2b7; }

  .question-focus > p:nth-child(2) { color: var(--muted); font-family: var(--serif); font-size: clamp(26px, 3vw, 46px); font-style: italic; }
  .question-focus h1 { margin-top: 30px; color: var(--accent); }
  .frame-verdict { display: grid; grid-template-columns: repeat(3, 1fr); }
  .frame-verdict h1 { grid-column: 1 / -1; }
  .frame-verdict h1 { max-width: 1200px; }
  .frame-verdict > p { margin-top: 60px; padding: 20px; border-top: 1px solid var(--ink); border-right: 1px solid var(--line); font-family: var(--mono); font-size: clamp(14px, 1.5vw, 22px); text-transform: uppercase; }
  .frame-verdict > p:last-child { border-right: 0; }
  .frame-verdict--measured { grid-template-columns: 1fr; }
  .frame-verdict--measured h1, .frame-verdict--measured > small { grid-column: 1; }
  .frame-verdict--measured h1 { font-size: clamp(58px, 7.8vw, 118px); }
  .frame-verdict--measured > small { margin-top: 20px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
  .frame-verdict__facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 46px; border-block: 1px solid var(--ink); }
  .frame-verdict__facts p { display: grid; min-height: 126px; padding: 18px; border-right: 1px solid var(--line); }
  .frame-verdict__facts p:last-child { border-right: 0; }
  .frame-verdict__facts strong { color: var(--accent); font-family: var(--serif); font-size: clamp(48px, 6vw, 82px); font-weight: 400; line-height: .8; }
  .frame-verdict__facts span { align-self: end; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }

  .interaction-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
  .interaction-heading h1 { font-size: clamp(52px, 6.5vw, 92px); font-weight: 570; letter-spacing: -.06em; line-height: .9; }
  .storefront-map--wide { align-self: stretch; width: min(100%, 1160px); height: 100%; max-height: 500px; justify-self: center; }

  .gotcha-chain--wide { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-self: center; }
  .gotcha-chain--wide p { min-height: 240px; }
  .gotcha-chain--wide footer { grid-column: 1 / -1; }

  .candidate-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; width: min(100%, 1180px); justify-self: center; border: 1px solid var(--ink); background: var(--paper-light); }
  .candidate-evidence header, .candidate-evidence footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; min-height: 42px; padding: 10px 16px; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
  .candidate-evidence header { border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
  .candidate-evidence header span:not(:last-child)::after { margin-left: 18px; color: #77746c; content: '·'; }
  .candidate-evidence article { display: grid; align-content: space-between; min-width: 0; min-height: 230px; padding: clamp(18px, 2.3vw, 30px); border-right: 1px solid var(--line); }
  .candidate-evidence article:last-of-type { border-right: 0; }
  .candidate-evidence article > strong { color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
  .candidate-evidence article p { align-self: center; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.045em; line-height: 1.05; }
  .candidate-evidence article p b { font-family: var(--serif); font-weight: 400; }
  .candidate-evidence article small { color: var(--muted); font-family: var(--mono); font-size: 9px; line-height: 1.55; text-transform: uppercase; }
  .candidate-evidence footer { justify-content: space-between; border-top: 1px solid var(--ink); }
  .candidate-evidence footer strong { color: var(--accent); }

  .metric-focus { text-align: center; }
  .metric-focus h1 { color: var(--accent); font-family: var(--serif); font-size: clamp(220px, 30vw, 440px); font-weight: 400; line-height: .65; }
  .metric-focus strong { display: block; margin-top: 26px; font-size: clamp(28px, 4vw, 58px); letter-spacing: -.04em; }
  .metric-focus > p:last-child { margin-top: 22px; color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }

  .benchmark-focus h1 { max-width: 1100px; }
  .benchmark-focus > p { margin-top: 28px; color: var(--muted); font-family: var(--serif); font-size: clamp(24px, 3vw, 42px); font-style: italic; }
  .benchmark-focus > div { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 56px; border-top: 1px solid var(--ink); }
  .benchmark-focus span { min-height: 100px; padding: 16px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; text-align: center; text-transform: uppercase; }
  .benchmark-focus span:last-child { border-right: 0; }

  .ask-list--wide { align-self: center; }
  .ask-list--wide li { grid-template-columns: 80px 1fr; padding: 22px 0; }
  .ask-list--wide li > span { font-size: 36px; }
  .ask-list--wide strong { font-size: clamp(28px, 3vw, 44px); }
  .ask-list--wide small { font-size: clamp(16px, 1.5vw, 22px); }
  .closing-focus { text-align: center; }

  /* Clay Studio · stills, placeholders, TV plate */
  /* Still slides: headline left, picture right at full height. The picture is the point. */
  .slide-grid--clay { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px); }
  .slide-grid--clay .focus-heading h1 { font-size: clamp(40px, 4.6vw, 72px); }
  .slide-grid--clay .slide-sub { margin-top: 22px; color: var(--muted); font-size: clamp(15px, 1.25vw, 20px); letter-spacing: .01em; }
  .clay-still { position: relative; height: 100%; min-height: 0; margin: 0; container-type: size; }
  .clay-still img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
  .clay-still__layers { position: absolute; left: 50%; top: 50%; aspect-ratio: 4 / 3; height: min(100cqh, 75cqw); translate: -50% -50%; }
  .clay-still__base { clip-path: inset(5.7% 16.7% 20.5% 18% round 3%); }
  .clay-still--large > img, .clay-still--large .clay-still__layers { scale: 1.22; }
  .slide-grid--clay .clay-tv, .slide-grid--clay .yellow-scene { height: 100%; }
  .slot-placeholder { display: grid; place-content: center; justify-items: center; gap: 10px; min-height: 0; padding: 32px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
  .slot-placeholder span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .slot-placeholder p { max-width: 60ch; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.4; }
  .clay-tv { position: relative; min-height: 0; margin: 0; container-type: size; }
  .slide-grid--clay:has(.clay-tv) .focus-heading h1 { font-size: clamp(56px, 6.8vw, 108px); }
  /* Plate keeps the 1:1 of the PNG so the screen rect stays valid; sized by whichever axis is tighter. */
  .clay-tv__plate { position: absolute; right: 0; bottom: 0; aspect-ratio: 1; height: min(100cqh, 78cqw); }
  /* Audience sits on the same floor line, front-left of the set, sized off the plate. */
  .clay-tv__audience { position: absolute; left: 0; bottom: 0; z-index: 3; height: min(100cqh, 78cqw); width: 100%; pointer-events: none; }
  .clay-tv__audience img { position: absolute; bottom: 0; display: block; width: auto; filter: drop-shadow(0 14px 12px rgba(60, 45, 20, .2)); }
  .clay-tv__server { left: 2%; height: 32%; }
  .clay-tv__browser { left: 23%; height: 31%; }
  .clay-tv__plate img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 14px rgba(60, 45, 20, .18)); }
  /* inner screen rect of 07c-boring-tv-plate-43 (1024×1024): x 305–718, y 365–711 */
  .clay-tv__screen { position: absolute; z-index: 2; left: 29.8%; top: 35.6%; width: 40.3%; height: 33.8%; overflow: hidden; background: #1c1c1c; border-radius: 4px; box-shadow: inset 0 0 18px rgba(0,0,0,.9); }
  .clay-tv__video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .remote-tv { position: relative; width: 100%; height: 100%; }
  .remote-tv .clay-tv__video { position: absolute; inset: 0; visibility: hidden; }
  .remote-tv:not([data-remote-channel]) .clay-tv__video:first-child,
  .remote-tv .clay-tv__video[data-active] { visibility: visible; }
  .owned-tv { position: absolute; background: var(--paper); }
  .owned-tv .owned-tv__still, .owned-tv .owned-tv__motion { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: multiply; clip-path: inset(3px); filter: none; }
  .owned-tv .owned-tv__still { display: none; }
  /* Inner glass on the fixed 1280×720 plate: x501 / y278 / w278 / h201.
     The slight sloped crop follows the original bezel, not the generated motion. */
  .owned-tv__screen { position: absolute; z-index: 2; left: 39.1406%; top: 38.6111%; width: 21.7188%; height: 27.9167%; overflow: hidden; border-radius: 3.5% / 5%; clip-path: polygon(0 0, 100% 0, 100% 96.5%, 0 100%); background: #171717; }
  .poster-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster-grid--two > strong { font-size: clamp(26px, 2.8vw, 44px); }

  /* Clay Studio · composed puppet scenes */
  /* Composed scenes: a compact headline, then the stage gets everything else. */
  .slide-grid--clay-stack { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: clamp(8px, 1.5vh, 18px); }
  .slide-grid--clay-stack .focus-heading h1 { font-size: clamp(36px, 3.8vw, 58px); }
  /* Slide 32: heading on the left, puppet on the right, both vertically centred; the scene is capped so the puppet doesn't dominate. */
  .slide-grid--familiar { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 56px); }
  .slide-grid--familiar .focus-heading h1 { font-size: clamp(44px, 5.2vw, 84px); }
  .slide-grid--familiar .clay-scene { height: min(62vh, 560px); }
  .clay-scene { position: relative; display: block; min-height: 0; margin: 0; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; }

  /* Hydration needs a change in composition, not merely a larger fixed stage. */
  /* Screen recording in a clay browser window: heading on top, the window fills what's left. */
  .talk-slide:has(> .slide-grid--clip) { padding-block: clamp(16px, 2.4vh, 28px) clamp(14px, 2vh, 24px); }
  .slide-grid--clip { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: clamp(8px, 1.6vh, 18px); }
  .slide-grid--clip .focus-heading h1 { font-size: clamp(32px, 3.2vw, 50px); }
  .slide-grid--clip-only { grid-template-rows: minmax(0, 1fr); }
  .slide-grid--clip-only .clip-window { width: min(94%, calc((94cqh - var(--chrome)) * var(--ratio))); }
  .clip-scene { display: grid; min-height: 0; margin: 0; place-items: center; container-type: size; }
  .clip-window { --chrome: 44px; display: grid; grid-template-rows: var(--chrome) minmax(0, 1fr); width: min(88%, calc((88cqh - var(--chrome)) * var(--ratio))); overflow: hidden; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper-light); box-shadow: 0 30px 60px -38px rgba(42, 38, 34, .45); }
  .clip-window__chrome { display: grid; grid-template-columns: repeat(3, 10px) 1fr; align-items: center; gap: 7px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #dedbd2; }
  .clip-window__chrome span { width: 10px; height: 10px; border-radius: 50%; background: #aaa79f; }
  .clip-window__chrome i { justify-self: center; padding: 5px 14px; border-radius: 4px; background: var(--paper); color: var(--muted); font-family: var(--mono); font-size: 12px; font-style: normal; letter-spacing: .04em; }
  .clip-window__viewport { aspect-ratio: var(--ratio); overflow: hidden; }
  .clip-window__video { display: block; width: 100%; aspect-ratio: var(--ratio); object-fit: cover; background: #fff; pointer-events: none; }
  .clip-window__empty { width: 100%; aspect-ratio: var(--ratio); background: #292824; }

  /* The screen is real browser chrome; the keyboard and operator are clay. */
  .slide-grid--laptop { grid-template-columns: minmax(0, .37fr) minmax(0, .63fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 0; }
  .slide-grid--laptop .focus-heading { grid-column: 1; grid-row: 1; position: relative; z-index: 1; align-self: center; max-width: 95%; }
  .slide-grid--laptop .focus-heading h1 { font-size: clamp(40px, 4.6vw, 72px); }
  /* Fit against the full slide, then right-align the .6-scale scene without shrinking it twice. */
  .laptop-scene { grid-column: 1 / -1; grid-row: 1; cursor: default; }
  .laptop-scene .clay-stage { --scene-scale: calc(var(--fit, 1) * .6); scale: var(--scene-scale); left: calc(100% - 640px * var(--scene-scale)); bottom: calc((100% - 620px * var(--scene-scale)) / 2); }
  /* The keyboard widens toward us: its back edge is 80% of the PNG width. */
  .laptop-device { --lid-width: 800px; --deck-height: 150px; --hinge-line: 140px; --bezel: 12px; --lid-radius: 24px; --glass-radius: calc(var(--lid-radius) - var(--bezel)); position: absolute; left: 240px; bottom: 0; width: 1000px; height: 620px; }
  .laptop-screen { position: absolute; left: 50%; bottom: var(--hinge-line); z-index: 1; translate: -50% 0; width: var(--lid-width); padding: var(--bezel) var(--bezel) 20px; border: 1px solid #baaf96; border-radius: var(--lid-radius); background: linear-gradient(100deg, #dfd6c0, #eee5d0 50%, #ddd1b8); box-shadow: inset 0 2px 3px #f7f2e6; }
  .laptop-screen .clip-window { width: 100%; border-radius: var(--glass-radius); box-shadow: none; }
  .laptop-screen .clip-window__chrome i { justify-self: stretch; min-width: 0; font-size: 15px; text-align: left; }
  .laptop-hinge { position: absolute; left: 50%; bottom: calc(var(--hinge-line) - 5px); z-index: 2; translate: -50% 0; width: calc(var(--lid-width) - 18px); height: 16px; border: 1px solid #b6ab92; border-radius: 7px; background: #cfc2a7; box-shadow: inset 0 3px 3px #eee3c9, inset 0 -3px 3px #ada087; }
  .laptop-scene .laptop-base { position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: var(--deck-height); }
  .laptop-scene .laptop-browser { position: absolute; left: 25px; bottom: 8px; z-index: 3; height: 280px; width: auto; }
  .laptop-scene .laptop-browser .laptop-browser__still { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .laptop-scene .laptop-browser .clay-puppet-video { display: none; }
    .laptop-scene .laptop-browser .laptop-browser__still { display: block; }
  }
  .laptop-screen .clip-window__viewport { border-radius: 0 0 calc(var(--glass-radius) - 1px) calc(var(--glass-radius) - 1px); background: #292824; }
  /* Hide the capture's thin window rim; the glass aperture owns the corners. */
  .laptop-screen .clip-window__video { width: calc(100% + 6px); max-width: none; margin-inline: -3px; object-fit: cover; background: #292824; }

  .slide-grid--hydrate { grid-template-columns: minmax(300px, .62fr) minmax(580px, 1.38fr); align-items: stretch; gap: clamp(38px, 5vw, 84px); }
  .slide-grid--hydrate .focus-heading { align-self: center; }
  .slide-grid--hydrate .focus-heading h1 { font-size: clamp(58px, 6.2vw, 96px); }
  .hydration-scene { display: grid; min-height: 0; margin: 0; place-items: center; container-type: size; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .hydration-frame { width: min(100%, 760px, calc(100cqh * 1.333)); aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-light); box-shadow: 0 30px 60px -38px rgba(42, 38, 34, .45); }
  .hydration-frame__chrome { display: grid; grid-template-columns: repeat(3, 10px) 1fr; align-items: center; gap: 7px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #dedbd2; }
  .hydration-frame__chrome span { width: 10px; height: 10px; border-radius: 50%; background: #aaa79f; }
  .hydration-frame__chrome strong { justify-self: end; padding: 7px 11px; background: var(--ink); color: var(--paper-light); font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; animation: clay-tag-in 360ms cubic-bezier(.22, 1.2, .36, 1) both; }
  .hydration-frame__page { display: grid; height: calc(100% - 52px); place-items: center; }
  .hydration-frame__page .mini-page { scale: 1.12; }
  .clay-scene img { display: block; width: auto; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 16px 12px rgba(60, 45, 20, .18)); }

  /* Generated stop-motion puppet loops (Kling v3), replacing a static puppet <img> with an ambient
     looping <video> (clay-puppet-video.tsx). --pw/--ph/--px/--py describe the STILL's bounding box in
     the 1280x720 generation canvas — that sizes the outer wrapper, which must stay exactly the box the
     replaced <img height="…"> occupied (other puppets/props are positioned relative to it). --ew/--eh/
     --ex/--ey describe the *motion envelope* — the union bounding box of every frame of the clip — which
     is reliably bigger than the still pose for a run/breath cycle. The inner __frame element is sized
     and positioned from the envelope, not the wrapper, and the wrapper is `overflow: visible` so a
     stride or breath that reaches past the still's silhouette is never clipped by our own mount (see
     generation-manifest.md "Motion-envelope mask fix"). --mask is a feathered union-silhouette PNG (real
     alpha, built from the same envelope) — without it the video's opaque rectangle would make the
     drop-shadow below cast a visible "card" edge instead of a per-character contact shadow. The __frame
     paints its own paper so the video's white margins multiply away (the stage's `scale` transform
     isolates blending, same reasoning as `.is-toppled .clay-stage` below). */
  .clay-scene .clay-puppet-video { position: relative; display: block; overflow: visible; pointer-events: none; }
  .clay-puppet-video__frame {
    position: absolute; display: block; overflow: hidden; background: var(--paper);
    filter: drop-shadow(0 16px 12px rgba(60, 45, 20, .18));
    left: calc((var(--ex) - var(--px)) / var(--pw) * 100%);
    top: calc((var(--ey) - var(--py)) / var(--ph) * 100%);
    width: calc(var(--ew) / var(--pw) * 100%);
    height: calc(var(--eh) / var(--ph) * 100%);
    mask-image: var(--mask); mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center;
    -webkit-mask-image: var(--mask); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  }
  .clay-puppet-video__frame video { position: absolute; display: block; max-width: none; width: calc(1280 / var(--ew) * 100%); height: calc(720 / var(--eh) * 100%); left: calc(var(--ex) / var(--ew) * -100%); top: calc(var(--ey) / var(--eh) * -100%); mix-blend-mode: multiply; clip-path: inset(3px); }

  /* Fixed-size stage (matches the captured video frames) scaled to fit the figure. */
  /* The stage paints its own paper so the multiplied video has something to blend into (scale isolates it). */
  .clay-stage { position: absolute; left: 50%; bottom: 0; width: 1280px; height: 720px; transform-origin: 50% 100%; translate: -50% 0; scale: var(--fit, 1); }
  .is-toppled .clay-stage { background: var(--paper); }
  .clay-actor { position: absolute; bottom: 110px; display: grid; justify-items: center; }
  .clay-actor--server { left: 70%; grid-template-columns: auto auto; align-items: end; }
  .clay-actor--server .clay-tablet { translate: 40px 0; rotate: -4deg; }
  .clay-actor--browser { left: 44%; }
  .clay-browser { position: relative; z-index: 2; transform-origin: 50% 100%; transition: scale 260ms cubic-bezier(.3, 1.4, .5, 1); }
  .is-strain .clay-browser { scale: 1.04 .96; }

  .clay-stack {
    position: absolute; left: 50%; z-index: 1;
    width: 0; height: 0;
    transform-origin: 50% 100%;
    rotate: var(--lean, 0deg);
    transition: rotate 420ms cubic-bezier(.34, 1.56, .64, 1), bottom 260ms ease;
  }
  .clay-sway { position: absolute; bottom: 0; left: 0; width: 0; height: 0; transform-origin: 50% 100%; animation: clay-sway calc(2.4s - var(--count, 0) * .22s) ease-in-out infinite alternate; }
  .clay-scene[style*="--count: 0"] .clay-sway { animation: none; }
  .clay-part {
    position: absolute; left: 50%;
    translate: calc(-50% + var(--x, 0px)) 0;
    rotate: var(--r, 0deg);
    transform-origin: 50% 100%;
    animation: clay-drop 520ms cubic-bezier(.22, 1.2, .36, 1) both;
  }
  .clay-tag {
    position: absolute; left: 22%; top: 42%;
    padding: 8px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light);
    font-family: var(--mono); font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .08em; text-transform: uppercase;
    animation: clay-tag-in 360ms cubic-bezier(.22, 1.2, .36, 1) both;
  }

  /* The 2012 yellow website, lovingly ugly */
  /* The window is sized so its 16:9 page never crops: as wide as the column allows, or as tall as the row allows minus the chrome bar. */
  .yellow-scene { --chrome: 43px; display: grid; place-items: center; min-height: 0; container-type: size; }
  .yellow-site { position: relative; width: min(100%, 920px, calc((100cqh - var(--chrome)) * 16 / 9)); margin: 0; overflow: hidden; border: 1px solid #8a8a8a; background: #fff; box-shadow: 0 24px 40px -20px rgba(60, 45, 20, .35); color: #000; cursor: pointer; }
  .yellow-site__chrome { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #d9d9d9; border-bottom: 1px solid #8a8a8a; }
  .yellow-site__chrome span { width: 11px; height: 11px; border-radius: 50%; background: #b5b5b5; }
  .yellow-site__chrome i { margin-left: 10px; flex: 1; padding: 3px 8px; border: 1px inset #999; background: #fff; color: #333; font: 13px/1.4 Verdana, Geneva, sans-serif; }
  .yellow-site__page { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: lightgoldenrodyellow; }
  .yellow-site__video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

  /* Cast card: one staggered introduction per arrival, then retain every label. */
  .cast-scene { cursor: default; }
  .cast-scene :is(.clay-tag, .clay-prop, .clay-callout-arrow, .clay-callout-head) { animation-name: none; }
  .talk-slide:not([hidden]) .cast-scene .clay-tag { animation-name: clay-tag-in; animation-delay: var(--cast-delay); }
  .talk-slide:not([hidden]) .cast-scene .clay-prop { animation-name: clay-prop-in; animation-delay: var(--cast-delay); }
  .talk-slide:not([hidden]) .cast-scene .clay-callout-arrow { animation-name: clay-draw; animation-delay: calc(var(--cast-delay) + 120ms); }
  .talk-slide:not([hidden]) .cast-scene .clay-callout-head { animation-name: clay-head-in; animation-delay: calc(var(--cast-delay) + 480ms); }
  .clay-actor--cast-browser { left: 26%; bottom: 110px; }
  .clay-actor--cast-server { left: 62%; bottom: 110px; }
  .clay-actor--cast-html { left: 80%; bottom: 110px; }
  .clay-actor--cast-js { left: 22%; bottom: 110px; }
  .clay-prop { rotate: var(--r, 0deg); transform-origin: 50% 100%; animation: clay-prop-in 560ms cubic-bezier(.22, 1.2, .36, 1) both; }
  @keyframes clay-prop-in {
    0% { translate: 0 -360px; rotate: calc(var(--r, 0deg) - 30deg); opacity: 0; }
    55% { translate: 0 0; rotate: var(--r, 0deg); opacity: 1; scale: 1.06 .9; }
    75% { scale: .97 1.04; }
    100% { scale: 1; }
  }
  .clay-callouts { position: absolute; inset: 0; width: 1280px; height: 720px; overflow: visible; pointer-events: none; }
  .clay-tag--input { font-size: 15px; white-space: nowrap; transform: translateX(-50%); } /* transform, not translate: the clay-tag-in keyframes own translate */
  .clay-callout-arrow { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: clay-draw 420ms cubic-bezier(.4, 0, .2, 1) 120ms forwards; } /* paths set pathLength="1" so every line takes the full 420ms; the 2-long gap keeps a round cap from blipping at the tip on frame one */
  .clay-callout-head { fill: var(--ink); opacity: 0; animation: clay-head-in 120ms ease-out forwards; animation-delay: 760ms; } /* pipeline: last line starts at 120 + 5×60, ends 420ms later */
  .clay-callout-head--single { animation-delay: 480ms; }
  @keyframes clay-head-in { to { opacity: 1; } }
  .clay-tag--callout { left: auto; top: auto; font-size: 20px; white-space: nowrap; }
  @keyframes clay-draw { to { stroke-dashoffset: 0; } }

  /* Shared bits for the small scenes */
  .clay-tag--under { position: static; margin-top: 14px; justify-self: center; font-size: 15px; animation: clay-tag-in 360ms cubic-bezier(.22, 1.2, .36, 1) 260ms both; }
  .clay-tag--accent { background: var(--accent); border-color: var(--accent); }
  .clay-tag--muted { background: var(--paper-light); color: var(--muted); border-color: var(--line); }
  .clay-tag--muted s { color: var(--ink); }
  .clay-strike { position: relative; color: var(--ink); }
  .clay-strike::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 3px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; }
  .clay-strike.is-struck { color: var(--muted); transition: color 200ms 200ms; }
  .clay-strike.is-struck::after { animation: clay-strike 380ms cubic-bezier(.3, .9, .3, 1) forwards; }
  @keyframes clay-strike { to { transform: scaleX(1); } }
  .clay-actor--pop { animation: clay-tag-in 420ms cubic-bezier(.22, 1.2, .36, 1) both; }
  .clay-tag--code { text-transform: none; letter-spacing: 0; }

  /* One shared sign-up counter. The orange gear owns only the modal shell. */
  .signup-counter { cursor: default; }
  .signup-counter .clay-stage { --scene-scale: calc(var(--fit, 1) * .9); scale: var(--scene-scale); bottom: calc((100% - 620px * var(--scene-scale)) / 2); background: var(--paper); }
  .signup-counter .signup-counter__motion, .signup-counter .signup-counter__still { position: absolute; inset: 0; width: 1280px; height: 720px; mix-blend-mode: multiply; clip-path: inset(3px); filter: none; }
  .signup-counter .signup-counter__still { display: none; }

  /* Slide 34: one client entry inside a page of finished HTML. */
  .entry-page { display: block; transform-origin: 0 100%; scale: var(--scale, 1); }
  /* The span only positions (centred on the block); the img pops in, then spins in place on handle.update(). */
  .entry-gear { position: absolute; translate: -50% -50%; display: block; }
  .entry-gear img { display: block; transform-origin: 50% 50%; animation: clay-tag-in 420ms cubic-bezier(.22, 1.2, .36, 1) both; }
  .entry-gear.is-spinning img { animation: clay-rerender-spin 900ms cubic-bezier(.3, 0, .2, 1) both; }
  .is-updating .mini-page__block.is-entry { animation: clay-rerender 900ms ease-out both; }
  .clay-actor--wide-tag .clay-tag--under { white-space: nowrap; }

  /* Phone */
  .clay-phone { transform-origin: 50% 90%; }
  .is-ringing .clay-phone { animation: clay-ring 1.4s ease-in-out infinite; }
  @keyframes clay-ring { 0%, 55%, 100% { rotate: 0deg; translate: 0 0; } 60% { rotate: -3deg; translate: -4px -6px; } 68% { rotate: 3deg; translate: 4px -8px; } 76% { rotate: -2.5deg; translate: -3px -5px; } 84% { rotate: 2deg; translate: 3px -6px; } 92% { rotate: -1deg; translate: 0 -2px; } }

  /* Vacation: the conclusion, as a generated stop-motion loop on paper */
  /* The figure paints its own paper: the slide's enter animation isolates blending. */
  .clay-still--question, .clay-still--vacation, .clay-still--love-letter, .clay-still--excel-purgatory, .clay-still--studio-range, .clay-still--budget-tray, .clay-still--scene-lifecycle, .clay-still--device-tiers, .clay-still--react-compiler, .clay-still--server-components, .clay-still--ownership-choice, .clay-still--boring-tv, .clay-still--frame-window, .clay-still--signup-form, .clay-still--boring-work { overflow: hidden; background: var(--paper); }
  .clay-still__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; clip-path: inset(3px); }

  /* Video size fix — the clip is a 1280x720 white canvas with the character scaled onto it (skill's
     `scale=-1:620` recipe, centered, +Ny; scene-lifecycle used a width-fit `scale=1200:-2`, +10y
     instead — see --fit-ratio/--y-shift below). Plain object-fit:contain on the whole 16:9 clip
     shrinks the character vs. the plain <img> (which contains-fits its own tighter, non-16:9 aspect
     ratio). Size the <video> element itself so the character band inside the clip renders at exactly
     the height/position the <img> would have used, per still: height = (the img's own contain-box
     height, computed the same way as .clay-tv__plate/.clay-still__layers via cq units and the still's
     real aspect ratio) * fit-ratio (720 / the clip's character-band height); shifted up by the clip's
     y-offset scaled to the rendered size. See generation-manifest.md "Video size fix" for the derivation
     and the source pixel dimensions behind each --still-ar. `question` is excluded: it's a 9:16 clip
     supplied whole (no white-canvas compositing), so the base full-bleed rule above already fits it. */
  .clay-still--love-letter { --still-ar: 1.39803; }
  .clay-still--excel-purgatory { --still-ar: 1.31838; }
  .clay-still--studio-range { --still-ar: 1.60481; }
  .clay-still--budget-tray { --still-ar: 1.32432; }
  .clay-still--scene-lifecycle { --still-ar: 3.36842; --fit-ratio: 2.02105; --y-shift: 1.38889%; }
  .clay-still--device-tiers { --still-ar: 1.94737; }
  .clay-still--react-compiler { --still-ar: 1.22477; }
  .clay-still--server-components { --still-ar: 1.49117; }
  .clay-still--vacation { --still-ar: 1.75391; }
  .clay-still--ownership-choice { --still-ar: 1.75318; }
  .clay-still--boring-tv { --still-ar: 1.30290; }
  .clay-still--frame-window { --still-ar: 1.46959; }
  .clay-still--signup-form { --still-ar: 1.63884; }
  .clay-still--boring-work { --still-ar: 1.602; --fit-ratio: 1.08; }
  /* Slide 12: smaller workers, bigger words. */
  .slide-grid--clay:has(.clay-still--boring-work) { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .slide-grid--clay:has(.clay-still--boring-work) .focus-heading h1 { font-size: clamp(56px, 6.8vw, 108px); }
  .slide-grid--clay:has(.clay-still--boring-work) .slide-sub { font-size: clamp(18px, 1.7vw, 27px); }

  .clay-still--love-letter .clay-still__video,
  .clay-still--excel-purgatory .clay-still__video,
  .clay-still--studio-range .clay-still__video,
  .clay-still--budget-tray .clay-still__video,
  .clay-still--scene-lifecycle .clay-still__video,
  .clay-still--device-tiers .clay-still__video,
  .clay-still--react-compiler .clay-still__video,
  .clay-still--server-components .clay-still__video,
  .clay-still--vacation .clay-still__video,
  .clay-still--ownership-choice .clay-still__video,
  .clay-still--boring-tv .owned-tv,
  .clay-still--frame-window .clay-still__video,
  .clay-still--signup-form .clay-still__video,
  .clay-still--boring-work .clay-still__video {
    inset: auto;
    left: 50%;
    top: 50%;
    width: auto;
    aspect-ratio: 16 / 9;
    height: min(calc(100cqh * var(--fit-ratio, 1.16129)), calc(100cqw / var(--still-ar) * var(--fit-ratio, 1.16129)));
    object-fit: fill;
    translate: -50% calc(-50% - var(--y-shift, 2.77778%));
  }

  /* Two questions */
  .is-owned.is-reducing .mini-page__block { transition-delay: calc(var(--i) * 90ms); }
  .is-owned.is-reducing .mini-page__block:not(:nth-child(2)):not(:nth-child(6)) { background: #e4d7b8; outline-color: transparent; }
  .is-owned.is-reducing .mini-page__block--nav:not(:nth-child(2)):not(:nth-child(6)), .is-owned.is-reducing .mini-page__block--footer:not(:nth-child(2)):not(:nth-child(6)), .is-owned.is-reducing .mini-page__block--button:not(:nth-child(2)):not(:nth-child(6)) { background: #2a2622; }
  .is-wired.is-reducing .mini-page__block:not(:nth-child(2)):not(:nth-child(6))::after { animation: clay-dot-out 240ms ease both; animation-delay: calc(var(--i) * 90ms); }
  @keyframes clay-dot-out { from { opacity: 1; } to { opacity: 0; } }
  .is-choosing .mini-page__block.is-entry { animation: clay-tag-in 360ms cubic-bezier(.22, 1.2, .36, 1) 700ms both; }

  /* Three owners */
  .owners-column { width: 374px; }
  .owners-page { position: relative; width: 374px; height: 259px; }
  .owners-page .mini-page { transform-origin: 0 0; scale: .72; }
  .is-tv .mini-page__block--image { background: #d9581f; outline: 3px solid var(--accent); outline-offset: 4px; }
  .is-tv .mini-page__block--image::after { content: ""; position: absolute; top: -7px; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); }
  .owners-scenes { position: absolute; left: 65px; top: 40px; display: grid; width: 244px; gap: 10px; }
  .owners-scenes i { position: relative; display: block; height: 48px; border-radius: 6px; background: #e4d7b8; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), 0 0 0 5px var(--paper); }
  .owners-scenes i:last-child { border: 2px solid #cfc2a4; background: repeating-linear-gradient(45deg, #ddd2b9 0 8px, #e8dfcc 8px 16px); }
  .owners-scenes i:first-child { outline: 3px dashed var(--ink); outline-offset: 5px; }
  .owners-scenes b { position: absolute; top: -8px; left: -14px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); }
  .owners-form { position: absolute; left: 98px; top: 103px; display: flex; gap: 8px; }
  .owners-form i { width: 110px; height: 26px; border: 2px solid #2a2622; border-radius: 4px; background: var(--paper-light); }
  .owners-form b { width: 56px; height: 26px; border-radius: 4px; background: #2a2622; }
  .owners-puppet { position: absolute; right: -28px; bottom: 50px; }
  .owners-puppet { filter: drop-shadow(0 12px 10px rgba(60, 45, 20, .18)); }

  /* One shared stage: prepare a whole set on hover, then hand it the live scene. */
  .slide-grid--lifecycle .focus-heading h1 { max-width: none; font-size: clamp(48px, 5.3vw, 80px); }
  .lifecycle-scene { cursor: default; }
  .lifecycle-scene .clay-stage { --scene-scale: calc(var(--fit, 1) * .95); scale: var(--scene-scale); bottom: calc((100% - 600px * var(--scene-scale)) / 2); }
  .lifecycle-scene .lifecycle-stage { position: absolute; left: 80px; bottom: 90px; width: 960px; height: auto; filter: drop-shadow(0 9px 8px rgb(43 34 22 / .13)); }
  .lifecycle-scene .lifecycle-stage--front { z-index: 3; filter: none; pointer-events: none; }
  .lifecycle-worlds { position: absolute; z-index: 2; left: 90px; top: 195px; width: 970px; height: 400px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .lifecycle-track { position: absolute; inset: 0; }
  .lifecycle-set { position: absolute; left: 162px; bottom: 60px; width: 254px; height: 340px; }
  .lifecycle-set--peaks { left: 642px; opacity: 0; translate: 0 14px; filter: brightness(.82); }
  .lifecycle-scene .lifecycle-scenery { position: absolute; bottom: 0; left: 0; width: 254px; height: auto; filter: drop-shadow(0 8px 4px rgb(0 0 0 / .22)); }
  .lifecycle-scene .lifecycle-orbit { position: absolute; left: 150px; top: 60px; width: 42px; height: 44px; filter: drop-shadow(0 5px 3px rgb(0 0 0 / .15)); }
  .lifecycle-scene:is([data-phase="hover"], [data-phase="ready"]) .lifecycle-set--peaks { opacity: 1; translate: 0 0; }
  .lifecycle-scene:is([data-phase="travel"], [data-phase="arrived"]) .lifecycle-set--peaks { opacity: 1; translate: 0 0; filter: brightness(1); }
  .lifecycle-scene:is([data-phase="travel"], [data-phase="arrived"]) .lifecycle-track { translate: -480px 0; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running .lifecycle-track { transition: translate 1500ms cubic-bezier(.65, 0, .35, 1); }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running .lifecycle-set--peaks { transition: opacity 650ms ease, translate 650ms ease, filter 650ms ease; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running .lifecycle-orbit { animation: lifecycle-orbit 3600ms ease-in-out infinite; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running .lifecycle-set--peaks .lifecycle-orbit { animation-duration: 4600ms; animation-play-state: paused; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running[data-phase="arrived"] .lifecycle-set--grove .lifecycle-orbit { animation-play-state: paused; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running[data-phase="arrived"] .lifecycle-set--peaks .lifecycle-orbit { animation-play-state: running; }
  @keyframes lifecycle-orbit { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 18px -14px; rotate: 9deg; } }
  .lifecycle-nav { position: absolute; z-index: 5; left: 735px; top: 170px; display: flex; gap: 18px; }
  .lifecycle-destination { position: relative; display: grid; place-items: center; width: 76px; height: 70px; border-radius: 20px 18px 21px 17px; background: #302e29; box-shadow: inset 0 3px 2px rgb(255 255 255 / .12), 0 5px 5px rgb(0 0 0 / .12); }
  .lifecycle-nav .lifecycle-destination img { width: 46px; height: 48px; object-fit: contain; filter: none; }
  .lifecycle-destination::after { content: ''; position: absolute; left: 34px; bottom: -15px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0; }
  .lifecycle-destination--grove::after { opacity: 1; }
  .lifecycle-scene[data-phase="arrived"] .lifecycle-destination--grove::after { opacity: 0; }
  .lifecycle-scene[data-phase="arrived"] .lifecycle-destination--peaks::after { opacity: 1; }
  .lifecycle-scene:is([data-phase="hover"], [data-phase="ready"], [data-phase="travel"]) .lifecycle-destination--peaks { outline: 3px solid #e98028; outline-offset: 4px; }
  .lifecycle-cursor { position: absolute; left: 122px; top: 53px; width: 40px; height: 48px; opacity: 0; pointer-events: none; }
  .lifecycle-cursor i { position: absolute; left: -7px; top: -8px; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; opacity: 0; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running:is([data-phase="hover"], [data-phase="ready"], [data-phase="travel"], [data-phase="arrived"]) .lifecycle-cursor { animation: lifecycle-intent 650ms ease-out both; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running[data-phase="travel"] .lifecycle-cursor i { animation: lifecycle-click 500ms ease-out both; }
  @keyframes lifecycle-intent { from { opacity: 0; translate: 35px 28px; } to { opacity: 1; translate: 0 0; } }
  @keyframes lifecycle-click { from { opacity: 1; scale: .5; } to { opacity: 0; scale: 1.8; } }
  .lifecycle-manager { position: absolute; z-index: 4; left: 990px; bottom: 90px; height: 280px; aspect-ratio: 340 / 360; overflow: hidden; filter: drop-shadow(0 8px 5px rgb(43 34 22 / .16)); }
  .lifecycle-scene .lifecycle-manager__sprite { display: block; width: 500%; height: 1000%; max-width: none; filter: none; }
  .talk-slide:not([hidden]) .lifecycle-scene.is-running:is([data-phase="hover"], [data-phase="ready"], [data-phase="travel"], [data-phase="arrived"]) .lifecycle-manager__sprite { animation: lifecycle-manager-x 500ms steps(5) 10, lifecycle-manager-y 5s steps(10) 1; }
  @keyframes lifecycle-manager-x { to { translate: -100% 0; } }
  @keyframes lifecycle-manager-y { to { transform: translateY(-100%); } }

  /* Shared physical staging: one small fitting gesture, with independent brief blinks. */
  .slide-grid--frame-document .focus-heading h1 { font-size: clamp(48px, 5.3vw, 80px); }
  .frame-document { cursor: default; }
  .frame-document .clay-stage { --scene-scale: calc(var(--fit, 1) * .85); scale: var(--scene-scale); bottom: calc((100% - 640px * var(--scene-scale)) / 2); background: var(--paper); }
  .frame-document .frame-document__motion, .frame-document .frame-document__still { position: absolute; inset: 0; width: 1280px; height: 720px; mix-blend-mode: multiply; clip-path: inset(3px); filter: none; }
  .frame-document .frame-document__still { display: none; }

  /* A single reading scene. All folds are already present; nothing arrives on a reveal. */
  .slide-grid--reading-page .focus-heading h1 { font-size: clamp(48px, 5.3vw, 80px); }
  .reading-page { cursor: default; }
  .reading-page .clay-stage { --scene-scale: calc(var(--fit, 1) * .85); scale: var(--scene-scale); bottom: calc((100% - 520px * var(--scene-scale)) / 2); background: var(--paper); }
  .reading-page .reading-page__motion, .reading-page .reading-page__still { position: absolute; inset: 0; width: 1280px; height: 720px; mix-blend-mode: multiply; clip-path: inset(3px); filter: none; }
  .reading-page .reading-page__still { display: none; }
  /* One large poster-to-scene handoff, then the next. Only the entry is orange. */
  .slide-grid--lazy-demo .focus-heading h1 { max-width: none; font-size: clamp(48px, 5.3vw, 80px); }
  .lazy-scene { cursor: default; }
  .lazy-scene .clay-stage { --scene-scale: calc(var(--fit, 1) * .9); scale: var(--scene-scale); bottom: calc((100% - 620px * var(--scene-scale)) / 2); visibility: hidden; }
  .lazy-scene[data-ready] .clay-stage { visibility: visible; }
  .lazy-browser { position: absolute; z-index: 2; left: 430px; top: 130px; width: 720px; height: 544px; overflow: hidden; border: 1px solid #bdb3a0; border-radius: 22px; background: #f2eee4; box-shadow: 0 8px 0 #c9bda5, 0 18px 24px rgb(53 43 29 / .14); }
  .lazy-chrome { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 18px; border-bottom: 1px solid #d7cdbb; background: #e9e0cf; }
  .lazy-chrome i { width: 7px; height: 7px; border-radius: 50%; background: #a89c87; }
  .lazy-chrome span { width: 270px; height: 16px; margin-left: 110px; border-radius: 7px; background: #f2ede2; }
  .lazy-viewport { position: absolute; inset: 44px 0 0; overflow: hidden; }
  .lazy-page { position: absolute; left: 22px; top: 20px; display: grid; gap: 28px; padding-bottom: 116px; translate: 0 0; }
  .lazy-row { position: relative; width: 672px; height: 378px; overflow: hidden; border-radius: 5px; background: #2b2924; opacity: .32; transition: opacity 650ms ease; }
  .lazy-row[data-state="poster"] { transition: none; }
  .lazy-row[data-state="live"] { opacity: 1; }
  .lazy-content { position: absolute; inset: 0; }
  .lazy-scene .lazy-ground, .lazy-scene .lazy-poster { position: absolute; inset: 0; width: 672px; height: 378px; max-width: none; filter: none; }
  .lazy-poster { z-index: 2; opacity: 1; }
  .lazy-scene .lazy-scenery, .lazy-scene .lazy-sun { position: absolute; max-width: none; filter: none; }
  .lazy-row--grove .lazy-scenery { left: 138px; top: 57px; width: 270px; height: 303px; }
  .lazy-row--grove .lazy-sun { left: 457px; top: 66px; width: 84px; height: 88px; }
  .lazy-row--peaks .lazy-scenery { left: 116px; top: 43px; width: 440px; height: 317px; }
  .lazy-row--peaks .lazy-sun { left: 482px; top: 46px; width: 76px; height: 79px; }
  .lazy-row:not([data-state="poster"]) .lazy-sun { animation: lazy-sun 4600ms ease-in-out infinite both; animation-play-state: paused; }
  .lazy-row--peaks:not([data-state="poster"]) .lazy-sun { animation-name: lazy-moon; animation-duration: 5800ms; }
  .lazy-row[data-state="live"][data-decoded] .lazy-poster { opacity: 0; transition: opacity 650ms ease; }
  .talk-slide:not([hidden]) .lazy-row[data-state="live"][data-decoded] .lazy-sun { animation-play-state: running; animation-delay: 650ms; }
  .lazy-scene[data-still] .lazy-page { transition: none !important; }
  .lazy-scene[data-still] :is(.lazy-row, .lazy-poster) { transition: none !important; }
  .lazy-supplier { position: absolute; z-index: 1; left: 80px; bottom: 115px; width: 315px; height: 298.6px; filter: drop-shadow(0 7px 5px rgb(43 34 22 / .12)); }
  .lazy-supplier__idle { width: 100%; height: 100%; overflow: hidden; }
  .lazy-scene .lazy-supplier__face { display: block; width: 100%; height: 300%; max-width: none; filter: none; }
  .talk-slide:not([hidden]) .lazy-supplier__face { animation: tradeoff-blink 11.8s steps(1, end) infinite; }
  .lazy-supplier__gesture { position: absolute; left: -8.957px; top: -8.957px; width: 348.839px; height: 316.493px; overflow: hidden; visibility: hidden; }
  .lazy-scene .lazy-supplier__sprite { display: block; width: 500%; height: 1000%; max-width: none; filter: none; }
  .lazy-scene[data-gesture] .lazy-supplier__idle { visibility: hidden; }
  .lazy-scene[data-gesture] .lazy-supplier__face { animation: none; }
  .lazy-scene[data-gesture] .lazy-supplier__gesture { visibility: visible; }
  .talk-slide:not([hidden]) .lazy-scene[data-gesture] .lazy-supplier__sprite { animation: server-ready-x 250ms steps(5) 10, server-ready-y 2500ms steps(10) 1; }
  @keyframes server-ready-x { to { translate: -100% 0; } }
  @keyframes server-ready-y { to { transform: translateY(-100%); } }
  .lazy-scene .lazy-entry { position: absolute; z-index: 3; left: 350px; top: 209px; width: 68px; height: auto; rotate: -8deg; filter: drop-shadow(0 4px 3px rgb(43 34 22 / .13)); }
  .talk-slide:not([hidden]) .lazy-scene[data-asking] .lazy-entry { animation: lazy-request 900ms ease both; }
  .lazy-scene[data-still] .lazy-sun { animation-delay: 0s !important; }
  @keyframes lazy-request { from { rotate: -8deg; } to { rotate: 352deg; } }
  @keyframes lazy-sun { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 42px 22px; rotate: 18deg; } }
  @keyframes lazy-moon { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -82px -18px; rotate: -22deg; } }

  /* Quiet accumulation: three cream pieces arrive once, then stay. */
  .slide-grid--tradeoff .focus-heading { padding-top: clamp(28px, 5vh, 48px); }
  .slide-grid--tradeoff .focus-heading h1 { max-width: none; font-size: clamp(52px, 6vw, 94px); }
  .tradeoff-scene { cursor: default; }
  .tradeoff-scene .clay-stage { --scene-scale: calc(var(--fit, 1) * .6); scale: var(--scene-scale); bottom: calc((100% - 500px * var(--scene-scale)) / 2); background: var(--paper); }
  .tradeoff-scene .tradeoff-puppet { position: absolute; display: block; overflow: hidden; transform-origin: 50% 100%; }
  .tradeoff-server { left: 146.7px; bottom: 76.7px; width: 407.82px; height: 386.59px; --idle-duration: 9.6s; --idle-delay: 0s; --idle-direction: 1; --blink-duration: 13.4s; --blink-delay: 0s; }
  .tradeoff-browser { left: 783.58px; bottom: 75.59px; width: 348.6px; height: 341.9px; --idle-duration: 8.1s; --idle-delay: -2.2s; --idle-direction: -1; --blink-duration: 11.8s; --blink-delay: -1.65s; }
  /* Three pixel-aligned poses: open / half-closed / closed. No drawn-on white eyes. */
  .tradeoff-scene .tradeoff-face { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 300%; max-width: none; filter: none; translate: 0 0; }
  .tradeoff-scene .tradeoff-piece { position: absolute; width: 142px; height: auto; z-index: var(--end-order); filter: drop-shadow(0 2px 1px rgba(53, 43, 29, .12)); }
  /* Hidden slides retain their DOM. Removing the animation on exit gives re-entry
     a fresh sequence, without ever replaying it while this slide stays visible. */
  .talk-slide:not([hidden]) .tradeoff-piece { animation: tradeoff-arrive 1.8s cubic-bezier(.4, 0, .25, 1) var(--delay) both; }
  .talk-slide:not([hidden]) .tradeoff-puppet { animation: tradeoff-idle var(--idle-duration) steps(18) var(--idle-delay) infinite; }
  .talk-slide:not([hidden]) .tradeoff-face { animation: tradeoff-blink var(--blink-duration) steps(1, end) var(--blink-delay) infinite; }
  @keyframes tradeoff-arrive {
    0% { translate: var(--from-x) var(--from-y); z-index: var(--start-order); }
    1% { z-index: 10; }
    18% { translate: var(--from-x) var(--lift-y); }
    82% { translate: 0 -6px; }
    99% { z-index: 10; }
    100% { translate: 0 0; z-index: var(--end-order); }
  }
  @keyframes tradeoff-idle {
    0%, 100% { rotate: 0deg; scale: 1 1; }
    24% { rotate: calc(-.45deg * var(--idle-direction)); scale: 1 1.012; }
    49% { rotate: calc(.12deg * var(--idle-direction)); scale: 1 1.002; }
    72% { rotate: calc(.45deg * var(--idle-direction)); scale: 1 1.008; }
    90% { rotate: 0deg; scale: 1 1.003; }
  }
  @keyframes tradeoff-blink {
    0%, 24%, 26%, 65%, 67%, 100% { translate: 0 0; }
    24.5%, 25.5%, 65.5%, 66.5% { translate: 0 -33.333333%; }
    25%, 66% { translate: 0 -66.666667%; }
  }
  .owners-column .clay-tag--under { font-size: 13px; }

  /* Mini page: HTML as clay-coloured blocks */
  .mini-page { position: relative; width: 520px; height: 360px; }
  .mini-page__block { position: absolute; display: block; border-radius: 4px; background: #e4d7b8; box-shadow: inset 0 -2px 0 rgba(0,0,0,.06); transition: background 320ms ease, outline-color 320ms ease, box-shadow 320ms ease; }
  .mini-page__block--nav, .mini-page__block--footer { background: #2a2622; }
  .mini-page__block--image { background: #cfc2a4; }
  .mini-page__block--button { background: #2a2622; border-radius: 6px; }
  .is-outlined .mini-page__block { outline: 2px dashed var(--ink); outline-offset: 3px; }
  .is-wired .mini-page__block::after { content: ""; position: absolute; top: -7px; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); animation: clay-tag-in 300ms cubic-bezier(.22, 1.2, .36, 1) both; animation-delay: calc(var(--i) * 60ms); }
  .is-owned .mini-page__block { outline-color: var(--accent); background: #f0a67a; }
  .is-owned .mini-page__block--nav, .is-owned .mini-page__block--footer, .is-owned .mini-page__block--button { background: #d9581f; }
  .is-html .mini-page__block.is-entry { outline: 3px solid var(--accent); outline-offset: 4px; }
  .is-html .mini-page__block.is-entry::after { content: ""; position: absolute; top: -7px; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); }

  /* Non-boring mode: blocks fall, TV lands */
  .is-crashing .mini-page__block { animation: clay-block-fall 700ms cubic-bezier(.5, 0, .9, .5) both; animation-delay: calc(var(--i) * 45ms); transform-origin: 50% 100%; }
  @keyframes clay-block-fall { 0% { translate: 0 0; rotate: 0deg; } 100% { translate: calc(var(--r) * 1.2) var(--drop); rotate: var(--r); } }
  .clay-actor--crash-tv { z-index: 3; animation: clay-tv-land 620ms cubic-bezier(.5, 0, .8, .6) 380ms both; }
  @keyframes clay-tv-land { 0% { translate: 0 -700px; rotate: -8deg; } 70% { translate: 0 0; rotate: 0deg; } 80% { translate: 0 -22px; scale: .98 1.03; } 100% { translate: 0 0; scale: 1; } }
  .is-crashed .clay-stage { animation: clay-shake 320ms ease 990ms both; }
  @keyframes clay-shake { 0%, 100% { translate: -50% 0; } 25% { translate: calc(-50% - 6px) 3px; } 50% { translate: calc(-50% + 5px) -2px; } 75% { translate: calc(-50% - 3px) 2px; } }

  /* Pipeline sprint */
  .clay-actor--sprint { z-index: 3; transition: left 520ms cubic-bezier(.34, 1.3, .64, 1); }
  .is-fanned .clay-actor--sprint { opacity: 0; transition: opacity 300ms ease; }

  /* One physical page; the orange boundary contracts without changing its contents. */
  .slide-grid--tv-boundary .focus-heading h1 { font-size: clamp(44px, 4.8vw, 72px); }
  .boundary-scene .boundary-page { position: absolute; left: 90px; top: 180px; width: 1100px; height: 500px; filter: drop-shadow(0 16px 12px rgba(60, 45, 20, .16)); }
  .boundary-browser { position: absolute; left: 665px; bottom: 70px; width: calc(230px * 298 / 360); height: 230px; overflow: hidden; filter: drop-shadow(0 12px 9px rgba(60, 45, 20, .18)); }
  /* Fifty alpha-matted frames: 5 columns × 10 rows, one quiet remote press per 5s. */
  .boundary-scene .boundary-browser__sprite { position: absolute; left: 0; top: 0; width: 500%; height: 1000%; max-width: none; filter: none; translate: 0 0; transform: translateY(0); }
  .talk-slide:not([hidden]) .boundary-browser__sprite { animation: boundary-remote-x 500ms steps(5) infinite, boundary-remote-y 5s steps(10) infinite; }
  @keyframes boundary-remote-x { to { translate: -100% 0; } }
  @keyframes boundary-remote-y { to { transform: translateY(-100%); } }
  .boundary-tv { position: absolute; left: 885px; top: 277px; width: calc(375px * 552 / 812); height: 375px; }
  .boundary-scene .boundary-tv > img { width: 100%; height: 100%; }
  /* Aperture inherited from slide 16's original plate, adjusted only for alpha trimming. */
  .boundary-tv .clay-tv__screen { left: 12.346377%; top: 36.64335%; width: 74.75942%; height: 42.624631%; border-radius: 5px; }
  .boundary-cord {
    position: absolute; z-index: 3; left: 50px; top: 155px; width: 1180px; height: 540px;
    border: 56px solid transparent;
    border-image: url('/images/clay/puppets/prop-ownership-cord.png') 140 / 1 stretch;
    filter: drop-shadow(0 6px 4px rgba(83, 44, 15, .23));
    pointer-events: none;
    transition: left 1400ms cubic-bezier(.65, 0, .35, 1), top 1400ms cubic-bezier(.65, 0, .35, 1), width 1400ms cubic-bezier(.65, 0, .35, 1), height 1400ms cubic-bezier(.65, 0, .35, 1);
  }
  .boundary-scene.is-focused .boundary-cord { left: 620px; top: 238px; width: 570px; height: 452px; }
  .talk-slide[hidden] .boundary-cord { transition: none; }

  /* Generated stop-motion clip, shot on white; multiply makes the white read as paper. */
  .clay-video { position: absolute; inset: 0; width: 1280px; height: 720px; display: block; mix-blend-mode: multiply; clip-path: inset(4px); visibility: hidden; }
  .clay-video.is-playing { visibility: visible; }

  @keyframes clay-drop {
    0% { translate: calc(-50% + var(--x, 0px)) -420px; rotate: calc(var(--r, 0deg) - 40deg); opacity: 0; }
    55% { translate: calc(-50% + var(--x, 0px)) 0; rotate: var(--r, 0deg); opacity: 1; scale: 1.08 .86; }
    75% { scale: .96 1.06; }
    100% { translate: calc(-50% + var(--x, 0px)) 0; scale: 1; }
  }
  @keyframes clay-rerender-spin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
  }
  @keyframes clay-rerender {
    0% { background: #cfc2a4; }
    25% { background: var(--accent); }
    100% { background: #cfc2a4; }
  }
  @keyframes clay-tag-in {
    from { opacity: 0; translate: 0 10px; scale: .92; }
    to { opacity: 1; translate: 0; scale: 1; }
  }
  @keyframes clay-sway {
    from { rotate: -1.6deg; }
    to { rotate: 1.6deg; }
  }
  @media (prefers-reduced-motion: reduce) {
    .clay-sway, .clay-part, .clay-tag { animation-duration: 1ms !important; transition: none !important; }
    .lazy-scene *, .lazy-scene ::after { animation: none !important; transition: none !important; }
    .lazy-scene .lazy-supplier__gesture { visibility: hidden; }
    .lazy-scene .lazy-supplier__idle { visibility: visible; }
    .tradeoff-piece, .tradeoff-puppet, .tradeoff-face { animation: none !important; }
    .owned-tv .owned-tv__motion { visibility: hidden; }
    .owned-tv .owned-tv__still { display: block; }
    .cast-scene * { animation: none !important; transition: none !important; }
    .cast-scene .clay-callout-arrow { stroke-dashoffset: 0; }
    .cast-scene .clay-callout-head { opacity: 1; }
    .boundary-cord { transition: none !important; }
    .boundary-browser__sprite { animation: none !important; }
    .frame-document__motion { visibility: hidden; }
    .frame-document .frame-document__still { display: block; }
    .signup-counter__motion { visibility: hidden; }
    .signup-counter .signup-counter__still { display: block; }
    .reading-page__motion { visibility: hidden; }
    .reading-page .reading-page__still { display: block; }
    .lifecycle-scene *, .lifecycle-scene *::after { animation: none !important; transition: none !important; }
    .lifecycle-scene .lifecycle-cursor { visibility: hidden; }
  }

  /* The URL is the source of truth: inputs wire into the address bar; the bar wires into the screen. */
  .url-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .url-wire { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 14 12; opacity: 0; }
  .url-wire.is-live { opacity: 1; animation: url-wire-flow 900ms linear infinite; }
  .url-wire--down { stroke: var(--ink); }
  @keyframes url-wire-flow { to { stroke-dashoffset: -26; } }
  .url-bar { position: absolute; left: 50%; top: 160px; translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--paper-light); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 10px 22px rgba(60, 45, 20, .16); }
  .url-bar__nav { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--muted); line-height: 1; transition: background 200ms, color 200ms, scale 200ms; }
  .url-bar__nav svg { display: block; }
  .url-bar__nav--forward svg { scale: -1 1; }
  .url-bar__nav.is-pressed { background: var(--accent); color: #fff; scale: 1.12; }
  .url-bar__field { display: inline-flex; align-items: baseline; padding: 0 18px 0 6px; font-family: var(--mono); font-size: 30px; line-height: 1; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
  .url-bar__channel { display: inline-block; min-width: 1.2em; color: var(--accent); font-weight: 700; animation: url-channel-in 420ms cubic-bezier(.22, 1.2, .36, 1) both; }
  @keyframes url-channel-in { from { translate: 0 -14px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  .url-screen { position: absolute; left: 460px; top: 330px; width: 360px; height: 260px; display: grid; place-items: center; border: 14px solid #262626; border-radius: 22px; background: #1c1c1c; box-shadow: inset 0 0 28px rgba(0,0,0,.9), 0 16px 26px rgba(60, 45, 20, .2); color: #f4f0e6; font-family: var(--mono); font-size: 54px; font-weight: 700; letter-spacing: .04em; transition: background 300ms 220ms; }
  .url-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 5px); pointer-events: none; }
  .url-screen > span { animation: url-screen-in 320ms 220ms cubic-bezier(.3, .9, .3, 1) both; }
  @keyframes url-screen-in { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
  .url-screen--ch7 { background: #6b4b2a; }
  .url-screen--ch8 { background: #2f5d46; }
  .url-screen--ch12 { background: #2c4470; }
  .url-actor { animation: clay-tag-in 360ms cubic-bezier(.22, 1.2, .36, 1) both; }
  .url-scene .clay-tag--callout { animation: clay-tag-in 360ms cubic-bezier(.22, 1.2, .36, 1) both; }
}

@layer responsive {
  @media (max-width: 980px) {
    .slide-grid--clay, .slide-grid--hydrate { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
    .slide-grid--hydrate .focus-heading { align-self: start; }
    .hydration-frame { width: min(100%, 680px); }
    .talk-overview ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .slide-grid--code { grid-template-columns: minmax(0, .5fr) minmax(520px, 1fr); }
    .slide-grid--title,
    .slide-grid--instinct,
    .slide-grid--editions,
    .slide-grid--journey,
    .slide-grid--meme,
    .slide-grid--loop,
    .slide-grid--real-editions,
    .slide-grid--budget,
    .slide-grid--ocean,
    .slide-grid--render-demo,
    .slide-grid--effect-meme,
    .slide-grid--boundary,
    .slide-grid--modules,
    .slide-grid--hydrogen,
    .slide-grid--ai-meme,
    .slide-grid--friction,
    .slide-grid--fair,
    .slide-grid--benchmark,
    .slide-grid--perfection,
    .slide-grid--optimization,
    .slide-grid--real-code,
    .slide-grid--data-proof,
    .slide-grid--gotcha,
    .slide-grid--evidence-v2,
    .slide-grid--channel-story,
    .slide-grid--sync-code,
    .slide-grid--lazy-inventory,
    .slide-grid--tool-compare,
    .slide-grid--url-now,
    .slide-grid--client-lazy,
    .slide-grid--asks,
    .slide-grid--closing { grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); }
    .render-app > header { align-items: start; flex-direction: column; justify-content: center; }
  }

  @media (max-width: 720px) {
    body.talk-page { overflow: auto; }
    .talk-count { right: 16px; }
    .talk-slide { --slide-padding-inline: 20px; overflow-y: auto; padding: 28px var(--slide-padding-inline); }
    .slide-grid { height: auto; min-height: 100%; gap: 30px; }
    .slide-grid--title,
    .slide-grid--instinct,
    .slide-grid--editions,
    .slide-grid--journey,
    .slide-grid--meme,
    .slide-grid--loop,
    .slide-grid--code,
    .slide-grid--real-editions,
    .slide-grid--budget,
    .slide-grid--ocean,
    .slide-grid--render-demo,
    .slide-grid--effect-meme,
    .slide-grid--boundary,
    .slide-grid--modules,
    .slide-grid--hydrogen,
    .slide-grid--ai-meme,
    .slide-grid--friction,
    .slide-grid--fair,
    .slide-grid--benchmark,
    .slide-grid--perfection,
    .slide-grid--optimization,
    .slide-grid--real-code,
    .slide-grid--data-proof,
    .slide-grid--gotcha,
    .slide-grid--evidence-v2,
    .slide-grid--channel-story,
    .slide-grid--sync-code,
    .slide-grid--lazy-inventory,
    .slide-grid--tool-compare,
    .slide-grid--url-now,
    .slide-grid--client-lazy,
    .slide-grid--asks,
    .slide-grid--closing { grid-template-columns: 1fr; }
    .channel-console { grid-template-columns: 1fr 110px; min-height: 400px; }
    .channel-screen { min-height: 290px; }
    .sync-code-panel { grid-template-columns: 1fr; gap: 8px; }
    .sync-code-panel article { min-height: 300px; }
    .sync-code-panel > i { min-height: 30px; rotate: 90deg; }
    .sync-code-panel figcaption { grid-column: 1; }
    .lazy-inventory { grid-template-columns: 1fr; }
    .lazy-inventory article { min-height: 150px; border-right: 0; }
    .lazy-inventory footer { grid-column: 1; }
    .tool-compare__head { display: none; }
    .tool-compare article { grid-template-columns: 1fr; gap: 5px; min-height: 104px; padding: 14px; }
    .tool-compare footer { grid-template-columns: 1fr; }
    .tool-compare footer > small { justify-self: start; text-align: left; }
    .url-now-code { grid-template-columns: 1fr; }
    .url-now-code article { min-height: 260px; }
    .url-now-code article:first-child { border-right: 0; border-bottom: 1px solid #4c4b45; }
    .client-lazy-code { max-height: none; }
    .client-lazy-code footer { grid-template-columns: auto 1fr; }
    .evidence-ledger--asks > footer { grid-template-columns: 1fr; }
    .fifteen-mark, .closing-mark { display: none; }
    .slide-copy h1, .slide-grid--title .slide-copy h1 { font-size: clamp(42px, 14vw, 70px); }
    .code-shift { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
    .code-arrow { min-height: 36px; rotate: 90deg; }
    .editions-definition > strong { font-size: 110px; }
    .remix-journey li { grid-template-columns: 32px 1fr; }
    .remix-journey small { display: none; }
    .frame-budget { column-gap: 18px; }
    .frame-budget strong { font-size: 82px; }
    .hydrogen-shift { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
    .hydrogen-shift i { min-height: 34px; rotate: 90deg; }
    .perfection-targets article { min-height: 112px; }
    .real-code-panel, .data-proof { max-height: none; }
    .gotcha-chain { grid-template-columns: 1fr; }
    .gotcha-chain > i { rotate: 90deg; }
    .gotcha-chain footer { grid-column: 1; grid-template-columns: auto 1fr; }
    .gotcha-chain footer small { grid-column: 1 / -1; justify-self: start; }
    .data-proof > div { grid-template-columns: auto 1fr; }
    .field-signal strong { font-size: 120px; }
    .slide-grid--render-demo .slide-copy { grid-row: auto; }
    .render-compare { grid-template-columns: 1fr; }
    .render-disclaimer { grid-column: 1; text-align: left; }
    .giphy-meme { width: 100%; }
    .storefront-map { min-height: 390px; }
    .clay-chart img { width: 100%; }
    .clay-illustration img { max-height: none; }
    .clay-illustration--ownership figcaption { font-size: 8px; }
    .clay-illustration--request figcaption { font-size: 8px; }
    .request-test { max-width: 100%; overflow: auto; }
    .performance-caveat { display: grid; gap: 4px; }
    .closing-thesis { display: grid; gap: 16px; }
    .slide-grid--solo { place-items: start; }
    .slide-grid--image-only { place-items: center; }
    .image-only { width: 100%; max-height: none; }
    .image-only figcaption { padding: 8px 9px; font-size: 7px; }
    .poster-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .poster-grid--three { grid-template-columns: 1fr; }
    .poster-grid > strong, .poster-grid article { min-height: 124px; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); font-size: 30px; }
    .poster-grid--four > strong:nth-child(odd) { border-right: 1px solid var(--line); }
    .poster-grid > strong:nth-last-child(-n+2), .poster-grid article:last-child { border-bottom: 0; }
    .poster-grid article strong { font-size: 38px; }
    .poster-footnote { font-size: 8px; text-align: left; }
    .poster-footer { align-items: stretch; flex-direction: column; }
    .progressive-control { justify-self: start; align-self: start; margin-top: 10px; }
    .slide-grid--code-only { grid-template-rows: auto auto; align-content: start; }
    .code-only-heading { display: block; }
    .code-only-heading h1 { margin-top: 10px; font-size: clamp(32px, 10.5vw, 48px); text-align: left; }
    .chain-poster { grid-template-columns: 1fr; }
    .chain-poster p { min-height: 112px; }
    .chain-poster i { width: 100%; height: 30px; rotate: 90deg; }
    .tool-focus--lean { min-height: 420px; height: auto; }
    .solo-statement h1, .question-focus h1, .frame-verdict h1, .closing-focus h1 { font-size: clamp(54px, 17vw, 78px); }
    .slide-grid--opening .solo-statement, .closing-focus { text-align: left; }
    .editions-frequency { grid-template-columns: 1fr; align-self: center; }
    .editions-frequency h1 { font-size: min(64vw, 260px); }
    .editions-frequency strong { padding: 10px 0 0; font-size: 64px; }
    .editions-frequency > p:last-child { margin-top: 34px; }
    .slide-grid--product-focus, .slide-grid--focus-stack, .slide-grid--code-focus, .slide-grid--interaction-focus { grid-template-rows: auto auto; }
    .slide-grid--product-focus { align-content: start; }
    .focus-heading h1 { font-size: clamp(40px, 12vw, 62px); }
    .focus-heading--code { display: block; }
    .focus-heading--code h1 { margin-top: 10px; font-size: clamp(36px, 10.5vw, 52px); text-align: left; }
    .product-focus { min-height: 330px; }
    .product-focus img { object-position: center; }
    .product-focus--tv, .product-focus--video { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
    .remix-journey--horizontal, .perfection-targets--wide { grid-template-columns: 1fr; }
    .remix-journey--horizontal li { min-height: 110px; border-right: 0; }
    .perfection-targets--wide article, .perfection-targets--wide article:nth-child(even) { min-height: 120px; border-right: 0; }
    .channel-console--wide { height: auto; max-height: none; }
    .focus-code-panel { max-height: none; }
    .focus-code-panel pre { padding: 24px 18px; }
    .focus-code-panel code, .focus-code-panel--wide-code code { font-size: 12px; line-height: 1.48; }
    .focus-code-panel footer { grid-template-columns: auto 1fr; }
    .sync-focus h1, .lifecycle-focus h1, .tool-focus h1, .metric-focus h1, .benchmark-focus h1 { font-size: clamp(52px, 15vw, 72px); }
    .sync-focus > div { grid-template-columns: 1fr; gap: 8px; margin-top: 34px; }
    .sync-focus > div i { rotate: 90deg; }
    .sync-focus > p:last-child { text-align: left; }
    .lifecycle-focus ol { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
    .lifecycle-focus li { min-height: 80px; }
    .tool-focus { min-height: 460px; padding: 28px 22px; }
    .frame-verdict { grid-template-columns: 1fr; }
    .frame-verdict h1 { grid-column: 1; }
    .frame-verdict > p { margin-top: 0; border-right: 0; }
    .frame-verdict > p:nth-of-type(2) { margin-top: 36px; }
    .frame-verdict__facts, .candidate-evidence { grid-template-columns: 1fr; }
    .frame-verdict__facts p, .candidate-evidence article { min-height: 120px; border-right: 0; border-bottom: 1px solid var(--line); }
    .candidate-evidence header, .candidate-evidence footer { grid-column: 1; flex-wrap: wrap; }
    .candidate-evidence article p { margin: 18px 0; }
    .interaction-heading { align-items: start; flex-direction: column; }
    .interaction-heading h1 { font-size: 54px; }
    .storefront-map--wide { height: auto; max-height: none; }
    .gotcha-chain--wide { grid-template-columns: 1fr; }
    .gotcha-chain--wide p { min-height: 150px; }
    .gotcha-chain--wide footer { grid-column: 1; }
    .metric-focus { align-self: center; }
    .metric-focus h1 { font-size: min(48vw, 220px); }
    .benchmark-focus > div { grid-template-columns: 1fr; }
    .benchmark-focus span { min-height: 48px; border-right: 0; }
    .ask-list--wide li { grid-template-columns: 50px 1fr; }
    .ask-list--wide strong { font-size: 26px; }
    .talk-overview { padding: 24px 16px; }
    .talk-overview ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .talk-overview__heading { align-items: start; }
    .presenter-console { grid-template-columns: 1fr; gap: 28px; overflow-y: auto; padding: 28px 20px; }
    .presenter-summary > span { margin-top: 24px; }
    .presenter-summary h1 { font-size: 44px; }
    .presenter-script { min-height: 360px; padding: 26px 0 0; border-top: 1px solid var(--ink); border-left: 0; }
    .presenter-script__copy { font-size: 22px; }
    .hydration-frame__page .mini-page { scale: .62; }
    .talk-notes { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 80px); }
    .presenter-sync { display: none; }
  }

  @media (max-height: 700px) and (min-width: 721px) {
    .talk-slide { --slide-padding-inline: 5.5vw; padding: 26px var(--slide-padding-inline); }
    .slide-grid--product-focus, .slide-grid--focus-stack, .slide-grid--code-focus, .slide-grid--interaction-focus, .slide-grid--code-only { gap: 12px; }
    .image-only { width: min(100%, 112vh); }
    .poster-grid > strong, .poster-grid article { min-height: 190px; padding: 16px; }
    .code-only-heading { padding-bottom: 8px; }
    .code-only-heading h1 { font-size: clamp(28px, 3.4vw, 42px); }
    .chain-poster p { min-height: 170px; }
    .solo-statement h1, .question-focus h1, .frame-verdict h1, .closing-focus h1 { font-size: clamp(58px, 7.7vw, 110px); }
    .solo-statement > p:last-child, .closing-focus > p:last-child { margin-top: 18px; }
    .editions-frequency h1 { font-size: min(24vw, 280px); }
    .editions-frequency strong { font-size: 78px; }
    .editions-frequency > p:last-child { margin-top: 24px; }
    .focus-heading h1 { font-size: clamp(38px, 4.5vw, 62px); }
    .slide-grid--tradeoff .focus-heading h1 { font-size: clamp(52px, 6vw, 94px); }
    .slide-grid--frame-document .focus-heading h1 { font-size: clamp(44px, 4.8vw, 72px); }
    .slide-grid--reading-page .focus-heading h1 { font-size: clamp(44px, 4.8vw, 72px); }
    .slide-grid--lifecycle .focus-heading h1 { font-size: clamp(44px, 4.8vw, 72px); }
    .slide-grid--lazy-demo .focus-heading h1 { font-size: clamp(44px, 4.8vw, 72px); }
    .focus-heading--code { padding-bottom: 8px; }
    .focus-heading--code h1 { font-size: clamp(32px, 3.5vw, 46px); }
    .focus-code-panel, .focus-code-panel--compact { max-height: none; }
    .focus-code-panel pre { padding: 14px 36px; }
    .focus-code-panel code { font-size: 16px; line-height: 1.3; }
    .focus-code-panel--wide-code code { font-size: 12px; line-height: 1.24; }
    .focus-code-panel--wide-code pre { padding-block: 10px; }
    .sync-focus h1, .lifecycle-focus h1, .tool-focus h1, .metric-focus h1, .benchmark-focus h1 { font-size: clamp(58px, 7vw, 98px); }
    .sync-focus > div, .lifecycle-focus ol { margin-top: 24px; }
    .lifecycle-focus li { min-height: 72px; }
    .tool-focus { min-height: 0; height: 100%; }
    .tool-focus > p:last-child { margin-top: 22px; }
    .frame-verdict > p { margin-top: 20px; }
    .frame-verdict__facts { margin-top: 18px; }
    .frame-verdict__facts p { min-height: 90px; padding: 12px 18px; }
    .frame-verdict__facts strong { font-size: 50px; }
    .candidate-evidence article { min-height: 160px; padding: 14px 20px; }
    .candidate-evidence article p { font-size: 25px; }
    .candidate-evidence header, .candidate-evidence footer { min-height: 34px; padding-block: 6px; }
    .perfection-targets--wide article, .perfection-targets--wide article:nth-child(even), .remix-journey--horizontal li { min-height: 170px; }
    .channel-console--wide { max-height: none; }
    .gotcha-chain--wide p { min-height: 150px; }
    .metric-focus h1 { font-size: min(24vw, 290px); }
    .metric-focus strong { margin-top: 14px; }
    .benchmark-focus > div { margin-top: 22px; }
    .benchmark-focus span { min-height: 58px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .talk-progress span { transition: none; }
    .talk-slide, .render-region { animation: none !important; }
  }
}