@layer docs {
  :root {
    --docs-display: Georgia, "Times New Roman", serif;
    --docs-sidebar: 15rem;
    --docs-content: 64rem;
  }

  .page-shell,
  .page-content {
    min-width: 0;
  }

  .site-sidebar {
    display: none;
  }

  .wordmark,
  .sidebar-logo {
    display: block;
    width: 6.5rem;
    text-decoration: none;
    transition: opacity var(--gr-duration-fast) var(--gr-ease-in-out);
  }

  .wordmark img,
  .sidebar-logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .site-header .gr-nav {
    flex-wrap: wrap;
    padding-block: var(--gr-space-2);
  }

  .site-header .gr-nav__links {
    order: 3;
    width: 100%;
    display: flex;
    gap: var(--gr-space-6);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-header .gr-nav__links::-webkit-scrollbar {
    display: none;
  }

  .site-header .gr-nav__link {
    min-height: var(--gr-control-touch);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .site-actions {
    display: flex;
    align-items: center;
    gap: var(--gr-space-2);
    margin-inline-start: auto;
  }

  .theme-toggle {
    white-space: nowrap;
  }

  .page-content .gr-container {
    width: min(calc(100% - (var(--gr-space-4) * 2)), var(--docs-content));
  }

  .hero {
    display: grid;
    gap: var(--gr-space-12);
    padding-block: var(--gr-space-12) var(--gr-space-16);
  }

  .hero-copy {
    display: grid;
    gap: var(--gr-space-4);
  }

  .hero h1 {
    max-width: 11ch;
    font-family: var(--docs-display);
    font-size: clamp(3.25rem, 15vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.92;
  }

  .hero-lead {
    max-width: 42rem;
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-lg);
    line-height: 1.5;
  }

  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gr-space-2);
    align-items: center;
    color: var(--gr-color-text-subtle);
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  .hero-meta a {
    color: var(--gr-color-text);
    text-underline-offset: var(--gr-space-1);
  }

  .hero-directory {
    display: grid;
    gap: var(--gr-space-4);
  }

  .directory-card {
    position: relative;
    min-height: 17rem;
    display: grid;
    align-content: end;
    gap: var(--gr-space-1);
    padding: var(--gr-space-6);
    overflow: hidden;
    border: var(--gr-border-width) solid var(--gr-color-border);
    border-radius: var(--gr-radius-surface);
    box-shadow: var(--gr-shadow-raised);
    color: var(--gr-color-text);
    text-decoration: none;
    transition: transform var(--gr-duration-base) var(--gr-ease-out);
  }

  .directory-card--foundation {
    background: var(--gr-color-accent-soft);
  }

  .directory-card--components {
    background: var(--gr-color-surface-muted);
  }

  .directory-card__preview {
    position: absolute;
    top: var(--gr-space-8);
    left: var(--gr-space-6);
    display: grid;
    grid-template-columns: repeat(4, var(--gr-space-6));
    gap: var(--gr-space-1);
  }

  .directory-card__preview i {
    width: var(--gr-space-6);
    height: var(--gr-space-6);
    border: var(--gr-border-width) solid color-mix(in srgb, var(--gr-color-text) 18%, transparent);
  }

  .directory-card__preview i:nth-child(1) {
    background: var(--gr-color-canvas);
  }

  .directory-card__preview i:nth-child(2) {
    background: var(--gr-color-surface);
  }

  .directory-card__preview i:nth-child(3) {
    background: var(--gr-color-text);
  }

  .directory-card__preview i:nth-child(4) {
    background: var(--gr-color-accent);
  }

  .directory-card__preview--controls {
    width: 7.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--gr-space-2);
  }

  .directory-card__preview--controls i {
    width: 100%;
    height: var(--gr-space-2);
    border: 0;
    border-radius: var(--gr-radius-control);
    background: var(--gr-color-text);
  }

  .directory-card__preview--controls i:nth-child(2) {
    width: 72%;
    background: var(--gr-color-border-strong);
  }

  .directory-card__preview--controls i:nth-child(3) {
    width: 48%;
    background: var(--gr-color-accent);
  }

  .directory-card__title {
    font-family: var(--docs-display);
    font-size: var(--gr-text-2xl);
    line-height: var(--gr-leading-heading);
  }

  .directory-card__description {
    max-width: 18rem;
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
  }

  .directory-card__arrow {
    position: absolute;
    right: var(--gr-space-6);
    bottom: var(--gr-space-6);
    font-size: var(--gr-text-lg);
  }

  .intro-note {
    display: grid;
    gap: var(--gr-space-6);
    padding-block: var(--gr-space-8);
    border-block: var(--gr-border-width) solid var(--gr-color-border-strong);
  }

  .intro-note > p {
    max-width: 48rem;
    font-family: var(--docs-display);
    font-size: var(--gr-text-xl);
    line-height: 1.35;
  }

  .intro-note__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gr-space-2) var(--gr-space-6);
    color: var(--gr-color-text-subtle);
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  .docs-section {
    padding-block: var(--gr-space-16);
    scroll-margin-top: 7rem;
  }

  .docs-section + .docs-section {
    border-top: var(--gr-border-width) solid var(--gr-color-border);
  }

  .docs-section--surface {
    background: transparent;
  }

  .section-layout {
    display: grid;
    gap: var(--gr-space-8);
  }

  .gr-section-head {
    display: grid;
    align-content: start;
    gap: var(--gr-space-2);
  }

  .gr-section-head__title {
    font-family: var(--docs-display);
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .gr-section-head__lead {
    color: var(--gr-color-text-muted);
  }

  .component-search {
    width: min(100%, 24rem);
    margin-top: var(--gr-space-4);
  }

  .principles,
  .token-list,
  .component-list,
  .release-list {
    overflow: hidden;
    border: var(--gr-border-width) solid var(--gr-color-border);
    border-radius: var(--gr-radius-surface);
    background: var(--gr-color-surface);
  }

  .principle,
  .token-row,
  .component-row,
  .release-entry {
    display: grid;
    gap: var(--gr-space-3);
    padding: var(--gr-space-6);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border);
  }

  .principle:last-child,
  .token-row:last-child,
  .component-row:last-child,
  .release-entry:last-child {
    border-bottom: 0;
  }

  .release-entry {
    gap: var(--gr-space-4);
  }

  .release-entry time {
    color: var(--gr-color-text-subtle);
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  .release-entry ul {
    display: grid;
    gap: var(--gr-space-2);
    margin: 0;
    padding-inline-start: var(--gr-space-6);
  }

  .release-entry > p {
    color: var(--gr-color-text-muted);
  }

  .support-table {
    padding-inline: var(--gr-space-4);
    border: var(--gr-border-width) solid var(--gr-color-border);
    border-radius: var(--gr-radius-surface);
    background: var(--gr-color-surface);
  }

  .support-note {
    margin-top: var(--gr-space-3);
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
  }

  .ai-usage {
    display: grid;
    gap: var(--gr-space-4);
  }

  .ai-usage__notes {
    max-width: var(--gr-reading-width);
    display: grid;
    gap: var(--gr-space-2);
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
  }

  .ai-usage__notes strong {
    color: var(--gr-color-text);
  }

  .principle h3,
  .component-meta h3 {
    font-size: var(--gr-text-md);
  }

  .principle p,
  .component-meta p {
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
  }

  .component-row {
    gap: var(--gr-space-6);
    scroll-margin-top: 2rem;
  }

  .component-demo {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--gr-space-4);
  }

  .component-source {
    min-width: 0;
  }

  .component-source__summary {
    min-height: var(--gr-control-touch);
    display: flex;
    align-items: center;
    width: fit-content;
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
    cursor: pointer;
  }

  .component-source__summary:hover {
    color: var(--gr-color-text);
  }

  .component-source .gr-code-snippet {
    margin-top: var(--gr-space-2);
  }

  .component-source .gr-codeblock {
    max-height: 24rem;
  }

  .component-empty {
    border: var(--gr-border-width) solid var(--gr-color-border);
    border-radius: var(--gr-radius-surface);
    background: var(--gr-color-surface);
  }

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

  .footer-links a {
    text-underline-offset: var(--gr-space-1);
  }

  .token-row code {
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-xs);
  }

  .swatches {
    min-height: var(--gr-space-16);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: var(--gr-border-width) solid var(--gr-color-border);
    border-radius: var(--gr-radius-control);
  }

  .swatch--canvas { background: var(--gr-color-canvas); }
  .swatch--surface { background: var(--gr-color-surface); }
  .swatch--text { background: var(--gr-color-text); }
  .swatch--accent { background: var(--gr-color-accent); }

  .type-sample {
    font-family: var(--docs-display);
    font-size: var(--gr-text-2xl);
    line-height: var(--gr-leading-heading);
  }

  .space-sample {
    display: flex;
    align-items: end;
    gap: var(--gr-space-2);
  }

  .space-sample span {
    width: var(--gr-space-2);
    background: var(--gr-color-action);
  }

  .space-sample span:nth-child(1) { height: var(--gr-space-1); }
  .space-sample span:nth-child(2) { height: var(--gr-space-2); }
  .space-sample span:nth-child(3) { height: var(--gr-space-3); }
  .space-sample span:nth-child(4) { height: var(--gr-space-4); }
  .space-sample span:nth-child(5) { height: var(--gr-space-6); }
  .space-sample span:nth-child(6) { height: var(--gr-space-8); }

  .demo-field {
    max-width: 22rem;
  }

  .demo-card {
    max-width: 26rem;
  }

  @keyframes section-arrive {
    from {
      opacity: 0;
      transform: translateY(var(--gr-space-2));
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .docs-section:target .gr-section-head,
  .component-row:target .component-meta {
    animation: section-arrive var(--gr-duration-slow) var(--gr-ease-out) both;
  }

  @media (hover: hover) {
    .wordmark:hover,
    .sidebar-logo:hover {
      opacity: 0.72;
    }

    .directory-card:hover {
      transform: translateY(calc(var(--gr-space-1) * -1));
    }

    .sidebar-nav a:hover,
    .sidebar-css:hover,
    .sidebar-actions .theme-toggle:hover {
      color: var(--gr-color-accent);
    }
  }

  @media (min-width: 45rem) {
    .hero {
      padding-block: var(--gr-space-16) var(--gr-space-24);
    }

    .hero-directory {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .intro-note {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }

    .intro-note__facts {
      display: grid;
      justify-items: end;
    }

    .principle {
      grid-template-columns: 10rem minmax(0, 1fr);
    }

    .release-entry {
      grid-template-columns: 10rem minmax(0, 1fr);
    }

    .token-row {
      grid-template-columns: 10rem minmax(0, 1fr);
      align-items: center;
    }

    .component-row {
      grid-template-columns: 9rem minmax(0, 1fr);
    }

    .component-source {
      grid-column: 2;
    }
  }

  @media (min-width: 48rem) {
    .site-header {
      display: none;
    }

    .page-shell {
      display: grid;
      grid-template-columns: var(--docs-sidebar) minmax(0, 1fr);
    }

    .site-sidebar {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      flex-direction: column;
      gap: var(--gr-space-8);
      padding: var(--gr-space-8) var(--gr-space-6) var(--gr-space-6);
      overflow-y: auto;
      border-right: var(--gr-border-width) solid var(--gr-color-border);
      background: var(--gr-color-canvas);
    }

    .sidebar-logo {
      width: 8rem;
    }

    .sidebar-nav {
      display: grid;
      gap: var(--gr-space-8);
    }

    .sidebar-group {
      display: grid;
      gap: var(--gr-space-1);
    }

    .sidebar-label {
      margin-bottom: var(--gr-space-1);
      color: var(--gr-color-accent);
      font-family: var(--gr-font-mono);
      font-size: var(--gr-text-xs);
      font-weight: var(--gr-weight-medium);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .sidebar-nav a,
    .sidebar-css,
    .sidebar-actions .theme-toggle {
      min-height: var(--gr-control-compact);
      display: flex;
      align-items: center;
      color: var(--gr-color-text-muted);
      font-size: var(--gr-text-sm);
      text-decoration: none;
    }

    .sidebar-actions {
      margin-top: auto;
      padding-top: var(--gr-space-4);
      border-top: var(--gr-border-width) solid var(--gr-color-border);
    }

    .sidebar-actions .theme-toggle {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .sidebar-css {
      padding-top: 0;
      border-top: 0;
    }

    .hero h1 {
      font-size: clamp(4.5rem, 9vw, 7rem);
    }

    .docs-section,
    .component-row {
      scroll-margin-top: var(--gr-space-8);
    }
  }

}