/*
 * URN v21
 * One deterministic visual layer. No incremental overrides.
 *
 * Invariants:
 * - the paper stays centered and persistent
 * - the format toolbar lives just outside the paper's right edge
 * - toolbar and paper share #zoomwrap, so camera zoom carries both
 * - the toolbar tucks under the paper without fading
 * - legacy rails and doodles do not affect this launch-stage layout
 */

body[data-v21="true"],
body[data-v22="true"] {
  --v21-field: #f7f4ed;
  --v21-field-depth: #ece6da;
  --v22-field: #f7f4ed;
  --v22-field-depth: #ece6da;
  --v21-warm-light: rgba(255, 248, 226, 0.34);
  --v21-atmosphere:
    linear-gradient(128deg, rgba(255,255,255,.16), transparent 42% 72%, rgba(112,96,79,.035));
  --v21-user-background: var(--v21-atmosphere);
  --urn-bg-depth-layer: rgba(0,0,0,0);
  --urn-bg-light-layer: rgba(255,255,255,0);
  --urn-bg-contrast: 1.04;
  --urn-bg-brightness: 1;
  --v21-accent: #b08d57;
  --v21-accent-bright: #ff9000;
  --v21-chrome: rgba(250, 248, 240, 0.72);
  --v21-chrome-line: rgba(54, 49, 44, 0.10);
  --v21-ink: #2b2226;
  /* Canonical Display & Experience primitives. Keep menu/module controls on
     these shared surfaces instead of inventing one-off wells and indicators. */
  --xd-control-radius: 9px;
  --xd-thumb-size: 14px;
  --xd-thumb-fill: #fff;
  --xd-thumb-border: rgba(20, 20, 18, .28);
  --xd-thumb-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  --xd-sample-surface: #fff;
  --xd-sample-border: rgba(55, 65, 51, .10);
  --xd-paper-bg: #f6f7f2;
  --xd-paper-hover: #eff2e9;
  --xd-paper-border: #d6dbd0;
  --xd-paper-ink: #34382f;
  --xd-paper-open: #e8ece2;
  --xd-paper-open-border: #aeb9aa;
  --xd-paper-open-ink: #252b23;
  --xd-words-bg: #f2f4f5;
  --xd-words-hover: #e8edef;
  --xd-words-border: #d2d9dc;
  --xd-words-ink: #303942;
  --xd-words-open: #dce3e7;
  --xd-words-open-border: #9daab2;
  --xd-words-open-ink: #222a30;
  --xd-bg-bg: #f2f6f1;
  --xd-bg-hover: #e8f0e6;
  --xd-bg-border: #d0dbce;
  --xd-bg-ink: #303c2f;
  --xd-bg-open: #dce8d9;
  --xd-bg-open-border: #9eb19a;
  --xd-bg-open-ink: #243022;
  --xd-themes-bg: #f3f5f1;
  --xd-themes-hover: #e9eee6;
  --xd-themes-border: #d2d9cf;
  --xd-themes-ink: #323b30;
  --xd-themes-open: #dee7db;
  --xd-themes-open-border: #a1b09d;
  --xd-themes-open-ink: #263123;
  --v21-toolbar-width: 40px;
  --v21-toolbar-gap: 9px;
  /* Fast through the middle; a short ease-in and a long drift at the end.
     A cubic (not a many-stop linear) so the velocity has no kinks. */
  --v21-stage-duration: 580ms;
  --v21-stage-ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --v21-camera-duration: var(--v21-stage-duration);
  --v21-camera-ease: var(--v21-stage-ease);

  --v21-live-field: color-mix(in srgb, var(--paper) calc(var(--glassiness, 0) * 100%), var(--v21-field));
  --v21-live-field-depth: color-mix(in srgb, var(--paper) calc(var(--glassiness, 0) * 100%), var(--v21-field-depth));
  --bg: var(--v21-live-field);
  --bg-deep: var(--v21-live-field-depth);
  background:
    linear-gradient(var(--urn-bg-light-layer), var(--urn-bg-light-layer)),
    linear-gradient(var(--urn-bg-depth-layer), var(--urn-bg-depth-layer)),
    var(--v21-user-background),
    radial-gradient(
      calc(80% + var(--v21-elastic, 0) * 0.45%) calc(42% - var(--v21-elastic, 0) * 0.18%)
      at calc(18% + var(--v21-elastic, 0) * 0.22%) calc(-4% + var(--v21-elastic, 0) * 0.28%),
      var(--v21-warm-light), transparent 68%
    ),
    radial-gradient(
      calc(128% - var(--v21-elastic, 0) * 0.25%) calc(105% + var(--v21-elastic, 0) * 0.35%)
      at calc(50% - var(--v21-elastic, 0) * 0.12%) calc(38% + var(--v21-elastic, 0) * 0.18%),
      transparent 48%,
      rgba(43, 58, 39, calc(0.10 + var(--v21-elastic, 0) * 0.0018)) 100%
    ),
    var(--v21-live-field);
}

/* Palette systems: existing Place IDs, reframed as restrained color modes. */
body[data-v21="true"][data-theme="meadow"] {
  --v21-field: #edf6ec;
  --v21-field-depth: #dce9da;
  --v21-accent: #6f9a68;
  --v21-accent-bright: #55ef63;
}
body[data-v21="true"][data-theme="cafe"] {
  --v21-field: #f1e9df;
  --v21-field-depth: #dfd0c0;
  --v21-accent: #9b755b;
  --v21-accent-bright: #eb8b48;
}
body[data-v21="true"][data-theme="sea"] {
  --v21-field: #eef5f7;
  --v21-field-depth: #dbe9ee;
  --v21-accent: #63899b;
  --v21-accent-bright: #56c7ee;
}
body[data-v21="true"][data-theme="study"] {
  --v21-field: #eeeae2;
  --v21-field-depth: #d8d0c3;
  --v21-accent: #786c57;
  --v21-accent-bright: #d1a752;
}
body[data-v21="true"][data-theme="dawn"] {
  --v21-field: #f7f3ea;
  --v21-field-depth: #ebe2d3;
  --v21-accent: #a1896d;
  --v21-accent-bright: #f0b66c;
}
body[data-v21="true"][data-theme="dusk"] {
  --v21-field: #f4edf2;
  --v21-field-depth: #e5d7df;
  --v21-accent: #9d718b;
  --v21-accent-bright: #e977bd;
}
body[data-v21="true"][data-theme="loft"] {
  --v21-field: #eef0f0;
  --v21-field-depth: #d7dcdd;
  --v21-accent: #718083;
  --v21-accent-bright: #86d9df;
}
body[data-v21="true"][data-theme="lighthouse"],
body[data-v21="true"].night:not([data-theme]) {
  --v21-field: #171d1d;
  --v21-field-depth: #0c1112;
  --v21-warm-light: rgba(203, 188, 142, 0.11);
  --v21-accent: #8ca49d;
  --v21-accent-bright: #b7fff0;
  --v21-chrome: rgba(19, 26, 26, 0.72);
  --v21-chrome-line: rgba(210, 230, 224, 0.10);
  --v21-ink: #d9e3df;
}

/* High-contrast preset families. Each is an authored field / paper / accent
 * relationship, not a tint of the same green system. */
body[data-v21="true"][data-theme="signal"] {
  --v21-field: #eef0e8;
  --v21-field-depth: #d9ddd2;
  --v21-warm-light: rgba(255,255,255,.50);
  --v21-accent: #d83b31;
  --v21-accent-bright: #ff342e;
  --v21-ink: #292d27;
  --v21-atmosphere:
    radial-gradient(70% 76% at 86% 0%, rgba(255,61,48,.10), transparent 68%),
    linear-gradient(124deg, rgba(255,255,255,.28), transparent 48% 75%, rgba(65,78,61,.06));
}
body[data-v21="true"][data-theme="navy"] {
  --v21-field: #15233c;
  --v21-field-depth: #091326;
  --v21-warm-light: rgba(246,220,167,.12);
  --v21-accent: #e8aa45;
  --v21-accent-bright: #ff7a2f;
  --v21-chrome: rgba(14,27,49,.76);
  --v21-chrome-line: rgba(247,239,218,.13);
  --v21-ink: #f4efe4;
  --v21-atmosphere:
    radial-gradient(72% 68% at 18% -6%, rgba(217,166,84,.15), transparent 66%),
    linear-gradient(132deg, rgba(255,255,255,.035), transparent 46% 72%, rgba(0,5,17,.22));
}
body[data-v21="true"][data-theme="cobalt"] {
  --v21-field: #2551b8;
  --v21-field-depth: #143578;
  --v21-warm-light: rgba(255,255,255,.16);
  --v21-accent: #f0d332;
  --v21-accent-bright: #ffe43b;
  --v21-chrome: rgba(25,58,139,.62);
  --v21-chrome-line: rgba(255,255,255,.16);
  --v21-ink: #fffdf4;
  --v21-atmosphere:
    radial-gradient(65% 68% at 82% 6%, rgba(255,232,63,.13), transparent 70%),
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 44% 72%, rgba(6,28,86,.18));
}
body[data-v21="true"][data-theme="oxblood"] {
  --v21-field: #4c121a;
  --v21-field-depth: #26080d;
  --v21-warm-light: rgba(255,225,200,.10);
  --v21-accent: #ef765d;
  --v21-accent-bright: #ff6b54;
  --v21-chrome: rgba(54,12,18,.72);
  --v21-chrome-line: rgba(255,239,226,.12);
  --v21-ink: #fff1e8;
  --v21-atmosphere:
    radial-gradient(74% 68% at 22% -8%, rgba(255,130,94,.13), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 48% 72%, rgba(20,0,3,.20));
}
body[data-v21="true"][data-theme="aubergine"] {
  --v21-field: #2e1939;
  --v21-field-depth: #180d20;
  --v21-warm-light: rgba(222,201,240,.12);
  --v21-accent: #a8d948;
  --v21-accent-bright: #b9ff4c;
  --v21-chrome: rgba(37,19,48,.74);
  --v21-chrome-line: rgba(239,226,249,.12);
  --v21-ink: #f2e8f6;
  --v21-atmosphere:
    radial-gradient(68% 70% at 80% 8%, rgba(185,255,76,.10), transparent 70%),
    linear-gradient(126deg, rgba(255,255,255,.05), transparent 42% 70%, rgba(12,0,19,.20));
}
body[data-v21="true"][data-theme="yellow"] {
  --v21-field: #f0d35d;
  --v21-field-depth: #c5a92f;
  --v21-warm-light: rgba(255,255,238,.42);
  --v21-accent: #2457d6;
  --v21-accent-bright: #1559ff;
  --v21-ink: #292610;
  --v21-atmosphere:
    radial-gradient(70% 62% at 82% 4%, rgba(21,89,255,.12), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 42% 72%, rgba(100,78,0,.08));
}
body[data-v21="true"][data-theme="ice"] {
  --v21-field: #d9eff0;
  --v21-field-depth: #b6d8dc;
  --v21-warm-light: rgba(255,255,255,.54);
  --v21-accent: #e94149;
  --v21-accent-bright: #ff3e45;
  --v21-ink: #173946;
  --v21-atmosphere:
    radial-gradient(65% 70% at 16% -5%, rgba(255,255,255,.48), transparent 66%),
    linear-gradient(128deg, rgba(255,255,255,.15), transparent 44% 72%, rgba(34,110,120,.07));
}
body[data-v21="true"][data-theme="sand"] {
  --v21-field: #ccb992;
  --v21-field-depth: #aa9369;
  --v21-warm-light: rgba(255,250,231,.32);
  --v21-accent: #d94a26;
  --v21-accent-bright: #ef4f24;
  --v21-ink: #332c22;
  --v21-atmosphere:
    repeating-linear-gradient(118deg, rgba(71,53,25,.016) 0 1px, transparent 1px 5px),
    radial-gradient(70% 62% at 20% -4%, rgba(255,245,210,.24), transparent 70%);
}
body[data-v21="true"][data-theme="graphite"] {
  --v21-field: #292d31;
  --v21-field-depth: #16191c;
  --v21-warm-light: rgba(220,236,231,.08);
  --v21-accent: #55c99e;
  --v21-accent-bright: #61f5bf;
  --v21-chrome: rgba(31,35,39,.76);
  --v21-chrome-line: rgba(230,240,236,.11);
  --v21-ink: #eef2f0;
  --v21-atmosphere:
    radial-gradient(72% 68% at 82% 4%, rgba(97,245,191,.09), transparent 68%),
    linear-gradient(134deg, rgba(255,255,255,.035), transparent 46% 72%, rgba(0,0,0,.18));
}
body[data-v21="true"][data-theme="blueprint"] {
  --v21-field: #092d66;
  --v21-field-depth: #031a3f;
  --v21-warm-light: rgba(89,176,255,.15);
  --v21-accent: #42a9d9;
  --v21-accent-bright: #58d8ff;
  --v21-chrome: rgba(5,31,73,.72);
  --v21-chrome-line: rgba(205,235,255,.15);
  --v21-ink: #eaf7ff;
  --paper: #1552a0;
  --paper-ink: #f6fbff;
  --ink-tint: #f6fbff;
  --ink-mix: 100%;
  --sheet-ink: #f6fbff;
  --paper-shade: #082f72;
  --v21-atmosphere:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(112,190,255,.035) 33px 34px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(112,190,255,.035) 33px 34px),
    radial-gradient(90% 72% at 18% -8%, rgba(72,160,255,.18), transparent 62%);
}
/* Historical v15-v17 Blueprint stock, restored under Patrick's spoken name.
   The paper, all screenplay roles, shade, and chrome are exact recovered
   values; the quiet Garden field is the documented room it originally sat in. */
body[data-v21="true"][data-theme="architect"] {
  --v21-field: #f6efe7;
  --v21-field-depth: #efe5da;
  --v21-warm-light: rgba(255, 250, 240, .28);
  --v21-accent: #b4435e;
  --v21-accent-bright: #b4435e;
  --v21-chrome: #0e2433;
  --v21-chrome-line: rgba(232, 241, 245, .18);
  --v21-ink: #e8f1f5;
  --bg: #f6efe7;
  --bg-deep: #efe5da;
  --paper: #1d3a4d;
  --paper-ink: #e8f1f5;
  --kit-ink: #e8f1f5;
  --kit-slug: #e8f1f5;
  --kit-character: #e8f1f5;
  --kit-dialogue: #e8f1f5;
  --kit-selection: #b4435e;
  --ink-tint: #e8f1f5;
  --ink-mix: 100%;
  --sheet-ink: #e8f1f5;
  --paper-shade: #0e2433;
  --paper-tex: none;
  --v21-atmosphere:
    radial-gradient(80% 46% at 18% -6%, rgba(255,255,255,.24), transparent 68%),
    linear-gradient(132deg, rgba(255,255,255,.08), transparent 48% 76%, rgba(14,36,51,.04));
}
body[data-v21="true"][data-theme="ultraviolet"] {
  --v21-field: #32106f;
  --v21-field-depth: #150338;
  --v21-warm-light: rgba(212,172,255,.13);
  --v21-accent: #9b45d2;
  --v21-accent-bright: #b957ff;
  --v21-chrome: rgba(42,11,94,.73);
  --v21-chrome-line: rgba(239,218,255,.14);
  --v21-ink: #f4eaff;
  --paper-ink: #f4eaff; --ink-tint: #f4eaff; --ink-mix: 100%; --sheet-ink: #f4eaff;
  --v21-atmosphere:
    radial-gradient(64% 68% at 76% 22%, rgba(187,88,255,.20), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 45% 70%, rgba(8,0,18,.18));
}
body[data-v21="true"][data-theme="forest"] {
  --v21-field: #17362d;
  --v21-field-depth: #071c16;
  --v21-warm-light: rgba(224,245,191,.11);
  --v21-accent: #a7c83e;
  --v21-accent-bright: #d0f14a;
  --v21-chrome: rgba(13,43,34,.73);
  --v21-chrome-line: rgba(230,245,213,.12);
  --v21-ink: #eef4e6;
  --v21-atmosphere:
    radial-gradient(70% 62% at 12% 8%, rgba(166,210,139,.12), transparent 67%),
    linear-gradient(116deg, rgba(255,255,255,.035), transparent 38%, rgba(0,16,10,.16));
}
body[data-v21="true"][data-theme="terminal"] {
  --v21-field: #07110d;
  --v21-field-depth: #020604;
  --v21-warm-light: rgba(78,255,150,.07);
  --v21-accent: #36c875;
  --v21-accent-bright: #41ff8b;
  --v21-chrome: rgba(5,18,12,.78);
  --v21-chrome-line: rgba(117,255,176,.13);
  --v21-ink: #c9f8db;
  --v21-atmosphere:
    repeating-linear-gradient(0deg, rgba(74,255,147,.018) 0 1px, transparent 1px 4px),
    radial-gradient(72% 65% at 52% 18%, rgba(34,180,94,.10), transparent 72%);
}
body[data-v21="true"][data-theme="magenta"] {
  --v21-field: #eadde6;
  --v21-field-depth: #c8afbe;
  --v21-warm-light: rgba(255,255,255,.38);
  --v21-accent: #9d2bc0;
  --v21-accent-bright: #c12cff;
  --v21-ink: #4d2943;
  --v21-atmosphere:
    radial-gradient(60% 70% at 80% 12%, rgba(193,44,255,.16), transparent 68%),
    linear-gradient(142deg, rgba(255,255,255,.19), transparent 42% 72%, rgba(122,41,104,.10));
}

/* Researched kits: desk / sheet / chrome ink. Dark kits invert chrome. */
body[data-v21="true"][data-theme="bond"] {
  --v21-field: #c8c4bc; --v21-field-depth: #b4b0a8; --v21-ink: #1a1a1a;
  --v21-accent: #3d4a66; --v21-accent-bright: #1f2a44;
  --v21-chrome: rgba(232, 228, 220, 0.88); --v21-chrome-line: rgba(26,26,26,.14);
  --bg: #c8c4bc; --bg-deep: #b4b0a8; --ink: #1a1a1a; --ink-soft: #4a4640; --ink-faint: #7a746c;
  --paper: #ffffff; --paper-ink: #111111;
}
body[data-v21="true"][data-theme="docs"] {
  --v21-field: #e8f0fe; --v21-field-depth: #d2e3fc; --v21-ink: #202124;
  --v21-accent: #1a73e8; --v21-accent-bright: #174ea6;
  --v21-chrome: rgba(255,255,255,0.92); --v21-chrome-line: rgba(32,33,36,.12);
  --bg: #e8f0fe; --bg-deep: #d2e3fc; --ink: #202124; --ink-soft: #5f6368; --ink-faint: #80868b;
  --paper: #ffffff; --paper-ink: #202124;
}
body[data-v21="true"][data-theme="quiet"] {
  --v21-field: #e8e8e8; --v21-field-depth: #d4d4d4; --v21-ink: #333333;
  --v21-accent: #6a737d; --v21-accent-bright: #24292f;
  --v21-chrome: rgba(245,245,245,0.92); --v21-chrome-line: rgba(51,51,51,.12);
  --bg: #e8e8e8; --bg-deep: #d4d4d4; --ink: #333333; --ink-soft: #555555; --ink-faint: #777777;
  --paper: #ffffff; --paper-ink: #222222;
}
/* Curated 2026-08-21: two genuinely light, airy, good-morning rooms. */
body[data-v21="true"][data-theme="morning"] {
  --v21-field: #d9ecfa; --v21-field-depth: #c3ddf0; --v21-ink: #1c3242;
  --v21-accent: #d98b2b; --v21-accent-bright: #a35f0e;
  --v21-chrome: rgba(247, 251, 255, 0.92); --v21-chrome-line: rgba(28,50,66,.12);
  --bg: #d9ecfa; --bg-deep: #c3ddf0; --ink: #1c3242; --ink-soft: #46647a; --ink-faint: #7593a8;
  --paper: #ffffff; --paper-ink: #1c3242;
}
body[data-v21="true"][data-theme="linen"] {
  --v21-field: #f3eee4; --v21-field-depth: #e6dfcf; --v21-ink: #37322a;
  --v21-accent: #7f96ad; --v21-accent-bright: #4c657e;
  --v21-chrome: rgba(252, 250, 245, 0.92); --v21-chrome-line: rgba(55,50,42,.12);
  --bg: #f3eee4; --bg-deep: #e6dfcf; --ink: #37322a; --ink-soft: #5f594e; --ink-faint: #8a8375;
  --paper: #fffdf7; --paper-ink: #37322a;
}
body[data-v21="true"][data-theme="cursor-light"] {
  --v21-field: #f3f3f3; --v21-field-depth: #e4e4e4; --v21-ink: #3b3b3b;
  --v21-accent: #005fb8; --v21-accent-bright: #0f6cbd;
  --v21-chrome: rgba(255,255,255,0.92); --v21-chrome-line: rgba(59,59,59,.12);
  --bg: #f3f3f3; --bg-deep: #e4e4e4; --ink: #3b3b3b; --ink-soft: #616161; --ink-faint: #8a8a8a;
  --paper: #ffffff; --paper-ink: #1f1f1f;
}
body[data-v21="true"][data-theme="legal"] {
  --v21-field: #d4c9a8; --v21-field-depth: #c0b48e; --v21-ink: #1c1a0e;
  --v21-accent: #8a6a28; --v21-accent-bright: #6b5018;
  --v21-chrome: rgba(248, 244, 207, 0.88); --v21-chrome-line: rgba(28,26,14,.14);
  --bg: #d4c9a8; --bg-deep: #c0b48e; --ink: #1c1a0e; --ink-soft: #4a4428; --ink-faint: #7a7050;
  --paper: #f8f4cf; --paper-ink: #1c1a0e;
}
body[data-v21="true"][data-theme="solar-light"] {
  --v21-field: #eee8d5; --v21-field-depth: #e0d5b8; --v21-ink: #073642;
  --v21-accent: #268bd2; --v21-accent-bright: #2aa198;
  --v21-chrome: rgba(253, 246, 227, 0.90); --v21-chrome-line: rgba(7,54,66,.14);
  --bg: #eee8d5; --bg-deep: #e0d5b8; --ink: #073642; --ink-soft: #586e75; --ink-faint: #839496;
  --paper: #fdf6e3; --paper-ink: #073642;
}
body[data-v21="true"][data-theme="github-light"] {
  --v21-field: #f6f8fa; --v21-field-depth: #eaeef2; --v21-ink: #1f2328;
  --v21-accent: #0969da; --v21-accent-bright: #0550ae;
  --v21-chrome: rgba(255,255,255,0.94); --v21-chrome-line: rgba(31,35,40,.12);
  --bg: #f6f8fa; --bg-deep: #eaeef2; --ink: #1f2328; --ink-soft: #424a53; --ink-faint: #656d76;
  --paper: #ffffff; --paper-ink: #1f2328;
}
body[data-v21="true"][data-theme="gruvbox-light"] {
  --v21-field: #ebdbb2; --v21-field-depth: #d5c4a1; --v21-ink: #3c3836;
  --v21-accent: #af3a03; --v21-accent-bright: #9d0006;
  --v21-chrome: rgba(251, 241, 199, 0.90); --v21-chrome-line: rgba(60,56,54,.14);
  --bg: #ebdbb2; --bg-deep: #d5c4a1; --ink: #3c3836; --ink-soft: #504945; --ink-faint: #7c6f64;
  --paper: #fbf1c7; --paper-ink: #3c3836;
}
body[data-v21="true"][data-theme="latte"] {
  --v21-field: #e6e9ef; --v21-field-depth: #dce0e8; --v21-ink: #4c4f69;
  --v21-accent: #8839ef; --v21-accent-bright: #1e66f5;
  --v21-chrome: rgba(239, 241, 245, 0.92); --v21-chrome-line: rgba(76,79,105,.14);
  --bg: #e6e9ef; --bg-deep: #dce0e8; --ink: #4c4f69; --ink-soft: #5c5f77; --ink-faint: #7c7f93;
  --paper: #eff1f5; --paper-ink: #4c4f69;
}
body[data-v21="true"][data-theme="onedark"] {
  --v21-field: #282c34; --v21-field-depth: #21252b; --v21-ink: #abb2bf;
  --v21-accent: #61afef; --v21-accent-bright: #98c379;
  --v21-chrome: rgba(33, 37, 43, 0.88); --v21-chrome-line: rgba(171,178,191,.16);
  --bg: #282c34; --bg-deep: #21252b; --ink: #abb2bf; --ink-soft: #9da5b4; --ink-faint: #7f848e;
  --paper: #21252b; --paper-ink: #abb2bf; --ink-tint: #abb2bf; --ink-mix: 100%; --sheet-ink: #abb2bf;
}
body[data-v21="true"][data-theme="cursor-dark"] {
  --v21-field: #181818; --v21-field-depth: #111111; --v21-ink: #cccccc;
  --v21-accent: #3794ff; --v21-accent-bright: #4fc1ff;
  --v21-chrome: rgba(31, 31, 31, 0.90); --v21-chrome-line: rgba(204,204,204,.14);
  --bg: #181818; --bg-deep: #111111; --ink: #cccccc; --ink-soft: #bbbbbb; --ink-faint: #8a8a8a;
  --paper: #1f1f1f; --paper-ink: #d4d4d4; --ink-tint: #d4d4d4; --ink-mix: 100%; --sheet-ink: #d4d4d4;
}
body[data-v21="true"][data-theme="dracula"] {
  --v21-field: #282a36; --v21-field-depth: #21222c; --v21-ink: #f8f8f2;
  --v21-accent: #bd93f9; --v21-accent-bright: #ff79c6;
  --v21-chrome: rgba(33, 34, 44, 0.90); --v21-chrome-line: rgba(248,248,242,.14);
  --bg: #282a36; --bg-deep: #21222c; --ink: #f8f8f2; --ink-soft: #e6e6e0; --ink-faint: #bfbfb8;
  --paper: #21222c; --paper-ink: #f8f8f2; --ink-tint: #f8f8f2; --ink-mix: 100%; --sheet-ink: #f8f8f2;
}
body[data-v21="true"][data-theme="tokyo"] {
  --v21-field: #1a1b26; --v21-field-depth: #16161e; --v21-ink: #c0caf5;
  --v21-accent: #7aa2f7; --v21-accent-bright: #bb9af7;
  --v21-chrome: rgba(26, 27, 38, 0.90); --v21-chrome-line: rgba(192,202,245,.16);
  --bg: #1a1b26; --bg-deep: #16161e; --ink: #c0caf5; --ink-soft: #a9b1d6; --ink-faint: #787c99;
  --paper: #24283b; --paper-ink: #c0caf5; --ink-tint: #c0caf5; --ink-mix: 100%; --sheet-ink: #c0caf5;
}
body[data-v21="true"][data-theme="nord"] {
  --v21-field: #2e3440; --v21-field-depth: #3b4252; --v21-ink: #eceff4;
  --v21-accent: #88c0d0; --v21-accent-bright: #81a1c1;
  --v21-chrome: rgba(46, 52, 64, 0.90); --v21-chrome-line: rgba(236,239,244,.16);
  --bg: #2e3440; --bg-deep: #3b4252; --ink: #eceff4; --ink-soft: #e5e9f0; --ink-faint: #d8dee9;
  --paper: #3b4252; --paper-ink: #eceff4; --ink-tint: #eceff4; --ink-mix: 100%; --sheet-ink: #eceff4;
}
body[data-v21="true"][data-theme="nightowl"] {
  --v21-field: #011627; --v21-field-depth: #01111d; --v21-ink: #d6deeb;
  --v21-accent: #82aaff; --v21-accent-bright: #c792ea;
  --v21-chrome: rgba(1, 22, 39, 0.90); --v21-chrome-line: rgba(214,222,235,.16);
  --bg: #011627; --bg-deep: #01111d; --ink: #d6deeb; --ink-soft: #c5cce0; --ink-faint: #8ba2b8;
  --paper: #01111d; --paper-ink: #d6deeb; --ink-tint: #d6deeb; --ink-mix: 100%; --sheet-ink: #d6deeb;
}

