@font-face {
  font-family: "FO Oranienbaum";
  src: url("../fonts/field-office/oranienbaum-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "FO PT Sans";
  src: url("../fonts/field-office/pt-sans-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "FO PT Sans";
  src: url("../fonts/field-office/pt-sans-bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "FO PT Sans Narrow";
  src: url("../fonts/field-office/pt-sans-narrow-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "FO PT Sans Narrow";
  src: url("../fonts/field-office/pt-sans-narrow-bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "FO Ioskeley Mono";
  src: url("../fonts/field-office/ioskeley-mono-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "FO Ioskeley Mono";
  src: url("../fonts/field-office/ioskeley-mono-semibold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "FO Departure Mono";
  src: url("../fonts/field-office/departure-mono-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@layer reset, tokens, base, components, compositions, variants, utilities;

@layer tokens {
  :root {
    color-scheme: light;
    --fo-canvas: #d9d7d0;
    --fo-paper: #eeece6;
    --fo-paper-soft: #e5e3dd;
    --fo-paper-raised: #f8f6f0;
    --fo-ink: #263437;
    --fo-muted: #747b78;
    --fo-faint: #9ba09b;
    --fo-line: #b8bbb5;
    --fo-line-soft: #d2d2cc;
    --fo-line-strong: #8f9691;
    --fo-graphite: #344246;
    --fo-graphite-2: #263033;
    --fo-inverse: #f4f2eb;
    --fo-inverse-muted: #b8c0bc;
    --fo-violet: #7467ef;
    --fo-violet-soft: #e6e2ff;
    --fo-green: #27865a;
    --fo-green-soft: #d9eee1;
    --fo-coral: #d74d3e;
    --fo-coral-soft: #f6ddd8;
    --fo-amber: #a86e18;
    --fo-amber-soft: #f2e5ca;
    --fo-blue: #367b9b;
    --fo-blue-soft: #dcebf1;
    --fo-backdrop: rgb(21 27 27 / .68);
    --fo-image-ring: oklch(0 0 0 / .1);
    --fo-font-ui: "Berkeley Mono", "Iosevka", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-mono: "Berkeley Mono", "Iosevka", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-condensed: var(--fo-font-mono);
    --fo-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --fo-space-1: 4px;
    --fo-space-2: 8px;
    --fo-space-3: 12px;
    --fo-space-4: 16px;
    --fo-space-5: 24px;
    --fo-space-6: 32px;
    --fo-space-7: 48px;
    --fo-space-8: 64px;
    --fo-radius-control: 4px;
    --fo-radius-surface: 8px;
    --fo-radius-frame: 12px;
    --fo-shadow-control:
      0 0 0 1px oklch(0 0 0 / .08),
      0 1px 2px -1px oklch(0 0 0 / .1),
      0 2px 4px oklch(0 0 0 / .05);
    --fo-shadow-control-hover:
      0 0 0 1px oklch(0 0 0 / .13),
      0 1px 2px -1px oklch(0 0 0 / .12),
      0 3px 7px oklch(0 0 0 / .08);
    --fo-shadow-float:
      0 0 0 1px oklch(0 0 0 / .15),
      0 18px 60px -16px oklch(0 0 0 / .35),
      0 4px 12px oklch(0 0 0 / .12);
    --fo-fast: 120ms;
    --fo-ui: 180ms;
    --fo-slow: 260ms;
    --fo-ease-out: cubic-bezier(.23, 1, .32, 1);
    --fo-ease-move: cubic-bezier(.77, 0, .175, 1);
  }

  :root[data-theme="dark"],
  :root.theme-dark {
    color-scheme: dark;
    --fo-canvas: #171916;
    --fo-paper: #22241f;
    --fo-paper-soft: #1d201b;
    --fo-paper-raised: #2a2d27;
    --fo-ink: #ecede5;
    --fo-muted: #a6aca4;
    --fo-faint: #777e77;
    --fo-line: #454a43;
    --fo-line-soft: #353a34;
    --fo-line-strong: #697169;
    --fo-graphite: #10120f;
    --fo-graphite-2: #090a08;
    --fo-inverse: #f0eee6;
    --fo-inverse-muted: #a8afa8;
    --fo-violet: #978eff;
    --fo-violet-soft: #393451;
    --fo-green: #61c990;
    --fo-green-soft: #20382a;
    --fo-coral: #ff7665;
    --fo-coral-soft: #492b28;
    --fo-amber: #e0aa4f;
    --fo-amber-soft: #43351f;
    --fo-blue: #65abc9;
    --fo-blue-soft: #243b44;
    --fo-backdrop: rgb(0 0 0 / .74);
    --fo-image-ring: oklch(1 0 0 / .1);
    --fo-shadow-control: 0 0 0 1px oklch(1 0 0 / .09), 0 2px 5px rgb(0 0 0 / .22);
    --fo-shadow-control-hover: 0 0 0 1px oklch(1 0 0 / .16), 0 4px 9px rgb(0 0 0 / .28);
    --fo-shadow-float: 0 0 0 1px oklch(1 0 0 / .12), 0 22px 70px -12px rgb(0 0 0 / .72);
  }

  :root[data-style="dense"] {
    --fo-font-ui: Inter, "SF Pro Text", "Segoe UI", sans-serif;
    --fo-font-mono: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-condensed: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-serif: Inter, "SF Pro Display", "Segoe UI", sans-serif;
    --fo-radius-control: 4px;
    --fo-radius-surface: 6px;
    --fo-radius-frame: 8px;
  }

  :root[data-style="oranienbaum"] {
    --fo-font-ui: "FO PT Sans", "PT Sans", sans-serif;
    --fo-font-mono: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-condensed: "FO PT Sans Narrow", "Arial Narrow", sans-serif;
    --fo-font-serif: "FO Oranienbaum", Georgia, serif;
  }

  :root[data-style="oranienbaum-mono"],
  :root.fo-style-oranienbaum-mono {
    --fo-font-ui: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-mono: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-condensed: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
    --fo-font-serif: "FO Oranienbaum", Georgia, serif;
  }

  :root[data-style="departure"] {
    --fo-font-ui: "FO Departure Mono", monospace;
    --fo-font-mono: "FO Departure Mono", monospace;
    --fo-font-condensed: "FO Departure Mono", monospace;
    --fo-font-serif: "FO Departure Mono", monospace;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; scroll-behavior: smooth; }
  body { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  img { display: block; max-width: 100%; }
  h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  button { color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    background: var(--fo-canvas);
    color: var(--fo-ink);
    font-family: var(--fo-font-ui);
    font-size: 14px;
  }

  body {
    min-height: 100dvh;
    background:
      linear-gradient(90deg, transparent 49.9%, color-mix(in srgb, var(--fo-line) 30%, transparent) 50%, transparent 50.1%),
      var(--fo-canvas);
    background-size: 80px 100%;
  }

  a { color: inherit; text-underline-offset: 3px; }
  button, summary, [role="tab"] { cursor: pointer; }

  :focus-visible {
    outline: 2px solid var(--fo-violet);
    outline-offset: 2px;
  }

  ::selection { background: var(--fo-violet); color: white; }

  .fo-skip-link {
    position: fixed;
    z-index: 1000;
    inset: 8px auto auto 8px;
    translate: 0 -150%;
    border-radius: var(--fo-radius-control);
    background: var(--fo-graphite);
    color: var(--fo-inverse);
    padding: 10px 14px;
    transition: translate var(--fo-fast) var(--fo-ease-out);
  }

  .fo-skip-link:focus { translate: 0; }

  fo-icon {
    width: 1.2em;
    height: 1.2em;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
  }

  fo-icon > * {
    width: 100%;
    height: 100%;
    display: block;
  }

  .fo-serif { font-family: var(--fo-font-serif); }
  .fo-muted { color: var(--fo-muted); }
  .fo-tabular { font-family: var(--fo-font-mono); font-variant-numeric: tabular-nums; }
  code, kbd { font-family: var(--fo-font-mono); }
  .fo-label__meta,
  .fo-nav-count,
  .fo-nav-heading,
  .fo-section-label,
  .catalog-kicker,
  .type-specimen__meta,
  .fo-bento-card__meta,
  .fo-bento-tile__label,
  .fo-float-window__bar { font-family: var(--fo-font-condensed); }
}

@layer components {
  .fo-btn,
  .fo-icon-btn {
    appearance: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-raised);
    box-shadow: var(--fo-shadow-control);
    color: var(--fo-ink);
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    transition-property: transform, background-color, color, box-shadow, opacity;
    transition-duration: var(--fo-fast);
    transition-timing-function: var(--fo-ease-out);
  }

  .fo-btn { padding: 0 14px; }
  .fo-btn fo-icon:last-child { margin-inline-end: -2px; }
  .fo-btn fo-icon:first-child { margin-inline-start: -2px; }
  .fo-btn--xs { min-height: 26px; gap: 5px; padding-inline: 8px; font-size: 10px; font-weight: 600; }
  .fo-btn--sm { min-height: 32px; padding-inline: 10px; font-size: 12px; }
  .fo-btn--lg { min-height: 44px; padding-inline: 18px; }

  .fo-icon-btn {
    width: 38px;
    padding: 0;
  }

  .fo-icon-btn--sm { width: 32px; min-height: 32px; }
  .fo-icon-btn--xs { width: 26px; min-height: 26px; }

  .fo-btn--primary {
    background: var(--fo-graphite);
    box-shadow: 0 0 0 1px var(--fo-graphite), 0 2px 5px rgb(0 0 0 / .18);
    color: var(--fo-inverse);
  }

  .fo-btn--accent {
    background: var(--fo-violet);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fo-violet) 82%, black), 0 2px 5px color-mix(in srgb, var(--fo-violet) 28%, transparent);
    color: white;
  }

  .fo-btn--danger { color: var(--fo-coral); }
  .fo-btn--quiet, .fo-icon-btn--quiet { background: transparent; box-shadow: none; }
  .fo-btn:disabled, .fo-icon-btn:disabled { cursor: not-allowed; opacity: .45; }

  @media (hover: hover) and (pointer: fine) {
    .fo-btn:not(:disabled):hover,
    .fo-icon-btn:not(:disabled):hover { box-shadow: var(--fo-shadow-control-hover); }
    .fo-btn--primary:not(:disabled):hover { background: color-mix(in srgb, var(--fo-graphite) 85%, var(--fo-inverse)); }
    .fo-btn--accent:not(:disabled):hover { background: color-mix(in srgb, var(--fo-violet) 86%, white); }
    .fo-btn--quiet:not(:disabled):hover,
    .fo-icon-btn--quiet:not(:disabled):hover { background: color-mix(in srgb, var(--fo-ink) 7%, transparent); box-shadow: none; }
  }

  .fo-btn:not(:disabled):active,
  .fo-icon-btn:not(:disabled):active { transform: scale(.96); }

  .fo-kbd {
    min-width: 21px;
    min-height: 21px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--fo-line-strong);
    border-radius: 3px;
    background: color-mix(in srgb, var(--fo-paper-raised) 82%, var(--fo-canvas));
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fo-line-strong) 50%, transparent);
    padding: 1px 5px;
    color: var(--fo-muted);
    font-size: 10px;
    line-height: 1;
  }

  .fo-badge,
  .fo-chip {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-raised);
    padding: 3px 7px;
    color: var(--fo-ink);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .fo-badge::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--badge-color, var(--fo-muted));
    content: "";
  }

  .fo-badge--success { --badge-color: var(--fo-green); border-color: color-mix(in srgb, var(--fo-green) 45%, var(--fo-line)); background: var(--fo-green-soft); }
  .fo-badge--warning { --badge-color: var(--fo-amber); border-color: color-mix(in srgb, var(--fo-amber) 45%, var(--fo-line)); background: var(--fo-amber-soft); }
  .fo-badge--danger { --badge-color: var(--fo-coral); border-color: color-mix(in srgb, var(--fo-coral) 45%, var(--fo-line)); background: var(--fo-coral-soft); }
  .fo-badge--accent { --badge-color: var(--fo-violet); border-color: color-mix(in srgb, var(--fo-violet) 45%, var(--fo-line)); background: var(--fo-violet-soft); }
  .fo-badge--info { --badge-color: var(--fo-blue); border-color: color-mix(in srgb, var(--fo-blue) 45%, var(--fo-line)); background: var(--fo-blue-soft); }

  .fo-chip button {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 2px;
    background: transparent;
    padding: 0;
    color: var(--fo-muted);
  }

  .fo-avatar {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--fo-graphite);
    box-shadow: 0 0 0 1px var(--fo-line), inset 0 0 0 2px color-mix(in srgb, var(--fo-inverse) 14%, transparent);
    color: var(--fo-inverse);
    font-size: 12px;
    font-weight: 700;
  }

  .fo-avatar--violet { background: var(--fo-violet); color: white; }
  .fo-avatar--green { background: var(--fo-green); color: white; }

  .fo-field {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(ellipse 85% 50% at 70% 115%, color-mix(in srgb, var(--fo-green) 45%, var(--fo-graphite)) 0 38%, transparent 38.3%),
      radial-gradient(ellipse 70% 50% at 12% 107%, color-mix(in srgb, var(--fo-violet) 35%, var(--fo-graphite)) 0 35%, transparent 35.3%),
      linear-gradient(160deg, var(--fo-graphite), var(--fo-graphite-2));
  }

  .fo-field::before,
  .fo-field::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
  }

  .fo-field::before {
    background-image: radial-gradient(circle, rgb(255 255 255 / .33) 0 1px, transparent 1.2px);
    background-size: 5px 5px;
    mask-image: linear-gradient(to bottom, transparent 4%, black 72%);
    opacity: .58;
  }

  .fo-field::after {
    background:
      linear-gradient(110deg, transparent 0 56%, rgb(255 255 255 / .09) 56.2% 56.7%, transparent 57%),
      linear-gradient(70deg, transparent 0 30%, rgb(255 255 255 / .07) 30.2% 30.6%, transparent 31%);
  }

  .fo-surface,
  .fo-card {
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper);
    box-shadow: var(--fo-shadow-control);
  }

  .fo-card {
    padding: 16px;
    transition-property: box-shadow, transform, background-color;
    transition-duration: var(--fo-fast);
    transition-timing-function: var(--fo-ease-out);
  }

  .fo-card--selected {
    background: color-mix(in srgb, var(--fo-violet-soft) 56%, var(--fo-paper));
    box-shadow: 0 0 0 2px var(--fo-violet), 0 5px 15px rgb(0 0 0 / .08);
  }

  .fo-field-group {
    display: grid;
    gap: 7px;
  }

  .fo-label-row {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .fo-label {
    color: var(--fo-ink);
    font-size: 12px;
    font-weight: 650;
  }

  .fo-label__meta,
  .fo-help,
  .fo-error { color: var(--fo-muted); font-size: 11px; line-height: 1.45; }
  .fo-error { color: var(--fo-coral); }

  .fo-input,
  .fo-select,
  .fo-textarea,
  .fo-search {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-raised);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .04);
    color: var(--fo-ink);
    transition-property: border-color, box-shadow, background-color;
    transition-duration: var(--fo-fast);
    transition-timing-function: ease;
  }

  .fo-input,
  .fo-select,
  .fo-textarea { padding: 9px 11px; }
  .fo-select { appearance: none; padding-inline-end: 40px; }

  .fo-select-wrap {
    position: relative;
    display: grid;
  }

  .fo-select-wrap > fo-icon {
    position: absolute;
    inset: 50% 12px auto auto;
    color: var(--fo-muted);
    pointer-events: none;
    translate: 0 -50%;
    transition-property: color;
    transition-duration: var(--fo-fast);
  }

  .fo-select-wrap:hover > fo-icon { color: var(--fo-ink); }
  .fo-select-wrap:focus-within > fo-icon { color: var(--fo-violet); }
  .fo-select-wrap:has(.fo-select:disabled) > fo-icon { opacity: .55; }
  .fo-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
  .fo-input::placeholder, .fo-textarea::placeholder { color: var(--fo-faint); opacity: 1; }

  .fo-input:focus,
  .fo-select:focus,
  .fo-textarea:focus,
  .fo-search:focus-within {
    outline: 0;
    border-color: var(--fo-violet);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fo-violet) 28%, transparent);
  }

  .fo-input[aria-invalid="true"],
  .fo-textarea[aria-invalid="true"] { border-color: var(--fo-coral); }

  .fo-input:disabled,
  .fo-select:disabled,
  .fo-textarea:disabled { cursor: not-allowed; opacity: .55; }

  .fo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 11px;
  }

  .fo-search > fo-icon { color: var(--fo-muted); }
  .fo-search input {
    min-width: 0;
    min-height: 38px;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fo-ink);
  }

  .fo-search input::placeholder { color: var(--fo-faint); }

  .fo-choice {
    position: relative;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
  }

  .fo-choice input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fo-violet);
  }

  .fo-choice small { display: block; margin-top: 2px; color: var(--fo-muted); }

  .fo-switch {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
  }

  .fo-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
  }

  .fo-switch__track {
    width: 44px;
    height: 24px;
    position: relative;
    flex: 0 0 auto;
    border: 1px solid var(--fo-line-strong);
    border-radius: 999px;
    background: var(--fo-paper-soft);
    transition-property: background-color, border-color;
    transition-duration: var(--fo-fast);
  }

  .fo-switch__track::after {
    width: 18px;
    height: 18px;
    position: absolute;
    inset: 2px auto auto 2px;
    border-radius: 50%;
    background: var(--fo-paper-raised);
    box-shadow: 0 1px 3px rgb(0 0 0 / .25);
    content: "";
    transition: translate var(--fo-ui) var(--fo-ease-out);
  }

  .fo-switch input:checked + .fo-switch__track { border-color: var(--fo-violet); background: var(--fo-violet); }
  .fo-switch input:checked + .fo-switch__track::after { translate: 20px 0; }
  .fo-switch input:focus-visible + .fo-switch__track { outline: 2px solid var(--fo-violet); outline-offset: 2px; }

  fo-tag-input {
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-raised);
    padding: 6px;
    transition-property: border-color, box-shadow;
    transition-duration: var(--fo-fast);
  }

  fo-tag-input:focus-within {
    border-color: var(--fo-violet);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fo-violet) 28%, transparent);
  }

  fo-tag-input input {
    min-width: 9ch;
    min-height: 28px;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fo-ink);
  }

  .fo-segmented {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-soft);
  }

  .fo-segmented button,
  .fo-segmented [role="tab"] {
    min-height: 36px;
    border: 0;
    border-inline-start: 1px solid var(--fo-line);
    background: transparent;
    padding: 0 12px;
    color: var(--fo-muted);
  }

  .fo-segmented > :first-child { border-inline-start: 0; }
  .fo-segmented [aria-selected="true"],
  .fo-segmented button.is-active {
    background: var(--fo-violet-soft);
    color: var(--fo-ink);
    font-weight: 700;
  }

  .fo-tabs { display: grid; gap: 14px; }
  .fo-tabs__list {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--fo-line);
  }

  .fo-tabs__list [role="tab"] {
    min-height: 40px;
    flex: 0 0 auto;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 0 12px;
    color: var(--fo-muted);
  }

  .fo-tabs__list [role="tab"][aria-selected="true"] { border-bottom-color: var(--fo-violet); color: var(--fo-ink); }
  .fo-tabs [role="tabpanel"][hidden] { display: none; }

  .fo-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--fo-paper-soft);
  }

  .fo-progress::-webkit-progress-bar { background: var(--fo-paper-soft); }
  .fo-progress::-webkit-progress-value { border-radius: inherit; background: var(--fo-violet); }
  .fo-progress::-moz-progress-bar { border-radius: inherit; background: var(--fo-violet); }

  .fo-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fo-paper-soft);
  }

  .fo-meter::before {
    width: var(--value, 50%);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--meter-color, var(--fo-green));
    content: "";
  }

  .fo-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--callout-color, var(--fo-blue)) 42%, var(--fo-line));
    border-radius: var(--fo-radius-control);
    background: color-mix(in srgb, var(--callout-color, var(--fo-blue)) 10%, var(--fo-paper));
    padding: 12px;
  }

  .fo-callout > fo-icon { margin-top: 2px; color: var(--callout-color, var(--fo-blue)); }
  .fo-callout p { margin-top: 4px; color: var(--fo-muted); font-size: 12px; line-height: 1.5; }
  .fo-callout--warning { --callout-color: var(--fo-amber); }
  .fo-callout--danger { --callout-color: var(--fo-coral); }
  .fo-callout--success { --callout-color: var(--fo-green); }

  .fo-skeleton {
    display: block;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--fo-paper-soft), var(--fo-paper-raised), var(--fo-paper-soft));
    background-size: 220% 100%;
    animation: fo-shimmer 1.4s linear infinite;
  }

  @keyframes fo-shimmer { to { background-position: -220% 0; } }

  .fo-spinner {
    width: 18px;
    height: 18px;
    display: inline-block;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: fo-spin .65s linear infinite;
  }

  @keyframes fo-spin { to { rotate: 1turn; } }
}

