/* Soft and friendly layout with the site's refreshed palette (chosen 2026-11-04).
   Light: faint cool canvas, white floating cards, warm ink, one indigo-blue accent, pill controls.
   Categories: mint = hardware, lilac = software (token names --teal/--purple kept for compatibility).
   Authored in OKLCH (accent hue 268, mint 168, lilac 305, warm neutrals 60-80), emitted as hex. */
:root {
  --page: #F3F6FC;
  --card: #FFFFFF;
  --raised: #FFFFFF;
  --inset: #EAEEF5;
  --sep: #D6D9E0;
  --grid: #E5E8ED;
  --text: #201B16;
  --text-2: #605954;
  --text-3: #8B8580;
  --accent: #4365E3;
  --accent-strong: #3655CD;
  --accent-tint: #E1EBFF;
  --accent-ink: #314CB9;
  --green: #43B966; --green-tint: #DEF8E2; --green-ink: #196632;
  --orange: #F19B37; --orange-tint: #FFECD4; --orange-ink: #915006;
  --red: #ED4042;
  --yellow: #FACB39;
  --purple: #AC81DB; --purple-tint: #F5ECFF; --purple-ink: #6F3E9D;
  --teal: #57C49E; --teal-tint: #DBF8EC; --teal-ink: #14654D;
  --header-bg: rgba(243, 246, 252, .74);
  --card-border: transparent;
  --shadow: 0 1px 3px rgba(26, 34, 77, .06), 0 6px 16px rgba(26, 34, 77, .05);
  --shadow-lift: 0 2px 6px rgba(26, 34, 77, .07), 0 12px 28px rgba(26, 34, 77, .09);
  --ring: 0 0 0 3px rgba(67, 101, 227, .38);

  /* Knowledge graph node colors (shape also encodes type) */
  --c-experience: var(--accent);
  --c-project: var(--text-2);
  --c-skill: var(--text-3);
  --c-software: var(--purple);
  --c-hardware: var(--teal);

  --font: "Inter", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --r-panel: 20px; --r-card: 16px; --r-tile: 12px; --r-input: 10px; --r-pill: 999px;
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --page-max: 1100px; --read-max: 680px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 200ms; --t-med: 280ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0C0E15; --card: #161921; --raised: #1F232B; --inset: #262A33; --sep: #30343D; --grid: #2A2E36;
    --text: #F4F1ED; --text-2: #B4B0AA; --text-3: #83807A;
    --accent: #7699FB; --accent-strong: #4061DB; --accent-tint: #223059; --accent-ink: #9CB8FF;
    --green: #51C672; --green-tint: #1A3821; --green-ink: #8FE1A1;
    --orange: #FCA443; --orange-tint: #4A2E10; --orange-ink: #FFC47F;
    --red: #FC5855; --yellow: #FFD242;
    --purple: #BB92E9; --purple-tint: #3B2A4D; --purple-ink: #D7BDF8;
    --teal: #5CC8A3; --teal-tint: #11382B; --teal-ink: #8EDEBF;
    --header-bg: rgba(12, 14, 21, .72);
    --card-border: #2A2E37;
    --shadow: none; --shadow-lift: none;
    --ring: 0 0 0 3px rgba(118, 153, 251, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0C0E15; --card: #161921; --raised: #1F232B; --inset: #262A33; --sep: #30343D; --grid: #2A2E36;
  --text: #F4F1ED; --text-2: #B4B0AA; --text-3: #83807A;
  --accent: #7699FB; --accent-strong: #4061DB; --accent-tint: #223059; --accent-ink: #9CB8FF;
  --green: #51C672; --green-tint: #1A3821; --green-ink: #8FE1A1;
  --orange: #FCA443; --orange-tint: #4A2E10; --orange-ink: #FFC47F;
  --red: #FC5855; --yellow: #FFD242;
  --purple: #BB92E9; --purple-tint: #3B2A4D; --purple-ink: #D7BDF8;
  --teal: #5CC8A3; --teal-tint: #11382B; --teal-ink: #8EDEBF;
  --header-bg: rgba(12, 14, 21, .72);
  --card-border: #2A2E37;
  --shadow: none; --shadow-lift: none;
  --ring: 0 0 0 3px rgba(118, 153, 251, .45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font-weight: 700; letter-spacing: -0.02em; }
h2 { font-weight: 600; letter-spacing: -0.01em; }
h3 { font-weight: 600; }
p { margin: 0; }
/* Link text uses the darker shade of the accent so it passes AA on white; fills keep --accent. */
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; }
.label { font-size: 13px; color: var(--text-2); }
.mono { font-family: var(--mono); }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { box-shadow: var(--ring); border-radius: var(--r-input); }

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

/* Inset grouped list (iOS Settings style) */
.list { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--sep); }
.row { display: flex; align-items: center; gap: var(--s2); padding: 12px 16px; min-height: 48px; }

/* Buttons */
.btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--font);
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--inset); color: var(--text);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.btn:hover { filter: brightness(.96); text-decoration: none; }
.btn:active { transform: scale(.98); }
/* White content sits on --accent-strong, which keeps 5:1+ in both themes. */
.btn-primary { background: var(--accent-strong); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-plain { background: transparent; color: var(--accent-ink); padding-inline: 8px; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; line-height: 1;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--inset); color: var(--text);
  border: 0; cursor: default;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
button.chip { cursor: pointer; font-family: inherit; }
button.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--accent-strong); color: #fff; }
.chip-software { background: var(--purple-tint); color: var(--purple-ink); }
.chip-hardware { background: var(--teal-tint); color: var(--teal-ink); }
.chip-accent { background: var(--accent-tint); color: var(--accent-ink); }
.chip-status { background: var(--orange-tint); color: var(--orange-ink); }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--inset); border-radius: var(--r-pill); }
.seg button {
  appearance: none; border: 0; background: transparent; color: var(--text);
  font: 500 14px/1 var(--font); padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.seg button[aria-selected="true"] { background: var(--card); box-shadow: 0 1px 3px rgba(26, 34, 77, .12); font-weight: 600; }

/* Browser surfaces take the palette too */
::selection { background: var(--accent-tint); color: var(--text); }
html { caret-color: var(--accent); accent-color: var(--accent-strong); scrollbar-color: var(--sep) transparent; }

/* Frosted sticky header */
.frost { background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}