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

:root {
  /* Brand accent — shared and constant across the whole suite */
  --spark: #F2B33D;

  /* Dark palette (default) */
  --ink: #13161C;
  --surface: #1C212B;
  --border: #2A303C;
  --text: #E7E9EE;
  --muted: #8B93A1;

  /* Light palette tokens (activated by html.light) */
  --paper: #EEF0F3;
  --surface-light: #FFFFFF;
  --border-light: #D8DCE3;
  --text-light: #1A1E27;
  --muted-light: #5B6472;

  /* Semantic aliases — resolve to dark by default */
  --bg: var(--ink);
  --bg-surface: var(--surface);
  --c-border: var(--border);
  --c-text: var(--text);
  --c-muted: var(--muted);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --sans: var(--mono);
  --radius: 8px;
}

html.light {
  --bg: var(--paper);
  --bg-surface: var(--surface-light);
  --c-border: var(--border-light);
  --c-text: var(--text-light);
  --c-muted: var(--muted-light);
}

body {
  background: var(--bg);
  color: var(--c-text);
  font-family: var(--sans);
  font-size: 16px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}

/* Layout */
.container { max-width: 64rem; margin: 0 auto; }
.site-header { padding: 56px 16px 40px; text-align: center; }
.main { padding: 24px 16px 96px; }
@media (min-width: 640px) {
  .site-header { padding: 72px 24px 48px; }
  .main { padding: 24px 24px 96px; }
}
@media (min-width: 1024px) {
  .site-header { padding: 88px 32px 56px; }
  .main { padding: 24px 32px 96px; }
}

/* Brand */
.brand { display: inline-block; text-decoration: none; color: var(--c-text); transition: opacity .15s; }
.brand:hover { opacity: 0.82; }
.brand-title { font-size: 36px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
@media (min-width: 640px) { .brand-title { font-size: 44px; } }
.brand-logo-inline { height: 0.75em; width: auto; display: inline-block; vertical-align: baseline; margin: 0 1px; }

/* Manifesto */
.manifesto { max-width: 36rem; margin: 20px auto 0; font-size: 15px; line-height: 1.6; color: var(--c-muted); }
@media (min-width: 640px) { .manifesto { font-size: 16px; } }

/* Tool cards grid */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: var(--c-text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.tool-card:hover, a.tool-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--spark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
a.tool-card:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

.tool-card.is-disabled {
  opacity: 0.6;
  cursor: default;
}

.tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tool-desc { font-size: 14px; line-height: 1.55; color: var(--c-muted); }

.tool-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tech-chip { font-size: 11px; color: var(--c-muted); background: var(--bg); border: 1px solid var(--c-border); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }

.tool-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.badge-live { background: rgba(242,179,61,0.15); color: var(--spark); border: 1px solid rgba(242,179,61,0.35); }
.badge-beta { background: var(--bg); color: var(--c-muted); border: 1px solid var(--c-border); }
.badge-coming { background: transparent; color: var(--c-muted); border: 1px dashed var(--c-border); }

.tools-error { color: var(--c-muted); font-size: 14px; padding: 24px 0; text-align: center; }

/* 404 page */
.notfound { padding-top: 0; }
.notfound-title { font-size: 16px; color: var(--c-text); margin-bottom: 8px; }
.notfound-back { margin-top: 16px; }
.notfound-link { color: var(--spark); text-decoration: none; }
.notfound-link:hover { text-decoration: underline; }

/* Footer */
.site-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--c-border); text-align: center; color: var(--c-muted); font-size: 13px; }
.site-footer a { color: var(--c-muted); }
.site-footer a:hover { color: var(--c-text); }
.footer-copy { font-size: 13px; }
.footer-version { font-size: 11px; margin-top: 8px; }

/* Respect the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}