.ds-nav { position: sticky; top: 78px; display: grid; gap: var(--s-3); align-content: start; }
  .ds-nav a { font-size: var(--fs-xs); color: var(--fg-subtle); letter-spacing: .06em; }
  .ds-nav a:hover { color: var(--fg); }
  .ds-sec { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
  .ds-sec:first-of-type { border-top: 0; }
  .ds-grid { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: var(--s-8); }
  @media (max-width: 900px) {
    .ds-grid { grid-template-columns: minmax(0, 1fr); }
    .ds-grid > *, .ds-grid .grid-12 > * { min-width: 0; }
    .ds-nav { position: static; }
    .ds-grid .grid-12, .ds-grid .works { grid-template-columns: minmax(0, 1fr) !important; }
    .ds-grid .grid-12 > * { grid-column: 1 / -1 !important; }
    .ds-grid code { overflow-wrap: anywhere; }
  }
  .sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--s-5); }
  .sw__chip { height: 84px; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--line); }
  .sw__name { font-family: var(--font-mono); font-size: var(--fs-micro); margin: var(--s-3) 0 0; }
  .sw__hex { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-subtle); margin: 2px 0 0; }
  .sw__use { font-size: var(--fs-micro); color: var(--fg-subtle); margin: 6px 0 0; line-height: 1.5; }
  .pal-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
  .spec { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: var(--s-6); align-items: baseline;
          padding-block: var(--s-5); border-top: 1px solid var(--line); }
  @media (max-width: 720px) { .spec { grid-template-columns: 1fr; gap: var(--s-3); } }
  .spec__meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-subtle); line-height: 1.7; }
  .ds-box { border: 1px solid var(--line); border-radius: var(--r-2); padding: clamp(20px,3vw,36px); }
  .ds-row { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }
  .ds-label { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-subtle);
              letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-4); }
  .rule-list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
  .rule-list li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s-3);
                  font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.6; }
  .rule-list--files li { grid-template-columns: 1fr; gap: 3px;
                         padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
  .rule-list--files span { font-size: var(--fs-micro); color: var(--fg-subtle); }
  .rule-list .y { color: #7FC08F; } .rule-list .n { color: var(--c-ember-soft); }
  .space-bar { height: 22px; background: var(--c-ember); opacity: .55; border-radius: 1px; }
  .space-bar { max-width: 100%; }
  .space-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 68px; gap: var(--s-4);
               align-items: center; font-family: var(--font-mono); font-size: var(--fs-micro);
               color: var(--fg-subtle); padding-block: 6px; }
  .logo-plate { display: grid; place-items: center; padding: clamp(28px,5vw,56px); border-radius: var(--r-2); }
  .ease-demo { height: 3px; background: var(--line); position: relative; border-radius: 2px; overflow: hidden; }
  .ease-demo span { position: absolute; inset: 0; width: 34%; background: var(--c-ember);
                    animation: slide 2.6s infinite alternate; }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(195%); } }