/* Presets may own the page as well as the field. This is what makes Blueprint
 * an actual mode rather than a blue surround with an unrelated white sheet. */
body[data-v21="true"][data-palette="blueprint"][data-paper] {
  --paper: #1552a0;
  --paper-ink: #f6fbff;
  --ink-tint: #f6fbff;
  --ink-mix: 100%;
  --paper-shade: #082f72;
  --paper-tex: none;
}
body[data-v21="true"][data-palette="terminal"][data-paper] {
  --paper: #0b1e16;
  --paper-ink: #b8ffd8;
  --ink-tint: #b8ffd8;
  --ink-mix: 100%;
  --paper-shade: #04120c;
  --paper-tex: none;
}

/* The backdrop/petals and legacy rails are not part of the launch stage. */
body[data-v21="true"] #backdrop,
body[data-v21="true"] #petals,
body[data-v21="true"] #doodles {
  display: none !important;
}

/* Full ambience packages deliberately restore the artwork world in full vibrant fidelity with optical Focus (bokeh) control. */
body[data-v21="true"].immersive-active #backdrop,
body[data-v21="true"].has-backdrop #backdrop {
  display: block !important;
  opacity: 1 !important;
  filter:
    blur(calc((100 - var(--v21-focus, 100)) * 0.16px))
    saturate(1.05)
    contrast(calc(var(--urn-bg-contrast, 1.02)))
    brightness(calc(var(--urn-bg-brightness, 1.0))) !important;
  transform: translate3d(0, 0, 0) scale(calc(1.04 + (100 - var(--v21-focus, 100)) * 0.0004));
  transition: transform 100ms var(--v21-stage-ease), filter 100ms ease-out;
}

body[data-v21="true"].has-backdrop,
body[data-v21="true"].immersive-active {
  --v21-warm-light: transparent;
  --urn-bg-light-layer: transparent;
  --urn-bg-depth-layer: transparent;
}

/* Typography changes only the face. Final Draft's 12pt size, line height,
   page padding, and all screenplay margins remain owned by app.css. */
body[data-v21="true"] #pages,
body[data-v21="true"] .sheet,
body[data-v21="true"] .sheet .blk {
  font-family: var(--screenplay-font, var(--mono));
}

body[data-v21="true"].immersive-active #petals {
  display: block !important;
  opacity: .68;
}

body[data-v21="true"].immersive-active::after,
body[data-v21="true"].has-backdrop::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 65%, rgba(0, 0, 0, 0.25) 100%);
}

body[data-v21="true"] #main {
  grid-template-columns: minmax(0, 1fr) !important;
}
body[data-v21="true"] #app {
  grid-template-columns: minmax(0, 1fr);
}

/* Warm, translucent chrome rather than flat grey bars. */
body[data-v21="true"] #topbar,
body[data-v21="true"] #statusbar {
  color: var(--v21-ink);
  background: var(--v21-chrome);
  border-color: var(--v21-chrome-line);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}

body[data-v21="true"] #doctitle,
body[data-v21="true"] #topbar .btn,
body[data-v21="true"] #topbar .btn .ic {
  color: var(--v21-ink);
}

body[data-v21="true"] #topbar {
  box-shadow: inset 0 1px var(--v21-chrome-line);
}

body[data-v21="true"] #deck {
  padding-top: 98px;
  padding-bottom: 140px;
}

/*
 * Camera stage. The existing zoom implementation applies scale() directly
 * here. Keeping toolbar + pages as siblings in the same transformed parent
 * guarantees they move as one physical system.
 */
body[data-v21="true"] #zoomwrap {
  position: relative;
  width: max(100%, 8.5in);
  min-width: 8.5in;
  align-items: center;
  padding: 0;
  transform-origin: top center;
  transition: transform var(--v21-camera-duration) var(--v21-camera-ease) !important;
  backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
}

/* Keep transform acceleration during camera moves without flashing or spiking glass opacity */
body[data-v21="true"].stage-moving #zoomwrap,
body[data-v21="true"].stage-moving #palette-tray,
body[data-v21="true"].stage-moving #experience-drawer,
body[data-v21="true"].stage-moving #storygit,
body[data-v21="true"].stage-moving #settings.settings-drawer {
  will-change: transform;
}

/* Kill transition during live scrub to eliminate rubber-banding and jitter */
body[data-v21="true"].camera-moving #zoomwrap,
body[data-v21="true"].fader-scrubbing #zoomwrap {
  transition: none !important;
}

body[data-v21="true"] #pages {
  position: relative;
  z-index: 2;
  width: 8.5in;
}

/* Side-by-side (2-page spread) layout */
body[data-v21="true"].side-by-side #zoomwrap,
body[data-v21="true"][data-side-by-side="true"] #zoomwrap {
  width: max(100%, calc(17in + 48px));
  min-width: calc(17in + 48px);
}

body[data-v21="true"].side-by-side #pages,
body[data-v21="true"][data-side-by-side="true"] #pages {
  width: calc(17in + 48px);
  max-width: calc(17in + 48px);
  display: grid;
  grid-template-columns: repeat(2, 8.5in);
  gap: 36px 48px;
  justify-content: center;
  margin: 0 auto;
}

body[data-v21="true"].side-by-side .sheet,
body[data-v21="true"][data-side-by-side="true"] .sheet {
  margin: 0;
}

body[data-v21="true"].side-by-side #wpcluster,
body[data-v21="true"][data-side-by-side="true"] #wpcluster {
  left: calc(50% + 8.5in + 24px + var(--v21-toolbar-gap, 14px)) !important;
}

body[data-v21="true"].side-by-side #experience-drawer,
body[data-v21="true"][data-side-by-side="true"] #experience-drawer {
  left: calc(50% + 8.5in + 24px - 448px) !important;
}

body[data-v21="true"].side-by-side #settings.settings-drawer,
body[data-v21="true"][data-side-by-side="true"] #settings.settings-drawer {
  left: calc(50% + 8.5in + 24px - 500px) !important;
}

body[data-v21="true"].side-by-side #palette-tray,
body[data-v21="true"][data-side-by-side="true"] #palette-tray {
  left: calc(50% + 8.5in + 24px - 286px) !important;
}

body[data-v21="true"].side-by-side #filemenu.file-menu,
body[data-v21="true"][data-side-by-side="true"] #filemenu.file-menu {
  left: calc(50% - 8.5in - 24px) !important;
}

body[data-v21="true"].side-by-side #storygit,
body[data-v21="true"][data-side-by-side="true"] #storygit {
  left: calc(50% - 8.5in - 24px) !important;
}

/* Pressed is the derived accent at real strength. It used to be a hardcoded
   16% sage wash with a 38% sage ring - no relation to any theme, and close to
   invisible on dark chrome. */
#topbar #btn-sidebyside[aria-pressed="true"] {
  color: var(--v21-pressed-ink);
  background: var(--v21-pressed);
  box-shadow: inset 0 0 0 1px var(--v21-pressed-ring);
}

/* == Ghost ==================================================================
   Track changes the Final Draft way on the surface, git-deep underneath.
   body.ghost-mode is the mode class — never bare .ghost, which names the
   transparent header-button style (design/canon/GLOSSARY.md). Working-Draft
   left (the live editor, untouched), Shadow-Draft right (a rendered page worn
   slightly spectral), the Ghost timeline floating above the statusbar.
   Geometry mirrors the side-by-side spread; Ghost supersedes it while on. */

body[data-v21="true"] {
  /* Revision colors, derived from the theme so every palette stays legible:
     the accent pulled toward the page ink for insertions, a quiet oxblood
     pulled the same way for deletions. FD revision blue is the fallback. */
  --ghost-mark: color-mix(in srgb, var(--v21-accent, #2457d6) 55%, var(--sheet-ink, #16324f));
  --ghost-strike: color-mix(in srgb, #a03949 62%, var(--sheet-ink, #33272a));
}

#topbar #btn-ghost[aria-pressed="true"] {
  color: var(--v21-pressed-ink);
  background: var(--v21-pressed);
  box-shadow: inset 0 0 0 1px var(--v21-pressed-ring);
}

/* The spread. Only the two page columns lay out — every other child of
   #zoomwrap (file menu, toolbar, drawers, doodles) is absolutely positioned
   and never participates in the grid. */
body[data-v21="true"].ghost-mode #zoomwrap {
  display: grid;
  grid-template-columns: 8.5in 8.5in;
  gap: 0 48px;
  justify-content: center;
  align-items: start;
  width: max(100%, calc(17in + 48px));
  min-width: calc(17in + 48px);
}

body[data-v21="true"].ghost-mode #pages {
  grid-column: 1;
  grid-row: 1;
}

body[data-v21="true"] #ghost-shadow { display: none; }

body[data-v21="true"].ghost-mode #ghost-shadow {
  display: block;
  grid-column: 2;
  grid-row: 1;
  width: 8.5in;
  animation: ghost-appear var(--v21-stage-duration) var(--v21-stage-ease);
}

@keyframes ghost-appear {
  from { opacity: 0; transform: translateX(14px); }
}

body[data-v21="true"].ghost-mode #wpcluster {
  left: calc(50% + 8.5in + 24px + var(--v21-toolbar-gap, 14px)) !important;
}

/* Chrome that normally hides beneath the single sheet would peek into the
   spread's gutter; park it exactly where side-by-side parks it. */
body[data-v21="true"].ghost-mode #filemenu.file-menu,
body[data-v21="true"].ghost-mode #storygit {
  left: calc(50% - 8.5in - 24px) !important;
}

body[data-v21="true"].ghost-mode #experience-drawer {
  left: calc(50% + 8.5in + 24px - 448px) !important;
}

body[data-v21="true"].ghost-mode #settings.settings-drawer {
  left: calc(50% + 8.5in + 24px - 500px) !important;
}

body[data-v21="true"].ghost-mode #palette-tray {
  left: calc(50% + 8.5in + 24px - 286px) !important;
}

/* The Shadow-Draft: the same paper, worn slightly spectral. Rebuilds must
   not replay the sheet-arrive animation. */
body[data-v21="true"] #ghost-shadow .sheet {
  animation: none;
  margin: 0 0 30px;
  opacity: .93;
  filter: saturate(.72) contrast(.985);
  /* The ethereal edge: a cool moonlit halo. The working page keeps its
     paper lift; the ghost does not sit on the desk -- it hovers. */
  box-shadow:
    0 0 0 1px color-mix(in srgb, #dbe7ff 52%, transparent),
    0 0 16px 2px color-mix(in srgb, #c4d6ff 42%, transparent),
    0 0 44px 10px color-mix(in srgb, #adc6ff 26%, transparent),
    0 0 110px 30px color-mix(in srgb, #9fbcff 14%, transparent);
}

/* FD's redline on the Shadow: what the working draft deleted, struck
   through in the revision color. */
body[data-v21="true"] #ghost-shadow .ghost-del,
body[data-v21="true"] #ghost-shadow .ghost-del-block {
  color: var(--ghost-strike);
  text-decoration: line-through;
  text-decoration-color: var(--ghost-strike);
  text-decoration-thickness: 1px;
}

body[data-v21="true"] #ghost-shadow .ghost-del-block { opacity: .82; }

body[data-v21="true"] #ghost-shadow .ghost-empty {
  color: color-mix(in srgb, var(--sheet-ink, #444444) 55%, transparent);
  font-style: italic;
}

/* FD's revision marks on the Working-Draft: changed blocks wear the margin
   asterisk. A positioned pseudo-element — zero layout cost, zero effect on
   pagination, and it never enters the editable text. Per-type offsets land
   every asterisk in one column of the right margin. */
/* The Working-Draft never changes in Ghost mode. No marks of any kind
   reach it (Patrick, 2026-08-20) -- the Ghost alone wears the difference. */

/* The Ghost timeline: a quiet instrument anchored beneath the Ghost page
   (js measures the Shadow-Draft and centers the strip under it; the 50%
   values below are only the pre-measure fallback). It adjusts the Ghost.
   Every draft of the project in the order written, then the fine-grained
   revisions, ending at Now. Notes ride above the track as small diamonds. */
body[data-v21="true"] #ghost-timeline { display: none; }

body[data-v21="true"].ghost-mode #ghost-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 30;
  width: min(720px, calc(100vw - 96px));
  padding: 10px 18px 12px;
  border-radius: 14px;
  background: var(--v21-chrome);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--v21-chrome-line);
  color: var(--v21-ink);
  animation: ghost-rise var(--v21-stage-duration) var(--v21-stage-ease);
}

@keyframes ghost-rise {
  from { opacity: 0; transform: translate(-50%, 12px); }
}

body[data-v21="true"].pref-reduced-transparency #ghost-timeline {
  background: var(--v21-chrome-solid, #f6f4ec);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-v21="true"] .ghost-timeline-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

body[data-v21="true"] .ghost-timeline-title {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .58;
  white-space: nowrap;
}

body[data-v21="true"] #ghost-label {
  flex: 1;
  min-width: 0;
  font: 500 10.5px/1.4 var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-v21="true"] #ghost-readout {
  font: 500 10px/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
  opacity: .72;
  white-space: nowrap;
}

body[data-v21="true"] #ghost-resurrect {
  appearance: none;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sheet-bg, #fff) 72%, transparent);
  color: inherit;
  padding: 3px 8px 2px;
  font: 600 9px/1.35 var(--mono);
  letter-spacing: .035em;
  white-space: nowrap;
  cursor: pointer;
}

body[data-v21="true"] #ghost-resurrect:hover,
body[data-v21="true"] #ghost-resurrect:focus-visible {
  border-color: color-mix(in srgb, currentColor 48%, transparent);
  background: color-mix(in srgb, var(--sheet-bg, #fff) 90%, transparent);
}

body[data-v21="true"] #ghost-resurrect[hidden] { display: none; }

body[data-v21="true"] .ghost-track {
  position: relative;
  padding: 9px 0 10px;
}

body[data-v21="true"] #ghost-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v21-ink) 18%, transparent);
  outline: none;
  cursor: pointer;
}
body[data-v21="true"] #ghost-slider:disabled { opacity: .4; cursor: default; }
body[data-v21="true"] #ghost-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}
body[data-v21="true"] #ghost-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  margin-top: -4px;
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  border: 1px solid var(--xd-thumb-border);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] #ghost-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
  border: none;
}
body[data-v21="true"] #ghost-slider::-moz-range-thumb {
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  border: 1px solid var(--xd-thumb-border);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] #ghost-slider:focus-visible {
  outline: 2px solid var(--v21-accent-bright, var(--v21-accent));
  outline-offset: 2px;
}

body[data-v21="true"] #ghost-ticks {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 0;
  height: 8px;
  pointer-events: none;
}

body[data-v21="true"] .ghost-tick {
  position: absolute;
  top: 2px;
  width: 2px;
  height: 5px;
  border-radius: 1px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--v21-ink) 34%, transparent);
}

body[data-v21="true"] .ghost-tick-draft,
body[data-v21="true"] .ghost-tick-now {
  top: 0;
  width: 3px;
  height: 8px;
  background: color-mix(in srgb, var(--v21-ink) 55%, transparent);
}

body[data-v21="true"] .ghost-tick.on {
  background: var(--v21-accent-bright, var(--v21-accent));
}

body[data-v21="true"] #ghost-notes {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 0;
  height: 9px;
  pointer-events: none;
}

body[data-v21="true"] .ghost-note {
  position: absolute;
  top: 1px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  border: 1.5px solid color-mix(in srgb, var(--v21-ink) 62%, transparent);
  border-radius: 1px;
  background: transparent;
  pointer-events: auto;
  cursor: help;
}

/* == The cascade ============================================================
   Past Drafts: the camera pulls far back and the project's history stands
   as a right-angled tree of actual miniature pages — the main path down the
   first column ending at Now, every what-if path splitting over and down
   into its own. One camera: a single translate+scale on the canvas, moved
   by one transition. Pages, never dots. */

body[data-v21="true"] #ghost-cascade-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sheet-bg, #fff) 72%, transparent);
  color: inherit;
  padding: 3px 8px 2px;
  font: 600 9px/1.35 var(--mono);
  letter-spacing: .035em;
  white-space: nowrap;
  cursor: pointer;
}

body[data-v21="true"] #ghost-cascade-btn:hover,
body[data-v21="true"] #ghost-cascade-btn:focus-visible {
  border-color: color-mix(in srgb, currentColor 48%, transparent);
  background: color-mix(in srgb, var(--sheet-bg, #fff) 90%, transparent);
}

body[data-v21="true"] #ghost-cascade-btn[aria-pressed="true"] {
  color: var(--v21-pressed-ink);
  background: var(--v21-pressed);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--v21-pressed-ring);
}

#ghost-cascade {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(140vmax 90vmax at 50% 34%,
      #1a2440 0%, #121a30 46%, #0a0f1f 100%);
  animation: gc-night-fall .45s ease-out;
}

#ghost-cascade[hidden] { display: none; }

#ghost-cascade.gc-leaving {
  animation: gc-night-lift .4s ease-in forwards;
  pointer-events: none;
}

@keyframes gc-night-fall { from { opacity: 0; } }
@keyframes gc-night-lift { to { opacity: 0; } }

#ghost-cascade-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

#ghost-cascade-stage:active { cursor: grabbing; }

#ghost-cascade-canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* The one camera. The lift and the dive re-tune it; interaction mutes it. */
  transition: transform .9s cubic-bezier(.30, .09, .17, 1);
}

#ghost-cascade-canvas.gc-cam-lift { transition-duration: 1.15s; }
#ghost-cascade-canvas.gc-cam-dive { transition-duration: .62s; transition-timing-function: cubic-bezier(.5, .04, .24, 1); }
#ghost-cascade-canvas.gc-manual { transition: none; }

#ghost-cascade .gc-edges {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

#ghost-cascade .gc-edge-spine,
#ghost-cascade .gc-edge-fork {
  fill: none;
  stroke: color-mix(in srgb, #adc6ff 46%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

#ghost-cascade .gc-edge-fork {
  stroke: color-mix(in srgb, #cdb8ff 46%, transparent);
  stroke-dasharray: 7 6;
}

#ghost-cascade .gc-node {
  position: absolute;
  width: 150px;
  cursor: pointer;
}

#ghost-cascade .gc-page {
  width: 150px;
  height: 194px;
  border-radius: 2px;
  overflow: hidden;
  background: #fbfaf6;
  /* The same moonlit halo the Shadow-Draft wears, scaled to a miniature. */
  box-shadow:
    0 0 0 1px color-mix(in srgb, #dbe7ff 52%, transparent),
    0 0 10px 1px color-mix(in srgb, #c4d6ff 38%, transparent),
    0 0 30px 6px color-mix(in srgb, #9fbcff 16%, transparent);
  transition: box-shadow .25s ease, transform .25s ease;
}

#ghost-cascade .gc-node:hover .gc-page {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #eaf1ff 72%, transparent),
    0 0 14px 2px color-mix(in srgb, #c4d6ff 55%, transparent),
    0 0 44px 10px color-mix(in srgb, #9fbcff 26%, transparent);
}

/* Now — the working paper: warmer, brighter, unmistakably home. */
#ghost-cascade .gc-now .gc-page {
  background: #fffdf7;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, #ffe9b8 78%, transparent),
    0 0 14px 2px color-mix(in srgb, #ffd98f 42%, transparent),
    0 0 44px 10px color-mix(in srgb, #ffc46a 18%, transparent);
}

#ghost-cascade .gc-page-inner {
  width: 600px;
  height: 776px;
  padding: 44px 52px 44px 64px;
  transform: scale(.25);
  transform-origin: 0 0;
  font: 11.5px/1.5 'Courier Final Draft', 'Courier Prime', Courier, monospace;
  color: #2c2a26;
  pointer-events: none;
  user-select: none;
}

#ghost-cascade .gc-blk { margin: 0; white-space: pre-wrap; }
#ghost-cascade .gc-blk[data-type="scene"] { text-transform: uppercase; font-weight: 700; margin-top: 17px; }
#ghost-cascade .gc-blk[data-type="scene"]:first-child { margin-top: 0; }
#ghost-cascade .gc-blk[data-type="action"] { margin-top: 17px; }
#ghost-cascade .gc-blk[data-type="character"] { margin: 17px 0 0 37%; text-transform: uppercase; }
#ghost-cascade .gc-blk[data-type="parenthetical"] { margin: 0 28% 0 30%; }
#ghost-cascade .gc-blk[data-type="dialogue"] { margin: 0 18% 0 22%; }
#ghost-cascade .gc-blk[data-type="transition"] { margin-top: 17px; text-align: right; text-transform: uppercase; }
#ghost-cascade .gc-blk-empty { font-style: italic; opacity: .5; }

#ghost-cascade .gc-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  text-align: center;
  color: color-mix(in srgb, #dbe7ff 82%, transparent);
}

#ghost-cascade .gc-cap-title {
  font: 600 10.5px/1.3 var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ghost-cascade .gc-cap-stamp {
  font: 500 9px/1.3 var(--mono);
  opacity: .62;
}

#ghost-cascade .gc-cap-whatif {
  font: 600 9px/1.3 var(--mono);
  letter-spacing: .04em;
  color: color-mix(in srgb, #cdb8ff 88%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ghost-cascade .gc-now .gc-cap-title {
  color: color-mix(in srgb, #ffe9b8 92%, transparent);
}

#ghost-cascade-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  appearance: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #dbe7ff 30%, transparent);
  background: color-mix(in srgb, #0a0f1f 55%, transparent);
  color: color-mix(in srgb, #dbe7ff 85%, transparent);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

#ghost-cascade-close:hover,
#ghost-cascade-close:focus-visible {
  border-color: color-mix(in srgb, #dbe7ff 60%, transparent);
  color: #eaf1ff;
}

#ghost-cascade-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  font: 500 11px/1.4 var(--mono);
  color: color-mix(in srgb, #dbe7ff 55%, transparent);
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-v21="true"].ghost-mode #ghost-shadow,
  body[data-v21="true"].ghost-mode #ghost-timeline {
    animation: none;
  }
  #ghost-cascade,
  #ghost-cascade.gc-leaving { animation: none; }
  #ghost-cascade-canvas { transition: none; }
}

@media print {
  #ghost-timeline,
  #ghost-shadow,
  #ghost-cascade {
    display: none !important;
  }
}

body[data-v21="true"] .sheet {
  border: none;
  border-radius: 3px;
  background-color: color-mix(
    in srgb,
    var(--paper) calc((1 - var(--glassiness, 0) * 0.65) * 100%),
    transparent
  );
  backdrop-filter:
    blur(calc(var(--glassiness, 0) * 20px))
    saturate(calc(1 + var(--glassiness, 0) * 2.0))
    contrast(calc(1 + var(--glassiness, 0) * 0.15))
    brightness(calc(1 + var(--glassiness, 0) * 0.06));
  -webkit-backdrop-filter:
    blur(calc(var(--glassiness, 0) * 20px))
    saturate(calc(1 + var(--glassiness, 0) * 2.0))
    contrast(calc(1 + var(--glassiness, 0) * 0.15))
    brightness(calc(1 + var(--glassiness, 0) * 0.06));
  text-shadow: var(--ink-shadow);

  /* Lift: how far the Sheet floats off the desk (0 flat → 100 high).
     Light source is off-center (upper-left key light), casting down-right.
     Drop shadows are pure optical occlusion (neutral dark tones),
     yielding rich, clean depth against all light, dark, and saturated backgrounds. */
  --lift: calc(var(--v21-lift, 35) / 100);

  box-shadow:
    /* Layer 1: Razor contact shadow at the paper's edge */
    calc(0.5px + 1.5px * var(--lift))
    calc(1px + 3px * var(--lift))
    calc(1.5px + 3px * var(--lift))
    rgba(0, 0, 0, calc((0.20 - 0.08 * var(--lift)) * (1 - var(--glassiness, 0) * 0.3))),

    /* Layer 2: Mid-range directional cast */
    calc(1px + 14px * var(--lift))
    calc(2px + 24px * var(--lift))
    calc(6px + 38px * var(--lift))
    calc(-2px - 8px * var(--lift))
    rgba(0, 0, 0, calc((0.14 + 0.18 * var(--lift)) * (1 - var(--glassiness, 0) * 0.3))),

    /* Layer 3: Soft, expansive ambient floor penumbra */
    calc(2px + 28px * var(--lift))
    calc(4px + 54px * var(--lift))
    calc(14px + 76px * var(--lift))
    calc(-4px - 18px * var(--lift))
    rgba(0, 0, 0, calc((0.08 + 0.22 * var(--lift)) * (1 - var(--glassiness, 0) * 0.3)));

  transition: box-shadow 160ms ease-out, border-radius 160ms ease-out;
}
/* At narrow viewports and extreme zooms the fixed drawer crosses the sheet.
   The sheet's bounded frost plane was then blurred again by the drawer,
   producing a hard compositor seam at the page edge. The drawer owns blur
   while open; paper tint, transparency, ink halo, and shadow remain intact. */
body[data-v21="true"].experience-open .sheet {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Grain steps should be visible without becoming decorative noise. */
body[data-v21="true"][data-grain="off"] { --grain: 0; }
body[data-v21="true"][data-grain="subtle"] { --grain: 0.08; }
body[data-v21="true"][data-grain="tooth"] { --grain: 0.23; }
body[data-v21="true"][data-grain="laid"] { --grain: 0.30; }

body[data-v21="true"][data-grain="off"] .sheet::before,
body[data-v21="true"][data-grain="off"] .sheet::after {
  opacity: 0;
}
body[data-v21="true"][data-grain="subtle"] .sheet::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
body[data-v21="true"][data-grain="tooth"] .sheet::before {
  background-image:
    radial-gradient(circle at 20% 35%, rgba(30, 34, 27, .20) 0 .55px, transparent .8px),
    radial-gradient(circle at 72% 68%, rgba(30, 34, 27, .15) 0 .7px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='116'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='3' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 7px 7px, 11px 11px, 116px 116px;
}

body[data-v21="true"][data-grain="laid"] .sheet::before {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(47, 43, 34, .20) 0,
      rgba(47, 43, 34, .20) 1px,
      transparent 1px,
      transparent 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(47, 43, 34, .10) 0,
      rgba(47, 43, 34, .10) 1px,
      transparent 1px,
      transparent 21px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: auto, auto, 220px 220px;
}

/* Stronger, legible ink identities on the actual screenplay text. */
body[data-v21="true"][data-ink="crisp"] {
  --ink-mix: 100%;
  --ink-tint: #0b0b0a;
  --ink-shadow: 0 0 transparent;
}
body[data-v21="true"][data-ink="printed"] {
  --ink-mix: 92%;
  --ink-tint: #271c13;
  --ink-shadow: .25px .35px .35px rgba(55, 28, 12, .32);
}
body[data-v21="true"][data-ink="faded"] {
  --ink-mix: 57%;
  --ink-tint: #756e63;
  --ink-shadow: 0 0 transparent;
}
body[data-v21="true"][data-ink="graphite"] {
  --ink-mix: 92%;
  --ink-tint: #4b5762;
  --ink-shadow: .35px .35px .45px rgba(20, 27, 34, .28);
}
body[data-v21="true"][data-ink="sepia"] {
  --ink-mix: 100%;
  --ink-tint: #704017;
  --ink-shadow: .3px .35px .45px rgba(87, 43, 10, .25);
}
body[data-v21="true"][data-ink="romance"] {
  --ink-mix: 100%;
  --ink-tint: #8d2949;
  --ink-shadow: .3px .35px .45px rgba(110, 28, 55, .26);
}

/* A theme is a design system. Kit ink wins over the finish tint so
 * Solarized is teal, Dracula is cream, not seven copies of #0b0b0a. */
body[data-v21="true"][data-theme] {
  --ink-tint: var(--kit-ink, var(--paper-ink));
  --ink-mix: 100%;
  --sheet-ink: var(--kit-ink, var(--paper-ink));
}

/* All screenplay elements share guaranteed, uniform page ink */
body[data-v21="true"] .sheet .blk,
body[data-v21="true"] .sheet .blk[data-type],
body[data-v21="true"] .sheet .blk[data-type="scene"],
body[data-v21="true"] .sheet .blk[data-type="slug"],
body[data-v21="true"] .sheet .blk[data-type="action"],
body[data-v21="true"] .sheet .blk[data-type="character"],
body[data-v21="true"] .sheet .blk[data-type="dialogue"],
body[data-v21="true"] .sheet .blk[data-type="parenthetical"],
body[data-v21="true"] .sheet .blk[data-type="transition"],
body[data-v21="true"] .sheet .dual-row {
  color: var(--sheet-ink) !important;
}
body[data-v21="true"] .sheet ::selection,
body[data-v21="true"] .sheet *::selection {
  color: var(--selection-ink);
  background: var(--selection-bg);
}

/* Bright current-palette selection; permanent highlights remain document data. */
body[data-v21="true"] #pages::selection,
body[data-v21="true"] #pages *::selection,
body[data-v21="true"] .sheet::selection,
body[data-v21="true"] .sheet *::selection,
body[data-v21="true"] .blk::selection {
  color: var(--selection-ink);
  background: var(--selection-bg);
}

/*
 * External format toolbar.
 * Paper right edge = centered parent (50%) + half a letter page (4.25in).
 * A 9px gap makes it feel hinged to the page without overlapping it.
 */
body[data-v21="true"] #wpcluster {
  position: absolute !important;
  top: 12px !important;
  left: calc(50% + 4.25in + var(--v21-toolbar-gap, 14px)) !important;
  right: auto !important;
  width: var(--v21-toolbar-width, 36px) !important;
  padding: 5px 3px 6px !important;
  gap: 3px !important;
  border: 1px solid rgba(58, 69, 54, 0.12) !important;
  border-radius: 12px !important;
  color: var(--v21-ink);
  background: rgba(250, 251, 247, 0.76) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.85),
    0 8px 24px -10px rgba(23, 39, 21, 0.28) !important;
  backdrop-filter: blur(20px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.10) !important;
  transform: translateX(0);
  opacity: 1;
  z-index: 1 !important;
  visibility: visible;
  transition:
    transform 320ms var(--v21-stage-ease),
    opacity 280ms var(--v21-stage-ease),
    box-shadow 300ms var(--v21-stage-ease),
    visibility 0s 0s !important;
  will-change: transform, opacity, box-shadow;
}

body[data-v21="true"] #wpcluster .tbtn {
  width: 28px !important;
  height: 28px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #242b22 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 600 11.5px/1 var(--ui) !important;
  cursor: pointer;
  position: relative;
  transition:
    transform 120ms cubic-bezier(0.2, 0.9, 0.2, 1),
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    box-shadow 120ms ease-out !important;
}

body[data-v21="true"] #wpcluster .tbtn > svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

body[data-v21="true"] #wpcluster .tbtn:hover {
  transform: translateY(-0.5px);
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(58, 69, 54, 0.14) !important;
  box-shadow: 0 2px 6px -2px rgba(23, 39, 21, 0.14) !important;
}

body[data-v21="true"] #wpcluster .tbtn:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.05) !important;
}

