html { background: var(--bg-0); }

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text-main);
  background: var(--bg-0);
  font-family: Inter, ui-sans-serif, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  text-rendering: optimizeLegibility;
}

body::selection { color: #06131f; background: var(--primary); }
body.modal-open { overflow: hidden; }

.app-root { position: relative; z-index: 1; min-height: 100vh; }

.ambient-backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 51%, var(--bg-2) 100%);
}

.ambient-orb { position: absolute; border-radius: 50%; filter: blur(10px); opacity: 0.45; }
.ambient-orb--mint { top: -24%; left: -16%; width: 62vw; height: 62vw; background: radial-gradient(circle, rgba(85,234,219,.22), transparent 68%); }
.ambient-orb--violet { right: -19%; bottom: -35%; width: 68vw; height: 68vw; background: radial-gradient(circle, rgba(198,140,255,.2), transparent 68%); }
.ambient-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000 0%, transparent 92%); }
.ambient-noise { position: absolute; inset: 0; opacity: .026; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); border-radius: var(--radius-sm); padding: 10px 14px; color: #06131f; background: var(--primary); font-weight: 800; text-decoration: none; transition: transform var(--motion-fast); }
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.landing-page, .anime-app { position: relative; min-height: 100vh; color: var(--text-main); background: transparent; }
.landing-content { width: min(1600px, 100%); margin: 0 auto; padding: clamp(22px, 3vw, 46px); }
.landing-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: clamp(30px, 6vh, 72px) 4px clamp(22px, 4vh, 42px); }
.landing-intro > div { display: grid; gap: 18px; }
.landing-intro h1 { font-size: clamp(38px, 5.4vw, 78px); font-weight: 710; letter-spacing: -.045em; line-height: 1.04; }
.landing-intro h1 em { color: var(--primary); font-style: normal; text-shadow: var(--glow-primary); }
.landing-intro > p { max-width: 420px; padding-bottom: 4px; color: var(--text-secondary); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.8; }
.chapter-label { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.chapter-label i { width: 28px; height: 1px; background: linear-gradient(90deg, var(--primary), transparent); box-shadow: 0 0 8px rgba(85,234,219,.55); }
.landing-main { min-height: min(650px, 62vh); padding: 0; gap: 18px; }
.landing-panel { min-height: min(650px, 62vh); border-radius: var(--radius-lg); }
.landing-footnote { display: flex; justify-content: space-between; gap: 18px; padding: 24px 4px 4px; color: var(--text-muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }