/* IBM Carbon Design System tokens — personal site
 * Based on Carbon v11 spec. Uses Plex Sans + Plex Mono.
 * Two themes: white (g10) and gray-100 (g100).
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@400;600&display=swap');

:root,
[data-theme="white"] {
  /* Carbon Gray scale */
  --gray-10: #f4f4f4;
  --gray-20: #e0e0e0;
  --gray-30: #c6c6c6;
  --gray-40: #a8a8a8;
  --gray-50: #8d8d8d;
  --gray-60: #6f6f6f;
  --gray-70: #525252;
  --gray-80: #393939;
  --gray-90: #262626;
  --gray-100: #161616;

  /* Carbon Blue scale */
  --blue-10: #edf5ff;
  --blue-20: #d0e2ff;
  --blue-30: #a6c8ff;
  --blue-40: #78a9ff;
  --blue-50: #4589ff;
  --blue-60: #0f62fe;
  --blue-70: #0043ce;
  --blue-80: #002d9c;
  --blue-90: #001d6c;
  --blue-100: #001141;

  /* Support */
  --red-60: #da1e28;
  --green-50: #24a148;
  --yellow-30: #f1c21b;
  --magenta-60: #d02670;
  --teal-60: #007d79;
  --purple-60: #8a3ffc;

  /* Semantic — white theme (g10) */
  --background: #ffffff;
  --layer-01: #f4f4f4;
  --layer-02: #ffffff;
  --layer-03: #f4f4f4;
  --layer-accent: #e0e0e0;
  --field-01: #f4f4f4;
  --field-02: #ffffff;
  --border-subtle: #e0e0e0;
  --border-strong: #8d8d8d;
  --border-inverse: #161616;
  --border-interactive: #0f62fe;
  --text-primary: #161616;
  --text-secondary: #525252;
  --text-placeholder: #a8a8a8;
  --text-helper: #6f6f6f;
  --text-on-color: #ffffff;
  --text-inverse: #ffffff;
  --link-primary: #0f62fe;
  --link-primary-hover: #0043ce;
  --link-visited: #8a3ffc;
  --icon-primary: #161616;
  --icon-secondary: #525252;
  --interactive: #0f62fe;
  --focus: #0f62fe;
  --focus-inset: #ffffff;
  --button-primary: #0f62fe;
  --button-primary-hover: #0050e6;
  --button-primary-active: #002d9c;
  --button-secondary: #393939;
  --button-secondary-hover: #474747;
  --button-tertiary: #0f62fe;
  --button-danger: #da1e28;
  --tag-background: #e0e0e0;
  --tag-text: #161616;
  --tag-blue-bg: #d0e2ff;
  --tag-blue-text: #0043ce;
  --tag-cyan-bg: #bae6ff;
  --tag-cyan-text: #00539a;
  --tag-teal-bg: #9ef0f0;
  --tag-teal-text: #005d5d;
  --tag-magenta-bg: #ffd6e8;
  --tag-magenta-text: #9f1853;
  --tag-purple-bg: #e8daff;
  --tag-purple-text: #6929c4;
  --tag-green-bg: #a7f0ba;
  --tag-green-text: #0e6027;
  --tag-gray-bg: #e0e0e0;
  --tag-gray-text: #393939;
  --hover-ui: #e8e8e8;
  --highlight: #d0e2ff;
  --overlay: rgba(22, 22, 22, 0.5);
  --skeleton: #e8e8e8;
  --header-bg: #161616;
  --header-text: #f4f4f4;
  --header-border: #393939;
  --header-hover: #353535;
  --header-active: #393939;
}

