@font-face {
      font-family: 'Nothing You Could Do';
      src: url('assets/NothingYouCouldDo-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

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

    /* Paper grain noise — reused as pseudo-element overlay */
    :root {
      --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

      /* ═══ PAGE ═══ */
      --sp-bg: #f5f7fa;
      --sp-grid-color: rgba(180, 200, 230, 0.25);

      /* ═══ TYPOGRAPHY ═══ */
      --sp-text: #333;
      --sp-text-secondary: #555;
      --sp-text-muted: #666;
      --sp-text-faint: #999;
      --sp-text-placeholder: #b0b8c0;
      --sp-text-placeholder-mq: #c0c5cc;

      /* ═══ LABELS & HEADINGS ═══ */
      --sp-label: #6a7580;
      --sp-label-muted: #8a95a0;
      --sp-label-warm: #4a3c35;
      --sp-label-line-number: #99a;

      /* ═══ SURFACES ═══ */
      --sp-surface: rgba(255, 255, 255, 0.5);
      --sp-surface-hover: rgba(255, 255, 255, 0.85);
      --sp-surface-mq: rgba(255, 255, 255);
      --sp-surface-mq-hover: rgba(255, 255, 255, 0.65);
      --sp-surface-mq-focus: rgba(255, 255, 255, 0.75);
      --sp-surface-frosted: rgba(255, 255, 255, 0.7);
      --sp-surface-frosted-hover: rgba(255, 255, 255, 0.85);

      /* ═══ BORDERS ═══ */
      --sp-border: rgba(180, 200, 230, 0.4);
      --sp-border-light: rgba(180, 200, 230, 0.3);
      --sp-border-lighter: rgba(180, 200, 230, 0.25);
      --sp-border-white: rgba(255, 255, 255, 0.6);
      --sp-border-white-hover: rgba(255, 255, 255, 0.75);

      /* ═══ ACCENT (focus, active states) ═══ */
      --sp-accent: #4f8ff7;
      --sp-accent-glow: rgba(79, 143, 247, 0.15);
      --sp-accent-glow-subtle: rgba(79, 143, 247, 0.1);
      --sp-accent-bg: rgba(79, 143, 247, 0.08);
      --sp-accent-text: #3a7be0;
      --sp-accent-border: rgba(79, 143, 247, 0.3);
      --sp-accent-border-subtle: rgba(79, 143, 247, 0.2);

      /* ═══ BROWN (CTA buttons, auth submit, donate) ═══ */
      --sp-brown: #6e3629;
      --sp-brown-hover: #7d3f32;
      --sp-brown-active: #5e2e22;
      --sp-brown-text: #e0d2c4;
      --sp-brown-focus-border: rgba(110, 54, 41, 0.4);
      --sp-brown-focus-glow: rgba(110, 54, 41, 0.08);

      /* ═══ STATUS (errors, success messages) ═══ */
      --sp-error: #c0392b;
      --sp-error-bg: rgba(192, 57, 43, 0.08);
      --sp-error-border: rgba(192, 57, 43, 0.2);
      --sp-success: #27ae60;
      --sp-success-bg: rgba(39, 174, 96, 0.08);
      --sp-success-border: rgba(39, 174, 96, 0.2);

      /* ═══ DROPDOWNS (account menu, download menu) ═══ */
      --sp-dropdown-bg: #fff;
      --sp-dropdown-hover: rgba(0, 0, 0, 0.05);
      --sp-dropdown-active: rgba(0, 0, 0, 0.1);
      --sp-dropdown-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);

      /* ═══ DELETE & CORNER PEEL ═══ */
      --sp-delete-color: #c0c0c0;
      --sp-delete-hover-color: #e44;
      --sp-delete-hover-bg: #fff0f0;
      --sp-peel: #d0d0d0;
      --sp-peel-hover: #b0b0b0;
      --sp-peel-delete-hover: #e85555;

      /* ═══ KEYBOARD KEYS (shortcut panel) ═══ */
      --sp-kbd-bg: #fff;
      --sp-kbd-border: #d0d3d8;
      --sp-kbd-shadow: rgba(0, 0, 0, 0.08);

      /* ═══ EDITOR UI (add-line, hints, line numbers) ═══ */
      --sp-addline-border: #c8cdd5;
      --sp-addline-text: #aab;
      --sp-hint-text: #a0a5ad;
      --sp-hint-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);

      /* ═══ SHORTCUT PANEL ═══ */
      --sp-hole-bg: rgba(0, 0, 0, 0.45);
      --sp-hole-shadow-in: inset 0 2px 5px rgba(0, 0, 0, 0.4);
      --sp-hole-shadow-out: 0 1px 0 rgba(255, 255, 255, 0.3);

      /* ═══ MODALS ═══ */
      --sp-overlay: rgba(0, 0, 0, 0.5);
      --sp-list-title: #333;
      --sp-list-date: #999;

      /* ═══ ABOUT MODAL ═══ */
      --sp-about-body: #444;
      --sp-about-sig: #3a3a3a;
      --sp-about-sig-sub: #8a95a0;

      /* ═══ MOBILE ═══ */
      --sp-banner-bg: rgba(255, 255, 255, 0.85);
      --sp-banner-close: #8a95a0;

      /* ═══ MATHQUILL ═══ */
      --sp-mq-cursor: #4f8ff7;
      --sp-dot-fill: #4a3935;

      /* ═══ TEXTURES & EFFECTS ═══ */
      --sp-paper-opacity: 0.30;
      --sp-paper-blend: multiply;
      --sp-grain-opacity: 0.1;
      --sp-paper-mq-opacity: 0.3;
      --sp-paper-container-opacity: 0.18;
      --sp-paper-modal-opacity: 0.25;
      --sp-paper-shortcut-opacity: 0.2;
      --sp-paper-list-item-opacity: 0.3;
      --sp-vignette: inset 0 20px 35px rgba(0,0,0,0.12), inset 0 -14px 28px rgba(0,0,0,0.08);
      --sp-text-shadow-label: 0 -1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.7);
      --sp-text-shadow-label-subtle: 0 -0.5px 0.5px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5);
      --sp-text-shadow-line-number: 0 1px 0 rgba(255, 255, 255, 0.8);

      /* ═══ DRAWING PANEL (behind feature flag) ═══ */
      --sp-toolbar-bg: rgba(255, 255, 255, 0.7);
      --sp-toolbar-sep: rgba(180, 200, 230, 0.35);
      --sp-toolbar-btn-color: #5a6a7a;
      --sp-canvas-bg: rgba(255, 255, 255, 0.95);
    }

    /* ═══════════════════════════════════════
       DARK MODE THEME
       To add a new theme: copy this block,
       change the selector and values.
       e.g. body.sepia-mode { ... }
       ═══════════════════════════════════════ */
    html.dark-mode,
    body.dark-mode {
      /* ═══ PAGE ═══ */
      --sp-bg: #1a1715;
      --sp-grid-color: rgba(200, 185, 170, 0.08);

      /* ═══ TYPOGRAPHY ═══ */
      --sp-text: #e8e0d8;
      --sp-text-secondary: #c8beb4;
      --sp-text-muted: #a89e94;
      --sp-text-faint: #6e6460;
      --sp-text-placeholder: #6e6460;
      --sp-text-placeholder-mq: #5a5450;

      /* ═══ LABELS & HEADINGS ═══ */
      --sp-label: #a89e94;
      --sp-label-muted: #8a8078;
      --sp-label-warm: #c8b8a8;
      --sp-label-line-number: #6e6460;

      /* ═══ SURFACES ═══ */
      --sp-surface: rgba(36, 33, 32, 0.5);
      --sp-surface-hover: rgba(46, 42, 40, 0.85);
      --sp-surface-mq: rgba(36, 33, 32, 0.9);
      --sp-surface-mq-hover: rgba(46, 42, 40, 0.75);
      --sp-surface-mq-focus: rgba(46, 42, 40, 0.85);
      --sp-surface-frosted: rgba(36, 33, 32, 0.7);
      --sp-surface-frosted-hover: rgba(46, 42, 40, 0.85);

      /* ═══ BORDERS ═══ */
      --sp-border: rgba(232, 224, 216, 0.12);
      --sp-border-light: rgba(232, 224, 216, 0.10);
      --sp-border-lighter: rgba(232, 224, 216, 0.08);
      --sp-border-white: rgba(232, 224, 216, 0.10);
      --sp-border-white-hover: rgba(232, 224, 216, 0.18);

      /* ═══ ACCENT (focus, active states) ═══ */
      --sp-accent: #5a96f0;
      --sp-accent-glow: rgba(90, 150, 240, 0.2);
      --sp-accent-glow-subtle: rgba(90, 150, 240, 0.12);
      --sp-accent-bg: rgba(90, 150, 240, 0.1);
      --sp-accent-text: #6aa4f8;
      --sp-accent-border: rgba(90, 150, 240, 0.35);
      --sp-accent-border-subtle: rgba(90, 150, 240, 0.2);

      /* ═══ BROWN (CTA buttons, auth submit, donate) ═══ */
      --sp-brown: #7d4035;
      --sp-brown-hover: #8d4a3e;
      --sp-brown-active: #6e3629;
      --sp-brown-text: #e0d2c4;
      --sp-brown-focus-border: rgba(140, 70, 50, 0.5);
      --sp-brown-focus-glow: rgba(140, 70, 50, 0.15);

      /* ═══ STATUS (errors, success messages) ═══ */
      --sp-error: #e8685a;
      --sp-error-bg: rgba(232, 104, 90, 0.12);
      --sp-error-border: rgba(232, 104, 90, 0.25);
      --sp-success: #48c878;
      --sp-success-bg: rgba(72, 200, 120, 0.12);
      --sp-success-border: rgba(72, 200, 120, 0.25);

      /* ═══ DROPDOWNS (account menu, download menu) ═══ */
      --sp-dropdown-bg: #2e2a28;
      --sp-dropdown-hover: rgba(255, 255, 255, 0.06);
      --sp-dropdown-active: rgba(255, 255, 255, 0.1);
      --sp-dropdown-shadow: 2px 4px 16px rgba(0, 0, 0, 0.4);

      /* ═══ DELETE & CORNER PEEL ═══ */
      --sp-delete-color: #6e6460;
      --sp-delete-hover-color: #e8685a;
      --sp-delete-hover-bg: rgba(232, 104, 90, 0.12);
      --sp-peel: #4a4644;
      --sp-peel-hover: #5a5654;
      --sp-peel-delete-hover: #e85555;

      /* ═══ KEYBOARD KEYS (shortcut panel) ═══ */
      --sp-kbd-bg: #2e2a28;
      --sp-kbd-border: #4a4644;
      --sp-kbd-shadow: rgba(0, 0, 0, 0.3);

      /* ═══ EDITOR UI (add-line, hints, line numbers) ═══ */
      --sp-addline-border: #4a4644;
      --sp-addline-text: #6e6460;
      --sp-hint-text: #6e6460;
      --sp-hint-shadow: none;

      /* ═══ SHORTCUT PANEL ═══ */
      --sp-hole-bg: rgba(0, 0, 0, 0.6);
      --sp-hole-shadow-in: inset 0 2px 5px rgba(0, 0, 0, 0.6);
      --sp-hole-shadow-out: 0 1px 0 rgba(255, 255, 255, 0.08);

      /* ═══ MODALS ═══ */
      --sp-overlay: rgba(0, 0, 0, 0.65);
      --sp-list-title: #e8e0d8;
      --sp-list-date: #6e6460;

      /* ═══ ABOUT MODAL ═══ */
      --sp-about-body: #c8beb4;
      --sp-about-sig: #c8beb4;
      --sp-about-sig-sub: #8a8078;

      /* ═══ MOBILE ═══ */
      --sp-banner-bg: rgba(36, 33, 32, 0.9);
      --sp-banner-close: #6e6460;

      /* ═══ MATHQUILL ═══ */
      --sp-mq-cursor: #5a96f0;
      --sp-dot-fill: #c8beb4;

      /* ═══ TEXTURES & EFFECTS ═══ */
      --sp-paper-opacity: 0.06;
      --sp-paper-blend: soft-light;
      --sp-grain-opacity: 0.06;
      --sp-paper-mq-opacity: 0.05;
      --sp-paper-container-opacity: 0.06;
      --sp-paper-modal-opacity: 0.06;
      --sp-paper-shortcut-opacity: 0.05;
      --sp-paper-list-item-opacity: 0.05;
      --sp-vignette: inset 0 20px 35px rgba(0,0,0,0.25), inset 0 -14px 28px rgba(0,0,0,0.18);
      --sp-text-shadow-label: 0 1px 2px rgba(0, 0, 0, 0.3);
      --sp-text-shadow-label-subtle: 0 1px 2px rgba(0, 0, 0, 0.2);
      --sp-text-shadow-line-number: none;

      /* ═══ DRAWING PANEL (behind feature flag) ═══ */
      --sp-toolbar-bg: rgba(36, 33, 32, 0.7);
      --sp-toolbar-sep: rgba(232, 224, 216, 0.12);
      --sp-toolbar-btn-color: #a89e94;
      --sp-canvas-bg: rgba(36, 33, 32, 0.95);
    }

    /* Dark mode texture adaptations */
    body.dark-mode::before {
      filter: invert(1);
      mix-blend-mode: soft-light;
    }

    body.dark-mode .modal::before,
    body.dark-mode .shortcut-panel::before,
    body.dark-mode .lines-container::before,
    body.dark-mode .math-line .mq-wrap::before,
    body.dark-mode .modal-list li::before,
    body.dark-mode .shortcut-item::before,
    body.dark-mode .shortcut-compact .shortcut-chip::before,
    body.dark-mode .drawing-canvas-wrap::after {
      filter: invert(1);
      mix-blend-mode: soft-light;
    }

    /* Dark mode — reduce header box-shadow */
    body.dark-mode header {
      box-shadow:
        inset 0 8px 16px rgba(60,20,12,0.22),
        inset 0 -4px 10px rgba(40,12,6,0.15),
        0 2px 4px rgba(60,20,12,0.09),
        0 6px 14px rgba(60,20,12,0.11),
        0 14px 32px rgba(40,12,6,0.09);
    }

    /* Dark mode — reduce header button drop-shadow (non-accent buttons only) */
    body.dark-mode .header-actions button:not(.auth-btn):not(.about-btn) .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.38));
    }
    body.dark-mode .header-actions .auth-btn .btn-bg,
    body.dark-mode .header-actions .auth-btn:hover .btn-bg,
    body.dark-mode .header-actions .auth-btn:active .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.38))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
    }
    body.dark-mode .header-actions .about-btn .btn-bg,
    body.dark-mode .header-actions .about-btn:hover .btn-bg,
    body.dark-mode .header-actions .about-btn:active .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.38))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
    }

    /* Dark mode header shadow overlay — cool desaturated wash like shade on warm wood */
    body.dark-mode .header-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(20, 18, 35, 0.26),
        rgba(15, 12, 28, 0.18)
      );
      pointer-events: none;
      z-index: 2;
      mix-blend-mode: multiply;
    }

    /* Dark mode shadow overlay on brown buttons */
    body.dark-mode .auth-submit::after,
    body.dark-mode .about-donate::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(20, 18, 35, 0.22);
      pointer-events: none;
      mix-blend-mode: multiply;
      border-radius: inherit;
      z-index: 2;
    }

    /* Dark mode MathQuill text color */
    body.dark-mode .mq-math-mode,
    body.dark-mode .mq-math-mode * {
      color: var(--sp-text);
    }
    body.dark-mode .mq-overline {
      border-top-color: var(--sp-text);
    }
    body.dark-mode .mq-editable-field .mq-selection .mq-selectable {
      background: rgba(90, 150, 240, 0.25) !important;
    }
    body.dark-mode .math-line.continuation .mq-wrap {
      border-top-color: rgba(255, 255, 255, 0.05);
    }
    body.dark-mode .math-line.has-continuation .mq-wrap {
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 3px 8px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12);
    }

    /* ═══ Theme toggle animation ═══ */
    @keyframes themeSpin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .header-logo.theme-spin { animation: themeSpin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

    /* ═══ Smooth theme transitions ═══ */
    body {
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .mq-wrap, .modal, .shortcut-panel, .shortcut-item, .feedback-btn,
    .account-menu, .download-menu, .add-line-btn, .auth-field input,
    .modal-list li, .shortcut-search, .feedback-field textarea,
    .shortcut-compact .shortcut-chip, .shortcut-keys kbd,
    .shortcut-compact .shortcut-chip kbd {
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      color: var(--sp-text);
      position: relative;
      background-color: var(--sp-bg);
      background-image:
        linear-gradient(var(--sp-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--sp-grid-color) 1px, transparent 1px);
      background-size: 18px 18px;
    }

    html, body {
      scrollbar-width: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    body > * {
      position: relative;
      z-index: 1;
    }

    /* ───── Computation notebook cover header ───── */
    .header-wrap {
      position: relative;
      z-index: 10;
    }

    .header-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('assets/textures/marble grain.avif');
      background-size: cover;
      background-position: center;
      opacity: 0.3;
      pointer-events: none;
      mix-blend-mode: multiply;
      z-index: 1;
    }

    header {
      padding: 12px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      /* National Brand computation notebook — reddish-brown marbled cover */
      background: linear-gradient(to bottom, #7d4035, #5c2a1e);
      box-shadow:
        inset 0 8px 16px rgba(60,20,12,0.3),
        inset 0 -4px 10px rgba(40,12,6,0.2),
        0 2px 4px rgba(60,20,12,0.12),
        0 6px 14px rgba(60,20,12,0.15),
        0 14px 32px rgba(40,12,6,0.12);
    }

    /* Heavy marbled grain — the classic composition notebook texture */
    header::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--grain);
      background-size: 150px 150px;
      opacity: 0.35;
      pointer-events: none;
      mix-blend-mode: overlay;
    }

    header::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--grain);
      background-size: 90px 90px;
      opacity: 0.25;
      pointer-events: none;
      mix-blend-mode: soft-light;
    }

    /* Paper texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      opacity: var(--sp-paper-opacity);
      pointer-events: none;
      z-index: 0;
      mix-blend-mode: var(--sp-paper-blend);
    }

    /* Body grain overlay */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: var(--grain);
      background-size: 200px 200px;
      opacity: var(--sp-grain-opacity);
      pointer-events: none;
      z-index: 0;
    }

    header h1 {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    header h1 a {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .header-logo {
      height: 42px;
      width: auto;
      display: block;
      filter: drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5));
      transition: transform 0.15s ease, filter 0.15s ease;
      transform-origin: center center;
      position: relative;
      z-index: 2;
      cursor: pointer;
    }

    .header-logo:hover {
      transform: rotate(-8deg);
    }

    .header-logo:active {
      transform: scale(0.88);
      filter: drop-shadow(1px 1px 2px rgba(50, 18, 10, 0.6));
    }

    .header-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
    }

    .header-actions button {
      width: 48px;
      height: 48px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(0.8);
      transition: transform 0.25s ease;
    }

    .header-actions button .btn-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5));
    }

    .header-actions button .btn-icon {
      position: relative;
      z-index: 1;
      width: 20px;
      height: 20px;
      pointer-events: none;
    }

    .header-actions > button:hover {
      transform: scale(0.8) rotate(8deg);
    }

    .header-actions button:hover .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5));
    }

    .header-actions > button:active,
    .header-actions > div > button:active {
      transform: scale(0.75);
    }

    .header-actions > button:active .btn-bg,
    .header-actions > div > button:active .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5));
    }

    /* Rotate each button's background differently */
    .header-actions button:nth-child(1) .btn-bg { transform: rotate(2deg); }
    .header-actions button:nth-child(2) .btn-bg { transform: rotate(0deg); }
    .header-actions button:nth-child(3) .btn-bg { transform: rotate(0deg); }
    .header-actions button:nth-child(6) .btn-bg { transform: rotate(2deg); }

    /* ───── Auth button (separated from other header buttons) ───── */
    .header-auth-sep {
      width: 1px;
      height: 28px;
      background: rgba(255, 255, 255, 0.15);
      margin: 0 4px;
      align-self: center;
      position: relative;
      z-index: 2;
    }

    .header-actions .auth-btn {
      position: relative;
      z-index: 2;
    }

    .header-actions .auth-btn .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
      transform: rotate(3deg);
    }

    .header-actions .auth-btn:hover {
      transform: scale(0.8) rotate(8deg);
    }

    .header-actions .auth-btn:hover .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
    }

    .header-actions .auth-btn:active .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
    }

    .header-actions .auth-btn .btn-icon.signed-in {
      transform: translateX(3px);
    }

    /* ───── About button (accent2, left of auth) ───── */
    .header-actions .about-btn {
      position: relative;
      z-index: 2;
    }

    .header-actions .about-btn .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
      transform: rotate(-2deg);
    }

    .header-actions .about-btn:hover {
      transform: scale(0.8) rotate(8deg);
    }

    .header-actions .about-btn:hover .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
    }

    .header-actions .about-btn:active .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5))
             sepia(0.3) hue-rotate(-10deg) saturate(1.4);
    }

    /* ───── Account dropdown ───── */
    .account-dropdown {
      position: relative;
    }

    .account-menu {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--sp-dropdown-bg);
      border: 1px solid var(--sp-border);
      border-radius: 6px;
      box-shadow: var(--sp-dropdown-shadow);
      z-index: 100;
      min-width: 120px;
      overflow: hidden;
    }

    .account-menu.open {
      display: flex;
      flex-direction: column;
    }

    .account-menu-header {
      padding: 8px 8px 4px 8px;
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 13px;
      color: var(--sp-label-muted);
      font-weight: bold;
      border-bottom: 1px solid var(--sp-border-lighter);
      text-shadow: var(--sp-text-shadow-label-subtle);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 220px;
    }

    .account-menu button {
      all: unset;
      padding: 8px 14px;
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 13px;
      color: var(--sp-text);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }

    .account-menu button:hover {
      background: var(--sp-dropdown-hover);
    }

    .account-menu button:active {
      background: var(--sp-dropdown-active);
    }

    /* ───── Auth modal ───── */
    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 24px;
      border-bottom: 1.5px solid var(--sp-border-light);
    }

    .auth-tab {
      flex: 1;
      padding: 10px 0;
      background: none;
      border: none;
      font-family: "Computer Modern Serif", serif;
      font-size: 24px;
      color: var(--sp-label-muted);
      cursor: pointer;
      position: relative;
      transition: color 0.2s;
      text-shadow: var(--sp-text-shadow-label);
    }

    .auth-tab:hover {
      color: var(--sp-label);
    }

    .auth-tab.active {
      color: var(--sp-label);
      font-weight: 600;
    }

    .auth-tab::after {
      content: '';
      position: absolute;
      bottom: -1.5px;
      left: 50%;
      right: 50%;
      height: 2px;
      background: var(--sp-label);
      border-radius: 1px;
      transition: left 0.25s ease, right 0.25s ease;
    }

    .auth-tab.active::after {
      left: 15%;
      right: 15%;
    }

    .auth-body {
      position: relative;
      min-height: 280px;
    }

    .auth-view {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .auth-view.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      position: relative;
    }

    .auth-error {
      font-family: "Computer Modern Serif", serif;
      font-size: 13px;
      color: var(--sp-error);
      background: var(--sp-error-bg);
      border: 1px solid var(--sp-error-border);
      border-radius: 6px;
      padding: 8px 12px;
      margin-bottom: 4px;
    }

    .auth-error.auth-success {
      color: var(--sp-success);
      background: var(--sp-success-bg);
      border-color: var(--sp-success-border);
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .auth-field label {
      font-family: "Computer Modern Serif", serif;
      font-size: 13px;
      color: var(--sp-label);
      text-shadow: var(--sp-text-shadow-label);
    }

    .auth-field input {
      padding: 10px 14px;
      border: 1.5px solid var(--sp-border);
      border-radius: 2px;
      background: var(--sp-surface-hover);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 14px;
      color: var(--sp-text);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      position: relative;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.05);
    }

    .auth-field input:focus {
      border-color: var(--sp-brown-focus-border);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.05),
        0 0 0 3px var(--sp-brown-focus-glow);
    }

    .auth-field input::placeholder {
      color: var(--sp-text-placeholder);
    }

    .auth-submit {
      margin-top: 6px;
      padding: 11px 0;
      border: none;
      border-radius: 4px;
      background: var(--sp-brown);
      color: var(--sp-brown-text);
      font-family: "Computer Modern Serif", serif;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
      text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.12);
      position: relative;
      overflow: hidden;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 3px 8px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .auth-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--grain);
      background-size: 100px 100px;
      opacity: 0.15;
      pointer-events: none;
      mix-blend-mode: overlay;
    }

    .auth-submit:hover {
      background: var(--sp-brown-hover);
    }

    .auth-submit:active {
      transform: scale(0.98);
      background: var(--sp-brown-active);
    }

    .auth-forgot {
      text-align: center;
      margin-top: 4px;
    }

    .auth-forgot a {
      font-family: "Computer Modern Serif", serif;
      font-size: 12.5px;
      color: var(--sp-label-muted);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.2s;
      text-shadow: var(--sp-text-shadow-label);
    }

    .auth-forgot a:hover {
      color: var(--sp-label);
      text-decoration: underline;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 4px 0;
      color: var(--sp-text-placeholder);
      font-size: 11px;
      font-family: "Computer Modern Serif", serif;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--sp-border-light);
    }

    /* Auth reset password description (moved from inline style) */
    .auth-reset-desc {
      font-family: 'Computer Modern Serif', serif;
      font-size: 14px;
      color: var(--sp-text-secondary);
      margin-bottom: 8px;
    }

    /* Download dropdown */
    .download-dropdown {
      position: relative;
      display: none;
    }

    .download-dropdown > button {
      width: 48px;
      height: 48px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(0.8);
      transition: transform 0.25s ease;
    }

    .download-dropdown > button:hover {
      transform: scale(0.8) rotate(8deg);
    }

    .download-dropdown > button:hover .btn-bg {
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5));
    }

    .download-dropdown > button:active {
      transform: scale(0.75);
    }

    .download-dropdown > button .btn-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(50, 18, 10, 0.5));
      transition: filter 0.25s ease;
      transform: rotate(-2deg);
    }

    .download-dropdown > button:active .btn-bg {
      filter: brightness(1.05) drop-shadow(1px 1px 3px rgba(50, 18, 10, 0.4));
    }

    .download-dropdown > button .btn-icon {
      position: relative;
      z-index: 1;
      width: 20px;
      height: 20px;
      pointer-events: none;
    }

    .download-menu {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--sp-dropdown-bg);
      border: 1px solid var(--sp-border);
      border-radius: 6px;
      box-shadow: var(--sp-dropdown-shadow);
      z-index: 100;
      min-width: 140px;
      overflow: hidden;
    }

    .download-menu.open {
      display: flex;
      flex-direction: column;
    }

    .download-menu button {
      all: unset;
      padding: 8px 14px;
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 13px;
      color: var(--sp-text);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
    }

    .download-menu button:hover {
      background: var(--sp-dropdown-hover);
    }

    .download-menu button:active {
      background: var(--sp-dropdown-active);
    }

    .download-menu button + button {
      border-top: 1px solid var(--sp-border-light);
    }

    /* Download menu header (moved from inline style) */
    .download-menu-header {
      padding: 8px 8px 4px 8px;
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 13px;
      color: var(--sp-label-muted);
      font-weight: bold;
      border-bottom: 1px solid var(--sp-border-lighter);
      text-shadow: var(--sp-text-shadow-label-subtle);
    }

    /* ───── Save icon state animations ───── */
    .save-icon .save-icon-floppy {
      opacity: 1;
      transition: opacity 0.25s ease;
    }
    .save-icon .save-icon-dots {
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .save-icon .save-icon-check {
      opacity: 0;
      transition: opacity 0.25s ease;
      transform-origin: center;
    }

    /* Saving state: show dots, hide floppy */
    .save-icon.saving .save-icon-floppy { opacity: 0; }
    .save-icon.saving .save-icon-dots { opacity: 1; }
    .save-icon.saving .save-icon-check { opacity: 0; }

    /* Dot bounce animation */
    .save-icon .dot {
      animation: none;
    }
    .save-icon.saving .dot {
      animation: dotBounce 0.9s ease-in-out infinite;
    }
    .save-icon.saving .dot1 { animation-delay: 0s; }
    .save-icon.saving .dot2 { animation-delay: 0.15s; }
    .save-icon.saving .dot3 { animation-delay: 0.3s; }

    @keyframes dotBounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-4px); }
    }

    /* Saved state: show checkmark, hide floppy */
    .save-icon.saved .save-icon-floppy { opacity: 0; }
    .save-icon.saved .save-icon-dots { opacity: 0; }
    .save-icon.saved .save-icon-check {
      opacity: 1;
      animation: checkReveal 0.4s ease-out;
    }

    @keyframes checkReveal {
      0% { clip-path: inset(0 100% 0 0); }
      100% { clip-path: inset(0 0 0 0); }
    }

    /* Download icon states (mirrors save-icon) */
    .download-icon .download-icon-default { opacity: 1; transition: opacity 0.25s ease; }
    .download-icon .download-icon-dots { opacity: 0; transition: opacity 0.25s ease; }
    .download-icon .download-icon-check { opacity: 0; transition: opacity 0.25s ease; transform-origin: center; }

    .download-icon.exporting .download-icon-default { opacity: 0; }
    .download-icon.exporting .download-icon-dots { opacity: 1; }
    .download-icon.exporting .download-icon-check { opacity: 0; }
    .download-icon.exporting .dot { animation: dotBounce 0.9s ease-in-out infinite; }
    .download-icon.exporting .dot1 { animation-delay: 0s; }
    .download-icon.exporting .dot2 { animation-delay: 0.15s; }
    .download-icon.exporting .dot3 { animation-delay: 0.3s; }

    .download-icon.exported .download-icon-default { opacity: 0; }
    .download-icon.exported .download-icon-dots { opacity: 0; }
    .download-icon.exported .download-icon-check { opacity: 1; animation: checkReveal 0.4s ease-out; }

    .pad-title {
      background: none;
      border: none;
      color: #e0d2c4;
      font-size: 26.25px;
      font-weight: normal;
      font-family: 'Nothing You Could Do', cursive;
      -webkit-text-stroke: 0.6px #e0d2c4;
      padding: 6px 14px;
      outline: none;
      max-width: 700px;
      min-width: 60px;
      width: 60px;
      text-align: left;
      position: relative;
      z-index: 2;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      filter: none;
      --pad-title-deboss:
        0 -1px 1px rgba(40, 12, 6, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.12);
      text-shadow: var(--pad-title-deboss);
    }

    .pad-title:not(:placeholder-shown) {
      filter: url(#pencil-texture);
    }

    .pad-title::placeholder {
      color: rgba(196, 168, 138, 0.5);
      text-shadow: var(--pad-title-deboss);
      -webkit-text-stroke: 0;
    }

    .pad-title:focus::placeholder {
      color: transparent;
    }

    /* ───── Load modal ───── */
    @keyframes modalFlyIn {
      0% {
        opacity: 0;
        transform: translateY(110vh) rotate(8deg);
      }
      60% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
      }
    }

    @keyframes modalFlyOut {
      0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
      }
      100% {
        opacity: 0;
        transform: translateY(110vh) rotate(-8deg);
      }
    }

    @keyframes overlayFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes overlayFadeOut {
      from { opacity: 1; }
      to   { opacity: 0; }
    }

    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--sp-overlay);
      z-index: 100;
      align-items: center;
      justify-content: center;
    }

    .modal-overlay.visible {
      display: flex;
      animation: overlayFadeIn 0.35s ease forwards;
    }

    .modal-overlay.visible .modal {
      animation: modalFlyIn 0.35s ease-out forwards;
    }

    .modal-overlay.closing {
      display: flex;
      animation: overlayFadeOut 0.3s ease forwards;
    }

    .modal-overlay.closing .modal {
      animation: modalFlyOut 0.35s ease-in forwards;
    }

    .modal {
      background-color: var(--sp-bg);
      background-image:
        linear-gradient(var(--sp-grid-color) 1px, transparent 1px);
      background-size: 100% 28px;
      background-position: 0 72px;
      border-radius: 2px;
      padding: 28px 32px;
      min-width: 560px;
      max-width: 740px;
      max-height: 85vh;
      box-shadow:
        inset 0 8px 18px rgba(0, 0, 0, 0.12),
        inset 0 -6px 14px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 16px 48px rgba(0, 0, 0, 0.3),
        0 32px 80px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    .modal::before {
      content: '';
      position: absolute;
      inset: -10%;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      background-position: center;
      opacity: var(--sp-paper-modal-opacity);
      pointer-events: none;
      z-index: 0;
      mix-blend-mode: var(--sp-paper-blend);
    }

    .modal::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--grain);
      background-size: 200px 200px;
      opacity: var(--sp-grain-opacity);
      pointer-events: none;
      z-index: 0;
    }

    .modal > * {
      position: relative;
      z-index: 1;
    }

    .modal-close {
      position: absolute;
      top: 0;
      right: 0;
      width: 32px;
      height: 32px;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.2s ease;
      padding: 0;
      font-size: 0;
      color: transparent;
    }

    .modal:hover .modal-close {
      opacity: 1;
    }

    .modal-close::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 28px 28px 0;
      border-color: transparent var(--sp-peel) transparent transparent;
      transition: border-width 0.25s ease, border-color 0.2s ease;
      filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.12));
    }

    .modal:hover .modal-close::before {
      border-width: 0 32px 32px 0;
    }

    .modal-close:hover::before {
      border-color: transparent var(--sp-peel-hover) transparent transparent;
    }

    .modal-close::after {
      content: '\00d7';
      position: absolute;
      top: 3px;
      right: 5px;
      font-size: 13px;
      color: transparent;
      transition: color 0.2s ease;
      line-height: 1;
    }

    .modal-close:hover::after {
      color: rgba(255, 255, 255, 0.95);
    }

    .modal h2 {
      font-family: "Computer Modern Serif", serif;
      font-size: 24px;
      color: var(--sp-label);
      margin-bottom: 20px;
      padding-bottom: 12px;
      text-shadow: var(--sp-text-shadow-label);
    }

    .modal-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 12px;
    }

    .modal-header h2 {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .modal-header-btn.upload-btn {
      display: none;
    }

    .modal-header-btn {
      width: 34px;
      height: 34px;
      border: 1.5px solid var(--sp-border);
      border-radius: 2px;
      background: var(--sp-surface);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s, background 0.15s, transform 0.15s;
      color: var(--sp-toolbar-btn-color);
    }

    .modal-header-btn .btn-icon {
      width: 18px;
      height: 18px;
      pointer-events: none;
    }

    .modal-header-btn:hover {
      border-color: var(--sp-accent);
      background: var(--sp-surface-hover);
    }

    .modal-header-btn:active {
      transform: scale(0.95);
    }

    .modal-list {
      list-style: none;
      overflow-y: auto;
      flex: 1;
      margin-bottom: 16px;
      scrollbar-width: none;
    }

    .modal-list::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .modal-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.2s, background 0.15s, transform 0.15s;
      background: var(--sp-surface-hover);
      border: 1.5px solid var(--sp-border-white);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.04);
      margin-bottom: 8px;
      position: relative;
      overflow: hidden;
    }

    .modal-list li::before {
      content: '';
      position: absolute;
      inset: -18%;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      background-position: center;
      opacity: var(--sp-paper-list-item-opacity);
      transform: translate(var(--paper-offset-x, 0px), var(--paper-offset-y, 0px));
      pointer-events: none;
      z-index: 0;
    }

    .modal-list li > * {
      position: relative;
      z-index: 1;
    }

    .modal-list li:hover {
      background: var(--sp-surface-mq-hover);
      border-color: var(--sp-accent-border);
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 6px 16px rgba(0, 0, 0, 0.07),
        0 12px 32px rgba(0, 0, 0, 0.05);
      transform: translateY(-1px);
    }

    .modal-list-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .modal-list-title {
      font-family: 'Nothing You Could Do', cursive;
      font-size: 16px;
      color: var(--sp-list-title);
      -webkit-text-stroke: 0.3px var(--sp-list-title);
    }

    .modal-list-date {
      font-size: 11px;
      color: var(--sp-list-date);
    }

    .modal-list-delete {
      position: absolute;
      top: -12px;
      right: -15.5px;
      width: 36px;
      height: 36px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.2s ease;
      font-size: 0;
      color: transparent;
    }

    .modal-list li:hover .modal-list-delete {
      opacity: 1;
    }

    .modal-list-delete::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 28px 28px 0;
      border-color: transparent var(--sp-peel) transparent transparent;
      transition: border-width 0.25s ease, border-color 0.2s ease;
      filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.12));
    }

    .modal-list li:hover .modal-list-delete::before {
      border-width: 0 32px 32px 0;
    }

    .modal-list-delete:hover::before {
      border-color: transparent var(--sp-peel-delete-hover) transparent transparent;
    }

    .modal-list-delete::after {
      content: '\00d7';
      position: absolute;
      top: 3px;
      right: 5px;
      font-size: 13px;
      color: transparent;
      transition: color 0.2s ease;
      line-height: 1;
    }

    .modal-list-delete:hover::after {
      color: rgba(255, 255, 255, 0.95);
    }

    @keyframes tearAway {
      0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
        max-height: 80px;
        margin-bottom: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
      }
      40% {
        transform: translateX(30px) rotate(3deg);
        opacity: 0.7;
      }
      100% {
        transform: translateX(200px) rotate(8deg);
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
      }
    }

    .modal-list li.tearing {
      animation: tearAway 0.4s ease-in forwards;
      pointer-events: none;
      overflow: visible;
    }

    .modal-empty {
      color: var(--sp-label-muted);
      font-style: italic;
      font-size: 13px;
      font-family: "Computer Modern Serif", serif;
      text-align: center;
      padding: 20px;
    }

    .modal-actions {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .modal-actions button {
      width: 34px;
      height: 34px;
      border: 1.5px solid var(--sp-border);
      border-radius: 6px;
      background: var(--sp-surface);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
      color: var(--sp-toolbar-btn-color);
    }

    .modal-actions button .btn-icon {
      width: 18px;
      height: 18px;
      pointer-events: none;
    }

    .modal-actions button:hover {
      border-color: var(--sp-accent);
      background: var(--sp-surface-hover);
    }

    .modal-actions button:active {
      transform: scale(0.95);
    }

    /* ───── Content area ───── */
    /* ───── Editor layout (side-by-side with drawing panel) ───── */
    .editor-layout {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .editor-column {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .editor-column::after {
      content: '';
      position: absolute;
      inset: 0;
      box-shadow: var(--sp-vignette);
      pointer-events: none;
      z-index: 4;
    }

    .lines-container {
      flex: 1;
      overflow-y: auto;
      padding: 24px 0;
      position: relative;
      scrollbar-width: none;
    }

.lines-container::-webkit-scrollbar { width: 0; height: 0; }


    .lines-container::before {
      content: '';
      position: absolute;
      inset: -6%;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      background-position: center;
      opacity: var(--sp-paper-container-opacity);
      transform: rotate(-2.5deg) scale(var(--paper-scale, 1)) translate(-12px, 8px);
      transform-origin: center;
      pointer-events: none;
      z-index: 0;
      mix-blend-mode: var(--sp-paper-blend);
    }

    .math-line {
      display: flex;
      align-items: center;
      max-width: 1440px;
      padding: 0 24px;
      position: relative;
      transition: margin-left 0.12s ease;
      margin-bottom: 8px;
      z-index: 1;
    }

    .math-line.continuation {
      margin-top: -8px;
    }

    .math-line.continuation .line-number {
      visibility: hidden;
    }

    .math-line.continuation .mq-wrap {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-top-color: rgba(255, 255, 255, 0.08);
    }

    .math-line.has-continuation .mq-wrap {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-color: transparent;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.04),
        inset 0 -2px 4px rgba(0, 0, 0, 0.06);
    }

    .math-line .line-number {
      width: 28px;
      text-align: right;
      font-family: "Computer Modern Serif", serif;
      font-size: 15px;
      color: var(--sp-label-line-number);
      margin-right: 12px;
      flex-shrink: 0;
      user-select: none;
      text-shadow: var(--sp-text-shadow-line-number);
    }

    /* ───── Math input wraps — frosted glass over graph paper ───── */
    .math-line .mq-wrap {
      flex: 1;
      min-height: 52px;
      display: flex;
      align-items: center;
      border-radius: 8px;
      padding: 8px 14px;
      background: var(--sp-surface-mq);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1.5px solid var(--sp-border-white);
      transition: border-color 0.15s, box-shadow 0.2s, background 0.15s;
      cursor: text;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.04);
    }

    .math-line .mq-wrap::before {
      content: '';
      position: absolute;
      inset: -18%;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      background-position: center;
      opacity: var(--sp-paper-mq-opacity);
      transform: translate(var(--paper-offset-x, -12px), var(--paper-offset-y, 8px));
      pointer-events: none;
      z-index: 0;
    }

    .math-line .mq-wrap > * {
      position: relative;
      z-index: 1;
    }

    .math-line .mq-wrap:hover {
      background: var(--sp-surface-mq-hover);
      border-color: var(--sp-border-white-hover);
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 6px 16px rgba(0, 0, 0, 0.07),
        0 12px 32px rgba(0, 0, 0, 0.05);
    }

    .math-line .mq-wrap.focused {
      background: var(--sp-surface-mq-focus);
      border-color: var(--sp-accent);
      box-shadow:
        0 0 0 3px var(--sp-accent-glow),
        0 2px 6px rgba(79, 143, 247, 0.10),
        0 8px 20px rgba(79, 143, 247, 0.12),
        0 12px 36px rgba(0, 0, 0, 0.06);
    }

    .math-line .delete-btn {
      width: 24px;
      height: 24px;
      border: none;
      background: none;
      color: var(--sp-delete-color);
      font-size: 16px;
      cursor: pointer;
      margin-left: 8px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.15s, color 0.15s, box-shadow 0.15s, background 0.15s;
      flex-shrink: 0;
    }

    .math-line:hover .delete-btn {
      opacity: 1;
    }

    .math-line .delete-btn:hover {
      color: var(--sp-delete-hover-color);
      background: var(--sp-delete-hover-bg);
      box-shadow: 0 1px 4px rgba(228, 68, 68, 0.15);
    }

    /* MathQuill overrides */
    .mq-wrap .mq-editable-field {
      border: none !important;
      box-shadow: none !important;
      font-size: 27px;
      width: 100%;
      text-align: left;
    }


    .mq-wrap .mq-editable-field .mq-cursor {
      border-left-color: var(--sp-mq-cursor);
    }

    .mq-wrap .mq-editable-field.mq-focused {
      box-shadow: none !important;
    }

    /* ───── Contour integral circle/oval overlays ───── */
    .mq-oint > big,
    .mq-oiint > big,
    .mq-oiiint > big {
      position: relative;
    }
    .mq-oint > big::after,
    .mq-oiint > big::after,
    .mq-oiiint > big::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      border: 0.03em solid currentColor;
      border-radius: 50%;
      pointer-events: none;
    }
    .mq-oint > big::after {
      width: 0.27em;
      height: 0.27em;
      transform: translate(-50%, -50%) scaleX(1.43);
    }
    .mq-oiint > big::after {
      width: 0.52em;
      height: 0.27em;
      border-radius: 9999px;
      transform: translate(-50%, -50%) scaleX(1.43);
    }
    .mq-oiiint > big::after {
      width: 0.72em;
      height: 0.27em;
      border-radius: 9999px;
      transform: translate(-50%, -50%) scaleX(1.43);
    }

    /* ───── Collapse empty bounds on integrals ───── */
    /* .mq-sub and .mq-sup-inner ARE the block elements that get .mq-empty */
    .mq-int > .mq-supsub > .mq-sup > .mq-sup-inner.mq-empty {
      padding: 0 !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    .mq-int > .mq-supsub > .mq-sub.mq-empty {
      padding: 0 !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    /* Collapse the whole supsub + zero-width spacer when both bounds are empty */
    .mq-int > .mq-supsub:has(> .mq-sup > .mq-sup-inner.mq-empty):has(> .mq-sub.mq-empty) {
      width: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }
    .mq-int > .mq-supsub:has(> .mq-sup > .mq-sup-inner.mq-empty):has(> .mq-sub.mq-empty) > span[style] {
      display: none !important;
    }

    /* ───── Collapse empty bounds on sum/prod/coprod ───── */
    /* .mq-to > span and .mq-from > span ARE the block elements */
    .mq-large-operator > .mq-to:has(> .mq-empty) {
      width: 0 !important;
      height: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }
    .mq-large-operator > .mq-from:has(> .mq-empty) {
      width: 0 !important;
      height: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    /* ───── Evaluation bar ───── */
    .mq-eval {
      display: inline-block;
      vertical-align: middle;
    }
    .mq-eval .mq-eval-bar {
      font-size: 1.3em;
      line-height: 1;
      vertical-align: middle;
      margin-right: 1px;
    }
    .mq-eval > .mq-supsub > .mq-sup > .mq-sup-inner.mq-empty {
      padding: 0 !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    .mq-eval > .mq-supsub > .mq-sub.mq-empty {
      padding: 0 !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    .mq-eval > .mq-supsub:has(> .mq-sup > .mq-sup-inner.mq-empty):has(> .mq-sub.mq-empty) {
      width: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }
    .mq-eval > .mq-supsub:has(> .mq-sup > .mq-sup-inner.mq-empty):has(> .mq-sub.mq-empty) > span[style] {
      display: none !important;
    }

    /* ───── Matrix ───── */
    .mq-matrix {
      display: -moz-inline-box;
      display: inline-block;
      vertical-align: middle;
      padding: 0px 2px;
      margin: 0 2px;
      position: relative;
    }
    .mq-matrix-table {
      border-collapse: collapse;
      display: inline-table;
      vertical-align: top;
      margin: 0 5px; /* space for brackets */
    }
    .mq-matrix-row {
      /* just a tr */
    }
    .mq-matrix-cell {
      padding: 2px 6px;
      text-align: center;
      min-width: 1em;
      vertical-align: middle;
    }
    .mq-matrix-cell > span {
      min-width: 0.8em;
      display: inline-block;
    }
    .mq-matrix-bracket {
      position: absolute;
      top: 0;
      display: flex;
      flex-direction: column;
      width: 5px;
    }
    .mq-matrix-lbracket {
      left: 0;
    }
    .mq-matrix-rbracket {
      right: 0;
    }
    .mq-matrix-lbracket .mq-bracket-top {
      border-left: 1.8px solid currentColor;
      border-top: 1.8px solid currentColor;
      height: 4px;
    }
    .mq-matrix-lbracket .mq-bracket-mid {
      border-left: 1.8px solid currentColor;
      flex: 1;
    }
    .mq-matrix-lbracket .mq-bracket-bot {
      border-left: 1.8px solid currentColor;
      border-bottom: 1.8px solid currentColor;
      height: 4px;
    }
    .mq-matrix-rbracket .mq-bracket-top {
      border-right: 1.8px solid currentColor;
      border-top: 1.8px solid currentColor;
      height: 4px;
    }
    .mq-matrix-rbracket .mq-bracket-mid {
      border-right: 1.8px solid currentColor;
      flex: 1;
    }
    .mq-matrix-rbracket .mq-bracket-bot {
      border-right: 1.8px solid currentColor;
      border-bottom: 1.8px solid currentColor;
      height: 4px;
    }
    /* Round bracket (pmatrix) overrides */
    .mq-matrix-round .mq-matrix-bracket {
      width: 5px;
    }
    .mq-matrix-round .mq-bracket-top,
    .mq-matrix-round .mq-bracket-mid,
    .mq-matrix-round .mq-bracket-bot {
      display: none;
    }
    .mq-matrix-round .mq-matrix-lbracket {
      border-left: 1.8px solid currentColor;
      border-radius: 50%;
    }
    .mq-matrix-round .mq-matrix-rbracket {
      border-right: 1.8px solid currentColor;
      border-radius: 50%;
    }
    /* Vertical bar bracket (vmatrix / determinant) */
    .mq-matrix-vbar .mq-bracket-top,
    .mq-matrix-vbar .mq-bracket-mid,
    .mq-matrix-vbar .mq-bracket-bot {
      display: none;
    }
    .mq-matrix-vbar .mq-matrix-lbracket {
      border-left: 1.8px solid currentColor;
      width: 3px;
    }
    .mq-matrix-vbar .mq-matrix-rbracket {
      border-right: 1.8px solid currentColor;
      width: 3px;
    }
    /* No brackets (plain matrix) */
    .mq-matrix-none .mq-matrix-bracket {
      display: none;
    }
    .mq-matrix-none .mq-matrix-table {
      margin: 0;
    }

    /* Superscript on matrix: position above instead of vertically centered */
    .mq-matrix + .mq-supsub {
      vertical-align: top;
    }

    /* Empty line placeholder */
    .mq-wrap .mq-editable-field.mq-empty::after {
      content: "Type math here...";
      color: var(--sp-text-placeholder-mq);
      font-style: italic;
      font-size: 20px;
      position: absolute;
      pointer-events: none;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* ───── Add-line area ───── */
    .add-line-area {
      max-width: 1440px;
      padding: 4px 24px 40px;
    }

    .add-line-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      margin-left: 40px;
      border: 1.5px dashed var(--sp-addline-border);
      border-radius: 8px;
      background: var(--sp-surface);
      color: var(--sp-addline-text);
      font-size: 13px;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.2s;
      width: calc(100% - 40px);
    }

    .add-line-btn:hover {
      border-color: var(--sp-accent);
      color: var(--sp-accent);
      background: var(--sp-surface-hover);
      box-shadow:
        0 2px 6px rgba(79, 143, 247, 0.1),
        0 4px 14px rgba(0, 0, 0, 0.04);
    }

    /* ───── Footer hint ───── */
    .keyboard-hint {
      font-size: 11px;
      color: var(--sp-hint-text);
      padding: 0 24px 12px;
      max-width: 1440px;
      text-align: left;
      text-shadow: var(--sp-hint-shadow);
    }

    /* Square root — close gap between radical checkmark and the vinculum (top bar) */
    .mq-math-mode .mq-sqrt-stem {
      margin-top: 1px;
      margin-left: -0.5px;
      padding-top: 2px;
    }

    /* Hat accent — caret drawn with CSS borders, like \overline uses border-top */
    .mq-math-mode .mq-hat {
      padding-top: 0.1em;
    }
    .mq-math-mode .mq-hat:before {
      display: block;
      position: relative;
      top: 0.3em;
      line-height: 0;
      content: '\02C6';
      text-align: center;
      font-size: 0.9em;
    }

    /* Dot accents — dots drawn with CSS ::before pseudo-element */
    .mq-math-mode .mq-dot-accent,
    .mq-math-mode .mq-ddot-accent {
      padding-top: 0.1em;
    }
    .mq-math-mode .mq-dot-accent:before {
      display: block;
      position: relative;
      top: 0.25em;
      line-height: 0;
      content: '\02D9';
      text-align: center;
      font-size: 1em;
    }
    .mq-math-mode .mq-ddot-accent:before {
      display: block;
      position: relative;
      top: 0.25em;
      line-height: 0;
      content: '\00A8';
      text-align: center;
      font-size: 0.9em;
    }

    /* ───── Shortcut reference panel ───── */
    .shortcut-panel-overlay {
      position: fixed;
      inset: 0;
      background: var(--sp-overlay);
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .shortcut-panel-overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .shortcut-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 400px;
      background-color: var(--sp-bg);
      background-image:
        linear-gradient(var(--sp-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--sp-grid-color) 1px, transparent 1px);
      background-size: 32px 32px;
      z-index: 51;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.25s ease;
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      padding-left: 40px;
    }

    .shortcut-panel.visible {
      transform: translateX(0);
    }

    .shortcut-panel::before {
      content: '';
      position: absolute;
      inset: -5%;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      opacity: var(--sp-paper-shortcut-opacity);
      pointer-events: none;
      mix-blend-mode: var(--sp-paper-blend);
      z-index: 0;
    }

    .shortcut-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--grain);
      background-size: 200px 200px;
      opacity: var(--sp-grain-opacity);
      pointer-events: none;
      z-index: 0;
    }

    .shortcut-panel > * {
      position: relative;
      z-index: 1;
    }

    .shortcut-panel-holes {
      position: absolute;
      left: 30px;
      top: 0;
      bottom: 0;
      width: 0;
      z-index: 3;
      pointer-events: none;
    }

    .shortcut-panel-holes .hole {
      position: absolute;
      left: 50%;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--sp-hole-bg);
      box-shadow:
        var(--sp-hole-shadow-in),
        var(--sp-hole-shadow-out);
      flex-shrink: 0;
      transform: translateX(-50%);
    }

    .shortcut-panel-holes .hole:nth-child(1) { top: calc(12.5% - 16px); }
    .shortcut-panel-holes .hole:nth-child(2) { top: calc(50% - 16px); }
    .shortcut-panel-holes .hole:nth-child(3) { top: calc(87.5% - 16px); }

    .shortcut-panel-header {
      padding: 20px 20px 0;
      position: relative;
      flex-shrink: 0;
    }

    .shortcut-panel-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .shortcut-panel-title-row h2 {
      font-family: "Computer Modern Serif", serif;
      font-size: 20px;
      color: var(--sp-label);
      margin: 0;
      flex-shrink: 0;
      text-shadow: var(--sp-text-shadow-label);
    }

    .shortcut-panel-close {
      background: none;
      border: none;
      color: var(--sp-label-line-number);
      font-size: 20px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: color 0.15s, background 0.15s;
      line-height: 1;
      flex-shrink: 0;
      margin-left: auto;
    }

    .shortcut-panel-close:hover {
      color: var(--sp-text-secondary);
      background: var(--sp-dropdown-hover);
    }

    .shortcut-search {
      flex: 1;
      padding: 8px 12px;
      border: 1.5px solid var(--sp-border);
      border-radius: 6px;
      background: var(--sp-surface);
      color: var(--sp-text-secondary);
      font-size: 13px;
      outline: none;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      position: relative;
      z-index: 1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .shortcut-search::placeholder {
      color: var(--sp-text-placeholder);
    }

    .shortcut-search:focus {
      border-color: var(--sp-accent);
      background: var(--sp-surface-hover);
      box-shadow: 0 0 0 3px var(--sp-accent-glow-subtle);
    }

    .shortcut-panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px 24px;
      scrollbar-width: none;
      position: relative;
    }

    .shortcut-panel-body::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .shortcut-group {
      margin-bottom: 20px;
    }

    .shortcut-group-title {
      font-family: "Computer Modern Serif", serif;
      font-size: 13px;
      color: var(--sp-label-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--sp-border-lighter);
      margin-bottom: 8px;
      text-shadow: var(--sp-text-shadow-label-subtle);
    }

    .shortcut-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-radius: 6px;
      transition: border-color 0.15s, box-shadow 0.2s, background 0.15s;
      background: var(--sp-surface-hover);
      border: 1px solid var(--sp-border-white);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.04);
      margin-bottom: 4px;
      position: relative;
      overflow: hidden;
    }

    .shortcut-item::before {
      content: '';
      position: absolute;
      inset: -20%;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      background-position: center;
      opacity: var(--sp-paper-shortcut-opacity);
      transform: translate(var(--paper-offset-x, 0px), var(--paper-offset-y, 0px));
      pointer-events: none;
      z-index: 0;
    }

    .shortcut-item > * {
      position: relative;
      z-index: 1;
    }

    .shortcut-item:hover {
      background: var(--sp-surface-mq-hover);
      border-color: var(--sp-accent-border-subtle);
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .shortcut-keys {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .shortcut-keys kbd {
      display: inline-block;
      padding: 2px 7px;
      font-family: "SF Mono", "Consolas", "Monaco", monospace;
      font-size: 11.5px;
      color: var(--sp-text-secondary);
      background: var(--sp-kbd-bg);
      border: 1px solid var(--sp-kbd-border);
      border-radius: 4px;
      box-shadow: 0 1px 0 var(--sp-kbd-shadow);
      line-height: 1.4;
      white-space: nowrap;
    }

    .shortcut-desc {
      font-size: 12.5px;
      color: var(--sp-text-muted);
      text-align: right;
      margin-left: 12px;
    }

    .shortcut-no-results {
      color: var(--sp-text-faint);
      font-style: italic;
      font-size: 13px;
      text-align: center;
      padding: 20px;
      display: none;
    }

    .shortcut-compact {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 6px 0;
    }

    .shortcut-compact .shortcut-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      background: var(--sp-surface-hover);
      border: 1px solid var(--sp-border-white);
      border-radius: 5px;
      font-size: 11.5px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
      position: relative;
      overflow: hidden;
    }

    .shortcut-compact .shortcut-chip::before {
      content: '';
      position: absolute;
      inset: -20%;
      background-image: url('assets/textures/paper.webp');
      background-size: cover;
      background-position: center;
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }

    .shortcut-compact .shortcut-chip > * {
      position: relative;
      z-index: 1;
    }

    .shortcut-compact .shortcut-chip:hover {
      border-color: var(--sp-accent-border-subtle);
    }

    .shortcut-compact .shortcut-chip kbd {
      display: inline-block;
      padding: 1px 5px;
      font-family: "SF Mono", "Consolas", "Monaco", monospace;
      font-size: 10.5px;
      color: var(--sp-text-secondary);
      background: var(--sp-kbd-bg);
      border: 1px solid var(--sp-kbd-border);
      border-radius: 3px;
      box-shadow: 0 1px 0 var(--sp-kbd-shadow);
      line-height: 1.4;
      white-space: nowrap;
    }

    .shortcut-compact .chip-desc {
      color: var(--sp-text-faint);
      font-size: 10.5px;
    }

    .shortcut-hint {
      font-size: 11.5px;
      color: var(--sp-label-muted);
      font-style: italic;
      padding: 2px 0 4px;
    }

    /* Inline kbd within shortcut hints (moved from inline style) */
    .shortcut-hint kbd {
      display: inline-block;
      padding: 1px 5px;
      font-family: 'SF Mono', 'Consolas', monospace;
      font-size: 10.5px;
      color: var(--sp-text-secondary);
      background: var(--sp-kbd-bg);
      border: 1px solid var(--sp-kbd-border);
      border-radius: 3px;
      box-shadow: 0 1px 0 var(--sp-kbd-shadow);
    }

    /* ───── Drawing panel ───── */
    .drawing-panel {
      display: none;
      flex: 1;
      min-width: 360px;
      max-width: 700px;
      border-left: 1.5px solid var(--sp-border-light);
      position: relative;
      overflow: hidden;
    }

    @media (min-width: 1600px) {
      .drawing-panel.enabled {
        display: flex;
        flex-direction: column;
      }
      .math-line,
      .add-line-area,
      .keyboard-hint {
        max-width: none;
      }
    }

    .drawing-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: var(--sp-toolbar-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1.5px solid var(--sp-border-light);
      flex-shrink: 0;
      z-index: 1;
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
    }

    .drawing-tool-btn {
      width: 34px;
      height: 34px;
      border: 1.5px solid var(--sp-border);
      border-radius: 6px;
      background: var(--sp-surface);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      font-size: 16px;
      color: var(--sp-toolbar-btn-color);
    }

    .drawing-tool-btn:hover {
      border-color: var(--sp-accent);
      background: var(--sp-surface-hover);
    }

    .drawing-tool-btn.active {
      border-color: var(--sp-accent);
      background: var(--sp-accent-bg);
      box-shadow: 0 0 0 2.5px var(--sp-accent-glow-subtle);
      color: var(--sp-accent-text);
    }

    .drawing-toolbar-sep {
      width: 1px;
      height: 20px;
      background: var(--sp-toolbar-sep);
      margin: 0 2px;
    }

    .drawing-colors {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .drawing-color-btn {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.8);
      background: var(--swatch);
      cursor: pointer;
      padding: 0;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
      transition: box-shadow 0.15s, transform 0.15s;
    }

    .drawing-color-btn:hover {
      transform: scale(1.15);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    }

    .drawing-color-btn.active {
      box-shadow: 0 0 0 2px rgba(79, 143, 247, 0.6);
      transform: scale(1.1);
    }

    .drawing-action-btn {
      width: 34px;
      height: 34px;
      border: 1.5px solid var(--sp-border);
      border-radius: 6px;
      background: var(--sp-surface);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--sp-toolbar-btn-color);
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
    }

    .drawing-action-btn:hover {
      border-color: var(--sp-accent);
      background: var(--sp-surface-hover);
    }

    .drawing-action-btn:active {
      transform: scale(0.95);
    }

    #drawing-clear {
      margin-left: auto;
    }

    #drawing-clear:hover {
      color: #e06050;
      border-color: #e06050;
      background: rgba(224, 96, 80, 0.08);
    }

    #drawing-clear:active {
      color: #c84030;
      transform: scale(0.95);
    }

    .drawing-canvas-wrap {
      flex: 1;
      position: relative;
      overflow-y: auto;
      overflow-x: hidden;
      background: var(--sp-canvas-bg);
      scrollbar-width: none;
    }

    .drawing-canvas-wrap::-webkit-scrollbar { width: 0; height: 0; }

    .drawing-canvas-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: var(--canvas-h, 100%);
      background-image: url('assets/textures/paper.webp');
      background-size: 110% auto;
      background-repeat: repeat-y;
      background-position: center top;
      opacity: 0.3;
      pointer-events: none;
      z-index: 0;
    }

    .drawing-canvas-wrap canvas {
      display: block;
      position: relative;
      z-index: 1;
      touch-action: none;
      cursor: crosshair;
    }

    .drawing-tool-btn.active[data-tool="eraser"] ~ .drawing-canvas-wrap canvas,
    .drawing-panel.eraser-active canvas {
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, crosshair;
    }

    /* ═══ Settings Modal ═══ */
    .settings-modal {
      min-width: 400px;
      max-width: 460px;
    }

    .settings-title {
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 20px;
      color: var(--sp-text);
      margin: 0 0 20px 0;
      font-weight: normal;
    }

    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid var(--sp-border-lighter);
    }

    .settings-row:last-of-type {
      border-bottom: none;
    }

    .settings-label {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .settings-name {
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 15px;
      color: var(--sp-text);
    }

    .settings-desc {
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 12px;
      color: var(--sp-text-muted);
    }

    /* Toggle Switch */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-track {
      position: absolute;
      inset: 0;
      background: var(--sp-border);
      border-radius: 12px;
      transition: background 0.25s ease;
    }

    .toggle-track::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: var(--sp-dropdown-bg);
      border-radius: 50%;
      transition: transform 0.25s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .toggle-switch input:checked + .toggle-track {
      background: var(--sp-brown);
    }

    .toggle-switch input:checked + .toggle-track::before {
      transform: translateX(20px);
    }

    /* ───── Feedback button ───── */
    .feedback-btn {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 34px;
      height: 34px;
      border: 1.5px solid var(--sp-border);
      border-radius: 6px;
      background: var(--sp-surface);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.15s;
      color: var(--sp-toolbar-btn-color);
      z-index: 10;
      opacity: 0.65;
      padding: 0;
      transform: scale(1.3);
    }

    .feedback-btn::after {
      content: 'Send Feedback';
      position: absolute;
      left: 100%;
      margin-left: 6px;
      white-space: nowrap;
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 12px;
      color: var(--sp-toolbar-btn-color);
      background: var(--sp-surface-hover);
      border: 1.5px solid var(--sp-border);
      border-radius: 4px;
      padding: 4px 10px;
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 0.2s, transform 0.2s;
      pointer-events: none;
    }

    .feedback-btn:hover {
      border-color: var(--sp-accent);
      background: var(--sp-surface-hover);
      opacity: 1;
      transform: scale(1.4);
    }

    .feedback-btn:hover::after {
      opacity: 1;
      transform: translateX(0);
    }

    /* ───── Feedback modal ───── */
    #feedback-modal .modal {
      min-width: 570px;
      max-width: 630px;
    }

    .feedback-title {
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 20px;
      color: var(--sp-label-warm);
      text-align: center;
      margin-bottom: 20px;
      text-shadow: var(--sp-text-shadow-label);
    }

    .feedback-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 16px;
    }

    .feedback-field label {
      font-family: 'Computer Modern Serif', serif;
      font-size: 13px;
      color: var(--sp-label);
      text-shadow: var(--sp-text-shadow-label);
    }

    .feedback-field textarea {
      padding: 10px 14px;
      border: 1.5px solid var(--sp-border);
      border-radius: 2px;
      background: var(--sp-surface-hover);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 14px;
      color: var(--sp-text);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      resize: vertical;
      min-height: 80px;
      max-height: 200px;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.05);
    }

    .feedback-field textarea:focus {
      border-color: var(--sp-brown-focus-border);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.05),
        0 0 0 3px var(--sp-brown-focus-glow);
    }

    .feedback-field textarea::placeholder {
      color: var(--sp-text-placeholder);
    }

    .feedback-message {
      font-family: 'Computer Modern Serif', serif;
      font-size: 13px;
      color: var(--sp-error);
      background: var(--sp-error-bg);
      border: 1px solid var(--sp-error-border);
      border-radius: 6px;
      padding: 8px 12px;
      margin-bottom: 12px;
      display: none;
    }

    .feedback-message.success {
      color: var(--sp-success);
      background: var(--sp-success-bg);
      border-color: var(--sp-success-border);
    }

    @media (max-width: 600px) {
      .shortcut-panel {
        width: 100%;
      }
      .modal {
        min-width: auto;
        max-width: calc(100vw - 32px);
      }
    }

    /* ───── About modal ───── */
    #about-modal .modal {
      min-width: 480px;
      max-width: 540px;
      padding: 32px 36px 28px;
    }

    .about-title {
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 22px;
      color: var(--sp-label-warm);
      text-align: center;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1.5px solid var(--sp-border-light);
      text-shadow: var(--sp-text-shadow-label);
    }

    .about-body {
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 14.5px;
      line-height: 1.7;
      color: var(--sp-about-body);
    }

    .about-body p {
      margin-bottom: 14px;
    }

    .about-body p:last-child {
      margin-bottom: 0;
    }

    .about-body a {
      color: var(--sp-brown);
      text-decoration: underline;
      text-decoration-color: rgba(110, 54, 41, 0.3);
      text-underline-offset: 2px;
      transition: color 0.2s, text-decoration-color 0.2s;
    }

    .about-body a:hover {
      color: var(--sp-brown-hover);
      text-decoration-color: rgba(110, 54, 41, 0.6);
    }

    .about-divider {
      border: none;
      height: 1.5px;
      background: var(--sp-border-light);
      margin: 20px 0;
    }

    .about-signature {
      text-align: right;
      padding-top: 4px;
    }

    .about-signature-svg-wrap {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 4px;
    }

    .about-signature-svg {
      height: 52px;
      width: 204px;  /* matches viewBox aspect ratio 339.33:86.67 ≈ 3.92:1 */
      color: var(--sp-about-sig);
      overflow: visible;
    }

    .about-signature-svg path {
      stroke: currentColor;
      fill: none;
      stroke-linecap: round;
      opacity: 0;
    }

    @keyframes signatureDraw {
      from { opacity: 1; }
      to   { stroke-dashoffset: 0; opacity: 1; }
    }

    .about-signature-subtitle {
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 12px;
      color: var(--sp-about-sig-sub);
      display: block;
      text-shadow: var(--sp-text-shadow-label-subtle);
    }

    .about-donate {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 16px;
      padding: 9px 20px;
      border: none;
      border-radius: 4px;
      background: var(--sp-brown);
      color: var(--sp-brown-text);
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
      text-decoration: none;
      text-shadow:
        0 -1px 1px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.12);
      position: relative;
      overflow: hidden;
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 3px 8px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .about-donate::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--grain);
      background-size: 100px 100px;
      opacity: 0.15;
      pointer-events: none;
      mix-blend-mode: overlay;
    }

    .about-donate:hover {
      background: var(--sp-brown-hover);
    }

    .about-donate:active {
      transform: scale(0.98);
      background: var(--sp-brown-active);
    }

    .about-donate-heart {
      width: 16px;
      height: 16px;
      position: relative;
      z-index: 1;
      filter: brightness(0) invert(90%) sepia(10%) saturate(300%) hue-rotate(340deg);
    }

    .about-donate-text {
      position: relative;
      z-index: 1;
    }

    .about-donate-row {
      text-align: center;
      margin-top: 20px;
    }

    /* ───── Responsive header ───── */
    @media (max-width: 1100px) {
      .pad-title {
        max-width: 500px;
      }
    }

    @media (max-width: 960px) {
      .pad-title {
        max-width: 350px;
      }
    }

    @media (max-width: 860px) {
      header {
        padding: 10px 14px;
        gap: 6px;
      }
      .header-actions {
        gap: 4px;
      }
      .header-actions button {
        width: 40px;
        height: 40px;
        transform: scale(0.82);
      }
      .header-actions > button:hover {
        transform: scale(0.82) rotate(8deg);
      }
      .header-actions > button:active,
      .header-actions > div > button:active {
        transform: scale(0.75);
      }
      .header-actions .auth-btn:hover {
        transform: scale(0.82) rotate(8deg);
      }
      .header-actions .about-btn:hover {
        transform: scale(0.82) rotate(8deg);
      }
      .pad-title {
        font-size: 20px;
        padding: 4px 6px;
        max-width: 200px;
      }
    }

    @media (max-width: 720px) {
      .pad-title {
        max-width: 160px;
      }
    }

    @media (max-width: 620px) {
      header {
        padding: 8px 10px;
        gap: 4px;
      }
      .header-actions {
        gap: 2px;
      }
      .header-actions button {
        width: 34px;
        height: 34px;
        transform: scale(0.85);
      }
      .header-actions > button:hover {
        transform: scale(0.85) rotate(8deg);
      }
      .header-actions .auth-btn:hover {
        transform: scale(0.85) rotate(8deg);
      }
      .header-actions .about-btn:hover {
        transform: scale(0.85) rotate(8deg);
      }
      .header-actions button .btn-icon {
        width: 16px;
        height: 16px;
      }
      .header-logo {
        height: 32px;
      }
      .pad-title {
        font-size: 16px;
        padding: 3px 4px;
        max-width: 120px;
      }
      .header-auth-sep {
        margin: 0 2px;
      }
    }

    @media (max-width: 480px) {
      .pad-title {
        display: none;
      }
      header {
        gap: 2px;
        padding: 8px 8px;
      }
    }

    /* ───── Mobile banner ───── */
    .mobile-banner {
      display: none;
      position: fixed;
      bottom: 8px;
      left: 20px;
      z-index: 9;
      background: var(--sp-banner-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1.5px solid var(--sp-border);
      border-radius: 6px;
      padding: 10px 34px 10px 12px;
      font-family: 'Computer Modern Serif', 'CMU Serif', Georgia, serif;
      font-size: 13px;
      color: var(--sp-label-warm);
      max-width: calc(100vw - 40px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .mobile-banner-close {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--sp-banner-close);
      font-size: 18px;
      line-height: 1;
      padding: 4px 6px;
    }

    @media (max-width: 768px) and (pointer: coarse) {
      .mobile-banner {
        display: block;
      }
      .feedback-btn {
        bottom: 60px;
      }
    }