@layer reset, tokens, base, layout, components, states, responsive;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
  }

  body, h1, h2, h3, h4, p, figure, dl, dd, ul, ol {
    margin: 0;
  }

  ul, ol {
    padding: 0;
  }

  button, input, select {
    font: inherit;
  }

  button, a, input, select {
    -webkit-tap-highlight-color: transparent;
  }

  img {
    display: block;
    max-width: 100%;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  [hidden] {
    display: none !important;
  }
}

@layer tokens {
  :root {
    color-scheme: dark;

    --color-bg: oklch(0.145 0.012 28);
    --color-bg-deep: oklch(0.105 0.01 28);
    --color-surface: oklch(0.185 0.014 28);
    --color-surface-raised: oklch(0.225 0.016 28);
    --color-surface-active: oklch(0.265 0.027 28);
    --color-ink: oklch(0.94 0.016 36);
    --color-ink-strong: oklch(0.98 0.01 36);
    --color-muted: oklch(0.73 0.018 32);
    --color-subtle: oklch(0.62 0.016 32);
    --color-line: oklch(0.34 0.02 28);
    --color-line-strong: oklch(0.46 0.03 28);
    --color-accent: oklch(0.67 0.18 28);
    --color-accent-hover: oklch(0.72 0.18 28);
    --color-accent-strong: oklch(0.46 0.16 28);
    --color-accent-strong-hover: oklch(0.51 0.17 28);
    --color-accent-soft: oklch(0.235 0.045 28);
    --color-accent-ink: oklch(0.98 0.012 36);
    --color-backdrop: oklch(0.06 0.01 28 / 0.84);

    --font-display: "Avenir Next Condensed", "Arial Narrow", "DIN Condensed", sans-serif;
    --font-body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: clamp(1.75rem, 3vw, 2.5rem);
    --text-2xl: clamp(2.5rem, 4.25vw, 3.5rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-section: clamp(4.5rem, 8vw, 8rem);
    --gutter: clamp(1rem, 4vw, 3rem);

    --control-sm: 2.5rem;
    --control-md: 3rem;
    --header-height: 4.5rem;
    --content-width: 90rem;
    --reading-width: 70ch;
    --dialog-width: 48rem;
    --line: 1px;

    --duration-fast: 140ms;
    --duration-base: 320ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --z-nav: 20;
    --z-dialog-backdrop: 40;
    --z-dialog: 50;
    --z-toast: 60;
  }
}

@layer base {
  body {
    min-width: 20rem;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::selection {
    background: var(--color-accent-strong);
    color: var(--color-accent-ink);
  }

  h1, h2, h3, h4 {
    color: var(--color-ink-strong);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  h1 {
    max-width: 12ch;
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
  }

  h4 {
    font-size: var(--text-md);
  }

  p, li {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-color: var(--color-line-strong);
    text-underline-offset: 0.22em;
    transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
  }

  a:hover {
    color: var(--color-accent-hover);
    text-decoration-color: currentColor;
  }

  button {
    color: inherit;
  }

  button, a, input, select, dialog {
    border-radius: 0;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  ::placeholder {
    color: var(--color-subtle);
    opacity: 1;
  }

  ::-webkit-scrollbar {
    width: var(--space-3);
    height: var(--space-3);
  }

  ::-webkit-scrollbar-track {
    background: var(--color-bg-deep);
  }

  ::-webkit-scrollbar-thumb {
    border: var(--space-1) solid var(--color-bg-deep);
    background: var(--color-line-strong);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-strong);
    color: var(--color-accent-ink);
    font-weight: 700;
    transform: translateY(calc(-100% - var(--space-6)));
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .skip-link:focus {
    transform: translateY(0);
  }
}

@layer layout {
  .shell {
    width: min(100% - (var(--gutter) * 2), var(--content-width));
    margin-inline: auto;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    height: var(--header-height);
    border-bottom: var(--line) solid var(--color-line);
    background: var(--color-bg-deep);
  }

  .header-inner {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink-strong);
    text-decoration: none;
  }

  .brand-link:hover {
    color: var(--color-ink-strong);
  }

  .brand-wordmark {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 750;
    letter-spacing: -0.02em;
  }

  .primary-nav {
    display: flex;
    height: 100%;
    align-items: center;
    gap: var(--space-6);
    white-space: nowrap;
  }

  .primary-nav a {
    display: inline-flex;
    min-height: var(--control-sm);
    align-items: center;
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 650;
    text-decoration: none;
  }

  .primary-nav a:hover,
  .primary-nav a:focus-visible {
    color: var(--color-ink-strong);
  }

  .primary-nav .nav-download {
    height: var(--control-sm);
    padding-inline: var(--space-4);
    background: var(--color-accent-strong);
    color: var(--color-accent-ink);
  }

  .primary-nav .nav-download:hover {
    background: var(--color-accent-strong-hover);
    color: var(--color-accent-ink);
  }

  .nav-toggle {
    display: none;
    width: var(--control-md);
    height: var(--control-md);
    padding: var(--space-3);
    border: var(--line) solid var(--color-line-strong);
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle > span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .nav-toggle > span:not(.sr-only) + span {
    margin-top: var(--space-2);
  }

  .nav-toggle[aria-expanded="true"] > span:nth-of-type(2) {
    transform: translateY(5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] > span:nth-of-type(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .hero {
    display: grid;
    min-height: calc(100dvh - var(--header-height));
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(var(--space-8), 6vw, var(--space-20));
    padding-block: clamp(var(--space-12), 8vh, var(--space-20));
  }

  .hero-copy {
    display: grid;
    gap: var(--space-6);
    align-content: center;
    animation: hero-enter var(--duration-base) var(--ease-out) both;
  }

  .kicker,
  .station-label,
  .toolbar-label {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .kicker:empty,
  #hero-caption:empty {
    display: none;
  }

  .hero-summary {
    max-width: 42ch;
    color: var(--color-muted);
    font-size: var(--text-md);
    line-height: 1.55;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .hero-visual {
    position: relative;
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-surface);
    animation: hero-enter var(--duration-base) var(--ease-out) 80ms both;
  }

  .hero-visual::after {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    width: var(--space-8);
    height: var(--space-8);
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    content: "";
    pointer-events: none;
  }

  .hero-visual img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .hero-visual figcaption {
    padding: var(--space-3) var(--space-4);
    border-top: var(--line) solid var(--color-line);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .fact-band {
    border-block: var(--line) solid var(--color-line);
    background: var(--color-bg-deep);
  }

  .fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fact-grid > div {
    padding: var(--space-6);
  }

  .fact-grid > div + div {
    border-left: var(--line) solid var(--color-line);
  }

  .fact-grid dt {
    color: var(--color-subtle);
    font-size: var(--text-xs);
    font-weight: 650;
  }

  .fact-grid dd {
    margin-top: var(--space-1);
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 700;
  }

  .section {
    padding-block: var(--space-section);
    border-top: var(--line) solid var(--color-line);
  }

  .section-heading {
    display: grid;
    max-width: 54rem;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
  }

  .section-heading > p {
    max-width: var(--reading-width);
    color: var(--color-muted);
    font-size: var(--text-md);
  }

  .compact-heading {
    margin-bottom: var(--space-10);
  }

  .section-rail,
  .planning-section,
  .console-section {
    background: var(--color-bg-deep);
  }

  .overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: var(--space-12);
  }

  .overview-main {
    max-width: var(--reading-width);
  }

  .compatibility-panel {
    align-self: start;
    padding: var(--space-6);
    border-top: 3px solid var(--color-accent-strong);
    background: var(--color-surface);
  }

  .compatibility-panel h3 {
    margin-bottom: var(--space-5);
  }

  .download-station {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-12);
    padding: var(--space-8);
    background: var(--color-accent-strong);
    color: var(--color-accent-ink);
  }

  .download-station .station-label,
  .download-station .state-copy,
  .download-station .artifact-meta dt,
  .download-station .artifact-meta dd {
    color: var(--color-accent-ink);
  }

  .download-station h3 {
    margin-top: var(--space-2);
    color: var(--color-accent-ink);
    font-size: var(--text-xl);
  }

  .download-station > div:first-child > p:last-child {
    max-width: 48ch;
    margin-top: var(--space-3);
  }

  .artifact-meta dl {
    display: grid;
    gap: var(--space-3);
  }

  .artifact-meta dl > div {
    display: grid;
    grid-template-columns: minmax(5rem, auto) 1fr;
    gap: var(--space-4);
  }

  .artifact-meta dt {
    font-size: var(--text-sm);
    opacity: 0.78;
  }

  .artifact-meta dd {
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .install-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-8);
    margin-top: var(--space-12);
  }

  .manual-block {
    padding-top: var(--space-6);
    border-top: var(--line) solid var(--color-line-strong);
  }

  .manual-block h3 {
    margin-bottom: var(--space-5);
  }

  .tutorial-workbench {
    display: grid;
    min-height: 34rem;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 2.2fr);
    border: var(--line) solid var(--color-line);
    background: var(--color-bg);
  }

  .tutorial-index {
    border-right: var(--line) solid var(--color-line);
  }

  .tutorial-index button {
    display: grid;
    width: 100%;
    min-height: 4.5rem;
    place-items: center start;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border: 0;
    border-bottom: var(--line) solid var(--color-line);
    background: transparent;
    color: var(--color-muted);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }

  .tutorial-index button:hover {
    background: var(--color-surface);
    color: var(--color-ink-strong);
  }

  .tutorial-index button[aria-selected="true"] {
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
    box-shadow: inset 3px 0 0 var(--color-accent);
  }

  .tutorial-index button span:first-child {
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .tutorial-reader {
    padding: clamp(var(--space-6), 5vw, var(--space-12));
  }

  .tutorial-reader > * {
    max-width: var(--reading-width);
  }

  .tutorial-reader .tutorial-summary {
    margin-top: var(--space-4);
    color: var(--color-muted);
    font-size: var(--text-md);
  }

  .tutorial-reader h4 {
    margin: var(--space-8) 0 var(--space-4);
  }

  .tutorial-steps {
    display: grid;
    gap: var(--space-4);
    counter-reset: tutorial-step;
    list-style: none;
  }

  .tutorial-steps li {
    display: grid;
    grid-template-columns: var(--space-10) 1fr;
    gap: var(--space-4);
    align-items: start;
    counter-increment: tutorial-step;
  }

  .tutorial-steps li::before {
    display: grid;
    width: var(--space-8);
    height: var(--space-8);
    place-items: center;
    border: var(--line) solid var(--color-line-strong);
    color: var(--color-accent);
    content: counter(tutorial-step, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .tutorial-note,
  .tutorial-diagnosis {
    margin-top: var(--space-8);
    padding: var(--space-5);
    background: var(--color-surface);
  }

  .tutorial-note h4,
  .tutorial-diagnosis h4 {
    margin: 0 0 var(--space-3);
  }

  .catalog-heading {
    max-width: 60rem;
  }

  .catalog-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--space-8);
    border-block: var(--line) solid var(--color-line-strong);
  }

  .catalog-stat {
    padding: var(--space-5) var(--space-4);
  }

  .catalog-stat + .catalog-stat {
    border-left: var(--line) solid var(--color-line);
  }

  .catalog-stat dt {
    color: var(--color-subtle);
    font-size: var(--text-xs);
  }

  .catalog-stat dd {
    margin-top: var(--space-1);
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    line-height: 1;
  }

  .catalog-controls {
    display: grid;
    grid-template-columns: minmax(16rem, 2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-5);
    background: var(--color-surface);
  }

  .discipline-strip {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-bottom: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .discipline-chip {
    flex: 0 0 auto;
    min-height: var(--control-sm);
    padding: var(--space-2) var(--space-4);
    scroll-snap-align: start;
    border: var(--line) solid var(--color-line);
    background: transparent;
    color: var(--color-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
  }

  .discipline-chip:hover {
    border-color: var(--color-line-strong);
    color: var(--color-ink-strong);
  }

  .discipline-chip[aria-pressed="true"] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
  }

  .catalog-result-bar {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .catalog-result-bar p:last-child {
    font-family: var(--font-mono);
  }

  .table-frame {
    width: 100%;
    overflow-x: auto;
  }

  .catalog-section .table-frame {
    margin-top: var(--space-3);
  }

  .data-table {
    width: 100%;
    min-width: 42rem;
    background: var(--color-bg);
  }

  .data-table th {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--line) solid var(--color-line-strong);
    color: var(--color-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: left;
  }

  .data-table td {
    padding: var(--space-4);
    border-bottom: var(--line) solid var(--color-line);
    color: var(--color-muted);
    vertical-align: middle;
  }

  .data-table tbody tr {
    transition: background var(--duration-fast) var(--ease-out);
  }

  .data-table tbody tr:hover {
    background: var(--color-surface);
  }

  .data-table .cell-title {
    color: var(--color-ink-strong);
    font-weight: 700;
  }

  .data-table .cell-code {
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .data-table td:last-child,
  .data-table th:last-child {
    text-align: right;
  }

  .status-label {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    padding-inline: var(--space-2);
    border: var(--line) solid var(--color-line);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .status-label.is-implemented,
  .status-label.is-paired {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .planning-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .planning-block {
    grid-column: span 4;
    min-height: 100%;
    padding: var(--space-6);
    border-top: 3px solid var(--color-line-strong);
    background: var(--color-bg);
  }

  .planning-block:nth-child(1),
  .planning-block:nth-child(6) {
    grid-column: span 8;
    border-top-color: var(--color-accent-strong);
  }

  .planning-block:nth-child(4) {
    grid-column: span 5;
  }

  .planning-block:nth-child(5) {
    grid-column: span 7;
  }

  .planning-block h3 {
    margin-bottom: var(--space-4);
  }

  .planning-block .content-list {
    margin-top: var(--space-4);
  }

  .architecture-switch {
    display: inline-flex;
    margin-bottom: var(--space-8);
    border: var(--line) solid var(--color-line-strong);
  }

  .architecture-tab {
    min-height: var(--control-md);
    padding-inline: var(--space-5);
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-weight: 700;
    cursor: pointer;
  }

  .architecture-tab + .architecture-tab {
    border-left: var(--line) solid var(--color-line-strong);
  }

  .architecture-tab[aria-selected="true"] {
    background: var(--color-accent-strong);
    color: var(--color-accent-ink);
  }

  .architecture-panel {
    max-width: 76rem;
  }

  .architecture-map {
    display: grid;
    grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 2fr);
    border-top: var(--line) solid var(--color-line-strong);
  }

  .architecture-group {
    display: contents;
  }

  .architecture-group > h3,
  .architecture-group > .architecture-content {
    padding-block: var(--space-6);
    border-bottom: var(--line) solid var(--color-line);
  }

  .architecture-group > h3 {
    padding-right: var(--space-8);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0;
  }

  .architecture-content {
    padding-left: var(--space-8);
  }

  .extension-system {
    background: var(--color-surface);
  }

  .extension-heading {
    max-width: var(--reading-width);
  }

  .extension-heading h2 {
    margin-top: var(--space-2);
  }

  .extension-runtime {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    border-block: var(--line) solid var(--color-line-strong);
  }

  .extension-runtime-flow {
    list-style: none;
    border-right: var(--line) solid var(--color-line-strong);
  }

  .extension-runtime-flow li {
    display: grid;
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-6);
  }

  .extension-runtime-flow li + li {
    border-top: var(--line) solid var(--color-line);
  }

  .extension-step-index {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .extension-runtime-flow h3 {
    font-size: var(--text-md);
  }

  .extension-runtime-flow p {
    max-width: var(--reading-width);
    margin-top: var(--space-2);
    color: var(--color-muted);
  }

  .extension-security {
    padding: var(--space-6);
    background: var(--color-bg-deep);
  }

  .extension-security-heading {
    margin-bottom: var(--space-6);
  }

  .extension-security-heading h3 {
    margin-top: var(--space-2);
    font-size: var(--text-lg);
  }

  .extension-security-list > div {
    display: grid;
    grid-template-columns: var(--space-20) minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-top: var(--line) solid var(--color-line);
  }

  .extension-security-list dt {
    color: var(--color-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .extension-security-list dd {
    overflow-wrap: anywhere;
    color: var(--color-ink-strong);
    font-size: var(--text-sm);
  }

  .extension-security-list dd > .extension-tag-list {
    margin-top: var(--space-3);
  }

  .extension-security-rules {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-left: var(--space-5);
    color: var(--color-muted);
  }

  .extension-update {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: start;
    margin-top: var(--space-10);
  }

  .extension-update-copy p {
    max-width: var(--reading-width);
    margin-top: var(--space-3);
    color: var(--color-muted);
  }

  .extension-update-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block: var(--line) solid var(--color-line-strong);
    list-style: none;
  }

  .extension-update-steps li {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
  }

  .extension-update-steps li + li {
    border-left: var(--line) solid var(--color-line);
  }

  .extension-update-steps strong {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
  }

  .extension-update-steps span {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .extension-manager {
    margin-top: var(--space-12);
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-bg);
  }

  .extension-manager-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6);
    border-bottom: var(--line) solid var(--color-line-strong);
  }

  .extension-manager-toolbar h3 {
    margin-top: var(--space-1);
  }

  .extension-manager-summary {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .extension-manager-actions,
  .extension-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .extension-feedback {
    margin: var(--space-5) var(--space-6) 0;
  }

  .extension-loading {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    color: var(--color-muted);
  }

  .extension-error {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin: var(--space-6);
  }

  .extension-error p {
    margin-top: var(--space-2);
  }

  .extension-empty {
    border: 0;
  }

  .extension-table td {
    vertical-align: top;
  }

  .extension-name {
    color: var(--color-ink-strong);
    font-weight: 700;
  }

  .extension-id,
  .extension-engine,
  .extension-revision {
    display: block;
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .extension-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
    list-style: none;
  }

  .extension-tag {
    padding: var(--space-1) var(--space-2);
    border: var(--line) solid var(--color-line);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .extension-status {
    display: inline-flex;
    min-height: var(--space-6);
    align-items: center;
    padding-inline: var(--space-2);
    border: var(--line) solid var(--color-line-strong);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .extension-status.is-enabled {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
  }

  .console-heading {
    max-width: 62rem;
  }

  .console-loading {
    display: grid;
    max-width: 34rem;
    gap: var(--space-4);
    color: var(--color-muted);
  }

  .auth-gate {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    gap: clamp(var(--space-8), 7vw, var(--space-20));
    align-items: start;
  }

  .auth-intro {
    max-width: var(--reading-width);
  }

  .auth-intro h3 {
    font-size: var(--text-xl);
  }

  .auth-intro > p {
    margin-top: var(--space-5);
    color: var(--color-muted);
    font-size: var(--text-md);
  }

  .auth-intro ul {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-8);
    list-style: none;
  }

  .auth-intro li {
    display: grid;
    grid-template-columns: var(--space-4) 1fr;
    gap: var(--space-3);
    color: var(--color-muted);
  }

  .auth-intro li::before {
    width: var(--space-2);
    height: var(--space-2);
    margin-top: var(--space-2);
    background: var(--color-accent-strong);
    content: "";
  }

  .auth-panel {
    padding: var(--space-6);
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-bg);
  }

  .auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
    border-bottom: var(--line) solid var(--color-line-strong);
  }

  .auth-tabs button {
    min-height: var(--control-md);
    border: 0;
    background: transparent;
    color: var(--color-muted);
    font-weight: 700;
    cursor: pointer;
  }

  .auth-tabs button + button {
    border-left: var(--line) solid var(--color-line-strong);
  }

  .auth-tabs button[aria-selected="true"] {
    background: var(--color-surface-active);
    color: var(--color-ink-strong);
  }

  .auth-form {
    display: grid;
    gap: var(--space-5);
  }

  .auth-form .button {
    justify-self: start;
    margin-top: var(--space-2);
  }

  .console-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: var(--line) solid var(--color-line-strong);
  }

  .console-toolbar h3 {
    margin-top: var(--space-1);
  }

  .server-create {
    display: grid;
    grid-template-columns: minmax(16rem, 28rem) auto;
    gap: var(--space-4);
    align-items: end;
    margin-block: var(--space-8);
  }

  .console-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.9fr);
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-bg);
  }

  .server-list-panel {
    min-width: 0;
    border-right: var(--line) solid var(--color-line-strong);
  }

  .server-detail-panel {
    min-width: 0;
    padding: var(--space-6);
  }

  .panel-heading {
    display: flex;
    min-height: var(--control-md);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5);
    border-bottom: var(--line) solid var(--color-line);
  }

  .panel-heading p {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .server-detail-panel > .empty-state {
    min-height: 24rem;
  }

  .detail-heading {
    padding: 0 0 var(--space-5);
  }

  .detail-heading p:last-child {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  .server-table tbody tr.is-selected {
    background: var(--color-accent-soft);
  }

  .server-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding-block: var(--space-5);
  }

  .server-facts div {
    padding: var(--space-4);
    background: var(--color-surface);
  }

  .server-facts dt {
    color: var(--color-subtle);
    font-size: var(--text-xs);
  }

  .server-facts dd {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .pairing-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: var(--line) solid var(--color-accent-strong);
    background: var(--color-accent-soft);
  }

  .pairing-result output {
    display: block;
    margin-block: var(--space-2);
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  .pairing-result p:last-child {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .snapshot-panel {
    margin-top: var(--space-6);
    border-top: var(--line) solid var(--color-line-strong);
  }

  .snapshot-panel > .panel-heading {
    padding-inline: 0;
  }

  .snapshot-view {
    display: grid;
    gap: var(--space-5);
    padding-top: var(--space-5);
  }

  .snapshot-metadata,
  .definition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .snapshot-metadata > div,
  .definition-grid > div {
    min-width: 0;
  }

  .snapshot-metadata dt,
  .definition-grid dt {
    color: var(--color-subtle);
    font-size: var(--text-xs);
  }

  .snapshot-metadata dd,
  .definition-grid dd {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .snapshot-group {
    padding-top: var(--space-5);
    border-top: var(--line) solid var(--color-line);
  }

  .snapshot-group h5 {
    margin: 0 0 var(--space-3);
    color: var(--color-ink-strong);
    font-family: var(--font-display);
    font-size: var(--text-md);
  }

  .snapshot-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
  }

  .snapshot-list li {
    padding: var(--space-3);
    background: var(--color-surface);
    color: var(--color-muted);
    overflow-wrap: anywhere;
  }

  .site-footer {
    padding-block: var(--space-12);
    border-top: var(--line) solid var(--color-line-strong);
    background: var(--color-bg-deep);
  }

  .footer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto minmax(12rem, 0.5fr);
    align-items: start;
    gap: var(--space-12);
  }

  .footer-layout > div > p {
    max-width: 46ch;
    margin-top: var(--space-4);
    color: var(--color-muted);
  }

  .footer-layout nav {
    display: grid;
    gap: var(--space-2);
  }

  .footer-layout nav a {
    color: var(--color-muted);
    text-decoration: none;
  }

  .footer-meta {
    color: var(--color-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }
}

@layer components {
  .button {
    display: inline-flex;
    width: fit-content;
    min-height: var(--control-md);
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border: var(--line) solid transparent;
    font-size: var(--text-sm);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }

  .button:active:not(:disabled) {
    transform: translateY(1px);
  }

  .button:disabled,
  .text-button:disabled,
  .dialog-close:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .button-primary {
    background: var(--color-accent-strong);
    color: var(--color-accent-ink);
  }

  .button-primary:hover {
    background: var(--color-accent-strong-hover);
    color: var(--color-accent-ink);
  }

  .button-secondary {
    border-color: var(--color-line-strong);
    background: transparent;
    color: var(--color-ink-strong);
  }

  .button-secondary:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
  }

  .button-inverse {
    background: var(--color-accent-ink);
    color: var(--color-bg-deep);
  }

  .button-inverse:hover {
    background: var(--color-ink);
    color: var(--color-bg-deep);
  }

  .text-button,
  .dialog-close {
    min-height: var(--control-sm);
    padding: 0 var(--space-3);
    border: var(--line) solid var(--color-line);
    background: transparent;
    color: var(--color-muted);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .text-button:hover,
  .dialog-close:hover {
    border-color: var(--color-accent);
    color: var(--color-ink-strong);
  }

  .field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
  }

  .field label {
    color: var(--color-ink-strong);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .field input,
  .field select {
    width: 100%;
    min-height: var(--control-md);
    padding: var(--space-3) var(--space-4);
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-bg-deep);
    color: var(--color-ink-strong);
  }

  .field input:hover,
  .field select:hover {
    border-color: var(--color-subtle);
  }

  .field input:focus-visible,
  .field select:focus-visible {
    border-color: var(--color-accent);
  }

  .field-help {
    color: var(--color-subtle);
    font-size: var(--text-xs);
  }

  .form-message {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-surface);
    color: var(--color-ink-strong);
  }

  .form-message-error {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
  }

  .console-notice {
    margin-top: var(--space-5);
    margin-bottom: 0;
  }

  .content-stack {
    display: grid;
    gap: var(--space-5);
  }

  .content-stack > p,
  .content-group > p {
    color: var(--color-muted);
  }

  .content-stack > p:first-child,
  .content-group > p:first-of-type {
    color: var(--color-ink);
  }

  .content-group {
    display: grid;
    gap: var(--space-3);
  }

  .content-group + .content-group {
    padding-top: var(--space-5);
    border-top: var(--line) solid var(--color-line);
  }

  .content-group h4 {
    color: var(--color-ink-strong);
  }

  .content-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
  }

  .content-list li {
    display: grid;
    grid-template-columns: var(--space-3) 1fr;
    gap: var(--space-3);
    color: var(--color-muted);
  }

  .content-list li::before {
    width: var(--space-2);
    height: var(--space-2);
    margin-top: 0.58em;
    background: var(--color-accent-strong);
    content: "";
  }

  .ordered-content-list {
    display: grid;
    gap: var(--space-3);
    padding-left: var(--space-6);
    color: var(--color-muted);
  }

  .ordered-content-list li::marker {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 700;
  }

  .content-code {
    display: block;
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    background: var(--color-bg-deep);
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: pre-wrap;
  }

  .empty-state {
    display: grid;
    min-height: 16rem;
    place-content: center;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-8);
    border: var(--line) solid var(--color-line);
    background: var(--color-surface);
  }

  .empty-state p {
    max-width: 44ch;
    color: var(--color-muted);
  }

  .empty-state .button {
    margin-top: var(--space-2);
  }

  .compact-empty {
    min-height: 12rem;
    border: 0;
    background: transparent;
  }

  .state-copy {
    color: var(--color-muted);
  }

  .inline-error {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: var(--line) solid var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
  }

  .item-dialog {
    width: min(calc(100% - (var(--gutter) * 2)), var(--dialog-width));
    max-height: min(48rem, calc(100dvh - (var(--space-8) * 2)));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-bg);
    color: var(--color-ink);
  }

  .item-dialog::backdrop {
    background: var(--color-backdrop);
  }

  .dialog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6);
    border-bottom: var(--line) solid var(--color-line-strong);
    background: var(--color-bg-deep);
  }

  .dialog-heading h2 {
    margin-top: var(--space-2);
  }

  .item-dialog-body {
    max-height: calc(100dvh - 13rem);
    padding: var(--space-6);
    overflow-y: auto;
  }

  .item-purpose {
    margin-bottom: var(--space-6);
    color: var(--color-ink);
    font-size: var(--text-md);
  }

  .recipe-hint {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-surface);
  }

  .recipe-hint h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-md);
  }

  .extension-dialog {
    width: min(calc(100% - (var(--gutter) * 2)), calc(var(--dialog-width) + var(--space-24)));
  }

  .extension-form,
  .extension-delete-form {
    display: grid;
    max-height: inherit;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .extension-dialog-body {
    min-height: 0;
    max-height: none;
  }

  .extension-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .extension-dependencies-field {
    grid-column: 1 / -1;
  }

  .extension-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
    border: var(--line) solid var(--color-line-strong);
    border-radius: 0;
    background: var(--color-bg-deep);
    color: var(--color-ink-strong);
    font: inherit;
  }

  .extension-form input[readonly] {
    border-color: var(--color-line);
    background: var(--color-surface);
    color: var(--color-muted);
  }

  .extension-form textarea:hover {
    border-color: var(--color-subtle);
  }

  .extension-form textarea:focus-visible {
    border-color: var(--color-accent);
  }

  .extension-permissions {
    min-width: 0;
    margin: var(--space-6) 0 0;
    padding: var(--space-5);
    border: var(--line) solid var(--color-line-strong);
  }

  .extension-permissions legend {
    padding-inline: var(--space-2);
    color: var(--color-ink-strong);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .extension-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .extension-permission-grid label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border: var(--line) solid var(--color-line);
    background: var(--color-surface);
    cursor: pointer;
  }

  .extension-permission-grid label:has(input:checked) {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
  }

  .extension-permission-grid input,
  .extension-enabled-control input {
    flex: 0 0 auto;
    width: var(--space-4);
    height: var(--space-4);
    margin-top: var(--space-1);
    accent-color: var(--color-accent);
  }

  .extension-permission-grid span {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
  }

  .extension-permission-grid strong {
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .extension-permission-grid small {
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .extension-source-field {
    margin-top: var(--space-6);
  }

  .extension-source-field textarea {
    min-height: calc(var(--space-24) * 2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    tab-size: 2;
    white-space: pre;
  }

  .extension-source-field:has(textarea[aria-invalid="true"]) .field-help {
    color: var(--color-accent);
  }

  .extension-enabled-control {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
    color: var(--color-ink-strong);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
  }

  .extension-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: var(--line) solid var(--color-line-strong);
    background: var(--color-bg-deep);
  }

  .extension-delete-dialog {
    width: min(calc(100% - (var(--gutter) * 2)), calc(var(--dialog-width) - var(--space-16)));
  }

  .extension-delete-body {
    display: grid;
    gap: var(--space-5);
    min-height: 0;
  }

  .extension-delete-body code {
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface);
    color: var(--color-ink-strong);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
  }

  .extension-delete-error {
    margin-bottom: 0;
  }

  .extension-delete-trigger {
    border-color: var(--color-accent-strong);
    color: var(--color-accent);
  }

  .extension-delete-trigger:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-ink-strong);
  }

  .toast-region {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-toast);
    display: grid;
    width: min(24rem, calc(100% - (var(--space-4) * 2)));
    gap: var(--space-2);
    pointer-events: none;
  }

  .toast {
    padding: var(--space-4);
    border: var(--line) solid var(--color-line-strong);
    background: var(--color-surface-raised);
    color: var(--color-ink-strong);
    animation: toast-enter var(--duration-base) var(--ease-out) both;
  }

  .noscript-message {
    position: fixed;
    inset: auto var(--space-4) var(--space-4);
    z-index: var(--z-toast);
    padding: var(--space-4);
    border: var(--line) solid var(--color-accent);
    background: var(--color-bg-deep);
    color: var(--color-ink-strong);
  }
}

