@layer components {
  @font-face {
    font-family: Inter;
    src: url('assets/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: Inter;
    src: url('assets/inter-bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
  }
  :root {
    --navy: var(--tk-color-navy);
    --orange: var(--tk-color-orange);
    --purple: var(--tk-color-purple);
    --cream: #fbf2e9;
    --mist: #f4f6f8;
    --ink: #1c2940;
    --muted: #586171;
    --line: #dce0e7;
    --page-bg: #fff;
    --page-ink: #1c2940;
  }
  * {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--tk-space-96);
  }
  body {
    margin: var(--tk-space-0);
    color: var(--ink);
    background: #fff;
    font-family: Inter, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
  }
  button,
  input,
  textarea {
    font: inherit;
  }
  button,
  a,
  summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  button {
    cursor: pointer;
  }
  button:disabled {
    cursor: default;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button {
    color: inherit;
  }
  p,
  h1,
  h2,
  h3 {
    margin: var(--tk-space-0);
  }
  p + p {
    margin-top: var(--tk-space-20);
  }
  h1,
  h2,
  h3 {
    font-weight: var(--tk-weight-bold);
  }
  h1,
  h2 {
    letter-spacing: var(--tk-tracking-tight);
    line-height: var(--tk-leading-display);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--tk-type-display);
  }
  h2 {
    font-size: var(--tk-type-display-sm);
  }
  h3 {
    font-size: var(--tk-type-lead);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
  }
  p {
    text-wrap: pretty;
  }
  img {
    max-width: var(--tk-relative-100-percent);
    height: auto;
  }
  svg {
    display: block;
    flex-shrink: 0;
  }
  button {
    border: 0;
  }
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  textarea:focus-visible {
    outline: var(--tk-size-3) solid #ac7de6;
    outline-offset: var(--tk-size-4);
  }
  ::selection {
    background: #d9c7f0;
    color: var(--navy);
  }
  [hidden] {
    display: none !important;
  }
  .wrap {
    width: min(var(--tk-size-1184), calc(var(--tk-relative-100-percent) - var(--tk-size-96)));
    margin-inline: auto;
  }
  .section {
    padding-block: var(--tk-space-112);
  }
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--tk-space-8);
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--tk-space-28);
  }
  .section-heading {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--tk-space-96);
    align-items: end;
    margin-bottom: var(--tk-space-56);
  }
  .section-heading > p,
  .section-heading > div > p:not(.eyebrow) {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    color: var(--muted);
  }
  .figure-note {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    color: var(--muted);
    margin-top: var(--tk-space-16);
  }
  .source-url {
    display: block;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: var(--tk-size-4);
  }
  .source-url + .source-url {
    margin-top: var(--tk-space-16);
  }
  .inline-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tk-space-16);
    font-weight: var(--tk-weight-bold);
    min-height: var(--tk-size-44);
    border-bottom: var(--tk-size-1) solid currentColor;
    padding-block: var(--tk-space-8);
    line-height: var(--tk-leading-body);
  }
  .inline-link:hover svg {
    transform: translateX(var(--tk-size-3));
  }
  .inline-link svg {
    transition: transform 0.18s;
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tk-space-24);
    min-height: var(--tk-size-56);
    padding: var(--tk-space-12) var(--tk-space-24);
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    line-height: var(--tk-leading-heading);
    border-radius: var(--tk-size-3);
    transition:
      box-shadow 0.18s,
      transform 0.18s;
    background: transparent;
  }
  .button:hover {
    box-shadow: 0 var(--tk-size-4) 0 rgba(0, 0, 0, 0.12);
    transform: translateY(calc(var(--tk-size-1) * -1));
  }
  .primary {
    background: var(--orange);
    color: #152037;
  }
  .secondary {
    border: var(--tk-size-1) solid var(--navy);
    background: transparent;
  }
  .light-button {
    background: #fff;
    color: var(--navy);
  }
  .button-label {
    display: grid;
  }
  .button-label > span {
    grid-area: 1/1;
  }
  .label-measure {
    visibility: hidden;
    pointer-events: none;
  }
  .skip-link {
    position: fixed;
    left: var(--tk-size-16);
    top: var(--tk-size-12);
    padding: var(--tk-space-12) var(--tk-space-16);
    background: #fff;
    color: var(--navy);
    z-index: 1000;
    transform: translateY(calc(var(--tk-relative-150-percent) * -1));
  }
  .skip-link:focus {
    transform: translateY(0);
  }
  .site-header {
    position: sticky;
    top: 0;
    background: var(--navy);
    color: #fff;
    z-index: 50;
    border-bottom: var(--tk-size-1) solid #ffffff20;
  }
  .header-inner {
    width: min(var(--tk-size-1320), calc(var(--tk-relative-100-percent) - var(--tk-size-80)));
    height: var(--tk-size-80);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-space-24);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: var(--tk-space-16);
    flex-shrink: 0;
    line-height: var(--tk-leading-display);
  }
  .brand img {
    width: var(--tk-size-128);
    height: var(--tk-size-32);
    object-fit: contain;
  }
  .brand > span {
    font-size: var(--tk-type-label);
    color: #d2d8e2;
    border-left: var(--tk-size-1) solid #ffffff35;
    padding-left: var(--tk-space-16);
  }
  .logo-dark {
    display: none;
  }
  #site-nav {
    display: flex;
    align-items: center;
    gap: var(--tk-space-32);
    font-size: var(--tk-type-label);
  }
  #site-nav a {
    padding-block: var(--tk-space-12);
    white-space: nowrap;
  }
  #site-nav a:hover {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-8);
  }
  #site-nav [aria-current] {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-8);
  }
  .nav-cta {
    display: flex;
    align-items: center;
    gap: var(--tk-space-16);
    border: var(--tk-size-1) solid #ffffff65;
    padding: var(--tk-space-8) var(--tk-space-16) !important;
    border-radius: var(--tk-size-3);
    font-weight: var(--tk-weight-bold);
  }
  .menu-toggle {
    display: none;
  }
  .hero {
    position: relative;
    background: var(--navy);
    color: #fff;
    padding: var(--tk-space-80) var(--tk-space-0) var(--tk-space-64);
    overflow: hidden;
  }
  .hero-inner {
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .hero .eyebrow {
    justify-content: center;
    color: #d9d1e6;
    margin-bottom: var(--tk-space-24);
  }
  .release-dot {
    width: var(--tk-size-8);
    height: var(--tk-size-8);
    background: var(--orange);
    border-radius: var(--tk-relative-50-percent);
  }
  .hero h1 {
    font-size: var(--tk-type-display);
    line-height: var(--tk-leading-display);
    letter-spacing: var(--tk-tracking-tight);
    max-width: var(--tk-size-920);
    margin: auto;
  }
  .hero-accent {
    /* Keep the headline expressive while orange gives the copy actions priority. */
    color: #c5b5dc;
    position: relative;
    display: inline-block;
  }
  .hero-description {
    max-width: var(--tk-size-640);
    margin: var(--tk-space-28) auto var(--tk-space-32);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: #d9dee7;
  }
  .hero-index {
    position: absolute;
    left: var(--tk-size-24);
    bottom: var(--tk-size-44);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    color: #aeb8c9;
  }
  .prompt-box {
    max-width: var(--tk-size-688);
    margin: var(--tk-space-0) auto;
    background: #26354d;
    border: var(--tk-size-1) solid #4b5970;
    text-align: left;
    border-radius: var(--tk-size-8);
    box-shadow: 0 var(--tk-size-20) var(--tk-size-48) #09102028;
    scroll-margin-top: var(--tk-space-112);
  }
  .prompt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-space-16);
    padding: var(--tk-space-16) var(--tk-space-24);
    border-bottom: var(--tk-size-1) solid #4b5970;
    font-size: var(--tk-type-label);
  }
  .prompt-top > span:first-child {
    display: flex;
    gap: var(--tk-space-12);
    align-items: center;
  }
  .prompt-mark {
    font-family: monospace;
    font-size: var(--tk-type-label);
    color: #cfb6ef;
  }
  .small-tag {
    font-size: var(--tk-type-label);
    border: var(--tk-size-1) solid #7c899d;
    padding: var(--tk-space-4) var(--tk-space-8);
    border-radius: var(--tk-size-3);
    color: #e2e7f0;
    white-space: nowrap;
  }
  .prompt-readable {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    padding: var(--tk-space-24) var(--tk-space-24) var(--tk-space-20);
    color: #fff;
    letter-spacing: var(--tk-tracking-tight);
  }
  .prompt-actions {
    display: flex;
    align-items: start;
    gap: var(--tk-space-24);
    flex-wrap: wrap;
    padding: var(--tk-space-0) var(--tk-space-24);
    position: relative;
  }
  .prompt-detail {
    align-self: center;
    flex: 1;
    min-width: var(--tk-size-180);
  }
  .prompt-detail summary {
    cursor: pointer;
    font-size: var(--tk-type-label);
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
    min-height: var(--tk-size-44);
    display: flex;
    align-items: center;
    gap: var(--tk-space-8);
  }
  .prompt-detail summary:before {
    content: '+';
    font-size: var(--tk-type-body);
    text-decoration: none;
  }
  .prompt-detail[open] summary:before {
    content: '−';
  }
  .prompt-detail[open] {
    flex-basis: var(--tk-relative-100-percent);
    order: 2;
  }
  .prompt-full p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    overflow-wrap: anywhere;
    padding: var(--tk-space-16) var(--tk-space-16);
    background: #18243a;
    border-radius: var(--tk-size-3);
    margin-top: var(--tk-space-4);
  }
  .prompt-foot {
    padding: var(--tk-space-16) var(--tk-space-24) var(--tk-space-20);
    color: #c5cddd;
    font-size: var(--tk-type-label);
    margin-top: var(--tk-space-0);
  }
  .noscript-prompt {
    padding: var(--tk-space-20);
    font-size: var(--tk-type-label);
    overflow-wrap: anywhere;
  }
  .hero-notes {
    display: flex;
    gap: var(--tk-space-16);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--tk-space-24);
    font-size: var(--tk-type-label);
    color: #ccd4e2;
  }
  .hero-notes a {
    display: flex;
    align-items: center;
    gap: var(--tk-space-8);
    min-height: var(--tk-size-44);
  }
  .hero-notes svg {
    width: var(--tk-size-16);
  }
  .yc-mark {
    width: var(--tk-size-20);
    height: var(--tk-size-20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fc501e;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: var(--tk-weight-regular);
  }
  .hero-notes .yc-mark {
    font-size: var(--tk-type-label);
  }
  .experience-stage {
    background: var(--cream);
    border: var(--tk-size-1) solid #e9dfd5;
    border-radius: var(--tk-size-8);
    overflow: hidden;
  }
  .demo-toolbar {
    height: var(--tk-size-60);
    border-bottom: var(--tk-size-1) solid #ded5cb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tk-space-0) var(--tk-space-28);
    gap: var(--tk-space-16);
    font-size: var(--tk-type-lead);
    letter-spacing: var(--tk-tracking-tight);
    font-weight: var(--tk-weight-bold);
  }
  .demo-toolbar > div {
    display: flex;
    align-items: center;
    gap: var(--tk-space-8);
  }
  .orbit-symbol {
    font-size: var(--tk-type-title);
  }
  .demo-product {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-regular);
    letter-spacing: var(--tk-tracking-normal);
    color: #626775;
    border-left: var(--tk-size-1) solid #d8cfc5;
    margin-left: var(--tk-space-8);
    padding-left: var(--tk-space-16);
  }
  .demo-badge {
    font-weight: var(--tk-weight-regular);
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-normal);
    border: var(--tk-size-1) solid #bdb4ad;
    border-radius: var(--tk-size-3);
    padding: var(--tk-space-4) var(--tk-space-8);
  }
  .demo-grid {
    display: grid;
    grid-template-columns: 1.15fr var(--tk-size-92) 1fr;
    align-items: center;
    padding: var(--tk-space-48) var(--tk-space-56) var(--tk-space-48);
  }
  .invite-card {
    padding: var(--tk-space-28);
    background: #fff;
    box-shadow: 0 var(--tk-size-8) var(--tk-size-24) #4e3b2310;
    border: var(--tk-size-1) solid #ece4dc;
    border-radius: var(--tk-size-8);
  }
  .card-topline {
    display: flex;
    align-items: center;
    gap: var(--tk-space-8);
    font-size: var(--tk-type-label);
    color: #5c6371;
    margin-bottom: var(--tk-space-24);
  }
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tk-size-40);
    height: var(--tk-size-40);
    flex-shrink: 0;
    border-radius: var(--tk-relative-50-percent);
    font-weight: var(--tk-weight-bold);
    font-size: var(--tk-type-label);
  }
  .avatar-j {
    background: #decbee;
    color: #46345d;
  }
  .avatar-a {
    background: #efbca5;
    color: #542c1d;
  }
  .card-dots {
    margin-left: auto;
    letter-spacing: var(--tk-tracking-wide);
  }
  .invite-card h3 {
    font-size: var(--tk-type-title);
    line-height: var(--tk-leading-display);
    letter-spacing: var(--tk-tracking-tight);
    margin-bottom: var(--tk-space-12);
  }
  .invite-card > p {
    font-size: var(--tk-type-label);
    color: var(--muted);
  }
  .invite-count {
    display: flex;
    gap: var(--tk-space-16);
    align-items: center;
    margin: var(--tk-space-28) var(--tk-space-0) var(--tk-space-20);
    padding-top: var(--tk-space-24);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .invite-count > strong {
    font-size: var(--tk-type-heading);
    line-height: var(--tk-leading-display);
    letter-spacing: var(--tk-tracking-tight);
    font-weight: var(--tk-weight-regular);
  }
  .invite-count > div {
    display: flex;
    flex-direction: column;
  }
  .invite-count b {
    font-size: var(--tk-type-label);
  }
  .invite-count span {
    font-size: var(--tk-type-label);
    color: var(--muted);
    line-height: var(--tk-leading-body);
  }
  .invite-dots {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--tk-space-4);
    margin-left: auto;
  }
  .invite-dots i {
    display: block;
    width: var(--tk-size-8);
    height: var(--tk-size-8);
    border-radius: var(--tk-relative-50-percent);
    background: var(--purple);
  }
  .invite-dots i.used {
    background: #dddfe5;
  }
  .demo-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--mist);
    border: var(--tk-size-1) solid #dce1e8;
    border-radius: var(--tk-size-3);
    min-height: var(--tk-size-48);
    gap: var(--tk-space-4);
    padding-left: var(--tk-space-12);
  }
  .demo-link > span {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--tk-type-label);
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .demo-link button {
    background: none;
    min-width: var(--tk-size-44);
    min-height: var(--tk-size-48);
    display: grid;
    place-items: center;
  }
  .code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--tk-type-label);
    color: var(--muted);
    gap: var(--tk-space-8);
    margin-top: var(--tk-space-4);
  }
  .code-row button {
    font-size: var(--tk-type-label);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-wide);
    background: none;
    min-height: var(--tk-size-44);
    padding: var(--tk-space-4) var(--tk-space-4);
    color: var(--navy);
  }
  .code-row button span {
    margin-left: var(--tk-space-4);
  }
  .demo-connection {
    align-self: center;
    color: #72607d;
    text-align: center;
  }
  .demo-connection svg {
    width: var(--tk-relative-100-percent);
    height: auto;
  }
  .demo-connection span {
    font-size: var(--tk-type-label);
  }
  .friend-card {
    background: #e5d5f0;
    border-radius: var(--tk-size-8);
    padding: var(--tk-space-28) var(--tk-space-20) var(--tk-space-20);
    text-align: center;
    border: var(--tk-size-1) solid #d2bce2;
    transform: rotate(2deg);
  }
  .tiny-title {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    font-weight: var(--tk-weight-bold);
  }
  .friend-avatars {
    display: flex;
    justify-content: center;
    margin: var(--tk-space-24) var(--tk-space-0) var(--tk-space-16);
    padding-left: var(--tk-space-8);
  }
  .friend-avatars .avatar {
    height: var(--tk-size-52);
    width: var(--tk-size-52);
    font-size: var(--tk-type-body);
    border: var(--tk-size-3) solid #e5d5f0;
    margin-left: calc(var(--tk-space-8) * -1);
  }
  .friend-card h3 {
    font-size: var(--tk-type-title);
    line-height: var(--tk-leading-display);
    letter-spacing: var(--tk-tracking-tight);
    margin-bottom: var(--tk-space-12);
  }
  .friend-card > p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
  }
  .demo-button {
    background: var(--navy);
    color: #fff;
    margin-top: var(--tk-space-20);
    width: var(--tk-relative-100-percent);
    font-size: var(--tk-type-label);
    min-height: var(--tk-size-48);
    gap: var(--tk-space-16);
  }
  .demo-button:disabled {
    background: #39435b;
  }
  .friend-card .demo-helper {
    font-size: var(--tk-type-label);
    margin-top: var(--tk-space-8);
    color: #54445f;
  }
  .demo-receipt {
    border-top: var(--tk-size-1) solid #ded5cb;
    display: flex;
    align-items: center;
    gap: var(--tk-space-12);
    min-height: var(--tk-size-68);
    background: #fff8f1;
    padding: var(--tk-space-12) var(--tk-space-28);
    font-size: var(--tk-type-label);
  }
  .receipt-mark {
    font-size: var(--tk-type-lead);
    color: #6e4c9d;
  }
  .demo-receipt p {
    flex: 1;
    line-height: var(--tk-leading-body);
  }
  .text-button {
    background: none;
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    min-height: var(--tk-size-44);
    white-space: nowrap;
    padding: var(--tk-space-8) var(--tk-space-0);
  }
  .text-button span {
    font-size: var(--tk-type-body);
    margin-left: var(--tk-space-8);
  }
  .experience-stage.just-redeemed .friend-card {
    animation: received 0.4s ease-out;
  }
  @keyframes received {
    50% {
      transform: rotate(0) translateY(calc(var(--tk-size-4) * -1));
    }
  }
  .how-section {
    background: var(--mist);
  }
  .how-section h2 {
    max-width: var(--tk-size-760);
  }
  .steps {
    list-style: none;
    padding: var(--tk-space-0);
    margin: var(--tk-space-56) var(--tk-space-0) var(--tk-space-28);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tk-space-40);
  }
  .steps li {
    border-top: var(--tk-size-1) solid #b8c0cd;
    padding-top: var(--tk-space-20);
  }
  .step-number {
    display: block;
    font-size: var(--tk-type-label);
    color: #65577c;
    margin-bottom: var(--tk-space-32);
  }
  .steps h3 {
    font-size: var(--tk-type-lead);
    margin-bottom: var(--tk-space-16);
  }
  .steps p {
    color: var(--muted);
    max-width: var(--tk-size-332);
  }
  .platform-section .section-heading {
    align-items: center;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--tk-space-80);
  }
  .platform-section h2 span {
    color: #7650a9;
  }
  .engine-diagram {
    display: grid;
    grid-template-columns: 1fr var(--tk-size-72) 1fr;
    border: var(--tk-size-1) solid #d7dce4;
    align-items: center;
    background: #fff;
    border-radius: var(--tk-size-8);
    position: relative;
    overflow: hidden;
  }
  .engine-node {
    padding: var(--tk-space-36) var(--tk-space-48);
    min-height: var(--tk-size-220);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .engine-node:first-child {
    background: var(--mist);
  }
  .engine-node h3 {
    margin-top: var(--tk-space-20);
    font-size: var(--tk-type-body);
  }
  .engine-node p {
    font-size: var(--tk-type-label);
    color: var(--muted);
    margin-top: var(--tk-space-8);
  }
  .engine-icon {
    font-size: var(--tk-type-title);
    font-weight: var(--tk-weight-bold);
    line-height: var(--tk-leading-label);
    letter-spacing: var(--tk-tracking-tight);
  }
  .engine-node img {
    width: var(--tk-size-160);
    height: var(--tk-size-40);
    object-fit: contain;
  }
  .engine-plus {
    font-size: var(--tk-type-title);
    font-weight: var(--tk-weight-regular);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tk-size-56);
    height: var(--tk-size-56);
    border: var(--tk-size-1) solid #d2d7df;
    background: #fff;
    border-radius: var(--tk-relative-50-percent);
    z-index: 1;
    margin: auto;
  }
  .engine-diagram:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--tk-relative-50-percent);
    background: var(--mist);
    z-index: 0;
  }
  .engine-node {
    z-index: 1;
  }
  .capabilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tk-space-36);
    margin-top: var(--tk-space-40);
  }
  .capabilities article {
    position: relative;
    padding-top: var(--tk-space-16);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .capabilities article > span {
    display: block;
    font-size: var(--tk-type-label);
    color: #766287;
    margin-bottom: var(--tk-space-16);
  }
  .capabilities h3 {
    font-size: var(--tk-type-body);
    margin-bottom: var(--tk-space-8);
  }
  .capabilities p {
    font-size: var(--tk-type-label);
    color: var(--muted);
  }
  .story-teaser {
    background: var(--purple);
    color: var(--navy);
    overflow: hidden;
  }
  .story-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-96);
    align-items: center;
  }
  .story-layout h2 {
    font-size: var(--tk-type-heading);
  }
  .story-layout p:not(.eyebrow) {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    margin-top: var(--tk-space-24);
  }
  .story-layout .button {
    margin-top: var(--tk-space-32);
    font-size: var(--tk-type-label);
  }
  .story-art {
    display: block;
    position: relative;
    min-height: var(--tk-size-460);
    margin-top: var(--tk-space-16);
  }
  .story-window {
    position: absolute;
    width: var(--tk-relative-88-percent);
    box-shadow: 0 var(--tk-size-12) var(--tk-size-24) #30244425;
    border-radius: var(--tk-size-4);
    overflow: hidden;
  }
  .story-window.old {
    top: 0;
    left: 0;
    background: #f8f8ef;
    border: var(--tk-size-1) solid #928397;
    transform: rotate(-6deg);
    padding-bottom: var(--tk-space-24);
    font-family: Georgia, serif;
  }
  .story-window.old > div {
    height: var(--tk-size-28);
    background: linear-gradient(#e1e4e8, #bdc3cb);
    border-bottom: var(--tk-size-1) solid #a3a5ac;
    padding: var(--tk-space-0) var(--tk-space-8);
    display: flex;
    gap: var(--tk-space-4);
    align-items: center;
  }
  .story-window.old i {
    height: var(--tk-size-8);
    width: var(--tk-size-8);
    background: #8795ab;
    border-radius: var(--tk-relative-50-percent);
  }
  .story-window.old div span {
    font-family: Arial, sans-serif;
    font-size: var(--tk-type-label);
    text-align: center;
    width: var(--tk-relative-100-percent);
  }
  .story-window.old strong {
    font-size: var(--tk-type-lead);
    display: block;
    padding: var(--tk-space-24) var(--tk-space-24) var(--tk-space-8);
    font-weight: var(--tk-weight-regular);
  }
  .retro-link {
    padding: var(--tk-space-0) var(--tk-space-24);
    color: #2654a0;
    font-size: var(--tk-type-label);
    text-decoration: underline;
  }
  .story-window.middle {
    top: var(--tk-size-144);
    right: 0;
    background: #fff;
    color: var(--tk-color-ink-deep);
    border: var(--tk-size-1) solid #fff;
    transform: rotate(5deg);
    padding: var(--tk-space-20) var(--tk-space-24);
  }
  .story-company-logo {
    display: block;
    width: var(--tk-size-192);
    height: auto;
    margin-top: var(--tk-space-8);
  }
  .story-window.middle .yc-mark {
    float: left;
    margin-right: var(--tk-space-8);
    width: var(--tk-size-24);
    height: var(--tk-size-24);
  }
  .story-window.middle p {
    font-size: var(--tk-type-label);
    margin: var(--tk-space-0);
    font-family: ui-monospace, monospace;
  }
  .story-window.middle strong {
    display: flex;
    align-items: center;
    gap: var(--tk-space-12);
    font-size: var(--tk-type-title);
    letter-spacing: var(--tk-tracking-tight);
    margin-top: var(--tk-space-16);
  }
  .story-window.new {
    top: var(--tk-size-276);
    left: var(--tk-relative-3-percent);
    background: var(--navy);
    color: #fff;
    transform: rotate(-2deg);
    padding: var(--tk-space-24) var(--tk-space-24);
    border: var(--tk-size-1) solid #485569;
  }
  .story-window.new strong {
    display: block;
    font-size: var(--tk-type-lead);
    letter-spacing: var(--tk-tracking-tight);
    margin: var(--tk-space-12) var(--tk-space-0) var(--tk-space-8);
  }
  .story-window.new > span:last-child {
    font-size: var(--tk-type-label);
    color: #cbd2df;
  }
  .story-art-caption {
    position: absolute;
    bottom: calc(var(--tk-size-28) * -1);
    left: var(--tk-size-16);
    font-size: var(--tk-type-label);
  }
  .proof .section-heading {
    align-items: end;
  }
  .case-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-48);
  }
  .case-links article {
    border-top: var(--tk-size-1) solid var(--line);
    padding-top: var(--tk-space-28);
    min-width: 0;
  }
  .brand-name {
    font-size: var(--tk-type-heading-sm);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-tight);
    display: block;
    line-height: var(--tk-leading-heading);
  }
  .ae-name {
    font-size: var(--tk-type-title);
    padding-block: var(--tk-space-4);
    letter-spacing: var(--tk-tracking-tight);
  }
  .case-links p {
    font-size: var(--tk-type-label);
    color: var(--muted);
    margin: var(--tk-space-12) var(--tk-space-0);
  }
  .case-links .source-url {
    color: var(--muted);
    max-width: var(--tk-size-520);
  }
  .faq-section {
    background: var(--mist);
  }
  .faq-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--tk-space-80);
  }
  .faq-list details {
    border-top: var(--tk-size-1) solid #cbd2dc;
    padding: var(--tk-space-0);
  }
  .faq-list details:last-child {
    border-bottom: var(--tk-size-1) solid #cbd2dc;
  }
  .faq-list summary {
    padding: var(--tk-space-24) var(--tk-space-32) var(--tk-space-24) var(--tk-space-0);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    font-weight: var(--tk-weight-bold);
    cursor: pointer;
    list-style: none;
    position: relative;
  }
  .faq-list summary::-webkit-details-marker {
    display: none;
  }
  .faq-list summary:after {
    content: '+';
    position: absolute;
    right: 0;
    top: var(--tk-size-24);
    font-size: var(--tk-type-lead);
    font-weight: var(--tk-weight-regular);
  }
  .faq-list details[open] summary:after {
    content: '−';
  }
  .faq-list p {
    padding: var(--tk-space-0) var(--tk-space-32) var(--tk-space-24) var(--tk-space-0);
    color: var(--muted);
    font-size: var(--tk-type-label);
  }
  .closing {
    background: var(--cream);
    padding: var(--tk-space-96) var(--tk-space-0) var(--tk-space-112);
    position: relative;
    overflow: hidden;
  }
  .closing-inner {
    position: relative;
    z-index: 1;
  }
  .closing h2 {
    font-size: var(--tk-type-display-sm);
    max-width: var(--tk-size-752);
  }
  .closing p:not(.eyebrow) {
    font-size: var(--tk-type-body);
    margin-top: var(--tk-space-24);
    margin-bottom: var(--tk-space-32);
  }
  .closing .inline-link {
    margin-left: var(--tk-space-28);
    font-size: var(--tk-type-label);
  }
  .closing-rays {
    position: absolute;
    right: calc(var(--tk-size-176) * -1);
    top: var(--tk-size-56);
    width: var(--tk-size-600);
    height: var(--tk-size-600);
    border-radius: var(--tk-relative-50-percent);
    pointer-events: none;
  }
  .closing-rays i {
    position: absolute;
    width: var(--tk-size-440);
    height: var(--tk-size-12);
    background: #efbca4;
    top: var(--tk-relative-50-percent);
    left: 0;
    transform-origin: var(--tk-relative-80-percent) center;
    border-radius: var(--tk-size-3);
  }
  .closing-rays i:nth-child(1) {
    transform: rotate(-70deg);
  }
  .closing-rays i:nth-child(2) {
    transform: rotate(-35deg);
  }
  .closing-rays i:nth-child(3) {
    transform: rotate(0deg);
  }
  .closing-rays i:nth-child(4) {
    transform: rotate(35deg);
  }
  .closing-rays i:nth-child(5) {
    transform: rotate(70deg);
  }
  .site-footer {
    background: var(--navy);
    color: #e8ebf1;
    padding: var(--tk-space-64) var(--tk-space-0) var(--tk-space-28);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.1fr 0.7fr 1.2fr;
    gap: var(--tk-space-64);
  }
  .footer-top h2 {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-normal);
    margin-bottom: var(--tk-space-20);
    color: #aeb9ca;
  }
  .footer-top > div > a:not(.brand) {
    display: block;
    font-size: var(--tk-type-label);
    padding: var(--tk-space-4) var(--tk-space-0);
  }
  .footer-top p {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
    margin-top: var(--tk-space-20);
  }
  .footer-resources {
    min-width: 0;
  }
  .footer-resources .source-url {
    font-size: var(--tk-type-label) !important;
    color: #c6cfdd;
    line-height: var(--tk-leading-prose);
  }
  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-40);
    border-top: var(--tk-size-1) solid #ffffff25;
    margin-top: var(--tk-space-56);
    padding-top: var(--tk-space-24);
    font-size: var(--tk-type-label);
    color: #b2bed0;
  }
  .footer-bottom > div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--tk-space-16);
    row-gap: var(--tk-space-8);
  }
  .footer-bottom .source-url {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    margin: var(--tk-space-0);
  }
  .footer-bottom > p {
    font-size: var(--tk-type-label);
  }
  .toast {
    position: fixed;
    bottom: var(--tk-size-24);
    left: var(--tk-relative-50-percent);
    transform: translate(calc(var(--tk-relative-50-percent) * -1), var(--tk-size-20));
    max-width: calc(var(--tk-relative-100-percent) - var(--tk-size-32));
    width: max-content;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 var(--tk-size-4) var(--tk-size-32) #11182738;
    border: var(--tk-size-1) solid #d1d7df;
    z-index: 150;
    border-radius: var(--tk-size-4);
    font-size: var(--tk-type-label);
    padding: var(--tk-space-12) var(--tk-space-20);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.2s,
      transform 0.2s;
  }
  .toast.visible {
    opacity: 1;
    transform: translate(calc(var(--tk-relative-50-percent) * -1), 0);
  }
  dialog {
    width: min(var(--tk-size-620), calc(var(--tk-relative-100-percent) - var(--tk-size-32)));
    max-height: calc(var(--tk-relative-100-dvh) - var(--tk-size-36));
    overflow: auto;
    border: var(--tk-size-1) solid #d0d7df;
    padding: var(--tk-space-36);
    border-radius: var(--tk-size-8);
    background: #fff;
    color: var(--navy);
    box-shadow: 0 var(--tk-size-16) var(--tk-size-60) #0003;
  }
  dialog::backdrop {
    background: #101d32b8;
  }
  dialog h2 {
    font-size: var(--tk-type-heading-sm);
    margin-bottom: var(--tk-space-20);
  }
  dialog p {
    font-size: var(--tk-type-label);
  }
  dialog .eyebrow {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-16);
  }
  dialog label {
    display: block;
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    margin: var(--tk-space-24) var(--tk-space-0) var(--tk-space-8);
  }
  dialog textarea {
    width: var(--tk-relative-100-percent);
    height: var(--tk-size-184);
    resize: vertical;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    padding: var(--tk-space-12);
    border: var(--tk-size-1) solid #c6cdd8;
    border-radius: var(--tk-size-3);
    color: var(--navy);
  }
  dialog .button {
    font-size: var(--tk-type-label);
    margin-top: var(--tk-space-20);
  }
  .dialog-close {
    position: absolute;
    top: var(--tk-size-8);
    right: var(--tk-size-8);
    background: none;
    font-size: var(--tk-type-lead);
    width: var(--tk-size-44);
    height: var(--tk-size-44);
  }
  /* The history has four typographic eras; content is never gated by animation. */
  .page-history {
    background: var(--page-bg);
    color: var(--page-ink);
    transition:
      background-color 0.5s,
      color 0.5s;
  }
  .history-intro {
    padding-top: var(--tk-space-96);
    padding-bottom: var(--tk-space-96);
  }
  .history-intro h1 {
    max-width: var(--tk-size-1000);
    font-size: var(--tk-type-display);
  }
  .history-intro h1 span {
    color: #7650a9;
  }
  .history-intro .large-copy {
    font-size: var(--tk-type-lead);
    letter-spacing: var(--tk-tracking-tight);
    line-height: var(--tk-leading-body);
    margin: var(--tk-space-36) var(--tk-space-0) var(--tk-space-20);
  }
  .history-intro > p:not(.large-copy):not(.eyebrow) {
    max-width: var(--tk-size-560);
    font-size: var(--tk-type-label);
    color: #596170;
  }
  .history-intro .inline-link {
    margin-top: var(--tk-space-24);
  }
  .year-line {
    display: flex;
    align-items: center;
    gap: var(--tk-space-24);
    margin-top: var(--tk-space-72);
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
  }
  .year-line i {
    height: var(--tk-size-1);
    background: var(--line);
    flex: 1;
  }
  .era-nav {
    position: sticky;
    top: var(--tk-size-80);
    z-index: 45;
    display: flex;
    gap: var(--tk-space-40);
    justify-content: center;
    padding: var(--tk-space-12) var(--tk-space-20);
    background: var(--page-bg);
    color: var(--page-ink);
    border-block: var(--tk-size-1) solid #7882924d;
    transition:
      background-color 0.5s,
      color 0.5s;
  }
  .era-nav a {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    padding: var(--tk-space-8) var(--tk-space-8);
    min-height: var(--tk-size-40);
    display: flex;
    align-items: center;
    position: relative;
  }
  .era-nav a[aria-current]:after {
    content: '';
    position: absolute;
    bottom: var(--tk-size-4);
    left: var(--tk-size-8);
    right: var(--tk-size-8);
    height: var(--tk-size-2);
    background: currentColor;
  }
  .era {
    min-height: var(--tk-relative-90-vh);
    padding: var(--tk-space-112) var(--tk-space-0);
    scroll-margin-top: var(--tk-space-160);
    position: relative;
  }
  .era-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-112);
    align-items: center;
  }
  .era-copy h2 {
    font-size: var(--tk-type-display-sm);
    margin-bottom: var(--tk-space-28);
  }
  .era-copy > p:not(.eyebrow) {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
  }
  .source-details {
    margin-top: var(--tk-space-16);
    font-family: Inter, Arial, sans-serif;
    font-size: var(--tk-type-label);
  }
  .source-details summary {
    cursor: pointer;
    min-height: var(--tk-size-44);
    padding-block: var(--tk-space-8);
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
    list-style-position: inside;
  }
  .source-details .source-url {
    margin-top: var(--tk-space-12);
  }
  .source-details p {
    margin-top: var(--tk-space-16);
    line-height: var(--tk-leading-prose);
  }
  .era-web {
    background: #e9f0f4;
    color: #20374d;
  }
  .era-web h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: var(--tk-weight-regular);
    letter-spacing: var(--tk-tracking-tight);
    font-size: var(--tk-type-display-sm);
    line-height: var(--tk-leading-display);
  }
  .era-web .eyebrow {
    font-family: ui-monospace, Menlo, monospace;
    letter-spacing: var(--tk-tracking-normal);
    font-weight: var(--tk-weight-regular);
  }
  .retro-browser {
    border: var(--tk-size-1) solid #7b8c9b;
    border-radius: var(--tk-size-8);
    background: #fff;
    box-shadow: var(--tk-size-4) var(--tk-size-8) 0 #bccad6;
    font-family: Georgia, serif;
    transform: rotate(1.5deg);
  }
  .retro-title {
    display: flex;
    justify-content: space-between;
    padding: var(--tk-space-8) var(--tk-space-12);
    background: linear-gradient(#e7edf5, #becbda);
    border-bottom: var(--tk-size-1) solid #879caf;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    font-weight: var(--tk-weight-regular);
    font-family: Arial, sans-serif;
  }
  .retro-toolbar {
    display: flex;
    gap: var(--tk-space-16);
    align-items: center;
    background: #edf1f4;
    padding: var(--tk-space-8);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    font-weight: var(--tk-weight-regular);
    font-family: Arial, sans-serif;
    border-bottom: var(--tk-size-1) solid #c1ced9;
  }
  .retro-toolbar > span:last-child {
    border: var(--tk-size-1) solid #adbcc8;
    background: #fff;
    padding: var(--tk-space-4) var(--tk-space-8);
    flex: 1;
    overflow-wrap: anywhere;
  }
  .retro-content {
    padding: var(--tk-space-36) var(--tk-space-28) var(--tk-space-20);
    text-align: center;
  }
  .pixel-folder {
    display: grid;
    place-items: center;
    background: #a3c9eb;
    border: var(--tk-size-1) solid #5389b8;
    box-shadow: var(--tk-size-3) var(--tk-size-3) 0 #d5e4ef;
    width: var(--tk-size-72);
    height: var(--tk-size-48);
    margin: var(--tk-space-12) auto var(--tk-space-24);
    color: #3d6f98;
    font-size: var(--tk-type-title);
    position: relative;
  }
  .pixel-folder:before {
    content: '';
    width: var(--tk-size-28);
    height: var(--tk-size-8);
    position: absolute;
    left: calc(var(--tk-size-1) * -1);
    top: calc(var(--tk-size-8) * -1);
    background: #a3c9eb;
    border: var(--tk-size-1) solid #5389b8;
    border-bottom: none;
  }
  .retro-content h3 {
    font-family: Georgia, serif;
    font-weight: var(--tk-weight-regular);
    font-size: var(--tk-type-title);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
  }
  .storage-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tk-space-20);
    margin-top: var(--tk-space-28);
    font-family: Arial, sans-serif;
  }
  .storage-pair div {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-8);
  }
  .storage-pair b {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    color: #62768a;
  }
  .storage-pair strong {
    font-size: var(--tk-type-lead);
    letter-spacing: var(--tk-tracking-tight);
  }
  .storage-pair > span {
    color: #6d8caa;
    font-size: var(--tk-type-lead);
  }
  .storage-track {
    height: var(--tk-size-20);
    display: flex;
    gap: var(--tk-space-4);
    padding: var(--tk-space-4);
    background: #e8eef3;
    border: var(--tk-size-1) solid #a6b8c9;
    margin: var(--tk-space-28) var(--tk-space-4) var(--tk-space-16);
  }
  .storage-track i {
    flex: 1;
    background: linear-gradient(#a6cbee, #5c97c7);
  }
  .storage-track i:nth-last-child(-n + 3) {
    background: #d3dfeb;
  }
  .retro-content > p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    font-weight: var(--tk-weight-regular);
    font-family: Arial, sans-serif;
    color: #546c80;
  }
  .retro-caption {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    font-weight: var(--tk-weight-regular);
    font-family: Inter, Arial, sans-serif;
    padding: var(--tk-space-0) var(--tk-space-24) var(--tk-space-24);
    color: #53697b;
    margin-top: var(--tk-space-12);
  }
  .era-startup {
    background: #fff4e6;
    color: #382a1b;
  }
  .era-startup .eyebrow {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: var(--tk-weight-regular);
    letter-spacing: var(--tk-tracking-normal);
  }
  .era-startup h2 {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--tk-type-heading);
    letter-spacing: var(--tk-tracking-tight);
    line-height: var(--tk-leading-display);
  }
  .startup-card {
    background: #fffaf3;
    border: var(--tk-size-1) solid #b79a77;
    box-shadow: var(--tk-size-12) var(--tk-size-12) 0 #e5c8a4;
    padding: var(--tk-space-40);
    transform: rotate(-2deg);
    font-family: ui-monospace, Menlo, monospace;
  }
  .startup-card-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
  }
  .yc-large {
    height: var(--tk-size-60);
    width: var(--tk-size-60);
    display: grid;
    place-items: center;
    color: #fff;
    background: #f26522;
    font-size: var(--tk-type-heading);
    line-height: var(--tk-leading-body);
    font-weight: var(--tk-weight-regular);
    font-family: Arial, sans-serif;
  }
  .startup-card h3 {
    font-size: var(--tk-type-display-sm);
    line-height: var(--tk-leading-display);
    font-weight: var(--tk-weight-bold);
    font-family: ui-monospace, Menlo, monospace;
    letter-spacing: var(--tk-tracking-tight);
    margin: var(--tk-space-36) var(--tk-space-0) var(--tk-space-16);
  }
  .startup-card h3 span {
    color: #f26522;
  }
  .startup-card > p {
    font-size: var(--tk-type-lead);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
  }
  .startup-rule {
    height: var(--tk-size-1);
    background: #d6c0a4;
    margin-top: var(--tk-space-48);
  }
  .startup-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--tk-space-16);
    font-size: var(--tk-type-label);
    margin-top: var(--tk-space-20);
  }
  .era-platform {
    background: #f5f6f8;
    color: var(--navy);
  }
  .platform-archive {
    padding: var(--tk-space-32);
    background: #fff;
    box-shadow: 0 var(--tk-size-20) var(--tk-size-56) #1c294014;
    border: var(--tk-size-1) solid #dfe4ed;
    transform: rotate(1deg);
  }
  .archive-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--tk-space-16);
    padding-bottom: var(--tk-space-24);
    border-bottom: var(--tk-size-1) solid #d9e0e8;
  }
  .archive-top img {
    width: var(--tk-size-140);
    height: var(--tk-size-36);
    object-fit: contain;
  }
  .archive-top > span {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    max-width: var(--tk-size-92);
  }
  .archive-statement {
    font-size: var(--tk-type-display-sm);
    letter-spacing: var(--tk-tracking-tight);
    line-height: var(--tk-leading-display);
    font-weight: var(--tk-weight-bold);
    padding: var(--tk-space-48) var(--tk-space-0);
  }
  .archive-statement em {
    font-style: normal;
    color: var(--purple);
  }
  .archive-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--tk-space-20);
    font-size: var(--tk-type-body);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-tight);
    border-top: var(--tk-size-1) solid #d9e0e8;
    padding-top: var(--tk-space-24);
  }
  .platform-archive > p {
    font-size: var(--tk-type-label);
    margin-top: var(--tk-space-16);
    color: var(--muted);
  }
  .era-agents {
    background: var(--navy);
    color: #fff;
  }
  .era-agents .eyebrow {
    color: #d2bbea;
  }
  .era-agents .era-copy h2 span {
    color: var(--orange);
  }
  .era-agents .era-copy > p {
    color: #d5dce7;
  }
  .era-agents .button {
    margin-top: var(--tk-space-28);
  }
  .era-agents .inline-link {
    font-size: var(--tk-type-label);
    display: flex;
    width: max-content;
    max-width: var(--tk-relative-100-percent);
    margin-top: var(--tk-space-20);
  }
  .agent-story-card {
    background: #26354d;
    border: var(--tk-size-1) solid #55617a;
    padding: var(--tk-space-32);
    border-radius: var(--tk-size-8);
    transform: rotate(-2deg);
    box-shadow: 0 var(--tk-size-24) var(--tk-size-64) #0b142a50;
  }
  .agent-story-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    color: #d1b7ed;
  }
  .agent-story-top > span:first-child {
    font-size: var(--tk-type-title);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-tight);
  }
  .agent-story-card > p {
    font-size: var(--tk-type-lead);
    letter-spacing: var(--tk-tracking-tight);
    line-height: var(--tk-leading-heading);
    margin: var(--tk-space-28) var(--tk-space-0);
    border-bottom: var(--tk-size-1) solid #596378;
    padding-bottom: var(--tk-space-28);
  }
  .agent-story-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tk-space-16);
    font-size: var(--tk-type-label);
  }
  .agent-story-flow > span:nth-child(even) {
    color: #9a80ba;
    font-size: var(--tk-type-lead);
    line-height: var(--tk-leading-display);
  }
  .agent-story-flow > strong {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-regular);
    border: var(--tk-size-1) solid #7e6b99;
    padding: var(--tk-space-12) var(--tk-space-20);
    border-radius: var(--tk-size-4);
    text-align: center;
  }
  .agent-story-flow img {
    width: var(--tk-size-148);
    height: var(--tk-size-36);
    object-fit: contain;
  }
  .agent-story-bottom {
    display: block;
    text-align: center;
    color: #b5bed1;
    font-size: var(--tk-type-label);
    margin-top: var(--tk-space-32);
  }
  .history-outro {
    color: var(--navy);
    background: #fff;
    width: var(--tk-relative-100-percent);
    padding-inline: max(
      var(--tk-space-48),
      calc((var(--tk-relative-100-percent) - var(--tk-space-160)) / 2)
    );
  }
  .history-outro h2 {
    margin-bottom: var(--tk-space-24);
  }
  .history-outro p:not(.eyebrow) {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-20);
  }
  .history-outro .source-url {
    width: fit-content;
  }
  .history-outro .button {
    margin-top: var(--tk-space-40);
    font-size: var(--tk-type-label);
  }
  .page-history[data-era='web'] {
    --page-bg: #e9f0f4;
    --page-ink: #20374d;
  }
  .page-history[data-era='startup'] {
    --page-bg: #fff4e6;
    --page-ink: #382a1b;
  }
  .page-history[data-era='platform'] {
    --page-bg: #f5f6f8;
    --page-ink: #1c2940;
  }
  .page-history[data-era='agents'] {
    --page-bg: #1c2940;
    --page-ink: #fff;
  }
  .page-history .site-header {
    background: var(--page-bg);
    color: var(--page-ink);
    border-bottom-color: #7882924d;
    transition:
      background-color 0.5s,
      color 0.5s;
  }
  .page-history .brand > span {
    color: inherit;
    border-left-color: #78829270;
  }
  .page-history .nav-cta {
    border-color: #78829270;
  }
  .page-history .logo-light {
    display: none;
  }
  .page-history .logo-dark {
    display: block;
  }
  .page-history[data-era='agents'] .logo-light {
    display: block;
  }
  .page-history[data-era='agents'] .logo-dark {
    display: none;
  }
  .guide-hero {
    padding-block: var(--tk-space-96) var(--tk-space-80);
  }
  .guide-hero h1 {
    font-size: var(--tk-type-display-sm);
  }
  .guide-hero > p:not(.eyebrow) {
    max-width: var(--tk-size-572);
    font-size: var(--tk-type-body);
    color: var(--muted);
    margin-top: var(--tk-space-28);
  }
  .guide-layout {
    display: grid;
    grid-template-columns: var(--tk-size-232) 1fr;
    gap: var(--tk-space-96);
    padding-bottom: var(--tk-space-112);
  }
  .guide-nav {
    align-self: start;
    position: sticky;
    top: var(--tk-size-124);
    padding-top: var(--tk-space-28);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .guide-nav .eyebrow {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-16);
    color: #746883;
  }
  .guide-nav nav {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-4);
  }
  .guide-nav a {
    font-size: var(--tk-type-label);
    min-height: var(--tk-size-40);
    padding: var(--tk-space-8) var(--tk-space-0);
  }
  .guide-nav a:hover {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .guide-content {
    min-width: 0;
    max-width: var(--tk-size-800);
  }
  .guide-content > section {
    border-top: var(--tk-size-1) solid var(--line);
    padding: var(--tk-space-28) var(--tk-space-0) var(--tk-space-56);
    scroll-margin-top: var(--tk-space-112);
  }
  .guide-step {
    display: block;
    font-size: var(--tk-type-label);
    color: #746883;
    margin-bottom: var(--tk-space-28);
  }
  .guide-content h2 {
    font-size: var(--tk-type-heading-sm);
    letter-spacing: var(--tk-tracking-tight);
    line-height: var(--tk-leading-display);
    margin-bottom: var(--tk-space-24);
  }
  .guide-content p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: var(--muted);
  }
  .guide-note {
    padding: var(--tk-space-24) var(--tk-space-24);
    background: var(--mist);
    border-left: var(--tk-size-3) solid var(--purple);
    margin-top: var(--tk-space-28);
  }
  .guide-note strong {
    font-size: var(--tk-type-label);
  }
  .guide-note p {
    margin-top: var(--tk-space-8);
    font-size: var(--tk-type-label);
  }
  .guide-prompt {
    background: var(--navy);
    color: #fff;
    border-radius: var(--tk-size-4);
    padding: var(--tk-space-28);
    margin-bottom: var(--tk-space-24);
  }
  .guide-prompt .full-prompt-text {
    color: #e9edf3;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    overflow-wrap: anywhere;
  }
  .guide-prompt .button {
    margin-top: var(--tk-space-24);
    font-size: var(--tk-type-label);
  }
  .guide-content > section > .source-url {
    margin-top: var(--tk-space-20);
  }
  .check-list {
    list-style: none;
    padding: var(--tk-space-0);
    margin: var(--tk-space-24) var(--tk-space-0);
  }
  .check-list li {
    padding: var(--tk-space-12) var(--tk-space-0) var(--tk-space-12) var(--tk-space-28);
    position: relative;
    border-bottom: var(--tk-size-1) solid #e4e7ec;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
  }
  .check-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #7650a9;
  }
  .scope-list {
    margin: var(--tk-space-0);
  }
  .scope-list > div {
    display: grid;
    grid-template-columns: var(--tk-size-152) 1fr;
    gap: var(--tk-space-24);
    border-top: var(--tk-size-1) solid var(--line);
    padding: var(--tk-space-20) var(--tk-space-0);
  }
  .scope-list dt {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
  }
  .scope-list dd {
    margin: var(--tk-space-0);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: var(--muted);
  }
  .resource-list article {
    padding: var(--tk-space-24) var(--tk-space-0);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .resource-list h3 {
    font-size: var(--tk-type-body);
    margin-bottom: var(--tk-space-12);
  }
  .resource-list p {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-16);
  }
  .guide-end {
    padding: var(--tk-space-36);
    background: var(--cream);
  }
  .guide-end h2 {
    font-size: var(--tk-type-title);
  }
  @media (min-width: 1500px) {
    .hero {
      padding-block: var(--tk-space-96) var(--tk-space-80);
    }
  }
  @media (max-width: 1100px) {
    .wrap {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-64));
    }
    .header-inner {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-48));
    }
    #site-nav {
      gap: var(--tk-space-20);
    }
    .brand > span {
      display: none;
    }
    .section {
      padding-block: var(--tk-space-80);
    }
    .section-heading,
    .platform-section .section-heading {
      gap: var(--tk-space-48);
    }
    .section-heading h2 {
      font-size: var(--tk-type-heading);
    }
    .demo-grid {
      padding: var(--tk-space-36) var(--tk-space-28);
      grid-template-columns: 1.15fr var(--tk-size-60) 1fr;
    }
    .invite-card {
      padding: var(--tk-space-24);
    }
    .invite-card h3,
    .friend-card h3 {
      font-size: var(--tk-type-title);
    }
    .invite-count {
      gap: var(--tk-space-8);
    }
    .invite-count span {
      font-size: var(--tk-type-label);
    }
    .invite-dots {
      gap: var(--tk-space-4);
    }
    .story-layout {
      gap: var(--tk-space-40);
    }
    .story-layout h2 {
      font-size: var(--tk-type-heading);
    }
    .story-art {
      min-height: var(--tk-size-440);
    }
    .story-window.new strong {
      font-size: var(--tk-type-lead);
    }
    .story-window.middle strong {
      font-size: var(--tk-type-lead);
    }
    .story-window.old strong {
      font-size: var(--tk-type-lead);
    }
    .story-window.new > span:last-child {
      font-size: var(--tk-type-label);
    }
    .era-grid {
      gap: var(--tk-space-56);
    }
    .era-startup h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .era-web h2 {
      font-size: var(--tk-type-heading);
    }
    .era-copy h2 {
      font-size: var(--tk-type-heading);
    }
    .startup-card {
      padding: var(--tk-space-28);
    }
    .archive-statement {
      font-size: var(--tk-type-heading);
    }
    .guide-layout {
      grid-template-columns: var(--tk-size-192) 1fr;
      gap: var(--tk-space-56);
    }
    .footer-top {
      gap: var(--tk-space-36);
    }
  }
  @media (max-width: 1024px) {
    html {
      scroll-padding-top: var(--tk-space-96);
    }
    .header-inner {
      height: var(--tk-size-72);
      gap: var(--tk-space-16);
    }
    .brand > span {
      display: block;
    }
    .menu-toggle {
      display: flex;
      align-items: center;
      gap: var(--tk-space-12);
      background: transparent;
      color: inherit;
      font-size: var(--tk-type-label);
      padding: var(--tk-space-8) var(--tk-space-0);
      min-width: var(--tk-size-64);
      min-height: var(--tk-size-44);
    }
    .menu-toggle span {
      font-size: var(--tk-type-body);
    }
    #site-nav {
      display: none;
      position: absolute;
      top: var(--tk-size-72);
      left: 0;
      right: 0;
      background: var(--navy);
      border-bottom: var(--tk-size-1) solid #69758b;
      color: #fff;
      padding: var(--tk-space-20) var(--tk-space-32) var(--tk-space-28);
      align-items: stretch;
      gap: var(--tk-space-4);
      font-size: var(--tk-type-label);
    }
    #site-nav.open {
      display: flex;
      flex-direction: column;
    }
    #site-nav a {
      padding-block: var(--tk-space-12);
    }
    .nav-cta {
      margin-top: var(--tk-space-8);
      justify-content: space-between;
    }
    .page-history #site-nav {
      background: var(--page-bg);
      color: var(--page-ink);
    }
    .hero {
      padding: var(--tk-space-56) var(--tk-space-0) var(--tk-space-48);
    }
    .hero h1 {
      font-size: var(--tk-type-display-sm);
    }
    .hero-description {
      font-size: var(--tk-type-label);
      max-width: var(--tk-size-592);
    }
    .hero-index {
      display: none;
    }
    .section-heading,
    .platform-section .section-heading {
      gap: var(--tk-space-28);
      grid-template-columns: 1fr;
    }
    .section-heading > p,
    .section-heading > div > p:not(.eyebrow) {
      max-width: var(--tk-size-600);
      font-size: var(--tk-type-label);
    }
    .section-heading h2 {
      font-size: var(--tk-type-heading);
    }
    .demo-grid {
      padding: var(--tk-space-32) var(--tk-space-24);
      grid-template-columns: 1fr var(--tk-size-36) 0.9fr;
    }
    .invite-card {
      padding: var(--tk-space-20) var(--tk-space-16);
    }
    .invite-card h3 {
      font-size: var(--tk-type-title);
    }
    .friend-card h3 {
      font-size: var(--tk-type-title);
    }
    .friend-card {
      padding: var(--tk-space-24) var(--tk-space-16) var(--tk-space-16);
    }
    .demo-connection span {
      display: none;
    }
    .invite-count {
      align-items: flex-start;
    }
    .invite-count > strong {
      font-size: var(--tk-type-heading-sm);
    }
    .invite-count span {
      max-width: var(--tk-size-124);
    }
    .invite-dots {
      display: none !important;
    }
    .demo-product {
      display: none;
    }
    .demo-link > span {
      font-size: var(--tk-type-label);
    }
    .code-row {
      font-size: var(--tk-type-label);
    }
    .steps {
      gap: var(--tk-space-24);
      margin-top: var(--tk-space-48);
    }
    .steps h3 {
      font-size: var(--tk-type-body);
    }
    .steps p {
      font-size: var(--tk-type-label);
    }
    .engine-node {
      padding: var(--tk-space-32);
    }
    .engine-node h3 {
      font-size: var(--tk-type-body);
    }
    .engine-node p {
      font-size: var(--tk-type-label);
    }
    .capabilities {
      gap: var(--tk-space-24);
    }
    .capabilities h3 {
      font-size: var(--tk-type-body);
    }
    .capabilities p {
      font-size: var(--tk-type-label);
    }
    .story-layout {
      grid-template-columns: 1fr;
      gap: var(--tk-space-48);
    }
    .story-layout h2 {
      font-size: var(--tk-type-heading);
    }
    .story-layout > div {
      max-width: var(--tk-size-580);
    }
    .story-art {
      max-width: var(--tk-size-520);
      width: var(--tk-relative-100-percent);
      margin-inline: auto;
      min-height: var(--tk-size-460);
    }
    .story-window.old strong {
      font-size: var(--tk-type-lead);
    }
    .story-window.middle strong {
      font-size: var(--tk-type-title);
    }
    .story-window.new strong {
      font-size: var(--tk-type-lead);
    }
    .story-window.new > span:last-child {
      font-size: var(--tk-type-label);
    }
    .story-art-caption {
      bottom: calc(var(--tk-size-4) * -1);
    }
    .faq-layout {
      grid-template-columns: 1fr;
      gap: var(--tk-space-40);
    }
    .faq-layout h2 {
      font-size: var(--tk-type-heading);
    }
    .case-links {
      gap: var(--tk-space-28);
    }
    .brand-name {
      font-size: var(--tk-type-title);
    }
    .ae-name {
      font-size: var(--tk-type-lead);
    }
    .closing h2 {
      font-size: var(--tk-type-display-sm);
    }
    .closing-rays {
      opacity: 0.4;
      right: calc(var(--tk-size-320) * -1);
    }
    .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: var(--tk-space-40);
    }
    .footer-resources {
      grid-column: 1/-1;
    }
    .footer-resources .source-url {
      max-width: var(--tk-size-552);
    }
    .footer-bottom {
      grid-template-columns: 1fr;
      gap: var(--tk-space-20);
      margin-top: var(--tk-space-36);
    }
    .history-intro {
      padding: var(--tk-space-80) var(--tk-space-0) var(--tk-space-64);
    }
    .history-intro h1 {
      font-size: var(--tk-type-display-sm);
    }
    .era-nav {
      top: var(--tk-size-72);
    }
    .era {
      padding: var(--tk-space-80) var(--tk-space-0);
      scroll-margin-top: var(--tk-space-128);
    }
    .era-grid {
      grid-template-columns: 1fr;
      gap: var(--tk-space-48);
    }
    .era-copy {
      max-width: var(--tk-size-632);
    }
    .era-copy h2 {
      font-size: var(--tk-type-display-sm);
    }
    .era-startup h2 {
      font-size: var(--tk-type-heading);
    }
    .era-web h2 {
      font-size: var(--tk-type-display-sm);
    }
    .era-grid > div:not(.era-copy) {
      max-width: var(--tk-size-492);
      width: var(--tk-relative-100-percent);
      margin-inline: auto;
    }
    .era-copy > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .retro-browser {
      margin-bottom: var(--tk-space-8);
    }
    .history-outro {
      padding-inline: var(--tk-space-32);
    }
    .guide-hero {
      padding: var(--tk-space-72) var(--tk-space-0) var(--tk-space-56);
    }
    .guide-hero h1 {
      font-size: var(--tk-type-display-sm);
    }
    .guide-layout {
      grid-template-columns: 1fr;
      gap: var(--tk-space-0);
    }
    .guide-nav {
      position: static;
      margin-bottom: var(--tk-space-48);
    }
    .guide-nav nav {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--tk-space-8) var(--tk-space-24);
    }
    .guide-nav .eyebrow {
      margin-bottom: var(--tk-space-8);
    }
    .guide-content {
      max-width: none;
    }
  }
  @media (max-width: 520px) {
    .wrap {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-40));
    }
    .header-inner {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-40));
      height: var(--tk-size-68);
    }
    .brand {
      gap: var(--tk-space-8);
    }
    .brand img {
      width: var(--tk-size-112);
      height: var(--tk-size-28);
    }
    .brand > span {
      padding-left: var(--tk-space-8);
      font-size: var(--tk-type-label);
    }
    #site-nav {
      top: var(--tk-size-68);
      padding-inline: var(--tk-space-20);
    }
    .hero {
      padding: var(--tk-space-48) var(--tk-space-0) var(--tk-space-36);
    }
    .hero .eyebrow {
      font-size: var(--tk-type-label);
      letter-spacing: var(--tk-tracking-wide);
      gap: var(--tk-space-8);
      margin-bottom: var(--tk-space-24);
    }
    .hero h1 {
      font-size: var(--tk-type-heading);
      letter-spacing: var(--tk-tracking-tight);
      line-height: var(--tk-leading-display);
    }
    .hero-description {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
      margin: var(--tk-space-24) auto var(--tk-space-28);
    }
    .hero-description br {
      display: none;
    }
    .prompt-box {
      border-radius: var(--tk-size-8);
    }
    .prompt-top {
      padding: var(--tk-space-12) var(--tk-space-16);
      font-size: var(--tk-type-label);
      gap: var(--tk-space-8);
    }
    .small-tag {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-4) var(--tk-space-8);
    }
    .prompt-mark {
      font-size: var(--tk-type-label);
    }
    .prompt-top > span:first-child {
      gap: var(--tk-space-8);
    }
    .prompt-readable {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-20) var(--tk-space-16) var(--tk-space-20);
      line-height: var(--tk-leading-prose);
    }
    .prompt-readable br {
      display: none;
    }
    .prompt-actions {
      padding-inline: var(--tk-space-16);
      gap: var(--tk-space-4);
    }
    .prompt-actions .primary {
      width: var(--tk-relative-100-percent);
      font-size: var(--tk-type-label);
    }
    .prompt-detail {
      flex-basis: var(--tk-relative-100-percent);
      text-align: center;
      min-width: 0;
    }
    .prompt-detail summary {
      justify-content: center;
      font-size: var(--tk-type-label);
      min-height: var(--tk-size-44);
    }
    .prompt-detail[open] {
      text-align: left;
    }
    .prompt-full p {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-12);
    }
    .prompt-foot {
      padding: var(--tk-space-4) var(--tk-space-16) var(--tk-space-16);
      font-size: var(--tk-type-label);
      text-align: center;
    }
    .hero-notes {
      font-size: var(--tk-type-label);
      gap: var(--tk-space-0);
      flex-direction: column;
      margin-top: var(--tk-space-16);
    }
    .hero-notes > span[aria-hidden] {
      display: none;
    }
    .hero-notes a {
      min-height: var(--tk-size-40);
    }
    .hero-notes .yc-mark {
      width: var(--tk-size-20);
      height: var(--tk-size-20);
      font-size: var(--tk-type-label);
    }
    .section {
      padding-block: var(--tk-space-64);
    }
    .eyebrow {
      font-size: var(--tk-type-label);
      margin-bottom: var(--tk-space-20);
      letter-spacing: var(--tk-tracking-wide);
    }
    h2,
    .section-heading h2,
    .platform-section .section-heading h2,
    .faq-layout h2 {
      font-size: var(--tk-type-heading-sm);
      line-height: var(--tk-leading-display);
    }
    .section-heading {
      gap: var(--tk-space-24);
      margin-bottom: var(--tk-space-28);
    }
    .section-heading > p,
    .section-heading > div > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
    }
    .demo-toolbar {
      padding: var(--tk-space-0) var(--tk-space-16);
      height: var(--tk-size-56);
      font-size: var(--tk-type-body);
    }
    .demo-badge {
      font-size: var(--tk-type-label);
    }
    .demo-grid {
      grid-template-columns: 1fr;
      padding: var(--tk-space-24) var(--tk-space-20) var(--tk-space-28);
      gap: var(--tk-space-16);
    }
    .invite-card {
      padding: var(--tk-space-24);
    }
    .invite-card h3 {
      font-size: var(--tk-type-title);
    }
    .invite-card > p {
      font-size: var(--tk-type-label);
    }
    .card-topline {
      font-size: var(--tk-type-label);
      margin-bottom: var(--tk-space-24);
    }
    .invite-count {
      gap: var(--tk-space-16);
      align-items: center;
    }
    .invite-count > strong {
      font-size: var(--tk-type-heading);
    }
    .invite-count span {
      font-size: var(--tk-type-label);
      max-width: none;
    }
    .invite-dots {
      display: flex !important;
    }
    .demo-link > span {
      font-size: var(--tk-type-label);
    }
    .code-row {
      font-size: var(--tk-type-label);
    }
    .demo-connection {
      height: var(--tk-size-32);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--tk-space-8);
    }
    .demo-connection svg {
      width: var(--tk-size-44);
      transform: rotate(90deg);
    }
    .demo-connection span {
      display: block;
      font-size: var(--tk-type-label);
    }
    .friend-card {
      transform: rotate(1.5deg);
      padding: var(--tk-space-24) var(--tk-space-20) var(--tk-space-16);
    }
    .friend-card h3 {
      font-size: var(--tk-type-title);
    }
    .friend-card > p {
      font-size: var(--tk-type-label);
    }
    .friend-avatars {
      margin: var(--tk-space-16) var(--tk-space-0) var(--tk-space-12);
    }
    .demo-receipt {
      padding: var(--tk-space-16) var(--tk-space-16);
      flex-wrap: wrap;
      gap: var(--tk-space-8) var(--tk-space-8);
      align-items: flex-start;
    }
    .demo-receipt p {
      font-size: var(--tk-type-label);
      flex-basis: calc(var(--tk-relative-100-percent) - var(--tk-size-40));
      padding-top: var(--tk-space-4);
    }
    .demo-receipt .text-button {
      margin-left: var(--tk-space-32);
      min-height: var(--tk-size-36);
      font-size: var(--tk-type-label);
    }
    .figure-note {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
      margin-top: var(--tk-space-12);
    }
    .steps {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--tk-space-0);
      margin: var(--tk-space-36) var(--tk-space-0) var(--tk-space-16);
    }
    .steps li {
      padding: var(--tk-space-20) var(--tk-space-0) var(--tk-space-28);
      position: relative;
    }
    .step-number {
      position: absolute;
      top: var(--tk-size-24);
      left: 0;
      font-size: var(--tk-type-label);
      margin: var(--tk-space-0);
    }
    .steps h3,
    .steps p {
      margin-left: var(--tk-space-40);
    }
    .steps h3 {
      font-size: var(--tk-type-body);
      margin-bottom: var(--tk-space-12);
    }
    .steps p {
      font-size: var(--tk-type-label);
      max-width: none;
    }
    .how-section .inline-link {
      font-size: var(--tk-type-label);
    }
    .engine-diagram {
      grid-template-columns: 1fr;
      overflow: visible;
    }
    .engine-diagram:before {
      display: none;
    }
    .engine-node {
      padding: var(--tk-space-28) var(--tk-space-24);
      min-height: 0;
      align-items: center;
      text-align: center;
    }
    .engine-node:first-child {
      border-radius: var(--tk-size-8) var(--tk-size-8) 0 0;
      padding-bottom: var(--tk-space-36);
    }
    .engine-node:last-child {
      padding-top: var(--tk-space-36);
    }
    .engine-plus {
      position: relative;
      height: var(--tk-size-44);
      width: var(--tk-size-44);
      font-size: var(--tk-type-lead);
      margin-block: calc(var(--tk-space-20) * -1);
    }
    .engine-node h3 {
      font-size: var(--tk-type-body);
      margin-top: var(--tk-space-16);
    }
    .engine-node p {
      font-size: var(--tk-type-label);
    }
    .engine-icon {
      font-size: var(--tk-type-title);
    }
    .capabilities {
      grid-template-columns: 1fr;
      gap: var(--tk-space-24);
      margin-top: var(--tk-space-32);
    }
    .capabilities article {
      padding-left: var(--tk-space-36);
      padding-top: var(--tk-space-20);
    }
    .capabilities article > span {
      position: absolute;
      top: var(--tk-size-24);
      left: 0;
      font-size: var(--tk-type-label);
    }
    .capabilities h3 {
      font-size: var(--tk-type-body);
    }
    .capabilities p {
      font-size: var(--tk-type-label);
    }
    .story-layout {
      gap: var(--tk-space-24);
    }
    .story-layout h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .story-layout p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      margin-top: var(--tk-space-20);
    }
    .story-layout .button {
      font-size: var(--tk-type-label);
      gap: var(--tk-space-12);
      padding: var(--tk-space-12) var(--tk-space-16);
      margin-top: var(--tk-space-24);
    }
    .story-art {
      min-height: var(--tk-size-388);
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-12));
      margin-top: var(--tk-space-28);
    }
    .story-window {
      width: var(--tk-relative-93-percent);
    }
    .story-window.old strong {
      font-size: var(--tk-type-lead);
      padding: var(--tk-space-24) var(--tk-space-16) var(--tk-space-8);
    }
    .retro-link {
      padding-inline: var(--tk-space-16);
      font-size: var(--tk-type-label);
    }
    .story-window.middle {
      top: var(--tk-size-120);
      padding: var(--tk-space-20);
    }
    .story-company-logo {
      width: var(--tk-size-160);
      margin-top: var(--tk-space-4);
    }
    .story-window.middle strong {
      font-size: var(--tk-type-lead);
    }
    .story-window.new {
      top: var(--tk-size-236);
      padding: var(--tk-space-20);
    }
    .story-window.new strong {
      font-size: var(--tk-type-lead);
    }
    .story-window.new > span:last-child {
      font-size: var(--tk-type-label);
    }
    .story-art-caption {
      font-size: var(--tk-type-label);
      bottom: calc(var(--tk-size-8) * -1);
      left: 0;
    }
    .case-links {
      grid-template-columns: 1fr;
      gap: var(--tk-space-28);
    }
    .case-links article {
      padding-top: var(--tk-space-24);
    }
    .brand-name {
      font-size: var(--tk-type-title);
    }
    .ae-name {
      font-size: var(--tk-type-title);
      padding: var(--tk-space-0);
    }
    .case-links .source-url {
      font-size: var(--tk-type-label);
    }
    .faq-layout {
      gap: var(--tk-space-28);
    }
    .faq-list summary {
      font-size: var(--tk-type-label);
      padding-block: var(--tk-space-20);
    }
    .faq-list p {
      font-size: var(--tk-type-label);
      padding-right: var(--tk-space-16);
    }
    .closing {
      padding-block: var(--tk-space-64) var(--tk-space-72);
    }
    .closing h2 {
      font-size: var(--tk-type-heading);
      max-width: var(--tk-size-352);
    }
    .closing .eyebrow {
      max-width: var(--tk-size-280);
      font-size: var(--tk-type-label);
    }
    .closing p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      margin: var(--tk-space-24) var(--tk-space-0) var(--tk-space-28);
      max-width: var(--tk-size-260);
    }
    .closing .button {
      font-size: var(--tk-type-label);
    }
    .closing .inline-link {
      margin: var(--tk-space-16) var(--tk-space-0) var(--tk-space-0);
      display: flex;
      width: fit-content;
      font-size: var(--tk-type-label);
    }
    .closing-rays {
      opacity: 0.35;
      right: calc(var(--tk-size-412) * -1);
      top: var(--tk-size-120);
    }
    .site-footer {
      padding: var(--tk-space-48) var(--tk-space-0) var(--tk-space-28);
    }
    .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: var(--tk-space-36) var(--tk-space-20);
    }
    .footer-top p {
      font-size: var(--tk-type-body);
      margin-top: var(--tk-space-16);
    }
    .footer-top h2 {
      font-size: var(--tk-type-label);
      margin-bottom: var(--tk-space-12);
    }
    .footer-top > div > a:not(.brand) {
      font-size: var(--tk-type-label);
    }
    .footer-resources .source-url {
      font-size: var(--tk-type-label) !important;
    }
    .footer-bottom {
      gap: var(--tk-space-24);
      font-size: var(--tk-type-label);
      margin-top: var(--tk-space-28);
    }
    .footer-bottom > p,
    .footer-bottom .source-url {
      font-size: var(--tk-type-label);
    }
    .footer-bottom > div {
      column-gap: var(--tk-space-12);
    }
    .toast {
      bottom: var(--tk-size-16);
      font-size: var(--tk-type-label);
      padding: var(--tk-space-12) var(--tk-space-16);
    }
    .history-intro {
      padding-block: var(--tk-space-56) var(--tk-space-48);
    }
    .history-intro h1 {
      font-size: var(--tk-type-heading);
      line-height: var(--tk-leading-display);
    }
    .history-intro .large-copy {
      font-size: var(--tk-type-lead);
      margin: var(--tk-space-28) var(--tk-space-0) var(--tk-space-20);
    }
    .history-intro > p:not(.large-copy):not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .history-intro .inline-link {
      font-size: var(--tk-type-label);
      margin-top: var(--tk-space-24);
    }
    .year-line {
      gap: var(--tk-space-12);
      margin-top: var(--tk-space-40);
      font-size: var(--tk-type-label);
    }
    .era-nav {
      top: var(--tk-size-68);
      gap: var(--tk-space-16);
      padding: var(--tk-space-4) var(--tk-space-16);
    }
    .era-nav a {
      font-size: var(--tk-type-label);
      padding-inline: var(--tk-space-8);
    }
    .era {
      padding: var(--tk-space-64) var(--tk-space-0) var(--tk-space-72);
      scroll-margin-top: var(--tk-space-112);
    }
    .era-grid {
      gap: var(--tk-space-40);
    }
    .era-copy h2 {
      font-size: var(--tk-type-heading-sm);
      margin-bottom: var(--tk-space-24);
    }
    .era-web h2 {
      font-size: var(--tk-type-heading);
    }
    .era-startup h2 {
      font-size: var(--tk-type-heading-sm);
      line-height: var(--tk-leading-display);
      letter-spacing: var(--tk-tracking-tight);
    }
    .era-copy > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
    }
    .source-details {
      font-size: var(--tk-type-label);
      margin-top: var(--tk-space-12);
    }
    .source-url {
      font-size: var(--tk-type-label);
    }
    .retro-browser {
      max-width: calc(var(--tk-relative-100-percent) - var(--tk-size-12)) !important;
      box-shadow: var(--tk-size-4) var(--tk-size-4) 0 #bccad6;
    }
    .retro-title {
      font-size: var(--tk-type-label);
    }
    .retro-toolbar {
      font-size: var(--tk-type-label);
      gap: var(--tk-space-8);
    }
    .retro-content {
      padding: var(--tk-space-28) var(--tk-space-16) var(--tk-space-16);
    }
    .retro-content h3 {
      font-size: var(--tk-type-lead);
    }
    .storage-pair {
      gap: var(--tk-space-16);
      margin-top: var(--tk-space-24);
    }
    .storage-pair strong {
      font-size: var(--tk-type-body);
    }
    .storage-pair b {
      font-size: var(--tk-type-label);
    }
    .retro-caption {
      padding: var(--tk-space-0) var(--tk-space-16) var(--tk-space-20);
      font-size: var(--tk-type-label);
    }
    .startup-card {
      padding: var(--tk-space-28);
      max-width: calc(var(--tk-relative-100-percent) - var(--tk-size-12)) !important;
      box-shadow: var(--tk-size-8) var(--tk-size-8) 0 #e5c8a4;
    }
    .startup-card h3 {
      font-size: var(--tk-type-display-sm);
    }
    .startup-card > p {
      font-size: var(--tk-type-lead);
    }
    .startup-card-head {
      font-size: var(--tk-type-label);
    }
    .platform-archive {
      padding: var(--tk-space-24);
    }
    .archive-statement {
      font-size: var(--tk-type-heading);
      padding-block: var(--tk-space-36);
    }
    .archive-bottom {
      font-size: var(--tk-type-label);
      gap: var(--tk-space-8);
    }
    .archive-top img {
      width: var(--tk-size-120);
      height: var(--tk-size-32);
    }
    .archive-top > span {
      font-size: var(--tk-type-label);
    }
    .agent-story-card {
      padding: var(--tk-space-24);
    }
    .agent-story-card > p {
      font-size: var(--tk-type-lead);
    }
    .agent-story-flow > strong {
      font-size: var(--tk-type-label);
    }
    .agent-story-bottom {
      font-size: var(--tk-type-label);
    }
    .era-agents .button {
      font-size: var(--tk-type-label);
    }
    .era-agents .inline-link {
      font-size: var(--tk-type-label);
    }
    .history-outro {
      width: var(--tk-relative-100-percent);
      padding-inline: var(--tk-space-20);
    }
    .history-outro h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .history-outro p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .history-outro .button {
      font-size: var(--tk-type-label);
      gap: var(--tk-space-16);
      padding-inline: var(--tk-space-20);
      margin-top: var(--tk-space-28);
    }
    .guide-hero {
      padding: var(--tk-space-56) var(--tk-space-0) var(--tk-space-48);
    }
    .guide-hero h1 {
      font-size: var(--tk-type-heading);
    }
    .guide-hero > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      margin-top: var(--tk-space-24);
    }
    .guide-layout {
      padding-bottom: var(--tk-space-64);
    }
    .guide-nav {
      margin-bottom: var(--tk-space-36);
      padding-top: var(--tk-space-20);
    }
    .guide-nav nav {
      column-gap: var(--tk-space-20);
      row-gap: var(--tk-space-0);
    }
    .guide-nav a {
      font-size: var(--tk-type-label);
    }
    .guide-content > section {
      padding: var(--tk-space-24) var(--tk-space-0) var(--tk-space-40);
    }
    .guide-content h2 {
      font-size: var(--tk-type-title);
      line-height: var(--tk-leading-heading);
      margin-bottom: var(--tk-space-20);
    }
    .guide-step {
      font-size: var(--tk-type-label);
      margin-bottom: var(--tk-space-20);
    }
    .guide-content p {
      font-size: var(--tk-type-label);
    }
    .guide-note {
      padding: var(--tk-space-20);
      margin-top: var(--tk-space-24);
    }
    .guide-note p {
      font-size: var(--tk-type-label);
    }
    .guide-prompt {
      padding: var(--tk-space-20);
    }
    .guide-prompt .full-prompt-text {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
    }
    .guide-prompt .button {
      font-size: var(--tk-type-label);
    }
    .check-list li {
      font-size: var(--tk-type-label);
      padding-left: var(--tk-space-28);
    }
    .scope-list > div {
      grid-template-columns: 1fr;
      gap: var(--tk-space-8);
      padding: var(--tk-space-20) var(--tk-space-0);
    }
    .scope-list dt {
      font-size: var(--tk-type-label);
    }
    .scope-list dd {
      font-size: var(--tk-type-label);
    }
    .resource-list h3 {
      font-size: var(--tk-type-label);
    }
    .guide-end {
      padding: var(--tk-space-24);
    }
    .guide-end h2 {
      font-size: var(--tk-type-title);
    }
    .guide-end .button {
      font-size: var(--tk-type-label);
    }
    dialog {
      padding: var(--tk-space-28) var(--tk-space-20);
    }
    dialog h2 {
      font-size: var(--tk-type-title);
    }
    dialog textarea {
      font-size: var(--tk-type-label);
      height: var(--tk-size-236);
    }
  }
  @media (max-width: 360px) {
    .wrap,
    .header-inner {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-32));
    }
    .brand > span {
      display: none;
    }
    .hero h1 {
      font-size: var(--tk-type-heading);
    }
    .hero .eyebrow {
      font-size: var(--tk-type-label);
    }
    .prompt-top {
      padding-inline: var(--tk-space-12);
      font-size: var(--tk-type-label);
    }
    .small-tag {
      font-size: var(--tk-type-label);
    }
    .prompt-readable {
      padding-inline: var(--tk-space-12);
      font-size: var(--tk-type-label);
    }
    .prompt-actions {
      padding-inline: var(--tk-space-12);
    }
    .hero-description {
      font-size: var(--tk-type-label);
    }
    .section-heading h2,
    .platform-section .section-heading h2,
    .faq-layout h2 {
      font-size: var(--tk-type-title);
    }
    .invite-card {
      padding: var(--tk-space-20);
    }
    .invite-card h3,
    .friend-card h3 {
      font-size: var(--tk-type-title);
    }
    .demo-grid {
      padding-inline: var(--tk-space-12);
    }
    .invite-dots {
      display: none !important;
    }
    .demo-badge {
      font-size: var(--tk-type-label);
    }
    .story-layout h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .story-art {
      min-height: var(--tk-size-372);
    }
    .story-window.new strong {
      font-size: var(--tk-type-body);
    }
    .story-window.new > span:last-child {
      font-size: var(--tk-type-label);
    }
    .story-window.middle strong {
      font-size: var(--tk-type-lead);
    }
    .story-art-caption {
      font-size: var(--tk-type-label);
      bottom: 0;
    }
    .closing h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .history-intro h1 {
      font-size: var(--tk-type-heading-sm);
    }
    .history-intro .large-copy {
      font-size: var(--tk-type-body);
    }
    .era-nav {
      gap: var(--tk-space-8);
    }
    .era-startup h2 {
      font-size: var(--tk-type-title);
    }
    .era-web h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .era-copy h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .era-startup h2 {
      font-size: var(--tk-type-title);
    }
    .retro-content h3 {
      font-size: var(--tk-type-lead);
    }
    .storage-pair {
      gap: var(--tk-space-12);
    }
    .storage-pair strong {
      font-size: var(--tk-type-body);
    }
    .archive-statement {
      font-size: var(--tk-type-heading);
    }
    .archive-bottom {
      font-size: var(--tk-type-label);
    }
    .agent-story-card {
      padding: var(--tk-space-20);
    }
    .agent-story-card > p {
      font-size: var(--tk-type-body);
    }
    .agent-story-flow > strong {
      font-size: var(--tk-type-label);
    }
    .guide-hero h1 {
      font-size: var(--tk-type-heading-sm);
    }
    .guide-content h2 {
      font-size: var(--tk-type-title);
    }
    .history-outro {
      width: var(--tk-relative-100-percent);
      padding-inline: var(--tk-space-16);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
  @media print {
    .site-header,
    .site-footer,
    .era-nav,
    .guide-nav,
    .toast,
    dialog,
    .button,
    .menu-toggle,
    .closing-rays,
    .skip-link {
      display: none !important;
    }
    body,
    .hero,
    .era,
    .page-history {
      background: #fff !important;
      color: #000 !important;
    }
    .wrap {
      width: var(--tk-relative-100-percent);
    }
    .section,
    .era {
      padding: var(--tk-space-24) var(--tk-space-0);
      min-height: 0;
    }
    .era-grid,
    .section-heading,
    .guide-layout {
      display: block;
    }
    .source-details .source-url {
      display: block;
    }
    .hero h1 {
      color: #000;
    }
    .hero h1 span {
      color: #000;
    }
    .hero-description,
    .hero-notes {
      color: #333;
    }
    .era-copy > p {
      color: #000 !important;
    }
    a {
      overflow-wrap: anywhere;
    }
    .guide-content {
      max-width: none;
    }
    .story-art {
      display: none;
    }
  }

  /* Final readability and anchor alignment pass. */
  .prompt-box,
  .guide-content > section {
    scroll-margin-top: var(--tk-space-0);
  }
  .era {
    scroll-margin-top: var(--tk-space-40);
  }
  .story-teaser {
    background: #8c60c7;
  }
  .story-layout > div > p:not(.eyebrow),
  .story-layout > div > .eyebrow,
  .story-art-caption {
    color: #fff;
  }
  .story-art-caption {
    font-size: var(--tk-type-label);
  }
  .footer-resources .source-url,
  .footer-bottom,
  .footer-bottom > p,
  .footer-bottom .source-url {
    font-size: var(--tk-type-label) !important;
  }
  .figure-note {
    font-size: var(--tk-type-label);
  }
  @media (max-width: 1024px) {
    .era {
      scroll-margin-top: var(--tk-space-48);
    }
  }
  @media (max-width: 520px) {
    .era {
      scroll-margin-top: var(--tk-space-28);
    }
    .brand > span,
    .hero .eyebrow,
    .prompt-detail summary,
    .prompt-foot,
    .hero-notes {
      font-size: var(--tk-type-label);
    }
    .hero .eyebrow {
      letter-spacing: var(--tk-tracking-wide);
    }
    .prompt-top {
      font-size: var(--tk-type-label);
    }
    .small-tag {
      font-size: var(--tk-type-label);
    }
    .eyebrow,
    .hero .eyebrow {
      font-size: var(--tk-type-label);
    }
    .hero-notes a {
      min-height: var(--tk-size-44);
    }
    .case-links .source-url,
    .figure-note,
    .source-details,
    .source-url,
    .footer-top > div > a:not(.brand) {
      font-size: var(--tk-type-label);
    }
    .story-art {
      min-height: var(--tk-size-408);
    }
    .story-art-caption {
      font-size: var(--tk-type-label);
      bottom: calc(var(--tk-size-12) * -1);
    }
    .footer-top {
      grid-template-columns: 1fr 1fr;
    }
    .footer-bottom > div {
      grid-template-columns: 1fr;
      gap: var(--tk-space-4);
    }
    .footer-bottom > div > span:not(:first-child) {
      margin-top: var(--tk-space-12);
    }
    .guide-nav a {
      font-size: var(--tk-type-label);
      min-height: var(--tk-size-44);
    }
    .guide-step,
    .guide-nav .eyebrow {
      font-size: var(--tk-type-label);
    }
  }
  @media (max-width: 360px) {
    .hero .eyebrow {
      font-size: var(--tk-type-label);
    }
    .story-art {
      min-height: var(--tk-size-404);
    }
    .story-art-caption {
      font-size: var(--tk-type-label);
    }
  }

  /* V9: a restrained polish of the approved V8 composition. */
  :root {
    --focus-color: #7650a9;
    --interaction-fast: 140ms;
    --interaction-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --control-ring: 0 0 0 var(--tk-size-3) rgb(252 80 30 / 0.16);
  }
  .hero,
  .site-header,
  .site-footer,
  .era-agents,
  .guide-prompt {
    --focus-color: #d9c4f3;
  }
  .page-history:not([data-era='agents']) .site-header {
    --focus-color: #7650a9;
  }
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  textarea:focus-visible {
    outline: var(--tk-size-3) solid var(--focus-color);
    outline-offset: var(--tk-size-4);
  }
  :where(a, button, summary, textarea) {
    scroll-margin-block: var(--tk-space-20);
  }
  .ui-icon {
    flex: 0 0 var(--tk-size-20);
    vertical-align: middle;
  }
  .button {
    transition:
      box-shadow var(--interaction-fast) var(--interaction-ease),
      background-color var(--interaction-fast) var(--interaction-ease),
      border-color var(--interaction-fast) var(--interaction-ease);
  }
  .button:hover {
    transform: none;
    box-shadow: none;
  }
  .button:active:not(:disabled) {
    box-shadow: inset 0 0 0 var(--tk-size-2) rgb(28 41 64 / 0.18);
  }
  .button:disabled {
    opacity: 0.76;
  }
  .copy-glyph,
  .check-glyph {
    transition: opacity var(--interaction-fast) ease;
  }
  .check-glyph {
    opacity: 0;
  }
  .is-copied .copy-glyph {
    opacity: 0;
  }
  .is-copied .check-glyph {
    opacity: 1;
  }
  .menu-symbol {
    transition: transform var(--interaction-fast) var(--interaction-ease);
  }
  .menu-toggle[aria-expanded='true'] .menu-symbol {
    transform: rotate(45deg);
  }
  .dialog-close {
    display: grid;
    place-items: center;
    border-radius: var(--tk-size-3);
  }
  .dialog-close .ui-icon {
    width: var(--tk-size-24);
    height: var(--tk-size-24);
  }
  #reset-demo,
  #copy-demo-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tk-space-8);
  }
  #copy-demo-code .ui-icon {
    width: var(--tk-size-16);
    height: var(--tk-size-16);
    flex-basis: var(--tk-size-16);
  }
  #reset-demo .ui-icon {
    width: var(--tk-size-20);
    height: var(--tk-size-20);
    flex-basis: var(--tk-size-20);
  }
  #copy-demo-link,
  #copy-demo-code,
  #reset-demo,
  .dialog-close {
    transition:
      background-color var(--interaction-fast) ease,
      color var(--interaction-fast) ease;
  }
  .prompt-box {
    border-color: #536079;
    box-shadow:
      0 var(--tk-size-16) var(--tk-size-40) rgb(9 16 32 / 0.16),
      inset 0 var(--tk-size-1) rgb(255 255 255 / 0.04);
  }
  .prompt-top {
    border-bottom-color: #536079;
  }
  .prompt-full p {
    border: var(--tk-size-1) solid #536079;
  }
  .invite-card {
    box-shadow: 0 var(--tk-size-8) var(--tk-size-24) rgb(78 59 35 / 0.06);
  }
  .invite-count > strong,
  .invite-dots {
    font-variant-numeric: tabular-nums;
  }
  .demo-link > span {
    font-size: var(--tk-type-label);
  }
  .faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-space-20);
    padding-right: var(--tk-space-0);
  }
  .faq-list summary::after,
  .faq-list details[open] summary::after {
    content: none;
  }
  .faq-symbol {
    width: var(--tk-size-20);
    height: var(--tk-size-20);
    opacity: 0.8;
    transition: transform var(--interaction-fast) var(--interaction-ease);
  }
  .faq-symbol .vertical-stroke {
    transform-origin: var(--tk-size-12) var(--tk-size-12);
    transition: transform var(--interaction-fast) var(--interaction-ease);
  }
  .faq-list details[open] .faq-symbol .vertical-stroke {
    transform: scaleY(0);
  }
  .faq-list details[open] summary {
    color: #7650a9;
  }
  .guide-content > section > p {
    max-width: var(--tk-relative-72-ch);
  }
  .guide-nav a {
    position: relative;
  }
  .guide-nav a[aria-current='location'] {
    color: #7650a9;
    text-decoration: underline;
    text-decoration-thickness: var(--tk-size-2);
    text-underline-offset: var(--tk-size-4);
  }
  .source-url {
    text-decoration-thickness: var(--tk-size-1);
    transition: text-decoration-color var(--interaction-fast) ease;
  }
  .era-nav a {
    min-width: var(--tk-size-44);
    min-height: var(--tk-size-44);
    justify-content: center;
  }
  .era {
    scroll-margin-top: var(--tk-space-48);
  }
  .era-nav a::after {
    border-radius: var(--tk-size-2);
  }
  .toast {
    bottom: max(var(--tk-size-24), env(safe-area-inset-bottom));
    border-color: #c7cfdb;
    box-shadow: 0 var(--tk-size-4) var(--tk-size-24) rgb(17 24 39 / 0.16);
  }
  @media (hover: hover) and (pointer: fine) {
    .primary:hover {
      box-shadow: var(--control-ring);
    }
    .secondary:hover {
      background: #f4f6f8;
      box-shadow: 0 0 0 var(--tk-size-2) rgb(28 41 64 / 0.08);
    }
    .light-button:hover {
      box-shadow: 0 0 0 var(--tk-size-3) rgb(255 255 255 / 0.22);
    }
    .demo-button:hover:not(:disabled) {
      background: #2c3b55;
    }
    #copy-demo-link:hover,
    #copy-demo-code:hover,
    .dialog-close:hover {
      background: rgb(28 41 64 / 0.07);
    }
    #reset-demo:hover {
      color: #7650a9;
    }
    .source-url:hover {
      text-decoration-thickness: var(--tk-size-2);
    }
    .guide-nav a:hover {
      color: #7650a9;
    }
    .faq-list summary:hover {
      color: #7650a9;
    }
    .story-art:hover .story-window.new {
      border-color: #9b85b4;
      box-shadow: 0 var(--tk-size-16) var(--tk-size-32) rgb(48 36 68 / 0.2);
    }
  }
  @media (max-width: 1024px) {
    .era {
      scroll-margin-top: var(--tk-space-48);
    }
    .guide-nav a {
      min-height: var(--tk-size-44);
    }
    .menu-toggle {
      gap: var(--tk-space-12);
    }
  }
  @media (max-width: 520px) {
    .era {
      scroll-margin-top: var(--tk-space-32);
    }
    .demo-link > span {
      font-size: var(--tk-type-label);
    }
    .card-topline {
      font-size: var(--tk-type-label);
    }
    .invite-count span {
      font-size: var(--tk-type-label);
    }
    .friend-card .demo-helper {
      font-size: var(--tk-type-label);
    }
    .demo-receipt .text-button {
      min-height: var(--tk-size-44);
      font-size: var(--tk-type-label);
    }
    .footer-top > div > a:not(.brand) {
      min-height: var(--tk-size-44);
    }
    .footer-top > div > a.source-url {
      padding-block: var(--tk-space-8);
    }
    .toast {
      bottom: max(var(--tk-size-16), env(safe-area-inset-bottom));
    }
    /* Readonly prompt fields stay readable when the on-screen keyboard is present. */
    dialog textarea {
      font-size: var(--tk-type-label);
      min-height: var(--tk-size-236);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .button,
    .ui-icon,
    .copy-glyph,
    .check-glyph,
    .source-url {
      transition: none;
    }
  }
  /* Let historical cards shrink inside a narrow viewport with persistent scrollbars. */
  .era-grid > * {
    min-width: 0;
  }
  @media (max-width: 520px) {
    .startup-card h3 {
      font-size: var(--tk-type-display-sm);
    }
  }
  .story-teaser {
    --focus-color: #fff;
  }
  .page-history[data-era='agents'] .era-nav {
    --focus-color: #d9c4f3;
  }

  /* 0.1+: keep the shorter agent example together without forced line breaks. */
  .agent-story-card > p {
    text-wrap: balance;
  }
  .keep-together {
    white-space: nowrap;
  }
  .agent-story-flow > .user-invite-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--tk-space-8);
    row-gap: var(--tk-space-4);
  }
  .user-invite-flow > span {
    white-space: nowrap;
  }
}