*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #000000;
  --surface-1: #0A0A0A;
  --surface-2: #111111;
  --surface-3: #1A1A1A;
  --border: rgba(255,255,255,0.08);
  --text-primary: #FFFFFF;
  --text-secondary: #8E8E93;
  --accent: #007AFF;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

[data-theme="light"] {
  --bg: #F5F5F7;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #E8E8ED;
  --border: rgba(0,0,0,0.1);
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

nav {
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0,0,0,0.75);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] nav {
  background: rgba(245,245,247,0.85);
  border-bottom-color: rgba(0,0,0,0.1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-icon { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }

.nav-right-group { display: flex; align-items: center; gap: 12px; }

.nav-back {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s ease;
}
.nav-back:hover { gap: 7px; }

.theme-toggle {
  background: none;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s, background 0.18s;
  line-height: 1;
}
.theme-toggle:hover { color: var(--text-primary); background: rgba(128,128,128,0.12); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon-sun, .icon-moon { display: flex; align-items: center; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }

.footer-copy { font-size: 13px; color: var(--text-secondary); }