:root {
  --bg: #ffffff; --sheet: #f8fafc; --ink: #0f172a; --ink-2: #64748b; --rule: #e2e8f0;
  --folder: #38bdf8; --folder-ink: #0369a1; --folder-soft: #e0f2fe; --paper: #ffffff;
  --f-body: "IBM Plex Sans", -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", monospace;
  --step-1: 1.2rem; --step-3: 2rem; --step-4: 2.75rem;
}
[data-theme="dark"] {
  --bg: #0b0f15; --sheet: #141a24; --ink: #e2e8f0; --ink-2: #94a3b8; --rule: #263041;
  --folder: #0284c7; --folder-ink: #e0f2fe; --folder-soft: #0369a1; --paper: #10151e;
}
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); margin: 0; padding: 0; line-height: 1.5; }
.top { border-bottom: 1px solid var(--rule); padding: 16px 24px; position: sticky; top: 0; background: var(--bg); z-index: 10; }
.wrap { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.mark { font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.mark i { color: var(--folder); }
.nav { display: flex; gap: 20px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--ink); }
.actions { display: flex; align-items: center; gap: 12px; }
.theme { background: transparent; border: 1px solid var(--rule); border-radius: 8px; width: 38px; height: 38px; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.theme svg { width: 18px; height: 18px; }
[data-theme="dark"] .theme .sun, [data-theme="light"] .theme .moon { display: none; }
[data-theme="dark"] .theme .moon, [data-theme="light"] .theme .sun { display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-line { background: transparent; border: 1px solid var(--rule); color: var(--ink); }
.mono { font-family: var(--f-mono); }