body[data-v21="true"] #wpcluster .tbtn.on,
body[data-v21="true"] #wpcluster .tbtn[aria-pressed="true"] {
  color: #1a3d1c !important;
  background: rgba(76, 140, 71, 0.18) !important;
  border-color: rgba(76, 140, 71, 0.32) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* Robot stays at the fold. Pressed = red, unlike the green writing tools.
   The bay below grows the glass strip downward on the same house ease. */
body[data-v21="true"] #wpcluster .wp-ai {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 480ms var(--v21-stage-ease);
}
body[data-v21="true"] #wpcluster .wp-ai-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 3px;
}
body[data-v21="true"] #wpcluster .wp-ai-rule {
  display: block;
  width: 14px;
  height: 1px;
  margin: 2px 0 3px;
  background: rgba(194, 58, 74, 0.38);
}
body[data-v21="true"].ai-tools-open #wpcluster .wp-ai {
  grid-template-rows: 1fr;
}
body[data-v21="true"] #wpcluster #t-ai[aria-pressed="true"] {
  color: #fff !important;
  background: #c23a4a !important;
  border-color: #a82e3c !important;
  box-shadow: none !important;
}
body[data-v21="true"] #wpcluster #t-ai[aria-pressed="true"]:hover {
  color: #fff !important;
  background: #d14555 !important;
  border-color: #a82e3c !important;
}
body[data-v21="true"] #wpcluster .tbtn-ai-tool {
  color: #8d2949 !important;
}
body[data-v21="true"] #wpcluster .tbtn-ai-tool:hover {
  background: rgba(194, 58, 74, 0.12) !important;
  border-color: rgba(194, 58, 74, 0.28) !important;
  box-shadow: 0 4px 12px -5px rgba(130, 30, 48, 0.22) !important;
}
body[data-v21="true"] #wpcluster .tbtn-ai-tool.on,
body[data-v21="true"] #wpcluster .tbtn-ai-tool[aria-pressed="true"] {
  color: #8d2949 !important;
  background: rgba(194, 58, 74, 0.14) !important;
  border-color: rgba(194, 58, 74, 0.32) !important;
}

/*
 * Off: the toolbar tucks entirely beneath the paper. Nothing remains
 * visible at the page edge — the topbar toggle is the only control.
 */
body[data-v21="true"].wp-off #wpcluster {
  transform: translateX(
    calc(
      -1 * (
        var(--v21-toolbar-gap, 14px) +
        var(--v21-toolbar-width, 36px) +
        20px
      )
    )
  ) !important;
  opacity: 0 !important;
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    inset 0 0 0 transparent,
    inset 0 0 0 transparent,
    0 0 0 0 transparent !important;
  z-index: 1 !important;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 320ms var(--v21-stage-ease),
    opacity 260ms var(--v21-stage-ease),
    box-shadow 280ms var(--v21-stage-ease),
    visibility 0s 320ms !important;
}

body[data-v21="true"].wp-off #wpcluster::before,
body[data-v21="true"].wp-off #wpcluster::after {
  visibility: hidden;
  opacity: 0;
}

/* Quiet, physical icon buttons in the header with dynamic rollover interactions. */
body[data-v21="true"] #topbar .btn.ghost {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--v21-ink);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition:
    background 180ms var(--v21-stage-ease),
    border-color 180ms var(--v21-stage-ease),
    transform 200ms var(--v21-stage-ease),
    box-shadow 200ms var(--v21-stage-ease),
    color 160ms ease-out;
  cursor: pointer;
}

body[data-v21="true"] #topbar .btn.ghost .ic {
  width: 18px;
  height: 18px;
  transition: transform 240ms var(--v21-stage-ease), filter 180ms ease-out;
  transform-origin: center center;
}

/* Dynamic Hover Elevation & Sheen */
body[data-v21="true"] #topbar .btn.ghost:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 16px -4px rgba(25, 35, 20, 0.18),
    0 2px 6px -1px rgba(25, 35, 20, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Individual Icon Micro-Interactions on Hover */
body[data-v21="true"] #topbar #btn-file:hover .ic {
  transform: translateY(-0.5px) scale(1.10);
}

body[data-v21="true"] #topbar #btn-more:hover .ic {
  transform: rotate(45deg) scale(1.12);
}

body[data-v21="true"] #topbar #btn-paper:hover .ic {
  transform: translateY(-0.8px) rotate(-4deg) scale(1.10);
}

body[data-v21="true"] #topbar #btn-wptoggle:hover .ic {
  transform: translateX(1px) scale(1.10);
}

body[data-v21="true"] #topbar #btn-sound:hover .ic {
  transform: scale(1.12) rotate(6deg);
}

body[data-v21="true"] #topbar #btn-backdrop:hover .ic {
  transform: scale(1.10);
}

body[data-v21="true"] #topbar #btn-glass:hover .ic {
  transform: rotate(12deg) scale(1.10);
}

body[data-v21="true"] #topbar #btn-petals:hover .ic {
  transform: rotate(-10deg) scale(1.12);
}

body[data-v21="true"] #topbar #btn-night:hover .ic {
  transform: rotate(-15deg) scale(1.12);
}

/* Mechanical Click (:active) */
body[data-v21="true"] #topbar .btn.ghost:active {
  transform: translateY(0) scale(0.96);
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 3px rgba(20, 30, 18, 0.12),
    inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Active / Deployed Glass Capsule State */
body[data-v21="true"] #topbar .btn.ghost[aria-expanded="true"],
body[data-v21="true"] #topbar .btn.ghost[aria-pressed="true"],
body[data-v21="true"].file-open #topbar #btn-file,
body[data-v21="true"].settings-open #topbar #btn-more,
body[data-v21="true"].experience-open #topbar #btn-paper {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow:
    0 3px 10px -3px rgba(20, 30, 18, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  color: var(--v21-ink);
}

/* File is a compact instrument sliding out from behind the left edge of the paper */
body[data-v21="true"] #filemenu.file-menu {
  --v21-ink: #1f261d;
  --v21-accent: #2c4a6e;
  position: absolute;
  top: 10px;
  left: calc(50% - 4.25in);
  z-index: 1 !important;
  width: 430px;
  max-width: none;
  max-height: min(805px, calc(100vh - 96px));
  display: flex !important;
  flex-direction: column;
  gap: 0;
  padding: 10px;
  overflow: auto;
  color: var(--v21-ink);
  border: 1px solid rgba(58, 69, 54, .12) !important;
  border-radius: 17px !important;
  background: rgba(250, 251, 247, .94) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.82),
    -12px 28px 52px -26px rgba(23, 39, 21, .42) !important;
  backdrop-filter: blur(28px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.15) !important;
  pointer-events: none;
  visibility: hidden;
  opacity: 1 !important;
  animation: none !important;
  transform: translate3d(0, 0, 0);
  transform-origin: center right;
  transition:
    transform var(--v21-stage-duration, 580ms) var(--v21-stage-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0s var(--v21-stage-duration, 580ms) !important;
  backface-visibility: hidden;
  will-change: transform;
}

body[data-v21="true"] #filemenu.file-menu.open {
  display: flex !important;
  pointer-events: auto;
  visibility: visible !important;
  animation: none !important;
  transform: translate3d(-450px, 0, 0);
  transition:
    transform var(--v21-stage-duration, 580ms) var(--v21-stage-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0s !important;
}

body[data-v21="true"] #filemenu .file-group {
  padding: 8px 6px 9px;
  border-bottom: 1px solid rgba(58, 69, 54, .085);
}

body[data-v21="true"] #filemenu .file-group-last {
  border-bottom: 0;
}

body[data-v21="true"] #filemenu .file-group-label {
  margin: 2px 8px 6px;
  color: #556050 !important;
  font: 700 8.5px/1 var(--mono) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body[data-v21="true"] #filemenu .file-output-label {
  margin-top: 11px;
}

body[data-v21="true"] #filemenu .file-group > button,
body[data-v21="true"] #filemenu .file-pair > button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(58, 69, 54, .08);
  border-radius: 9px;
  color: #1a2019 !important;
  background: rgba(255, 255, 255, .55);
  font: 600 11.5px/1.15 var(--ui) !important;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition:
    transform 130ms cubic-bezier(.2,.9,.2,1),
    background-color 130ms ease-out,
    border-color 130ms ease-out,
    box-shadow 130ms ease-out;
}

body[data-v21="true"] #filemenu .file-group > button:hover,
body[data-v21="true"] #filemenu .file-pair > button:hover {
  transform: translateY(-1px);
  border-color: rgba(44, 74, 110, .28);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 14px -6px rgba(23, 39, 21, .25);
}

body[data-v21="true"] #filemenu .file-command {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1a2019 !important;
}

body[data-v21="true"] #filemenu .file-glyph {
  width: 16px;
  color: #2c4a6e !important;
  font: 700 13px/1 var(--mono) !important;
  text-align: center;
}

body[data-v21="true"] #filemenu .file-note,
body[data-v21="true"] #filemenu .file-chevron {
  color: #556050 !important;
  font: 550 9px/1 var(--mono) !important;
}

body[data-v21="true"] #filemenu .kbd {
  color: #1f261d !important;
  background: rgba(0, 0, 0, .07);
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 4px;
  padding: 2px 5px;
  font: 600 8.5px/1 var(--mono) !important;
}

body[data-v21="true"] #filemenu .file-chevron {
  font-size: 15px;
  transition: transform 160ms cubic-bezier(.2,.9,.2,1);
}

body[data-v21="true"] #filemenu [aria-expanded="true"] .file-chevron {
  transform: rotate(90deg);
}

body[data-v21="true"] #filemenu .file-format-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px 0 2px;
}

body[data-v21="true"] #filemenu .file-format-grid:not([hidden]) {
  display: grid;
  animation: file-menu-arrive 180ms cubic-bezier(.2,.9,.2,1) both;
}

body[data-v21="true"] #filemenu .file-format-grid button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(58, 69, 54, .12);
  border-radius: 8px;
  color: #1a2019 !important;
  background: rgba(255, 255, 255, .60);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(.2,.9,.2,1),
    background-color 140ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out;
}

body[data-v21="true"] #filemenu .file-format-grid button:hover {
  transform: translateY(-2px);
  border-color: rgba(44, 74, 110, .35);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 14px -6px rgba(23, 39, 21, .25);
}

body[data-v21="true"] #filemenu .file-format-grid b {
  overflow: hidden;
  font: 650 9.5px/1.1 var(--ui);
  color: #1a2019 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-v21="true"] #filemenu .file-format-grid span {
  color: #556050 !important;
  font: 550 8px/1 var(--mono);
}

body[data-v21="true"] #filemenu .file-storage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

body[data-v21="true"] #filemenu .file-storage button {
  min-width: 0;
  height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid rgba(58, 69, 54, .12);
  border-radius: 9px;
  color: #1a2019 !important;
  background: rgba(255, 255, 255, .60);
  font: 600 9.5px/1 var(--ui);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.2,.9,.2,1), background 140ms ease-out, border-color 140ms ease-out;
}

body[data-v21="true"] #filemenu .file-storage button:hover:not(:disabled) {
  transform: translateY(-1.5px);
  background: rgba(255, 255, 255, .92);
  border-color: rgba(44, 74, 110, .35);
  box-shadow: 0 5px 14px -6px rgba(23, 39, 21, .25);
}

body[data-v21="true"] #filemenu .file-storage button.on {
  border-color: #2c4a6e;
  background: color-mix(in srgb, #2c4a6e 12%, rgba(255, 255, 255, .85));
  box-shadow: 0 0 0 1px #2c4a6e;
}

body[data-v21="true"] #filemenu .file-storage button:disabled {
  opacity: .45;
  cursor: default;
}

body[data-v21="true"] #filemenu .storage-mark {
  font: 700 12px/1 var(--mono);
  color: #2c4a6e !important;
}

body[data-v21="true"] #filemenu .storage-note {
  font: 550 8px/1 var(--ui);
  color: #556050 !important;
  letter-spacing: .02em;
}

body[data-v21="true"] #filemenu .file-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

body[data-v21="true"] #filemenu .file-pair > button {
  justify-content: center;
  min-height: 36px;
  border-color: rgba(58, 69, 54, .12);
  background: rgba(255, 255, 255, .60);
  color: #1a2019 !important;
  font-weight: 650;
  text-align: center;
}

body[data-v21="true"] #filemenu .file-pair > button:hover {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(44, 74, 110, .35);
}

@keyframes file-menu-arrive {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/*
 * Palette tray: starts entirely behind the right side of the paper and
 * slides into the field. It shares #zoomwrap's camera transform.
 */
body[data-v21="true"] #palette-tray {
  position: absolute;
  top: 18px;
  left: calc(50% + 4.25in - 286px);
  z-index: 1;
  width: 286px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(5, 42px);
  gap: 12px;
  border: 1px solid rgba(65, 77, 60, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px rgba(255,255,255,.68),
    8px 18px 34px -18px rgba(25, 43, 23, .32);
  backdrop-filter: blur(20px) saturate(1.10);
  -webkit-backdrop-filter: blur(20px) saturate(1.10);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  /* Opaque always — the paper hides the tucked card. A short opacity
     fade on close was making put-away look like a dissolve. */
  transition: transform var(--v21-stage-duration) var(--v21-stage-ease);
  backface-visibility: hidden;
}

body[data-v21="true"] .palette-tier-label {
  grid-column: 1 / -1;
  margin: 0 1px -3px;
  color: color-mix(in srgb, var(--v21-ink) 48%, transparent);
  font: 650 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body[data-v21="true"] .palette-tier-label.immersive-label {
  margin-top: 3px;
}

body[data-v21="true"] .palette-adjust {
  grid-column: 1 / -1;
  justify-self: end;
  width: 28px;
  height: 24px;
  margin: -2px 1px -3px 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: color-mix(in srgb, var(--v21-ink) 62%, transparent);
  background: transparent;
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(.2,.9,.2,1),
    background-color 140ms ease-out,
    color 140ms ease-out;
}

body[data-v21="true"] .palette-adjust:hover {
  transform: translateY(-1px);
  color: var(--v21-ink);
  background: rgba(255,255,255,.46);
}

body[data-v21="true"] .palette-adjust svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stays at z-index 1 — beneath the paper (z 2) like the experience drawer,
   so it emerges from behind the page instead of sliding across it. */
body[data-v21="true"].palette-open #palette-tray {
  transform: translate3d(304px, 0, 0);
  pointer-events: auto;
}



body[data-v21="true"] .palette-orb {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(45, 58, 42, .12);
  border-radius: 50%;
  color: var(--orb-ink, #354233);
  background: var(--orb, #edf6ec);
  box-shadow:
    inset 0 1px rgba(255,255,255,.65),
    0 3px 9px -6px rgba(27, 42, 25, .34);
  cursor: pointer;
  transition:
    transform 170ms cubic-bezier(.2,.9,.2,1),
    box-shadow 170ms ease-out,
    border-color 170ms ease-out;
}

body[data-v21="true"] .palette-orb .orb-page {
  width: 18px;
  height: 16px;
  border-radius: 50%;
  background: var(--orb-page, #fff);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 18, .12);
  pointer-events: none;
}

body[data-v21="true"] .palette-orb:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: color-mix(in srgb, var(--v21-accent) 42%, transparent);
  box-shadow:
    inset 0 1px rgba(255,255,255,.8),
    0 10px 20px -11px rgba(27, 42, 25, .42);
}

body[data-v21="true"] .palette-orb.on {
  box-shadow:
    inset 0 1px rgba(255,255,255,.8),
    0 0 0 2px color-mix(in srgb, var(--v21-accent) 46%, transparent),
    0 8px 18px -11px rgba(27, 42, 25, .36);
}

/* World themes: the orb IS the room — its real backdrop under a soft scrim. */
body[data-v21="true"] .palette-orb.world {
  background:
    linear-gradient(rgba(10, 14, 10, .06), rgba(10, 14, 10, .28)),
    var(--orb-img) center / cover;
}
body[data-v21="true"] .palette-orb.world svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}

body[data-v21="true"] .palette-orb svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Hover glass label: present only when the writer asks by hovering. */
body[data-v21="true"] .palette-orb::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  z-index: 4;
  min-width: max-content;
  padding: 5px 7px;
  border: 1px solid rgba(54, 67, 51, .09);
  border-radius: 7px;
  color: var(--v21-ink);
  background: rgba(255,255,255,.58);
  box-shadow: 0 7px 18px -12px rgba(24, 38, 22, .42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 500 10px/1.2 var(--ui);
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -3px);
  pointer-events: none;
  transition: opacity 110ms ease-out, transform 140ms ease-out;
}

body[data-v21="true"] .palette-orb:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

body[data-v21="true"] .immersive-orb {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 50%;
  color: #fff;
  background-image:
    linear-gradient(rgba(14,20,16,.10), rgba(14,20,16,.32)),
    var(--immersive-image);
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(25, 34, 25, .13),
    0 4px 11px -7px rgba(17, 28, 16, .56);
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(.2,.9,.2,1),
    box-shadow 180ms ease-out,
    border-color 180ms ease-out;
}

body[data-v21="true"] .immersive-orb > span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 50%;
  color: #263127;
  background: rgba(255,255,255,.82);
  font: 700 7px/1 var(--ui);
  box-shadow: 0 2px 6px -4px rgba(12,20,12,.5);
  pointer-events: none;
}

body[data-v21="true"] .immersive-orb:hover {
  transform: translateY(-3px) scale(1.055);
  border-color: rgba(255,255,255,.86);
  box-shadow:
    inset 0 0 0 1px rgba(25,34,25,.12),
    0 11px 22px -12px rgba(17,28,16,.72);
}

body[data-v21="true"] .immersive-orb.on {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    0 0 0 2px color-mix(in srgb, var(--v21-accent) 58%, white 18%),
    0 9px 18px -12px rgba(17,28,16,.68);
}

body[data-v21="true"] .immersive-orb::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  z-index: 5;
  min-width: max-content;
  padding: 5px 7px;
  border: 1px solid rgba(54,67,51,.10);
  border-radius: 7px;
  color: var(--v21-ink);
  background: rgba(255,255,255,.70);
  box-shadow: 0 7px 18px -12px rgba(24,38,22,.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 500 10px/1.2 var(--ui);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -3px);
  pointer-events: none;
  transition: opacity 110ms ease-out, transform 140ms ease-out;
}

body[data-v21="true"] .immersive-orb:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
 * Display & Experience drawer.
 * Hidden beneath the paper until the camera moves to field elevation.
 */
body[data-v21="true"] #experience-drawer {
  position: absolute;
  top: 10px;
  left: calc(50% + 4.25in - 448px);
  z-index: 1;
  width: 448px;
  max-height: min(760px, calc(100vh - 110px));
  overflow: auto;
  padding: 16px;
  /* The drawer is the same material as #topbar and #statusbar. It used to
     hardcode a near-white glass, an olive border and a green-black shadow,
     while its text used --v21-ink - an ink designed for the dark chrome the
     panel was not using. That is why the title washed out and the kicker was
     unreadable. One material now, derived from the desk. */
  border: 1px solid var(--v21-chrome-line);
  border-radius: 17px;
  color: var(--v21-ink);
  background: var(--v21-chrome);
  box-shadow:
    inset 0 1px var(--v21-chrome-line),
    12px 28px 52px -26px rgba(0, 0, 0, .45);
  backdrop-filter: blur(22px) saturate(1.10);
  -webkit-backdrop-filter: blur(22px) saturate(1.10);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  /* Closed: paint nothing through transparent paper. Delay hide until after
     the slide-out animation completes so it remains visible during motion. */
  visibility: hidden;
  transition:
    transform var(--v21-stage-duration) var(--v21-stage-ease),
    visibility 0s var(--v21-stage-duration);
  backface-visibility: hidden;
}

body[data-v21="true"].experience-open #experience-drawer {
  transform: translate3d(468px, 0, 0);
  pointer-events: auto;
  /* Show immediately so the drawer is visible at the very first frame. */
  visibility: visible;
  transition:
    transform var(--v21-stage-duration) var(--v21-stage-ease),
    visibility 0s;
}