[data-theme="g100"] {
  --background: #161616;
  --layer-01: #262626;
  --layer-02: #393939;
  --layer-03: #525252;
  --layer-accent: #393939;
  --field-01: #262626;
  --field-02: #393939;
  --border-subtle: #393939;
  --border-strong: #6f6f6f;
  --border-inverse: #f4f4f4;
  --border-interactive: #4589ff;
  --text-primary: #f4f4f4;
  --text-secondary: #c6c6c6;
  --text-placeholder: #6f6f6f;
  --text-helper: #8d8d8d;
  --text-on-color: #ffffff;
  --text-inverse: #161616;
  --link-primary: #78a9ff;
  --link-primary-hover: #a6c8ff;
  --link-visited: #be95ff;
  --icon-primary: #f4f4f4;
  --icon-secondary: #c6c6c6;
  --interactive: #4589ff;
  --focus: #ffffff;
  --focus-inset: #161616;
  --button-primary: #0f62fe;
  --button-primary-hover: #0353e9;
  --button-primary-active: #002d9c;
  --button-secondary: #6f6f6f;
  --button-secondary-hover: #5e5e5e;
  --button-tertiary: #ffffff;
  --tag-background: #525252;
  --tag-text: #f4f4f4;
  --tag-blue-bg: #0043ce;
  --tag-blue-text: #edf5ff;
  --tag-cyan-bg: #00539a;
  --tag-cyan-text: #e5f6ff;
  --tag-teal-bg: #005d5d;
  --tag-teal-text: #d9fbfb;
  --tag-magenta-bg: #9f1853;
  --tag-magenta-text: #fff0f7;
  --tag-purple-bg: #6929c4;
  --tag-purple-text: #f6f2ff;
  --tag-green-bg: #0e6027;
  --tag-green-text: #defbe6;
  --tag-gray-bg: #525252;
  --tag-gray-text: #f4f4f4;
  --hover-ui: #353535;
  --highlight: #002d9c;
  --overlay: rgba(0, 0, 0, 0.65);
  --skeleton: #353535;
  --header-bg: #161616;
  --header-text: #f4f4f4;
  --header-border: #393939;
  --header-hover: #353535;
  --header-active: #393939;
}

/* Motion */
:root {
  --duration-fast-01: 70ms;
  --duration-fast-02: 110ms;
  --duration-moderate-01: 150ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01: 400ms;
  --duration-slow-02: 700ms;
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);

  /* Fluid type — Carbon productive scale-ish */
  --type-12: 0.75rem;   /* helper */
  --type-14: 0.875rem;  /* body-01 */
  --type-16: 1rem;      /* body-02 */
  --type-18: 1.125rem;
  --type-20: 1.25rem;   /* heading-03 */
  --type-24: 1.5rem;    /* heading-04 */
  --type-28: 1.75rem;
  --type-32: 2rem;      /* heading-05 */
  --type-42: 2.625rem;  /* heading-06 */
  --type-54: clamp(2.5rem, 5vw, 3.375rem);  /* fluid-heading-05 */
  --type-60: clamp(2.75rem, 6vw, 3.75rem);
  --type-76: clamp(3rem, 8vw, 4.75rem);
  --type-92: clamp(3.5rem, 10vw, 5.75rem);  /* display-02 */

  /* Spacing — Carbon 2x grid */
  --sp-01: 0.125rem;  /* 2px */
  --sp-02: 0.25rem;   /* 4px */
  --sp-03: 0.5rem;    /* 8px */
  --sp-04: 0.75rem;   /* 12px */
  --sp-05: 1rem;      /* 16px */
  --sp-06: 1.5rem;    /* 24px */
  --sp-07: 2rem;      /* 32px */
  --sp-08: 2.5rem;    /* 40px */
  --sp-09: 3rem;      /* 48px */
  --sp-10: 4rem;      /* 64px */
  --sp-11: 5rem;      /* 80px */
  --sp-12: 6rem;      /* 96px */
  --sp-13: 10rem;     /* 160px */

  /* Density */
  --density: 1; /* multiplier, set by tweaks: 0.75 tight, 1 normal, 1.25 airy */
}

/* Base */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--type-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--duration-moderate-02) var(--ease-productive),
    color var(--duration-moderate-02) var(--ease-productive);
}
a {
  color: var(--link-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast-02);
}
a:hover {
  color: var(--link-primary-hover);
  border-bottom-color: currentColor;
}
::selection {
  background: var(--blue-60);
  color: #fff;
}

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-feature-settings: 'ss01' on;
}

/* =========================
   UI Shell Header
   ========================= */
