/* Shared dark foundation for 个人AI学习 public and operational surfaces. */
:root {
  --canvas: #070a11;
  --canvas-raised: #0b1019;
  --surface: #101722;
  --surface-raised: #151e2b;
  --surface-soft: #182332;
  --ink: #e7edf7;
  --ink-strong: #f7faff;
  --ink-muted: #a7b4c6;
  --ink-faint: #748196;
  --line: #273446;
  --line-strong: #3b4d64;
  --cobalt: #7c9cff;
  --cobalt-deep: #9cb3ff;
  --cobalt-soft: #1c2b4d;
  --aqua: #53d8c7;
  --aqua-soft: #123934;
  --warning: #f1b86a;
  --warning-soft: #3c2b16;
  --danger: #ff8794;
  --danger-soft: #3d1f29;
  --focus: #b6c6ff;
  --shadow-soft: 0 18px 44px rgba(0, 0, 0, .27);
  --shadow-float: 0 24px 52px rgba(0, 0, 0, .44);
  --radius-small: 6px;
  --radius: 12px;
  --radius-large: 18px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font-display: "Aptos Display", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-body: "Aptos", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  color-scheme: dark;
  font-family: var(--font-body);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--canvas); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
::selection { color: #070a11; background: var(--aqua); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 68%, white);
  outline-offset: 3px;
}

.site-frame { width: min(1280px, calc(100% - 64px)); margin: 0 auto; }

.quiet-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  border-bottom: 1px solid var(--line);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 760;
  letter-spacing: -.02em;
}

.brand-seal {
  position: relative;
  display: grid;
  width: 25px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-raised);
}
.brand-seal::before,
.brand-seal::after { position: absolute; content: ""; }
.brand-seal::before { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px rgba(124, 156, 255, .16); }
.brand-seal::after { width: 100%; height: 1px; background: var(--aqua); transform: rotate(-38deg); transform-origin: center; }

.nav-index { position: relative; }
.nav-index summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 0 6px 12px;
  color: var(--ink-muted);
  font-size: .82rem;
  list-style: none;
  cursor: pointer;
}
.nav-index summary::-webkit-details-marker { display: none; }
.nav-index summary::after { content: "↗"; color: var(--aqua); font-size: .92rem; transition: transform 180ms var(--ease-out); }
.nav-index[open] summary::after { transform: rotate(90deg); }
.nav-index-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  display: grid;
  min-width: 176px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(16, 23, 34, .97);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(16px);
}
.nav-index-menu a { padding: 10px 12px; color: var(--ink-muted); font-size: .85rem; border-radius: var(--radius-small); }
.nav-index-menu a:hover { color: var(--ink-strong); background: var(--surface-soft); }

.page-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0 32px;
  color: var(--ink-faint);
  font-size: .78rem;
  border-top: 1px solid var(--line);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 680px) {
  .site-frame { width: min(100% - 36px, 1280px); }
  .quiet-nav { min-height: 62px; }
  .page-footer { flex-direction: column; gap: 7px; padding-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}