body[data-v21="true"].experience-open #wpcluster,
body[data-v21="true"].experience-open #palette-tray {
  transform: translateX(
    calc(
      -1 * (
        var(--v21-toolbar-gap, 14px) +
        var(--v21-toolbar-width, 36px) +
        20px
      )
    )
  ) !important;
  opacity: 0 !important;
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    inset 0 0 0 transparent,
    inset 0 0 0 transparent,
    0 0 0 0 transparent !important;
  z-index: 1 !important;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 320ms var(--v21-stage-ease),
    opacity 260ms var(--v21-stage-ease),
    box-shadow 280ms var(--v21-stage-ease),
    visibility 0s 320ms !important;
}

body[data-v21="true"].experience-open #wpcluster::before,
body[data-v21="true"].experience-open #wpcluster::after {
  visibility: hidden;
  opacity: 0;
}

body[data-v21="true"] .xd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid rgba(61, 72, 56, .09);
}

body[data-v21="true"] .xd-title {
  margin: 0;
  font: 650 14px/1.2 var(--ui);
  letter-spacing: -.01em;
}

body[data-v21="true"] .xd-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--v21-ink);
  background: transparent;
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(.2,.9,.2,1),
    background-color 140ms ease-out;
}

body[data-v21="true"] .xd-close:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.58);
}

body[data-v21="true"] .xd-section {
  padding: 13px 2px;
  border-bottom: 1px solid rgba(61, 72, 56, .08);
}

body[data-v21="true"] .xd-section:last-child {
  border-bottom: 0;
}

body[data-v21="true"] .xd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-v21="true"] .xd-label {
  color: color-mix(in srgb, var(--v21-ink) 72%, transparent);
  font: 650 10px/1 var(--ui);
  letter-spacing: .13em;
  text-transform: uppercase;
}

body[data-v21="true"] .xd-meta {
  color: color-mix(in srgb, var(--v21-ink) 48%, transparent);
  font: 500 10px/1 var(--mono);
}

body[data-v21="true"] .xd-toggle {
  position: relative;
  width: 34px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(58, 69, 54, .16);
  cursor: pointer;
  transition: background-color 160ms ease-out;
}

body[data-v21="true"] .xd-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 5px -3px rgba(28, 42, 25, .5);
  transition: transform 180ms cubic-bezier(.2,.9,.2,1);
}

body[data-v21="true"] .xd-toggle.on {
  background: color-mix(in srgb, var(--v21-accent) 70%, transparent);
}

body[data-v21="true"] .xd-toggle.on::after {
  transform: translateX(15px);
}

body[data-v21="true"] .xd-sounds {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 130ms ease-out,
    transform 160ms cubic-bezier(.2,.9,.2,1);
}

body[data-v21="true"] #experience-drawer.sound-on .xd-sounds {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body[data-v21="true"] .xd-chip {
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(61, 72, 56, .10);
  border-radius: 8px;
  color: var(--v21-ink);
  background: rgba(255,255,255,.26);
  font: 550 10px/1 var(--ui);
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(.2,.9,.2,1),
    background-color 140ms ease-out,
    box-shadow 140ms ease-out;
}

body[data-v21="true"] .xd-chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.60);
  box-shadow: 0 5px 12px -8px rgba(28, 42, 25, .34);
}

body[data-v21="true"] .xd-chip.on {
  background: color-mix(in srgb, var(--v21-accent) 15%, rgba(255,255,255,.54));
  border-color: color-mix(in srgb, var(--v21-accent) 36%, transparent);
}

body[data-v21="true"] .xd-volume {
  width: 74px;
  accent-color: var(--v21-accent);
}

body[data-v21="true"] .xd-papers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-top: 10px;
}

body[data-v21="true"] .xd-paper {
  position: relative;
  height: 68px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--paper-border, rgba(55, 65, 51, .10));
  border-radius: var(--xd-control-radius);
  background-color: var(--paper-swatch, #fff);
  /* --paper-grain carries an SVG turbulence filter as a semi-transparent overlay
     so the swatch color shows through while texture is still perceivable. */
  background-image: var(--paper-grain, none);
  background-size: cover;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.62);
  transition:
    transform 170ms cubic-bezier(.2,.9,.2,1),
    box-shadow 170ms ease-out,
    border-color 170ms ease-out;
}

body[data-v21="true"] .xd-paper::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 7px;
  background: var(--paper-swatch, #fff);
  box-shadow: inset 0 1px rgba(20, 24, 18, .12);
  pointer-events: none;
}
body[data-v21="true"] .xd-paper::after {
  content: attr(data-short);
  position: absolute;
  inset: auto 3px 11px;
  padding: 3px 4px;
  border-radius: 5px;
  color: #30352d;
  background: rgba(255,255,255,.64);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 650 9px/1 var(--ui);
  letter-spacing: .02em;
  text-align: center;
}
/* Page AND desk colors are pure color objects — one shared visual language.
   No stock-card bar, no label pill. Stock cards below retain their labels. */
body[data-v21="true"] #xd-color-grid .xd-paper::before,
body[data-v21="true"] #xd-color-grid .xd-paper::after,
body[data-v21="true"] #xd-desk-colors .xd-paper::before,
body[data-v21="true"] #xd-desk-colors .xd-paper::after {
  display: none;
}
body[data-v21="true"] #xd-desk-colors .xd-paper:focus-visible,
body[data-v21="true"] #xd-color-grid .xd-paper:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow:
    0 0 0 4px #2c4a6e,
    0 10px 21px -14px rgba(28, 42, 25, .44);
}
/* Dark paper labels — light text on a semi-opaque dark pill */
body[data-v21="true"] .xd-paper[data-paper="blue"]::after,
body[data-v21="true"] .xd-paper[data-paper="solar-dark"]::after {
  color: #e0edf5;
  background: rgba(8, 18, 28, .58);
}

body[data-v21="true"] .xd-paper:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--v21-accent) 38%, transparent);
  box-shadow: 0 10px 21px -14px rgba(28, 42, 25, .44);
}

body[data-v21="true"] .xd-paper.on {
  border-color: color-mix(in srgb, var(--v21-accent) 62%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--v21-accent) 34%, transparent),
    0 8px 18px -13px rgba(28, 42, 25, .38);
}

body[data-v21="true"] .xd-inks,
body[data-v21="true"] .xd-grains {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

body[data-v21="true"] .xd-inks {
  grid-template-columns: repeat(6, 1fr);
}

body[data-v21="true"] .xd-grains {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 9px;
}

body[data-v21="true"] .xd-ink,
body[data-v21="true"] .xd-grain {
  height: 44px;
  padding: 0;
  border: 1px solid rgba(61, 72, 56, .10);
  border-radius: 8px;
  color: var(--sample-ink, var(--v21-ink));
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(.2,.9,.2,1),
    background-color 140ms ease-out,
    border-color 140ms ease-out;
}

body[data-v21="true"] .xd-ink {
  font: 600 18px/1 var(--mono);
  text-shadow: var(--sample-shadow, none);
}

body[data-v21="true"] .xd-grain {
  position: relative;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--xd-sample-border);
  border-radius: var(--xd-control-radius);
  background-color: var(--xd-sample-surface);
  box-shadow:
    inset 0 1px rgba(255,255,255,.70),
    inset 0 -1px rgba(28,36,25,.08);
}

body[data-v21="true"] .xd-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

body[data-v21="true"] .xd-grain[data-grain="subtle"]::before {
  background-image:
    repeating-radial-gradient(
      ellipse at 30% 45%,
      rgba(48, 53, 43, .12) 0 .45px,
      transparent .7px 2.6px
    );
  background-size: 5px 4px;
}
body[data-v21="true"] .xd-grain[data-grain="tooth"]::before {
  background-image:
    repeating-radial-gradient(
      circle at 22% 38%,
      rgba(48, 53, 43, .20) 0 .8px,
      transparent 1px 3.8px
    ),
    repeating-linear-gradient(
      128deg,
      rgba(255,255,255,.23) 0 1px,
      transparent 1px 5px
    );
  background-size: 7px 7px, 6px 6px;
}
body[data-v21="true"] .xd-grain[data-grain="laid"]::before {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(48, 53, 43, .22) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(48, 53, 43, .065) 0 1px,
      transparent 1px 18px
    );
}
body[data-v21="true"] .xd-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,.58);
  pointer-events: none;
}

body[data-v21="true"] .xd-ink:hover {
  transform: translateY(-1px);
  background-color: rgba(255,255,255,.60);
}

body[data-v21="true"] .xd-grain:hover {
  transform: translateY(-1px);
  background-color: var(--xd-sample-surface);
}

body[data-v21="true"] .xd-ink.on {
  border-color: color-mix(in srgb, var(--v21-accent) 50%, transparent);
  background-color: color-mix(in srgb, var(--v21-accent) 10%, rgba(255,255,255,.52));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--v21-accent) 28%, transparent),
    inset 0 1px rgba(255,255,255,.70);
}
body[data-v21="true"] .xd-grain.on {
  border-color: color-mix(in srgb, var(--v21-accent) 50%, transparent);
  background-color: var(--xd-sample-surface);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--v21-accent) 28%, transparent),
    inset 0 1px rgba(255,255,255,.70);
}
body[data-v21="true"] .xd-grain:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow:
    0 0 0 4px #2c4a6e,
    inset 0 1px rgba(255,255,255,.70);
}

body[data-v21="true"] .xd-range-row {
  display: grid;
  grid-template-columns: 74px 1fr 42px;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}

body[data-v21="true"] .xd-range-row input[type="range"] {
  width: 100%;
  accent-color: var(--v21-accent);
}

body[data-v21="true"] .xd-value {
  text-align: right;
  color: color-mix(in srgb, var(--v21-ink) 54%, transparent);
  font: 550 10px/1 var(--mono);
}

body[data-v21="true"] .xd-library {
  width: 100%;
  height: 30px;
  margin-top: 12px;
  padding: 0 10px;
  border: 1px solid rgba(61, 72, 56, .09);
  border-radius: 8px;
  color: color-mix(in srgb, var(--v21-ink) 64%, transparent);
  background: rgba(255,255,255,.20);
  font: 550 10px/1 var(--ui);
  letter-spacing: .02em;
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(.2,.9,.2,1),
    color 140ms ease-out,
    background-color 140ms ease-out;
}

body[data-v21="true"] .xd-library:hover {
  transform: translateY(-1px);
  color: var(--v21-ink);
  background: rgba(255,255,255,.56);
}

body[data-v21="true"] #experience-drawer .xd-themes {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--v21-stage-ease);
}
body[data-v21="true"] #experience-drawer .xd-themes-inner {
  overflow: hidden;
  min-height: 0;
}
body[data-v21="true"].themes-open #experience-drawer .xd-themes {
  grid-template-rows: 1fr;
}
body[data-v21="true"] #experience-drawer .xd-themes-rule {
  display: block;
  width: 28px;
  height: 1px;
  margin: 10px auto 12px;
  background: rgba(58, 106, 60, 0.38);
}
body[data-v21="true"] #experience-drawer .xd-themes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  padding: 0 2px 6px;
}
body[data-v21="true"] #experience-drawer .palette-orb {
  width: 34px;
  height: 34px;
  justify-self: center;
}
body[data-v21="true"] #experience-drawer .palette-orb::after {
  display: block;
  font-size: 9px;
  padding: 4px 6px;
}
body[data-v21="true"].themes-open #experience-drawer,
body[data-v21="true"].stack-open #experience-drawer,
body[data-v21="true"].paper-open #experience-drawer,
body[data-v21="true"].words-open #experience-drawer,
body[data-v21="true"].bg-open #experience-drawer {
  max-height: none;
}

/* ============================================================
   FOUR-ACCORDION SYSTEM: Paper · Words · Background · Themes
   ============================================================ */

/* Shared accordion button base */
body[data-v21="true"] .xd-acc-btn {
  width: 100%;
  height: 38px;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(61, 72, 56, 0.10);
  border-radius: 10px;
  font: 650 12px/1 var(--ui);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(0.2, 0.9, 0.2, 1),
    color 140ms ease-out,
    background-color 140ms ease-out,
    border-color 140ms ease-out;
}
body[data-v21="true"] .xd-acc-btn .ic {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-v21="true"] .xd-acc-btn:hover { transform: translateY(-1px); }

/* Each accordion button wears the colour selected for its own element - Paper
   the page colour, Words the ink, Background the desk, Themes the theme accent.
   JavaScript owns these variables and contrast-guards both rest and open
   states; see updateAccordionColors in js/v21.js. */
body[data-v21="true"] .xd-paper-btn {
  color: var(--xd-paper-ink);
  background: var(--xd-paper-bg);
  border-color: var(--xd-paper-border);
}
body[data-v21="true"] .xd-paper-btn:hover { background: var(--xd-paper-hover); }
body[data-v21="true"].paper-open .xd-paper-btn {
  color: var(--xd-paper-open-ink);
  background: var(--xd-paper-open);
  border-color: var(--xd-paper-open-border);
}
body[data-v21="true"] .xd-words-btn {
  color: var(--xd-words-ink);
  background: var(--xd-words-bg);
  border-color: var(--xd-words-border);
}
body[data-v21="true"] .xd-words-btn:hover { background: var(--xd-words-hover); }
body[data-v21="true"].words-open .xd-words-btn {
  color: var(--xd-words-open-ink);
  background: var(--xd-words-open);
  border-color: var(--xd-words-open-border);
}
body[data-v21="true"] .xd-bg-btn {
  color: var(--xd-bg-ink);
  background: var(--xd-bg-bg);
  border-color: var(--xd-bg-border);
}
body[data-v21="true"] .xd-bg-btn:hover { background: var(--xd-bg-hover); }
body[data-v21="true"].bg-open .xd-bg-btn {
  color: var(--xd-bg-open-ink);
  background: var(--xd-bg-open);
  border-color: var(--xd-bg-open-border);
}
body[data-v21="true"] .xd-themes-btn {
  color: var(--xd-themes-ink);
  background: var(--xd-themes-bg);
  border-color: var(--xd-themes-border);
}
body[data-v21="true"] .xd-themes-btn:hover { background: var(--xd-themes-hover); }
body[data-v21="true"].themes-open .xd-themes-btn {
  color: var(--xd-themes-open-ink);
  background: var(--xd-themes-open);
  border-color: var(--xd-themes-open-border);
}

/* Accordion bay: grid 0fr→1fr expand, same v21-stage-ease */
body[data-v21="true"] #experience-drawer .xd-acc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--v21-stage-ease);
}
body[data-v21="true"] #experience-drawer .xd-acc-inner {
  overflow: hidden;
  min-height: 0;
}
body[data-v21="true"].paper-open #experience-drawer #xd-paper-bay,
body[data-v21="true"].words-open #experience-drawer #xd-words-bay,
body[data-v21="true"].bg-open #experience-drawer #xd-bg-bay,
body[data-v21="true"].themes-open #experience-drawer #xd-themes-bay {
  grid-template-rows: 1fr;
}
body[data-v21="true"].paper-open #experience-drawer #xd-paper-bay > .xd-acc-inner,
body[data-v21="true"].words-open #experience-drawer #xd-words-bay > .xd-acc-inner,
body[data-v21="true"].bg-open #experience-drawer #xd-bg-bay > .xd-acc-inner,
body[data-v21="true"].themes-open #experience-drawer #xd-themes-bay > .xd-acc-inner {
  min-height: min-content;
}

/* Divider rules inside accordions */
body[data-v21="true"] #experience-drawer .xd-acc-rule {
  display: block;
  width: 28px;
  height: 1px;
  margin: 10px auto 12px;
  background: rgba(44, 74, 110, 0.28);
}
body[data-v21="true"] #experience-drawer .xd-acc-rule-words {
  background: rgba(44, 74, 110, 0.36);
}
body[data-v21="true"] #experience-drawer .xd-acc-rule-bg {
  background: rgba(58, 94, 72, 0.36);
}

/* Screenplay face picker. Geometry is deliberately untouched. */
body[data-v21="true"] #experience-drawer .xd-fonts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0 14px;
}
body[data-v21="true"] #experience-drawer .xd-fonts button {
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(44, 74, 110, .14);
  border-radius: 8px;
  color: #2c4a6e;
  background: rgba(255,255,255,.30);
  font: 600 9px/1.15 var(--ui);
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-fonts button.on {
  color: #fff;
  background: #2c4a6e;
  border-color: #1e3450;
}

/* ── Font tiles: two rows of three ──────────────────────────────────────── */
body[data-v21="true"] #experience-drawer .xd-recipes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0 4px;
}

body[data-v21="true"] #experience-drawer .xd-recipe {
  position: relative;
  height: 132px;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--v21-ink) 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--v21-ink) 3%, rgba(255,255,255,.22));
  cursor: pointer;
  overflow: hidden;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms cubic-bezier(0.2,0.9,0.2,1);
  text-align: left;
}

body[data-v21="true"] #experience-drawer .xd-recipe:hover {
  background: color-mix(in srgb, var(--v21-ink) 6%, rgba(255,255,255,.30));
  transform: translateY(-1px);
}

body[data-v21="true"] #experience-drawer .xd-recipe.on {
  border-color: color-mix(in srgb, var(--v21-accent) 55%, transparent);
  background: color-mix(in srgb, var(--v21-accent) 9%, rgba(255,255,255,.26));
  box-shadow:
    inset 0 1px rgba(255,255,255,.55),
    0 0 0 2.5px color-mix(in srgb, var(--v21-accent) 22%, transparent);
}

body[data-v21="true"] #experience-drawer .xd-recipe:focus-visible {
  outline: 2px solid var(--v21-accent);
  outline-offset: 2px;
}

body[data-v21="true"] #experience-drawer .xd-recipe-spec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0 8px 10px;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #0a0a09;
  pointer-events: none;
  overflow: hidden;
  letter-spacing: 0;
}

body[data-v21="true"] #experience-drawer .xd-rs-glyph {
  display: block;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 10px;
  padding: 0;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: visible;
}

body[data-v21="true"] #experience-drawer .xd-rs-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

body[data-v21="true"] #experience-drawer .xd-rs-slug,
body[data-v21="true"] #experience-drawer .xd-rs-action {
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: 0;
  text-transform: none;
}

body[data-v21="true"] #experience-drawer .xd-rs-slug {
  font-size: 10px;
  line-height: 1.2;
}
body[data-v21="true"] #experience-drawer .xd-rs-slug.is-bold {
  font-weight: 700;
}
body[data-v21="true"] #experience-drawer .xd-rs-slug.is-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
body[data-v21="true"] #experience-drawer .xd-rs-slug.is-caps {
  text-transform: uppercase;
}

body[data-v21="true"] #experience-drawer .xd-rs-action {
  font-size: 9px;
  line-height: 1.2;
}

/* ── Recipe-driven screenplay rendering ─────────────────────────────────── */

/* Font weight: recipe sets --recipe-weight; no effect until body[data-recipe] */
body[data-v21="true"][data-recipe] #pages,
body[data-v21="true"][data-recipe] .sheet,
body[data-v21="true"][data-recipe] .sheet .blk {
  font-weight: var(--recipe-weight, 400);
}

/*
 * Recipe font-size calibration: --recipe-font-size is computed at runtime
 * (calibrateRecipeFonts in v21.js) so that each font's 1ch equals the
 * canonical Courier 10-CPI advance (≈9.6px at 96dpi), preserving FD line
 * breaks and page count. Defaults to 12pt when no calibration is needed.
 */
body[data-v21="true"][data-recipe] .sheet,
body[data-v21="true"][data-recipe] .pagenum {
  font-size: var(--recipe-font-size, 12pt);
}

/*
 * Lock line-height and vertical block margins to absolute pixels when a
 * recipe is active. This decouples them from font-size, ensuring that
 * calibration-scaled font-sizes (e.g. 14.4px for a wider face) do NOT
 * alter line count or inter-block spacing from canonical FD values.
 *
 * Values match canonical 12pt/96dpi: 1em = 16px, 2em = 32px.
 */
body[data-v21="true"][data-recipe] .sheet {
  line-height: 16px;
}
body[data-v21="true"][data-recipe] .sheet .blk[data-type="scene"] {
  margin-top: 32px;
}
body[data-v21="true"][data-recipe] .sheet .blk[data-type="action"],
body[data-v21="true"][data-recipe] .sheet .blk[data-type="character"],
body[data-v21="true"][data-recipe] .sheet .blk[data-type="transition"],
body[data-v21="true"][data-recipe] .sheet .dual-row {
  margin-top: 16px;
}

/*
 * Font ascenders differ even when their horizontal advances are calibrated.
 * These tiny page-local baseline corrections keep the first block on every
 * subsequent sheet at the canonical Courier position without touching the
 * document's margins, indents, padding, or line-height.
 */
body[data-v21="true"][data-recipe="press"] .sheet:not(:first-child) .blk,
body[data-v21="true"][data-recipe="press"] .sheet:not(:first-child) .dual-row,
body[data-v21="true"][data-recipe="liberation-mono"] .sheet:not(:first-child) .blk,
body[data-v21="true"][data-recipe="liberation-mono"] .sheet:not(:first-child) .dual-row,
body[data-v21="true"][data-recipe="tome"] .sheet:not(:first-child) .blk,
body[data-v21="true"][data-recipe="tome"] .sheet:not(:first-child) .dual-row {
  position: relative;
  top: -0.5px;
}
body[data-v21="true"][data-recipe="ghost"] .sheet:not(:first-child) .blk,
body[data-v21="true"][data-recipe="ghost"] .sheet:not(:first-child) .dual-row,
body[data-v21="true"][data-recipe="inconsolata"] .sheet:not(:first-child) .blk,
body[data-v21="true"][data-recipe="inconsolata"] .sheet:not(:first-child) .dual-row {
  position: relative;
  top: -2.188px;
}

/* Small-caps on slugs and characters (tome recipe) */
body[data-v21="true"][data-recipe-caps="slug"] .sheet .blk[data-type="scene"],
body[data-v21="true"][data-recipe-caps="slug"] .sheet .blk[data-type="character"],
body[data-v21="true"][data-recipe-caps="slug"] .sheet .blk[data-type="transition"] {
  font-variant-caps: all-small-caps;
}

/* Screenplay type rendering: razor-sharp vector antialiasing & legibility optimization */
body[data-v21="true"] .sheet,
body[data-v21="true"] .sheet .blk,
body[data-v21="true"] #pages,
body[data-v21="true"] .pagenum {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

/* Print: restore canonical Courier 12pt and relative units for export */
@media print {
  body[data-v21="true"][data-recipe] .sheet,
  body[data-v21="true"][data-recipe] .pagenum {
    font-size: 12pt !important;
    line-height: 1 !important;
  }
  body[data-v21="true"][data-recipe] .sheet .blk[data-type="scene"] {
    margin-top: 2em !important;
  }
  body[data-v21="true"][data-recipe] .sheet .blk[data-type="action"],
  body[data-v21="true"][data-recipe] .sheet .blk[data-type="character"],
  body[data-v21="true"][data-recipe] .sheet .blk[data-type="transition"],
  body[data-v21="true"][data-recipe] .sheet .dual-row {
    margin-top: 1em !important;
  }
  body[data-v21="true"][data-recipe] .sheet .blk {
    font-weight: 400 !important;
    font-variant-caps: normal !important;
    -webkit-font-smoothing: auto !important;
  }
}

/* Ink mixer: three live RGB channels */
body[data-v21="true"] #experience-drawer .xd-ink-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
body[data-v21="true"] #experience-drawer .xd-ink-mix {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 10px 0 4px;
}
body[data-v21="true"] #experience-drawer .xd-ink-channel {
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-v21="true"] #experience-drawer .xd-ink-orb {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--v21-ink) 22%, transparent);
}
body[data-v21="true"] #experience-drawer .xd-ink-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 10px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink-track, #888);
  outline: none;
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-ink-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: var(--ink-track, #888);
}
body[data-v21="true"] #experience-drawer .xd-ink-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  margin-top: -2px;
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  border: 1px solid var(--xd-thumb-border);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] #experience-drawer .xd-ink-slider::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--ink-track, #888);
  border: none;
}
body[data-v21="true"] #experience-drawer .xd-ink-slider::-moz-range-thumb {
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  border: 1px solid var(--xd-thumb-border);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] #experience-drawer .xd-ink-slider:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #2c4a6e;
}

/* Contrast warning text */
body[data-v21="true"] #experience-drawer .xd-contrast-warn {
  font: 500 10.5px/1.4 var(--ui);
  color: #b84c1e;
  padding: 4px 0 2px;
}
body[data-v21="true"] #experience-drawer .xd-safe-ink {
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  font: 650 9px/1 var(--mono);
  cursor: pointer;
}

/* Desk / field color presets grid */
body[data-v21="true"] #experience-drawer .xd-desk-colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}

body[data-v21="true"] #experience-drawer .xd-gradients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0 4px;
}
body[data-v21="true"] #experience-drawer .xd-gradient {
  position: relative;
  height: 48px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  color: #fff;
  background: var(--gradient);
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-gradient.on {
  border-color: #fff;
  outline: 2px solid #3a5e48;
  outline-offset: 1px;
}

body[data-v21="true"] #experience-drawer .xd-user-arts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
}
body[data-v21="true"] #experience-drawer .xd-bg-notice {
  padding: 6px 2px 2px;
  color: #9d3d24;
  font: 550 10.5px/1.35 var(--ui);
}
body[data-v21="true"] #experience-drawer .xd-user-art-wrap {
  position: relative;
  flex: 0 0 88px;
  scroll-snap-align: start;
}
body[data-v21="true"] #experience-drawer .xd-user-art {
  width: 88px;
  height: 54px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  color: #fff;
  background: #263229 var(--art) center / cover no-repeat;
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-user-art span {
  display: block;
  margin-top: 28px;
  overflow: hidden;
  padding: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(0,0,0,.42);
  font: 600 7.5px/1 var(--ui);
}
body[data-v21="true"] #experience-drawer .xd-user-art-wrap.on .xd-user-art {
  border-color: #fff;
  outline: 2px solid #3a5e48;
}
body[data-v21="true"] #experience-drawer .xd-user-art-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #7c2f37;
  font: 700 11px/18px var(--ui);
  cursor: pointer;
}

