/* Global styles (minimal, retro-inspired) */
:root{
  --bg:#ffffff;
  --card-bg:#ffffff; /* cards and panels */
  --border:#e6e6e6; /* soft whitish-grey for light mode outlines */
  --text:#000000;
  --text-soft: #404040; /* Softer text for body content */
  --brand-font: Inter, Arial, sans-serif;
}

/* Respect system setting first (applies only if user hasn't forced a theme) */
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#000000;
    --card-bg:#121212;
    --border:#2f2f2f; /* dark-ish grey for dark mode outlines */
    --text:#ffffff;
    --text-soft: #d4d4d4; /* Softer text for dark mode */
  }
}

/* Theme attribute overrides come last so they always win when present. Use
   :root[data-theme="dark"] to apply variables to the root element. */
:root[data-theme="dark"]{
  --bg:#000000;
  --card-bg:#121212;
  --border:#2f2f2f; /* dark-ish grey for dark mode outlines */
  --text:#ffffff;
  --text-soft: #d4d4d4;
}
:root[data-theme="light"]{
  --bg:#ffffff;
  --card-bg:#ffffff;
  --border:#e6e6e6; /* soft whitish-grey for light mode outlines */
  --text:#000000;
  --text-soft: #404040;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--brand-font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:18px}
.site-header{border-bottom:1px solid var(--border);background:var(--bg)}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;font-size:14px;text-decoration:none;color:var(--text)}
.nav-links a{margin-left:14px;text-decoration:underline;color:var(--text)}
/* Ensure all anchors default to black text */
a, a:visited{color:var(--text);text-decoration:underline}
a:hover, a:focus{color:var(--text)}
.title-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 0}
.title-row h2{font-size:15px;margin:0}
.title-row .decor{flex:1;border:none;height:1px;background:var(--border)}
.site-footer{border-top:1px solid var(--border);padding:12px 0;margin-top:24px;text-align:center}
.back-link{display:inline-block;margin:12px 0;text-decoration:underline}
/* Utility */
.hidden{display:none}
@media (max-width:640px){.container{padding:12px}}

/* Navigation Buttons (shared across pages) */
.nav-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 2px 0; /* Slight padding adjustment for visual centering of arrows */
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
  flex-shrink: 0;
}
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.05); /* subtle hover */
}
/* Specific overrides if needed, generic modifiers */
.back-btn { margin-right: -1px; } /* Merge borders if adjacent */
.theme-btn { margin-left: -1px; }

/* Remove old floating toggle styles if present, or just leave this section clean */