.shell-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--header-bg);
  color: var(--header-text);
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--header-border);
  z-index: 1000;
  font-family: 'IBM Plex Sans', sans-serif;
}
.shell-header__prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-05);
  border-right: 1px solid var(--header-border);
  font-size: var(--type-14);
}
.shell-header__name {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-05);
  font-size: var(--type-14);
  font-weight: 400;
  color: var(--header-text);
  border-right: 1px solid var(--header-border);
  border-bottom: none;
}
.shell-header__name:hover {
  background: var(--header-hover);
  color: var(--header-text);
  border-bottom: none;
}
.shell-header__name b {
  font-weight: 600;
}
.shell-header__nav {
  display: flex;
  align-items: stretch;
  flex: 1;
}
.shell-header__nav a {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-05);
  font-size: var(--type-14);
  color: var(--gray-30);
  border-bottom: none;
  border-right: 1px solid transparent;
  position: relative;
  transition: color var(--duration-fast-02), background var(--duration-fast-02);
}
.shell-header__nav a:hover {
  background: var(--header-hover);
  color: var(--header-text);
  border-bottom: none;
}
.shell-header__nav a.active {
  color: var(--header-text);
  background: var(--header-active);
}
.shell-header__nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--blue-60);
}
.shell-header__actions {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}
.shell-header__actions button {
  background: transparent;
  border: none;
  color: var(--gray-30);
  padding: 0 var(--sp-05);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-14);
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  transition: background var(--duration-fast-02), color var(--duration-fast-02);
}
.shell-header__actions button:hover {
  background: var(--header-hover);
  color: var(--header-text);
}
.shell-header__actions button svg {
  width: 16px;
  height: 16px;
}

.shell-spacer {
  height: 48px;
}

/* =========================
   Carbon Grid (2x)
   ========================= */
.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 0;
  padding-left: var(--sp-05);
  padding-right: var(--sp-05);
  max-width: 99rem;
  margin: 0 auto;
  position: relative;
}
@media (min-width: 672px) {
  .grid { padding-left: var(--sp-07); padding-right: var(--sp-07); }
}
@media (min-width: 1056px) {
  .grid { padding-left: var(--sp-08); padding-right: var(--sp-08); }
}
.col { grid-column: span 16; padding: 0 var(--sp-05); }
@media (min-width: 672px) {
  .col-md-2 { grid-column: span 2; }
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-5 { grid-column: span 5; }
  .col-md-6 { grid-column: span 6; }
  .col-md-8 { grid-column: span 8; }
  .col-md-10 { grid-column: span 10; }
  .col-md-12 { grid-column: span 12; }
  .col-md-16 { grid-column: span 16; }
}
@media (min-width: 1056px) {
  .col-lg-2 { grid-column: span 2; }
  .col-lg-3 { grid-column: span 3; }
  .col-lg-4 { grid-column: span 4; }
  .col-lg-5 { grid-column: span 5; }
  .col-lg-6 { grid-column: span 6; }
  .col-lg-7 { grid-column: span 7; }
  .col-lg-8 { grid-column: span 8; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-12 { grid-column: span 12; }
  .col-lg-14 { grid-column: span 14; }
  .col-lg-16 { grid-column: span 16; }
}
.col-offset-lg-1 { grid-column-start: 2; }
.col-offset-lg-2 { grid-column-start: 3; }
.col-offset-lg-4 { grid-column-start: 5; }

/* Grid visualization (tweak-able) */
body[data-grid="on"] .grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(15, 98, 254, 0.08) 0,
    rgba(15, 98, 254, 0.08) calc((100% - 15 * 1px) / 16),
    transparent calc((100% - 15 * 1px) / 16),
    transparent calc((100% - 15 * 1px) / 16 + 1px)
  );
  background-size: calc((100% - 32px) / 16 + 2px) 100%;
  pointer-events: none;
  z-index: 0;
}
body[data-grid="on"] .col,
body[data-grid="on"] [class*="col-"] {
  outline: 1px dashed rgba(15, 98, 254, 0.25);
  outline-offset: -1px;
}

/* =========================
   Typography
   ========================= */
