.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--color-gray-100); background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.site-header__inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.site-header__brand { color: var(--color-blue-700); font-family: var(--font-medium); text-decoration: none; }
.site-nav { display: flex; gap: 20px; overflow-x: auto; font-size: 14px; }
.site-nav a { white-space: nowrap; color: var(--color-gray-700); text-decoration: none; }
.site-nav a:hover { color: var(--color-blue-500); }
.styleguide { padding-block: 48px 96px; }
.hero { max-width: 850px; margin-bottom: 64px; }
.hero h1 { margin: 8px 0 24px; }
.hero p:last-child { color: var(--color-gray-700); }
.sg-section { margin-top: 64px; padding: 32px; background: #fff; box-shadow: var(--shadow-panel); }
.sg-section__header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.sg-section__header p { color: var(--color-gray-700); font-size: 14px; }
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.swatch { overflow: hidden; border: 1px solid var(--color-gray-100); border-radius: 4px; }
.swatch__color { height: 88px; background: var(--swatch); }
.swatch__color[data-color="blue-700"] { --swatch: var(--color-blue-700); }
.swatch__color[data-color="blue-500"] { --swatch: var(--color-blue-500); }
.swatch__color[data-color="blue-200"] { --swatch: var(--color-blue-200); }
.swatch__color[data-color="focus"] { --swatch: var(--color-focus); }
.swatch__color[data-color="black"] { --swatch: var(--color-black); }
.swatch__color[data-color="gray-700"] { --swatch: var(--color-gray-700); }
.swatch__color[data-color="gray-400"] { --swatch: var(--color-gray-400); }
.swatch__color[data-color="gray-100"] { --swatch: var(--color-gray-100); }
.swatch__color[data-color="error"] { --swatch: var(--color-error); }
.swatch__color[data-color="white"] { --swatch: var(--color-white); }
.swatch__info { padding: 12px; font-size: 13px; line-height: 1.4; }
.swatch__info strong { display: block; font-family: var(--font-medium); }
.type-list { display: grid; gap: 27px; }
.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; align-items: start; }
.state-group { display: grid; align-content: start; gap: 16px; }
.state-group h3 { color: var(--color-gray-700); font: 400 14px/1.4 var(--font-medium); text-transform: uppercase; }
.state-sample { display: flex; min-width: 0; align-items: center; gap: 16px; }
.state-label { width: 72px; flex: 0 0 72px; color: var(--color-gray-400); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 24px; }
.cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 437px)); gap: 24px; }
.icons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.interactive-note { min-height: 24px; margin-top: 16px; color: var(--color-blue-500); font-size: 14px; }
.sg-footer { padding: 32px 0; color: var(--color-gray-700); font-size: 14px; }

@media (max-width: 1023px) {
  .site-header__inner { align-items: flex-start; flex-direction: column; padding-block: 16px; }
  .site-nav { width: 100%; padding-bottom: 4px; }
  .styleguide { padding-top: 40px; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sg-section { margin-inline: calc(var(--gutter) * -1); padding: 24px 16px; }
  .sg-section__header { align-items: start; flex-direction: column; margin-bottom: 32px; }
  .cards-grid { grid-template-columns: 1fr; }
  .state-sample { align-items: flex-start; flex-direction: column; gap: 6px; }
  .state-label { width: auto; flex-basis: auto; }
}
@media (max-width: 389px) {
  .hero { margin-bottom: 40px; }
  .sg-section { margin-top: 40px; }
}