/* User-saved themes */
body[data-v21="true"] #experience-drawer .xd-user-themes {
  padding: 0 2px;
}
body[data-v21="true"] #experience-drawer .xd-user-theme {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
body[data-v21="true"] #experience-drawer .xd-user-theme-apply {
  flex: 1;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(61, 72, 56, 0.14);
  background: rgba(255,255,255,.55);
  font: 500 11.5px/1 var(--ui);
  color: #2b2226;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms ease;
}
body[data-v21="true"] #experience-drawer .xd-user-theme-apply:hover {
  background: rgba(255,255,255,.85);
}
body[data-v21="true"] #experience-drawer .xd-user-theme-rename,
body[data-v21="true"] #experience-drawer .xd-user-theme-del {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.08);
  font: 600 13px/1 var(--ui);
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease;
}
body[data-v21="true"] #experience-drawer .xd-user-theme-rename:hover {
  background: rgba(44, 74, 110, .14);
  color: #2c4a6e;
}
body[data-v21="true"] #experience-drawer .xd-user-theme-del:hover {
  background: rgba(180, 40, 40, 0.15);
  color: #b42828;
}

/* One-shot sheen on a line you just left. Glint color is paper-tinted. */
body[data-v21="true"] .xd-shimmer-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  cursor: pointer;
  color: color-mix(in srgb, var(--v21-ink) 78%, transparent);
  font: 550 12px/1 var(--ui);
  user-select: none;
}
body[data-v21="true"] .xd-shimmer-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--v21-accent);
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-v21="true"] .sheet .blk.urn-shimmer-play {
    background-image: linear-gradient(
      100deg,
      var(--shimmer-ink) 0%,
      var(--shimmer-ink) 36%,
      var(--shimmer-glint, #fff) 50%,
      var(--shimmer-ink) 64%,
      var(--shimmer-ink) 100%
    );
    background-size: 180% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--shimmer-ink, currentColor);
    animation: urn-shimmer-sweep 3s ease-in-out forwards;
  }
}
@keyframes urn-shimmer-sweep {
  from { background-position: 100% 0; }
  to { background-position: -20% 0; }
}
@media print {
  body[data-v21="true"] #pages,
  body[data-v21="true"] .sheet,
  body[data-v21="true"] .sheet .blk {
    font-family: "Courier Final Draft", "Courier Prime", "Courier New", Courier, monospace !important;
  }
  body[data-v21="true"] .sheet .blk.urn-shimmer-play {
    animation: none !important;
    -webkit-text-fill-color: unset !important;
    background-image: none !important;
  }
}

/* Tracking CSS variable */
body[data-v21="true"] { --page-tracking: 0em; }
body[data-v21="true"] .sheet .blk {
  letter-spacing: var(--page-tracking, 0em);
}

body[data-v21="true"] .xd-stack-btn {
  width: 100%;
  height: 38px;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(61, 72, 56, 0.10);
  border-radius: 10px;
  color: #2c4a6e;
  background: rgba(44, 74, 110, 0.10);
  font: 650 12px/1 var(--ui);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(0.2, 0.9, 0.2, 1),
    color 140ms ease-out,
    background-color 140ms ease-out,
    border-color 140ms ease-out;
}
body[data-v21="true"] .xd-stack-btn .ic {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-v21="true"] .xd-stack-btn:hover {
  transform: translateY(-1px);
  background: rgba(44, 74, 110, 0.18);
}
body[data-v21="true"] .xd-stack-btn[aria-pressed="true"] {
  color: #fff;
  background: #2c4a6e;
  border-color: #223a58;
}
body[data-v21="true"] .xd-stack-btn[aria-pressed="true"]:hover {
  color: #fff;
  background: #365882;
  border-color: #223a58;
}
body[data-v21="true"] #experience-drawer .xd-stack {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--v21-stage-ease);
}
body[data-v21="true"] #experience-drawer .xd-stack-inner {
  overflow: hidden;
}
body[data-v21="true"].stack-open #experience-drawer .xd-stack {
  grid-template-rows: 1fr;
}
body[data-v21="true"].stack-open #experience-drawer .xd-stack-inner {
  min-height: min-content;
}
body[data-v21="true"] #experience-drawer .xd-stack-rule {
  display: block;
  width: 28px;
  height: 1px;
  margin: 10px auto 12px;
  background: rgba(44, 74, 110, 0.38);
}
body[data-v21="true"] #experience-drawer .xd-stack-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin: 8px 0 14px;
}
body[data-v21="true"] #experience-drawer .xd-arts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 8px 0 14px;
}
body[data-v21="true"] #experience-drawer .xd-art {
  position: relative;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(55, 65, 51, .12);
  border-radius: 8px;
  color: #fff;
  background-color: #2a322c;
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  font: 650 8px/1 var(--ui);
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-art.on {
  outline: 2px solid #2c4a6e;
  outline-offset: 1px;
}
body[data-v21="true"] #experience-drawer .xd-desk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 14px;
}
body[data-v21="true"] #experience-drawer .xd-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(61, 72, 56, .10);
  border-radius: 8px;
  color: var(--v21-ink);
  background: rgba(255,255,255,.26);
  font: 550 10px/1 var(--ui);
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-stack .xd-sounds {
  display: flex;
  flex-wrap: wrap;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin-top: 8px;
  margin-bottom: 10px;
}

/* Old sibling tray is retired. One themes surface lives under Pages. */
body[data-v21="true"] #palette-tray {
  display: none !important;
}

/*
 * Footer instrument strip: global sliders, identical geometry, one accent
 * each. Fixed grid columns + tabular numerals keep the strip's width
 * constant while dragging.
 */
body[data-v21="true"] .v21-rack {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: 12px;
  height: 100%;
}

body[data-v21="true"] .v21-fader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--fader-accent, var(--v21-accent)) 85%, var(--v21-ink));
  font: 600 10px/1 var(--mono);
  letter-spacing: .01em;
  text-transform: none;
  cursor: pointer;
  user-select: none;
}

body[data-v21="true"] .v21-fader input[type="range"],
body[data-v21="true"] .v21-fader input {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  vertical-align: middle;
  --fader-val: 50%;
}

/* WebKit Track */
body[data-v21="true"] .v21-fader input[type="range"]::-webkit-slider-runnable-track,
body[data-v21="true"] .v21-fader input::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  border-radius: 999px;
  border: none !important;
  background: linear-gradient(
    to right,
    var(--fader-accent, var(--v21-accent)) 0% var(--fader-val, 50%),
    color-mix(in srgb, var(--v21-ink, #242b22) 16%, transparent) var(--fader-val, 50%) 100%
  ) !important;
}

/* WebKit Thumb */
body[data-v21="true"] .v21-fader input[type="range"]::-webkit-slider-thumb,
body[data-v21="true"] .v21-fader input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fader-accent, var(--v21-accent));
  cursor: pointer;
  margin-top: -2px; /* centers 6px thumb on 2px track */
  border: 0.75px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

body[data-v21="true"] .v21-fader input[type="range"]:hover::-webkit-slider-thumb,
body[data-v21="true"] .v21-fader input:hover::-webkit-slider-thumb {
  transform: scale(1.3);
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.38);
}

/* Firefox Track */
body[data-v21="true"] .v21-fader input[type="range"]::-moz-range-track,
body[data-v21="true"] .v21-fader input::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--v21-ink, #242b22) 16%, transparent);
}

/* Firefox Progress Fill */
body[data-v21="true"] .v21-fader input[type="range"]::-moz-range-progress,
body[data-v21="true"] .v21-fader input::-moz-range-progress {
  height: 2px;
  background: var(--fader-accent, var(--v21-accent));
  border-radius: 999px;
}

/* Firefox Thumb */
body[data-v21="true"] .v21-fader input[type="range"]::-moz-range-thumb,
body[data-v21="true"] .v21-fader input::-moz-range-thumb {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fader-accent, var(--v21-accent));
  cursor: pointer;
  border: 0.75px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

body[data-v21="true"] .v21-fader output {
  min-width: 26px;
  color: color-mix(in srgb, var(--v21-ink) 58%, transparent);
  font: 550 9px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body[data-v21="true"] .v21-glass-fader  { --fader-accent: #4f8f8b; } /* sea-glass teal */
body[data-v21="true"] .v21-lift-fader { --fader-accent: #8378b5; } /* violet */
body[data-v21="true"] .v21-bokeh-fader     { --fader-accent: #5da096; } /* optical focus teal */
body[data-v21="true"] .v21-zoom-fader     { --fader-accent: #6f9a68; } /* moss */
body[data-v21="true"] .v21-volume-fader   { --fader-accent: #a08060; } /* warm copper */

/* StoryGit now lives as a substantial File subsection, not a peer stage. */
body[data-v21="true"] #filemenu .file-storygit-group {
  margin-top: 2px;
  padding-top: 10px;
  border-bottom: 0;
}

body[data-v21="true"] #filemenu #storygit[data-file-section] {
  position: static;
  width: auto;
  pointer-events: auto;
  visibility: visible;
  transform: none;
  transition: none;
}

body[data-v21="true"] #filemenu #storygit[data-file-section] .sg-card {
  max-height: 365px;
  border-radius: 13px;
  background: rgba(250, 251, 247, .62);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .70),
    0 12px 28px -22px rgba(23, 39, 21, .36);
}

body[data-v21="true"] #filemenu #storygit[data-file-section] .sg-head {
  min-height: 46px;
  padding: 11px 12px 9px;
}

body[data-v21="true"] #filemenu #storygit[data-file-section] .sg-head h2 {
  font-size: 13px;
}

body[data-v21="true"] #filemenu #storygit[data-file-section] .sg-kicker {
  font-size: 7px;
}

body[data-v21="true"] #filemenu #storygit[data-file-section] .sg-close {
  display: none;
}

body[data-v21="true"] #filemenu #storygit[data-file-section] .sg-body {
  padding: 11px 12px 12px;
}

/*
 * Storygit drawer: the settings drawer mirrored to the page's LEFT edge.
 * Closed, it lives entirely beneath the sheet; the camera shifts right while
 * the glass card springs out leftward with the same spring family.
 */
body[data-v21="true"] #storygit {
  position: absolute;
  top: 10px;
  left: calc(50% - 4.25in);
  z-index: 1;
  width: 500px;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  transition:
    transform var(--v21-stage-duration) var(--v21-stage-ease),
    visibility 0s var(--v21-stage-duration);
  backface-visibility: hidden;
}

body[data-v21="true"].storygit-open #storygit {
  pointer-events: auto;
  transform: translate3d(-520px, 0, 0);
  visibility: visible;
  transition:
    transform var(--v21-stage-duration) var(--v21-stage-ease),
    visibility 0s;
}

body[data-v21="true"] #storygit .sg-card {
  display: flex;
  flex-direction: column;
  max-height: min(760px, calc(100vh - 110px));
  overflow: hidden;
  color: var(--v21-ink);
  background: rgba(250, 251, 247, .72);
  border: 1px solid rgba(58, 69, 54, .10);
  border-radius: 17px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .76),
    -12px 28px 52px -26px rgba(23, 39, 21, .42);
  backdrop-filter: blur(23px) saturate(1.08);
  -webkit-backdrop-filter: blur(23px) saturate(1.08);
}

body[data-v21="true"] .sg-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 54px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid rgba(61, 72, 56, .10);
}

body[data-v21="true"] .sg-head h2 {
  margin: 0;
  font: 650 15px/1.15 var(--ui);
  letter-spacing: -.012em;
}

body[data-v21="true"] .sg-kicker {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--v21-ink) 45%, transparent);
  font: 550 8px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-v21="true"] .sg-branch-tag {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid rgba(111, 154, 104, .26);
  border-radius: 999px;
  background: rgba(111, 154, 104, .12);
  color: #456442;
  font: 600 9px/1 var(--mono);
  letter-spacing: .04em;
}

body[data-v21="true"] .sg-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--v21-ink) 62%, transparent);
  font: 400 17px/1 var(--ui);
  cursor: pointer;
}

body[data-v21="true"] .sg-close:hover {
  background: rgba(255, 255, 255, .6);
  color: var(--v21-ink);
}

body[data-v21="true"] .sg-body {
  display: grid;
  gap: 10px;
  padding: 13px 15px 15px;
  overflow-y: auto;
}

body[data-v21="true"] .sg-commit-row {
  display: flex;
  gap: 6px;
}

body[data-v21="true"] .sg-commit-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(61, 72, 56, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  color: var(--v21-ink);
  font: 500 11px var(--mono);
}

body[data-v21="true"] .sg-commit-row button {
  padding: 8px 12px;
  border: 1px solid rgba(111, 154, 104, .28);
  border-radius: 8px;
  background: rgba(111, 154, 104, .13);
  color: #456442;
  font: 600 11px var(--ui);
  cursor: pointer;
}

body[data-v21="true"] .sg-commit-row button:hover {
  background: rgba(111, 154, 104, .2);
}

body[data-v21="true"] #sg-branch-select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(61, 72, 56, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
  color: var(--v21-ink);
  font: 550 10px var(--mono);
}

body[data-v21="true"] #sg-branch-tree {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(61, 72, 56, .10);
  border-radius: 10px;
  background: rgba(244, 247, 240, .48);
}

body[data-v21="true"] .sg-tree-branch {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--v21-ink);
  text-align: left;
  cursor: pointer;
}

body[data-v21="true"] .sg-tree-branch:hover,
body[data-v21="true"] .sg-tree-branch.on {
  background: rgba(111, 154, 104, .12);
}

body[data-v21="true"] .sg-tree-line {
  width: 7px;
  height: 7px;
  border: 2px solid #6f9a68;
  border-radius: 50%;
  box-shadow: 0 8px 0 -3px #6f9a68;
}

body[data-v21="true"] .sg-tree-name,
body[data-v21="true"] .sg-tree-count,
body[data-v21="true"] .sg-tree-empty {
  font: 600 9.5px/1.25 var(--mono);
}

body[data-v21="true"] .sg-tree-count {
  color: color-mix(in srgb, var(--v21-ink) 48%, transparent);
}

body[data-v21="true"] .sg-tree-fork {
  grid-column: 2 / 4;
  color: color-mix(in srgb, var(--v21-ink) 50%, transparent);
  font: 500 8.5px/1.2 var(--mono);
}

body[data-v21="true"] .sg-tree-invalid {
  border-color: rgba(163, 70, 95, .35) !important;
}

body[data-v21="true"] #sg-commit-list {
  display: grid;
  gap: 6px;
}

body[data-v21="true"] .sg-commit-card {
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid rgba(61, 72, 56, .10);
  border-radius: 11px;
  background: rgba(255, 255, 255, .42);
}

body[data-v21="true"] .sg-commit-card.selected {
  border-color: rgba(111, 154, 104, .32);
  background: rgba(111, 154, 104, .09);
}

body[data-v21="true"] .sg-commit-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font: 500 9px/1 var(--mono);
  color: color-mix(in srgb, var(--v21-ink) 55%, transparent);
}

body[data-v21="true"] .sg-commit-hash {
  color: #456442;
  font-weight: 650;
}

body[data-v21="true"] .sg-commit-words { margin-left: auto; }
body[data-v21="true"] .sg-delta-plus { color: #4f7a49; }
body[data-v21="true"] .sg-delta-minus { color: #a3465f; }

body[data-v21="true"] .sg-commit-msg {
  font: 500 12px/1.35 var(--ui);
  color: var(--v21-ink);
}

body[data-v21="true"] .sg-commit-branch {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(111, 154, 104, .10);
  color: #456442;
  font: 600 8px/1.2 var(--mono);
}

body[data-v21="true"] .sg-commit-actions {
  display: flex;
  gap: 6px;
}

body[data-v21="true"] .sg-btn {
  padding: 4px 9px;
  border: 1px solid rgba(61, 72, 56, .13);
  border-radius: 7px;
  background: rgba(255, 255, 255, .5);
  color: var(--v21-ink);
  font: 550 9.5px var(--mono);
  cursor: pointer;
}

body[data-v21="true"] .sg-btn:hover {
  background: rgba(255, 255, 255, .78);
}

body[data-v21="true"] .sg-empty {
  padding: 10px 2px;
  color: color-mix(in srgb, var(--v21-ink) 50%, transparent);
  font: 500 10.5px/1.5 var(--mono);
}

body[data-v21="true"] #sg-diff-pane {
  display: grid;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(61, 72, 56, .10);
}

body[data-v21="true"] .sg-diff-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

body[data-v21="true"] .sg-diff-head h4 {
  margin: 0;
  font: 650 11px var(--ui);
}

body[data-v21="true"] .sg-diff-head span {
  font: 500 9px var(--mono);
  color: color-mix(in srgb, var(--v21-ink) 50%, transparent);
}

body[data-v21="true"] .sg-diff-list {
  display: grid;
  gap: 4px;
}

body[data-v21="true"] .sg-diff-item {
  padding: 6px 8px;
  border-radius: 7px;
  font: 500 10.5px/1.45 var(--mono);
  overflow-wrap: anywhere;
}

body[data-v21="true"] .sg-diff-add {
  background: rgba(111, 154, 104, .12);
  color: #3f5f3a;
}

body[data-v21="true"] .sg-diff-remove {
  background: rgba(163, 70, 95, .10);
  color: #8c3b52;
}

body[data-v21="true"] .sg-diff-mod {
  display: grid;
  gap: 3px;
  padding: 0;
  background: transparent;
}

body[data-v21="true"] .sg-diff-mod > div {
  padding: 6px 8px;
  border-radius: 7px;
}


/* Storygit slider: scrub through draft history. */
body[data-v21="true"] #sg-slider-container {
  margin-bottom: 10px;
}

body[data-v21="true"] .sg-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

body[data-v21="true"] .sg-slider-title {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .03em;
  color: var(--v21-ink);
  opacity: .7;
}

body[data-v21="true"] .sg-slider-label {
  font: 500 9px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--v21-ink) 52%, transparent);
  white-space: nowrap;
}

body[data-v21="true"] .sg-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink-track, #888);
  outline: none;
  cursor: pointer;
}
body[data-v21="true"] .sg-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: var(--ink-track, #888);
}
body[data-v21="true"] .sg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  margin-top: -2px;
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  border: 1px solid var(--xd-thumb-border);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] .sg-slider::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--ink-track, #888);
  border: none;
}
body[data-v21="true"] .sg-slider::-moz-range-thumb {
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  border: 1px solid var(--xd-thumb-border);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] .sg-slider:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #2c4a6e;
}

body[data-v21="true"] .sg-commit-card.sg-slider-active {
  border-color: var(--v21-accent, #4f8f8b);
  box-shadow: 0 0 0 1.5px var(--v21-accent, #4f8f8b);
}

/*
 * Settings drawer.
 * Its closed position is entirely beneath the persistent sheet. The camera
 * pulls back, then the glass instrument travels out from the page's right
 * edge without changing size or fading its contents independently.
 */
body[data-v21="true"] #settings.settings-drawer {
  display: block !important;
  position: absolute !important;
  inset: auto !important;
  top: 10px !important;
  left: calc(50% + 4.25in - 500px) !important;
  z-index: 1 !important;
  width: 500px !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  transition:
    transform var(--v21-stage-duration) var(--v21-stage-ease),
    visibility 0s var(--v21-stage-duration);
  backface-visibility: hidden;
}

body[data-v21="true"] #settings.settings-drawer.open {
  pointer-events: auto;
  transform: translate3d(520px, 0, 0);
  visibility: visible;
  transition:
    transform var(--v21-stage-duration) var(--v21-stage-ease),
    visibility 0s;
}

body[data-v21="true"] #settings.settings-drawer .modal-card {
  /* Settings glass is always light; keep its ink readable under every kit. */
  --v21-ink: #1f261d;
  width: 100% !important;
  max-width: none !important;
  max-height: min(760px, calc(100vh - 110px)) !important;
  margin: 0 !important;
  overflow: hidden;
  color: var(--v21-ink);
  background: rgba(250, 251, 247, .72) !important;
  border: 1px solid rgba(58, 69, 54, .10) !important;
  border-radius: 17px !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .76),
    12px 28px 52px -26px rgba(23, 39, 21, .42) !important;
  backdrop-filter: blur(23px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(23px) saturate(1.08) !important;
  animation: none !important;
}

body[data-v21="true"] #settings .settings-head {
  min-height: 54px;
  padding: 13px 15px 11px !important;
  border-bottom: 1px solid rgba(61, 72, 56, .10) !important;
}

body[data-v21="true"] #settings .settings-head h2 {
  margin: 0;
  color: var(--v21-ink);
  font: 650 15px/1.15 var(--ui);
  letter-spacing: -.012em;
}

body[data-v21="true"] #settings .settings-kicker {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--v21-ink) 45%, transparent);
  font: 550 8px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-v21="true"] #settings .modal-x {
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: color-mix(in srgb, var(--v21-ink) 58%, transparent);
  background: transparent;
  box-shadow: none;
  font: 500 18px/1 var(--ui);
}

body[data-v21="true"] #settings .modal-x:hover {
  color: var(--v21-ink);
  border-color: rgba(61, 72, 56, .11);
  background: rgba(255, 255, 255, .55);
  transform: translateY(-1px);
}

body[data-v21="true"] #settings-body {
  display: grid !important;
  grid-template-columns: 106px minmax(0, 1fr) !important;
  min-height: 420px;
  overflow: hidden;
}

body[data-v21="true"] #settings-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 13px 9px !important;
  border-right: 1px solid rgba(61, 72, 56, .09) !important;
  border-bottom: 0 !important;
  background: rgba(244, 247, 241, .30);
}

body[data-v21="true"] #settings .set-tab {
  width: 100%;
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: color-mix(in srgb, var(--v21-ink) 60%, transparent);
  background: transparent;
  text-align: left;
  font: 560 10px/1 var(--ui);
  letter-spacing: .005em;
  cursor: pointer;
  transition:
    transform 130ms cubic-bezier(.2, .9, .2, 1),
    color 130ms ease-out,
    background-color 130ms ease-out,
    box-shadow 130ms ease-out;
}

body[data-v21="true"] #settings .set-tab:hover {
  color: var(--v21-ink);
  background: rgba(255, 255, 255, .46);
  transform: translateY(-1px);
}

body[data-v21="true"] #settings .set-tab.on {
  color: color-mix(in srgb, var(--v21-accent) 72%, #253021);
  background: color-mix(in srgb, var(--v21-accent) 12%, rgba(255,255,255,.54));
  border-color: color-mix(in srgb, var(--v21-accent) 20%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .58);
}

body[data-v21="true"] #settings .settings-panes {
  min-width: 0;
  max-height: min(690px, calc(100vh - 165px));
  overflow: auto;
}

body[data-v21="true"] #settings .set-pane {
  display: none;
  max-height: none;
  padding: 17px 18px 20px;
  overflow: visible;
}

body[data-v21="true"] #settings .set-pane.on {
  display: block;
  animation: none;
}

body[data-v21="true"] #settings .set-pane h3 {
  margin: 0 0 4px;
  color: var(--v21-ink);
  font: 650 15px/1.2 var(--ui);
  letter-spacing: -.012em;
}

body[data-v21="true"] #settings .set-deck {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--v21-ink) 48%, transparent);
  font: 500 10px/1.4 var(--ui);
}

body[data-v21="true"] #settings .set-check,
body[data-v21="true"] #settings .set-cycle-row,
body[data-v21="true"] #settings .set-select-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 48px;
  margin: 0 0 7px;
  padding: 9px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(61, 72, 56, .075);
  border-radius: 10px;
  color: var(--v21-ink);
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition:
    transform 140ms cubic-bezier(.2, .9, .2, 1),
    border-color 140ms ease-out,
    background-color 140ms ease-out,
    box-shadow 140ms ease-out;
}

body[data-v21="true"] #settings .set-check:hover,
body[data-v21="true"] #settings .set-cycle-row:hover,
body[data-v21="true"] #settings .set-select-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--v21-accent) 19%, transparent);
  background: rgba(255, 255, 255, .49);
  box-shadow: 0 5px 15px -10px rgba(27, 41, 24, .45);
}

body[data-v21="true"] #settings .set-check input {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--v21-accent);
}

body[data-v21="true"] #settings .set-check b,
body[data-v21="true"] #settings .set-cycle-row b,
body[data-v21="true"] #settings .set-select-row b {
  display: block;
  color: var(--v21-ink);
  font: 620 10.5px/1.25 var(--ui);
}

body[data-v21="true"] #settings .set-check span,
body[data-v21="true"] #settings .set-cycle-row span,
body[data-v21="true"] #settings .set-select-row span {
  display: block;
  margin-top: 3px;
  color: color-mix(in srgb, var(--v21-ink) 48%, transparent);
  font: 480 9.5px/1.35 var(--ui);
}

body[data-v21="true"] #settings .set-check-primary {
  border-color: color-mix(in srgb, var(--v21-accent) 18%, transparent);
  background: color-mix(in srgb, var(--v21-accent) 7%, rgba(255,255,255,.30));
}

body[data-v21="true"] #settings .set-cycle-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: default;
}

body[data-v21="true"] #settings .set-select-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: default;
}

body[data-v21="true"] #settings .set-select-row select {
  min-width: 112px;
  height: 28px;
  padding: 0 25px 0 8px;
  border: 1px solid rgba(61, 72, 56, .12);
  border-radius: 7px;
  color: var(--v21-ink);
  background-color: rgba(255,255,255,.54);
  font: 560 9px/1 var(--ui);
}

body[data-v21="true"] #settings .set-storage-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0;
}

body[data-v21="true"] #settings .set-storage-status > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(61,72,56,.075);
  border-radius: 9px;
  background: rgba(255,255,255,.24);
}

body[data-v21="true"] #settings .set-storage-status b,
body[data-v21="true"] #settings .set-storage-status span {
  display: block;
}

body[data-v21="true"] #settings .set-storage-status b {
  font: 620 8.5px/1.2 var(--mono);
}

body[data-v21="true"] #settings .set-status {
  margin-top: 4px;
  font: 500 8px/1.2 var(--ui);
}

body[data-v21="true"] #settings .set-status.ready {
  color: color-mix(in srgb, var(--v21-accent) 82%, var(--v21-ink));
}

body[data-v21="true"] #settings .set-status.pending {
  color: color-mix(in srgb, var(--v21-ink) 45%, transparent);
}

body[data-v21="true"] #settings .set-cycle-row button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 78px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(61, 72, 56, .11);
  border-radius: 7px;
  color: var(--v21-ink);
  background: rgba(255, 255, 255, .48);
  font: 590 9px/1 var(--mono);
  cursor: pointer;
}

body[data-v21="true"] #settings .set-cycle-row button span {
  margin: 0;
  color: inherit;
  font: inherit;
}

