:root {
  color-scheme: dark;
  --canvas: oklch(0.13 0.025 250);
  --surface: oklch(0.18 0.028 250);
  --surface-2: oklch(0.22 0.032 250);
  --border: oklch(0.34 0.035 250);
  --text: oklch(0.96 0.01 250);
  --muted: oklch(0.75 0.025 250);
  --brand: oklch(0.74 0.16 55);
  --data: oklch(0.79 0.12 205);
  --success: oklch(0.76 0.14 145);
  --shadow: oklch(0 0 0 / 0.42);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Fira Code", Consolas, monospace;
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.14rem + 0.55vw, 1.6rem);
  --step-2: clamp(1.75rem, 1.46rem + 1.45vw, 2.75rem);
  --step-3: clamp(2.4rem, 1.85rem + 2.75vw, 4.25rem);
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-xl: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
  --radius: 0.75rem;
  --max: var(--portfolio-content-max, 72rem);
}
[data-theme="light"] {
  color-scheme: light;
  --canvas: oklch(0.97 0.008 255);
  --surface: oklch(0.995 0.002 255);
  --surface-2: oklch(0.95 0.015 255);
  --border: oklch(0.84 0.025 255);
  --text: oklch(0.22 0.025 255);
  --muted: oklch(0.45 0.025 255);
  --brand: oklch(0.52 0.14 55);
  --data: oklch(0.48 0.09 205);
  --success: oklch(0.48 0.11 145);
  --shadow: oklch(0.22 0.025 255 / 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  background:
    radial-gradient(circle at 12% 5%, oklch(0.74 0.16 55 / 0.16), transparent 28rem),
    radial-gradient(circle at 90% 28%, oklch(0.79 0.12 205 / 0.12), transparent 30rem),
    var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
}
a { color: inherit; }
a:focus-visible { outline: 0.2rem solid var(--data); outline-offset: 0.2rem; }
.skip-link { position: fixed; left: 1rem; top: 1rem; transform: translateY(-200%); z-index: 10; padding: 0.75rem 1rem; background: var(--brand); color: var(--canvas); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.hub-header, main, footer { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.hub-hero { margin-top: var(--space-l); padding: var(--space-xl); border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, oklch(0.74 0.16 55 / 0.12), transparent 48%), var(--surface); box-shadow: 0 1rem 2.5rem var(--shadow); }
.eyebrow, .section-heading span, .milestone-status { color: var(--data); font-family: var(--mono); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { max-width: 18ch; margin: 0.7rem 0 0; font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.hub-hero > p:not(.eyebrow) { max-width: 65ch; color: var(--muted); font-size: var(--step-1); }
.primary-action { display: inline-flex; margin-top: var(--space-m); padding: 0.85rem 1.05rem; border-radius: 0.45rem; background: var(--brand); color: var(--canvas); font-weight: 900; text-decoration: none; }
main { display: grid; gap: var(--space-l); padding-block: var(--space-l); }
.hub-card { padding: var(--space-l); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 0.75rem 2rem var(--shadow); }
.section-heading h2 { margin: 0.35rem 0 var(--space-m); font-size: var(--step-2); line-height: 1.1; }
pre { overflow-x: auto; padding: var(--space-m); border: 1px solid var(--border); border-radius: 0.5rem; background: oklch(0.1 0.02 250); color: var(--text); font-family: var(--mono); font-size: 0.9rem; }
.milestone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-m); }
.milestone { min-width: 0; padding: var(--space-m); border: 1px solid var(--border); border-radius: 0.55rem; background: var(--surface-2); }
.milestone--current { border-color: var(--brand); box-shadow: inset 0.25rem 0 var(--brand); }
.milestone--planned { opacity: 0.75; }
.milestone h3 { margin: 0.45rem 0; font-size: var(--step-1); }
.milestone p { color: var(--muted); }
.milestone a { color: var(--brand); font-weight: 900; }

.milestone-actions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--space-m);
}
.milestone-link {
  min-width: 0;
}

@media (max-width: 24rem) {
  .milestone-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

footer { padding: var(--space-l) 0 var(--space-xl); color: var(--muted); text-align: center; font-family: var(--mono); }
footer a { color: var(--brand); }
@media (max-width: 40rem) { .hub-hero, .hub-card { padding: var(--space-m); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; } }

[data-theme="light"] pre { background: oklch(0.93 0.015 255); color: var(--text); }