.display-01 {
  font-size: var(--type-76);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.display-02 {
  font-size: var(--type-92);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}
.heading-05 {
  font-size: var(--type-32);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
}
.heading-04 {
  font-size: var(--type-24);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}
.heading-03 {
  font-size: var(--type-20);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}
.body-02 {
  font-size: var(--type-16);
  line-height: 1.5;
  font-weight: 400;
}
.body-01 {
  font-size: var(--type-14);
  line-height: 1.43;
  font-weight: 400;
}
.helper-text {
  font-size: var(--type-12);
  line-height: 1.33;
  color: var(--text-helper);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
}
.label {
  font-size: var(--type-12);
  line-height: 1.33;
  color: var(--text-secondary);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================
   Buttons (Carbon)
   ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-07);
  min-height: 48px;
  padding: var(--sp-04) 0 var(--sp-04) var(--sp-05);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: var(--type-14);
  font-weight: 400;
  cursor: pointer;
  transition: all var(--duration-fast-02) var(--ease-productive);
  text-decoration: none;
  min-width: 192px;
  max-width: 320px;
  line-height: 1.28;
  letter-spacing: 0.16px;
}
.btn > span:first-child { padding-right: var(--sp-07); }
.btn > .btn__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn > .btn__icon svg { width: 16px; height: 16px; }
.btn--primary {
  background: var(--button-primary);
  color: var(--text-on-color);
}
.btn--primary:hover {
  background: var(--button-primary-hover);
  color: var(--text-on-color);
  border-bottom: 1px solid transparent;
}
.btn--secondary {
  background: var(--button-secondary);
  color: var(--text-on-color);
}
.btn--secondary:hover {
  background: var(--button-secondary-hover);
  color: var(--text-on-color);
  border-bottom: 1px solid transparent;
}
.btn--tertiary {
  background: transparent;
  color: var(--button-tertiary);
  border: 1px solid var(--button-tertiary);
}
.btn--tertiary:hover {
  background: var(--button-tertiary);
  color: var(--text-on-color);
  border-bottom: 1px solid var(--button-tertiary);
}
.btn--ghost {
  background: transparent;
  color: var(--link-primary);
  min-width: 0;
  padding: var(--sp-04) var(--sp-05);
  justify-content: flex-start;
  gap: var(--sp-03);
}
.btn--ghost:hover {
  background: var(--hover-ui);
  color: var(--link-primary-hover);
  border-bottom: 1px solid transparent;
}
.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 1px var(--focus-inset);
}

/* =========================
   Tile (Carbon)
   ========================= */
.tile {
  background: var(--layer-01);
  padding: var(--sp-06);
  border: 1px solid transparent;
  transition: background var(--duration-fast-02), border-color var(--duration-fast-02);
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}
.tile--clickable {
  cursor: pointer;
}
.tile--clickable:hover {
  background: var(--hover-ui);
  color: inherit;
  border-bottom: none;
}
.tile--clickable:hover .tile__arrow {
  transform: translate(4px, -4px);
}
.tile__arrow {
  position: absolute;
  top: var(--sp-05);
  right: var(--sp-05);
  color: var(--icon-primary);
  transition: transform var(--duration-moderate-02) var(--ease-productive);
}

/* =========================
   Tag
   ========================= */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-03);
  background: var(--tag-background);
  color: var(--tag-text);
  font-size: var(--type-12);
  font-weight: 400;
  border-radius: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: 0.16px;
  line-height: 1;
  white-space: nowrap;
}
.tag--sm { height: 20px; font-size: 11px; }
.tag--blue { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
.tag--cyan { background: var(--tag-cyan-bg); color: var(--tag-cyan-text); }
.tag--teal { background: var(--tag-teal-bg); color: var(--tag-teal-text); }
.tag--magenta { background: var(--tag-magenta-bg); color: var(--tag-magenta-text); }
.tag--purple { background: var(--tag-purple-bg); color: var(--tag-purple-text); }
.tag--green { background: var(--tag-green-bg); color: var(--tag-green-text); }
.tag--gray { background: var(--tag-gray-bg); color: var(--tag-gray-text); }

/* =========================
   Tooltip (simple)
   ========================= */
.tooltip { position: relative; display: inline-block; }
.tooltip__body {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-100);
  color: #fff;
  padding: var(--sp-03) var(--sp-04);
  font-size: var(--type-12);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast-02);
  z-index: 100;
}
.tooltip:hover .tooltip__body { opacity: 1; }