body[data-v21="true"] #settings .set-cycle-row button i {
  color: color-mix(in srgb, var(--v21-accent) 72%, var(--v21-ink));
  font: normal 12px/1 var(--ui);
}

body[data-v21="true"] #settings .vault-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 5px 0 12px;
}

body[data-v21="true"] #settings .vault-stats div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(61, 72, 56, .075);
  border-radius: 9px;
  color: color-mix(in srgb, var(--v21-ink) 45%, transparent);
  background: rgba(255, 255, 255, .25);
  font: 520 8px/1.2 var(--mono);
}

body[data-v21="true"] #settings .vault-stats b {
  display: block;
  margin-top: 5px;
  color: var(--v21-ink);
  font: 650 16px/1 var(--ui);
  font-variant-numeric: tabular-nums;
}

body[data-v21="true"] #settings .set-data-principles {
  display: grid;
  gap: 6px;
}

body[data-v21="true"] #settings .set-data-principles > div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 9px;
  border-left: 2px solid color-mix(in srgb, var(--v21-accent) 38%, transparent);
  background: rgba(255, 255, 255, .20);
}

body[data-v21="true"] #settings .set-data-principles b {
  font: 620 9px/1.3 var(--mono);
}

body[data-v21="true"] #settings .set-data-principles span {
  color: color-mix(in srgb, var(--v21-ink) 54%, transparent);
  font: 480 9px/1.35 var(--ui);
}

body[data-v21="true"] #settings .set-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 13px;
}

body[data-v21="true"] #settings .set-actions .btn {
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font: 570 9px/1 var(--ui);
}

body[data-v21="true"] #settings .set-actions .danger {
  grid-column: 1 / -1;
  color: #7d3e3e;
  background: rgba(140, 64, 64, .055);
}

body[data-v21="true"] #settings .set-field {
  display: block;
  margin: 13px 0;
}

body[data-v21="true"] #settings .set-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: color-mix(in srgb, var(--v21-ink) 64%, transparent);
  font: 610 9.5px/1.2 var(--ui);
}

body[data-v21="true"] #settings .set-field input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid rgba(61, 72, 56, .12);
  border-radius: 8px;
  color: var(--v21-ink);
  background: rgba(255, 255, 255, .44);
  outline: none;
  font: 500 11px/1 var(--ui);
}

body[data-v21="true"] #settings .set-field input:focus {
  border-color: color-mix(in srgb, var(--v21-accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v21-accent) 10%, transparent);
}

body[data-v21="true"] #settings .set-soon {
  color: color-mix(in srgb, var(--v21-accent) 74%, var(--v21-ink));
  font: 520 8px/1 var(--mono);
}

body[data-v21="true"] #settings .set-note,
body[data-v21="true"] #settings .set-kv {
  margin: 12px 0 0;
  padding: 10px;
  border: 1px solid rgba(61, 72, 56, .075);
  border-radius: 9px;
  color: color-mix(in srgb, var(--v21-ink) 58%, transparent);
  background: rgba(255, 255, 255, .22);
  font: 480 9.5px/1.5 var(--ui);
}

body[data-v21="true"] #settings .set-kv b {
  color: color-mix(in srgb, var(--v21-accent) 72%, var(--v21-ink));
}

/* Settings uses the paper as its occluder, exactly like File. */
body[data-v21="true"].settings-open #wpcluster {
  transform: translateX(
    calc(
      -1 * (
        var(--v21-toolbar-gap, 14px) +
        var(--v21-toolbar-width, 36px) +
        20px
      )
    )
  ) !important;
  opacity: 0 !important;
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    inset 0 0 0 transparent,
    inset 0 0 0 transparent,
    0 0 0 0 transparent !important;
  z-index: 1 !important;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 320ms var(--v21-stage-ease),
    opacity 260ms var(--v21-stage-ease),
    box-shadow 280ms var(--v21-stage-ease),
    visibility 0s 320ms !important;
}

body[data-v21="true"].settings-open #wpcluster *,
body[data-v21="true"].settings-open #palette-tray {
  pointer-events: none !important;
}

body[data-v21="true"].settings-open #wpcluster::before,
body[data-v21="true"].settings-open #wpcluster::after {
  visibility: hidden;
  opacity: 0;
}

@media (max-width: 900px) {
  body[data-v21="true"] #experience-drawer {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 68px;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    min-width: 0;
    box-sizing: border-box;
    z-index: 80;
    transform: translateY(16px);
  }
  body[data-v21="true"].experience-open #experience-drawer {
    transform: translateY(0);
  }

  body[data-v21="true"] #settings.settings-drawer {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 68px !important;
    z-index: 80 !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(16px);
  }

  body[data-v21="true"] #settings.settings-drawer.open {
    opacity: 1;
    transform: translateY(0);
  }

  body[data-v21="true"] #settings-body {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }
}

@media (max-width: 930px) {
  body[data-v21="true"] {
    --v21-toolbar-gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-v21="true"] #zoomwrap,
  body[data-v21="true"] #wpcluster,
  body[data-v21="true"] #palette-tray,
  body[data-v21="true"] #experience-drawer,
  body[data-v21="true"] #experience-drawer .xd-themes,
  body[data-v21="true"] #experience-drawer .xd-stack,
  body[data-v21="true"] #wpcluster .wp-ai,
  body[data-v21="true"] #storygit,
  body[data-v21="true"] #settings.settings-drawer,
  body[data-v21="true"] #settings .set-pane.on,
  body[data-v21="true"] .btn,
  body[data-v21="true"] .tbtn {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

body[data-v21="true"].pref-reduced-motion *,
body[data-v21="true"].pref-reduced-motion *::before,
body[data-v21="true"].pref-reduced-motion *::after {
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
}

body[data-v21="true"].pref-reduced-transparency #settings .modal-card,
body[data-v21="true"].pref-reduced-transparency #storygit .sg-card,
body[data-v21="true"].pref-reduced-transparency #experience-drawer,
body[data-v21="true"].pref-reduced-transparency #palette-tray,
body[data-v21="true"].pref-reduced-transparency #wpcluster,
body[data-v21="true"].pref-reduced-transparency .menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: color-mix(in srgb, var(--v21-field) 94%, white 6%) !important;
}

body[data-v21="true"].pref-high-contrast {
  --v21-chrome-line: color-mix(in srgb, var(--v21-ink) 30%, transparent);
}

body[data-v21="true"].pref-high-contrast #settings .set-check,
body[data-v21="true"].pref-high-contrast #settings .set-cycle-row,
body[data-v21="true"].pref-high-contrast #settings .set-select-row,
body[data-v21="true"].pref-high-contrast #wpcluster,
body[data-v21="true"].pref-high-contrast .menu {
  border-color: color-mix(in srgb, var(--v21-ink) 28%, transparent) !important;
}

body[data-v21="true"].pref-high-contrast :focus-visible {
  outline: 2px solid var(--v21-accent-bright) !important;
  outline-offset: 2px !important;
}

body[data-v21="true"][data-ui-size="compact"] #settings .set-check,
body[data-v21="true"][data-ui-size="compact"] #settings .set-cycle-row,
body[data-v21="true"][data-ui-size="compact"] #settings .set-select-row {
  min-height: 42px;
  padding-block: 7px;
}

body[data-v21="true"][data-ui-size="large"] #settings.settings-drawer {
  width: 540px !important;
  left: calc(50% + 4.25in - 540px) !important;
}

body[data-v21="true"][data-ui-size="large"] #settings.settings-drawer.open {
  transform: translate3d(560px, 0, 0);
}

body[data-v21="true"][data-ui-size="large"] #settings .set-tab,
body[data-v21="true"][data-ui-size="large"] #settings .set-check b,
body[data-v21="true"][data-ui-size="large"] #settings .set-cycle-row b,
body[data-v21="true"][data-ui-size="large"] #settings .set-select-row b {
  font-size: 11.5px;
}

body[data-v21="true"][data-ui-size="large"] #settings .set-check span,
body[data-v21="true"][data-ui-size="large"] #settings .set-cycle-row span,
body[data-v21="true"][data-ui-size="large"] #settings .set-select-row span {
  font-size: 10.5px;
}

/* ============================================================
   PAPER COLOR SYSTEM — 18-hue gamut grid + contrast guards
   ============================================================
   Selectors use body[data-v21="true"][data-paper-color="clr-*"] so they share
   specificity (0,2,0,1) with the theme rules above but WIN by source order
   (later in file). This lets the user's explicit paper color choice override
   any active theme's --paper value.
   ============================================================ */

body[data-v21="true"][data-paper-color="clr-white"]     { --paper:#ffffff; --paper-ink:#141414; --paper-shade:#e0e0e0; }
body[data-v21="true"][data-paper-color="clr-warmwhite"] { --paper:#f6f1e8; --paper-ink:#241e14; --paper-shade:#d8cfc0; }
body[data-v21="true"][data-paper-color="clr-cream"]     { --paper:#f5ecd8; --paper-ink:#2a1f0f; --paper-shade:#d6c5a4; }
body[data-v21="true"][data-paper-color="clr-butter"]    { --paper:#f7ec90; --paper-ink:#28240a; --paper-shade:#d8cc5c; }
body[data-v21="true"][data-paper-color="clr-peach"]     { --paper:#fce8d8; --paper-ink:#48200e; --paper-shade:#e4c4a4; }
body[data-v21="true"][data-paper-color="clr-blush"]     { --paper:#f5dde5; --paper-ink:#3e1824; --paper-shade:#dec0cb; }
body[data-v21="true"][data-paper-color="clr-coral"]     { --paper:#f07868; --paper-ink:#2a0c08; --paper-shade:#d05040; }
body[data-v21="true"][data-paper-color="clr-red"]       { --paper:#c42020; --paper-ink:#fff0ee; --paper-shade:#940e0e; }
body[data-v21="true"][data-paper-color="clr-lilac"]     { --paper:#e8d8f4; --paper-ink:#2e1a40; --paper-shade:#c8b4dc; }
body[data-v21="true"][data-paper-color="clr-lavender"]  { --paper:#c8b8e8; --paper-ink:#26183e; --paper-shade:#a890cc; }
body[data-v21="true"][data-paper-color="clr-sky"]       { --paper:#d4e8f8; --paper-ink:#0e2840; --paper-shade:#a4c8e8; }
body[data-v21="true"][data-paper-color="clr-cobalt"]    { --paper:#1e3e8a; --paper-ink:#e8f0ff; --paper-shade:#0c2468; }
body[data-v21="true"][data-paper-color="clr-mint"]      { --paper:#c8f0e0; --paper-ink:#0e3020; --paper-shade:#a0d8c0; }
body[data-v21="true"][data-paper-color="clr-sage"]      { --paper:#c0d8b0; --paper-ink:#1a2e10; --paper-shade:#9cbc88; }
body[data-v21="true"][data-paper-color="clr-forest"]    { --paper:#2a4a32; --paper-ink:#e0f4e8; --paper-shade:#163022; }
body[data-v21="true"][data-paper-color="clr-black"]     { --paper:#000000; --paper-ink:#f7f2e8; --paper-shade:#000; }
body[data-v21="true"][data-paper-color="clr-slate"]     { --paper:#4e5e6e; --paper-ink:#e8eff4; --paper-shade:#303e4c; }
body[data-v21="true"][data-paper-color="clr-blueprint"] { --paper:#0e2040; --paper-ink:#dceeff; --paper-shade:#070f20; }
body[data-v21="true"][data-paper-color="explicit"] {
  --paper: var(--custom-paper, #fff) !important;
  --paper-ink: var(--custom-paper-ink, #141414) !important;
}
body[data-v21="true"][data-paper-color="explicit"] {
  --sheet-ink: var(--paper-ink) !important;
  --kit-ink: var(--paper-ink) !important;
  --kit-slug: var(--paper-ink) !important;
  --kit-character: var(--paper-ink) !important;
  --kit-dialogue: var(--paper-ink) !important;
}

/* Dark page color presets and dark explicit paper: force 100% legibility across all elements */
body[data-v21="true"][data-dark-paper="true"],
body[data-v21="true"][data-paper-color="clr-red"],
body[data-v21="true"][data-paper-color="clr-cobalt"],
body[data-v21="true"][data-paper-color="clr-forest"],
body[data-v21="true"][data-paper-color="clr-black"],
body[data-v21="true"][data-paper-color="clr-slate"],
body[data-v21="true"][data-paper-color="clr-blueprint"] {
  --ink-tint: var(--paper-ink) !important;
  --ink-mix: 100% !important;
  --sheet-ink: var(--paper-ink) !important;
  --kit-ink: var(--paper-ink) !important;
  --kit-slug: var(--paper-ink) !important;
  --kit-character: var(--paper-ink) !important;
  --kit-dialogue: var(--paper-ink) !important;
}

/* Night/Space: paper-ink is already light. Override literal dark tints */
body[data-v21="true"].night:not([data-paper-color]) {
  --ink-tint: var(--paper-ink) !important;
  --ink-mix: 100% !important;
  --sheet-ink: var(--paper-ink) !important;
  --kit-ink: var(--paper-ink) !important;
  --kit-slug: var(--paper-ink) !important;
  --kit-character: var(--paper-ink) !important;
  --kit-dialogue: var(--paper-ink) !important;
}

/* Section label caps variant */
body[data-v21="true"] .xd-label-caps {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
  opacity: .55;
}

/* Custom color picker row */
body[data-v21="true"] .xd-custom-color {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--v21-ink) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--v21-ink) 8%, transparent);
  cursor: pointer;
  transition: background 120ms ease;
  position: relative;
}
body[data-v21="true"] .xd-custom-color:hover {
  background: color-mix(in srgb, var(--v21-ink) 8%, transparent);
}
body[data-v21="true"] .xd-custom-color.on {
  background: color-mix(in srgb, var(--v21-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--v21-accent) 35%, transparent);
}
/* The continuous field speaks the same language as the swatches above it:
   same border, same radius, same soft top-light — and a hue ramp muted to
   the presets' own chroma instead of a neon rainbow. */
body[data-v21="true"] .xd-paper-field {
  position: relative;
  --paper-field-inset: calc(var(--xd-thumb-size) / 2);
  box-sizing: border-box;
  width: 100%;
  height: 68px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid var(--paper-border, rgba(55, 65, 51, .10));
  border-radius: var(--xd-control-radius);
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.58) 24%,
      rgba(255,255,255,.16) 43%,
      rgba(255,255,255,0) 52%,
      rgba(0,0,0,.16) 62%,
      rgba(0,0,0,.54) 80%,
      rgba(0,0,0,.96) 100%
    ),
    linear-gradient(
      to right,
      #d98a84 0%,
      #d8c483 16.666%,
      #93c69e 33.333%,
      #8bc4c2 50%,
      #92a6cf 66.666%,
      #bd97c9 83.333%,
      #d98a84 100%
    );
  box-shadow: inset 0 1px rgba(255,255,255,.62);
  cursor: crosshair;
  touch-action: none;
  transition: none;
}
body[data-v21="true"] .xd-paper-field::before {
  content: none;
}
body[data-v21="true"] .xd-paper-field:hover {
  border-color: color-mix(in srgb, var(--v21-accent) 38%, transparent);
}
body[data-v21="true"] .xd-paper-field:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #2c4a6e;
}
body[data-v21="true"] .xd-paper-field-dot {
  position: absolute;
  z-index: 1;
  left: clamp(
    var(--paper-field-inset),
    var(--paper-field-x, 0%),
    calc(100% - var(--paper-field-inset))
  );
  top: clamp(
    var(--paper-field-inset),
    var(--paper-field-y, 0%),
    calc(100% - var(--paper-field-inset))
  );
  box-sizing: border-box;
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  border: 1px solid var(--xd-thumb-border);
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  box-shadow: var(--xd-thumb-shadow);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body[data-v21="true"] #xd-paper-bay .xd-paper-section-head {
  margin-top: 18px;
}
body[data-v21="true"] #xd-paper-bay .xd-paper-transparency {
  -webkit-appearance: none;
  appearance: none;
  --xd-range-value: 0%;
  display: block;
  width: 100%;
  height: 16px;
  margin: 7px 0 2px;
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}
body[data-v21="true"] #xd-paper-bay .xd-paper-transparency::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--v21-accent) 0 var(--xd-range-value),
    color-mix(in srgb, var(--v21-ink) 62%, transparent) var(--xd-range-value) 100%
  );
}
body[data-v21="true"] #xd-paper-bay .xd-paper-transparency::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  margin-top: -5px;
  border: 1px solid var(--xd-thumb-border);
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] #xd-paper-bay .xd-paper-transparency::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v21-ink) 62%, transparent);
}
body[data-v21="true"] #xd-paper-bay .xd-paper-transparency::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--v21-accent);
}
body[data-v21="true"] #xd-paper-bay .xd-paper-transparency::-moz-range-thumb {
  width: var(--xd-thumb-size);
  height: var(--xd-thumb-size);
  border: 1px solid var(--xd-thumb-border);
  border-radius: 50%;
  background: var(--xd-thumb-fill);
  box-shadow: var(--xd-thumb-shadow);
}
body[data-v21="true"] #xd-paper-bay .xd-paper-transparency:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #2c4a6e;
}
body[data-v21="true"] .xd-page-color-input,
body[data-v21="true"] .xd-ink-color-input,
body[data-v21="true"] .xd-desk-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
body[data-v21="true"] .xd-color-bar {
  display: block;
  width: 44px;
  height: 16px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--v21-ink) 14%, transparent);
  flex-shrink: 0;
  pointer-events: none;
}
body[data-v21="true"] .xd-color-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--v21-ink);
  opacity: .65;
  pointer-events: none;
}
body[data-v21="true"] .xd-color-hex {
  font-size: 10px;
  font-family: var(--v21-mono, ui-monospace, monospace);
  color: var(--v21-ink);
  opacity: .4;
  margin-left: auto;
  pointer-events: none;
}

/* Compact toggle row used by Words controls. */
body[data-v21="true"] .xd-solarized-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 0 2px;
  cursor: pointer;
  border-top: 1px solid color-mix(in srgb, var(--v21-ink) 8%, transparent);
}
body[data-v21="true"] .xd-solarized-words {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
body[data-v21="true"] .xd-sol-desc {
  font-size: 9px;
  color: var(--v21-ink);
  opacity: .4;
  letter-spacing: .01em;
}


/* ── Theme expansion v3: twenty more rooms ─────────────────────────── */

body[data-v21="true"][data-theme="tomato"] {
  --v21-field-depth: #7a1f14;
  --v21-field: #7a1f14;
  --v21-accent: #ffb03a;
  --v21-accent-bright: #ffc35c;
  --v21-ink: #ffe9dc;
  --v21-chrome: rgba(66, 14, 8, 0.74);
  --v21-chrome-line: rgba(255, 230, 200, 0.13);
  --paper: #fff6ee;
  --paper-ink: #2a120c; --ink-tint: #2a120c; --ink-mix: 100%; --sheet-ink: #2a120c;
  --paper-shade: #7a1f14;
}
body[data-v21="true"][data-theme="cherry"] {
  --v21-field-depth: #a41e2b;
  --v21-field: #a41e2b;
  --v21-accent: #f2c14e;
  --v21-accent-bright: #ffd76a;
  --v21-ink: #ffecec;
  --v21-atmosphere:
    radial-gradient(72% 66% at 22% -8%, rgba(255,215,106,.14), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 48% 72%, rgba(40,0,4,.24));
  --v21-chrome: rgba(120, 16, 26, 0.70);
  --v21-chrome-line: rgba(255, 246, 244, 0.16);
  --paper: #fff6f4;
  --paper-ink: #33080c; --ink-tint: #33080c; --ink-mix: 100%; --sheet-ink: #33080c;
  --paper-shade: #a41e2b;
}
body[data-v21="true"][data-theme="marigold"] {
  --v21-field-depth: #d97a12;
  --v21-field: #d97a12;
  --v21-accent: #1f6e3c;
  --v21-accent-bright: #2f8f4f;
  --v21-ink: #3a2405;
  --v21-atmosphere:
    radial-gradient(70% 62% at 78% -6%, rgba(255,244,200,.35), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 44% 72%, rgba(90,45,0,.10));
  --v21-chrome: rgba(217, 122, 18, 0.55);
  --v21-chrome-line: rgba(255, 249, 234, 0.30);
  --paper: #fff9ea;
  --paper-ink: #3a2405; --ink-tint: #3a2405; --ink-mix: 100%; --sheet-ink: #3a2405;
  --paper-shade: #d97a12;
}
body[data-v21="true"][data-theme="signal"] {
  --v21-chrome: rgba(248, 250, 244, 0.72);
  --v21-chrome-line: rgba(65, 78, 61, 0.12);
  --paper: #ffffff;
  --paper-ink: #292d27; --ink-tint: #292d27; --ink-mix: 100%; --sheet-ink: #292d27;
  --paper-shade: #eef0e8;
}
body[data-v21="true"][data-theme="cobalt"] {
  --paper: #f4f8ff;
  --paper-ink: #14264e; --ink-tint: #14264e; --ink-mix: 100%; --sheet-ink: #14264e;
  --paper-shade: #2551b8;
}
body[data-v21="true"][data-theme="yellow"] {
  --v21-chrome: rgba(250, 240, 200, 0.72);
  --v21-chrome-line: rgba(100, 78, 0, 0.14);
  --paper: #fffdf2;
  --paper-ink: #292610; --ink-tint: #292610; --ink-mix: 100%; --sheet-ink: #292610;
  --paper-shade: #f0d35d;
}
body[data-v21="true"][data-theme="ice"] {
  --v21-chrome: rgba(240, 252, 252, 0.70);
  --v21-chrome-line: rgba(34, 110, 120, 0.12);
  --paper: #fbffff;
  --paper-ink: #173946; --ink-tint: #173946; --ink-mix: 100%; --sheet-ink: #173946;
  --paper-shade: #d9eff0;
}
body[data-v21="true"][data-theme="sand"] {
  --v21-chrome: rgba(240, 230, 205, 0.72);
  --v21-chrome-line: rgba(71, 53, 25, 0.14);
  --paper: #fbf5e6;
  --paper-ink: #332c22; --ink-tint: #332c22; --ink-mix: 100%; --sheet-ink: #332c22;
  --paper-shade: #ccb992;
}
body[data-v21="true"][data-theme="magenta"] {
  --v21-chrome: rgba(250, 244, 248, 0.70);
  --v21-chrome-line: rgba(122, 41, 104, 0.12);
  --paper: #fffafd;
  --paper-ink: #4d2943; --ink-tint: #4d2943; --ink-mix: 100%; --sheet-ink: #4d2943;
  --paper-shade: #eadde6;
}
body[data-v21="true"][data-theme="navy"] {
  --paper: #0f1a2e;
  --paper-ink: #f4efe4; --ink-tint: #f4efe4; --ink-mix: 100%; --sheet-ink: #f4efe4;
  --paper-shade: #15233c;
}
body[data-v21="true"][data-theme="oxblood"] {
  --paper: #2a0a10;
  --paper-ink: #fff1e8; --ink-tint: #fff1e8; --ink-mix: 100%; --sheet-ink: #fff1e8;
  --paper-shade: #4c121a;
}
body[data-v21="true"][data-theme="aubergine"] {
  --paper: #201028;
  --paper-ink: #f2e8f6; --ink-tint: #f2e8f6; --ink-mix: 100%; --sheet-ink: #f2e8f6;
  --paper-shade: #2e1939;
}
body[data-v21="true"][data-theme="forest"] {
  --paper: #0e221b;
  --paper-ink: #eef4e6; --ink-tint: #eef4e6; --ink-mix: 100%; --sheet-ink: #eef4e6;
  --paper-shade: #17362d;
}
body[data-v21="true"][data-theme="terminal"] {
  --paper: #04100a;
  --paper-ink: #c9f8db; --ink-tint: #c9f8db; --ink-mix: 100%; --sheet-ink: #c9f8db;
  --paper-shade: #07110d;
}
body[data-v21="true"][data-theme="graphite"] {
  --paper: #1d2124;
  --paper-ink: #eef2f0; --ink-tint: #eef2f0; --ink-mix: 100%; --sheet-ink: #eef2f0;
  --paper-shade: #292d31;
}
body[data-v21="true"][data-theme="mercury"] {
  --v21-field-depth: #b9bec2;
  --v21-field: #b9bec2;
  --v21-accent: #0f6f7a;
  --v21-accent-bright: #128894;
  --v21-ink: #23272b;
  --v21-atmosphere:
    radial-gradient(68% 64% at 80% 0%, rgba(255,255,255,.30), transparent 66%),
    linear-gradient(130deg, rgba(255,255,255,.14), transparent 44% 72%, rgba(35,45,55,.08));
  --v21-chrome: rgba(235, 238, 240, 0.75);
  --v21-chrome-line: rgba(35, 39, 43, 0.12);
  --paper: #f7f8f9;
  --paper-ink: #23272b; --ink-tint: #23272b; --ink-mix: 100%; --sheet-ink: #23272b;
  --paper-shade: #b9bec2;
}
body[data-v21="true"][data-theme="noir"] {
  --v21-field-depth: #0b0b0c;
  --v21-field: #0b0b0c;
  --v21-accent: #d8b24a;
  --v21-accent-bright: #f0c860;
  --v21-ink: #f2f2f0;
  --v21-atmosphere:
    radial-gradient(70% 60% at 50% -10%, rgba(216,178,74,.10), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.03), transparent 45% 75%, rgba(0,0,0,.30));
  --v21-chrome: rgba(14, 14, 16, 0.80);
  --v21-chrome-line: rgba(240, 240, 235, 0.12);
  --paper: #101012;
  --paper-ink: #f2f2f0; --ink-tint: #f2f2f0; --ink-mix: 100%; --sheet-ink: #f2f2f0;
  --paper-shade: #0b0b0c;
}
body[data-v21="true"][data-theme="parlor"] {
  --v21-field: #8d8171;
  --v21-accent: #6b5138;
  --v21-accent-bright: #8a6a45;
  --v21-ink: #f4ead8;
  --v21-atmosphere:
    radial-gradient(70% 60% at 20% -6%, rgba(255,248,230,.22), transparent 66%),
    linear-gradient(150deg, rgba(255,255,255,.10), transparent 46% 74%, rgba(40,30,18,.16));
  --v21-chrome: rgba(70, 60, 48, 0.70);
  --v21-chrome-line: rgba(244, 234, 216, 0.20);
  --paper: #f4ead8;
  --paper-ink: #3a3128; --ink-tint: #3a3128; --ink-mix: 100%; --sheet-ink: #3a3128;
  --paper-shade: #8d8171;
}
body[data-v21="true"][data-theme="warhol"] {
  --v21-field: #f2600a;
  --v21-accent: #00a6c0;
  --v21-accent-bright: #ff2d78;
  --v21-ink: #fff3f8;
  --v21-atmosphere:
    radial-gradient(60% 60% at 80% 6%, rgba(0,166,192,.20), transparent 66%),
    radial-gradient(50% 50% at 12% 90%, rgba(255,45,120,.18), transparent 70%);
  --v21-chrome: rgba(242, 96, 10, 0.60);
  --v21-chrome-line: rgba(255, 255, 255, 0.35);
  --paper: #fff3f8;
  --paper-ink: #c4006a; --ink-tint: #c4006a; --ink-mix: 100%; --sheet-ink: #c4006a;
  --paper-shade: #f2600a;
}


/* ── Theme expansion v3: twenty more rooms ─────────────────────────── */

body[data-v21="true"][data-theme="tomato"] {
  --v21-field-depth: #7a1f14;
  --v21-field: #7a1f14;
  --v21-accent: #ffb03a;
  --v21-accent-bright: #ffc35c;
  --v21-ink: #ffe9dc;
  --v21-chrome: rgba(66, 14, 8, 0.74);
  --v21-chrome-line: rgba(255, 230, 200, 0.13);
  --paper: #fff6ee;
  --paper-ink: #2a120c; --ink-tint: #2a120c; --ink-mix: 100%; --sheet-ink: #2a120c;
  --paper-shade: #7a1f14;
}
body[data-v21="true"][data-theme="cherry"] {
  --v21-field-depth: #a41e2b;
  --v21-field: #a41e2b;
  --v21-accent: #f2c14e;
  --v21-accent-bright: #ffd76a;
  --v21-ink: #ffecec;
  --v21-atmosphere:
    radial-gradient(72% 66% at 22% -8%, rgba(255,215,106,.14), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 48% 72%, rgba(40,0,4,.24));
  --v21-chrome: rgba(120, 16, 26, 0.70);
  --v21-chrome-line: rgba(255, 246, 244, 0.16);
  --paper: #fff6f4;
  --paper-ink: #33080c; --ink-tint: #33080c; --ink-mix: 100%; --sheet-ink: #33080c;
  --paper-shade: #a41e2b;
}
body[data-v21="true"][data-theme="marigold"] {
  --v21-field-depth: #d97a12;
  --v21-field: #d97a12;
  --v21-accent: #1f6e3c;
  --v21-accent-bright: #2f8f4f;
  --v21-ink: #3a2405;
  --v21-atmosphere:
    radial-gradient(70% 62% at 78% -6%, rgba(255,244,200,.35), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 44% 72%, rgba(90,45,0,.10));
  --v21-chrome: rgba(217, 122, 18, 0.55);
  --v21-chrome-line: rgba(255, 249, 234, 0.30);
  --paper: #fff9ea;
  --paper-ink: #3a2405; --ink-tint: #3a2405; --ink-mix: 100%; --sheet-ink: #3a2405;
  --paper-shade: #d97a12;
}
body[data-v21="true"][data-theme="signal"] {
  --v21-chrome: rgba(248, 250, 244, 0.72);
  --v21-chrome-line: rgba(65, 78, 61, 0.12);
  --paper: #ffffff;
  --paper-ink: #292d27; --ink-tint: #292d27; --ink-mix: 100%; --sheet-ink: #292d27;
  --paper-shade: #eef0e8;
}
body[data-v21="true"][data-theme="cobalt"] {
  --paper: #f4f8ff;
  --paper-ink: #14264e; --ink-tint: #14264e; --ink-mix: 100%; --sheet-ink: #14264e;
  --paper-shade: #2551b8;
}
body[data-v21="true"][data-theme="yellow"] {
  --v21-chrome: rgba(250, 240, 200, 0.72);
  --v21-chrome-line: rgba(100, 78, 0, 0.14);
  --paper: #fffdf2;
  --paper-ink: #292610; --ink-tint: #292610; --ink-mix: 100%; --sheet-ink: #292610;
  --paper-shade: #f0d35d;
}
body[data-v21="true"][data-theme="ice"] {
  --v21-chrome: rgba(240, 252, 252, 0.70);
  --v21-chrome-line: rgba(34, 110, 120, 0.12);
  --paper: #fbffff;
  --paper-ink: #173946; --ink-tint: #173946; --ink-mix: 100%; --sheet-ink: #173946;
  --paper-shade: #d9eff0;
}
body[data-v21="true"][data-theme="sand"] {
  --v21-chrome: rgba(240, 230, 205, 0.72);
  --v21-chrome-line: rgba(71, 53, 25, 0.14);
  --paper: #fbf5e6;
  --paper-ink: #332c22; --ink-tint: #332c22; --ink-mix: 100%; --sheet-ink: #332c22;
  --paper-shade: #ccb992;
}
body[data-v21="true"][data-theme="magenta"] {
  --v21-chrome: rgba(250, 244, 248, 0.70);
  --v21-chrome-line: rgba(122, 41, 104, 0.12);
  --paper: #fffafd;
  --paper-ink: #4d2943; --ink-tint: #4d2943; --ink-mix: 100%; --sheet-ink: #4d2943;
  --paper-shade: #eadde6;
}
body[data-v21="true"][data-theme="navy"] {
  --paper: #0f1a2e;
  --paper-ink: #f4efe4; --ink-tint: #f4efe4; --ink-mix: 100%; --sheet-ink: #f4efe4;
  --paper-shade: #15233c;
}
body[data-v21="true"][data-theme="oxblood"] {
  --paper: #2a0a10;
  --paper-ink: #fff1e8; --ink-tint: #fff1e8; --ink-mix: 100%; --sheet-ink: #fff1e8;
  --paper-shade: #4c121a;
}
body[data-v21="true"][data-theme="aubergine"] {
  --paper: #201028;
  --paper-ink: #f2e8f6; --ink-tint: #f2e8f6; --ink-mix: 100%; --sheet-ink: #f2e8f6;
  --paper-shade: #2e1939;
}
body[data-v21="true"][data-theme="forest"] {
  --paper: #0e221b;
  --paper-ink: #eef4e6; --ink-tint: #eef4e6; --ink-mix: 100%; --sheet-ink: #eef4e6;
  --paper-shade: #17362d;
}
body[data-v21="true"][data-theme="terminal"] {
  --paper: #04100a;
  --paper-ink: #c9f8db; --ink-tint: #c9f8db; --ink-mix: 100%; --sheet-ink: #c9f8db;
  --paper-shade: #07110d;
}
body[data-v21="true"][data-theme="graphite"] {
  --paper: #1d2124;
  --paper-ink: #eef2f0; --ink-tint: #eef2f0; --ink-mix: 100%; --sheet-ink: #eef2f0;
  --paper-shade: #292d31;
}
body[data-v21="true"][data-theme="mercury"] {
  --v21-field-depth: #b9bec2;
  --v21-field: #b9bec2;
  --v21-accent: #0f6f7a;
  --v21-accent-bright: #128894;
  --v21-ink: #23272b;
  --v21-atmosphere:
    radial-gradient(68% 64% at 80% 0%, rgba(255,255,255,.30), transparent 66%),
    linear-gradient(130deg, rgba(255,255,255,.14), transparent 44% 72%, rgba(35,45,55,.08));
  --v21-chrome: rgba(235, 238, 240, 0.75);
  --v21-chrome-line: rgba(35, 39, 43, 0.12);
  --paper: #f7f8f9;
  --paper-ink: #23272b; --ink-tint: #23272b; --ink-mix: 100%; --sheet-ink: #23272b;
  --paper-shade: #b9bec2;
}
/* == Final Draft ============================================================
   An homage for people arriving from Final Draft, so the first hour in this
   app costs them nothing. Final Draft ships four appearance modes - System,
   Day, Night and Midnight (finaldraft.com KB, "How do I customize the
   appearance of my Final Draft window"). The three real ones are below.

   The tell is not the palette, it is the ABSENCE of everything this app
   normally does: no atmosphere gradient, no warm light, no paper texture,
   near-opaque chrome, hairline rules instead of soft glass. Final Draft is a
   utility and looks like one. That flatness is the whole effect.

   Colours for page, text and toolbar follow the documented descriptions.
   The workspace grey behind the page is tuned by eye - Final Draft does not
   document it, and it was not sampled from their application.

   No logo, wordmark, or icon of theirs is reproduced anywhere. */

/* Day Mode - "black text and markings on a white page", white toolbar. */
body[data-v21="true"][data-theme="fd13"] {
  --v21-field: #8c9095;
  --v21-field-depth: #7e8287;
  --v21-warm-light: transparent;
  --v21-atmosphere: none;
  --v21-accent: #2f6fb2;
  --v21-accent-bright: #1f5f9f;
  --v21-chrome: rgba(255, 255, 255, 0.96);
  --v21-chrome-line: rgba(0, 0, 0, 0.16);
  --v21-ink: #1d1d1f;
  --bg: #8c9095;
  --bg-deep: #7e8287;
  --ink: #1d1d1f;
  --ink-soft: #4a4a4e;
  --ink-faint: #74747a;
  --paper: #ffffff;
  --paper-ink: #000000;
  --paper-shade: #6f7378;
  --paper-tex: none;
  --kit-ink: #000000;
  --kit-slug: #000000;
  --kit-character: #000000;
  --kit-dialogue: #000000;
  --kit-selection: #b4d5fe;
  --selection-ink: #000000;
  --ink-tint: #000000; --ink-mix: 100%; --sheet-ink: #000000;
}

/* Night Mode - "white text and markings on a dark grey page", black toolbar. */
body[data-v21="true"][data-theme="fd13-night"] {
  --v21-field: #232426;
  --v21-field-depth: #1b1c1e;
  --v21-warm-light: transparent;
  --v21-atmosphere: none;
  --v21-accent: #4a90d9;
  --v21-accent-bright: #6aa9e9;
  --v21-chrome: rgba(24, 24, 26, 0.96);
  --v21-chrome-line: rgba(255, 255, 255, 0.14);
  --v21-ink: #f2f2f4;
  --bg: #232426;
  --bg-deep: #1b1c1e;
  --ink: #f2f2f4;
  --ink-soft: #c9c9cd;
  --ink-faint: #94949a;
  --paper: #3a3d40;
  --paper-ink: #ffffff;
  --paper-shade: #151618;
  --paper-tex: none;
  --kit-ink: #ffffff;
  --kit-slug: #ffffff;
  --kit-character: #ffffff;
  --kit-dialogue: #ffffff;
  --kit-selection: #2f5d8c;
  --selection-ink: #ffffff;
  --ink-tint: #ffffff; --ink-mix: 100%; --sheet-ink: #ffffff;
}

/* Midnight Mode - "white text and markings on an almost-black page". */
body[data-v21="true"][data-theme="fd13-midnight"] {
  --v21-field: #0a0a0b;
  --v21-field-depth: #050506;
  --v21-warm-light: transparent;
  --v21-atmosphere: none;
  --v21-accent: #4a90d9;
  --v21-accent-bright: #6aa9e9;
  --v21-chrome: rgba(10, 10, 11, 0.96);
  --v21-chrome-line: rgba(255, 255, 255, 0.12);
  --v21-ink: #f2f2f4;
  --bg: #0a0a0b;
  --bg-deep: #050506;
  --ink: #f2f2f4;
  --ink-soft: #c4c4c8;
  --ink-faint: #8a8a90;
  --paper: #131315;
  --paper-ink: #ffffff;
  --paper-shade: #000000;
  --paper-tex: none;
  --kit-ink: #ffffff;
  --kit-slug: #ffffff;
  --kit-character: #ffffff;
  --kit-dialogue: #ffffff;
  --kit-selection: #2f5d8c;
  --selection-ink: #ffffff;
  --ink-tint: #ffffff; --ink-mix: 100%; --sheet-ink: #ffffff;
}

/* Final Draft has no soft glass. Chrome edges are hairlines, and the sheet
   never frosts, so the three modes hold their flatness at any Glass value. */
body[data-v21="true"][data-theme^="fd13"] .sheet {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0;
}
body[data-v21="true"][data-theme="noir"] {
  --v21-field-depth: #0b0b0c;
  --v21-field: #0b0b0c;
  --v21-accent: #d8b24a;
  --v21-accent-bright: #f0c860;
  --v21-ink: #f2f2f0;
  --v21-atmosphere:
    radial-gradient(70% 60% at 50% -10%, rgba(216,178,74,.10), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.03), transparent 45% 75%, rgba(0,0,0,.30));
  --v21-chrome: rgba(14, 14, 16, 0.80);
  --v21-chrome-line: rgba(240, 240, 235, 0.12);
  --paper: #101012;
  --paper-ink: #f2f2f0; --ink-tint: #f2f2f0; --ink-mix: 100%; --sheet-ink: #f2f2f0;
  --paper-shade: #0b0b0c;
}
body[data-v21="true"][data-theme="parlor"] {
  --v21-field: #8d8171;
  --v21-accent: #6b5138;
  --v21-accent-bright: #8a6a45;
  --v21-ink: #f4ead8;
  --v21-atmosphere:
    radial-gradient(70% 60% at 20% -6%, rgba(255,248,230,.22), transparent 66%),
    linear-gradient(150deg, rgba(255,255,255,.10), transparent 46% 74%, rgba(40,30,18,.16));
  --v21-chrome: rgba(70, 60, 48, 0.70);
  --v21-chrome-line: rgba(244, 234, 216, 0.20);
  --paper: #f4ead8;
  --paper-ink: #3a3128; --ink-tint: #3a3128; --ink-mix: 100%; --sheet-ink: #3a3128;
  --paper-shade: #8d8171;
}
body[data-v21="true"][data-theme="warhol"] {
  --v21-field: #f2600a;
  --v21-accent: #00a6c0;
  --v21-accent-bright: #ff2d78;
  --v21-ink: #fff3f8;
  --v21-atmosphere:
    radial-gradient(60% 60% at 80% 6%, rgba(0,166,192,.20), transparent 66%),
    radial-gradient(50% 50% at 12% 90%, rgba(255,45,120,.18), transparent 70%);
  --v21-chrome: rgba(242, 96, 10, 0.60);
  --v21-chrome-line: rgba(255, 255, 255, 0.35);
  --paper: #fff3f8;
  --paper-ink: #c4006a; --ink-tint: #c4006a; --ink-mix: 100%; --sheet-ink: #c4006a;
  --paper-shade: #f2600a;
}

