/* Ink, ivory, and an apple-red accent on the shared notebook layout. */
.theme-death_note {
  --ink: #28272a;
  --muted: #66605d;
  --paper: #fbf7ed;
  --accent: #972e35;
  --accent-light: #f7e1db;
  --line: #d5ccc1;
  --mint: #e9e6dc;
  --rose: #f3e2d9;
  color: var(--ink);
  background: radial-gradient(ellipse at 95% 0, #492d32 0, transparent 48%), linear-gradient(130deg, #26262c, #17191e);
}
.theme-death_note .brand,
.theme-death_note .edition { color: #eee7da; }
.theme-death_note .notebook {
  border-color: #a99e91;
  box-shadow: 8px 8px 0 #111217, 0 24px 70px #0003;
}
.theme-death_note .notebook::before { border-color: #d4a09c; }
.theme-death_note .hero { background: linear-gradient(110deg, #fbf7ed, #eee8dd); }
.theme-death_note .hero-art { transform: rotate(2deg); }
.theme-death_note .primary { box-shadow: 0 3px 0 #612027; }
.theme-death_note .primary:hover:not(:disabled) { background: #76222a; }
.theme-death_note .quiet:hover { background: var(--accent-light); }
.theme-death_note .answer { background: #fffaf1; }
.theme-death_note .answer:hover { background: #f6e9df; border-color: #ad7870; }
.theme-death_note .answer:has(input:checked) { background: var(--accent-light); }
.theme-death_note .answer-letter { background: #e9e1d7; }
.theme-death_note .cast-strip { background: #e5dfd3; }
.theme-death_note .cast-strip span::before { content: '•'; }
.theme-death_note .scorecard { background: #eee8de; }
.theme-death_note .answer-trail { background: #fffaf1; }
.theme-death_note #share-url { color: var(--ink); background: #fffaf1; }
.theme-death_note progress,
.theme-death_note progress::-webkit-progress-bar { background: #e1d8cf; }
.theme-death_note meter,
.theme-death_note meter::-webkit-meter-bar { background: #d6ccc0; }
.theme-death_note button:focus-visible,
.theme-death_note input:focus-visible,
.theme-death_note .answer:has(input:focus-visible) { outline-color: #972e35; }
.theme-death_note .footer { color: #ccc5bb; }
.theme-death_note .footer a { color: #f2b6ad; }
.theme-death_note .topbar a:focus-visible,
.theme-death_note .footer a:focus-visible,
.theme-death_note .footer summary:focus-visible { outline-color: #f2b6ad; }
@media (max-width: 720px) {
  .theme-death_note .hero h1 { font-size: clamp(2.35rem, 9vw, 3rem); }
  .theme-death_note .notebook { box-shadow: 5px 5px 0 #111217; }
}