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

body {
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Times New Roman",
    serif;

  background: #ffffff;
  color: #111;
  max-width: 560px;
  margin: 64px auto;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.9;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode styles */
body.dark-mode {
  background: #111;
  color: #e8e8e8;
}

body.dark-mode a {
  color: #e8e8e8;
}

body.dark-mode footer {
  color: #999;
}

body.dark-mode #darkModeToggle {
  color: #999;
}

header {
  margin-bottom: 48px;
}

h1 {
  font-size: 18px;
  font-weight: normal;
}

nav {
  margin-bottom: 48px;
}

nav a {
  margin-right: 16px;
  font-size: 13px;
}

section {
  margin-bottom: 64px;
}

h2 {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 16px;
}

p {
  margin-bottom: 16px;
}

ul {
  list-style: none;
}

li {
  margin-bottom: 8px;
}

a {
  color: #000;
  text-decoration: underline;
}

a:hover {
  opacity: 0.6;
}

#darkModeToggle:hover {
  opacity: 0.6;
}

footer {
  margin-top: 80px;
  font-size: 12px;
  color: #666;
}



/* ==============================
    RAPID RECORDINGS – MOTION SYSTEM
    Calm / Minimal / Print-like
    ============================== */

    @keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animate footer coming up from bottom */
footer {
  animation: fadeSettle 0.6s ease-out both;
  animation-delay: 0.15s;
}
/* Animate header coming down from top */
header {
  animation: fadeDown 0.6s ease-out both;
}

@keyframes fadeSettle {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Only animate section elements (main content) */
section {
  animation: fadeSettle 0.6s ease-out both;
}

/* Stagger child elements within sections */
section > * {
  animation: fadeSettle 0.6s ease-out both;
  animation-delay: 0.1s;
}

/* ==============================
    Reduced Motion & Transitions
    ============================== */

@media (prefers-reduced-motion: reduce) {
  header, section, section > *, footer {
    animation: none !important;
    transform: none !important;
  }
}

a {
  transition: opacity 0.2s ease;
}