/* ── The Hunt ─────────────────────────────────────────────────────────────── */
body[data-v21="true"] #filemenu .file-hunt-btn {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  margin-top: 4px;
}
body[data-v21="true"] #filemenu .file-hunt-panel {
  padding: 0;
}
body[data-v21="true"] #filemenu .hunt-count {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 4px;
}
body[data-v21="true"] #filemenu .hunt-status {
  padding: 8px 12px;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.4;
}
body[data-v21="true"] #filemenu .hunt-results {
  max-height: 320px;
  overflow-y: auto;
  padding: 0 4px;
}
body[data-v21="true"] #filemenu .hunt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.3;
  transition: background 120ms;
}
body[data-v21="true"] #filemenu .hunt-item:hover {
  background: var(--v21-chrome-hover, rgba(0,0,0,0.06));
}
body[data-v21="true"] #filemenu .hunt-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
body[data-v21="true"] #filemenu .hunt-item-path {
  font-size: 10px;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
body[data-v21="true"] #filemenu .hunt-item-meta {
  font-size: 10px;
  opacity: 0.5;
  white-space: nowrap;
}
body[data-v21="true"] #filemenu .hunt-item-kind {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.4;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid currentColor;
}
body[data-v21="true"] #filemenu .hunt-proposal {
  padding: 8px 10px;
  margin: 4px 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--v21-chrome-line, rgba(0,0,0,0.12));
}
body[data-v21="true"] #filemenu .hunt-proposal-name {
  font-size: 13px;
  font-weight: 600;
}
body[data-v21="true"] #filemenu .hunt-proposal-meta {
  font-size: 11px;
  opacity: 0.6;
  margin: 2px 0 6px;
}
body[data-v21="true"] #filemenu .hunt-proposal-files {
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.4;
  margin-bottom: 8px;
}
body[data-v21="true"] #filemenu .hunt-proposal-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: none;
  border: 1px solid var(--v21-chrome-line, rgba(0,0,0,0.15));
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
}
body[data-v21="true"] #filemenu .hunt-proposal-btn:hover {
  opacity: 1;
}
body[data-v21="true"] #filemenu .hunt-actions {
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
}
body[data-v21="true"] #filemenu .hunt-close-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  background: none;
  border: 1px solid var(--v21-chrome-line, rgba(0,0,0,0.15));
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}
body[data-v21="true"] #filemenu .hunt-close-btn:hover {
  opacity: 1;
}

/* ── Title Page editor modal ───────────────────────────────────────────── */
/* Follows the settings-drawer glass-card pattern exactly. No new fonts,
   no layout shift — the modal is hidden until opened, inert when closed. */

#titlepage-modal.tp-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 28, 18, .32);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
#titlepage-modal.tp-modal[hidden] { display: none; }
#titlepage-modal.tp-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.tp-card {
  width: min(640px, 92vw);
  max-height: min(720px, calc(100vh - 80px));
  overflow: hidden;
  color: var(--v21-ink, #2a3228);
  background: rgba(250, 251, 247, .82);
  border: 1px solid rgba(58, 69, 54, .10);
  border-radius: 17px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .76),
    12px 28px 52px -26px rgba(23, 39, 21, .42);
  backdrop-filter: blur(23px) saturate(1.08);
  -webkit-backdrop-filter: blur(23px) saturate(1.08);
  transform: translateY(12px) scale(.97);
  transition: transform .32s var(--v21-stage-ease);
}
#titlepage-modal.tp-modal.open .tp-card {
  transform: translateY(0) scale(1);
}

.tp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px 18px 13px;
  border-bottom: 1px solid rgba(61, 72, 56, .10);
}
.tp-head h2 {
  margin: 0;
  font: 650 15px/1.15 var(--ui, system-ui);
  letter-spacing: -.012em;
  color: var(--v21-ink, #2a3228);
}
.tp-kicker {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--v21-ink, #2a3228) 45%, transparent);
  font: 550 8px/1 var(--mono, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tp-done {
  font: 550 13px/1 var(--ui, system-ui);
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid rgba(61, 72, 56, .14);
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.tp-done:hover {
  background: rgba(255,255,255,.8);
}

.tp-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 340px;
  overflow: auto;
}

.tp-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 18px 18px;
  border-right: 1px solid rgba(61, 72, 56, .08);
}
.tp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-field > span {
  font: 550 10px/1 var(--ui, system-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--v21-ink, #2a3228) 52%, transparent);
}
.tp-field input,
.tp-field textarea {
  font: 400 14px/1.5 var(--ui, system-ui);
  padding: 7px 10px;
  border: 1px solid rgba(61, 72, 56, .14);
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  color: var(--v21-ink, #2a3228);
  outline: none;
  transition: border-color .15s;
  resize: vertical;
}
.tp-field input:focus,
.tp-field textarea:focus {
  border-color: rgba(61, 72, 56, .36);
  background: rgba(255,255,255,.85);
}
.tp-field textarea {
  min-height: 80px;
  font-size: 13px;
  line-height: 1.5;
}

.tp-preview-wrap {
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.tp-preview-label {
  font: 550 10px/1 var(--ui, system-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--v21-ink, #2a3228) 42%, transparent);
  margin-bottom: 12px;
}
.tp-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  border: 1px solid rgba(61, 72, 56, .08);
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  font-family: 'Courier Final Draft', 'Courier Prime', Courier, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--v21-ink, #2a3228);
  min-height: 200px;
}
.tp-preview-title {
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-top: 30%;
}
.tp-preview-by {
  text-align: center;
  margin-top: 4px;
}
.tp-preview-author {
  text-align: center;
  margin-top: 2px;
}
.tp-preview-spacer {
  height: 1.6em;
}
.tp-preview-contact {
  text-align: left;
  align-self: flex-start;
  margin-top: 0;
  font-size: 11px;
}
.tp-preview-date {
  text-align: left;
  align-self: flex-start;
  font-size: 11px;
}

/* Print title page styles (already existed; extend for contact/date) */
#printtitle .tp-contact {
  margin-top: 4em;
  text-align: left;
  font-size: 12pt;
  line-height: 1.5;
}
#printtitle .tp-date {
  margin-top: 1em;
  text-align: left;
  font-size: 12pt;
}

/* Responsive: stack on narrow viewports */
@media (max-width: 580px) {
  .tp-body { grid-template-columns: 1fr; }
  .tp-fields { border-right: none; border-bottom: 1px solid rgba(61,72,56,.08); }
}


/* Background accordion — same quiet instrument grammar as Paper and Words. */
body[data-v21="true"] #xd-bg-bay .xd-acc-inner {
  padding: 0 14px;
  transition: padding 520ms var(--v21-stage-ease);
}
body[data-v21="true"].bg-open #xd-bg-bay .xd-acc-inner {
  padding: 13px 14px 16px;
}
body[data-v21="true"] #xd-bg-bay .xd-bg-section-head {
  min-height: 18px;
  margin: 13px 0 7px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--v21-ink) 8%, transparent);
}
body[data-v21="true"] #xd-bg-bay .xd-acc-rule + .xd-bg-section-head {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}
body[data-v21="true"] #xd-bg-bay #xd-desk-colors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
body[data-v21="true"] #xd-bg-bay #xd-desk-colors .xd-paper {
  height: 44px;
  border-radius: var(--xd-control-radius);
}
body[data-v21="true"] #experience-drawer .xd-gradients {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}
body[data-v21="true"] #experience-drawer .xd-gradient {
  height: 42px;
  border: 1px solid var(--xd-sample-border);
  border-radius: var(--xd-control-radius);
  box-shadow: inset 0 1px rgba(255,255,255,.34);
  transition: transform 150ms cubic-bezier(.2,.9,.2,1), border-color 150ms ease-out, box-shadow 150ms ease-out;
}
body[data-v21="true"] #experience-drawer .xd-gradient:hover,
body[data-v21="true"] #experience-drawer .xd-bg-backdrops .xd-art:hover {
  transform: translateY(-1px);
}
body[data-v21="true"] #experience-drawer .xd-gradient.on {
  border-color: color-mix(in srgb, var(--v21-accent) 62%, transparent);
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--v21-accent) 30%, transparent), inset 0 1px rgba(255,255,255,.42);
}
body[data-v21="true"] .xd-potd-date-badge {
  font: 600 8.5px/1 var(--mono);
  color: color-mix(in srgb, var(--v21-accent) 80%, var(--v21-ink));
  background: color-mix(in srgb, var(--v21-accent) 12%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .02em;
}

body[data-v21="true"] .xd-potd-spotlight {
  margin: 6px 0 14px;
}

/* One nice big painting: the image IS the card, words sit quietly beneath. */
body[data-v21="true"] .xd-potd-card {
  overflow: hidden;
  border-radius: var(--xd-card-radius, 10px);
  background: color-mix(in srgb, var(--v21-ink) 4%, var(--xd-sample-surface));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.4);
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease-out, border-color 140ms ease-out;
  cursor: pointer;
}

body[data-v21="true"] .xd-potd-card:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.45);
}

body[data-v21="true"] .xd-potd-card.on {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--v21-accent), 0 6px 18px -3px rgba(0,0,0,0.35);
}

body[data-v21="true"] .xd-potd-art {
  height: 158px;
  background-image: var(--art);
  background-size: cover;
  background-position: center;
}

body[data-v21="true"] .xd-potd-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  min-width: 0;
}

body[data-v21="true"] .xd-potd-words {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-v21="true"] .xd-potd-title {
  font: 650 10.5px/1.2 var(--ui);
  color: var(--v21-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-v21="true"] .xd-potd-artist {
  font: 500 9px/1.2 var(--ui);
  color: color-mix(in srgb, var(--v21-ink) 65%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-v21="true"] .xd-potd-btn {
  white-space: nowrap;
  font-size: 9px;
  padding: 5px 9px;
}

/* ── Art Theme Filter Chips ────────────────────────────────────────── */
body[data-v21="true"] .xd-theme-filters {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 2px 2px 8px 0;
  margin: 4px 0 6px;
  scrollbar-width: none;
}
body[data-v21="true"] .xd-theme-filters::-webkit-scrollbar {
  display: none;
}
body[data-v21="true"] .xd-theme-filters .xd-chip {
  flex-shrink: 0;
  font-size: 8.5px;
  padding: 4px 8px;
  border-radius: 999px;
}

body[data-v21="true"] #experience-drawer .xd-bg-backdrops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  margin: 0;
}
body[data-v21="true"] #experience-drawer .xd-bg-backdrops .xd-art {
  height: 54px;
  border-radius: var(--xd-control-radius);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255,255,255,.28);
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease-out, border-color 140ms ease-out;
  cursor: pointer;
}
body[data-v21="true"] #experience-drawer .xd-bg-backdrops .xd-art:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255,255,255,.5);
  border-color: rgba(255, 255, 255, 0.65);
  z-index: 2;
}
body[data-v21="true"] #experience-drawer .xd-bg-backdrops .xd-art.on {
  outline: 0;
  border-color: #ffffff;
  box-shadow: 0 0 0 2.5px var(--v21-accent), 0 4px 12px -2px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,.5);
  transform: scale(1.02);
}
body[data-v21="true"] #xd-bg-bay .xd-desk {
  margin: 8px 0 0;
}
body[data-v21="true"] #xd-bg-bay .xd-custom {
  height: 30px;
  border-radius: var(--xd-control-radius);
  background: var(--xd-sample-surface);
}
body[data-v21="true"] #xd-bg-bay .xd-user-arts {
  padding-bottom: 2px;
}
/* ── Motion: looping clips + living backdrops ─────────────────────────── */
body[data-v21="true"] .xd-motion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 4px 4px 4px 0;
}
body[data-v21="true"] .xd-motion {
  position: relative;
  height: 54px;
  overflow: hidden;
  padding: 0;
  border-radius: var(--xd-control-radius);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255,255,255,.28);
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease-out, border-color 140ms ease-out;
  cursor: pointer;
}
body[data-v21="true"] .xd-motion:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255,255,255,.5);
  border-color: rgba(255, 255, 255, 0.65);
  z-index: 2;
}
body[data-v21="true"] .xd-motion.on {
  outline: 0;
  border-color: #ffffff;
  box-shadow: 0 0 0 2.5px var(--v21-accent), 0 4px 12px -2px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,.5);
  transform: scale(1.02);
}
body[data-v21="true"] .xd-motion .xd-motion-preview,
body[data-v21="true"] .xd-motion canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
body[data-v21="true"] .xd-motion-live {
  background: linear-gradient(160deg, #17201f, #090d0d 72%);
}
/* The stage layer: one muted loop (or living canvas) behind the paper. */
#urn-motion-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#urn-motion-layer video,
#urn-motion-layer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-v21="true"] #xd-bg-bay .xd-bg-atmosphere {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--xd-sample-border);
  border-radius: var(--xd-control-radius);
  background: var(--xd-sample-surface);
  box-shadow: inset 0 1px rgba(255,255,255,.58);
}
body[data-v21="true"] #xd-bg-bay .xd-bg-atmo-channel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
}
body[data-v21="true"] #xd-bg-bay .xd-bg-atmo-label {
  color: color-mix(in srgb, var(--v21-ink) 68%, transparent);
  font: 580 9px/1 var(--ui);
}
body[data-v21="true"] #xd-bg-bay .xd-bg-atmo-slider {
  width: 100%;
  height: 16px;
  margin: 0;
  accent-color: var(--v21-accent);
}
body[data-v21="true"] #xd-bg-bay .xd-chip:focus-visible,
body[data-v21="true"] #xd-bg-bay .xd-gradient:focus-visible,
body[data-v21="true"] #xd-bg-bay .xd-art:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #2c4a6e;
}
@media (max-width: 720px) {
  body[data-v21="true"] #experience-drawer .xd-bg-backdrops {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* While Background is open, the next peer remains a quiet accordion—not a CTA. */
body[data-v21="true"].bg-open #experience-drawer #xd-themes {
  color: color-mix(in srgb, var(--v21-ink) 72%, transparent);
  background: color-mix(in srgb, var(--v21-ink) 4%, rgba(255,255,255,.30));
  border-color: color-mix(in srgb, var(--v21-ink) 10%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.52);
}
body[data-v21="true"].bg-open #experience-drawer #xd-themes:hover {
  background: color-mix(in srgb, var(--v21-ink) 7%, rgba(255,255,255,.34));
}