@layer components {
  .fo-divider { height: 1px; border: 0; background: var(--fo-line); }

  .fo-list {
    overflow: hidden;
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper);
  }

  .fo-list-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--fo-line-soft);
    padding: 9px 11px;
  }

  .fo-list-row:first-child { border-top: 0; }
  .fo-list-row__main { min-width: 0; flex: 1; }
  .fo-list-row__main > * { display: block; }
  .fo-list-row__main small { margin-top: 3px; overflow: hidden; color: var(--fo-muted); text-overflow: ellipsis; white-space: nowrap; }
  .fo-list-row__actions { display: flex; align-items: center; gap: 6px; }

  .fo-link-row {
    position: relative;
    min-height: 62px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--fo-line-soft);
    padding: 9px 11px;
    background: var(--fo-paper);
    transition-property: background-color, box-shadow;
    transition-duration: var(--fo-fast);
  }

  .fo-link-row:last-child { border-bottom: 0; }
  .fo-link-row.is-selected { background: var(--fo-violet-soft); color: var(--fo-ink); }
  .fo-link-row__mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-raised);
    color: var(--fo-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .fo-link-row__copy { min-width: 0; }
  .fo-link-row__title { display: block; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .fo-link-row__meta { min-width: 0; display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--fo-muted); font-size: 11px; }
  .fo-link-row__host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fo-link-row__meta a { position: relative; z-index: 1; }
  .fo-link-row__date { margin-inline-start: auto; white-space: nowrap; }
  .fo-link-row__status { display: flex; align-items: center; gap: 4px; }
  .fo-link-row__status fo-icon { width: 14px; height: 14px; }
  .fo-link-row__status .is-success { color: var(--fo-green); }
  .fo-link-row__status .is-warning { color: var(--fo-amber); }
  .fo-link-row__status .is-danger { color: var(--fo-coral); }

  @media (hover: hover) and (pointer: fine) {
    .fo-link-row:hover { background: color-mix(in srgb, var(--fo-violet-soft) 26%, var(--fo-paper)); }
  }

  .fo-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-surface);
  }

  .fo-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    background: var(--fo-paper);
    font-variant-numeric: tabular-nums;
  }

  .fo-table th,
  .fo-table td {
    border-bottom: 1px solid var(--fo-line-soft);
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
  }

  .fo-table th { color: var(--fo-muted); font-size: 11px; font-weight: 600; }
  .fo-table tbody tr:last-child td { border-bottom: 0; }
  .fo-table td:last-child, .fo-table th:last-child { text-align: right; }

  .fo-stat {
    display: grid;
    gap: 6px;
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper);
    padding: 13px;
  }

  .fo-stat__label { color: var(--fo-muted); font-size: 11px; }
  .fo-stat__value { font-family: var(--fo-font-serif); font-size: clamp(24px, 3vw, 38px); line-height: 1; font-variant-numeric: tabular-nums; }
  .fo-stat__delta { color: var(--fo-green); font-size: 11px; }
  .fo-stat__delta.is-negative { color: var(--fo-coral); }

  .fo-empty {
    min-height: 190px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--fo-line-strong);
    border-radius: var(--fo-radius-surface);
    padding: 28px;
    text-align: center;
  }

  .fo-empty__mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--fo-paper-soft);
    color: var(--fo-muted);
  }

  .fo-empty h4 { margin-bottom: 6px; font-family: var(--fo-font-serif); font-size: 20px; }
  .fo-empty p { max-width: 42ch; margin: 0 auto 14px; color: var(--fo-muted); font-size: 12px; line-height: 1.5; }

  .fo-stepper { display: flex; align-items: center; }
  .fo-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fo-muted);
    white-space: nowrap;
  }

  .fo-step:not(:last-child)::after { width: clamp(20px, 6vw, 70px); height: 1px; margin-inline: 8px; background: var(--fo-line-strong); content: ""; }
  .fo-step__number { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--fo-line-strong); border-radius: var(--fo-radius-control); }
  .fo-step.is-complete { color: var(--fo-ink); }
  .fo-step.is-complete .fo-step__number { border-color: var(--fo-graphite); background: var(--fo-graphite); color: var(--fo-inverse); }
  .fo-step.is-current { color: var(--fo-ink); }
  .fo-step.is-current .fo-step__number { border: 2px solid var(--fo-violet); color: var(--fo-violet); }

  .fo-nav-list { display: grid; gap: 3px; }
  .fo-nav-heading { margin: 15px 9px 5px; color: var(--fo-faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
  .fo-nav-item {
    min-height: 38px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: var(--fo-radius-control);
    background: transparent;
    padding: 7px 9px;
    color: var(--fo-inverse-muted);
    text-align: left;
    text-decoration: none;
  }

  .fo-nav-item > span:not(.fo-nav-count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fo-nav-count { margin-inline-start: auto; color: var(--fo-inverse-muted); font-size: 10px; }
  .fo-nav-item.is-active { background: rgb(255 255 255 / .14); color: var(--fo-inverse); font-weight: 700; }
  .fo-nav-item.is-active .fo-nav-count { color: var(--fo-inverse); }

  .fo-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--fo-muted); font-size: 11px; }
  .fo-breadcrumbs a { text-decoration: none; }
  .fo-breadcrumbs > :not(:last-child)::after { margin-inline-start: 7px; color: var(--fo-faint); content: "/"; }
  .fo-breadcrumbs [aria-current="page"] { color: var(--fo-ink); }

  .fo-pagination { display: flex; align-items: center; gap: 4px; }
  .fo-pagination a, .fo-pagination span {
    min-width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--fo-radius-control);
    text-decoration: none;
  }
  .fo-pagination [aria-current="page"] { background: var(--fo-graphite); color: var(--fo-inverse); }

  .fo-tooltip {
    position: relative;
    display: inline-flex;
  }

  .fo-tooltip__content {
    width: max-content;
    max-width: 240px;
    position: absolute;
    z-index: 30;
    inset: auto auto calc(100% + 8px) 50%;
    translate: -50% 4px;
    visibility: hidden;
    border-radius: var(--fo-radius-control);
    background: var(--fo-graphite);
    box-shadow: var(--fo-shadow-control);
    padding: 6px 8px;
    color: var(--fo-inverse);
    font-size: 11px;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity, translate, visibility;
    transition-duration: var(--fo-fast);
    transition-timing-function: var(--fo-ease-out);
  }

  .fo-tooltip:hover .fo-tooltip__content,
  .fo-tooltip:focus-within .fo-tooltip__content { translate: -50% 0; visibility: visible; opacity: 1; }

  [popover].fo-popover {
    width: min(300px, calc(100vw - 24px));
    position: fixed;
    margin: 0;
    inset: 0 auto auto 0;
    border: 0;
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper-raised);
    box-shadow: var(--fo-shadow-float);
    padding: 8px;
    color: var(--fo-ink);
    opacity: 0;
    transform: translateY(4px) scale(.97);
    transform-origin: top right;
    transition-property: opacity, transform, display, overlay;
    transition-duration: var(--fo-ui);
    transition-timing-function: var(--fo-ease-out);
    transition-behavior: allow-discrete;
  }

  [popover].fo-popover:popover-open { opacity: 1; transform: translateY(0) scale(1); }
  @starting-style { [popover].fo-popover:popover-open { opacity: 0; transform: translateY(4px) scale(.97); } }
  .fo-popover__head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--fo-line-soft); padding: 7px 7px 10px; }
  .fo-popover__menu { display: grid; gap: 2px; margin-top: 6px; }
  .fo-popover__menu button, .fo-popover__menu a { min-height: 36px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: var(--fo-radius-control); background: transparent; padding: 0 9px; color: var(--fo-ink); text-align: left; text-decoration: none; }

  fo-style-switcher { display: inline-flex; }
  .fo-style-trigger { min-width: 106px; justify-content: flex-start; }
  .fo-style-trigger [data-style-current] { overflow: hidden; flex: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .fo-style-trigger fo-icon:last-child { margin-inline: 0 -3px; }

  [popover].fo-style-menu { width: min(360px, calc(100vw - 24px)); padding: 7px; }
  .fo-style-menu__head { display: grid; gap: 3px; border-bottom: 1px solid var(--fo-line-soft); padding: 7px 8px 10px; }
  .fo-style-menu__head small { color: var(--fo-muted); font-size: 10px; line-height: 1.4; }
  .fo-style-options { display: grid; gap: 3px; margin-top: 6px; }
  .fo-style-option { min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border-radius: var(--fo-radius-control); padding: 7px 8px; cursor: pointer; }
  .fo-style-option:has(input:checked) { background: var(--fo-violet-soft); color: var(--fo-ink); }
  .fo-style-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--fo-violet); }
  .fo-style-option__copy { min-width: 0; display: grid; gap: 3px; }
  .fo-style-option__copy strong { font-size: 11px; }
  .fo-style-option__copy small { color: var(--fo-muted); font-size: 9px; line-height: 1.35; }
  .fo-style-option__sample { color: var(--fo-muted); font-size: 16px; }
  .fo-style-option[data-value="dense"] .fo-style-option__sample { font-family: Inter, "SF Pro Text", sans-serif; }
  .fo-style-option[data-value="oranienbaum"] .fo-style-option__sample { font-family: "FO Oranienbaum", Georgia, serif; font-size: 21px; }
  .fo-style-option[data-value="oranienbaum-mono"] .fo-style-option__sample { font-family: "FO Oranienbaum", Georgia, serif; font-size: 21px; }
  .fo-style-option[data-value="departure"] .fo-style-option__sample { font-family: "FO Departure Mono", monospace; font-size: 11px; }

  dialog.fo-dialog,
  dialog.fo-command-dialog {
    width: min(520px, calc(100vw - 24px));
    max-height: min(760px, calc(100dvh - 24px));
    border: 0;
    border-radius: var(--fo-radius-frame);
    background: var(--fo-paper);
    box-shadow: var(--fo-shadow-float);
    padding: 0;
    color: var(--fo-ink);
    opacity: 0;
    transform: translateY(8px) scale(.97);
    transition-property: opacity, transform, display, overlay;
    transition-duration: var(--fo-slow);
    transition-timing-function: var(--fo-ease-out);
    transition-behavior: allow-discrete;
  }

  dialog.fo-dialog[open], dialog.fo-command-dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
  @starting-style { dialog.fo-dialog[open], dialog.fo-command-dialog[open] { opacity: 0; transform: translateY(8px) scale(.97); } }
  dialog::backdrop { background: var(--fo-backdrop); opacity: 0; transition: opacity var(--fo-slow) var(--fo-ease-out); }
  dialog[open]::backdrop { opacity: 1; }
  @starting-style { dialog[open]::backdrop { opacity: 0; } }

  .fo-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--fo-line); padding: 16px; }
  .fo-dialog__header h3 { font-family: var(--fo-font-serif); font-size: 22px; font-weight: 600; }
  .fo-dialog__header p { margin-top: 5px; color: var(--fo-muted); font-size: 12px; }
  .fo-dialog__body { display: grid; gap: 15px; overflow: auto; padding: 16px; }
  .fo-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--fo-line); padding: 12px 16px; }

  dialog.fo-command-dialog { width: min(620px, calc(100vw - 24px)); }
  dialog.fo-command-dialog,
  dialog.fo-command-dialog[open] {
    transform: none;
    transition-duration: 0ms;
  }
  .fo-command-search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--fo-line); padding: 10px 12px; }
  .fo-command-search input { min-width: 0; min-height: 38px; flex: 1; border: 0; outline: 0; background: transparent; color: var(--fo-ink); }
  .fo-command-results { max-height: min(440px, 58dvh); overflow-y: auto; padding: 7px; }
  .fo-command-group-label { padding: 8px 8px 5px; color: var(--fo-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
  .fo-command-item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: var(--fo-radius-control); background: transparent; padding: 7px 8px; color: var(--fo-ink); text-align: left; }
  .fo-command-item > fo-icon { width: 30px; height: 30px; border: 1px solid var(--fo-line); border-radius: var(--fo-radius-control); padding: 6px; background: var(--fo-paper-raised); }
  .fo-command-item > span { min-width: 0; display: grid; gap: 2px; flex: 1; }
  .fo-command-item small { color: var(--fo-muted); }
  .fo-command-item.is-active { background: var(--fo-violet-soft); }
  .fo-command-empty { padding: 34px 16px; color: var(--fo-muted); text-align: center; }
  .fo-command-footer { display: flex; gap: 12px; border-top: 1px solid var(--fo-line); padding: 8px 12px; color: var(--fo-muted); font-size: 10px; }

  fo-toast-stack {
    width: min(380px, calc(100vw - 24px));
    position: fixed;
    z-index: 100;
    inset: auto 12px 12px auto;
    display: grid;
    gap: 8px;
    pointer-events: none;
  }

  .fo-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper-raised);
    box-shadow: var(--fo-shadow-float);
    padding: 12px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-property: opacity, transform;
    transition-duration: var(--fo-ui);
    transition-timing-function: var(--fo-ease-out);
    @starting-style { opacity: 0; transform: translateY(8px); }
  }

  .fo-toast[data-closing] { opacity: 0; transform: translateY(4px); }
  .fo-toast > fo-icon { margin-top: 1px; color: var(--toast-color, var(--fo-blue)); }
  .fo-toast--success { --toast-color: var(--fo-green); }
  .fo-toast--danger { --toast-color: var(--fo-coral); }
  .fo-toast__copy { display: grid; gap: 3px; }
  .fo-toast__copy p { color: var(--fo-muted); font-size: 11px; line-height: 1.45; }
  .fo-toast__close { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: var(--fo-radius-control); background: transparent; color: var(--fo-muted); }

  .fo-details { border-top: 1px solid var(--fo-line); }
  .fo-details summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; font-weight: 650; }
  .fo-details summary::-webkit-details-marker { display: none; }
  .fo-details summary::after { color: var(--fo-muted); content: "+"; }
  .fo-details[open] summary::after { content: "−"; }
  .fo-details__body { padding: 0 0 14px; color: var(--fo-muted); font-size: 12px; line-height: 1.55; }
}

