@layer sample {
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--he-color-surface-secondary); color: var(--he-color-text-primary); font-family: var(--he-font-family-body), sans-serif; }
  a { color: var(--he-color-text-link); }
  h1, h2 { margin: 0; font-family: var(--he-font-family-display), sans-serif; letter-spacing: var(--he-font-letter-spacing-tight); }
  p { margin-block: var(--he-space-2) 0; color: var(--he-color-text-secondary); }
  .sample-skip { position: fixed; inset-block-start: var(--he-space-2); inset-inline-start: var(--he-space-2); z-index: var(--he-z-index-toast); padding: var(--he-space-3); border-radius: var(--he-radius-md); background: var(--he-color-surface-inverted); color: var(--he-color-text-inverse); transform: translateY(-200%); }
  .sample-skip:focus { transform: none; }
  .sample-header { position: sticky; inset-block-start: 0; z-index: var(--he-z-index-sticky); }
  .sample-brand { gap: var(--he-space-3); color: var(--he-color-text-primary); font-weight: var(--he-font-weight-bold); text-decoration: none; }
  .sample-brand img { inline-size: var(--he-brand-logo-digital-minimum-width); block-size: auto; }
  .sample-header__actions, .sample-theme { display: flex; align-items: center; gap: var(--he-space-3); }
  .sample-theme span { font-size: var(--he-font-size-sm); font-weight: var(--he-font-weight-semibold); white-space: nowrap; }
  .sample-main { display: grid; max-inline-size: var(--he-layout-content-wide); margin-inline: auto; gap: var(--he-space-8); padding: var(--he-space-8) var(--he-layout-gutter-desktop) var(--he-space-16); }
  .sample-intro, .sample-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--he-space-4); }
  .sample-intro h1 { font-size: var(--he-font-size-4xl); }
  .sample-sync { display: grid; justify-items: end; gap: var(--he-space-2); color: var(--he-color-text-secondary); font-size: var(--he-font-size-sm); }
  .sample-eyebrow { margin: 0 0 var(--he-space-2); color: var(--he-color-text-tertiary); font-size: var(--he-font-size-xs); font-weight: var(--he-font-weight-bold); letter-spacing: var(--he-font-letter-spacing-wide); text-transform: uppercase; }
  .sample-notice { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--he-space-4); padding: var(--he-space-4); border: var(--he-border-width-default) solid var(--he-color-status-info-border); border-radius: var(--he-radius-lg); background: var(--he-color-status-info-background); color: var(--he-color-status-info-text); }
  .sample-notice p { color: inherit; }
  .sample-metrics { margin-block-start: var(--he-space-4); }
  .sample-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: var(--he-space-5); align-items: start; }
  .sample-chart { min-inline-size: 0; }
  .sample-chart > header { display: flex; justify-content: space-between; gap: var(--he-space-3); }
  .sample-plot { margin-block-start: var(--he-space-5); }
  .sample-plot svg { display: block; inline-size: 100%; block-size: 15rem; overflow: visible; }
  .sample-plot__grid { fill: none; stroke: var(--he-color-border-subtle); stroke-width: var(--he-border-width-default); }
  .sample-plot__baseline { fill: none; stroke: var(--he-color-data-categorical-2); stroke-dasharray: var(--he-space-2) var(--he-space-2); stroke-width: var(--he-border-width-strong); }
  .sample-plot__line { fill: none; stroke: var(--he-color-data-categorical-1); stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--he-border-width-focus); }
  .sample-plot__axis { display: flex; justify-content: space-between; color: var(--he-color-text-tertiary); font-family: var(--he-font-family-mono), monospace; font-size: var(--he-font-size-xs); }
  .sample-alert { align-content: start; }
  .sample-alert__icon { display: grid; inline-size: var(--he-size-target-minimum); block-size: var(--he-size-target-minimum); place-items: center; border-radius: var(--he-radius-full); background: var(--he-color-status-review-background); color: var(--he-color-status-review-text); }
  .sample-table-scroll { inline-size: 100%; max-inline-size: 100%; overflow-x: auto; }
  .sample-attention { min-inline-size: 0; }
  .sample-attention > header { margin-block-end: var(--he-space-4); }
  .sample-attention table { min-inline-size: 44rem; }
  caption { padding: var(--he-space-3); color: var(--he-color-text-secondary); text-align: start; }
  .sample-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sample-footer { display: flex; justify-content: space-between; gap: var(--he-space-4); padding: var(--he-space-5) var(--he-layout-gutter-desktop); border-block-start: var(--he-border-width-default) solid var(--he-color-border-subtle); background: var(--he-color-surface-primary); }
  .sample-footer p { margin: 0; }

  @media (max-width: 63.999rem) { .sample-main { padding-inline: var(--he-layout-gutter-tablet); } .sample-grid { grid-template-columns: 1fr; } }
  @media (max-width: 39.999rem) {
    .sample-header { align-items: flex-start; padding-block: var(--he-space-3); }
    .sample-brand span, .sample-theme span { display: none; }
    .sample-header__actions { gap: var(--he-space-2); }
    .sample-main { gap: var(--he-space-6); padding: var(--he-space-6) var(--he-layout-gutter-mobile) var(--he-space-10); }
    .sample-intro, .sample-section-heading, .sample-chart > header, .sample-footer { align-items: flex-start; flex-direction: column; }
    .sample-sync { justify-items: start; }
    .sample-notice { grid-template-columns: auto 1fr; }
    .sample-notice button { grid-column: 2; justify-self: end; }
    .sample-plot svg { block-size: 12rem; }
    .sample-footer { padding-inline: var(--he-layout-gutter-mobile); }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: var(--he-motion-duration-instant) !important; animation-duration: var(--he-motion-duration-instant) !important; } }
  @media (forced-colors: active) { .sample-plot__line, .sample-plot__baseline, .sample-plot__grid { stroke: CanvasText; } .sample-notice, .sample-alert { border: var(--he-border-width-strong) solid CanvasText; } }
}