@layer states {
  .content-skeleton {
    display: grid;
    width: min(100%, 40rem);
    gap: var(--space-3);
  }

  .content-skeleton span {
    display: block;
    height: var(--space-4);
    background: var(--color-surface-raised);
    animation: skeleton-pulse 1.6s ease-in-out infinite alternate;
  }

  .content-skeleton span:nth-child(2) {
    width: 84%;
  }

  .content-skeleton span:nth-child(3) {
    width: 62%;
  }

  .loading-row td {
    height: 8rem;
    color: var(--color-muted);
    text-align: center !important;
  }

  @keyframes hero-enter {
    from {
      opacity: 0;
      transform: translateY(var(--space-5));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes skeleton-pulse {
    from { opacity: 0.38; }
    to { opacity: 0.86; }
  }

  @keyframes toast-enter {
    from {
      opacity: 0;
      transform: translateY(var(--space-3));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@layer responsive {
  @media (max-width: 64rem) {
    .nav-toggle {
      display: block;
    }

    .primary-nav {
      position: absolute;
      top: var(--header-height);
      right: 0;
      left: 0;
      display: none;
      height: auto;
      padding: var(--space-4) var(--gutter) var(--space-6);
      border-bottom: var(--line) solid var(--color-line-strong);
      background: var(--color-bg-deep);
    }

    .primary-nav[data-open="true"] {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-2);
    }

    .primary-nav a {
      justify-content: center;
      padding: var(--space-3);
      border: var(--line) solid var(--color-line);
    }

    .primary-nav .nav-download {
      height: auto;
      grid-column: span 3;
    }

    .hero {
      min-height: auto;
      grid-template-columns: 1fr;
      padding-block: var(--space-16);
    }

    .hero-copy {
      max-width: 42rem;
    }

    .hero-visual {
      width: 100%;
    }

    .overview-layout,
    .auth-gate {
      grid-template-columns: 1fr;
    }

    .compatibility-panel {
      width: min(100%, 42rem);
    }

    .download-station {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .artifact-meta {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .catalog-controls {
      grid-template-columns: 2fr 1fr 1fr;
    }

    .catalog-controls .reset-filter {
      grid-column: 1 / -1;
    }

    .planning-block,
    .planning-block:nth-child(1),
    .planning-block:nth-child(4),
    .planning-block:nth-child(5),
    .planning-block:nth-child(6) {
      grid-column: span 6;
    }

    .extension-runtime {
      grid-template-columns: 1fr;
    }

    .extension-runtime-flow {
      border-right: 0;
    }

    .extension-security {
      border-top: var(--line) solid var(--color-line-strong);
    }

    .extension-update {
      grid-template-columns: 1fr;
    }

    .extension-update-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .extension-update-steps li:nth-child(odd) {
      border-left: 0;
    }

    .extension-update-steps li:nth-child(n + 3) {
      border-top: var(--line) solid var(--color-line);
    }

    .console-grid {
      grid-template-columns: 1fr;
    }

    .server-list-panel {
      border-right: 0;
      border-bottom: var(--line) solid var(--color-line-strong);
    }

    .footer-layout {
      grid-template-columns: 1fr auto;
    }

    .footer-meta {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 48rem) {
    :root {
      --header-height: 4rem;
    }

    html {
      scroll-padding-top: 4.5rem;
    }

    .brand-wordmark {
      font-size: var(--text-base);
    }

    .primary-nav[data-open="true"] {
      grid-template-columns: repeat(2, 1fr);
    }

    .primary-nav .nav-download {
      grid-column: span 2;
    }

    .hero {
      gap: var(--space-10);
      padding-block: var(--space-12);
    }

    .hero-actions,
    .hero-actions .button {
      width: 100%;
    }

    .fact-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .fact-grid > div {
      padding: var(--space-4);
    }

    .fact-grid > div + div {
      border-left: 0;
    }

    .fact-grid > div:nth-child(even) {
      border-left: var(--line) solid var(--color-line);
    }

    .fact-grid > div:nth-child(n + 3) {
      border-top: var(--line) solid var(--color-line);
    }

    .section-heading {
      margin-bottom: var(--space-8);
    }

    .download-station,
    .install-layout {
      grid-template-columns: 1fr;
    }

    .download-station .button {
      width: 100%;
    }

    .artifact-meta {
      grid-column: auto;
      grid-row: auto;
    }

    .tutorial-workbench {
      min-height: 0;
      grid-template-columns: 1fr;
    }

    .tutorial-index {
      display: flex;
      overflow-x: auto;
      border-right: 0;
      border-bottom: var(--line) solid var(--color-line);
      scroll-snap-type: x mandatory;
    }

    .tutorial-index button {
      flex: 0 0 12rem;
      border-right: var(--line) solid var(--color-line);
      border-bottom: 0;
      scroll-snap-align: start;
    }

    .tutorial-index button[aria-selected="true"] {
      box-shadow: inset 0 -3px 0 var(--color-accent);
    }

    .tutorial-reader {
      padding: var(--space-5);
    }

    .tutorial-steps li {
      grid-template-columns: var(--space-8) 1fr;
      gap: var(--space-3);
    }

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

    .catalog-stat + .catalog-stat {
      border-left: 0;
    }

    .catalog-stat:nth-child(even) {
      border-left: var(--line) solid var(--color-line);
    }

    .catalog-stat:nth-child(n + 3) {
      border-top: var(--line) solid var(--color-line);
    }

    .catalog-controls {
      grid-template-columns: 1fr;
    }

    .catalog-controls .reset-filter {
      grid-column: auto;
      width: 100%;
    }

    .catalog-result-bar {
      display: grid;
      gap: var(--space-1);
    }

    .table-frame {
      overflow: visible;
    }

    .data-table {
      min-width: 0;
    }

    .data-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }

    .data-table tbody,
    .data-table tr,
    .data-table td {
      display: block;
      width: 100%;
    }

    .data-table tbody {
      display: grid;
      gap: var(--space-3);
    }

    .data-table tbody tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: var(--space-4);
      border: var(--line) solid var(--color-line);
    }

    .data-table td {
      display: grid;
      grid-template-columns: 6rem minmax(0, 1fr);
      gap: var(--space-3);
      padding: var(--space-2) 0;
      border: 0;
      text-align: left !important;
    }

    .data-table td::before {
      color: var(--color-subtle);
      content: attr(data-label);
      font-size: var(--text-xs);
      font-weight: 700;
    }

    .data-table td:last-child {
      display: block;
      grid-column: 1 / -1;
      margin-top: var(--space-2);
    }

    .data-table td:last-child::before {
      display: none;
    }

    .data-table td:last-child .button,
    .data-table td:last-child .text-button {
      width: 100%;
    }

    .data-table .loading-row {
      display: block;
    }

    .data-table .loading-row td {
      display: block;
    }

    .data-table .loading-row td::before {
      display: none;
    }

    .pagination,
    .pagination .button {
      width: 100%;
    }

    .planning-grid {
      grid-template-columns: 1fr;
    }

    .planning-block,
    .planning-block:nth-child(1),
    .planning-block:nth-child(4),
    .planning-block:nth-child(5),
    .planning-block:nth-child(6) {
      grid-column: auto;
    }

    .architecture-switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
    }

    .architecture-map {
      grid-template-columns: 1fr;
    }

    .architecture-group {
      display: block;
      padding-block: var(--space-5);
      border-bottom: var(--line) solid var(--color-line);
    }

    .architecture-group > h3,
    .architecture-group > .architecture-content {
      padding: 0;
      border: 0;
    }

    .architecture-content {
      margin-top: var(--space-3);
    }

    .auth-panel {
      padding: var(--space-5);
    }

    .auth-tabs {
      margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
    }

    .extension-runtime-flow li {
      grid-template-columns: var(--space-8) minmax(0, 1fr);
      gap: var(--space-3);
      padding: var(--space-5);
    }

    .extension-security-list > div {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }

    .extension-update-steps {
      grid-template-columns: 1fr;
    }

    .extension-update-steps li + li,
    .extension-update-steps li:nth-child(3) {
      border-top: var(--line) solid var(--color-line);
      border-left: 0;
    }

    .extension-manager-toolbar {
      align-items: stretch;
      flex-direction: column;
      padding: var(--space-5);
    }

    .extension-manager-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
    }

    .extension-manager-actions .button,
    .extension-error .button {
      width: 100%;
    }

    .extension-feedback {
      margin-inline: var(--space-5);
    }

    .extension-error {
      grid-template-columns: 1fr;
      margin: var(--space-5);
    }

    .extension-form-grid,
    .extension-permission-grid {
      grid-template-columns: 1fr;
    }

    .extension-dependencies-field {
      grid-column: auto;
    }

    .extension-dialog-actions {
      display: grid;
      grid-template-columns: 1fr;
      padding: var(--space-4) var(--space-5);
    }

    .extension-dialog-actions .button {
      width: 100%;
    }

    .console-toolbar,
    .panel-heading,
    .pairing-result {
      align-items: stretch;
      flex-direction: column;
    }

    .console-toolbar .button,
    .detail-heading .button,
    .pairing-result .button {
      width: 100%;
    }

    .server-create {
      grid-template-columns: 1fr;
    }

    .server-create .button {
      width: 100%;
    }

    .server-facts,
    .snapshot-metadata,
    .definition-grid {
      grid-template-columns: 1fr;
    }

    .footer-layout {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }

    .footer-meta {
      grid-column: auto;
    }

    .item-dialog {
      width: calc(100% - (var(--space-4) * 2));
      max-height: calc(100dvh - (var(--space-4) * 2));
    }

    .dialog-heading,
    .item-dialog-body {
      padding: var(--space-5);
    }
  }

  @media (max-width: 24rem) {
    .primary-nav[data-open="true"] {
      grid-template-columns: 1fr;
    }

    .primary-nav .nav-download {
      grid-column: auto;
    }

    .fact-grid,
    .catalog-stats {
      grid-template-columns: 1fr;
    }

    .fact-grid > div:nth-child(even),
    .catalog-stat:nth-child(even) {
      border-left: 0;
    }

    .fact-grid > div + div,
    .catalog-stat + .catalog-stat {
      border-top: var(--line) solid var(--color-line);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }
}