:root {
      --desk-bg: #171614;
      --desk-bar: rgba(23, 22, 20, 0.96);
      --paper-bg: #f7f3eb;
      --paper-bg-alt: #efeae0;
      --paper-warm: #ece7dc;
      --ink-primary: #171513;
      --ink-secondary: #3b3732;
      --ink-muted: #6b645c;
      --accent-crimson: #8f2424;
      --rule-strong: #1e1b18;
      --rule-hairline: rgba(30, 27, 24, 0.18);
      --rule-soft: rgba(30, 27, 24, 0.11);
      --spine-shadow-left: linear-gradient(90deg, 
        transparent 88%, 
        rgba(145, 115, 78, 0.02) 93%, 
        rgba(125, 92, 58, 0.05) 97%, 
        rgba(95, 68, 38, 0.10) 100%
      );
      --spine-shadow-right: linear-gradient(270deg, 
        transparent 88%, 
        rgba(145, 115, 78, 0.015) 93%, 
        rgba(125, 92, 58, 0.045) 97%, 
        rgba(95, 68, 38, 0.09) 100%
      );
      --spine-crease: rgba(90, 64, 36, 0.14);
      --spine-crease-glow: 0 0 3px rgba(120, 90, 55, 0.05);
      --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
      --font-serif: 'Literata', Charter, Georgia, serif;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-serif-headline: var(--font-display);
      --font-serif-body: var(--font-serif);
      --hl-lead-size: 19px;
      --hl-lead-lh: 23px;
      --hl-sec-size: 16px;
      --hl-sec-lh: 20px;
      --standfirst-size: 13px;
      --standfirst-lh: 18px;
      --prose-size: 14px;
      --prose-lh: 20px;
      --pullquote-size: 13.5px;
      --pullquote-lh: 18px;
      --dropcap-size: 38px;
      --dropcap-lh: 32px;
      --kicker-size: 9px;
      --byline-size: 9px;
    }

    body[data-paper="ivory"] {
      --paper-bg: #fcfbf9;
      --paper-bg-alt: #f2f0ec;
      --ink-primary: #121212;
      --ink-secondary: #323232;
      --ink-muted: #656565;
      --accent-crimson: #9b1c1c;
      --spine-shadow-left: linear-gradient(90deg, 
        transparent 88%, 
        rgba(140, 125, 110, 0.02) 93%, 
        rgba(118, 102, 88, 0.045) 97%, 
        rgba(90, 76, 62, 0.09) 100%
      );
      --spine-shadow-right: linear-gradient(270deg, 
        transparent 88%, 
        rgba(140, 125, 110, 0.015) 93%, 
        rgba(118, 102, 88, 0.04) 97%, 
        rgba(90, 76, 62, 0.08) 100%
      );
      --spine-crease: rgba(85, 72, 58, 0.12);
      --spine-crease-glow: 0 0 3px rgba(110, 95, 80, 0.04);
    }

    body[data-paper="evening"] {
      --desk-bg: #0c0c0b;
      --paper-bg: #1e1d1a;
      --paper-bg-alt: #272521;
      --paper-warm: #201e1b;
      --ink-primary: #ece7df;
      --ink-secondary: #c7c0b5;
      --ink-muted: #8f887d;
      --accent-crimson: #d96b52;
      --rule-strong: #d8d1c5;
      --rule-hairline: rgba(236, 231, 223, 0.16);
      --rule-soft: rgba(236, 231, 223, 0.09);
      --spine-shadow-left: linear-gradient(90deg, 
        transparent 88%, 
        rgba(12, 11, 10, 0.08) 93%, 
        rgba(9, 8, 7, 0.18) 97%, 
        rgba(6, 5, 4, 0.32) 100%
      );
      --spine-shadow-right: linear-gradient(270deg, 
        transparent 88%, 
        rgba(12, 11, 10, 0.07) 93%, 
        rgba(9, 8, 7, 0.15) 97%, 
        rgba(6, 5, 4, 0.28) 100%
      );
      --spine-crease: rgba(6, 5, 4, 0.35);
      --spine-crease-glow: 0 0 3px rgba(8, 7, 6, 0.12);
    }

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

    html, body {
      height: 100dvh;
      width: 100dvw;
      background: var(--desk-bg);
      color: var(--ink-primary);
      font-family: var(--font-serif);
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
    }

    img {
      object-fit: contain;
    }