/* =========================
   Breadcrumb
   ========================= */
.breadcrumb {
  display: flex;
  gap: var(--sp-03);
  align-items: center;
  font-size: var(--type-14);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-03); }
.breadcrumb li + li::before { content: '/'; color: var(--text-helper); }
.breadcrumb a { color: var(--link-primary); border-bottom: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li:last-child { color: var(--text-primary); }

/* =========================
   Data table
   ========================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--layer-01);
  font-family: 'IBM Plex Sans', sans-serif;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--type-14);
  vertical-align: top;
}
.data-table th {
  background: var(--layer-02);
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--type-12);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border-strong);
}
.data-table tr:hover td { background: var(--hover-ui); }
.data-table__mono { font-family: 'IBM Plex Mono', monospace; color: var(--text-secondary); }

/* =========================
   Section
   ========================= */
.section {
  padding: calc(var(--sp-12) * var(--density)) 0;
  border-top: 1px solid var(--border-subtle);
}
.section--hero {
  padding: calc(var(--sp-11) * var(--density)) 0 calc(var(--sp-12) * var(--density));
  border-top: none;
}
.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  margin-bottom: var(--sp-07);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--type-12);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.section__eyebrow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--blue-60);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* =========================
   Tweaks panel
   ========================= */
.tweaks-panel {
  position: fixed;
  bottom: var(--sp-05);
  right: var(--sp-05);
  background: var(--layer-02);
  border: 1px solid var(--border-subtle);
  padding: var(--sp-05);
  width: 300px;
  z-index: 999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: none;
  font-family: 'IBM Plex Sans', sans-serif;
}
.tweaks-panel.open { display: block; }
.tweaks-panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--type-14);
  font-weight: 600;
  margin-bottom: var(--sp-05);
  padding-bottom: var(--sp-03);
  border-bottom: 1px solid var(--border-subtle);
}
.tweaks-panel__close {
  background: transparent;
  border: none;
  color: var(--icon-primary);
  cursor: pointer;
  padding: 4px;
}
.tweaks-panel__row {
  margin-bottom: var(--sp-05);
}
.tweaks-panel__row:last-child { margin-bottom: 0; }
.tweaks-panel__label {
  display: block;
  font-size: var(--type-12);
  color: var(--text-secondary);
  margin-bottom: var(--sp-02);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
}
.tweaks-panel__seg {
  display: flex;
  border: 1px solid var(--border-subtle);
}
.tweaks-panel__seg button {
  flex: 1;
  background: var(--layer-01);
  color: var(--text-primary);
  border: none;
  padding: var(--sp-03) var(--sp-04);
  font-size: var(--type-12);
  cursor: pointer;
  font-family: inherit;
  border-right: 1px solid var(--border-subtle);
  transition: background var(--duration-fast-02);
}
.tweaks-panel__seg button:last-child { border-right: none; }
.tweaks-panel__seg button.active {
  background: var(--button-primary);
  color: var(--text-on-color);
}
.tweaks-panel__seg button:hover:not(.active) { background: var(--hover-ui); }

/* Page footer */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--sp-09) 0 var(--sp-07);
  background: var(--layer-01);
  margin-top: var(--sp-12);
}
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-05);
  font-size: var(--type-12);
  color: var(--text-secondary);
  font-family: 'IBM Plex Mono', monospace;
}

/* Density modifiers */
body[data-density="tight"] { --density: 0.7; }
body[data-density="normal"] { --density: 1; }
body[data-density="airy"] { --density: 1.4; }

/* Utility */
.stack-07 > * + * { margin-top: var(--sp-07); }
.stack-05 > * + * { margin-top: var(--sp-05); }
.stack-04 > * + * { margin-top: var(--sp-04); }
.stack-03 > * + * { margin-top: var(--sp-03); }

.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--sp-07) 0;
  border: none;
}

.rule-accent {
  width: 48px;
  height: 2px;
  background: var(--blue-60);
  margin-bottom: var(--sp-05);
}

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
a:focus-visible { outline-offset: 4px; }