/* design-system page only. Everything else comes from styles.css. */
.ds-top { padding: 160px 0 96px; }
.ds-top .wrap { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ds-top .display { max-width: 12ch; }
.ds-top .lead { max-width: 560px; }

code { font: 500 .86em/1 var(--font-pixel); letter-spacing: 0; }
.small { font-size: 14px; color: var(--color-gray-500); margin-top: 12px; max-width: 560px; }
.sec--paper .small { color: var(--color-gray-700); }
.sub { font: 600 22px/1.3 var(--font-display); letter-spacing: -0.02em; margin: 64px 0 20px; }
.sub--dark { color: #fff; }
.sub:first-of-type { margin-top: 0; }
.note { margin-top: 32px; color: var(--color-gray-700); }

.ds-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* logo */
.tile { margin: 0; aspect-ratio: 1; border-radius: var(--radius-card); display: grid; place-items: center; position: relative; overflow: hidden; border: 1px solid var(--color-gray-200); }
.tile figcaption { position: absolute; left: 16px; bottom: 14px; font: 500 11px/1.4 var(--font-text); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.tile__mark { width: 38%; height: 38%; }
.tile--red { background: var(--color-red); color: #fff; border-color: transparent; }
.tile--black { background: #000; color: #fff; border-color: transparent; }
.tile--white { background: #fff; color: #000; }
.tile--glass { color: #fff; border-color: transparent; background: linear-gradient(135deg, #46604a, #8aa17d 40%, #c9d6c4), #567; }
.tile--glass .tile__mark { padding: 18px; background: rgba(255,255,255,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 22%; width: 46%; height: 46%; }
.panel { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.panel--black { background: #000; color: #fff; border-color: #000; }
.panel--line { background: transparent; border-color: rgba(255,255,255,.14); color: #fff; }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 0 16px; }
.lockup__mark { width: 72px; height: 72px; color: #fff; }
.lockup__word { font: 700 44px/1 var(--font-display); letter-spacing: -0.03em; }
.lockup__word .logo__dev { font-size: 40px; }
.rules { display: grid; gap: 10px; color: var(--color-gray-700); }
.rules li { padding-left: 20px; position: relative; }
.rules li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--color-red); }

/* color */
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sw { --c: #000; background: var(--c); color: #fff; border-radius: var(--radius-card); padding: 20px; min-height: 200px; display: flex; flex-direction: column; gap: 6px; border: 1px solid rgba(255,255,255,.14); }
.sw--l { color: #000; }
.sw b { font: 600 18px/1.2 var(--font-display); margin-top: auto; }
.sw code { font-size: 13px; }
.sw span { font: 400 12px/1.3 var(--font-text); opacity: .7; }
.sw em { font: 400 12px/1.3 var(--font-text); font-style: normal; opacity: .85; }
.ratio { display: flex; height: 56px; margin-top: 24px; border-radius: var(--radius-ui); overflow: hidden; font: 500 12px/1 var(--font-pixel); }
.ratio span { display: grid; place-items: center; white-space: nowrap; overflow: hidden; padding: 0 8px; }
.contrast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contrast div { border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 6px; font: 500 16px/1.3 var(--font-text); }
.contrast b { font: 700 40px/1 var(--font-display); }
.contrast small { font: 400 13px/1.4 var(--font-text); opacity: .85; }
.gradient { height: 200px; border-radius: var(--radius-card); background: var(--gradient-red-black); display: flex; align-items: flex-end; padding: 24px; }
.gradient span { color: #fff; font-size: 14px; }

/* type */
.face { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.face__aa { font-size: 96px; line-height: 1; margin-bottom: 16px; }
.face b { font: 600 18px/1.2 var(--font-display); }
.face span { color: var(--color-gray-700); font-size: 14px; }
.scale { margin-top: 48px; border-top: 1.5px solid #000; }
.scale > div { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--color-gray-200); }
.scale code { color: var(--color-gray-700); font-size: 12px; line-height: 1.5; }

/* pixel */
.cell { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cell__demo { display: block; aspect-ratio: 1; border-radius: 0; border: 1px solid rgba(255,255,255,.14); position: relative; overflow: hidden; }
.cell figcaption { font-size: 13px; color: var(--color-gray-500); }
.cell figcaption b { display: block; color: #fff; font: 600 16px/1.4 var(--font-display); }
.cell__demo--field canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.surf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.surf span { padding: 28px 16px; font: 500 15px/1 var(--font-pixel); border: 1px solid rgba(255,255,255,.14); }
.edge-demo { display: flex; flex-direction: column; margin: 0; border: 1px solid rgba(255,255,255,.14); }
.edge-demo__a { height: 48px; background: #FAFAFA; }
.edge-demo__b { position: relative; height: 72px; background: #000; }
.edge-demo__b::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; background: #FAFAFA;
  -webkit-mask: linear-gradient(#000 0 8px, transparent 8px), repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 8px 8px; -webkit-mask-composite: source-over;
          mask: linear-gradient(#000 0 8px, transparent 8px), repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 8px 8px; mask-composite: add; }
.px-verbs { display: flex; flex-wrap: wrap; gap: 24px 56px; margin-top: 56px; }
.px-verb { font: 500 clamp(48px, 8vw, 96px)/1 var(--font-pixel); }
.px-verb::after { content: ""; display: inline-block; width: .22em; height: .22em; margin-left: .16em; background: repeating-conic-gradient(var(--color-red) 0 25%, transparent 0 50%) 0 0 / .22em .22em; }

/* layout */
.space { display: grid; gap: 10px; }
.space div { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 16px; }
.space code { grid-column: 1; grid-row: 1; color: var(--color-gray-700); font-size: 12px; }
.space i { grid-column: 2; grid-row: 1; height: 16px; background: var(--color-red); display: block; }
.rad { aspect-ratio: 1.3; background: #fff; border: 1.5px solid #000; display: flex; align-items: flex-end; padding: 16px; }
.rad code { color: var(--color-gray-700); font-size: 12px; }

/* components */
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.row--col { flex-direction: column; align-items: flex-start; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-role { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-card); }
.ds-callout { background: #fff; color: #000; margin-top: 0; }

/* motion */
.mo { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.mo__demo { height: 120px; display: flex; align-items: center; margin-bottom: 8px; color: #000; }
.mo b { font: 600 18px/1.2 var(--font-display); }
.mo span { color: var(--color-gray-700); font-size: 14px; }
.mo__bar { width: 24px; height: 24px; border-radius: 6px; background: var(--color-red); animation: slide 2.4s cubic-bezier(0.2, 0, 0, 1) infinite alternate; }
@keyframes slide { to { transform: translateX(260px); } }
.tok { width: 100%; margin-top: 32px; border-collapse: collapse; }
.tok th { text-align: left; font: 500 12px/1.3 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--color-gray-700); padding: 12px 0; border-bottom: 1.5px solid #000; }
.tok td { padding: 14px 0; border-bottom: 1px solid var(--color-gray-200); color: var(--color-gray-700); }
.tok td:first-child { color: #000; width: 40%; }

.foot__nav a[aria-current] { color: #fff; }

@media (max-width: 1000px) {
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contrast, .ds-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scale > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 760px) {
  .ds-top { padding-top: 120px; }
  .swatches, .ds-grid--2, .cards--2 { grid-template-columns: minmax(0, 1fr); }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surf { grid-template-columns: minmax(0, 1fr); }
  .space div { grid-template-columns: 110px 1fr; }
  .nav__links { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mo__bar { animation: none; } }