:root,
html[data-theme="dark"] {
  --color-scheme: dark;

  --bg: #080808;
  --bg-soft: #101010;
  --surface: #141414;
  --surface-soft: rgba(255, 255, 255, 0.03);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --text: #f7f7f7;
  --text-soft: #b7b7b7;
  --line: #2a2a2a;
  --line-strong: rgba(255, 255, 255, 0.2);
  --accent: #ffffff;
  --accent-soft: #8f8f8f;
  --hover-fill: rgba(255, 255, 255, 0.08);
  --hover-fill-strong: rgba(255, 255, 255, 0.1);
  --shadow-strong: 0 14px 28px rgba(0, 0, 0, 0.35);

  --body-background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.08), transparent 40%),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.05), transparent 36%),
    var(--bg);
  --grid-pattern: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  --header-background: rgba(8, 8, 8, 0.88);
  --card-background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  --card-background-highlight:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  --card-accent-rule: linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 72%);
  --card-background-featured:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --series-background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  --landing-background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), rgba(8, 8, 8, 0.95) 58%);
  --landing-link-background: rgba(255, 255, 255, 0.035);
  --landing-link-background-hover: rgba(255, 255, 255, 0.12);
  --landing-subtitle-color: rgba(255, 255, 255, 0.8);
  --landing-text-shadow: rgba(0, 0, 0, 0.55);
  --orb-background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  --media-background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  --media-background-soft:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  --media-fallback-background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.12), rgba(8, 8, 8, 0.82)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 36%);
  --media-text: rgba(255, 255, 255, 0.78);
  --media-text-soft: rgba(255, 255, 255, 0.68);
  --tooltip-background: rgba(12, 12, 12, 0.96);
  --tooltip-border: rgba(255, 255, 255, 0.12);
  --code-background: rgba(255, 255, 255, 0.02);
  --embed-background: rgba(255, 255, 255, 0.03);
  --blockquote-background: rgba(255, 255, 255, 0.03);

  --status-public-border: rgba(116, 204, 158, 0.4);
  --status-public-text: #c6f7de;
  --status-public-background: rgba(116, 204, 158, 0.12);
  --status-private-border: rgba(224, 188, 94, 0.38);
  --status-private-text: #f3dc9a;
  --status-private-background: rgba(224, 188, 94, 0.12);
  --status-current-border: rgba(136, 181, 255, 0.42);
  --status-current-text: #d7e5ff;
  --status-current-background: rgba(136, 181, 255, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-scheme: light;

    --bg: #f4efe7;
    --bg-soft: #f9f4ee;
    --surface: #fffaf3;
    --surface-soft: rgba(86, 63, 39, 0.04);
    --surface-strong: rgba(86, 63, 39, 0.08);
    --text: #1d1a17;
    --text-soft: #64584d;
    --line: rgba(86, 63, 39, 0.16);
    --line-strong: rgba(86, 63, 39, 0.28);
    --accent: #17120d;
    --accent-soft: #7a6148;
    --hover-fill: rgba(86, 63, 39, 0.06);
    --hover-fill-strong: rgba(86, 63, 39, 0.1);
    --shadow-strong: 0 16px 30px rgba(82, 60, 33, 0.08);

    --body-background:
      radial-gradient(circle at 12% 8%, rgba(186, 145, 101, 0.16), transparent 42%),
      radial-gradient(circle at 88% 14%, rgba(128, 157, 163, 0.14), transparent 38%),
      var(--bg);
    --grid-pattern: linear-gradient(to right, rgba(86, 63, 39, 0.08) 1px, transparent 1px);
    --header-background: rgba(244, 239, 231, 0.88);
    --card-background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(187, 159, 124, 0.08));
    --card-background-highlight:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(220, 202, 180, 0.24)),
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(187, 159, 124, 0.08));
    --card-accent-rule: linear-gradient(90deg, rgba(122, 97, 72, 0.42), transparent 72%);
    --card-background-featured:
      radial-gradient(circle at top right, rgba(198, 167, 131, 0.22), transparent 34%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(196, 170, 136, 0.16));
    --series-background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(205, 177, 140, 0.18));
    --landing-background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98), rgba(223, 207, 185, 0.9) 60%);
    --landing-link-background: rgba(86, 63, 39, 0.04);
    --landing-link-background-hover: rgba(86, 63, 39, 0.1);
    --landing-subtitle-color: rgba(60, 45, 28, 0.72);
    --landing-text-shadow: rgba(255, 255, 255, 0.6);
    --orb-background: radial-gradient(circle at 35% 35%, rgba(110, 87, 60, 0.32), rgba(110, 87, 60, 0));
    --media-background:
      radial-gradient(circle at 18% 20%, rgba(214, 193, 168, 0.38), transparent 34%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(210, 183, 145, 0.18));
    --media-background-soft:
      radial-gradient(circle at 18% 20%, rgba(214, 193, 168, 0.34), transparent 34%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(210, 183, 145, 0.16));
    --media-fallback-background:
      linear-gradient(180deg, rgba(255, 251, 244, 0.4), rgba(238, 226, 209, 0.92)),
      radial-gradient(circle at top left, rgba(208, 187, 160, 0.34), transparent 36%);
    --media-text: rgba(29, 26, 23, 0.84);
    --media-text-soft: rgba(58, 48, 38, 0.74);
    --tooltip-background: rgba(250, 244, 236, 0.98);
    --tooltip-border: rgba(86, 63, 39, 0.16);
    --code-background: rgba(86, 63, 39, 0.05);
    --embed-background: rgba(86, 63, 39, 0.04);
    --blockquote-background: rgba(86, 63, 39, 0.05);

    --status-public-border: rgba(55, 131, 95, 0.34);
    --status-public-text: #205d42;
    --status-public-background: rgba(80, 160, 120, 0.1);
    --status-private-border: rgba(153, 115, 23, 0.35);
    --status-private-text: #8a610f;
    --status-private-background: rgba(210, 177, 86, 0.12);
    --status-current-border: rgba(77, 114, 187, 0.34);
    --status-current-text: #3e5f9d;
    --status-current-background: rgba(98, 137, 214, 0.12);
  }
}