/* Writing rail tooltips — clean hover badge */
body[data-v21="true"] #wpcluster .tbtn::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 20;
  width: max-content;
  max-width: 190px;
  padding: 5px 8px 6px;
  border: 1px solid rgba(58, 69, 54, 0.14);
  border-radius: 6px;
  color: #1f261d;
  background: rgba(252, 250, 247, 0.94);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.8),
    0 6px 18px -6px rgba(23, 39, 21, 0.35);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  font: 600 10px/1 var(--ui);
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-4px, -50%, 0);
  pointer-events: none;
  transition: opacity 120ms ease-out 60ms, transform 140ms ease-out 60ms;
}

body[data-v21="true"] #wpcluster .tbtn:hover::after,
body[data-v21="true"] #wpcluster .tbtn:focus-visible::after {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}
body[data-v21="true"].ai-tools-open #wpcluster .wp-ai,
body[data-v21="true"].ai-tools-open #wpcluster .wp-ai-inner {
  overflow: visible;
}
/* Tooltip glass is deliberately light: own its ink instead of inheriting kit ink. */
body[data-v21="true"] #wpcluster .tbtn::after {
  color: #20261f;
  background: rgba(252, 250, 247, .94);
  border-color: rgba(32, 38, 31, .16);
  text-shadow: none;
  font-weight: 650;
}
body[data-v21="true"] #wpcluster .tbtn-ai-tool::after {
  color: #482333;
  background: rgba(253, 247, 249, .95);
  border-color: rgba(141, 41, 73, .20);
}


/* Pure Translucent Liquid Glass Toolbar & Precision Buttons with Ambient Backlight */
body[data-v21="true"] #wpcluster {
  position: absolute !important;
  top: 14px !important;
  left: calc(50% + 4.25in + var(--v21-toolbar-gap, 14px)) !important;
  right: auto !important;
  width: 34px !important;
  padding: 4px 3px 5px !important;
  gap: 3px !important;
  /* Lit from underneath, not rimmed.
     This carried three stacked outer glows - a hard white ring, an 18px white
     halo, and a 38px coloured halo with 6px of spread - plus a white border
     and brightness(1.25). All the light came off the perimeter while the
     glyphs blocked it, which is the visual grammar of a promotional badge.
     Now the panel pools light behind the glyph column, spills a little onto
     the desk beneath it, and the rim is a whisper. */
  border: 1px solid var(--v21-frost-edge) !important;
  border-radius: 999px !important;
  color: var(--v21-ink);
  /* One frost, evenly. The radial pool that replaced the old rim glow was
     still uneven - bright in the middle, dim at both ends - which left the
     top and bottom tools sitting on a darker surface than the middle ones.
     --v21-frost is a single value, derived from the desk hue so it reads as
     frosty blue-white rather than plain white, and pinned light enough that
     every tool on it clears 4.5:1. */
  background: var(--v21-frost) !important;
  box-shadow:
    /* light escaping underneath, tinted by whatever the backdrop is bouncing */
    0 14px 30px -8px color-mix(in oklch, var(--v21-accent, var(--bounce, #7da576)) 55%, transparent),
    /* the object's own occlusion on the desk; key light is upper-left */
    0 10px 26px -10px rgba(0, 0, 0, 0.42),
    /* one soft interior lift - no ring */
    inset 0 1px 1px rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.45) !important;
  transform: translateX(0);
  opacity: 1;
  z-index: 1 !important;
  visibility: visible;
  transition:
    transform 320ms var(--v21-stage-ease),
    opacity 280ms var(--v21-stage-ease),
    box-shadow 300ms var(--v21-stage-ease),
    visibility 0s 0s !important;
  will-change: transform, opacity, box-shadow;
}

body[data-v21="true"].side-by-side #wpcluster,
body[data-v21="true"][data-side-by-side="true"] #wpcluster {
  left: calc(50% + 8.5in + 24px + var(--v21-toolbar-gap, 14px)) !important;
}

body[data-v21="true"] #wpcluster .tbtn {
  width: 28px !important;
  height: 28px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #1a221c !important;
  /* The B, the I and the U are what the light comes out of. An omnidirectional
     halo behind a dark letterform reads as backlit; the old offset shadow read
     as lit from above, which is why the light seemed to live on the edges. */
  /* No halo. On a bright frost a white bloom does nothing, and a coloured one
     reads as a smudge. The light now comes from the frost itself and from
     underneath the strip; the glyphs just need to be crisp on it. */
  text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font: 600 11.5px/1 var(--ui) !important;
  cursor: pointer;
  position: relative;
  transition:
    transform 120ms cubic-bezier(0.2, 0.9, 0.2, 1),
    background-color 120ms ease-out,
    border-color 120ms ease-out,
    box-shadow 120ms ease-out !important;
}

body[data-v21="true"] #wpcluster .tbtn > svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
  filter: none;
}

body[data-v21="true"] #wpcluster .tbtn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.80), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

body[data-v21="true"] #wpcluster .tbtn:active {
  transform: scale(0.94);
  background: rgba(0, 0, 0, 0.08) !important;
}

body[data-v21="true"] #wpcluster .tbtn.on,
body[data-v21="true"] #wpcluster .tbtn[aria-pressed="true"] {
  color: #123814 !important;
  background: rgba(80, 160, 80, 0.35) !important;
  border-color: rgba(80, 160, 80, 0.65) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 0 10px rgba(100, 200, 100, 0.35) !important;
}

/* Left exactly as it was. The frost is tuned around this red, not the
   other way round. */
body[data-v21="true"] #wpcluster #t-ai {
  color: var(--v21-tool-alert, #a03022) !important;
}

body[data-v21="true"] #wpcluster #t-ai:hover {
  background: rgba(220, 70, 50, 0.22) !important;
  border-color: rgba(220, 70, 50, 0.45) !important;
  color: #b83222 !important;
}

body[data-v21="true"] #wpcluster #t-ai[aria-pressed="true"] {
  color: #ffffff !important;
  background: rgba(215, 60, 45, 0.90) !important;
  border-color: rgba(180, 40, 30, 0.95) !important;
  box-shadow: 0 4px 14px rgba(215, 60, 45, 0.40), inset 0 1px rgba(255, 255, 255, 0.6) !important;
}

body[data-v21="true"] #wpcluster .tbtn-ai-tool {
  color: #a03022 !important;
}

body[data-v21="true"] #wpcluster .tbtn-ai-tool:hover {
  background: rgba(220, 70, 50, 0.20) !important;
  border-color: rgba(220, 70, 50, 0.40) !important;
}

body[data-v21="true"] #wpcluster .tbtn-ai-tool.on,
body[data-v21="true"] #wpcluster .tbtn-ai-tool[aria-pressed="true"] {
  color: #ffffff !important;
  background: rgba(215, 60, 45, 0.88) !important;
  border-color: rgba(180, 40, 30, 0.95) !important;
  box-shadow: 0 4px 14px rgba(215, 60, 45, 0.35) !important;
}

/* ── Dynamic Radiant Highlighter ─────────────────────────────────────────── */
body[data-v21="true"] span[data-fx-highlight="1"],
body[data-v21="true"] .sheet .blk span[data-fx-highlight="1"],
body[data-v21="true"] .sheet .blk [style*="background"],
body[data-v21="true"] mark,
span[data-fx-highlight="1"] {
  background: var(--highlighter-color, rgba(255, 144, 0, 0.88)) !important;
  background-color: var(--highlighter-color, rgba(255, 144, 0, 0.88)) !important;
  color: var(--highlighter-ink, #111a14) !important;
  box-shadow: 0 0 0 2px var(--highlighter-color, rgba(255, 144, 0, 0.88)) !important;
  border-radius: 2px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

body[data-v21="true"] span[data-fx-highlight="1"] *,
body[data-v21="true"] .sheet .blk [style*="background"] *,
body[data-v21="true"] mark * {
  color: var(--highlighter-ink, #111a14) !important;
}


/* == Ten Figma-board candidates (2026-08-19) - live audition; Patrick sign-off pending == */
body[data-v21="true"][data-theme="ember"] {
  --v21-field: #3a1010;
  --v21-field-depth: #2c0c0c;
  --v21-accent: #e84233;
  --v21-accent-bright: #ec6458;
  --v21-ink: #f5d6d0;
  --v21-chrome: rgba(32, 9, 9, 0.74);
  --v21-chrome-line: rgba(245, 214, 208, 0.13);
  --paper: #2a0c0c;
  --paper-ink: #f5d6d0; --ink-tint: #f5d6d0; --ink-mix: 100%; --sheet-ink: #f5d6d0;
  --paper-shade: #3a1010;
}
body[data-v21="true"][data-theme="vermillion"] {
  --v21-field: #f2ddd5;
  --v21-field-depth: #cbbab3;
  --v21-accent: #c0392b;
  --v21-accent-bright: #cb5d51;
  --v21-ink: #6b2a1a;
  --v21-chrome: rgba(249, 240, 236, 0.72);
  --v21-chrome-line: rgba(107, 42, 26, 0.14);
  --paper: #fff5f0;
  --paper-ink: #6b2a1a; --ink-tint: #6b2a1a; --ink-mix: 100%; --sheet-ink: #6b2a1a;
  --paper-shade: #f2ddd5;
}
body[data-v21="true"][data-theme="harvest"] {
  --v21-field: #f5e0c0;
  --v21-field-depth: #cebca1;
  --v21-accent: #c67c22;
  --v21-accent-bright: #d0944a;
  --v21-ink: #5c3a10;
  --v21-chrome: rgba(250, 241, 227, 0.72);
  --v21-chrome-line: rgba(92, 58, 16, 0.14);
  --paper: #fff8ed;
  --paper-ink: #5c3a10; --ink-tint: #5c3a10; --ink-mix: 100%; --sheet-ink: #5c3a10;
  --paper-shade: #f5e0c0;
}
body[data-v21="true"][data-theme="furnace"] {
  --v21-field: #2d1a08;
  --v21-field-depth: #221406;
  --v21-accent: #f39c12;
  --v21-accent-bright: #f5ae3d;
  --v21-ink: #f5dfc8;
  --v21-chrome: rgba(25, 14, 4, 0.74);
  --v21-chrome-line: rgba(245, 223, 200, 0.13);
  --paper: #1f1208;
  --paper-ink: #f5dfc8; --ink-tint: #f5dfc8; --ink-mix: 100%; --sheet-ink: #f5dfc8;
  --paper-shade: #2d1a08;
}
body[data-v21="true"][data-theme="canopy"] {
  --v21-field: #0d2818;
  --v21-field-depth: #0a1e12;
  --v21-accent: #27ae60;
  --v21-accent-bright: #4ebd7d;
  --v21-ink: #d0f0d8;
  --v21-chrome: rgba(7, 22, 13, 0.74);
  --v21-chrome-line: rgba(208, 240, 216, 0.13);
  --paper: #0a1f12;
  --paper-ink: #d0f0d8; --ink-tint: #d0f0d8; --ink-mix: 100%; --sheet-ink: #d0f0d8;
  --paper-shade: #0d2818;
}
body[data-v21="true"][data-theme="greenhouse"] {
  --v21-field: #c8e6c0;
  --v21-field-depth: #a8c1a1;
  --v21-accent: #2ecc71;
  --v21-accent-bright: #54d58b;
  --v21-ink: #1a4028;
  --v21-chrome: rgba(230, 244, 227, 0.72);
  --v21-chrome-line: rgba(26, 64, 40, 0.14);
  --paper: #eaf5e5;
  --paper-ink: #1a4028; --ink-tint: #1a4028; --ink-mix: 100%; --sheet-ink: #1a4028;
  --paper-shade: #c8e6c0;
}
body[data-v21="true"][data-theme="coral"] {
  --v21-field: #f5dde0;
  --v21-field-depth: #cebabc;
  --v21-accent: #e76f7a;
  --v21-accent-bright: #eb8992;
  --v21-ink: #5c2a30;
  --v21-chrome: rgba(250, 240, 241, 0.72);
  --v21-chrome-line: rgba(92, 42, 48, 0.14);
  --paper: #fff0f2;
  --paper-ink: #5c2a30; --ink-tint: #5c2a30; --ink-mix: 100%; --sheet-ink: #5c2a30;
  --paper-shade: #f5dde0;
}
body[data-v21="true"][data-theme="rose"] {
  --v21-field: #3a1028;
  --v21-field-depth: #2c0c1e;
  --v21-accent: #e84393;
  --v21-accent-bright: #ec65a6;
  --v21-ink: #f5d0e5;
  --v21-chrome: rgba(32, 9, 22, 0.74);
  --v21-chrome-line: rgba(245, 208, 229, 0.13);
  --paper: #2a0c1e;
  --paper-ink: #f5d0e5; --ink-tint: #f5d0e5; --ink-mix: 100%; --sheet-ink: #f5d0e5;
  --paper-shade: #3a1028;
}
body[data-v21="true"][data-theme="saffron"] {
  --v21-field: #f5eac0;
  --v21-field-depth: #cec5a1;
  --v21-accent: #d4a017;
  --v21-accent-bright: #dcb141;
  --v21-ink: #5c4a10;
  --v21-chrome: rgba(250, 246, 227, 0.72);
  --v21-chrome-line: rgba(92, 74, 16, 0.14);
  --paper: #fffde8;
  --paper-ink: #5c4a10; --ink-tint: #5c4a10; --ink-mix: 100%; --sheet-ink: #5c4a10;
  --paper-shade: #f5eac0;
}
body[data-v21="true"][data-theme="terracotta"],
body[data-v22="true"][data-theme="terracotta"] {
  --v21-field: #e8ccb5;
  --v21-field-depth: #c3ab98;
  --v21-accent: #c0613a;
  --v21-accent-bright: #cb7d5d;
  --v21-ink: #4a2810;
  --v21-chrome: rgba(245, 232, 222, 0.72);
  --v21-chrome-line: rgba(74, 40, 16, 0.14);
  --paper: #f8ece0;
  --paper-ink: #4a2810; --ink-tint: #4a2810; --ink-mix: 100%; --sheet-ink: #4a2810;
  --paper-shade: #e8ccb5;
}
body[data-v21="true"][data-theme="blueprint-night"],
body[data-v22="true"][data-theme="blueprint-night"] {
  --v21-field: #0a1628;
  --v21-field-depth: #070f1c;
  --v21-accent: #00d2ff;
  --v21-accent-bright: #33e1ff;
  --v21-ink: #dceeff;
  --v21-chrome: rgba(10, 22, 40, 0.76);
  --v21-chrome-line: rgba(220, 238, 255, 0.12);
  --paper: #0b192e;
  --paper-ink: #dceeff; --ink-tint: #dceeff; --ink-mix: 100%; --sheet-ink: #dceeff;
  --paper-shade: #0a1628;
  --highlighter-color: rgba(0, 225, 255, 0.88);
  --highlighter-ink: #041628;
}
body[data-v21="true"][data-theme="rose-noir"],
body[data-v22="true"][data-theme="rose-noir"] {
  --v21-field: #2c0c16;
  --v21-field-depth: #1e080f;
  --v21-accent: #ff69b4;
  --v21-accent-bright: #ff85c2;
  --v21-ink: #f8d2dc;
  --v21-chrome: rgba(44, 12, 22, 0.76);
  --v21-chrome-line: rgba(248, 210, 220, 0.12);
  --paper: #1e080f;
  --paper-ink: #f8d2dc; --ink-tint: #f8d2dc; --ink-mix: 100%; --sheet-ink: #f8d2dc;
  --paper-shade: #2c0c16;
  --highlighter-color: rgba(255, 105, 180, 0.88);
  --highlighter-ink: #22040d;
}
body[data-v21="true"][data-theme="solar-dark"],
body[data-v22="true"][data-theme="solar-dark"] {
  --v21-field: #002b36;
  --v21-field-depth: #001f27;
  --v21-accent: #b58900;
  --v21-accent-bright: #cb9d0c;
  --v21-ink: #93a1a1;
  --v21-chrome: rgba(0, 43, 54, 0.76);
  --v21-chrome-line: rgba(147, 161, 161, 0.12);
  --paper: #073642;
  --paper-ink: #93a1a1; --ink-tint: #93a1a1; --ink-mix: 100%; --sheet-ink: #93a1a1;
  --paper-shade: #002b36;
  --highlighter-color: rgba(181, 137, 0, 0.90);
  --highlighter-ink: #00141a;
}
body[data-v21="true"][data-theme="monochrome"],
body[data-v22="true"][data-theme="monochrome"] {
  --v21-field: #ffffff;
  --v21-field-depth: #ececec;
  --v21-accent: #111111;
  --v21-accent-bright: #000000;
  --v21-ink: #000000;
  --v21-chrome: rgba(255, 255, 255, 0.88);
  --v21-chrome-line: rgba(0, 0, 0, 0.16);
  --paper: #ffffff;
  --paper-ink: #000000; --ink-tint: #000000; --ink-mix: 100%; --sheet-ink: #000000;
  --paper-shade: #f0f0f0;
  --highlighter-color: rgba(255, 230, 0, 0.92);
  --highlighter-ink: #111111;
}


/* == The sheet swap =========================================================
   Stacked <-> side-by-side. app.js measures each sheet, inverts it with a
   transform, then releases, so the pages glide from where they actually were
   into their new places instead of snapping. Motion reuses the house camera
   curve - no second spring.

   Backdrop-filter is suspended while the sheets move: a bounded frost plane
   in motion splits the lighting field and leaves a compositor seam at the
   page edge, the same failure the open-drawer rule above already avoids. */
body[data-v21="true"].sheets-swapping #zoomwrap,
body[data-v21="true"].sheets-swapping #pages,
body[data-v21="true"].sheets-swapping .sheet,
body[data-v21="true"].sheets-swapping #wpcluster {
  transition: none !important;
}

body[data-v21="true"].sheets-swapping .sheet,
body[data-v21="true"].sheets-sliding .sheet {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-v21="true"].sheets-sliding .sheet,
body[data-v21="true"].sheets-sliding #wpcluster {
  transition: transform var(--v21-camera-duration) var(--v21-camera-ease) !important;
  will-change: transform;
}

/* Nothing is clickable mid-flight; the caret and selection are left alone. */
body[data-v21="true"].sheets-swapping #pages,
body[data-v21="true"].sheets-sliding #pages {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-v21="true"].sheets-sliding .sheet,
  body[data-v21="true"].sheets-sliding #wpcluster {
    transition: none !important;
  }
}


/* == Quiet chrome ===========================================================
   The header and footer tuck under the screen edges while writing and slide
   back when the cursor nears the top or bottom (or when a bar holds focus, an
   open menu, or a mid-drag press). JS owns the chrome-*-hidden classes; the
   motion is the house camera curve. The bars are in normal flow and the body
   never scrolls, so the translate costs no reflow and shows only more desk. */
/* Out of flow entirely. The first version only translated the bars, which
   left their grid tracks behind as empty bands at the top and bottom of the
   screen - hidden bars that still held their seats. Fixed positioning
   collapses the auto tracks in #app's auto/1fr/auto grid, so the deck takes
   the full viewport and the desk runs edge to edge. The deck's own interior
   padding still keeps the page clear of a summoned bar. */
body[data-v21="true"].chrome-quiet #topbar,
body[data-v21="true"].chrome-quiet #statusbar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 21;
  transition: transform var(--v21-camera-duration) var(--v21-camera-ease);
  will-change: transform;
}
body[data-v21="true"].chrome-quiet #topbar { top: 0; }
body[data-v21="true"].chrome-quiet #statusbar { bottom: 0; }
body[data-v21="true"].chrome-quiet.chrome-top-hidden #topbar {
  transform: translateY(calc(-100% - 8px));
}
body[data-v21="true"].chrome-quiet.chrome-bottom-hidden #statusbar {
  transform: translateY(calc(100% + 8px));
}
body[data-v21="true"].chrome-quiet.chrome-instant #topbar,
body[data-v21="true"].chrome-quiet.chrome-instant #statusbar {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body[data-v21="true"].chrome-quiet #topbar,
  body[data-v21="true"].chrome-quiet #statusbar {
    transition: none !important;
  }
}

/* ---- Scene scope (the Ghost, narrowed to one scene) ----------------------
   A scene heading on the Shadow page is a handle into that scene's own
   history; the strip label wears an ✕ while scoped and is the way back.
   The Working page gets nothing — no cursor, no hover, no handles. */
body[data-v21="true"].ghost-mode #ghost-shadow .blk[data-type="scene"] {
  cursor: pointer;
}
body[data-v21="true"].ghost-mode #ghost-shadow .blk[data-type="scene"]:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-v21="true"] #ghost-label.ghost-scoped {
  cursor: pointer;
}

/* ---- Scene lighting in the Ghost cascade ---------------------------------
   A lit page is a window left on in the night house: warm candle-glow
   borrowed from the Now palette, kept deliberately below Now itself so
   the working paper still reads as home. Static glow only — nothing
   animates, so reduced-motion needs no special case beyond killing the
   inherited transitions. */

#ghost-cascade .gc-node.gc-lit .gc-page {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffe9b8 55%, transparent),
    0 0 14px 3px color-mix(in srgb, #ffd98f 34%, transparent),
    0 0 36px 8px color-mix(in srgb, #ffc46a 15%, transparent);
}

/* a faint warm frame just inside the paper edge (5px pre-scale ≈ 1.25px on a miniature) */
#ghost-cascade .gc-node.gc-lit .gc-page-inner {
  box-shadow: inset 0 0 0 5px color-mix(in srgb, #ffe9b8 28%, transparent);
}

#ghost-cascade .gc-node.gc-lit .gc-cap-title {
  color: color-mix(in srgb, #ffe9b8 82%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #ghost-cascade .gc-node.gc-lit .gc-page,
  #ghost-cascade .gc-node.gc-lit:hover .gc-page {
    transition: none;
  }
}

/* leaning closer to the lit window: more candle through the glass, wider spill */
#ghost-cascade .gc-node.gc-lit:hover .gc-page {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffe9b8 68%, transparent),
    0 0 16px 4px color-mix(in srgb, #ffd98f 44%, transparent),
    0 0 46px 11px color-mix(in srgb, #ffc46a 22%, transparent);
}

/* ---- Cascade chrome: trace + scene label --------------------------------- */

/* trace — sits left of the close circle wearing the same night glass, but pill-shaped */
#ghost-cascade-trace {
  position: absolute;
  top: 18px;
  right: 64px;
  z-index: 2;
  appearance: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #dbe7ff 30%, transparent);
  background: color-mix(in srgb, #0a0f1f 55%, transparent);
  color: color-mix(in srgb, #dbe7ff 85%, transparent);
  font: 600 11px var(--mono);
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
}

#ghost-cascade-trace:hover,
#ghost-cascade-trace:focus-visible {
  border-color: color-mix(in srgb, #dbe7ff 60%, transparent);
  color: #eaf1ff;
}

/* the house has been burned by display:flex eating [hidden] — this always wins */
#ghost-cascade-trace[hidden] {
  display: none !important;
}

/* scene label — names whose history you're looking at; quiet corner mono, untouchable */
#ghost-cascade-scene {
  position: absolute;
  top: 26px;
  left: 22px;
  z-index: 2;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 10.5px/1.4 var(--mono);
  color: color-mix(in srgb, #dbe7ff 58%, transparent);
  pointer-events: none;
}

#ghost-cascade-scene[hidden] {
  display: none !important;
}

/* ---- Ghost ship menu ------------------------------------------------------
   Day-world paper for the shadow page: borrows the app menu's daylight
   language (--surface, --line, blush hover) instead of the cascade's
   night glass, because it opens over the lit Shadow page, not the sky. */

.ghost-ship-menu {
  position: fixed;
  z-index: 9600;
  min-width: 180px;
  padding: 4px;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(1.10);
  -webkit-backdrop-filter: blur(24px) saturate(1.10);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--hi), var(--shadow);
}

.ghost-ship-menu button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  font: 500 13px var(--ui);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.ghost-ship-menu button:hover {
  background: var(--blush);
}

.ghost-ship-menu .hint {
  font: 500 10px/1.4 var(--mono);
  color: var(--ink-faint);
  padding: 2px 12px 6px;
}