.sample-page { max-width: 1220px; padding-block: 32px 70px; }
.sample-page .back-link { margin-bottom: 22px; }
.sample-introduction { display: grid; grid-template-columns: 1.35fr .85fr; gap: 90px; align-items: center; margin-bottom: 56px; }
.sample-introduction .overline { margin-top: 0; }
.sample-introduction h1 { font: 400 clamp(42px, 4.3vw, 60px)/1.08 Georgia, serif; letter-spacing: -2px; margin-bottom: 22px; }
.sample-introduction h1 em { color: #61764e; font-style: normal; }
.sample-description { color: var(--paper-muted); max-width: 570px; font-size: 15px; line-height: 1.85; }
.sample-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 11px; color: var(--paper-muted); margin-top: 23px; }
.sample-facts>span { display: inline-flex; align-items: center; gap: 8px; }
.sample-facts .dot { color: #7b9063; }
.sample-download { padding: 27px; border: 1px solid var(--paper-line); background: #e9ecdf; border-radius: 7px; }
.sample-download .file-icon { display: inline-flex; padding: 9px; font-size: 19px; margin-bottom: 16px; }
.sample-download h2 { font: 400 25px/1.2 Georgia, serif; letter-spacing: -.6px; margin-bottom: 12px; }
.sample-download p { font-size: 13px; color: var(--paper-muted); margin-bottom: 18px; }
.sample-download .button { width: 100%; }
.sample-download .sample-download-note { font: 9px/1.7 ui-monospace, monospace; margin: 13px 0 0; }
.sample-workspace { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 30px; align-items: start; }
.sample-sidebar { position: sticky; top: 112px; }
.sample-sidebar .overline { margin: 0 0 15px; font-size: 9px; }
.sample-selectors { display: grid; gap: 10px; }
.marketing .sample-sidebar .sample-selectors a { position: relative; display: block; border: 1px solid #bbc6b1; border-radius: 6px; padding: 17px 35px 17px 17px; text-decoration: none; transition: background .15s, border-color .15s; }
.sample-selector-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.sample-selector-top b { font-size: 15px; font-weight: 500; }
.sample-selector-top small { font: 9px ui-monospace, monospace; color: #6d7b60; }
.sample-selectors a>span:nth-child(2) { display: block; font-size: 11px; color: var(--paper-muted); }
.sample-selector-arrow { position: absolute; right: 14px; bottom: 17px; color: #637b50; }
.sample-selectors a[aria-current="true"] { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--ink); }
.sample-selectors a[aria-current="true"]>span:nth-child(2), .sample-selectors a[aria-current="true"] small, .sample-selectors a[aria-current="true"] .sample-selector-arrow { color: #d0ddc1; }
.sample-selectors a:hover:not([aria-current]) { background: #e8edde; border-color: #72855d; }
.sample-sidebar-note { font-size: 11px; color: var(--paper-muted); line-height: 1.8; margin-top: 20px; max-width: 220px; }
.sample-workspace-main { min-width: 0; }
.sample-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 14px; }
.sample-view-controls { display: flex; gap: 3px; background: #e8ebdf; padding: 4px; border: 1px solid #c5cebb; border-radius: 6px; }
.sample-view-controls button { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 8px 13px; min-height: 38px; color: var(--paper-muted); font-size: 12px; }
.sample-view-controls button[aria-pressed="true"] { color: var(--paper-ink); background: #fffdf7; border-color: #c7cfbe; }
.copy-sample { background: transparent; color: var(--paper-ink); border: 1px solid #b5c2a9; border-radius: 5px; min-height: 44px; padding: 8px 15px; font-size: 12px; }
.copy-sample:hover { background: #e5eadb; border-color: #6c8457; }
.copy-sample:disabled { cursor: progress; opacity: .6; }
.sample-feedback { color: #476238; font-size: 12px; margin: 0; }
.sample-feedback:not(:empty) { padding: 0 0 13px; }
.sample-record { background: #fdfcf7; border: 1px solid #bcc8b1; border-radius: 7px; scroll-margin-top: 110px; margin-bottom: 22px; overflow: hidden; }
.sample-record-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 26px 29px 22px; border-bottom: 1px solid var(--paper-line); }
.sample-record-heading .overline { margin: 0 0 10px; font-size: 9px; }
.sample-record-heading h2 { font: 400 30px/1.2 Georgia, serif; letter-spacing: -.7px; margin: 0; }
.synthetic-badge { font: 9px/1.5 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .5px; padding: 5px 8px; border: 1px solid #bac8aa; color: #60754e; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
.sample-story { padding: 25px 29px 0; }
.sample-events { list-style: none; padding: 0; margin: 0; }
.sample-event { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 0 0 22px; }
.sample-event-number { color: #7a8b68; font: 10px/1.5 ui-monospace, monospace; padding-top: 2px; }
.sample-event h3, .sample-policy h3, .sample-outcome h3, .sample-state h3 { font: 10px/1.6 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .5px; color: #687c56; margin: 0 0 6px; }
.sample-event p, .sample-policy p, .sample-outcome p { font-size: 14px; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
.sample-event.is-correction { background: #f3ebe0; border-left: 2px solid var(--clay); padding: 14px 14px 14px 12px; margin: 0 -14px 22px; border-radius: 0 4px 4px 0; }
.is-correction h3 { color: #895b3c; }
.sample-policy { border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); padding-block: 20px; margin-block: 0 22px; }
.sample-policy p { color: var(--paper-muted); font-size: 13px; }
.sample-outcome { display: flex; gap: 15px; padding-bottom: 24px; }
.sample-outcome>span { color: #6b8450; font: 25px Georgia, serif; }
.sample-state { border-top: 1px solid var(--paper-line); }
.sample-state summary { display: flex; justify-content: space-between; align-items: center; min-height: 53px; gap: 20px; list-style: none; font-size: 12px; color: var(--paper-muted); cursor: pointer; }
.sample-state summary::-webkit-details-marker { display: none; }
.sample-state[open] summary>span { transform: rotate(45deg); }
.sample-state-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-bottom: 20px; }
.sample-state pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.8 ui-monospace, monospace; margin: 0; padding: 14px; background: #eef0e5; border: 1px solid var(--paper-line); border-radius: 4px; }
.sample-json { padding: 20px; background: var(--bg); color: var(--ink); }
.sample-json>p { font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.sample-json pre { max-height: 620px; overflow: auto; font: 12px/1.85 ui-monospace, SFMono-Regular, monospace; margin: 0; padding: 6px; tab-size: 2; scroll-margin-top: 115px; }
.sample-json code { font: inherit; }
.sample-boundary { display: flex; align-items: flex-start; gap: 13px; padding: 22px 25px; border: 1px solid var(--paper-line); border-radius: 6px; margin: 20px 0 55px; color: var(--paper-muted); }
.sample-boundary>span { font-size: 18px; color: #72835e; }
.sample-boundary p { font-size: 12px; line-height: 1.85; margin: 0; }
.sample-boundary b { font-weight: 500; color: var(--paper-ink); }
.sample-next { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-top: 35px; border-top: 1px solid var(--paper-line); }
.sample-next .overline { margin-top: 0; }
.sample-next h2 { font: 400 39px/1.12 Georgia, serif; letter-spacing: -1.3px; margin-bottom: 15px; }
.sample-next p:not(.overline) { max-width: 520px; color: var(--paper-muted); font-size: 14px; }
.sample-next-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-shrink: 0; }
@media(max-width:1050px) { .sample-introduction { gap: 35px; }.sample-workspace { grid-template-columns: 205px minmax(0, 1fr); gap: 22px; } }
@media(max-width:800px) {
  .sample-page { padding-top: 22px; }
  .sample-introduction { grid-template-columns: 1fr; gap: 27px; margin-bottom: 35px; }
  .sample-introduction h1 { font-size: 48px; }
  .sample-download { padding: 20px; }
  .sample-download .file-icon, .sample-download h2, .sample-download>p:not(.sample-download-note) { display: none; }
  .sample-download .sample-download-note { text-align: center; }
  .sample-workspace { grid-template-columns: 1fr; gap: 20px; }
  .sample-sidebar { position: static; }
  .sample-selectors { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .sample-selectors a { padding: 13px; }
  .sample-selector-arrow { display: none; }
  .sample-selector-top { margin-bottom: 5px; }
  .sample-sidebar-note { max-width: 100%; margin-bottom: 0; }
  .sample-next { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sample-next-actions { gap: 12px; }
}
@media(max-width:540px) {
  .sample-page .back-link { margin-bottom: 15px; }
  .sample-introduction h1 { font-size: 42px; letter-spacing: -1.5px; }
  .sample-description { font-size: 14px; }
  .sample-selectors a { padding: 12px 10px; }
  .sample-selector-top b { font-size: 13px; }
  .sample-selector-top small { font-size: 8px; }
  .sample-selectors a>span:nth-child(2) { font-size: 10px; }
  .sample-view-controls button { padding-inline: 10px; font-size: 11px; }
  .copy-sample { padding-inline: 12px; font-size: 11px; }
  .sample-record-heading { padding: 20px; flex-wrap: wrap; gap: 12px; }
  .sample-record-heading h2 { font-size: 27px; }
  .sample-story { padding: 22px 22px 0; }
  .sample-event p { font-size: 13px; }
  .sample-state-grid { grid-template-columns: 1fr; }
  .sample-json { padding: 16px; }
  .sample-json pre { font-size: 11px; max-height: 500px; }
  .sample-boundary { padding: 19px; margin-bottom: 38px; }
  .sample-next h2 { font-size: 35px; }
  .sample-next-actions { width: 100%; }
  .sample-next-actions .button { width: 100%; }
}