@layer compositions {
  .fo-app-frame {
    min-height: 620px;
    display: grid;
    grid-template-columns: 56px 230px minmax(300px, 1fr) minmax(300px, 390px);
    overflow: hidden;
    border-radius: var(--fo-radius-frame);
    background: var(--fo-paper);
    box-shadow: var(--fo-shadow-float);
  }

  .fo-app-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: var(--fo-graphite-2);
    padding: 10px 7px;
    color: var(--fo-inverse-muted);
  }

  .fo-app-logo {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: var(--fo-radius-control);
    color: var(--fo-inverse);
    font-family: var(--fo-font-serif);
    font-size: 18px;
  }

  .fo-rail-action {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--fo-radius-control);
    background: transparent;
    color: inherit;
  }
  .fo-rail-action.is-active { background: rgb(255 255 255 / .11); color: var(--fo-inverse); }
  .fo-app-rail .fo-avatar { width: 34px; height: 34px; margin-top: auto; }

  .fo-app-nav { min-width: 0; overflow: auto; border-right: 1px solid rgb(255 255 255 / .09); background: var(--fo-graphite); padding: 14px 10px; color: var(--fo-inverse); }
  .fo-app-nav__title { padding: 8px 9px 10px; font-family: var(--fo-font-serif); font-size: 20px; font-weight: 500; }
  .fo-app-main { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .fo-app-toolbar { min-height: 58px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--fo-line); padding: 9px 11px; }
  .fo-app-toolbar .fo-search { min-width: 140px; flex: 1; }
  .fo-app-content { min-height: 0; overflow: auto; }
  .fo-app-inspector { min-width: 0; overflow: auto; border-left: 1px solid var(--fo-line); background: var(--fo-paper-soft); }
  .fo-inspector-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fo-line); background: color-mix(in srgb, var(--fo-paper-soft) 94%, transparent); padding: 14px; backdrop-filter: blur(10px); }
  .fo-inspector-head h3 { margin-top: 5px; font-family: var(--fo-font-serif); font-size: 20px; line-height: 1.15; }
  .fo-inspector-body { display: grid; gap: 16px; padding: 14px; }
  .fo-inspector-section { display: grid; gap: 10px; border-top: 1px solid var(--fo-line); padding-top: 14px; }
  .fo-section-label { color: var(--fo-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
  .fo-facts { overflow: hidden; border: 1px solid var(--fo-line); border-radius: var(--fo-radius-control); background: var(--fo-paper); }
  .fo-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; border-top: 1px solid var(--fo-line-soft); padding: 9px 10px; }
  .fo-facts > div:first-child { border-top: 0; }
  .fo-facts dt { color: var(--fo-muted); }
  .fo-facts dd { min-width: 0; overflow-wrap: anywhere; }

  .fo-settings-row { min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; border-bottom: 1px solid var(--fo-line-soft); padding: 12px 0; }
  .fo-settings-row:last-child { border-bottom: 0; }
  .fo-settings-row p { margin-top: 4px; color: var(--fo-muted); font-size: 11px; line-height: 1.45; }

  .fo-danger-zone { display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--fo-coral) 48%, var(--fo-line)); border-radius: var(--fo-radius-surface); background: var(--fo-coral-soft); padding: 13px; }
  .fo-danger-zone p { color: var(--fo-muted); font-size: 11px; line-height: 1.45; }

  .fo-control-board-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--fo-radius-frame);
    padding: 2px 2px 14px;
  }

  .fo-control-window {
    min-width: 820px;
    overflow: hidden;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-frame);
    background: var(--fo-paper-soft);
    box-shadow: var(--fo-shadow-float);
  }

  .fo-window-bar {
    min-height: 32px;
    position: relative;
    display: grid;
    place-items: center;
    background: #252624;
    color: #a8aba6;
    font-size: 11px;
    font-weight: 700;
  }

  .fo-window-lights {
    position: absolute;
    inset: 0 auto 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .fo-window-lights span {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 50%;
    background: var(--light);
  }

  .fo-control-brand {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--fo-line-strong);
    background: var(--fo-paper-raised);
    padding: 10px 18px;
  }

  .fo-control-brand__mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fo-green-soft);
    color: var(--fo-green);
    font-size: 22px;
  }

  .fo-control-brand strong {
    font-family: var(--fo-font-serif);
    font-size: 22px;
  }

  .fo-control-group { border-bottom: 1px solid var(--fo-line-strong); }
  .fo-control-group__header {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid var(--fo-line);
    padding: 7px 11px;
  }

  .fo-control-group__header > fo-icon { width: 20px; height: 20px; }
  .fo-control-group__header h3 { font-family: var(--fo-font-serif); font-size: 21px; }
  .fo-control-group__header .fo-btn { margin-inline-start: auto; }

  .fo-control-group__body {
    min-height: 106px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .fo-server-figure {
    width: 50px;
    height: 76px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--fo-line-strong);
    border-radius: 3px;
    background:
      repeating-linear-gradient(to bottom, transparent 0 7px, color-mix(in srgb, var(--fo-line-strong) 45%, transparent) 7px 8px),
      var(--fo-graphite);
    color: var(--fo-inverse);
  }

  .fo-server-figure fo-icon { width: 28px; height: 28px; }

  .fo-server-card {
    min-width: 210px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-raised);
    padding: 10px;
  }

  .fo-server-card__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--fo-radius-control);
    background: var(--fo-violet-soft);
    color: var(--fo-violet);
  }

  .fo-server-card__copy { min-width: 0; display: grid; gap: 3px; }
  .fo-server-card__copy strong { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
  .fo-server-card__copy small { color: var(--fo-muted); font-size: 11px; }
  .fo-server-card__signal { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--fo-radius-control); background: var(--fo-green-soft); color: var(--fo-green); }

  .fo-site-board {
    min-height: 250px;
    display: grid;
    grid-template-columns: 218px 270px minmax(170px, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
  }

  .fo-site-card,
  .fo-publish-card {
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-control);
    background: var(--fo-paper-raised);
    padding: 11px;
  }

  .fo-site-card__title,
  .fo-publish-card__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .fo-site-card__title fo-icon { color: var(--fo-green); }
  .fo-site-card__title strong { font-family: var(--fo-font-serif); font-size: 19px; }
  .fo-publish-card__title { font-size: 17px; }
  .fo-publish-card__title .is-target { color: var(--fo-violet); }

  .fo-control-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: 11px;
  }

  .fo-control-line > fo-icon { width: 14px; height: 14px; flex: 0 0 auto; }
  .fo-control-line > span,
  .fo-control-line > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fo-control-line .fo-icon-btn { margin-inline-start: auto; }

  .fo-publish-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    color: var(--fo-green);
    font-size: 10px;
  }

  .fo-publish-status span { display: inline-flex; align-items: center; gap: 3px; }
  .fo-publish-status fo-icon { width: 12px; height: 12px; }
  .fo-publish-status .is-plus { margin-inline-start: auto; }
  .fo-publish-status .is-minus { color: var(--fo-coral); }

  .fo-publish-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    border-top: 1px solid var(--fo-line-soft);
    padding-top: 9px;
    color: var(--fo-muted);
    font-size: 10px;
  }

  .fo-add-target {
    align-self: start;
    justify-self: start;
  }

  .fo-control-footer {
    min-height: 38px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--fo-line);
    padding: 8px 12px;
    color: var(--fo-faint);
    font-size: 10px;
  }

  .fo-bento-wrap,
  .fo-floating-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--fo-radius-frame);
    padding: 2px 2px 14px;
  }

  .fo-bento-board {
    min-width: 860px;
    display: grid;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-frame);
    background: var(--fo-graphite-2);
    padding: 10px;
    box-shadow: var(--fo-shadow-float);
  }

  .fo-bento-search {
    min-height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: var(--fo-radius-control);
    background: rgb(255 255 255 / .07);
    padding: 8px 11px;
    color: var(--fo-inverse-muted);
  }

  .fo-bento-search fo-icon { color: var(--fo-inverse); }

  .fo-bento-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1.25fr) repeat(2, minmax(190px, .75fr));
    grid-template-rows: 196px 214px;
    gap: 10px;
  }

  .fo-bento-card {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .13);
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper);
  }

  .fo-bento-card--feature { grid-row: 1 / 3; }
  .fo-bento-card__copy { display: grid; gap: 5px; padding: 12px; }
  .fo-bento-card__copy h4 { font-family: var(--fo-font-serif); font-size: 19px; font-weight: 500; }
  .fo-bento-card--feature .fo-bento-card__copy h4 { font-size: 27px; }
  .fo-bento-card__copy p { color: var(--fo-muted); font-size: 10px; line-height: 1.45; }
  .fo-bento-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fo-muted); font-size: 9px; text-transform: uppercase; }

  .fo-bento-art {
    min-height: 104px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--fo-line);
    background-color: #8aa684;
  }

  .fo-bento-card--feature .fo-bento-art { min-height: 270px; }
  .fo-bento-art::after { position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 255 255 / .28) 0 1px, transparent 1.5px); background-size: 5px 5px; mix-blend-mode: soft-light; content: ""; }
  .fo-bento-art--garden { background: radial-gradient(ellipse at 25% 94%, #213d2c 0 10%, transparent 10.5%), radial-gradient(ellipse at 37% 70%, #4d7650 0 13%, transparent 13.5%), radial-gradient(ellipse at 63% 72%, #d4ba62 0 11%, transparent 11.5%), radial-gradient(ellipse at 76% 38%, #b95d45 0 9%, transparent 9.5%), linear-gradient(148deg, #b8c9a6 0 44%, #6c8c69 44% 67%, #263e32 67%); }
  .fo-bento-art--blueprint { background: linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px), linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px), radial-gradient(circle at 68% 42%, transparent 0 28px, #9fc7d6 29px 31px, transparent 32px), #315b6c; background-size: 16px 16px, 16px 16px, auto, auto; }
  .fo-bento-art--coral { background: radial-gradient(circle at 25% 35%, #ffd0ab 0 9%, transparent 9.5%), radial-gradient(circle at 72% 68%, #802f39 0 13%, transparent 13.5%), linear-gradient(145deg, #f26d50 0 48%, #d14446 48% 72%, #452d42 72%); }

  .fo-bento-directory {
    grid-column: 2 / 4;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .13);
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper);
  }

  .fo-bento-directory > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fo-line); padding: 11px 12px; }
  .fo-bento-directory h4 { font-family: var(--fo-font-serif); font-size: 18px; font-weight: 500; }
  .fo-bento-directory ul { list-style: none; }
  .fo-bento-directory li { min-height: 39px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--fo-line-soft); padding: 6px 12px; }
  .fo-bento-directory li:last-child { border-bottom: 0; }
  .fo-bento-index { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--fo-violet-soft); color: var(--fo-violet); font-size: 9px; }
  .fo-bento-directory small { color: var(--fo-muted); font-size: 9px; }

  .fo-bento-ledger { overflow: hidden; border: 1px solid rgb(255 255 255 / .13); border-radius: var(--fo-radius-surface); background: var(--fo-paper); }
  .fo-bento-ledger > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fo-line); padding: 10px 12px; }
  .fo-bento-ledger h4 { font-family: var(--fo-font-serif); font-size: 17px; font-weight: 500; }
  .fo-bento-ledger .fo-table th,
  .fo-bento-ledger .fo-table td { padding-block: 8px; }

  .fo-bento-layout {
    min-width: 860px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 110px;
    gap: 10px;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-frame);
    background: var(--fo-paper-soft);
    padding: 10px;
    box-shadow: var(--fo-shadow-float);
  }

  .fo-bento-tile {
    min-width: 0;
    position: relative;
    display: grid;
    align-content: space-between;
    overflow: hidden;
    border: 1px solid var(--fo-line);
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper);
    padding: 14px;
  }

  .fo-bento-tile h4 { font-family: var(--fo-font-serif); font-size: 20px; font-weight: 500; }
  .fo-bento-tile p { max-width: 46ch; color: var(--fo-muted); font-size: 10px; line-height: 1.5; }
  .fo-bento-tile__label { color: var(--fo-muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
  .fo-bento-tile--hero { grid-column: span 7; grid-row: span 2; background: var(--fo-graphite); color: var(--fo-inverse); }
  .fo-bento-tile--hero h4 { max-width: 12ch; font-size: 34px; line-height: 1; }
  .fo-bento-tile--hero p { color: var(--fo-inverse-muted); }
  .fo-bento-tile--hero::after { width: 170px; height: 170px; position: absolute; inset: auto -32px -48px auto; border: 20px solid rgb(151 142 255 / .28); border-radius: 48% 52% 42% 58%; rotate: -18deg; content: ""; }
  .fo-bento-tile--status { grid-column: span 5; background: var(--fo-green-soft); }
  .fo-bento-tile--status strong { font-family: var(--fo-font-serif); font-size: 30px; font-weight: 500; }
  .fo-bento-tile--activity { grid-column: span 3; background: var(--fo-blue-soft); }
  .fo-bento-tile--storage { grid-column: span 2; background: var(--fo-amber-soft); }
  .fo-bento-tile--storage strong { font-size: 26px; font-variant-numeric: tabular-nums; }
  .fo-bento-tile--note { grid-column: span 4; }
  .fo-bento-tile--links { grid-column: span 4; background: var(--fo-violet-soft); }
  .fo-bento-tile--action { grid-column: span 4; background: var(--fo-coral-soft); }
  .fo-bento-tile__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, currentColor 10%, transparent); }
  .fo-bento-tile__row { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
  .fo-bento-mini-list { display: grid; gap: 5px; margin-top: 10px; font-size: 10px; }
  .fo-bento-mini-list span { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); padding-top: 5px; }

  .fo-floating-workspace {
    min-width: 820px;
    min-height: 560px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fo-line-strong);
    border-radius: var(--fo-radius-frame);
    background: radial-gradient(ellipse at 7% 80%, #334d35 0 9%, transparent 9.5%), radial-gradient(ellipse at 88% 16%, #c46849 0 8%, transparent 8.5%), radial-gradient(ellipse at 75% 90%, #728952 0 14%, transparent 14.5%), linear-gradient(135deg, #d5c990, #78916c 48%, #395746);
    box-shadow: var(--fo-shadow-float);
  }

  .fo-floating-workspace::after { position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 255 255 / .18) 0 1px, transparent 1.5px); background-size: 6px 6px; opacity: .6; content: ""; pointer-events: none; }

  .fo-float-window {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fo-line-strong) 78%, transparent);
    border-radius: var(--fo-radius-surface);
    background: var(--fo-paper);
    box-shadow: var(--fo-shadow-float);
  }

  .fo-float-window__bar { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--fo-line); padding: 6px 8px 6px 12px; color: var(--fo-muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
  .fo-float-window--back-a { width: 260px; height: 210px; inset: 42px auto auto 46px; rotate: -3deg; opacity: .9; }
  .fo-float-window--back-b { width: 235px; height: 180px; inset: auto 34px 42px auto; rotate: 3deg; opacity: .88; }
  .fo-float-window--media { width: 390px; inset: 96px auto auto 126px; }
  .fo-float-window--detail { width: 320px; min-height: 330px; z-index: 4; inset: 126px 72px auto auto; background: color-mix(in srgb, var(--fo-paper-raised) 88%, transparent); backdrop-filter: blur(14px); }

  .fo-float-art { height: 244px; position: relative; overflow: hidden; border-bottom: 1px solid var(--fo-line); background: radial-gradient(ellipse at 27% 22%, #d5a34f 0 11%, transparent 11.5%), radial-gradient(ellipse at 62% 32%, #b2443d 0 9%, transparent 9.5%), radial-gradient(ellipse at 50% 92%, #385637 0 25%, transparent 25.5%), linear-gradient(150deg, #e2d9a7, #8aa06e 54%, #486747); }
  .fo-float-art::after { width: 210px; height: 210px; position: absolute; inset: 34px auto auto 86px; border: 18px solid rgb(238 236 230 / .34); border-radius: 45% 55% 48% 52%; rotate: -11deg; content: ""; }
  .fo-float-media__footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; }
  .fo-float-media__footer p { overflow: hidden; color: var(--fo-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .fo-float-pager { display: flex; gap: 3px; }
  .fo-float-pager span { width: 5px; height: 5px; border-radius: 50%; background: var(--fo-line-strong); }
  .fo-float-pager span:first-child { background: var(--fo-violet); }

  .fo-float-detail__body { display: grid; gap: 16px; padding: 18px; }
  .fo-float-detail__body h4 { font-family: var(--fo-font-serif); font-size: 28px; font-weight: 500; line-height: 1; }
  .fo-float-detail__body p { color: var(--fo-muted); font-size: 11px; line-height: 1.6; }
  .fo-float-detail__meta { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; border-top: 1px solid var(--fo-line); padding-top: 13px; font-size: 10px; }
  .fo-float-detail__meta dt { color: var(--fo-muted); }
  .fo-float-detail__meta dd { text-align: right; }

  .fo-float-backdrop-art { height: 100%; background: linear-gradient(42deg, transparent 0 46%, rgb(116 103 239 / .46) 46% 60%, transparent 60%), repeating-linear-gradient(0deg, var(--fo-paper-soft) 0 18px, var(--fo-line-soft) 18px 19px); }
  .fo-float-backdrop-list { display: grid; gap: 8px; padding: 14px; }
  .fo-float-backdrop-list span { height: 10px; border-radius: 999px; background: var(--fo-line-soft); }
  .fo-float-backdrop-list span:nth-child(2) { width: 72%; }
  .fo-float-backdrop-list span:nth-child(3) { width: 84%; }

  .fo-float-add { position: absolute; z-index: 5; inset: 16px 16px auto auto; border-color: rgb(255 255 255 / .35); background: rgb(38 52 55 / .72); color: white; backdrop-filter: blur(8px); }
  .fo-float-audio { position: absolute; z-index: 5; inset: auto auto 18px 18px; display: flex; align-items: center; gap: 9px; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; background: rgb(38 52 55 / .78); padding: 7px 11px 7px 7px; color: white; backdrop-filter: blur(10px); box-shadow: var(--fo-shadow-float); }
  .fo-float-audio .fo-icon-btn { width: 30px; height: 30px; min-width: 30px; border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .12); color: inherit; }
  .fo-float-wave { display: flex; align-items: center; gap: 2px; }
  .fo-float-wave span { width: 2px; height: var(--wave, 10px); border-radius: 999px; background: currentColor; opacity: .72; }
  .fo-float-audio small { font-size: 9px; }
}

@layer compositions {
  .catalog {
    width: min(1660px, calc(100% - 32px));
    min-height: calc(100dvh - 32px);
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
    margin: 16px auto;
    overflow: clip;
    border-radius: var(--fo-radius-frame);
    background: var(--fo-paper);
    box-shadow: var(--fo-shadow-float);
  }

  .catalog-nav {
    height: calc(100dvh - 32px);
    position: sticky;
    top: 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--fo-graphite);
    color: var(--fo-inverse);
  }

  .catalog-brand { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgb(255 255 255 / .1); padding: 14px; text-decoration: none; }
  .catalog-brand__mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .17); border-radius: var(--fo-radius-control); background: rgb(255 255 255 / .06); color: var(--fo-violet); font-family: var(--fo-font-serif); font-size: 21px; }
  .catalog-brand strong, .catalog-brand small { display: block; }
  .catalog-brand small { margin-top: 2px; color: var(--fo-inverse-muted); font-size: 10px; }
  .catalog-nav nav { overflow-y: auto; padding: 10px; }
  .catalog-nav footer { display: grid; gap: 7px; border-top: 1px solid rgb(255 255 255 / .1); padding: 10px; }
  .catalog-nav footer .fo-btn { width: 100%; justify-content: flex-start; }

  .catalog-main { min-width: 0; }
  .catalog-topbar { min-height: 56px; position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--fo-line); background: color-mix(in srgb, var(--fo-paper) 91%, transparent); padding: 8px 18px; backdrop-filter: blur(16px); }
  .catalog-topbar__tools { display: flex; align-items: center; gap: 7px; }
  .catalog-menu { display: none; }
  .catalog-content { width: min(1280px, 100%); margin: 0 auto; padding: clamp(22px, 3vw, 44px); }

  .catalog-hero {
    min-height: 330px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    align-items: end;
    gap: 28px;
    overflow: hidden;
    margin-bottom: 48px;
    border-radius: var(--fo-radius-frame);
    color: var(--fo-inverse);
    padding: clamp(24px, 4vw, 52px);
  }

  .catalog-hero::after {
    width: 230px;
    height: 230px;
    position: absolute;
    inset: -72px -60px auto auto;
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgb(255 255 255 / .04), 0 0 0 56px rgb(255 255 255 / .03);
    content: "";
  }

  .catalog-hero__copy { position: relative; z-index: 1; }
  .catalog-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--fo-inverse-muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
  .catalog-kicker::before { width: 7px; height: 7px; border-radius: 50%; background: var(--fo-green); box-shadow: 0 0 0 4px rgb(97 201 144 / .12); content: ""; }
  .catalog-hero h1 { max-width: 11ch; margin-top: 12px; font-family: var(--fo-font-serif); font-size: clamp(40px, 6vw, 82px); font-weight: 500; letter-spacing: -.04em; line-height: .92; }
  .catalog-hero p { max-width: 56ch; margin-top: 18px; color: var(--fo-inverse-muted); line-height: 1.55; }
  .catalog-hero__card { position: relative; z-index: 1; align-self: end; border-radius: var(--fo-radius-surface); background: color-mix(in srgb, var(--fo-paper) 94%, transparent); box-shadow: var(--fo-shadow-float); padding: 16px; color: var(--fo-ink); }
  .catalog-hero__card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fo-line); padding-bottom: 11px; }
  .catalog-hero__card dl { display: grid; margin-top: 6px; }
  .catalog-hero__card dl > div { display: grid; grid-template-columns: 1fr auto; gap: 16px; border-bottom: 1px solid var(--fo-line-soft); padding: 9px 0; }
  .catalog-hero__card dl > div:last-child { border-bottom: 0; }
  .catalog-hero__card dt { color: var(--fo-muted); }
  .catalog-hero__card dd { font-weight: 650; }

  .catalog-section { scroll-margin-top: 72px; margin-bottom: 56px; }
  .catalog-section__head { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-bottom: 16px; border-bottom: 1px solid var(--fo-line); padding-bottom: 13px; }
  .catalog-section__head h2 { font-family: var(--fo-font-serif); font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -.025em; }
  .catalog-section__head p { max-width: 62ch; color: var(--fo-muted); font-size: 12px; line-height: 1.55; }

  .catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catalog-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-grid--full { grid-template-columns: 1fr; }
  .specimen { min-width: 0; display: grid; align-content: start; gap: 16px; border: 1px solid var(--fo-line); border-radius: var(--fo-radius-surface); background: var(--fo-paper-soft); padding: 15px; }
  .specimen > header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fo-line-soft); padding-bottom: 11px; }
  .specimen > header h3 { font-size: 12px; }
  .specimen > header p { max-width: 42ch; margin-top: 4px; color: var(--fo-muted); font-size: 10px; line-height: 1.4; }
  .specimen__stage { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
  .specimen__stage--column { display: grid; align-items: initial; }
  .specimen__stage--center { min-height: 180px; justify-content: center; }
  .specimen__stage--field { min-height: 240px; align-content: center; justify-content: center; border-radius: var(--fo-radius-surface); padding: 20px; }
  .specimen__stage--field .fo-card { width: min(340px, 100%); }

  .swatch-grid { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 8px; }
  .swatch { overflow: hidden; border: 1px solid var(--fo-line); border-radius: var(--fo-radius-control); background: var(--fo-paper-raised); }
  .swatch__color { height: 64px; display: block; background: var(--swatch); }
  .swatch__copy { display: grid; gap: 3px; padding: 8px; }
  .swatch__copy strong { font-size: 11px; }
  .swatch__copy code { overflow: hidden; color: var(--fo-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

  .type-specimen { display: grid; gap: 15px; }
  .type-specimen__display { font-family: var(--fo-font-serif); font-size: clamp(34px, 5vw, 64px); letter-spacing: -.04em; line-height: .96; }
  .type-specimen__ui { font-size: 15px; line-height: 1.55; }
  .type-specimen__meta { color: var(--fo-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

  .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
  .icon-cell { min-height: 72px; display: grid; place-items: center; gap: 5px; border: 1px solid var(--fo-line-soft); border-radius: var(--fo-radius-control); background: var(--fo-paper); padding: 8px; color: var(--fo-muted); font-size: 9px; }
  .icon-cell fo-icon { width: 22px; height: 22px; color: var(--fo-ink); }

  .spacing-demo { display: grid; gap: 8px; }
  .spacing-demo > div { display: flex; align-items: center; gap: 10px; color: var(--fo-muted); font-size: 10px; }
  .spacing-demo span { height: 12px; display: block; background: var(--fo-violet); width: var(--space); }

  .feedback-stack { display: grid; gap: 9px; }
  .skeleton-card { display: grid; grid-template-columns: 52px 1fr; gap: 12px; }
  .skeleton-card .fo-skeleton:first-child { height: 52px; }
  .skeleton-lines { display: grid; align-content: center; gap: 8px; }
  .skeleton-lines .fo-skeleton { height: 10px; }

  .mini-settings { overflow: hidden; border: 1px solid var(--fo-line); border-radius: var(--fo-radius-surface); background: var(--fo-paper); padding: 0 13px; }
  .mini-command { overflow: hidden; border-radius: var(--fo-radius-surface); background: var(--fo-paper); box-shadow: var(--fo-shadow-control); }
  .mini-command .fo-command-search { background: var(--fo-paper-raised); }
  .mini-command .fo-command-results { max-height: none; }

  .catalog-footer { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--fo-line); padding-top: 18px; color: var(--fo-muted); font-size: 11px; }
}

@layer variants {
  :root[data-style="dense"] { font-size: 13px; }

  :root[data-style="dense"] .fo-btn,
  :root[data-style="dense"] .fo-icon-btn { min-height: 32px; }
  :root[data-style="dense"] .fo-btn { padding-inline: 10px; }
  :root[data-style="dense"] .fo-icon-btn { width: 32px; }
  :root[data-style="dense"] .fo-btn--xs,
  :root[data-style="dense"] .fo-icon-btn--xs { min-height: 24px; }
  :root[data-style="dense"] .fo-icon-btn--xs { width: 24px; }
  :root[data-style="dense"] .fo-btn--sm,
  :root[data-style="dense"] .fo-icon-btn--sm { min-height: 28px; }
  :root[data-style="dense"] .fo-icon-btn--sm { width: 28px; }
  :root[data-style="dense"] .fo-btn--lg { min-height: 38px; }
  :root[data-style="dense"] .fo-badge,
  :root[data-style="dense"] .fo-chip { min-height: 20px; padding-block: 2px; font-size: 10px; }
  :root[data-style="dense"] .fo-avatar { width: 30px; height: 30px; }

  :root[data-style="dense"] .fo-input,
  :root[data-style="dense"] .fo-select,
  :root[data-style="dense"] .fo-search { min-height: 34px; }
  :root[data-style="dense"] .fo-input,
  :root[data-style="dense"] .fo-select,
  :root[data-style="dense"] .fo-textarea { padding-block: 7px; }
  :root[data-style="dense"] .fo-textarea { min-height: 78px; }
  :root[data-style="dense"] .fo-segmented button,
  :root[data-style="dense"] .fo-segmented [role="tab"] { min-height: 30px; padding-inline: 9px; }
  :root[data-style="dense"] .fo-tabs__list [role="tab"] { min-height: 34px; padding-inline: 9px; }
  :root[data-style="dense"] .fo-callout { gap: 8px; padding: 9px; }
  :root[data-style="dense"] .fo-settings-row { min-height: 58px; padding-block: 8px; }

  :root[data-style="dense"] .fo-link-row { min-height: 50px; gap: 8px; padding: 7px 9px; }
  :root[data-style="dense"] .fo-link-row__mark { width: 28px; height: 28px; }
  :root[data-style="dense"] .fo-link-row__meta { gap: 5px; margin-top: 3px; font-size: 10px; }
  :root[data-style="dense"] .fo-table th,
  :root[data-style="dense"] .fo-table td { padding: 8px 10px; }
  :root[data-style="dense"] .fo-nav-item { min-height: 32px; gap: 7px; padding: 5px 8px; }
  :root[data-style="dense"] .fo-nav-heading { margin: 11px 8px 4px; }
  :root[data-style="dense"] .fo-command-item { min-height: 42px; padding: 6px 8px; }

  :root[data-style="dense"] .fo-app-frame { min-height: 540px; grid-template-columns: 48px 210px minmax(300px, 1fr) minmax(280px, 350px); }
  :root[data-style="dense"] .fo-app-rail { gap: 4px; padding: 7px 4px; }
  :root[data-style="dense"] .fo-rail-action { width: 36px; height: 36px; }
  :root[data-style="dense"] .fo-app-nav { padding: 10px 7px; }
  :root[data-style="dense"] .fo-app-toolbar { min-height: 48px; padding: 6px 8px; }
  :root[data-style="dense"] .fo-inspector-head,
  :root[data-style="dense"] .fo-inspector-body { padding: 10px; }

  :root[data-style="dense"] .catalog { width: min(1720px, calc(100% - 16px)); min-height: calc(100dvh - 16px); grid-template-columns: 220px minmax(0, 1fr); margin: 8px auto; }
  :root[data-style="dense"] .catalog-nav { height: calc(100dvh - 16px); top: 8px; }
  :root[data-style="dense"] .catalog-nav nav { padding: 7px; }
  :root[data-style="dense"] .catalog-brand { padding: 10px; }
  :root[data-style="dense"] .catalog-brand__mark { width: 32px; height: 32px; font-size: 17px; }
  :root[data-style="dense"] .catalog-nav footer { gap: 4px; padding: 7px; }
  :root[data-style="dense"] .catalog-topbar { min-height: 44px; padding: 5px 12px; }
  :root[data-style="dense"] .catalog-content { padding: clamp(16px, 2vw, 28px); }
  :root[data-style="dense"] .catalog-hero { min-height: 270px; gap: 20px; margin-bottom: 32px; padding: clamp(22px, 3vw, 38px); }
  :root[data-style="dense"] .catalog-hero h1 { font-size: clamp(36px, 5vw, 68px); }
  :root[data-style="dense"] .catalog-section { margin-bottom: 38px; }
  :root[data-style="dense"] .catalog-section__head { gap: 16px; margin-bottom: 10px; padding-bottom: 9px; }
  :root[data-style="dense"] .catalog-grid { gap: 8px; }
  :root[data-style="dense"] .specimen { gap: 12px; padding: 11px; }
  :root[data-style="dense"] .specimen > header { padding-bottom: 8px; }

  :root[data-style="departure"] { font-size: 13px; }
  :root[data-style="departure"] .catalog-hero h1,
  :root[data-style="departure"] .type-specimen__display { letter-spacing: -.02em; line-height: 1.05; }
  :root[data-style="departure"] .catalog-section__head h2 { letter-spacing: 0; }
}

@layer utilities {
  .fo-stack { display: grid; gap: 12px; }
  .fo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
  .fo-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .fo-visually-hidden { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 1180px) {
  .catalog-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-app-frame { grid-template-columns: 56px 210px minmax(280px, 1fr); }
  .fo-app-inspector { display: none; }
}

@media (max-width: 880px) {
  body { background-size: 48px 100%; }
  .catalog { width: 100%; min-height: 100dvh; display: block; margin: 0; border-radius: 0; }
  .catalog-nav { height: auto; position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(280px, calc(100vw - 52px)); translate: -105% 0; box-shadow: var(--fo-shadow-float); transition: translate var(--fo-slow) var(--fo-ease-out); }
  body[data-nav-open] .catalog-nav { translate: 0; }
  body[data-nav-open]::after { position: fixed; z-index: 50; inset: 0; background: var(--fo-backdrop); content: ""; }
  .catalog-menu { display: inline-flex; }
  .catalog-topbar { padding-inline: 10px; }
  .catalog-content { padding: 20px 14px 36px; }
  .catalog-hero { min-height: 460px; grid-template-columns: 1fr; }
  .catalog-hero__card { width: min(460px, 100%); }
  .catalog-section__head { grid-template-columns: 1fr; gap: 7px; }
  .catalog-grid, .catalog-grid--3 { grid-template-columns: 1fr; }
  .swatch-grid { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
  .fo-app-frame { min-height: 600px; grid-template-columns: 52px minmax(280px, 1fr); }
  .fo-app-nav { display: none; }
}

@media (max-width: 560px) {
  .catalog-topbar .fo-breadcrumbs { display: none; }
  .catalog-hero { min-height: 500px; padding: 22px; }
  .catalog-hero h1 { font-size: 48px; }
  .catalog-section { margin-bottom: 42px; }
  .catalog-grid { gap: 9px; }
  .specimen { padding: 12px; }
  .swatch-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .fo-stepper { align-items: flex-start; }
  .fo-step { display: grid; justify-items: center; gap: 5px; font-size: 10px; }
  .fo-step:not(:last-child)::after { width: 18px; margin-inline: 4px; margin-top: 14px; }
  .fo-app-frame { min-height: 640px; grid-template-columns: 48px minmax(0, 1fr); }
  .fo-app-rail { padding-inline: 4px; }
  .fo-rail-action { width: 38px; }
  .fo-app-toolbar { padding-inline: 8px; }
  .fo-app-toolbar > .fo-btn { width: 38px; padding: 0; }
  .fo-app-toolbar > .fo-btn span { display: none; }
  .fo-link-row { grid-template-columns: 28px minmax(0, 1fr); }
  .fo-link-row__mark { width: 28px; height: 28px; }
  .fo-link-row > .fo-icon-btn { display: none; }
  .fo-link-row__title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .fo-link-row__meta { flex-wrap: wrap; }
  .fo-link-row__date { margin-inline-start: 0; }
  .fo-dialog__footer { flex-direction: column-reverse; }
  .fo-dialog__footer .fo-btn { width: 100%; }
  .catalog-footer { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .fo-btn:active, .fo-icon-btn:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .catalog-topbar, .fo-inspector-head, .fo-float-window--detail { background: var(--fo-paper); backdrop-filter: none; }
  .fo-float-add, .fo-float-audio { backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --fo-line: var(--fo-ink); --fo-line-strong: var(--fo-ink); }
  .fo-btn, .fo-icon-btn, .fo-card { box-shadow: 0 0 0 1px var(--fo-ink); }
}

@media print {
  .catalog { width: 100%; display: block; margin: 0; box-shadow: none; }
  .catalog-nav, .catalog-topbar, fo-toast-stack { display: none; }
  .catalog-content { padding: 0; }
  .catalog-section { break-inside: avoid; }
}