* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
:root {
  --bg: oklch(98.2% 0.002 250);
  --bg-elev: oklch(100% 0 0);
  --surface: oklch(96% 0.003 250);
  --ink: oklch(22% 0.006 260);
  --ink-soft: oklch(38% 0.006 260);
  --muted: oklch(52% 0.006 260);
  --border: oklch(90% 0.004 255);
  --border-strong: oklch(82% 0.005 255);
  --accent: oklch(77% 0.165 76);
  --accent-soft: oklch(93% 0.06 82);
  --accent-ink: oklch(24% 0.04 75);
  --skill-soft: oklch(95% 0.05 85); --skill-bd: oklch(84% 0.1 82); --skill-tx: oklch(46% 0.09 65);
  --skill-hi-bg: var(--accent); --skill-hi-bd: oklch(68% 0.16 78); --skill-hi-tx: var(--accent-ink);
  --lang-soft: var(--surface); --lang-bd: var(--border-strong); --lang-tx: var(--ink-soft);
  --lang-hi-bg: var(--ink); --lang-hi-bd: var(--ink); --lang-hi-tx: var(--bg);
  --tool-soft: transparent; --tool-bd: var(--border-strong); --tool-tx: var(--muted);
  --tool-hi-bg: var(--ink-soft); --tool-hi-bd: var(--ink-soft); --tool-hi-tx: var(--bg);
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
[data-theme="dark"] {
  --bg: oklch(15% 0 0);
  --bg-elev: oklch(18.5% 0 0);
  --surface: oklch(22% 0 0);
  --ink: oklch(94% 0.003 260);
  --ink-soft: oklch(80% 0.004 260);
  --muted: oklch(64% 0.006 260);
  --border: oklch(29% 0 0);
  --border-strong: oklch(38% 0 0);
  --accent: oklch(82% 0.16 80);
  --accent-soft: oklch(34% 0.07 70);
  --accent-ink: oklch(15% 0 0);
  --skill-soft: oklch(33% 0.06 75); --skill-bd: oklch(52% 0.1 78); --skill-tx: oklch(86% 0.1 82);
  --skill-hi-bg: var(--accent); --skill-hi-bd: var(--accent); --skill-hi-tx: var(--accent-ink);
}
::selection { background: var(--accent-soft); }
a { color: inherit; text-decoration: none; }
[data-item].sc-hide { display: none !important; }
section.sc-hide { display: none !important; }
[data-filter].sc-active { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.sc-tag { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; border-radius: 4px; padding: 4px 9px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); display: inline-block; }
aside .sc-tag { transition: background .22s ease, border-color .22s ease, color .22s ease; }
.sc-tag[data-filter]:not(.sc-unattached) { cursor: pointer; }
.sc-tag.sc-unattached { cursor: default; }
.sc-tag.tag-skill { background: var(--skill-soft); border-color: var(--skill-bd); color: var(--skill-tx); }
.sc-tag.tag-lang { background: var(--lang-soft); border-color: var(--lang-bd); color: var(--lang-tx); }
.sc-tag.tag-tool { background: var(--tool-soft); border-color: var(--tool-bd); color: var(--tool-tx); border-style: dashed; }
.sc-tag.tag-skill.sc-hi { background: var(--skill-hi-bg) !important; border-color: var(--skill-hi-bd) !important; color: var(--skill-hi-tx) !important; font-weight: 600; }
.sc-tag.tag-lang.sc-hi { background: var(--lang-hi-bg) !important; border-color: var(--lang-hi-bd) !important; color: var(--lang-hi-tx) !important; font-weight: 600; }
.sc-tag.tag-tool.sc-hi { background: var(--tool-hi-bg) !important; border-color: var(--tool-hi-bd) !important; color: var(--tool-hi-tx) !important; border-style: solid !important; font-weight: 600; }
.sc-tag.sc-unattached { background: var(--surface) !important; border-color: var(--border) !important; color: var(--muted) !important; opacity: .6; }
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  [data-theme] { --bg: #fff; --bg-elev: #fff; --surface: #f5f5f4; --ink: #1a1a1a; --ink-soft: #3a3a3a; --muted: #6a6a6a; --border: #e2e2e0; --border-strong: #cacac8; }
  @page { size: letter; margin: 0.5in; }
}