:root {
   --bg: #F5F2EA;
   --paper: #FFFFFF;
   --ink: #1C2024;
   --ink-soft: #565C61;
   --amber: #F2A70A;
   --amber-ink: #402800;
   --rust: #A6442B;
   --line: #DDD7C6;
   --panel: #181B1E;
   --panel-ink: #F2EFE6;
 }

 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --bg: #15181B;
     --paper: #1D2124;
     --ink: #F2EFE6;
     --ink-soft: #B7B2A4;
     --amber: #F5AE1D;
     --amber-ink: #241800;
     --rust: #C25B3E;
     --line: #2E3236;
     --panel: #0F1112;
     --panel-ink: #F2EFE6;
   }
 }

 :root[data-theme="dark"] {
   --bg: #15181B;
   --paper: #1D2124;
   --ink: #F2EFE6;
   --ink-soft: #B7B2A4;
   --amber: #F5AE1D;
   --amber-ink: #241800;
   --rust: #C25B3E;
   --line: #2E3236;
   --panel: #0F1112;
   --panel-ink: #F2EFE6;
 }

 body {
   background: var(--bg);
   color: var(--ink);
   font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
 }

 .display {
   font-family: 'Barlow Condensed', sans-serif;
 }

 .hazard {
   background-image: repeating-linear-gradient(-45deg, var(--panel) 0 14px, var(--amber) 14px 28px);
 }

 details>summary {
   list-style: none;
   cursor: pointer;
 }

 details>summary::-webkit-details-marker {
   display: none;
 }

 details[open] .chev {
   transform: rotate(45deg);
 }

 .chev {
   transition: transform 0.2s ease;
 }

 @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
   }
 }

 @keyframes riseIn {
   from {
     opacity: 0;
     transform: translateY(14px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .rise-1 {
   animation: riseIn 0.6s ease both;
 }

 .rise-2 {
   animation: riseIn 0.6s ease 0.12s both;
 }

 .rise-3 {
   animation: riseIn 0.6s ease 0.24s both;
 }

 .rise-4 {
   animation: riseIn 0.6s ease 0.36s both;
 }