html[data-theme="light"] {
  --color-scheme: light;

  --bg: #f4efe7;
  --bg-soft: #f9f4ee;
  --surface: #fffaf3;
  --surface-soft: rgba(86, 63, 39, 0.04);
  --surface-strong: rgba(86, 63, 39, 0.08);
  --text: #1d1a17;
  --text-soft: #64584d;
  --line: rgba(86, 63, 39, 0.16);
  --line-strong: rgba(86, 63, 39, 0.28);
  --accent: #17120d;
  --accent-soft: #7a6148;
  --hover-fill: rgba(86, 63, 39, 0.06);
  --hover-fill-strong: rgba(86, 63, 39, 0.1);
  --shadow-strong: 0 16px 30px rgba(82, 60, 33, 0.08);

  --body-background:
    radial-gradient(circle at 12% 8%, rgba(186, 145, 101, 0.16), transparent 42%),
    radial-gradient(circle at 88% 14%, rgba(128, 157, 163, 0.14), transparent 38%),
    var(--bg);
  --grid-pattern: linear-gradient(to right, rgba(86, 63, 39, 0.08) 1px, transparent 1px);
  --header-background: rgba(244, 239, 231, 0.88);
  --card-background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(187, 159, 124, 0.08));
  --card-background-highlight:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(220, 202, 180, 0.24)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(187, 159, 124, 0.08));
  --card-accent-rule: linear-gradient(90deg, rgba(122, 97, 72, 0.42), transparent 72%);
  --card-background-featured:
    radial-gradient(circle at top right, rgba(198, 167, 131, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(196, 170, 136, 0.16));
  --series-background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(205, 177, 140, 0.18));
  --landing-background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98), rgba(223, 207, 185, 0.9) 60%);
  --landing-link-background: rgba(86, 63, 39, 0.04);
  --landing-link-background-hover: rgba(86, 63, 39, 0.1);
  --landing-subtitle-color: rgba(60, 45, 28, 0.72);
  --landing-text-shadow: rgba(255, 255, 255, 0.6);
  --orb-background: radial-gradient(circle at 35% 35%, rgba(110, 87, 60, 0.32), rgba(110, 87, 60, 0));
  --media-background:
    radial-gradient(circle at 18% 20%, rgba(214, 193, 168, 0.38), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(210, 183, 145, 0.18));
  --media-background-soft:
    radial-gradient(circle at 18% 20%, rgba(214, 193, 168, 0.34), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(210, 183, 145, 0.16));
  --media-fallback-background:
    linear-gradient(180deg, rgba(255, 251, 244, 0.4), rgba(238, 226, 209, 0.92)),
    radial-gradient(circle at top left, rgba(208, 187, 160, 0.34), transparent 36%);
  --media-text: rgba(29, 26, 23, 0.84);
  --media-text-soft: rgba(58, 48, 38, 0.74);
  --tooltip-background: rgba(250, 244, 236, 0.98);
  --tooltip-border: rgba(86, 63, 39, 0.16);
  --code-background: rgba(86, 63, 39, 0.05);
  --embed-background: rgba(86, 63, 39, 0.04);
  --blockquote-background: rgba(86, 63, 39, 0.05);

  --status-public-border: rgba(55, 131, 95, 0.34);
  --status-public-text: #205d42;
  --status-public-background: rgba(80, 160, 120, 0.1);
  --status-private-border: rgba(153, 115, 23, 0.35);
  --status-private-text: #8a610f;
  --status-private-background: rgba(210, 177, 86, 0.12);
  --status-current-border: rgba(77, 114, 187, 0.34);
  --status-current-text: #3e5f9d;
  --status-current-background: rgba(98, 137, 214, 0.12);
}

:root {
  --font-sans: "Manrope", "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", "Iowan Old Style", serif;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.52vw, 1.38rem);
  --step-2: clamp(1.45rem, 1.28rem + 0.78vw, 1.85rem);
  --step-3: clamp(1.95rem, 1.62rem + 1.45vw, 2.75rem);
  --step-4: clamp(2.65rem, 2.15rem + 2.1vw, 3.85rem);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --radius: 14px;
  --max-width: 1120px;

  --motion-fast: 220ms;
  --motion-mid: 380ms;
  --ease-standard: cubic-bezier(0.21, 1, 0.24, 1);
}